/* ============================================================
   THE BUREAU — mid-century title-sequence graphics.
   Drenched fields, hard cuts, cut paper. No radius. No shadow.
   No gradient. No glow. Every edge is scissored.
   ============================================================ */

:root{
  --vermilion:#F0451A;
  --ink:#101012;
  --bone:#F4ECDC;
  --chartreuse:#CBD400;
  --teal:#00726B;

  /* Secondary text, tinted from its own field. Never gray. */
  --on-verm-soft:#2A130D;
  --on-ink-soft:#B4AEA3;
  --on-teal-soft:#E2EEEC;
  --on-chart-soft:#3D4000;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --ease:cubic-bezier(.16,1,.3,1);

  --display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --data:"Courier Prime","Courier New",monospace;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ui);
  font-size:clamp(1rem,.94rem + .3vw,1.1rem);
  line-height:1.55;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}

.skip{
  position:absolute;left:-999px;top:0;z-index:100;
  background:var(--chartreuse);color:var(--ink);
  padding:.75rem 1.25rem;font:700 .85rem/1 var(--ui);
  letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:0}

:where(a,button,input):focus-visible{
  outline:3px solid var(--chartreuse);
  outline-offset:3px;
}
.reel--intercept :where(a,button,input):focus-visible{outline-color:var(--ink)}

/* ---------- The reels: each one a drenched field ---------- */
.reel{padding:var(--pad);position:relative}
.reel--title{background:var(--vermilion);color:var(--ink)}
.reel--dossier{background:var(--ink);color:var(--bone)}
.reel--manual{background:var(--teal);color:var(--bone)}
.reel--intercept{background:var(--chartreuse);color:var(--ink)}
.reel--disclose{background:var(--bone);color:var(--ink)}

/* ---------- Stamp: the small tracked caption ---------- */
.stamp{
  font:600 clamp(.62rem,.55rem + .2vw,.75rem)/1.4 var(--ui);
  letter-spacing:.22em;text-transform:uppercase;
  margin:0 0 clamp(1rem,3vw,2rem);
}
.reel--title .stamp{color:var(--on-verm-soft)}
.reel--manual .stamp{color:var(--on-teal-soft)}
.reel--intercept .stamp{color:var(--on-chart-soft)}
.stamp--file{color:var(--on-ink-soft);margin-bottom:.75rem}

/* Redaction: cut paper laid over the word ---------------- */
.rd{
  background:var(--ink);color:transparent;
  padding:0 .12em;user-select:none;
  font-family:var(--data);
}
.reel--dossier .rd,.reel--manual .rd{background:var(--bone)}

/* ---------- Ranked type: the title-card device ---------- */
.rank{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  text-transform:uppercase;
  line-height:.8;
  letter-spacing:-.015em;
  font-size:clamp(3.4rem,11vw,8.75rem);
}
.rank span{
  display:block;
  margin-left:calc(var(--i) * clamp(.45rem,2.4vw,2.6rem));
}
.rank--sec{font-size:clamp(2.6rem,8vw,6.5rem);margin-bottom:clamp(1.5rem,4vw,2.75rem)}
.rank--file{font-size:clamp(2.75rem,7.5vw,6rem);margin:0 0 .5rem;color:var(--bone)}
.rank--dis{font-size:clamp(2.2rem,6vw,4.5rem)}

