/* ------------------------------------------------------------------
   Tokens. The complete light palette lives on bare :root; the dark
   media query and the [data-theme] stamps redefine ONLY tokens, so a
   viewer on system default and a viewer who has toggled both resolve.
   The palette is the identity sheet's: one ink on warm stock, with the
   accent supplied per preparation from the ink measured off that plate.
------------------------------------------------------------------- */
:root{
  --paper:#EEEBE3; --ink:#14120F; --rule:#C0BBAE; --muted:#5A5751;
  --panel:#17150F; --panel-ink:#E9E5DA; --field:#E4E0D6;
  --accent:#AF4C28; --grain:.055;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --mono:"Courier Prime","Courier New",monospace;
  --measure:64ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16140E; --ink:#E7E2D6; --rule:#36322A; --muted:#948E80;
    --panel:#EDEAE1; --panel-ink:#17150F; --field:#1F1C15; --grain:.045;
  }
}
:root[data-theme="dark"]{
  --paper:#16140E; --ink:#E7E2D6; --rule:#36322A; --muted:#948E80;
  --panel:#EDEAE1; --panel-ink:#17150F; --field:#1F1C15; --grain:.045;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* the same surface the plates are printed on */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
  background-image:var(--grain-img); background-size:96px 96px;
  opacity:var(--grain); mix-blend-mode:multiply;
}

.wrap{max-width:1120px; margin:0 auto; padding:0 40px}
.lab{
  font-family:var(--sans); font-weight:700; font-size:12px;
  letter-spacing:.20em; text-transform:uppercase; color:var(--ink);
}
.lab-m{color:var(--muted)}
hr.thick{border:0; height:4px; background:var(--ink); margin:0}
hr.thin{border:0; height:1px; background:var(--rule); margin:0}

/* ---------- masthead ---------- */
header{padding:44px 0 0}
.mast{display:flex; align-items:center; gap:22px; padding-bottom:22px}
.mast img{width:74px; height:74px; display:block}
.mast .rev{display:none}
:root[data-theme="dark"] .mast .std{display:none}
:root[data-theme="dark"] .mast .rev{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mast .std{display:none}
  :root:not([data-theme="light"]) .mast .rev{display:block}
}
.word{display:flex; flex-direction:column; gap:2px; flex:1}
.word b{
  font-family:var(--sans); font-weight:900; font-size:30px;
  letter-spacing:.02em; line-height:1;
}
.word span{
  font-family:var(--sans); font-weight:500; font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
}
.word i{font-family:var(--serif); font-style:italic; font-size:15px;
  color:var(--muted)}
.mast .code{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  text-align:right; line-height:1.7; letter-spacing:.02em;
}

/* ---------- statement ---------- */
.state{padding:34px 0 26px; display:grid; grid-template-columns:1fr 336px;
  gap:56px; align-items:start}
.state p{margin:0; font-size:21px; line-height:1.5; max-width:var(--measure)}
.state p+p{margin-top:16px; font-size:17px; color:var(--muted)}
.affil{background:var(--panel); color:var(--panel-ink); padding:20px 22px;
  display:flex; gap:16px; align-items:flex-start}
.affil img{width:40px; height:40px; flex:none}
.affil .std{display:block} .affil .rev{display:none}
:root[data-theme="dark"] .affil .std{display:none}
:root[data-theme="dark"] .affil .rev{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .affil .std{display:none}
  :root:not([data-theme="light"]) .affil .rev{display:block}
}
.affil b{font-family:var(--sans); font-weight:700; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; display:block}
.affil span{font-family:var(--mono); font-size:11px; opacity:.72;
  display:block; margin-top:6px; line-height:1.6}

/* ---------- index / picker ---------- */
.index{padding:6px 0 0}
.picker{display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap;
  padding:22px 0 30px}
.field{flex:1; min-width:280px; max-width:520px}
.field .lab{display:block; margin-bottom:9px}
.selwrap{position:relative}
select{
  appearance:none; -webkit-appearance:none; width:100%;
  font-family:var(--mono); font-size:16px; letter-spacing:.02em;
  color:var(--ink); background:var(--field);
  border:1px solid var(--ink); border-radius:0;
  padding:14px 46px 14px 15px; cursor:pointer;
}
select:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.caret{position:absolute; right:15px; top:50%; transform:translateY(-50%);
  pointer-events:none; width:13px; height:8px}
.caret path{fill:var(--ink)}
.count{font-family:var(--mono); font-size:12px; color:var(--muted);
  padding-bottom:15px}

/* ---------- the preparation ---------- */
.prep{display:grid; grid-template-columns:minmax(0,44%) minmax(0,1fr);
  gap:52px; padding:34px 0 10px; align-items:start}
