/* ============================================================================
   WOKE STOIC — "THE VIGIL"
   Cinematic art direction system. Authored, not templated.
   Concept: content is not placed on the dark; it emerges from it.
   ==========================================================================*/

/* --- 01 · TOKENS ------------------------------------------------------- */
:root{
  /* Ground — five depths of black, never one flat #000 */
  --void:      #050506;   /* absolute ground, page base */
  --pitch:     #08080a;   /* recessed panels */
  --ash:       #0d0d10;   /* raised surfaces */
  --smoke:     #141419;   /* interactive surfaces */
  --slate:     #1c1c22;   /* borders at rest, chips */

  /* Light — bone, not white. White is a lie in candlelight. */
  --bone:      #ede7da;
  --linen:     #cfc7b6;
  --ossuary:   #8c877d;
  --grave:     #55524c;
  --whisper:   #34322e;

  /* The four accents. Each owns a world. Never mixed in one composition. */
  --ember:     #b23a1b;   /* HORROR / brand — oxidized blood-rust */
  --ember-hot: #e8603a;
  --cathode:   #4fe0b0;   /* FREQUENCIES — neurofunk, data, live states */
  --reliquary: #6b4bb0;   /* FIELD NOTES — paranormal, liturgical violet */
  --wound:     #8e1420;   /* CASE FILES — arterial, true crime */

  --accent:      var(--ember);
  --accent-soft: color-mix(in oklab, var(--accent) 22%, transparent);
  --accent-haze: color-mix(in oklab, var(--accent) 9%, transparent);

  /* Type — one superfamily, two weights apart.
     Archivo Black is the blocky voice; Archivo is the same skeleton at reading
     weight, so display and body agree instead of contrasting. */
  --display: "Archivo Black", "Arial Black", Impact, "Helvetica Neue", sans-serif;
  --body:    "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Scale — 1.333 perfect fourth, viewport-fluid */
  --t-xs:   clamp(.68rem, .66rem + .1vw,  .76rem);
  --t-sm:   clamp(.8rem,  .77rem + .15vw, .9rem);
  --t-base: clamp(.95rem, .9rem + .25vw,  1.08rem);
  --t-lg:   clamp(1.2rem, 1.1rem + .5vw,  1.55rem);
  --t-xl:   clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
  --t-2xl:  clamp(2.4rem, 1.8rem + 3vw,   4.4rem);
  --t-3xl:  clamp(3.4rem, 2rem + 7vw,     8rem);
  --t-mega: clamp(4.5rem, 1rem + 15vw,    17rem);

  /* Rhythm */
  --gut:  clamp(1.1rem, .6rem + 2vw, 2.4rem);
  --bay:  clamp(4rem, 2rem + 9vw, 11rem);   /* the gutter of dread */
  --rail: clamp(3.2rem, 2rem + 3vw, 5.5rem);/* left vigil rail width */
  --max:  1680px;

  /* Motion — breath (slow in, hold) and dread (fast out) */
  --breath: cubic-bezier(.16,1,.3,1);
  --dread:  cubic-bezier(.7,0,.84,0);
  --swell:  cubic-bezier(.65,.05,.36,1);
  --t-fast: .28s; --t-mid: .62s; --t-slow: 1.1s; --t-glacial: 1.9s;

  --hair: 1px solid color-mix(in oklab, var(--bone) 11%, transparent);
  --hair-lit: 1px solid color-mix(in oklab, var(--bone) 26%, transparent);
}

[data-world="frequencies"]{ --accent: var(--cathode); }
[data-world="fieldnotes"] { --accent: var(--reliquary); }
[data-world="casefiles"]  { --accent: var(--wound); }
[data-world="horror"]     { --accent: var(--ember); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; }
}

