/*
Theme Name: Skreen
Description: Hand-written theme for Skreen. A 1960s-70s power console in one cream on near-black. No block templates; the front end is authored HTML, CSS and JS.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: skreen
*/

/* ---------- typefaces ----------
   Self-hosted, latin only (the site is English). All three are SIL Open Font License.
   Krona One is the display (a wide 1970s grotesque, the lettering of the era's TV sets and
   test cards), Share Tech Mono the label lettering (a screen readout), Archivo the reading face. */
@font-face{font-family:'Krona One';font-weight:400;font-display:swap;src:url('assets/fonts/krona-one-400-latin.woff2') format('woff2')}
@font-face{font-family:'Share Tech Mono';font-weight:400;font-display:swap;size-adjust:112%;src:url('assets/fonts/share-tech-mono-400-latin.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('assets/fonts/archivo-100-900-latin.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --display:'Krona One',sans-serif;   /* wide 1970s grotesque, one weight */
  --ink:#111111;          /* the console: a neutral black-grey, clouded half a tone lighter */
  --cream:#ECE3CC;        /* the one colour: lettering, rules, lit keys */
  --dim:#A9A08C;          /* secondary text, 7.5:1 on ink */
  --wash:rgba(236,227,204,.07);
  --amber:#FFB33A;        /* the phosphor: only what is live or lit (a lamp, the page you are on, the cursor) */
  --amber-glow:rgba(255,179,58,.5);

  --rule:1.5px;
  --r:18px;               /* cell corner */
  --gap:10px;             /* between cells: the one module */
  --pad:clamp(14px, 10px + .6vw, 22px);
  --edge:clamp(10px, 6px + 1vw, 20px);

  /* one slope for every rung, so the ladder never crosses */
  --t-xl:clamp(2rem, 1.15rem + 1.9vw, 3.25rem);
  --t-l:clamp(1.375rem, .9rem + 1.05vw, 1.875rem);
  --t-m:1.125rem;
  --t-s:.9375rem;
  --t-label:.625rem;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='3.2 0 0 0 -1.1 3.2 0 0 0 -1.1 3.2 0 0 0 -1.1 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-synthesis:none;background:var(--ink);color:var(--cream);color-scheme:dark;
  scrollbar-color:var(--dim) var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font:400 var(--t-m)/1.55 'Archivo',system-ui,sans-serif;font-stretch:108%;
  /* the dotted ground shows in every gutter between cells */
  background:radial-gradient(rgba(255,179,58,.2) .9px, transparent 1.3px) 0 0/7px 7px, var(--ink);
  padding:var(--edge);display:flex;flex-direction:column;gap:var(--gap);
  -webkit-font-smoothing:antialiased}
/* film grain over everything, above content, never catching a click */
/* ---------- the film: the whole site is graded like a warm print ----------
   Three fixed layers over everything, images included: grain (light and dark specks, as
   on Site #21), an amber soft-light wash that warms every colour, and a vignette that
   falls off toward the edges of the screen. None of them takes a click. */
body::after{content:"";position:fixed;inset:-50%;z-index:100;pointer-events:none;
  background:var(--grain);opacity:.34;mix-blend-mode:overlay}
body::before{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;
  background:#C98A3E;opacity:.08;mix-blend-mode:soft-light}
html::after{content:"";position:fixed;inset:0;z-index:98;pointer-events:none;
  background:radial-gradient(130% 110% at 50% 45%, transparent 58%, rgba(20,12,4,.42) 100%)}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
input,textarea{caret-color:var(--amber)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
/* a link inside running words: lit cream on the dim text; its underline comes up full as you point */
:is(p,dd) a:not([class]){color:var(--cream);text-decoration-color:rgba(255,179,58,.5);transition:text-decoration-color 150ms ease}
@media (hover:hover) and (pointer:fine){ :is(p,dd) a:not([class]):hover{text-decoration-color:var(--amber)} }
img{display:block;max-width:100%}
h1,h2,h3,p,ol,figure{margin:0}
/* lines break evenly everywhere: headings balance, paragraphs never end on one stray word */
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
ol{padding:0;list-style:none}
em{font-style:normal}

.skip{position:absolute;left:var(--edge);top:-120px;   /* clear of the admin bar too */
  z-index:101;background:var(--cream);color:var(--ink);
  padding:10px 16px;border-radius:999px;font:var(--t-label)/1 'Share Tech Mono',monospace;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:var(--edge)}

/* ---------- the instrument cell: everything is made of this ---------- */
.deck{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
.deck > *{min-width:0}
.cell{position:relative;background:radial-gradient(130% 110% at 50% 38%, #161616, var(--ink) 55%, #0c0c0c);border:var(--rule) solid var(--cream);border-radius:var(--r);
  padding:var(--pad);min-width:0}
/* idle cells sit a half-scanline off; the one you are working with registers sharp */
.cell::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(236,227,204,.035) 2px 3px);
  transition:opacity .4s var(--ease-out)}
.cell:hover::after,.cell:focus-within::after,.cell:focus-visible::after{opacity:0}

.label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35em 1em;align-items:center;
  font:400 var(--t-label)/1.4 'Share Tech Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

.glyph{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* each half of a readout stays whole: the pair wraps, a phrase never does */
.label > span{white-space:nowrap}

/* ---------- motion vocabulary ----------
   One authored moment: SKREEN strikes like a neon tube. Everything else is a console
   powering on (cells raster in, top to bottom) or a lamp behind a control (cream rises
   from below and the lettering inverts). Exits are faster than entrances. */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --glow:0 0 .02em rgba(255,244,225,.9), 0 0 .09em rgba(255,206,140,.42), 0 0 .3em rgba(255,179,58,.2);
  --bloom:0 0 .05em rgba(255,179,58,.12);   /* what the letters keep once lit: the strike ends exactly here */
}

/* the lamp: any pressable control. Amber phosphor rises behind its lettering, which
   turns ink while it is lit. */
.lamp{position:relative;isolation:isolate;overflow:hidden;
  transition:transform 160ms var(--ease-out)}
.lamp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:var(--amber);clip-path:inset(100% 0 0 0);transition:clip-path 150ms var(--ease-out)}
.lamp,.lamp *{transition-property:color,border-color,transform,letter-spacing,opacity;transition-duration:150ms}
.lamp:focus-visible::before{clip-path:inset(0);transition-duration:240ms}
/* a lit control's lettering is ink, whatever colour its readouts carry at rest (important:
   this state must outrank every label and readout rule inside a control) */
.lamp:focus-visible,.lamp:focus-visible *{color:var(--ink)!important;border-color:var(--amber)}
.lamp:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .lamp:hover::before{clip-path:inset(0);transition-duration:240ms;animation:lamp-strike 260ms steps(1) both}
  .lamp:hover,.lamp:hover *{color:var(--ink)!important;border-color:var(--amber)}
}
/* a lamp catching: two misfires, then it holds */
@keyframes lamp-strike{0%{opacity:.9}20%{opacity:.35}35%{opacity:1}55%{opacity:.6}70%,100%{opacity:1}}

/* ---------- key bar ---------- */
.bar{grid-template-columns:auto minmax(0,1fr);align-items:stretch}
.bar__mark{display:flex;align-items:center;gap:.6em;padding-block:12px;text-decoration:none;
  font:400 1.35rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.bar__logo{width:1.75em;height:1.75em;flex:none}
/* the mark powers on with the console, once per visit (a page reached from inside the site
   keeps the bar as it was): the helmet rim draws round from the top, the visor traces in,
   the browser bar's three lamps catch one by one, w w w, and the glint flicks across */
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.boot:not(.hop) .bar__logo :is(.mk-rim,.mk-visor,.mk-glint){stroke-dasharray:1 2;animation:draw 560ms var(--ease-out) 140ms both}
.boot:not(.hop) .bar__logo .mk-visor{animation-duration:440ms;animation-delay:420ms}
/* once traced, the visor glass flashes on like a screen catching, then the lamps come up */
.boot:not(.hop) .bar__logo .mk-glass--in{animation:visor-blink 420ms steps(1) 880ms both}
.boot:not(.hop) .bar__logo .mk-lamp{animation:light 260ms steps(4, end) both;animation-delay:calc(1300ms + var(--d) * 120ms)}
.boot:not(.hop) .bar__logo .mk-glint{animation-duration:180ms;animation-delay:1700ms}
@keyframes visor-blink{0%{opacity:0}12%{opacity:.9}24%{opacity:.12}38%{opacity:.75}56%,100%{opacity:0}}
/* pointing at the mark blinks the visor again; a separate glass, so the entrance never replays */
@media (hover:hover) and (pointer:fine){ .bar__mark:hover .mk-glass--hover{animation:visor-blink 420ms steps(1)} }
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
/* the keys are a popover for the phone menu; above phones it never opens, so it sits in the bar as usual */
.keys[popover]{position:static;inset:auto;width:auto;height:auto;margin:0;padding:0;border:0;background:none;color:inherit;overflow:visible}
.burger{display:none}
.key{display:flex;align-items:center;justify-content:center;border:var(--rule) solid var(--cream);border-radius:var(--r);
  background:var(--ink);text-decoration:none;min-height:52px}
.key__cap{position:relative;font:400 .875rem/1 'Share Tech Mono',monospace;letter-spacing:.18em;text-transform:uppercase;
  transition:letter-spacing 240ms var(--ease-out)}
/* the cap's letters open slightly as the lamp comes up, like a label coming into focus */
@media (hover:hover) and (pointer:fine){ .key.lamp:hover .key__cap{letter-spacing:.26em} }
/* the page you are on is lit, and stays lit */
.key.is-lit,.bar__mark.is-lit{background:var(--amber);border-color:var(--amber);color:var(--ink);box-shadow:0 0 18px -4px var(--amber-glow)}   /* where you are: the lit key, or the mark on Home */

/* ---------- telemetry bands ---------- */
.band{position:relative;display:flex;align-items:center;border:var(--rule) solid var(--cream);border-radius:999px;
  background:var(--ink);overflow:hidden;min-height:50px}
.band__track{display:flex;width:max-content;animation:run 46s linear infinite}
.band--back .band__track{animation-direction:reverse;animation-duration:52s}
.band__run{display:flex;flex:none}
.band__item{display:inline-flex;align-items:center;gap:.9em;padding-inline:1.6em;white-space:nowrap;
  font:400 .75rem/1 'Share Tech Mono',monospace;letter-spacing:.16em;text-transform:uppercase}
@keyframes run{to{transform:translateX(-33.3333%)}}
.band::after{content:"";position:absolute;right:0;top:0;bottom:0;width:120px;pointer-events:none;
  background:linear-gradient(to right, transparent, var(--ink) 55%)}
.band__hold{z-index:1;position:absolute;right:6px;top:50%;translate:0 -50%;border:var(--rule) solid var(--cream);
  background:var(--ink);color:var(--cream);border-radius:999px;padding:9px 14px;cursor:pointer;
  font:400 .5625rem/1 'Share Tech Mono',monospace;letter-spacing:.16em;text-transform:uppercase}
.band__hold[aria-pressed="true"]::before{clip-path:inset(0)}

/* ---------- the word: a neon tube ---------- */
/* Krona One's SKREEN is 5.36em of letters: the size leaves about .1em between each pair,
   and the six spread edge to edge across the deck */
.word{font:400 calc((100vw - 2 * var(--edge) - 2px) / 5.85)/.78 var(--display);text-transform:uppercase;
  letter-spacing:-.005em;text-align:center;padding-block:.09em;user-select:none;text-box:trim-both cap alphabetic}
/* one line, letters side by side; each letter box is cut to the cap height so it never
   reaches up over the key bar */
.word{position:relative;z-index:0}
.word__ink{display:flex;justify-content:space-between;white-space:nowrap;padding-inline:.02em}
.word__l{position:relative;display:block;line-height:.74}
.bar,.band,.panel{position:relative;z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* each letter strikes on its own: misfires, a hot glow, then it settles to plain cream.
   The K is the tube that doesn't catch first time. */
@keyframes strike{
  0%{opacity:0;text-shadow:none}
  6%{opacity:1;text-shadow:var(--glow)}
  9%{opacity:.08}
  15%{opacity:.9;text-shadow:var(--glow)}
  18%{opacity:.2}
  24%,40%{opacity:1;text-shadow:var(--glow);animation-timing-function:cubic-bezier(.33,0,.2,1)}
  100%{opacity:1;text-shadow:var(--bloom)}
}
@keyframes strike-late{
  0%,12%{opacity:0;text-shadow:none}
  16%{opacity:.85;text-shadow:var(--glow)}
  19%,29%{opacity:.06}
  32%{opacity:1;text-shadow:var(--glow)}
  35%{opacity:.3}
  40%,45%{opacity:1;text-shadow:var(--glow);animation-timing-function:cubic-bezier(.33,0,.2,1)}
  100%{opacity:1;text-shadow:var(--bloom)}
}
/* the glitch: a slice of the letter slips sideways for a few frames while it strikes */
.word__l::before,.word__l::after{content:attr(data-l);position:absolute;inset:0;opacity:0;pointer-events:none}
.word__l::before{clip-path:inset(18% 0 62% 0)}
.word__l::after{clip-path:inset(64% 0 14% 0)}
@keyframes slip-a{0%,8%{opacity:0;transform:none}9%{opacity:1;transform:translateX(.05em)}13%{transform:translateX(-.03em)}16%,100%{opacity:0;transform:none}}
@keyframes slip-b{0%,15%{opacity:0;transform:none}16%{opacity:1;transform:translateX(-.06em)}20%{transform:translateX(.02em)}23%,100%{opacity:0;transform:none}}

.boot .word:not(.is-struck) .word__l{animation:strike 1700ms linear both;animation-delay:calc(220ms + var(--n) * 70ms)}
.boot .word:not(.is-struck) .word__l:nth-child(2){animation-name:strike-late;animation-duration:1900ms}
.boot .word:not(.is-struck) .word__l::before{animation:slip-a 1100ms steps(1) both;animation-delay:inherit}
.boot .word:not(.is-struck) .word__l::after{animation:slip-b 1100ms steps(1) both;animation-delay:inherit}
/* a letter under the pointer buzzes like a tube on a bad starter, for as long as you stay */
@keyframes buzz{
  0%,5%{opacity:1;text-shadow:var(--glow)}
  7%{opacity:.18;text-shadow:none}
  9%,30%{opacity:1;text-shadow:var(--glow)}
  32%{opacity:.4;text-shadow:none}
  35%,68%{opacity:1;text-shadow:var(--glow)}
  70%{opacity:.08;text-shadow:none}
  72%{opacity:.8}
  74%,100%{opacity:1;text-shadow:var(--glow)}
}
@keyframes buzz-slip{0%,68%{opacity:0;transform:none}70%{opacity:1;transform:translateX(.04em)}73%{transform:translateX(-.02em)}75%,100%{opacity:0;transform:none}}
@media (hover:hover) and (pointer:fine){
  .word__l:hover{animation:buzz 1.3s linear infinite;animation-delay:0s}
  .word__l:hover::before{animation:buzz-slip 1.3s steps(1) infinite;animation-delay:0s}
}

/* ---------- broadcast panel ---------- */
/* the first screen ends where the panel ends: bar, bands, word and panel fill the fold, so
   nothing sits half in view waiting for a scroll.
   ponytail: --bar-h is the bar's measured height (64px, 57px on phones); re-measure if the bar changes */
:root{--bar-h:64px}
.broadcast{min-height:calc(100svh - 2 * var(--edge) - var(--gap) - var(--bar-h));grid-template-rows:auto 1fr}
.panel{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,.95fr);
  grid-template-rows:auto auto}
.offer{grid-row:span 2;display:flex;flex-direction:column;gap:1.1rem}
.offer__line{font:700 var(--t-xl)/1.02 'Archivo';font-stretch:118%;letter-spacing:-.02em;text-wrap:balance;margin-top:auto}
.offer__line em,.close__h em{font-family:var(--display);font-weight:400;letter-spacing:.02em;color:var(--amber)}
.offer__sub{font-size:var(--t-s);color:var(--dim);max-width:44ch;text-wrap:pretty}

.still{grid-row:span 2;display:flex;flex-direction:column;gap:.8rem}
.still__frame,.channel__screen{position:relative;border-radius:calc(var(--r) - 8px);overflow:hidden;background:#1A1A1A}
.still__frame{flex:1;min-height:160px}
.still__frame img,.channel__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
  filter:grayscale(.35) sepia(.25) contrast(1.05)}
/* a still is a picture on a CRT: scanlines and a soft vignette over it */
.still__frame::after,.channel__screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(17,17,17,0) 0 2px, rgba(17,17,17,.28) 2px 3px),
             radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(17,17,17,.7))}

