/* ═══════════════════════════════════════════════════════════
   $UP — Undocumented Person
   Booking room: institutional plaster, one harsh light source,
   State-Department blue for every word that got swapped.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* sampled straight out of public/mugshot.png */
  --wall:      #F1F0E4;   /* the wall in the photo */
  --wall-lo:   #DEDCCB;   /* shadowed wall         */
  --ink:       #101100;   /* line work             */
  --bone:      #F7F5EC;   /* paper                 */
  --blue:      #1F5FD8;   /* the sign's blue       */
  --blue-lo:   #164BB0;
  --blue-hi:   #347CED;   /* the blue, on dark     */
  --stamp:     #B3261E;   /* evidence tag red      */
  --skin:      #A86A44;   /* subject               */

  --hard:      6px 6px 0 var(--ink);
  --hard-lg:   12px 12px 0 var(--ink);
  --soft:      0 28px 60px -20px rgba(16,19,17,.55);

  --f-disp: 'Anton', 'Arial Narrow', sans-serif;
  --f-body: 'Archivo', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 72px);
  --rail-w: 76px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--wall);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.55;
  overflow-x:hidden;
  /* plaster: subtle vertical falloff + tile mottling */
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(237,232,220,.55), transparent 60%),
    linear-gradient(180deg, transparent, rgba(16,19,17,.16));
  background-attachment:fixed;
}

::selection{ background:var(--blue); color:var(--bone); }

a{ color:inherit; }

:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
}

/* ── room atmosphere ───────────────────────────────────── */
.grain,.scanlines{ position:fixed; inset:0; pointer-events:none; z-index:90; }
.grain{
  opacity:.28; mix-blend-mode:multiply;
  background-image: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 700ms steps(2) infinite;
}
@keyframes grain{ 50%{ transform:translate3d(-4px,3px,0);} }
.scanlines{
  opacity:.10;
  background:repeating-linear-gradient(180deg, rgba(16,19,17,.9) 0 1px, transparent 1px 4px);
}

/* ── booking rail ──────────────────────────────────────── */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail-w);
  display:flex; flex-direction:column; justify-content:center; gap:26px;
  padding-left:14px; z-index:60; mix-blend-mode:multiply;
}
.rail a{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  text-decoration:none; opacity:.42; display:flex; align-items:center; gap:8px;
  transition:opacity .2s, transform .2s;
}
.rail a::after{ content:""; height:2px; width:14px; background:var(--ink); }
.rail a:hover,.rail a.on{ opacity:1; transform:translateX(4px); }
.rail a.on::after{ width:30px; background:var(--blue); }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  padding:clamp(24px,4vh,48px) var(--pad) clamp(32px,5vh,60px) calc(var(--rail-w) + var(--pad));
  display:grid;
  grid-template-columns: minmax(0,1.02fr) minmax(0,1fr);
  align-items:center; gap:clamp(24px,4vw,64px);
}

/* the booking photo itself */
.stage{
  position:relative;
  width:100%; max-width:min(700px, 76svh); margin-inline:auto;
  perspective:1400px;
}
.shot{
  position:relative; margin:0;
  will-change:transform;
  transition:transform .18s cubic-bezier(.2,.7,.3,1);
}
.shot img{
  display:block; width:100%; height:auto;
  border:4px solid var(--ink);
  box-shadow:var(--hard-lg), var(--soft);
  background:var(--wall);
}
.shot figcaption{
  margin-top:14px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); opacity:.5; text-align:center;
}

/* ── hero copy ── */
.hero__copy{ max-width:620px; }
.wordmark{
  font-family:var(--f-disp);
  font-size:clamp(96px,17vw,220px);
  /* line-height under 1 crops the box tighter than the glyphs, so the $
     descender spills out — the padding gives it room back. */
  line-height:.8; padding-bottom:.16em; margin:0; letter-spacing:-.01em;
  color:var(--bone);
  -webkit-text-stroke:3px var(--ink);
  text-shadow:var(--hard-lg);
}
.lede{
  font-family:var(--f-disp);
  font-size:clamp(26px,3.9vw,50px);
  line-height:1.02; margin:22px 0 30px; letter-spacing:.005em;
}
.lede b{ color:var(--blue); }

.actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; }

.ca{
  display:flex; align-items:center; gap:12px;
  background:var(--bone); border:3px solid var(--ink);
  padding:11px 14px; cursor:pointer; font:inherit;
  box-shadow:var(--hard); transition:transform .12s, box-shadow .12s;
}
.ca:active{ transform:translate(6px,6px); box-shadow:0 0 0 var(--ink); }
.ca__label{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.2em; background:var(--ink); color:var(--bone); padding:3px 7px; }
.ca__val{ font-family:var(--f-mono); font-size:13px; max-width:24ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ca__copy{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue); color:var(--bone);
  border:3px solid var(--ink); text-decoration:none;
  font-family:var(--f-disp); font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.06em; text-transform:uppercase;
  padding:13px 26px; box-shadow:var(--hard);
  transition:transform .12s, box-shadow .12s, background .2s;
}
.btn:hover{ background:var(--blue-lo); }
.btn:active{ transform:translate(6px,6px); box-shadow:0 0 0 var(--ink); }
.btn--big{ padding:20px 44px; font-size:clamp(19px,2.4vw,30px); box-shadow:var(--hard-lg); }

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:2px; margin:34px 0 0; padding-top:22px;
  border-top:2px solid rgba(16,19,17,.35);
}
.stats div{ padding-right:12px; }
.stats dt{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.6; }
.stats dd{ margin:4px 0 0; font-family:var(--f-disp); font-size:clamp(17px,1.9vw,24px); }
.stats .hot{ color:var(--stamp); }

/* ═══════════ SECTIONS ═══════════ */
.sect{
  position:relative;
  padding:clamp(72px,11vh,140px) var(--pad) clamp(72px,11vh,140px) calc(var(--rail-w) + var(--pad));
  max-width:1180px;
}
.sect__h{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--f-disp); font-size:clamp(28px,4vw,54px);
  margin:0 0 clamp(28px,4vh,52px); letter-spacing:.01em;
}
.sect__h em{
  font-family:var(--f-mono); font-style:normal; font-weight:600;
  font-size:13px; letter-spacing:.16em; opacity:.5;
  padding-bottom:.35em; border-bottom:2px solid var(--ink);
}

/* ── rubber stamps in the margins ──────────────────────
   Decorative only. They live in the right-hand gutter, so they're hidden
   below 1240px where that gutter no longer exists. */
.stampmark{
  position:absolute; z-index:2; margin:0;
  font-family:var(--f-mono); font-weight:600;
  font-size:clamp(12px,1.15vw,16px); line-height:1.25; letter-spacing:.16em;
  text-transform:uppercase; text-align:center; color:var(--stamp);
  border:3px double var(--stamp); border-radius:3px;
  padding:10px 16px; opacity:.42; mix-blend-mode:multiply;
  pointer-events:none; user-select:none;
}
.stampmark--hero{ right:clamp(24px,5vw,90px); bottom:8%; transform:rotate(-11deg); }
.stampmark--memo{ right:clamp(6px,1.4vw,26px); top:24%;  transform:rotate(8deg); }
.stampmark--buy { right:clamp(6px,1.4vw,26px); bottom:clamp(70px,13vh,120px); transform:rotate(-7deg); }

/* ghosted case number behind the memo */
.watermark{
  position:absolute; right:-2%; bottom:4%; z-index:0;
  font-family:var(--f-disp); font-size:clamp(90px,17vw,260px); line-height:.8;
  color:var(--ink); opacity:.05; letter-spacing:-.02em;
  pointer-events:none; user-select:none;
}

