/* =========================================================
   Notouro — coming-soon page
   Built on top of styles.css design tokens; adds only what
   the shared stylesheet doesn't already provide.
   ========================================================= */

.cs{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 0 32px;
  position:relative;
}

.cs-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:620px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
}

.cs-wrap.in{opacity:1; transform:translateY(0)}

.cs-mark{width:60px;height:60px;margin-bottom:22px}
.cs-mark .tw{stroke:var(--signal);fill:none}
.cs-mark .tower-light{stroke:var(--amber);animation:towerlight 2.6s ease-in-out infinite}

.cs-word{
  font-family:"Archivo",sans-serif;
  font-weight:900;
  font-size:2rem;
  letter-spacing:-0.02em;
  margin-bottom:14px;
}

.cs-eyebrow{margin-bottom:40px}

.cs h1{
  font-size:clamp(1.9rem,4.4vw,2.6rem);
  max-width:16ch;
  margin-bottom:20px;
  color:var(--paper);
}

.cs-sub{
  font-family:"Instrument Sans",system-ui,sans-serif;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.6;
  max-width:48ch;
  margin-bottom:8px;
}

.cs-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid var(--line);
  width:100%;
  max-width:460px;
}

.cs-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:"JetBrains Mono",monospace;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--muted-2);
}

.cs-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cs-dot.on{background:var(--signal);box-shadow:0 0 0 3px rgba(79,227,193,.15)}
.cs-dot.building{background:var(--amber);animation:towerlight 2.6s ease-in-out infinite}

.cs-foot{
  text-align:center;
  padding-top:28px;
}

.cs-social{
  justify-content:center;
  margin:0 0 16px;
}

@media (prefers-reduced-motion: reduce){
  .cs-mark .tower-light,
  .cs-dot.building{animation:none; opacity:.9}
}

@media(max-width:480px){
  .cs-status{gap:16px 22px}
}