/* the power key: a key switch that turns from SAFE to ARMED */
.power{display:grid;grid-template-rows:auto 1fr auto;gap:.6rem;text-decoration:none;cursor:pointer}
.power__state{display:grid;text-align:right}
.power__state > span{grid-area:1/1;transition:opacity 150ms}
.power__on{opacity:0}
.power__key{display:grid;place-items:center}
.power__key svg{width:min(108px, 70%);height:auto;fill:none;stroke:currentColor;stroke-width:2.5;overflow:visible}
.power__bezel{stroke-dasharray:3 5;transform-origin:60px 60px;transition:transform 900ms var(--ease-out)}
.power__turn{transform-origin:60px 60px;transition:transform 220ms var(--ease-out)}
.power__turn rect{fill:var(--ink)}
.power__go{font:700 var(--t-l)/1.05 'Archivo';font-stretch:118%;letter-spacing:-.01em}
/* turning the key: a quarter turn that lands, and the bezel ticks round behind it */
.power:hover .power__turn,.power:focus-visible .power__turn{transform:rotate(90deg);transition-duration:380ms}
.power:hover .power__bezel,.power:focus-visible .power__bezel{transform:rotate(24deg)}
.power:hover .power__standby,.power:focus-visible .power__standby{opacity:0}
.power:hover .power__on,.power:focus-visible .power__on{opacity:1;animation:lamp-strike 260ms steps(1) both}