/* ── evidence photo, taped to the page ───────────────── */
.evidence{
  position:absolute; right:clamp(6px,1.2vw,24px); top:20%; z-index:2;
  width:clamp(150px,17vw,240px); margin:0;
  transform:rotate(5deg);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.evidence:hover{ transform:rotate(1deg) scale(1.03); }
.evidence img{
  display:block; width:100%; height:auto;
  border:9px solid var(--bone); border-bottom-width:40px;
  box-shadow:var(--hard), var(--soft);
}
.evidence::before{           /* strip of tape */
  content:""; position:absolute; top:-16px; left:50%;
  width:96px; height:30px; transform:translateX(-50%) rotate(-4deg);
  background:rgba(240,236,214,.72); border:1px solid rgba(16,17,0,.10);
}
.evidence figcaption{
  position:absolute; left:0; right:0; bottom:12px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); opacity:.55; text-align:center;
}

/* ── the sourced figure ──────────────────────────────────
   Deliberately plain: no accent colour, no animation on the number.
   This is the one thing on the page that is not a joke. */
.figurehead{
  margin:clamp(34px,5vh,56px) 0 0; padding:clamp(20px,2.6vw,30px);
  max-width:560px;
  background:var(--bone); border:3px solid var(--ink);
  border-left-width:14px;
  box-shadow:var(--hard);
}
.figurehead[hidden]{ display:none; }
.figurehead__k{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; opacity:.6; margin:0 0 10px;
}
.figurehead__val{
  font-family:var(--f-disp); font-size:clamp(44px,7vw,88px);
  line-height:.92; letter-spacing:-.01em;
}
.figurehead__meta{
  display:flex; flex-wrap:wrap; gap:14px; align-items:baseline;
  margin:14px 0 0; padding-top:12px; border-top:2px solid rgba(16,17,0,.2);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.04em;
}
.figurehead__meta span{ opacity:.7; }
.figurehead__meta a{ color:var(--blue); margin-left:auto; }

/* stickers stuck in the margins, same gutter rules as the stamps */
.stickpin{
  position:absolute; z-index:2; pointer-events:none;
  width:clamp(96px,11vw,150px); height:auto;
  filter:drop-shadow(6px 8px 0 rgba(16,17,0,.20));
}
/* sat level with the section heading — the only row wide enough to be free,
   since the chart frame and the steps grid both run the full content width */
.stickpin--chart{ right:clamp(4px,1vw,18px); top:clamp(24px,4.2vh,60px); transform:rotate(7deg); }
.stickpin--buy  { right:clamp(4px,1vw,18px); top:clamp(24px,4.2vh,60px); transform:rotate(-8deg); }

/* ── sticker wall ────────────────────────────────────── */
.sect__lead{
  font-family:var(--f-mono); font-size:clamp(13px,1.3vw,16px);
  letter-spacing:.02em; opacity:.7; margin:-18px 0 clamp(28px,4vh,44px);
}
/* 12 stickers, laid out so the last row is never orphaned */
.peel{
  display:grid; gap:clamp(10px,1.8vw,26px);
  grid-template-columns:repeat(6,1fr);
  max-width:1000px;
}
@media (max-width:1000px){ .peel{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){  .peel{ grid-template-columns:repeat(3,1fr); } }
.peel figure{ margin:0; }
.peel img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(5px 7px 0 rgba(16,17,0,.20));
  transition:transform .32s cubic-bezier(.2,.7,.3,1), filter .32s;
  will-change:transform;
}
/* each one sits slightly crooked, like they were stuck on by hand */
.peel figure:nth-child(6n+1) img{ transform:rotate(-6deg); }
.peel figure:nth-child(6n+2) img{ transform:rotate(3deg); }
.peel figure:nth-child(6n+3) img{ transform:rotate(-2deg); }
.peel figure:nth-child(6n+4) img{ transform:rotate(5deg); }
.peel figure:nth-child(6n+5) img{ transform:rotate(-4deg); }
.peel figure:nth-child(6n+6) img{ transform:rotate(2deg); }
/* straighten and lift on hover — the one interaction the wall needs */
.peel img:hover{
  transform:rotate(0deg) scale(1.14);
  filter:drop-shadow(10px 14px 0 rgba(16,17,0,.26));
}
.sect--stickers .btn--big{ margin-top:clamp(34px,5vh,54px); }
.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