.plate{position:relative}
.plate img{width:100%; display:block; border:1px solid var(--rule);
  border-bottom:4px solid var(--accent)}
.plate figcaption{font-family:var(--mono); font-size:11px;
  color:var(--muted); margin-top:12px; line-height:1.6}

.copy>.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin:0 0 14px;
}
.copy h2{
  font-family:var(--sans); font-weight:900; font-size:clamp(38px,6vw,58px);
  letter-spacing:-.015em; line-height:.95; margin:0; text-wrap:balance;
}
.copy .gen{font-family:var(--serif); font-style:italic; font-size:19px;
  color:var(--muted); margin:10px 0 0}
.copy .body{margin:22px 0 0; font-size:18.5px; line-height:1.62;
  max-width:var(--measure)}
.spec{margin:28px 0 0; border-top:1px solid var(--rule)}
.spec div{display:grid; grid-template-columns:126px 1fr; gap:18px;
  padding:11px 0; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:12.5px; line-height:1.6}
.spec dt{color:var(--muted); letter-spacing:.08em; text-transform:uppercase}
.spec dd{margin:0}
.inks{display:flex; gap:0; margin-top:4px}
.inks i{display:block; width:26px; height:13px}

footer{padding:34px 0 60px}
.foot{font-family:var(--mono); font-size:11.5px; color:var(--muted);
  line-height:1.8; display:flex; justify-content:space-between; gap:24px;
  flex-wrap:wrap; padding-top:14px}

@media (max-width:900px){
  .wrap{padding:0 24px}
  .state{grid-template-columns:1fr; gap:28px}
  .prep{grid-template-columns:1fr; gap:32px}
  .mast .code{display:none}
}
@media (max-width:520px){
  body{font-size:17px}
  .word b{font-size:23px}
  .about{padding:26px}
}

.fade{animation:rise .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0; transform:translateY(9px)} to{opacity:1;
  transform:none}}
@media (prefers-reduced-motion:reduce){
  .fade{animation:none}
}

/* ---------- about us ----------
   Set as a corporate about page, not as a note about the project: a
   facts list, six short columns, and the chief executive's line on an
   ink panel. The rules between blocks are the identity sheet's.        */
.about{margin:70px 0 0; border-top:4px solid var(--ink); padding-top:34px}
.about-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:52px; align-items:start; padding-bottom:30px}
.about-head h2{font-family:var(--sans); font-weight:900;
  font-size:clamp(26px,3.4vw,38px); letter-spacing:-.01em; line-height:1;
  margin:0; text-wrap:balance}
.about-head p{margin:0; font-size:19px; line-height:1.55;
  max-width:var(--measure)}

.facts{display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  margin:0 0 40px; border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.facts div{padding:14px 20px 15px 0}
.facts dt{font-family:var(--sans); font-weight:700; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin-bottom:5px}
.facts dd{margin:0; font-family:var(--mono); font-size:12.5px;
  line-height:1.5}

.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 44px}
.cols article h3{font-family:var(--sans); font-weight:700; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px;
  padding-top:12px; border-top:1px solid var(--rule)}
.cols article p{margin:0; font-size:16.5px; line-height:1.58}

.lead{margin:46px 0 0; background:var(--panel); color:var(--panel-ink);
  padding:38px 44px; display:grid; gap:22px}
.lead blockquote{margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(21px,2.7vw,29px); line-height:1.36; max-width:34ch;
  text-wrap:balance}
.lead .who{margin:0; display:flex; flex-direction:column; gap:3px}
.lead .who b{font-family:var(--sans); font-weight:700; font-size:13px;
  letter-spacing:.10em; text-transform:uppercase}
.lead .who span{font-family:var(--serif); font-style:italic; font-size:16px;
  opacity:.74}

@media (max-width:900px){
  .about-head{grid-template-columns:1fr; gap:18px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr; gap:26px}
  .lead{padding:28px}
}

/* ------------------------------------------------------------------
   SIGNAL DEGRADATION

   The overlay is fixed to the viewport and inert. Its ghosts are clones
   of .wrap hung at minus the scroll offset, so a clip-path band lands on
   the same type the reader is looking at; translate3d puts each band on
   the compositor, so a burst costs paint on a handful of layers rather
   than a relayout of the document.
------------------------------------------------------------------- */
#gl{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  overflow:hidden; contain:strict;
}
.gl-defs{position:absolute; width:0; height:0; overflow:hidden}

.gl-slab{
  position:absolute; inset:0; display:none;
  will-change:transform, clip-path;
}
.gl-ghost{
  position:absolute; margin:0;
  will-change:transform;
}
/* a clone is scenery: it must never take a click or a caret */
.gl-slab *{pointer-events:none !important; user-select:none !important}

/* a dropped-out band keeps its clip and its transform but loses the
   document inside it — flat colour where the page used to be */