.logged{display:flex;flex-direction:column;justify-content:space-between;gap:.9rem;text-decoration:none}
.logged .label span:last-child{font-size:.75rem;color:var(--cream)}
.logged__go{display:flex;align-items:center;justify-content:space-between;gap:1em;font-weight:600;font-stretch:112%;text-decoration:none}
.logged__go .glyph{transition:transform 200ms var(--ease-out)}
.lamp:hover .glyph,.lamp:focus-visible .glyph{transform:translateX(5px)}

/* ---------- sections ---------- */
.profile,.channels,.operator,.close{margin-top:clamp(28px, 4vw, 64px)}
.section-h{font:400 var(--t-xl)/1 var(--display);letter-spacing:.01em;text-wrap:balance}

.profile{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)}
.profile__head{display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.profile__lede{color:var(--dim);font-size:var(--t-s);max-width:36ch}
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.phase{display:flex;flex-direction:column;gap:.9rem;min-height:300px}
.phase .label{justify-content:flex-start}
/* the rail: dashed at rest; a solid line runs over it from the label to the node */
.phase .label::after{content:"";flex:1;order:1;height:var(--rule);
  background:linear-gradient(var(--cream),var(--cream)) left center/0% 100% no-repeat,
             repeating-linear-gradient(to right, rgba(236,227,204,.35) 0 4px, transparent 4px 8px);
  transition:background-size 200ms var(--ease-out)}
.phase__node{order:2;width:12px;height:12px;border-radius:50%;border:var(--rule) solid var(--cream);background:var(--ink)}
.phase__h{font:400 var(--t-l)/1 var(--display);text-wrap:balance;margin-top:1.4rem}
.phase__text{font-size:var(--t-s);color:var(--dim);text-wrap:pretty;margin-top:auto}

/* channel logs: a header strip, then three logs, each a screen over its name */
.channels{grid-template-columns:repeat(3,minmax(0,1fr))}
.channels__head{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.channels__lede{color:var(--dim);font-size:var(--t-s);max-width:44ch;text-wrap:pretty}
.channel{display:flex;flex-direction:column;gap:.8rem}
.channel__status{display:inline-flex;align-items:center;gap:.6em;color:var(--cream)}
/* the status lamp: lit and steady, the channel is complete */
.channel__status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
.channel__screen{aspect-ratio:16/10;margin-bottom:.4rem}
.channel__h{font:400 var(--t-l)/1 var(--display);text-wrap:balance}
.channel__kind{font:400 var(--t-label)/1.4 'Share Tech Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.channel__line{font-size:var(--t-s);color:var(--dim);text-wrap:pretty}

/* the operator: a file beside a spec sheet */
.operator{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.operator__file{display:flex;flex-direction:column;gap:1.4rem}
.operator__text{font-size:var(--t-l);line-height:1.35;max-width:34ch;text-wrap:pretty}
.operator__spec{display:grid;align-content:start;margin:0}
.spec{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1rem;align-items:baseline;padding-block:1rem;
  border-bottom:var(--rule) dashed rgba(236,227,204,.25)}
.spec:last-child{border-bottom:0}
.spec{position:relative}
.spec::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--rule));height:var(--rule);background:var(--cream);
  transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
.spec .label{transition:color 200ms ease}
.spec dd{margin:0}

/* the close: one last cell row, the key larger */
.close{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.close__panel{display:flex;flex-direction:column;gap:1.4rem;min-height:340px}
.close__h{font:700 clamp(2.5rem, 1.3rem + 3.6vw, 5.5rem)/.95 'Archivo';font-stretch:118%;letter-spacing:-.03em;margin-top:auto;text-wrap:balance}
.close__sub{color:var(--dim);font-size:var(--t-s);max-width:46ch}
.power--big .power__key svg{width:min(150px, 60%)}

/* ---------- foot ---------- */
.foot{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px, 4vw, 64px)}
.foot__cell{display:flex;flex-direction:column;gap:.5rem;font-size:var(--t-s)}

.plain{max-width:75ch}
.plain__body{margin-top:1.5rem}

/* ---------- powering on ----------
   Cells raster in from the top like a CRT warming, then their contents light. Once per
   visit in full; a later page only writes in, faster. Sections below the fold do the same
   as they arrive. Everything is visible without these classes. */
@keyframes raster{
  from{clip-path:inset(0 0 100% 0 round var(--r));opacity:.5}
  to{clip-path:inset(0 0 0 0 round var(--r));opacity:1}
}
@keyframes light{0%{opacity:0}30%{opacity:.7}45%{opacity:.15}100%{opacity:1}}
.boot .bar > *,.boot .key,.boot .band,.boot main .cell:not(.rv){
  animation:raster 420ms var(--ease-out) both;animation-delay:calc(var(--i, 0) * 60ms)}
.boot .panel > .cell > *,.boot .band__track{animation:light 260ms steps(4, end) both;animation-delay:calc(var(--i, 0) * 60ms + 200ms)}
.boot .band__track{animation:light 260ms steps(4, end) both, run 46s linear infinite;animation-delay:calc(var(--i) * 60ms + 200ms), 0s}
.boot .band--back .band__track{animation:light 260ms steps(4, end) both, run 52s linear infinite reverse;animation-delay:calc(var(--i) * 60ms + 200ms), 0s}
/* held (or out of view) stops a band; after the power-on rules, whose animation shorthand would
   otherwise reset the play state on the reverse band */
.band.is-held .band__track,.band.is-off .band__track{animation-play-state:paused}

/* every other block waits dark until it scrolls in, then powers on; blocks arriving
   together stagger. Hidden only while the boot class is on (console.js lifts it if it
   never runs), so a page without scripts is simply there. */
.boot .rv{opacity:0}
.boot .rv.is-in{opacity:1;animation:raster 480ms var(--ease-out) both, light 300ms steps(4, end) both;
  animation-delay:calc(var(--k, 0) * 70ms), calc(var(--k, 0) * 70ms + 120ms)}

/* ---------- changing pages ----------
   The key bar is the console's frame: it stays put, and only its lit key moves across.
   The page below switches off like a CRT, collapsing to a bright line, and the next one
   powers on underneath with the same raster as a first load. */
@view-transition{navigation:auto}
.bar{view-transition-name:bar}
::view-transition-group(bar){animation-duration:240ms}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:crt-off 220ms var(--ease-out) both}
  ::view-transition-new(root){animation:light 260ms steps(4, end) 140ms both}
}
@keyframes crt-off{
  60%{transform:scaleY(.006);filter:brightness(2.2);opacity:1}
  to{transform:scaleY(.006) scaleX(0);filter:brightness(3);opacity:0}
}
/* arriving from another page, the bar is already on: it doesn't power up again */
.hop .bar > *,.hop .key{animation:none}