body{
  margin:0; background:var(--void); color:var(--linen);
  font-family:var(--body); font-size:var(--t-base); line-height:1.62;
  font-weight:380; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* --- 02 · MATERIALS: grain, haze, lantern, vignette --------------------- */
/* Every surface in this world is photographed, not rendered. Grain is the
   binder that makes type, video and UI share one emulsion. */
.grain{
  position:fixed; inset:-150%; z-index:9000; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainDrift 7s steps(6) infinite;
}
@keyframes grainDrift{
  0%{transform:translate(0,0)}   16%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-4%)} 50%{transform:translate(-2%,-2%)}
  66%{transform:translate(3%,3%)}  83%{transform:translate(-4%,1%)}
  100%{transform:translate(0,0)}
}
/* Volumetric haze — a room with air in it */
.haze{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% -10%, color-mix(in oklab,var(--bone) 5%,transparent) 0%, transparent 55%),
    radial-gradient(90% 60% at 92% 6%, var(--accent-haze) 0%, transparent 60%);
  mix-blend-mode:screen; opacity:.55;
}
/* Lantern — the cursor is the only light source in the room */
.lantern{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0;
  transition:opacity 1.4s var(--breath);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    color-mix(in oklab,var(--bone) 7%,transparent) 0%,
    color-mix(in oklab,var(--accent) 4%,transparent) 38%, transparent 72%);
  mix-blend-mode:screen;
}
body.lit .lantern{ opacity:1; }
.vignette{
  position:fixed; inset:0; z-index:8000; pointer-events:none;
  background:radial-gradient(130% 105% at 50% 42%, transparent 42%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.86) 100%);
}

/* --- 03 · TYPE ---------------------------------------------------------- */
/* Archivo Black carries its weight in the letterform, so it is never bolded
   further — it is tightened instead. Negative tracking is what makes a heavy
   grotesque read as one solid block rather than a row of letters. */
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; color:var(--bone);
  letter-spacing:-.022em; line-height:1.02; margin:0; }
.display{ font-family:var(--display); letter-spacing:-.02em; }

/* Sized so a two-line title plus its dek and actions still clear the fold.
   --t-mega is reserved for type that is decoration, not information. */
/* A black weight fills its em box far more than a didone did: sub-1 leading
   collides, and tracking below -.02em closes the counters. Both are looser
   here than they were for the serif, on purpose. */
.hero-type{
  font-size:var(--t-3xl); line-height:1; letter-spacing:-.02em;
  font-weight:400; color:var(--bone); margin:0; text-transform:uppercase;
  text-shadow:0 0 90px color-mix(in oklab,var(--accent) 30%,transparent);
}
/* The signature move survives the change of voice: solid noun, outlined
   modifier. On a blocky grotesque the hollow slab reads harder than it did
   as an italic serif. */
.hero-type em{ font-style:normal; color:transparent;
  -webkit-text-stroke:1.5px color-mix(in oklab,var(--bone) 62%,transparent); }
.ghost{ font-style:normal; color:transparent;
  -webkit-text-stroke:1.5px color-mix(in oklab,var(--bone) 62%,transparent); }

.eyebrow{
  font-family:var(--mono); font-size:var(--t-xs); text-transform:uppercase;
  letter-spacing:.42em; color:var(--ossuary); font-weight:400;
  display:flex; align-items:center; gap:.9em;
}
.eyebrow::before{ content:""; width:2.4em; height:1px;
  background:linear-gradient(90deg,var(--accent),transparent); flex:none; }
.eyebrow.bare::before{ display:none; }

.dek{ font-size:var(--t-lg); line-height:1.44; color:var(--linen);
  font-weight:300; max-width:46ch; }
.meta{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--grave); }
.lede{ font-size:var(--t-lg); line-height:1.5; color:var(--bone); font-weight:300; }

/* Text that reveals like a body surfacing in water */
.reveal{ display:block; overflow:hidden; }
.reveal > *{ display:block; transform:translateY(105%) rotate(1.4deg);
  transition:transform var(--t-glacial) var(--breath); }
.reveal.in > *{ transform:none; }
.fade{ opacity:0; transform:translateY(26px);
  transition:opacity 1.2s var(--breath), transform 1.2s var(--breath); }
.fade.in{ opacity:1; transform:none; }
.wipe{ clip-path:inset(0 100% 0 0); transition:clip-path 1.4s var(--breath); }
.wipe.in{ clip-path:inset(0 0 0 0); }

/* --- 04 · LAYOUT -------------------------------------------------------- */
/* padding-inline, never the `padding` shorthand: .shell and .bay have equal
   specificity, and a shorthand here would zero out .bay's vertical rhythm
   depending only on source order. */
