/* ============================================================
   08 — LETTERFORM · room.css
   Type that is grown, not set. Pin-field relief, iron on slate.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("/vendor/fonts/Fraunces-Variable.woff2") format("woff2-variations"),
       url("/vendor/fonts/Fraunces-Variable.woff2") format("woff2"),
       url("/vendor/fonts/Fraunces-Variable.ttf") format("truetype-variations"),
       url("/vendor/fonts/Fraunces-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/vendor/fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("/vendor/fonts/Inter-Variable.woff2") format("woff2"),
       url("/vendor/fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/vendor/fonts/SpaceGrotesk-Variable.woff2") format("woff2-variations"),
       url("/vendor/fonts/SpaceGrotesk-Variable.woff2") format("woff2"),
       url("/vendor/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/vendor/fonts/Newsreader-Variable.woff2") format("woff2-variations"),
       url("/vendor/fonts/Newsreader-Variable.woff2") format("woff2"),
       url("/vendor/fonts/Newsreader-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/vendor/fonts/Newsreader-Italic-Variable.woff2") format("woff2-variations"),
       url("/vendor/fonts/Newsreader-Italic-Variable.woff2") format("woff2"),
       url("/vendor/fonts/Newsreader-Italic-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root{
  --bg:#0a0908;
  --bg-hi:#17140f;
  --plate:#0e0c0a;
  --ink:#efe8dc;
  --ink-dim:#a89e8d;
  --ink-faint:#6b6255;
  --accent:#caa063;
  --accent-dim:#8a6f47;
  --line:rgba(239,232,220,0.12);
  --line-strong:rgba(239,232,220,0.22);
  --danger:#c97a5c;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"Space Grotesk",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --lit:"Newsreader",Georgia,serif;
  --radius:2px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--bg);
  color-scheme:dark;
}

body{
  margin:0;
  min-height:100svh;
  background:
    radial-gradient(120% 90% at 50% 8%, var(--bg-hi) 0%, var(--bg) 55%, #060504 100%);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------------- chrome ---------------- */
.chrome{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.15rem 1.35rem;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  pointer-events:none;
  mix-blend-mode:difference;
}
.chrome a, .chrome span{
  pointer-events:auto;
  color:var(--ink);
  text-decoration:none;
  opacity:0.78;
  transition:opacity 0.25s ease;
}
.chrome a:hover, .chrome a:focus-visible{ opacity:1; }
.chrome a:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }

/* ---------------- layout shell ---------------- */
main{
  display:flex;
  flex-direction:column;
}

section{
  position:relative;
  padding:clamp(4.5rem,9vw,7rem) clamp(1.25rem,5vw,4rem);
}

.section-inner{
  max-width:74rem;
  margin:0 auto;
}

/* ---------------- hero ---------------- */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(1.75rem,4vw,3rem);
  padding-top:clamp(6rem,12vw,8rem);
}

.hero-stage{
  position:relative;
  width:100%;
  height:clamp(360px,62vh,720px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(80% 90% at 50% 38%, #171310 0%, var(--plate) 62%, #060504 100%);
  overflow:hidden;
  box-shadow:0 40px 100px -40px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.02);
}

.hero-stage canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.hero-grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}

.hero-frame-label{
  position:absolute;
  bottom:0.85rem; left:0.95rem;
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:0.5em;
  pointer-events:none;
}
.hero-frame-label .dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px 1px var(--accent);
  animation:pulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hero-frame-label .dot{ animation:none; }
}
@keyframes pulse{
  0%,100%{ opacity:0.4; transform:scale(0.85); }
  50%{ opacity:1; transform:scale(1.1); }
}

.hero-caption{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end;
}

.kicker{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 0.85rem;
}

.hero-caption h1{
  margin:0;
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  line-height:1.15;
  color:var(--ink);
  letter-spacing:-0.01em;
}