.gl-slab.gl-solid .gl-ghost{visibility:hidden}

.gl-mark{
  position:absolute; background:#C2201A; opacity:.86;
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gl-mark{mix-blend-mode:screen}
}
:root[data-theme="dark"] .gl-mark{mix-blend-mode:screen}

/* channel separation on the live page, only while a burst is up */
:root.gl-on .wrap{filter:url(#hv-rgb)}
:root.gl-hard .wrap{opacity:.92}
/* the top tier throws the document itself off its axis, so even the
   part that has not been torn out is no longer where it was */
:root.gl-total .wrap{
  opacity:.82;
  transform:translate3d(var(--gt-x,0),var(--gt-y,0),0)
            skewX(var(--gt-k,0deg)) scale(var(--gt-s,1));
}
:root.gl-total #gl::after{opacity:1}

/* scanlines, and the horizontal drag a bad line gives the whole frame */
:root.gl-scan #gl::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    180deg, rgba(0,0,0,.15) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]).gl-scan #gl::after{
    background:repeating-linear-gradient(
      180deg, rgba(255,255,255,.12) 0 1px, rgba(255,255,255,0) 1px 3px);
    mix-blend-mode:screen;
  }
}
:root[data-theme="dark"].gl-scan #gl::after{
  background:repeating-linear-gradient(
    180deg, rgba(255,255,255,.12) 0 1px, rgba(255,255,255,0) 1px 3px);
  mix-blend-mode:screen;
}

/* the toggle, set as a fourth line of masthead furniture */
.mast .code #sig{
  appearance:none; -webkit-appearance:none;
  background:none; border:0; padding:0; margin:0;
  font:inherit; letter-spacing:inherit; color:var(--muted);
  cursor:pointer; text-align:right;
  border-bottom:1px dotted var(--rule);
}
.mast .code #sig:hover{color:var(--ink); border-bottom-color:var(--ink)}
.mast .code #sig:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}

/* ------------------------------------------------------------------
   THE INTERRUPTION

   A broadcast slate: black frame, white letters, film over the top of
   both. Everything that sells it as film rather than as a black div is
   in the imperfections, and every one of them is stepped rather than
   eased — a projector runs at 24 discrete frames, so a smoothly
   interpolated wobble reads as CSS and a stepped one reads as a gate.

   - GATE WEAVE: the frame never sits still, ~1px, on a 12-step cycle.
   - GRAIN: two layers of the same tile at different scales and speeds,
     jumping to a new offset each frame. One layer alone crawls; two at
     different rates stop reading as a repeating texture.
   - HAIRS: two vertical scratches that jump position, because a hair in
     the gate moves in the gate.
   - FLICKER: the black level breathes. Emulsion density is uneven and
     the lamp is not perfectly steady.
   - VIGNETTE: falloff at the corners, which is the lens.
------------------------------------------------------------------- */
#slate{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .12s linear, visibility 0s linear .12s;
}
:root.slate-on #slate{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .09s linear, visibility 0s;
}
#slate .sl-frame{
  position:absolute; inset:0; overflow:hidden;
  background:#000; isolation:isolate;
}

/* --- the letters --- */
#slate .sl-weave{
  position:absolute; inset:0 0 6.2% 0;
  display:flex; align-items:center; justify-content:center;
  animation:sl-weave .5s steps(1,end) infinite;
}
#slate .sl-line{
  margin:0; text-align:center; color:#F2F0EA;
  font-family:var(--sans); font-weight:700;
  font-size:clamp(22px, 4.6vw, 62px); line-height:1.24;
  letter-spacing:.14em; text-transform:uppercase;
  /* light through emulsion blooms a little; the halo is that, not a
     drop shadow — no offset, only spread */
  text-shadow:0 0 22px rgba(255,255,255,.30), 0 0 4px rgba(255,255,255,.22);
  padding:0 6vw;
}
@keyframes sl-weave{
  0%{transform:translate(0,0)}      12%{transform:translate(.6px,-1px)}
  25%{transform:translate(-1px,.4px)} 37%{transform:translate(.3px,1px)}
  50%{transform:translate(-.5px,-.6px)} 62%{transform:translate(1px,.2px)}
  75%{transform:translate(-.7px,-1.1px)} 87%{transform:translate(.2px,.7px)}
  100%{transform:translate(0,0)}
}