.shell{ max-width:var(--max); margin:0 auto; padding-inline:var(--gut);
  position:relative; z-index:3; }
.bay{ padding-block:var(--bay); }
/* Asymmetric editorial grid — never centered, never symmetrical */
.grid{ display:grid; gap:var(--gut); grid-template-columns:repeat(12,1fr); }
.c-1-5{grid-column:1/6} .c-1-7{grid-column:1/8} .c-1-8{grid-column:1/9}
.c-2-8{grid-column:2/9} .c-4-13{grid-column:4/13} .c-6-13{grid-column:6/13}
.c-7-13{grid-column:7/13} .c-8-13{grid-column:8/13} .c-full{grid-column:1/-1}
@media (max-width:900px){ .grid > *{ grid-column:1/-1!important; } }

/* --- 05 · THE VIGIL RAIL (persistent left chrome) ----------------------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:600;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; padding:1.4rem 0;
  border-right:var(--hair); background:linear-gradient(180deg,var(--void),var(--pitch));
  mix-blend-mode:normal;
}
.rail__mark{ font-family:var(--display); font-size:1rem; color:var(--bone);
  writing-mode:vertical-rl; letter-spacing:.2em; text-transform:uppercase; }
.rail__clock{ font-family:var(--mono); font-size:var(--t-xs); color:var(--grave);
  writing-mode:vertical-rl; letter-spacing:.28em; }
.rail__pulse{ width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-soft); animation:pulse 2.8s infinite; }
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--accent-soft)}
  70%{box-shadow:0 0 0 16px transparent} 100%{box-shadow:0 0 0 0 transparent}
}
body.has-rail{ padding-left:var(--rail); }
@media (max-width:820px){ .rail{ display:none; } body.has-rail{ padding-left:0; } }

/* --- 06 · MASTHEAD ------------------------------------------------------ */
.masthead{
  position:fixed; top:0; left:var(--rail); right:0; z-index:700;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--gut); backdrop-filter:blur(14px) saturate(.7);
  background:linear-gradient(180deg, color-mix(in oklab,var(--void) 88%,transparent), transparent);
  transition:transform var(--t-mid) var(--breath), background var(--t-mid) linear;
}
@media (max-width:820px){ .masthead{ left:0; } }
.masthead.hidden{ transform:translateY(-104%); }
.masthead.solid{ background:color-mix(in oklab,var(--void) 93%,transparent);
  border-bottom:var(--hair); }
.wordmark{ font-family:var(--display); font-size:1rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone); text-decoration:none; white-space:nowrap; }
.wordmark span{ color:var(--accent); }
.nav{ display:flex; gap:clamp(.9rem,2vw,2.2rem); align-items:center; }
.nav a{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.24em;
  text-transform:uppercase; color:var(--ossuary); text-decoration:none;
  position:relative; padding:.35rem 0; transition:color var(--t-fast) linear;
}
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right var(--t-mid) var(--breath); }
.nav a:hover{ color:var(--bone); } .nav a:hover::after{ right:0; }
.nav a[aria-current]{ color:var(--bone); } .nav a[aria-current]::after{ right:0; }
@media (max-width:760px){ .nav{ display:none; } }

/* --- 07 · HERO ---------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(3rem,7vh,7rem); overflow:hidden; }
.hero__plate{ position:absolute; inset:0; z-index:0; }
.hero__plate img,.hero__plate video{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.72) contrast(1.22) brightness(.5); transform:scale(1.08);
  animation:driftIn 22s var(--breath) forwards; }
@keyframes driftIn{ to{ transform:scale(1); } }
.hero__plate::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, color-mix(in oklab,var(--void) 72%,transparent) 0%, transparent 34%,
      color-mix(in oklab,var(--void) 55%,transparent) 68%, var(--void) 100%),
    linear-gradient(90deg, var(--void) 0%, transparent 46%);
}
/* Halation — light bleeding into the emulsion around the accent */
.hero__glow{ position:absolute; z-index:1; inset:auto -20% -30% -20%; height:60%;
  background:radial-gradient(60% 100% at 30% 100%, var(--accent-haze), transparent 70%);
  filter:blur(40px); }