.hero-note{
  margin:0;
  font-family:var(--lit);
  font-style:italic;
  font-weight:340;
  font-size:clamp(1.02rem,1.6vw,1.2rem);
  line-height:1.62;
  color:var(--ink-dim);
}

.pin-count{
  color:var(--ink);
  font-style:normal;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line-strong);
}

/* ---------------- station ---------------- */
.station{
  border-top:1px solid var(--line);
}

.station-head{
  max-width:34rem;
  margin-bottom:2.25rem;
}

.station-head h2{
  font-family:var(--serif);
  font-weight:360;
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  margin:0 0 0.6rem;
  color:var(--ink);
}

.station-head p{
  font-family:var(--lit);
  font-style:italic;
  font-size:1.02rem;
  line-height:1.6;
  color:var(--ink-dim);
  margin:0;
}

.station-panel{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}

.station-form{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}

.input-row{
  position:relative;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:0.6rem;
  transition:border-color 0.25s ease;
}
.input-row:focus-within{ border-color:var(--accent); }

#word-input{
  flex:1;
  background:transparent;
  border:0;
  outline:0;
  color:var(--ink);
  font-family:var(--serif);
  font-weight:480;
  font-size:clamp(1.5rem,4vw,2.1rem);
  letter-spacing:0.02em;
  text-transform:uppercase;
  padding:0.2rem 0;
  min-width:0;
}
#word-input::placeholder{
  color:var(--ink-faint);
  font-weight:340;
  opacity:1;
}

.char-count{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
  padding-left:0.75rem;
  white-space:nowrap;
}

.station-actions{
  display:flex;
  gap:0.75rem;
  margin-top:0.3rem;
}

button{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:0.72rem 1.15rem;
  cursor:pointer;
  transition:border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
button:hover, button:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
}
button:focus-visible{ outline:1px solid var(--accent); outline-offset:2px; }
button:disabled{
  opacity:0.35;
  cursor:default;
  border-color:var(--line);
  color:var(--ink-faint);
}

button.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#191309;
  font-weight:600;
}
button.primary:hover, button.primary:focus-visible{
  background:#dcb379;
  border-color:#dcb379;
  color:#191309;
}
button.primary:disabled{
  background:transparent;
  color:var(--ink-faint);
}

.station-hint{
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.08em;
  color:var(--ink-faint);
  margin:0.15rem 0 0;
  min-height:1.4em;
}
.station-hint[data-state="error"]{ color:var(--danger); }
.station-hint[data-state="motion"]{ color:var(--accent-dim); }

.station-stage{
  position:relative;
  height:clamp(280px,42vh,460px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:radial-gradient(80% 90% at 50% 42%, #141110 0%, var(--plate) 65%, #060504 100%);
  overflow:hidden;
}
.station-stage canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.station-stage .empty-cue{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:center;
  padding:1rem;
  pointer-events:none;
  transition:opacity 0.4s ease;
}
.station-stage.has-word .empty-cue{ opacity:0; }

/* ---------------- notes ---------------- */
.notes{
  border-top:1px solid var(--line);
}

.notes h2{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 2.25rem;
}

.notes-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,2.75rem);
}

.note h3{
  font-family:var(--serif);
  font-weight:440;
  font-style:italic;
  font-size:1.05rem;
  margin:0 0 0.75rem;
  color:var(--accent);
}

.note p{
  font-family:var(--sans);
  font-size:0.92rem;
  line-height:1.68;
  color:var(--ink-dim);
  margin:0;
}

footer.room-footer{
  padding:2.5rem clamp(1.25rem,5vw,4rem) 4rem;
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:center;
}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .hero-caption{
    grid-template-columns:1fr;
  }
  .station-panel{
    grid-template-columns:1fr;
  }
  .notes-grid{
    grid-template-columns:1fr;
    gap:2.25rem;
  }
}

@media (max-width:480px){
  .hero-stage{ height:52vh; min-height:320px; }
  .chrome{ padding:0.9rem 1rem; font-size:0.6rem; }
  section{ padding-left:1.1rem; padding-right:1.1rem; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}