/* ── the substitutions, on a loop ────────────────────── */
.marquee{
  background:var(--ink); color:var(--bone);
  border-block:3px solid var(--ink);
  overflow:hidden; padding:14px 0;
}
.marquee__track{
  display:flex; width:max-content;
  animation:slide 44s linear infinite;
}
.marquee__track span{
  padding:0 30px; white-space:nowrap;
  font-family:var(--f-disp); font-size:clamp(17px,2.1vw,28px);
  display:flex; align-items:center; gap:14px;
}
.marquee__track span::after{ content:"·"; opacity:.35; margin-left:16px; }
.marquee s{ color:#8A8A80; text-decoration-color:var(--stamp); text-decoration-thickness:3px; }
.marquee b{ color:var(--blue-hi); }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

@media (max-width:1240px){
  .stampmark, .evidence, .watermark, .stickpin{ display:none; }
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* 3D tilt targets */
.tilt{ transform-style:preserve-3d; will-change:transform; transition:transform .25s cubic-bezier(.2,.7,.3,1); }

/* ── the cable ── */
.cable{
  background:var(--bone); border:3px solid var(--ink);
  padding:clamp(20px,3vw,38px); max-width:820px;
  box-shadow:var(--hard-lg), var(--soft);
}
.cable__bar{
  display:flex; gap:10px; flex-wrap:wrap;
  font-family:var(--f-mono); font-weight:600; font-size:11px; letter-spacing:.22em;
  color:var(--stamp); border-bottom:2px solid var(--ink);
  padding-bottom:12px; margin-bottom:18px;
}
.cable__from{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; opacity:.72; margin:0 0 20px; }
.cable__body{
  font-family:var(--f-mono); font-size:clamp(14px,1.35vw,17px); line-height:1.75; margin:0 0 16px;
}
.cable__body s{ text-decoration-color:var(--stamp); text-decoration-thickness:3px; opacity:.62; }
.cable__body b{ color:var(--blue); background:rgba(11,79,168,.09); padding:1px 5px; }
.cable__src{
  display:inline-block; margin-top:12px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; color:var(--blue);
}

/* redactions that wipe away */
.rd{ position:relative; white-space:nowrap; }
.rd::after{
  content:""; position:absolute; left:-3px; right:-3px; top:-2px; bottom:-2px;
  background:var(--ink); transform-origin:right; transition:transform .55s cubic-bezier(.7,0,.2,1);
}
.cable.in .rd::after{ transform:scaleX(0); }
.cable.in .rd:nth-of-type(2)::after{ transition-delay:.18s; }
.cable.in .rd:nth-of-type(3)::after{ transition-delay:.34s; }

.cable__note{
  font-family:var(--f-mono); font-size:clamp(12px,1.1vw,14px); line-height:1.7;
  margin:22px 0 0; padding-top:16px; border-top:1px dashed rgba(16,19,17,.3); opacity:.72;
}

/* the syllabus, struck */
.syllabus{ margin:clamp(30px,4.5vh,48px) 0 0; max-width:820px; }
.syllabus__k{ font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.55; margin:0 0 14px; }
.syllabus__k span{ color:var(--stamp); }
.syllabus__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,40px); }
@media (max-width:620px){ .syllabus__cols{ grid-template-columns:1fr; gap:18px; } }
.syllabus ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.syllabus li{
  font-family:var(--f-mono); font-size:clamp(12px,1.15vw,14.5px); line-height:1.4;
  padding-left:18px; position:relative;
  text-decoration:line-through; text-decoration-color:var(--stamp); text-decoration-thickness:2px; opacity:.5;
}
.syllabus li::before{ content:"–"; position:absolute; left:0; opacity:.6; }
.syllabus__now li{ text-decoration:none; opacity:1; }
.syllabus__now li::before{ content:"+"; color:var(--blue); }
.syllabus__add{ color:var(--blue); }

/* substitution ticker */
.swapper{ margin:clamp(34px,5vh,56px) 0 0; max-width:820px; }
.swapper__k{ font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.55; margin:0 0 10px; }
.swapper__line{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:0;
  font-family:var(--f-disp); font-size:clamp(20px,3vw,38px);
}
.swapper__line s{ text-decoration-color:var(--stamp); text-decoration-thickness:4px; opacity:.55; }
.swapper__line b{ color:var(--blue); }
.swapper .arrow{ color:var(--stamp); }