.hero__body{ position:relative; z-index:4; width:100%; }
.hero__foot{ display:flex; gap:var(--gut); align-items:flex-end;
  justify-content:space-between; flex-wrap:wrap; margin-top:clamp(1.4rem,4vh,3rem);
  padding-top:1.4rem; border-top:var(--hair); }

/* --- 08 · SURFACES: obsidian glass, plaster, film cell ------------------ */
.panel{
  background:linear-gradient(160deg, var(--ash), var(--pitch) 70%);
  border:var(--hair); position:relative; overflow:hidden;
}
.panel::before{ /* raking light from top-left, always one source */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(148deg, color-mix(in oklab,var(--bone) 7%,transparent) 0%,
    transparent 32%);
}
.plaster{ background:
  radial-gradient(120% 120% at 20% 0%, #17161a, #0a0a0c 70%);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--bone) 8%,transparent); }

/* --- 09 · THE CARD: "specimen" ------------------------------------------ */
/* Not a card. A specimen under glass, lit from one side, catalogued. */
.spec{ position:relative; display:block; text-decoration:none; color:inherit;
  isolation:isolate; }
.spec__plate{ position:relative; overflow:hidden; aspect-ratio:4/5;
  background:var(--pitch); border:var(--hair); }
.spec__plate img,.spec__plate video{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.85) contrast(1.15) brightness(.62);
  transform:scale(1.03);
  transition:transform 1.4s var(--breath), filter 1.1s var(--breath); }
.spec:hover .spec__plate img,.spec:hover .spec__plate video{
  transform:scale(1.09); filter:grayscale(.15) contrast(1.05) brightness(.86); }
.spec__plate::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%, color-mix(in oklab,var(--void) 88%,transparent));
  opacity:.9; transition:opacity var(--t-mid) linear; }
.spec:hover .spec__plate::after{ opacity:.65; }
/* the scan — a single line of light passes over the specimen on hover */
.spec__plate::before{
  content:""; position:absolute; left:0; right:0; top:-2px; height:2px; z-index:3;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0; transition:opacity .2s linear;
}
.spec:hover .spec__plate::before{ opacity:.9; animation:scan 1.5s var(--swell); }
@keyframes scan{ from{ transform:translateY(0) } to{ transform:translateY(60vh) } }
.spec__no{ position:absolute; top:.9rem; left:.9rem; z-index:4;
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.2em;
  color:var(--bone); mix-blend-mode:difference; }
.spec__runtime{ position:absolute; bottom:.9rem; right:.9rem; z-index:4;
  font-family:var(--mono); font-size:var(--t-xs); color:var(--bone);
  background:color-mix(in oklab,var(--void) 70%,transparent);
  padding:.22rem .5rem; border:var(--hair); backdrop-filter:blur(6px); }
.spec__title{ font-family:var(--display); font-size:var(--t-lg); color:var(--bone);
  margin:.9rem 0 .35rem; line-height:1.14; letter-spacing:-.022em;
  transition:color var(--t-fast) linear; }
.spec:hover .spec__title{ color:var(--accent); }
.spec__kicker{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.26em;
  text-transform:uppercase; color:var(--grave); }
.spec--tall .spec__plate{ aspect-ratio:2/3; }
.spec--wide .spec__plate{ aspect-ratio:16/9; }

/* --- 10 · RAILS (horizontal scroll) ------------------------------------- */
.railrow{ display:flex; gap:var(--gut); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1.2rem; scrollbar-width:thin;
  scrollbar-color:var(--slate) transparent; }
.railrow > *{ flex:0 0 clamp(220px,26vw,360px); scroll-snap-align:start; }
.railrow::-webkit-scrollbar{ height:2px; }
.railrow::-webkit-scrollbar-thumb{ background:var(--slate); }