/* ---------- one composition breakpoint ---------- */
@media (max-width:900px){
  .panel{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .offer{grid-column:1 / -1;grid-row:auto}
  .still{grid-row:auto;grid-column:1 / -1;order:1}
  .still__frame{aspect-ratio:16/10;flex:none}
  .profile,.operator,.close{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr 1fr}
  .phase{min-height:0}
  .channels{grid-template-columns:1fr 1fr}
  .close__panel{min-height:0}
  .foot{grid-template-columns:1fr}
}
/* phones, 320px up: one column, one thing per row, everywhere (agency standard, 2026-10-18) */
@media (max-width:767px){
  :root{--bar-h:57px}
  .panel,.phases,.channels{grid-template-columns:1fr}
  /* SKREEN larger on phones, on one smooth line: 57px at 320, 65 at 360, meeting the desktop size at 768.
     The line runs through (360px, 65px) and (768px, 126.3px); min() keeps it inside the width on the
     smallest screens. Each letter trims .025em of side bearing so the six fit with a clear gap. */
  .word{font-size:min(15.025vw + 10.91px, (100vw - 2 * var(--edge) - 2px) / 5.2)}
  .word__l{margin-inline:-.025em}
  .band__item{font-size:.6875rem}
  /* the key bar folds into one cell that stays at the top: the helmet alone is Home, and one
     MENU key on the right drops the keys down beneath it as a panel */
  .bar{position:sticky;top:var(--edge);z-index:20;grid-template-columns:auto auto;justify-content:space-between;
    padding:5px;border:var(--rule) solid var(--cream);border-radius:var(--r);background:var(--ink);
    box-shadow:0 calc(-1 * var(--edge)) 0 0 var(--ink)}   /* covers the gutter above, so nothing scrolls through it */
  .bar__mark{border:0;border-radius:calc(var(--r) - 5px);padding:0 10px;min-height:44px;gap:.45em;
    font-size:clamp(1.125rem, .55rem + 2.9vw, 1.5rem)}   /* 18px at 320, 20 at 390, 24 from 600 */
  .bar__mark::after{content:none}
  .bar__logo{width:1.45em;height:1.45em}

  .burger{display:flex;align-items:center;gap:.8em;min-height:44px;padding:0 14px;border:0;border-radius:calc(var(--r) - 5px);
    background:var(--ink);color:var(--cream);cursor:pointer;font:400 var(--t-label)/1 'Share Tech Mono',monospace;letter-spacing:.18em;text-transform:uppercase}
  .burger__lines{display:grid;gap:4px;width:18px}
  .burger__lines i{display:block;height:var(--rule);background:currentColor;border-radius:1px;
    transition:transform 220ms var(--ease-out), opacity 120ms ease}
  .burger__cap{display:grid}
  .burger__cap > span{grid-area:1/1;transition:opacity 150ms}
  .burger__close{opacity:0}
  /* open: the key is lit, its three lines cross into an X, and MENU becomes CLOSE */
  .bar:has(.keys:popover-open) .burger{background:var(--amber);border-color:var(--amber);color:var(--ink)}
  .bar:has(.keys:popover-open) .burger::before{clip-path:inset(100% 0 0 0)}   /* lit already: no lamp over it */
  .bar:has(.keys:popover-open) .burger__lines i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .bar:has(.keys:popover-open) .burger__lines i:nth-child(2){opacity:0}
  .bar:has(.keys:popover-open) .burger__lines i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .bar:has(.keys:popover-open) .burger__menu{opacity:0}
  .bar:has(.keys:popover-open) .burger__close{opacity:1}

  /* the panel: one cell under the bar, a full-width key per page, the page you are on lit */
  @supports selector(:popover-open){ .keys:not(:popover-open){display:none} }
  .keys:popover-open{display:grid;grid-template-columns:1fr;gap:6px;position:fixed;
    inset:calc(var(--edge) + var(--bar-h) + 6px) var(--edge) auto;margin:0;padding:6px;
    border:var(--rule) solid var(--cream);border-radius:var(--r);background:var(--ink);
    max-height:calc(100dvh - var(--bar-h) - 3 * var(--edge));overflow:auto}
  /* the page under the open menu dims (not the bar, which a backdrop would cover too), and a
     tap on it only closes the menu: a popover would otherwise let the tap through to a link */
  .keys::backdrop{background:none}
  :is(main,.foot){transition:opacity 200ms ease}
  body:has(.keys:popover-open) :is(main,.foot){opacity:.3;pointer-events:none}
  .key{justify-content:flex-start;min-height:56px;padding-inline:18px;border-radius:calc(var(--r) - 5px)}
  .key__cap{font-size:1rem}
  .keys:popover-open .key{animation:light 260ms steps(4, end) both;animation-delay:calc(var(--i) * 45ms + 120ms)}   /* each key lamps on as the panel drops */
  .power__key svg{width:72px}
  .power__go{font-size:1.125rem}
  .spec{grid-template-columns:1fr;gap:.3rem}
  .channels__head{flex-direction:column;align-items:flex-start}
}

/* reduced motion: nothing travels or flickers; lamps and state still change, by fading */
@media (prefers-reduced-motion:reduce){
  .band__track{animation:none}
  .band__hold{display:none}
  .lamp::before{clip-path:inset(0);opacity:0;transition:opacity 150ms}
  .lamp:hover::before,.lamp:focus-visible::before{opacity:1;animation:none}
  .lamp,.power__turn,.power__bezel,.glyph,.key__cap{transition:none}
  .lamp:active{transform:none}
  .word__l:hover,.word__l:hover::before{animation:none}
}

/* a client's site seen on the console's own screen: toned into the room, colour held back */
.channel__screen img{filter:grayscale(.9) sepia(.4) contrast(1.05) brightness(.82)}

/* ---------- tuning in: hover on the blocks that hold something to look at ---------- */
.still__frame img,.channel__screen img{transition:filter 300ms ease, transform 300ms var(--ease-out)}
.channel__status::before{transition:box-shadow 300ms ease}
.phase__node{transition:background-color 150ms ease}
@media (hover:hover) and (pointer:fine){
  /* a screen comes up to full colour and leans in, like a monitor brought into focus */
  .channel:hover .channel__screen img,.still:hover .still__frame img{filter:none;transform:scale(1.035);
    transition:filter 450ms ease, transform 700ms var(--ease-out)}
  .channel:hover .channel__status::before{box-shadow:0 0 0 3px rgba(255,179,58,.2), 0 0 10px var(--amber-glow)}
  /* a phase: the rail runs to the node, then the node lights */
  .phase:hover .label::after{background-size:100% 100%;transition-duration:450ms}
  .phase:hover .phase__node{background:var(--cream);transition-delay:380ms}
  /* a spec row: its line draws under it and the label lights */
  .spec:hover::after{transform:scaleX(1);transition-duration:400ms}
  .spec:hover .label{color:var(--cream)}
}
@media (prefers-reduced-motion:reduce){
  .channel:hover .channel__screen img,.still:hover .still__frame img{transform:none}
  .phase .label::after,.spec::after{transition:none}
}

/* ---------- icons in place ---------- */
.label__icon{display:inline-flex;align-items:center;gap:.7em}
.label.label__icon{display:flex;justify-content:flex-start}
.label__icon .glyph{width:1.6em;height:1.6em}
.phase .glyph{width:30px;height:30px;margin-top:1.2rem;color:var(--dim);transition:color 200ms ease}
.phase .phase__h{margin-top:.2rem}
@media (hover:hover) and (pointer:fine){ .phase:hover .glyph{color:var(--cream)} }

/* ---------- inner pages ---------- */
.page-h{font:400 clamp(2.75rem, 1.4rem + 4vw, 6rem)/.95 var(--display);letter-spacing:.01em;
  text-wrap:balance;margin-top:auto}
/* the accent word is drawn in outline, the way the console's own headings are lettered */
.page-h em,.onair__h em,.section-h em{color:transparent;-webkit-text-stroke:.022em var(--amber)}
.file__lede,.worklog__lede,.sequence__lede{font-size:var(--t-l);line-height:1.35;max-width:32ch;text-wrap:pretty}

/* power key laid out as a row: label over key and words */
.power--submit{grid-column:auto}
.power--row{grid-column:1 / -1}
.power--row,.power--submit{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  align-items:center;column-gap:1.6rem}
.power--row .label,.power--submit .label{grid-column:1 / -1}
.power--row .power__key svg,.power--submit .power__key svg{width:84px}
.power--row .power__go,.power--submit .power__go{font-size:var(--t-xl)}

/* About: the operator file */
.file{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);align-items:start}
.file__id{position:sticky;top:var(--edge);display:grid;gap:var(--gap)}
.still--portrait{grid-row:auto;order:0}
.still--portrait .still__frame{aspect-ratio:3/4;flex:none}
/* every CAM is a live feed: it cuts between four takes of its shot, six seconds each,
   with a CRT flicker on every cut. Reduced motion holds the first take. The stills are in
   colour (Niko asked for it), so they are toned far less than the channel screens. */