/* --- film grain, two layers --- */
#slate .sl-grain{
  position:absolute; inset:-40px; pointer-events:none;
  background-image:var(--film-img); background-repeat:repeat;
  background-size:160px 160px; opacity:.55;
  animation:sl-grain .42s steps(1,end) infinite;
}
#slate .sl-grain2{
  background-size:96px 96px; opacity:.34;
  animation:sl-grain2 .3s steps(1,end) infinite;
}
@keyframes sl-grain{
  0%{background-position:0 0}       14%{background-position:-37px 19px}
  28%{background-position:23px -41px} 42%{background-position:-14px -12px}
  57%{background-position:44px 31px} 71%{background-position:-29px 8px}
  85%{background-position:11px -26px} 100%{background-position:0 0}
}
@keyframes sl-grain2{
  0%{background-position:12px -8px} 20%{background-position:-31px 27px}
  40%{background-position:19px 14px} 60%{background-position:-9px -33px}
  80%{background-position:36px 5px} 100%{background-position:12px -8px}
}

/* --- hairs in the gate --- */
#slate .sl-hair{
  position:absolute; z-index:7; top:-6%; height:112%; width:1px; left:var(--x);
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 12%,
    rgba(255,255,255,.20) 55%, rgba(255,255,255,0) 100%);
  animation:sl-hair 1.1s steps(1,end) infinite;
}
#slate .sl-hair2{width:2px; opacity:.5; animation-duration:.73s;
  animation-delay:-.3s}
@keyframes sl-hair{
  0%,44%{transform:translateX(0); opacity:.9}
  45%,62%{transform:translateX(-38px); opacity:.55}
  63%,79%{transform:translateX(96px); opacity:.8}
  80%,100%{transform:translateX(24px); opacity:.35}
}

/* --- lamp and lens --- */
#slate .sl-vig{
  position:absolute; inset:0;
  background:radial-gradient(120% 92% at 50% 46%,
    rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 46%,
    rgba(0,0,0,.55) 100%);
}
#slate .sl-flick{
  position:absolute; inset:0; z-index:7; background:#fff; mix-blend-mode:overlay;
  animation:sl-flick .28s steps(1,end) infinite;
}
@keyframes sl-flick{
  0%{opacity:.030}  16%{opacity:.075} 33%{opacity:.014}
  50%{opacity:.056} 66%{opacity:.024} 83%{opacity:.090}
  100%{opacity:.030}
}

@media (prefers-reduced-motion:reduce){
  #slate .sl-weave, #slate .sl-bar, #slate .sl-grain, #slate .sl-hair,
  #slate .sl-flick{animation:none}
}

/* ------------------------------------------------------------------
   THE SLUG BAR

   Lifted straight off the photo ops, and measured the same way: the bar
   is 6.2% of the frame, the marks are 74% of the bar, the house roundel
   reversed and the Office's seal beside it, caption left, accord code
   hard right. Same proportions, same order of precedence.

   It sits ABOVE the grain and the vignette rather than under them —
   a slug is printed onto the frame after the fact, so it does not
   carry the emulsion of the picture it labels. Only the flicker and
   the gate weave reach it, because those are the projector.
------------------------------------------------------------------- */
#slate .sl-bar{
  position:absolute; left:0; right:0; bottom:0;
  animation:sl-weave .5s steps(1,end) infinite;
  height:6.2%; min-height:84px; z-index:6;
  background:#11100F;
  /* the marks are one group: 1.4% between them, as in the print
     version, then a wider gap before the notice so the reader sees
     two marks and a sentence rather than three items in a row */
  display:flex; align-items:center; gap:1.4%;
  padding:0 2% 0 2%;
}
#slate .sl-mark, #slate .sl-seal{
  height:74%; width:auto; display:block; flex:0 0 auto;
}
/* 1.04, straight off photoop2.furniture(): the Office's seal outranks
   the house roundel, but only just. At 84% it read as a different
   size class instead of a peer. */
#slate .sl-seal{height:77%; margin-right:.9%}
/* Both of these are set entirely in capitals, and a line box centred
   by align-items:center reserves descender space that no capital ever
   occupies — so mathematically centred type sits visibly high. The
   nudge is that reserved space, halved. */
#slate .sl-cap{
  flex:1 1 auto; min-width:0;
  color:#E4E0D6; font-family:var(--sans); font-weight:500;
  font-size:clamp(9px,.95vw,16px); letter-spacing:.09em;
  text-transform:uppercase; line-height:1.25;
  overflow:hidden; transform:translateY(.085em);
}
#slate .sl-code{
  flex:0 0 auto; color:#928C82;
  font-family:var(--mono); font-size:clamp(8px,.84vw,13px);
  letter-spacing:.10em; transform:translateY(.085em);
}
@media (max-width:560px){
  #slate .sl-bar{height:auto; min-height:0; padding:11px 4%;
    flex-wrap:wrap; gap:9px 12px; align-items:center}
  #slate .sl-seal{margin-right:0}
  #slate .sl-mark, #slate .sl-seal{height:26px}
  #slate .sl-cap{flex:1 1 100%; order:3; font-size:9px; letter-spacing:.05em}
  #slate .sl-weave{inset:0 0 84px 0}
}