/* --- 11 · BUTTONS ------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.8em; cursor:pointer;
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.28em;
  text-transform:uppercase; color:var(--bone); text-decoration:none;
  padding:1.05em 1.9em; border:var(--hair-lit); background:transparent;
  position:relative; overflow:hidden; transition:color var(--t-mid) var(--breath),
    border-color var(--t-mid) linear;
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:var(--accent); transform:translateY(101%);
  transition:transform var(--t-mid) var(--breath); }
.btn:hover{ color:var(--void); border-color:var(--accent); }
.btn:hover::before{ transform:translateY(0); }
.btn--solid{ background:var(--accent); color:var(--void); border-color:var(--accent); }
.btn--solid::before{ background:var(--bone); }
.btn--ghost{ border-color:transparent; padding-inline:0; }
.btn--ghost::before{ display:none; }
.btn--ghost:hover{ color:var(--accent); }
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; }

/* --- 12 · PLAYER -------------------------------------------------------- */
.player{ position:relative; background:#000; border:var(--hair); overflow:hidden; }
.player video{ width:100%; display:block; aspect-ratio:16/9; background:#000; }
.player__scrim{ position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(0deg, color-mix(in oklab,var(--void) 78%,transparent), transparent 60%);
  transition:opacity var(--t-mid) linear; }
.player.playing .player__scrim{ opacity:0; pointer-events:none; }
.play{ width:clamp(64px,9vw,110px); aspect-ratio:1; border-radius:50%;
  border:var(--hair-lit); background:color-mix(in oklab,var(--void) 45%,transparent);
  backdrop-filter:blur(10px); display:grid; place-items:center; cursor:pointer;
  transition:transform var(--t-mid) var(--breath), background var(--t-mid) linear; }
.play:hover{ transform:scale(1.09); background:var(--accent); }
.play svg{ width:28%; fill:var(--bone); }
.play:hover svg{ fill:var(--void); }
.bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--slate); }
.bar__fill{ height:100%; width:0; background:var(--accent);
  box-shadow:0 0 14px var(--accent); }

/* --- 13 · WAVEFORM (frequencies) ---------------------------------------- */
.wave{ display:flex; align-items:flex-end; gap:2px; height:clamp(70px,12vh,140px);
  cursor:pointer; }
.wave i{ flex:1; background:var(--whisper); min-height:2px;
  transition:background .18s linear, transform .3s var(--breath); }
.wave i.on{ background:var(--accent); box-shadow:0 0 10px var(--accent-soft); }
.wave:hover i{ transform:scaleY(1.06); }
.track{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--gut);
  align-items:center; padding:1.3rem 0; border-bottom:var(--hair);
  transition:background var(--t-fast) linear; }
.track:hover{ background:linear-gradient(90deg, var(--accent-haze), transparent 60%); }
.track__no{ font-family:var(--mono); font-size:var(--t-xs); color:var(--grave); }

/* --- 14 · CASE FILE / EVIDENCE treatments ------------------------------- */
.evidence{ border:var(--hair); padding:clamp(1.2rem,3vw,2.4rem);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.28) 3px 4px),
    linear-gradient(150deg,#101014,#08080a);
  position:relative; }
.evidence::after{ content:"CONFIDENTIAL"; position:absolute; right:-1.2rem; top:2.2rem;
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.5em;
  color:color-mix(in oklab,var(--wound) 55%,transparent);
  border:1px solid color-mix(in oklab,var(--wound) 40%,transparent);
  padding:.4rem .9rem; transform:rotate(6deg); pointer-events:none; }
.redact{ background:var(--bone); color:transparent; user-select:none;
  transition:background .5s var(--breath), color .5s var(--breath); }
.redact:hover{ background:transparent; color:var(--ember-hot); }
.stamp{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.3em;
  text-transform:uppercase; padding:.35em .8em; border:1px solid currentColor;
  color:var(--accent); display:inline-block; }

/* --- 15 · MARQUEE (the drone) ------------------------------------------- */
.marquee{ overflow:hidden; border-block:var(--hair); padding:1.1rem 0;
  --dur:34s; }
.marquee__in{ display:flex; gap:3rem; width:max-content;
  animation:slide var(--dur) linear infinite; }
.marquee:hover .marquee__in{ animation-play-state:paused; }
.marquee span{ font-family:var(--display); font-size:var(--t-lg);
  color:var(--whisper); white-space:nowrap; text-transform:uppercase;
  letter-spacing:.02em; }