.feed img{object-position:50% 50%;filter:grayscale(.1) sepia(.12) contrast(1.05)}
.feed--high img{object-position:50% 58%}   /* the workbench screen sits just below the middle */
@media (prefers-reduced-motion:no-preference){
  .feed img{opacity:0;animation:feed 24s linear infinite;animation-delay:calc(var(--k) * 6s - .4s)}
}
@keyframes feed{
  0%{opacity:0}
  .6%{opacity:.7;translate:2.5% 0;clip-path:inset(0 0 0 0)}
  .8%{clip-path:inset(34% 0 40% 0);translate:-4% 0}
  1%{clip-path:inset(0 0 62% 0);translate:1.5% 0}
  1.1%{opacity:.15;clip-path:inset(0 0 0 0);translate:-1% 0}
  1.6%,25%{opacity:1;translate:0 0;clip-path:inset(0 0 0 0)}
  25.5%,100%{opacity:0}
}
.idcard{margin:0;display:grid}
.idcard > .label{margin-bottom:.4rem}
.file__record{display:grid;gap:var(--gap)}
.file__head{min-height:440px;display:flex;flex-direction:column;gap:1.6rem}
.entry{display:grid;gap:1rem;align-content:start}
.entry p:not(.label){max-width:62ch;color:var(--dim);font-size:var(--t-m)}
.entry__h{font:400 var(--t-l)/1 var(--display);text-wrap:balance}
.entry--split{grid-template-columns:1fr 1fr;gap:var(--gap)}
.checks{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.8rem}
.checks li{display:flex;gap:.8rem;align-items:baseline}
.checks li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--cream);translate:0 -1px}
.checks--off li{color:var(--dim)}
.checks--off li::before{background:none;border:var(--rule) solid var(--dim)}