.punch{
  font-family:var(--f-disp);
  font-size:clamp(26px,4vw,54px); line-height:1.06;
  margin:clamp(38px,6vh,70px) 0 0; max-width:22ch;
}

/* ── beats ── */
.beats{ list-style:none; margin:0; padding:0; display:grid; gap:2px; max-width:900px; }
/* keep the beats clear of the evidence photo pinned in the gutter */
@media (min-width:1241px){ .beats{ max-width:740px; } }
.beats li{
  display:flex; gap:clamp(16px,3vw,34px); align-items:baseline;
  padding:clamp(18px,3vh,30px) 0; border-top:2px solid rgba(16,19,17,.3);
}
.beats li:last-child{ border-bottom:2px solid rgba(16,19,17,.3); }
.beats__n{ font-family:var(--f-mono); font-size:13px; letter-spacing:.2em; opacity:.5; min-width:34px; }
.beats p{ margin:0; font-family:var(--f-disp); font-size:clamp(22px,3.4vw,44px); line-height:1.08; }
.beats b{ color:var(--stamp); }
.beats .blue{ color:var(--blue); }

/* ── chart ── */
.frame{
  border:3px solid var(--ink); background:var(--ink);
  box-shadow:var(--hard-lg), var(--soft);
  aspect-ratio:16/9; width:100%; overflow:hidden;
}
.frame iframe{ width:100%; height:100%; border:0; display:block; }
.frame__empty{
  height:100%; display:grid; place-content:center; text-align:center; gap:10px; padding:24px;
  color:var(--bone);
}
.frame__empty p{ margin:0; font-family:var(--f-disp); font-size:clamp(18px,2.4vw,30px); }
.frame__empty span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#7E8681; }

/* ── steps ── */
.steps{ list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:clamp(14px,2vw,20px); grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.steps li{
  counter-increment:s; position:relative;
  background:var(--bone); border:3px solid var(--ink);
  padding:clamp(20px,2.4vw,28px); box-shadow:var(--hard);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--stamp);
}
.steps h3{ font-family:var(--f-disp); font-size:clamp(20px,2.2vw,26px); margin:8px 0 8px; }
.steps p{ margin:0; font-size:15px; line-height:1.6; opacity:.85; }
.steps a{ color:var(--blue); }
.sect--buy .btn--big{ margin-top:clamp(34px,5vh,54px); }

/* ── footer ── */
.foot{
  border-top:3px solid var(--ink);
  padding:clamp(40px,6vh,70px) var(--pad) clamp(40px,6vh,70px) calc(var(--rail-w) + var(--pad));
  background:var(--wall-lo);
}
.foot__marks{ display:flex; flex-wrap:wrap; gap:22px; margin-bottom:26px; }
.foot__marks a{
  font-family:var(--f-disp); font-size:clamp(18px,2.2vw,28px);
  text-decoration:none; border-bottom:3px solid var(--ink); padding-bottom:2px;
}
.foot__marks a:hover{ color:var(--blue); border-color:var(--blue); }
.foot__disc{ max-width:62ch; font-family:var(--f-mono); font-size:12px; line-height:1.8; opacity:.72; margin:0 0 22px; }
.foot__stamp{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; opacity:.45; margin:0; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1000px){
  :root{ --rail-w:0px; }
  .rail{ display:none; }
  .hero{ grid-template-columns:1fr; padding-top:34px; }
  .stage{ order:-1; max-width:460px; }
  .hero__copy{ margin-inline:auto; text-align:left; }
  .wordmark{ text-shadow:var(--hard); }
}
@media (max-width:520px){
  .ca__val{ max-width:14ch; }
  .actions{ flex-direction:column; align-items:stretch; }
  .placard{ width:100%; }
  .punch{ max-width:none; }
}

/* ═══════════ MOTION OFF ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .grain{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
  .peel img{ transform:none !important; }
  .layer{ transform:none !important; }
  .rd::after{ transform:scaleX(0); }
  .term--old{ opacity:0; }
  .term--new{ opacity:1; }
}