.marquee span b{ color:var(--accent); font-weight:400; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* --- 16 · FORMS --------------------------------------------------------- */
.field{ display:block; margin-bottom:1.1rem; }
.field label{ display:block; font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.24em; text-transform:uppercase; color:var(--ossuary);
  margin-bottom:.5rem; }
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=file],select,textarea{
  width:100%; background:var(--pitch); border:var(--hair); color:var(--bone);
  font-family:var(--body); font-size:var(--t-base); padding:.9rem 1rem;
  transition:border-color var(--t-fast) linear, background var(--t-fast) linear; }
input:focus,select:focus,textarea:focus{ border-color:var(--accent);
  background:var(--ash); outline:none; }
textarea{ min-height:160px; resize:vertical; font-family:var(--mono);
  font-size:var(--t-sm); line-height:1.7; }
::placeholder{ color:var(--whisper); }

/* --- 17 · FOOTER -------------------------------------------------------- */
.foot{ border-top:var(--hair); margin-top:var(--bay);
  background:linear-gradient(180deg,transparent,var(--pitch)); }
.foot__mega{ font-family:var(--display); font-size:var(--t-mega); line-height:.82;
  color:transparent; -webkit-text-stroke:1.5px color-mix(in oklab,var(--bone) 18%,transparent);
  letter-spacing:-.035em; margin:0; padding-block:clamp(2rem,6vw,5rem);
  user-select:none; }

/* --- 18 · UTILITIES ----------------------------------------------------- */
.stack > * + *{ margin-top:var(--gut); }
.stack-sm > * + *{ margin-top:.7rem; }
.flow > * + *{ margin-top:1.15em; }
.muted{ color:var(--ossuary); } .dim{ color:var(--grave); }
.accent{ color:var(--accent); }
.hr{ height:1px; background:linear-gradient(90deg,
  color-mix(in oklab,var(--bone) 22%,transparent), transparent); border:0; margin:0; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; }
.pill{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.2em;
  text-transform:uppercase; padding:.3em .75em; border:var(--hair);
  color:var(--ossuary); display:inline-block; }
.pill--live{ color:var(--cathode); border-color:color-mix(in oklab,var(--cathode) 40%,transparent); }

/* --- 19 · ADMIN ("The Watch Room") -------------------------------------- */
.watchroom{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.watchroom__side{ border-right:var(--hair); padding:1.6rem 1.2rem;
  background:var(--pitch); position:sticky; top:0; height:100vh; overflow:auto; }
.watchroom__main{ padding:clamp(1.4rem,3vw,2.6rem); min-width:0; }
.wr-nav a{ display:block; font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ossuary);
  text-decoration:none; padding:.7rem .6rem; border-left:2px solid transparent; }
.wr-nav a:hover{ color:var(--bone); background:var(--ash); }
.wr-nav a.on{ color:var(--bone); border-left-color:var(--accent); background:var(--ash); }
table{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
th{ text-align:left; font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--grave);
  padding:.8rem .7rem; border-bottom:var(--hair); font-weight:400; }
td{ padding:.85rem .7rem; border-bottom:1px solid color-mix(in oklab,var(--bone) 5%,transparent);
  color:var(--linen); vertical-align:middle; }
tr:hover td{ background:var(--ash); }
.st{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; padding:.25em .6em; border:1px solid currentColor; }
.st--ready{ color:var(--cathode); } .st--processing{ color:var(--ember-hot); }
.st--queued{ color:var(--ossuary); } .st--failed{ color:var(--wound); }
.progress{ height:3px; background:var(--slate); overflow:hidden; }
.progress i{ display:block; height:100%; background:var(--accent);
  transition:width .6s var(--breath); }
.alert{ border:var(--hair); border-left:2px solid var(--accent);
  padding:.9rem 1.1rem; background:var(--ash); font-size:var(--t-sm);
  margin-bottom:1.2rem; }
.alert--bad{ border-left-color:var(--wound); }
.alert--good{ border-left-color:var(--cathode); }

@media (max-width:900px){ .watchroom{ grid-template-columns:1fr; }
  .watchroom__side{ position:static; height:auto; } }

/* --- 20 · MOTION ON ENTRY (staggered by data-i) -------------------------- */
[data-i]{ transition-delay:calc(var(--i,0) * 90ms); }