/* Work: the full logs */
.worklog{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.worklog__head{min-height:400px;display:flex;flex-direction:column;gap:1.6rem}
.plate{display:flex;flex-direction:column;gap:.8rem}
.plate .still__frame{flex:1;min-height:280px}
.log{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--gap);margin-top:clamp(18px, 2.5vw, 40px)}
.log--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.log--flip .log__screen{order:2}
.log__screen{display:flex;flex-direction:column;gap:.8rem}
.log__entry{display:flex;flex-direction:column;gap:1.3rem}
.log__h{font:400 var(--t-xl)/1 var(--display);text-wrap:balance}
.log__notes{margin:0;display:grid;gap:1.3rem}
.log__notes dd{margin:.5rem 0 0;color:var(--dim);font-size:var(--t-s);text-wrap:pretty}
.log__phases{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.log__phases li{display:inline-flex;align-items:center;gap:.6em;border:var(--rule) solid var(--cream);border-radius:999px;
  padding:.55em .95em;font:400 var(--t-label)/1 'Share Tech Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.log__lamp{width:7px;height:7px;border-radius:50%;background:var(--amber)}
.worklog > .power--row{margin-top:clamp(18px, 2.5vw, 40px)}

/* Contact: the power sequence */
.sequence{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
.sequence__head{grid-column:1 / -1;min-height:320px;display:flex;flex-direction:column;gap:1.6rem}
.sequence__main{display:grid;gap:var(--gap);grid-template-rows:auto 1fr;align-self:stretch}   /* the form, then the still below it */
/* the still takes whatever height is left, so its foot lines up with the side column's last cell */
.sequence__still{grid-row:auto}
.sequence__still .still__frame{flex:1;min-height:220px}
@media (max-width:900px){ .sequence__still .still__frame{flex:none;aspect-ratio:16/9;min-height:0} }
.sequence__still .still__frame img{object-position:50% 0}
.countdown{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.stage{display:flex;flex-direction:column;gap:.8rem}
.stage--wide,.countdown__alert{grid-column:1 / -1}
/* each stage reads as a field to fill: its name in plain cream, whether it's needed, and a
   recessed screen to type into, with an example waiting in it */
.stage__label{display:flex;align-items:center;gap:.7em;cursor:pointer}
.stage__t{font:400 var(--t-label)/1 'Share Tech Mono',monospace;letter-spacing:.16em;color:var(--dim)}
.stage__name{font:600 1rem/1.3 'Archivo';font-stretch:108%;color:var(--cream)}
.stage__req{margin-left:auto;font:400 var(--t-label)/1 'Share Tech Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.stage input,.stage textarea,.stage__well{width:100%;background:#0A0A0A;border:var(--rule) solid rgba(236,227,204,.32);
  border-radius:calc(var(--r) - 10px);box-shadow:inset 0 2px 10px rgba(0,0,0,.55);
  color:var(--cream);font:500 1.125rem/1.4 'Archivo';font-stretch:108%;padding:.75em .9em;outline:none;
  caret-color:var(--cream);transition:border-color 150ms ease}
.stage textarea{resize:vertical;min-height:8em}
.stage__well{color:rgba(236,227,204,.55)}   /* the editor's stand-in for a field, holding its hint */
.stage__well--wide{min-height:8em}
.stage input::placeholder,.stage textarea::placeholder{color:rgba(236,227,204,.55);opacity:1}   /* 5.1:1 on the well */
@media (hover:hover) and (pointer:fine){ .stage input:hover,.stage textarea:hover{border-color:rgba(236,227,204,.6)} }
.stage input:focus,.stage textarea:focus{border-color:var(--amber)}
.stage__lamp{width:11px;height:11px;border-radius:50%;border:var(--rule) solid var(--cream);transition:background-color 150ms ease, box-shadow 300ms ease}
/* a stage goes green-light when its answer is good, and dashes red-light when it is not */
.stage.is-go .stage__lamp{background:var(--amber);border-color:var(--amber);box-shadow:0 0 8px var(--amber-glow)}
.stage.is-bad{border-style:dashed}
.stage.is-bad .stage__lamp{border-style:dashed}
.stage__why{color:var(--cream);font-size:var(--t-s)}
.countdown__alert{display:flex;align-items:center;gap:.8rem;border-style:dashed}
.countdown__alert .glyph{width:22px;height:22px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.power--submit{width:100%;font:inherit;color:inherit;text-align:left}
.power--submit:not(.is-on) .power__on{opacity:0}
.power--submit.is-on .power__standby{opacity:0}
.power--submit.is-on .power__on{opacity:1}
.power--submit.is-on .power__turn{transform:rotate(90deg)}
/* the count: every stage lamp blinks down 4-3-2-1 while the key holds, then it goes */
.countdown.is-sending .stage__lamp{animation:lamp-strike 220ms steps(1) both;animation-delay:calc((var(--i) - 2) * 180ms)}
.countdown.is-sending .power--submit::before{clip-path:inset(0);transition:clip-path 700ms linear}
.onair{display:flex;flex-direction:column;gap:1.2rem;min-height:340px}
.onair__h{font:400 clamp(2.5rem, 1.3rem + 3.6vw, 5rem)/.95 var(--display);margin-top:auto}
.sequence__side{display:grid;gap:var(--gap)}
.side{display:flex;flex-direction:column;gap:.9rem}
.side__mail{font:600 var(--t-l)/1.2 'Archivo';font-stretch:110%;overflow-wrap:anywhere}
.side__h{font-size:var(--t-s)}
.side__note{font:400 var(--t-label)/1.4 'Share Tech Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.side__steps{margin:0;padding-left:1.2em;list-style:decimal;display:grid;gap:.6rem;color:var(--dim);font-size:var(--t-s)}

@media (hover:hover) and (pointer:fine){
  .log:hover .channel__screen img{filter:none;transform:scale(1.035);transition:filter 450ms ease, transform 700ms var(--ease-out)}
  .log:hover .channel__status::before{box-shadow:0 0 0 3px rgba(255,179,58,.2), 0 0 10px var(--amber-glow)}
}

@media (max-width:900px){
  .file,.worklog,.sequence{grid-template-columns:1fr}
  .file__id{position:static;grid-template-columns:1fr 1fr}
  .still--portrait .still__frame{aspect-ratio:16/10}
  .file__head,.worklog__head,.sequence__head,.onair{min-height:0}
  .log,.log--flip{grid-template-columns:1fr}
  .log--flip .log__screen{order:0}
  .entry--split{grid-template-columns:1fr}
}
@media (max-width:767px){
  .file__id,.countdown{grid-template-columns:1fr}
  /* a row key stacks like every other key: label, key, words */
  .power--row,.power--submit{grid-template-columns:1fr;row-gap:.6rem}
  .power--row .power__key svg,.power--submit .power__key svg{width:60px}
  .power--row .power__go,.power--submit .power__go{font-size:var(--t-l)}
  /* a field's name gets its own line under the T-count, so a long one never squeezes the input */
  .stage__label{flex-wrap:wrap;row-gap:.45rem}
  .stage__name{order:1;flex-basis:100%}
  .stage input,.stage textarea{font-size:1rem}   /* 16px: room for the hint at 320, and no zoom on iOS */
}

/* ---------- clouds ----------
   Low-frequency noise, tiled and seamless, laid over the whole page (it scrolls with the
   content, so the depth moves with you) and screened in, so it lifts the black half a tone
   in drifting patches and barely touches the cream. Under the grain, above everything else. */
body{position:relative}
/* no tile, so no seam: soft ellipses of different sizes placed down the whole page */
/* the field is at least as tall as Home (2900px) and clipped to the page, so a short page
   shows fewer clouds instead of all fourteen crowded together and brighter */
.clouds{position:absolute;inset:0;z-index:97;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.clouds::before{content:"";position:absolute;inset:0 0 auto;height:max(100%, 2900px);
  background:
    radial-gradient(550px 350px at 12% 3%, rgba(255,255,255,0.158), rgba(255,255,255,0.071) 45%, transparent 100%),
    radial-gradient(450px 325px at 78% 6%, rgba(255,255,255,0.126), rgba(255,255,255,0.057) 45%, transparent 100%),
    radial-gradient(650px 400px at 45% 13%, rgba(255,255,255,0.105), rgba(255,255,255,0.047) 45%, transparent 100%),
    radial-gradient(500px 350px at 88% 21%, rgba(255,255,255,0.147), rgba(255,255,255,0.066) 45%, transparent 100%),
    radial-gradient(450px 450px at 8% 27%, rgba(255,255,255,0.126), rgba(255,255,255,0.057) 45%, transparent 100%),
    radial-gradient(600px 325px at 55% 34%, rgba(255,255,255,0.116), rgba(255,255,255,0.052) 45%, transparent 100%),
    radial-gradient(500px 375px at 25% 43%, rgba(255,255,255,0.147), rgba(255,255,255,0.066) 45%, transparent 100%),
    radial-gradient(550px 400px at 82% 49%, rgba(255,255,255,0.126), rgba(255,255,255,0.057) 45%, transparent 100%),
    radial-gradient(650px 350px at 48% 58%, rgba(255,255,255,0.105), rgba(255,255,255,0.047) 45%, transparent 100%),
    radial-gradient(475px 400px at 10% 66%, rgba(255,255,255,0.147), rgba(255,255,255,0.066) 45%, transparent 100%),
    radial-gradient(600px 375px at 72% 73%, rgba(255,255,255,0.126), rgba(255,255,255,0.057) 45%, transparent 100%),
    radial-gradient(550px 350px at 35% 82%, rgba(255,255,255,0.137), rgba(255,255,255,0.061) 45%, transparent 100%),
    radial-gradient(500px 400px at 90% 89%, rgba(255,255,255,0.116), rgba(255,255,255,0.052) 45%, transparent 100%),
    radial-gradient(600px 325px at 18% 96%, rgba(255,255,255,0.126), rgba(255,255,255,0.057) 45%, transparent 100%)}

/* ---------- 404: lost signal ----------
   The operator has drifted out of range: one print floats large beside the message, the way
   home is the power key, and the last three frames before the signal went run underneath. */
.lost{grid-template-columns:repeat(12,minmax(0,1fr))}
.lost__drift{grid-column:1 / span 5;grid-row:1 / span 3}
.lost__drift .still__frame{min-height:420px}
.lost__head,.lost__home,.lost__routes{grid-column:6 / -1}
.lost__head{display:flex;flex-direction:column;gap:1.4rem;min-height:300px}
.lost__head .page-h{margin-top:auto}
.lost__lede{font-size:var(--t-l);line-height:1.35;max-width:34ch;text-wrap:pretty}
.lost__routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--gap)}
.lost__route{min-height:120px}
.lost__frames{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.lost__frame .still__frame{flex:none;aspect-ratio:1;min-height:0}   /* the stills minimum would stretch a narrow frame tall */
.lost__frame img{object-position:50% 40%}
/* weightless: the big print drifts and turns a fraction, and the signal tag gutters out */
@media (prefers-reduced-motion:no-preference){
  .lost__drift img{scale:1.05;animation:drift 9s cubic-bezier(.77,0,.175,1) infinite alternate}
  .lost__signal{animation:gutter 2.4s steps(1) infinite}
}
@keyframes drift{from{translate:0 -1.4%;rotate:-.7deg}to{translate:0 1.4%;rotate:.7deg}}
@keyframes gutter{0%,62%{opacity:1}64%{opacity:.25}67%{opacity:1}70%{opacity:.25}74%,100%{opacity:1}}
@media (max-width:900px){
  .lost__drift,.lost__head,.lost__home,.lost__routes{grid-column:1 / -1;grid-row:auto}
  .lost__drift{order:1}
  .lost__drift .still__frame{min-height:0;aspect-ratio:4/5}
  .lost__head{min-height:0}
  .lost__frames{order:2}
  .lost .lost__frame{grid-column:auto;order:0}   /* not the full-width rule other stills take here */
  .file__id .still{grid-column:auto}   /* About: the photo and the operator card side by side */
}
@media (max-width:767px){ .lost__routes,.lost__frames{grid-template-columns:1fr} .lost__route{min-height:0}
  .lost__frame .label span:first-child{display:none} }   /* a narrow frame keeps only its number */

/* touch: the footer address and the bands' hold switch get a finger-sized hit area without
   moving anything (the padding is cancelled by an equal negative margin) */
.foot__cell a{display:inline-block;padding-block:.75em;margin-block:-.75em}
.band__hold{min-height:38px}

/* ---------- the live-site button and clickable screens ----------
   Beside every channel: the way out to the site itself. Until the site has its domain the
   button stands on the panel dashed and switched off, and says so. */
.live{display:flex;flex-direction:column;justify-content:space-between;gap:.7rem;border:var(--rule) solid var(--cream);
  border-radius:calc(var(--r) - 6px);padding:.9rem 1.1rem;text-decoration:none;margin:0}
.live .label{letter-spacing:.12em}
.live__go{display:flex;align-items:center;justify-content:space-between;gap:1em;font-weight:600;font-stretch:112%}
.live.is-pending{border-style:dashed;color:var(--dim);cursor:default}
.live.is-pending .label span:last-child{color:var(--dim)}
a.channel__screen{display:block}
@media (hover:hover) and (pointer:fine){
  a.channel__screen:hover img{filter:none;transform:scale(1.035)}
  .live.lamp:hover .glyph{transform:translateX(5px)}
}
.live .glyph{transition:transform 200ms var(--ease-out)}
/* the download arrow drops into the tray instead of running right */
.live.lamp:is(:hover,:focus-visible) .glyph--download{transform:translateY(3px)}

/* Work: the way to the full board */
.worklog__all{grid-column:1 / -1;flex-direction:row;align-items:center;min-height:0;margin-top:clamp(18px, 2.5vw, 40px)}
.worklog__all .label{flex:1}
.worklog__all .logged__go{gap:1.4em}

/* ---------- All channels: the channel board ----------
   One row per channel, read across like a power log: its number, its screen, what it was,
   and the way to the live site. The last row is the open slot. */
.board{grid-template-columns:minmax(0,1fr) minmax(0,.42fr)}
.board__head{display:flex;flex-direction:column;gap:1.4rem;min-height:300px}
.board__head .page-h{margin-top:auto}
.board__lede{font-size:var(--t-l);line-height:1.35;max-width:36ch;text-wrap:pretty}
.board__back{justify-content:flex-end}
.board__rows{grid-column:1 / -1;display:grid;gap:var(--gap)}
.board__row{display:grid;grid-template-columns:auto minmax(0,300px) minmax(0,1fr) minmax(0,290px);gap:clamp(14px, 2vw, 32px);align-items:center}
.board__n{font:400 clamp(2.5rem, 1.6rem + 2.4vw, 4.5rem)/.8 var(--display);min-width:1.6em}
.board__row .channel__screen{margin:0}
.board__text{display:flex;flex-direction:column;gap:.6rem}
.board__row .live{align-self:center;min-height:96px}
.board__row--open{border-style:dashed}
.board__row--open .board__n{color:transparent;-webkit-text-stroke:.022em var(--amber)}
.board__slot{aspect-ratio:16/10;border:var(--rule) dashed rgba(236,227,204,.4);border-radius:calc(var(--r) - 8px);display:grid;place-items:center;color:var(--dim)}
.board__slot .glyph{width:42px;height:42px}
@media (max-width:1100px){
  .board{grid-template-columns:1fr}
  .board__head{min-height:0}
  .board__row{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .board__row > .channel__screen,.board__slot{grid-column:2}
  .board__text,.board__row .live{grid-column:1 / -1}
}
@media (max-width:767px){
  .board__row{grid-template-columns:1fr}
  .board__n{font-size:2.25rem}
  .board__row > .channel__screen,.board__slot{grid-column:auto}
}

/* ---------- Services: the pre-flight checklist ----------
   Every item is a lamp. As a list arrives its lamps check in one by one, each with the same
   two misfires the power dial's ON lamp makes, and the list's state flips CHECKING → GO
   when the last one holds. Without motion (or JS) every lamp is simply lit and says GO. */
.preflight{grid-template-columns:minmax(0,1fr) minmax(0,.42fr)}
.preflight__head{grid-column:1 / -1;display:flex;flex-direction:column;gap:1.4rem;min-height:340px}
.preflight__head .page-h{margin-top:auto}
.preflight__lede{max-width:58ch;color:var(--dim);text-wrap:pretty}
.checklist{grid-column:1 / -1}
.preflight__side{display:flex;flex-direction:column;gap:var(--gap);align-self:start}   /* a still, then the key, beside the questions */
.preflight__end{min-height:340px}
.preflight__side .still__frame img{object-position:50% 72%}   /* the monitor sits low in this shot; keep it in a short phone frame */
/* the payoff: with every item checked the key is ready. Lit by default; with motion it waits
   for both lists to say GO, then strikes. */
.preflight__end .power__standby{opacity:0}
.preflight__end .power__on{opacity:1}
.boot .preflight__end .power__standby{opacity:1}
.boot .preflight__end .power__on{opacity:0}
.boot .preflight:has(.checklist.is-in + .checklist.is-in) .preflight__end .power__standby{animation:swap-out 1ms 1.9s forwards}
.boot .preflight:has(.checklist.is-in + .checklist.is-in) .preflight__end .power__on{animation:lamp-strike 260ms steps(1) 1.9s forwards}
.checklist__group{margin:0;font:inherit;color:var(--cream)}
.checklist__state{display:grid;text-align:right}
.checklist__state > span{grid-area:1/1}
.checklist__checking{opacity:0}
.checklist__go{display:inline-flex;align-items:center;justify-content:flex-end;gap:.6em;color:var(--cream)}
.checklist__go::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber-glow)}
.checklist__items{list-style:none;margin:.6rem 0 0;padding:0}
.item{display:grid;grid-template-columns:12px 2.2rem minmax(0,19rem) minmax(0,1fr) minmax(0,1fr);column-gap:1.2rem;
  align-items:baseline;padding-block:1.15rem;border-bottom:var(--rule) dashed rgba(236,227,204,.25)}
.item:last-child{border-bottom:0}
.item__lamp{width:12px;height:12px;border-radius:50%;border:var(--rule) solid var(--amber);background:var(--amber);
  box-shadow:0 0 10px rgba(236,227,204,.45);align-self:start;margin-top:calc((var(--t-l) * 1.05 - 12px) / 2)}   /* on the name's first line */
.item__n{align-self:start;margin-top:calc((var(--t-l) * 1.05 - var(--t-label)) / 2)}
.item__n{font:400 var(--t-label)/1 'Share Tech Mono',monospace;letter-spacing:.16em;color:var(--dim)}
.item__h{display:flex;align-items:center;gap:.5em;margin:0;font:400 var(--t-l)/1.05 var(--display)}
.item__h .glyph{width:.8em;height:.8em;color:var(--dim)}
.item__line{text-wrap:pretty}
.item__more{font-size:var(--t-s);color:var(--dim);text-wrap:pretty}
.checklist__note{display:flex;gap:.7rem;align-items:baseline;margin-top:.4rem;padding-top:1.1rem;
  border-top:var(--rule) solid var(--cream);font-weight:600;font-stretch:112%}
.checklist__note .glyph{translate:0 .15em}

@keyframes check-in{0%{background:transparent;box-shadow:none}20%{background:var(--amber)}35%{background:transparent}55%,100%{background:var(--amber);box-shadow:0 0 10px var(--amber-glow)}}
@keyframes swap-out{to{opacity:0}}
@keyframes swap-in{to{opacity:1}}
.boot .checklist .item__lamp{background:transparent;box-shadow:none}
.boot .checklist .checklist__checking{opacity:1}
.boot .checklist .checklist__go{opacity:0}
.boot .checklist.is-in .item__lamp{animation:check-in 420ms steps(1) both;animation-delay:calc(450ms + var(--n) * 200ms)}
.checklist{--done:calc(450ms + var(--count, 4) * 200ms + 300ms)}   /* after the last lamp holds */
.boot .checklist.is-in .checklist__checking{animation:swap-out 1ms var(--done) both}
.boot .checklist.is-in .checklist__go{animation:swap-in 1ms var(--done) both, lamp-strike 260ms steps(1) var(--done) forwards}

/* the questions: a native disclosure each, its lamp lit while it is open */
.faq{display:flex;flex-direction:column;gap:1.4rem}
.faq__list{border-top:var(--rule) dashed rgba(236,227,204,.25)}
.faq__q{border-bottom:var(--rule) dashed rgba(236,227,204,.25)}
.faq__q summary{display:flex;align-items:center;gap:.9rem;padding-block:1.05rem;cursor:pointer;list-style:none;
  font:600 var(--t-m)/1.3 'Archivo';font-stretch:112%}
.faq__q summary::-webkit-details-marker{display:none}
.faq__lamp{flex:none;width:10px;height:10px;border-radius:50%;border:var(--rule) solid var(--cream);transition:background 150ms}
.faq__q[open] .faq__lamp{background:var(--amber);border-color:var(--amber);box-shadow:0 0 10px var(--amber-glow)}
.faq__q summary .glyph{margin-left:auto;color:var(--dim);transition:transform 220ms var(--ease-out)}
.faq__q[open] summary .glyph{transform:rotate(90deg)}
.faq__updated{font:400 var(--t-label)/1.4 'Share Tech Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.faq__updated time{white-space:nowrap}
.faq__a{max-width:64ch;padding:0 0 1.25rem calc(10px + .9rem);color:var(--dim);text-wrap:pretty}
@media (hover:hover) and (pointer:fine){
  .faq__q summary:hover .faq__lamp{background:var(--amber);animation:lamp-strike 260ms steps(1)}
  .faq__q summary:hover .glyph{color:var(--cream)}
}
@media (prefers-reduced-motion:no-preference){
  .faq{interpolate-size:allow-keywords}
  .faq__q::details-content{height:0;overflow:clip;transition:height 320ms var(--ease-out),content-visibility 320ms allow-discrete}
  .faq__q[open]::details-content{height:auto}
}

@media (max-width:1100px){
  .item{grid-template-columns:12px 2.2rem minmax(0,1fr);row-gap:.45rem}
  .item__line,.item__more{grid-column:3}
}
@media (max-width:767px){   /* a checklist item: its lamp and number, then the name and the words under it */
  .item{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .8rem}
  .item__lamp,.item__n{margin-top:0}
  .item__h,.item__line,.item__more{flex-basis:100%}
  .worklog__all{flex-direction:column;align-items:stretch}   /* Work's board link, after its own rule */
}
@media (max-width:900px){
  .preflight{grid-template-columns:1fr}
  .preflight__head{min-height:0}
  .preflight__end{min-height:0}
}

/* ---------- Transmission: any page or post without a template of its own ----------
   A header readout and its cover side by side, then the words in one reading column inside a
   full-width cell, and the power key. Built from WordPress's own blocks, so the prose rules below
   style what the block editor writes: paragraphs, headings, lists, quotes, images. */
.transmission{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.transmission:not(.has-cover) .transmission__head{grid-column:1 / -1;min-height:260px}
.transmission__head{display:flex;flex-direction:column;gap:1.4rem;min-height:380px}
.transmission__h{margin-top:auto;font-size:clamp(2.25rem, 1.2rem + 3vw, 4.5rem);text-wrap:balance}
.transmission__lede{font-size:var(--t-l);line-height:1.35;max-width:38ch;color:var(--dim);text-wrap:pretty}
.transmission__cover .still__frame{aspect-ratio:4/3}
.transmission__cover img{width:100%;height:100%;object-fit:cover}
.transmission__body,.transmission__go{grid-column:1 / -1}
.transmission__body{padding:clamp(24px, 2vw + 12px, 64px) var(--pad)}

.prose{max-width:68ch;margin-inline:auto;color:var(--dim);line-height:1.65;text-wrap:pretty}
.prose > * + *{margin-top:1.1em}
.prose > :is(h2,h3,h4) + *{margin-top:.7em}
.prose h2{margin-top:2.2em;font:400 var(--t-l)/1.1 var(--display);color:var(--cream);text-wrap:balance}
.prose h3,.prose h4{margin-top:1.8em;font:700 1.25rem/1.25 'Archivo';font-stretch:112%;color:var(--cream)}
.prose strong{color:var(--cream);font-weight:650}
.prose a{color:var(--cream)}
.prose :is(ul,ol){padding:0;list-style:none;display:grid;gap:.55em}
.prose ul li{display:flex;gap:.8rem;align-items:baseline}
.prose ul li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--cream);translate:0 -2px}
.prose ol{counter-reset:n}
.prose ol li{display:flex;gap:.8rem;align-items:baseline;counter-increment:n}
.prose ol li::before{content:counter(n, decimal-leading-zero);flex:none;font:400 var(--t-label)/1 'Share Tech Mono',monospace;letter-spacing:.16em;color:var(--cream)}
.prose blockquote{margin-inline:0;padding:1.2em 1.4em;border:var(--rule) solid var(--cream);border-radius:12px;color:var(--cream);
  font-size:var(--t-l);line-height:1.35}
.prose blockquote p{margin:0}
.prose blockquote cite{display:block;margin-top:.8em;font:400 var(--t-label)/1.4 'Share Tech Mono',monospace;letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--dim)}
.prose figure{margin-inline:0}
.prose img{height:auto;border:var(--rule) solid var(--cream);border-radius:10px}
.prose figcaption{margin-top:.6em;font:400 var(--t-label)/1.4 'Share Tech Mono',monospace;letter-spacing:.16em;text-transform:uppercase}
.prose hr{border:0;border-top:var(--rule) dashed rgba(236,227,204,.25);margin-block:2em}

@media (max-width:900px){
  .transmission{grid-template-columns:1fr}
  .transmission__head{min-height:0}
}

/* the panel powers on like every cell: it rasters down from the bar, and goes faster than it came */
@supports selector(:popover-open){ @media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .keys[popover]{clip-path:inset(0 0 100% 0 round var(--r));
    transition:clip-path 160ms var(--ease-out), overlay 160ms allow-discrete, display 160ms allow-discrete}
  .keys:popover-open{clip-path:inset(0 0 0 0 round var(--r));transition-duration:300ms}
  @starting-style{ .keys:popover-open{clip-path:inset(0 0 100% 0 round var(--r))} }
} }

/* ---------- the phosphor room ----------
   Retro-futurist pass (2026-10-19): the screen world read as a 1980s terminal. Cream stays the
   system; amber phosphor marks only what is live. */

/* SKREEN is shown on a tube: scanlines run across the letters and they carry a faint phosphor bloom */
.word__l{text-shadow:var(--bloom)}
.word::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(17,17,17,.42) 3px 5px);mix-blend-mode:multiply}
/* the set switches on: a bright line opens into the picture, then the letters strike */
@keyframes crt-on{
  0%{transform:scale(.2,.006);filter:brightness(4)}
  35%{transform:scale(1,.006);filter:brightness(3)}
  70%{transform:scale(1,1.03);filter:brightness(1.4)}
  100%{transform:none;filter:none}
}
.boot:not(.hop) .word:not(.is-struck){animation:crt-on 620ms var(--ease-out) 60ms both}

/* a page heading ends on the terminal cursor */
.page-h::after,.offer__line::after{content:"";display:inline-block;width:.42em;height:.72em;margin-left:.14em;
  background:var(--amber);box-shadow:0 0 12px var(--amber-glow);vertical-align:-.04em;animation:cursor 1.06s steps(1) infinite}
@keyframes cursor{50%{opacity:0}}

/* every camera carries a tally lamp: it is on air */
:is(.still,.plate) > .label > span:first-child{display:inline-flex;align-items:center;gap:.7em}
:is(.still,.plate) > .label > span:first-child::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 8px var(--amber-glow);animation:tally 2.4s ease-in-out infinite}
@keyframes tally{50%{opacity:.45}}