/* Entrance: lines rank in on a diagonal, once, on arm. ---- */
.is-armed .reel--title .rank span{
  animation:rankIn .82s var(--ease) both;
  animation-delay:calc(var(--i) * 90ms + var(--rank-lead,120ms));
}
@keyframes rankIn{
  from{opacity:0;transform:translate3d(-.32em,.14em,0);clip-path:inset(0 100% 0 0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}

/* ---------- Reel 1 · the issuing office ---------- */
.reel--title{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  grid-template-rows:auto auto auto 1fr auto;
  column-gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(1.5rem,4vh,3rem);
}
.bars{grid-column:1/-1;grid-row:1;display:flex;flex-direction:column;gap:.32rem;margin-bottom:clamp(1rem,2.5vw,1.75rem)}
.bars i{display:block;height:clamp(.42rem,.85vw,.7rem);width:var(--w);background:var(--ink)}
.is-armed .bars i{
  animation:barIn .7s var(--ease) both;
  animation-delay:var(--d);
  transform-origin:left center;
}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.reel--title .stamp{grid-column:1;grid-row:2;margin-bottom:clamp(.75rem,2vw,1.25rem)}
.rank{grid-column:1;grid-row:3}
.lede{
  grid-column:1;grid-row:4;align-self:start;
  max-width:36ch;margin:clamp(1rem,2.5vw,1.5rem) 0 clamp(1.25rem,3vw,1.75rem);
  font-size:clamp(1rem,.95rem + .35vw,1.15rem);
  color:var(--on-verm-soft);
  text-wrap:pretty;
}
.lede strong{color:var(--ink);font-weight:700}
.issue{grid-column:1;grid-row:5;max-width:34rem;align-self:end}

.mark--hero{
  grid-column:2;grid-row:2/6;
  margin:0;align-self:stretch;
  display:flex;align-items:center;justify-content:center;
  min-height:0;
}
.mark--hero svg{width:100%;height:100%;max-height:min(72svh,640px)}

/* The name field, set as a bar of cut paper ---------------- */
.issue{background:var(--ink);color:var(--bone);padding:clamp(1rem,2.5vw,1.5rem)}
.issue label{
  display:block;
  font:700 .68rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-ink-soft);margin-bottom:.85rem;
}
.issue__row{display:flex;gap:.75rem;align-items:stretch;flex-wrap:wrap}
.issue input{
  flex:1 1 12rem;min-width:0;
  background:transparent;color:var(--bone);
  border:0;border-bottom:2px solid var(--bone);
  font:400 clamp(1.1rem,1rem + .6vw,1.5rem)/1.3 var(--data);
  padding:.35rem .1rem .5rem;
}
.issue input::placeholder{color:var(--on-ink-soft);opacity:1}
.issue button{
  flex:0 0 auto;
  background:var(--chartreuse);color:var(--ink);border:0;
  font:800 clamp(1rem,.95rem + .35vw,1.2rem)/1 var(--display);
  letter-spacing:.1em;text-transform:uppercase;
  padding:.85rem 1.6rem;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.issue button:hover{background:var(--bone)}
.issue button:disabled{background:var(--on-ink-soft);color:var(--ink);cursor:progress}
.note{
  margin:.9rem 0 0;font-size:.78rem;line-height:1.5;
  color:var(--on-ink-soft);max-width:46ch;
}
.err{
  margin:.85rem 0 0;padding:.5rem .7rem;
  background:var(--vermilion);color:var(--ink);
  font:700 .82rem/1.4 var(--ui);max-width:46ch;
}
.err[hidden]{display:none}

/* ---------- Reel 2 · the legend ---------- */
.wipe{
  position:fixed;inset:0;z-index:60;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;pointer-events:none;
}
.wipe.run{animation:wipe .9s var(--ease) forwards}
@keyframes wipe{
  0%{transform:scaleX(0);transform-origin:left center}
  48%{transform:scaleX(1);transform-origin:left center}
  52%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}

.reel--dossier{min-height:100svh;display:flex;align-items:center}
.dossier__grid{
  width:100%;display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.75rem,5vw,4.5rem);
  align-items:center;
}
.mark--file{margin:0}
.mark--file svg{width:100%;height:auto;max-height:min(68svh,620px)}
.mark__cap{
  margin-top:1rem;font:400 .72rem/1.5 var(--data);
  color:var(--on-ink-soft);letter-spacing:.04em;
}
.file__as{
  margin:0 0 clamp(1.5rem,4vw,2.5rem);
  font:400 clamp(1.05rem,1rem + .5vw,1.4rem)/1.4 var(--data);
  color:var(--on-ink-soft);
}
.file__as em{color:var(--chartreuse);font-style:italic}

.record{margin:0 0 clamp(1.75rem,4vw,2.5rem);display:grid;gap:0}
.record .row{
  display:grid;
  grid-template-columns:minmax(8rem,13rem) minmax(0,1fr);
  gap:.5rem clamp(1rem,2.5vw,2rem);
  padding:.85rem 0;
  border-top:1px solid #33322F;
  align-items:baseline;
}
.record .row:last-child{border-bottom:1px solid #33322F}
.record dt{
  font:700 .66rem/1.5 var(--ui);letter-spacing:.19em;text-transform:uppercase;
  color:var(--on-ink-soft);margin:0;
}
.record dd{
  margin:0;font:400 clamp(.95rem,.9rem + .3vw,1.12rem)/1.5 var(--data);
  color:var(--bone);text-wrap:pretty;
}
.record dd b{color:var(--chartreuse);font-weight:700}

/* Liability: cut bars, not a progress ring ---------------- */
.meter{display:flex;gap:.25rem;align-items:center}
.meter i{display:block;width:1.1rem;height:.85rem;background:#33322F}
.meter i.on{background:var(--vermilion)}
.meter span{margin-left:.6rem;font:400 .85rem/1 var(--data);color:var(--on-ink-soft)}

.file__acts{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{
  background:var(--bone);color:var(--ink);border:2px solid var(--bone);
  font:800 .92rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
  padding:.8rem 1.4rem;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.btn:hover{background:var(--chartreuse);border-color:var(--chartreuse)}
.btn--ghost{background:transparent;color:var(--bone)}
.btn--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* Record types out, line by line, like a title card credit */
.is-typing .row{animation:rowIn .5s var(--ease) both;animation-delay:calc(var(--r) * 105ms + 320ms)}
@keyframes rowIn{from{opacity:0;transform:translate3d(0,.6rem,0)}to{opacity:1;transform:none}}

/* ---------- Reel 3 · the field manual ---------- */
.programme{
  list-style:none;counter-reset:d;margin:0;padding:0;
  max-width:62rem;
}
.programme li{
  counter-increment:d;
  display:grid;
  grid-template-columns:clamp(3rem,7vw,5.5rem) minmax(0,1fr);
  gap:clamp(.75rem,2.5vw,2rem);
  padding:clamp(1rem,2.5vw,1.5rem) 0;
  border-top:2px solid var(--on-teal-soft);
  align-items:baseline;
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
  color:var(--on-teal-soft);
  text-wrap:pretty;
}
.programme li:last-child{border-bottom:2px solid var(--on-teal-soft)}
.programme li::before{
  content:counter(d,decimal-leading-zero);
  font:900 clamp(2rem,5.5vw,4rem)/.8 var(--display);
  color:var(--chartreuse);
}
.programme b{color:var(--bone);font-weight:700}

/* ---------- Reel 4 · the wire ---------- */
.wire{list-style:none;margin:0 0 1.5rem;padding:0;max-width:70rem}
.wire li{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  gap:.4rem clamp(.75rem,2vw,1.5rem);
  padding:.7rem 0;
  border-top:1px solid var(--on-chart-soft);
  font:400 clamp(.85rem,.82rem + .25vw,1rem)/1.5 var(--data);
  align-items:baseline;
}
.wire li:first-child{animation:wireIn .5s var(--ease) both}
@keyframes wireIn{from{opacity:0;transform:translate3d(0,-.5rem,0)}to{opacity:1;transform:none}}
.wire time{color:var(--on-chart-soft);white-space:nowrap}
.wire .cs{font-weight:700;color:var(--ink);white-space:nowrap}
.wire .msg{color:var(--ink);text-wrap:pretty}
.note--wire{color:var(--on-chart-soft);margin:0}

/* ---------- Reel 5 · disclosure ---------- */
.disclose{max-width:64ch;font-size:clamp(1rem,.95rem + .3vw,1.12rem)}
.disclose p{margin:0 0 1.1rem;text-wrap:pretty}
.disclose b{font-weight:700}
.disclose__sig{font:400 .85rem/1.6 var(--data);color:#5C544A;margin-top:2rem}
.disclose a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- Narrow: restack, keep the bars true ---------- */
@media (max-width:900px){
  .reel--title{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(6,auto);
    min-height:auto;
    padding-block:clamp(1.5rem,6vw,3rem);
  }
  .reel--title .stamp{grid-row:2}
  .rank{grid-row:3}
  .lede{grid-row:4;align-self:auto;max-width:44ch}
  .issue{grid-row:6;max-width:none;align-self:auto}
  .mark--hero{
    grid-column:1;grid-row:5;
    margin:clamp(1.5rem,5vw,2.5rem) 0;
    align-self:auto;
  }
  .mark--hero svg{max-height:min(46svh,380px)}
  .dossier__grid{grid-template-columns:minmax(0,1fr)}
  .mark--file svg{max-height:min(42svh,360px)}
  .reel--dossier{min-height:auto;padding-block:clamp(3rem,10vw,5rem)}
}
@media (max-width:560px){
  .record .row{grid-template-columns:minmax(0,1fr);gap:.3rem;padding:.8rem 0}
  .wire li{grid-template-columns:auto minmax(0,1fr)}
  .wire .msg{grid-column:1/-1}
  .file__acts .btn{flex:1 1 100%;text-align:center}
}

/* ---------- Reduced motion: cut straight to the still ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .wipe{display:none}
  html{scroll-behavior:auto}
}

/* ---------- The mark comes apart ----------
   Shards are drawn already offset; the animation runs them back
   from the assembled silhouette, so the cut happens on screen. */
.mark svg path{transform-box:fill-box}
.is-armed .mark--hero svg path{
  animation:shardCut .9s var(--ease) both;
  animation-delay:calc(var(--s) * 60ms + 340ms);
}
.is-typing .mark--file svg path{
  animation:shardCut .8s var(--ease) both;
  animation-delay:calc(var(--s) * 52ms + 180ms);
}
@keyframes shardCut{
  from{opacity:0;transform:translate(calc(var(--dx) * -1px),calc(var(--dy) * -1px))}
  35%{opacity:1}
  to{opacity:1;transform:translate(0,0)}
}

/* The file's own codename ranks in when the legend is issued. */
.is-typing .rank--file span{
  animation:rankIn .7s var(--ease) both;
  animation-delay:calc(var(--i) * 90ms + 240ms);
}