@media (prefers-reduced-motion: reduce){
  .page-h::after,.offer__line::after,:is(.still,.plate) > .label > span:first-child::before{animation:none}
}

/* ---------- phosphor, pushed ----------
   Readouts read in amber: a label's value (the right-hand half), its icon, and the counters
   beside checklist items and form stages. A cell catches an amber edge when you point at it
   or work inside it. */
.label > span:last-child:not(:first-child),.label__icon > .glyph,.item__n,.stage__t{color:var(--amber)}
.cell{transition:border-color 200ms var(--ease-out)}
.cell:not(.lamp):focus-within{border-color:var(--amber)}
@media (hover:hover) and (pointer:fine){ .cell:not(.lamp):hover{border-color:var(--amber)} }

/* a picture warms to amber phosphor while you point at it */
.still__frame::before,.channel__screen::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--amber);mix-blend-mode:soft-light;opacity:0;transition:opacity 400ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  :is(.still,.plate,.channel,.log,.board__row):hover :is(.still__frame,.channel__screen)::before{opacity:.6}
}

/* Tablets and phones: SKREEN already spans the width, so it grows in height instead. The letters
   stretch vertically from the top and the line reserves the extra height below them. */
@media (max-width:1100px){
  :root{--tall:1.3}
  .word__ink{transform:scaleY(var(--tall));transform-origin:50% 0;margin-bottom:calc(.74em * (var(--tall) - 1))}
}
@media (max-width:767px){ :root{--tall:1.65} }