/* =====================================================================
   THE UNAUTHORIZED — "dead signal broadcast"
   One markup tree, two renderers, both cinematic dark:
   data-skin="corporate"  → the DIA's authorized broadcast: cold black,
                              ice-blue, bureaucratic mono, sentry glow.
   data-skin="resistance" → The Service Manual's pirate transmission:
                              warm black, phosphor amber, stamps.
   Display: Big Shoulders Display (variable, self-hosted).
   Text:    IBM Plex Mono (self-hosted).
   Motion:  cubic-bezier(0.32,0.72,0,1) only; transform/opacity only.
   ===================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("/fonts/BigShouldersDisplay.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

/* ---------- tokens ---------- */
html[data-skin="corporate"] {
  --bg: #060809;
  --bg-raise: rgba(140, 175, 210, 0.045);
  --ink: #e6edf3;
  --ink-soft: #8fa0ae;
  --accent: #8fbcf5;
  --accent-ink: #060809;
  --warn: #ff5d52;
  --line: rgba(150, 185, 220, 0.16);
  --hairline: rgba(160, 195, 225, 0.09);
  --glow: rgba(143, 188, 245, 0.4);
  --grain-opacity: 0.055;
}
html[data-skin="resistance"] {
  --bg: #070403;
  --bg-raise: rgba(255, 180, 84, 0.05);
  --ink: #ecdfc7;
  --ink-soft: #a3947a;
  --accent: #ffb454;
  --accent-ink: #140a02;
  --warn: #ff7a5c;
  --line: rgba(255, 180, 84, 0.22);
  --hairline: rgba(255, 180, 84, 0.1);
  --glow: rgba(255, 180, 84, 0.35);
  --grain-opacity: 0.07;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line) var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.75;
  transition: background-color .8s cubic-bezier(.32,.72,0,1), color .8s cubic-bezier(.32,.72,0,1);
  overflow-x: hidden;
}
main { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem 6rem; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 800; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: .7rem 1.2rem; z-index: 200; border-radius: 0 0 .6rem 0;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- atmosphere: grain + scanlines + vignette (fixed, inert) ---------- */
.atmo { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.atmo--grain {
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.atmo--scan {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px);
  opacity: .35;
  mix-blend-mode: multiply;
}
.atmo--vignette {
  background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ---------- nav: floating pill ---------- */
.navwrap { position: sticky; top: 0; z-index: 80; padding: 1rem 1.5rem 0; }
.navpill {
  max-width: 62rem; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .5rem .65rem .5rem 1.1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.brand .seal { width: 26px; height: 26px; flex: none; color: var(--accent); filter: drop-shadow(0 0 6px var(--glow)); }
.brand .b-dia { display: inline; color: var(--ink-soft); }
.brand .b-man { display: none; color: var(--accent); font-weight: 600; }
html[data-skin="resistance"] .brand .b-dia { display: none; }
html[data-skin="resistance"] .brand .b-man { display: inline; }

.nav { display: flex; flex-wrap: nowrap; gap: .05rem; margin-left: auto; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .12em; padding: .42rem .6rem;
  white-space: nowrap;
  border-radius: 999px; transition: color .5s cubic-bezier(.32,.72,0,1), background-color .5s cubic-bezier(.32,.72,0,1);
}
.nav a:hover { color: var(--ink); background: var(--bg-raise); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--bg-raise); }

#skinToggle {
  font: inherit; font-size: .6rem; text-transform: uppercase; letter-spacing: .12em;
  white-space: nowrap;
  color: var(--accent); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem .85rem; cursor: pointer;
  transition: transform .45s cubic-bezier(.32,.72,0,1), border-color .45s, background-color .45s;
}
#skinToggle:hover { border-color: var(--accent); transform: scale(1.04); }
#skinToggle:active { transform: scale(.97); }

/* the long DIA brand line only fits on wide screens; below that the
   seal + short name carry the brand */
@media (max-width: 1240px) {
  .brand .b-dia { display: none; }
  .brand .b-man { display: inline; }
}
@media (max-width: 760px) {
  .navpill { flex-wrap: wrap; border-radius: 1.4rem; }
  .nav { margin-left: 0; width: 100%; order: 3; flex-wrap: wrap; }
}

/* ---------- hero: full viewport cinema ---------- */
.hero {
  min-height: 92dvh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 7rem 1.5rem 9rem; position: relative;
}
.eyebrow {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: .5rem 1.2rem; margin: 0 0 2.6rem;
  background: var(--bg-raise);
  max-width: min(92vw, 58rem);
  animation: hero-in 1.1s cubic-bezier(.32,.72,0,1) both;
}
.hero h1 {
  font-size: clamp(3.2rem, 11vw, 9rem);
  line-height: .92;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0 0 1.6rem;
  max-width: 18ch;
  text-shadow: 0 0 60px var(--glow);
  animation: hero-in 1.3s cubic-bezier(.32,.72,0,1) .12s both;
}
.hero .sub {
  color: var(--ink-soft); font-size: 1.02rem; margin: 0 0 2.8rem;
  animation: hero-in 1.3s cubic-bezier(.32,.72,0,1) .26s both;
}
.hero .btn { animation: hero-in 1.3s cubic-bezier(.32,.72,0,1) .4s both; }
.hero .margin-note { animation: none; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* scroll cue */
.scrollcue {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  color: var(--ink-soft); font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.scrollcue::after {
  content: ""; width: 1px; height: 2.2rem;
  background: linear-gradient(var(--accent), transparent);
  animation: cue-drop 2.2s cubic-bezier(.32,.72,0,1) infinite;
}
@keyframes cue-drop {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(14px); opacity: 0; }
}
/* short heroes (inner pages) */
.hero--short { min-height: 46dvh; padding: 5rem 1.5rem 2rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font: inherit; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  padding: 1rem 1.9rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  box-shadow: 0 0 34px var(--glow);
  transition: transform .5s cubic-bezier(.32,.72,0,1), box-shadow .5s cubic-bezier(.32,.72,0,1);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 44px var(--glow); }
.btn:active { transform: scale(.98); }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--line); box-shadow: none; }
.btn-real { background: var(--warn); color: #140604; box-shadow: 0 0 34px rgba(255, 93, 82, .35); }
.btn .b-dot {
  width: 1.6rem; height: 1.6rem; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.18); font-size: .8rem;
  transition: transform .5s cubic-bezier(.32,.72,0,1);
}
.btn:hover .b-dot { transform: translateX(3px); }

/* ---------- section rhythm ---------- */
.section-h {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  text-transform: uppercase; letter-spacing: .02em; line-height: .95;
  margin: 7rem 0 2.2rem;
}
.section-h .h-id {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: .66rem;
  letter-spacing: .3em; color: var(--ink-soft); margin: 0 0 .9rem;
}

/* ---------- notices / statutes: hairline glass, no hard borders ---------- */
.notice, .statute {
  background: var(--bg-raise);
  border: 1px solid var(--hairline);
  border-radius: 1.1rem;
  padding: 1.7rem 1.9rem;
  margin: 1.1rem 0;
  position: relative;
}
.notice::before, .statute::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); pointer-events: none;
}
.notice .n-id, .statute .s-id {
  display: block; font-size: .66rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .8rem;
}
.statute .s-id { color: var(--warn); font-weight: 600; }
.notice p, .statute blockquote { margin: 0; font-size: .98rem; }
.notice p strong { color: var(--accent); font-weight: 500; }
.statute blockquote em { color: var(--ink-soft); font-style: italic; }

/* ---------- scroll reveals: heavy fade-up with blur ---------- */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .9s cubic-bezier(.32,.72,0,1), transform .9s cubic-bezier(.32,.72,0,1), filter .9s cubic-bezier(.32,.72,0,1); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .14s; }

/* ---------- margin notes ---------- */
.margin-note {
  display: none;
  font-size: .84rem; color: var(--accent);
  border-left: 2px solid var(--accent);
  padding: .15rem 0 .15rem 1.1rem; margin: 1.3rem 0;
  max-width: 34rem; opacity: .92;
}
html[data-skin="resistance"] .margin-note { display: block; }
.margin-note::before { content: "— "; }

/* ---------- DIA seal ---------- */
.seal-malfunction .seal { transition: transform .5s cubic-bezier(.32,.72,0,1); }
.seal-malfunction:hover .seal,
.seal-malfunction:focus-within .seal {
  transform: rotate(-8deg) scale(1.05);
  filter: drop-shadow(0 0 22px var(--glow));
}
.seal-malfunction { text-align: center; padding: 2.6rem 1.9rem; }
.seal-malfunction .n-id { text-align: left; }
.seal-malfunction .seal { width: 130px; color: var(--accent); margin: .8rem auto 1rem; display: block; }
.seal-malfunction figcaption { font-size: .78rem; color: var(--ink-soft); }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 2rem 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 6rem 1fr; gap: 1.4rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--hairline);
}
.timeline .t-year {
  font-family: "Big Shoulders Display", sans-serif; font-weight: 700;
  color: var(--accent); font-size: 1.7rem; line-height: 1;
}
.timeline p { margin: 0; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- posters: framed exhibits ---------- */
.poster-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.4rem; margin: 2.4rem 0; }
.poster {
  background: var(--bg-raise);
  border: 1px solid var(--hairline);
  outline: 1px solid var(--line); outline-offset: 5px;
  border-radius: .6rem;
  padding: 2.2rem 1.5rem; text-align: center;
  transition: transform .7s cubic-bezier(.32,.72,0,1), box-shadow .7s cubic-bezier(.32,.72,0,1);
}
.poster:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.poster .p-top, .poster .p-bottom {
  font-size: .62rem; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft);
}
.poster .p-big {
  font-family: "Big Shoulders Display", sans-serif; font-weight: 800;
  font-size: 2.3rem; text-transform: uppercase; letter-spacing: .03em;
  line-height: .95; margin: 1.1rem 0;
}
.poster .p-sub { font-size: .84rem; color: var(--ink-soft); margin: .4rem 0 0; }
.poster .p-big.red { color: var(--warn); text-shadow: 0 0 30px rgba(255,93,82,.4); }
.poster .rule { border: 0; border-top: 1px solid var(--hairline); margin: 1rem 0; }

/* ---------- zine ---------- */
.zine-masthead {
  border: 1px solid var(--line); outline: 1px solid var(--hairline); outline-offset: 7px;
  padding: 3.4rem 2rem; text-align: center; margin: 3.5rem 0 3rem;
  background: var(--bg-raise);
}
.zine-masthead .m-no { font-size: .66rem; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.zine-masthead h1 { font-size: clamp(2.8rem, 8vw, 5.4rem); margin: .9rem 0; text-transform: uppercase; line-height: .9; text-shadow: 0 0 50px var(--glow); }
.zine-masthead .m-line { font-size: .95rem; color: var(--ink-soft); }
.zine h2 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); text-transform: uppercase; margin: 5.5rem 0 1.4rem; }
.zine .stamp {
  display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: .6rem;
  text-transform: uppercase; letter-spacing: .22em; color: var(--warn);
  border: 1px solid var(--warn); border-radius: .3rem;
  padding: .28rem .6rem; margin-left: .7rem; vertical-align: middle;
  transform: rotate(-2deg); opacity: .9;
}
.zine .small-print {
  font-size: .78rem; color: var(--ink-soft);
  border-top: 1px solid var(--hairline); margin-top: 5rem; padding-top: 1.6rem;
}

.profile { border-left: 2px solid var(--accent); padding: .2rem 0 .2rem 1.4rem; margin: 2.2rem 0; }
.profile .p-name { font-family: "Big Shoulders Display", sans-serif; font-weight: 700; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: .4rem; }
.profile .p-quote { color: var(--accent); margin: .6rem 0 0; }

/* ---------- evidence wall ---------- */
.evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2rem; margin: 3rem 0; }
figure.evi { margin: 0; }
figure.evi .artifact {
  background: var(--bg-raise); border: 1px solid var(--hairline);
  border-radius: 1rem; padding: 2rem 1.6rem; height: 100%;
  transition: transform .7s cubic-bezier(.32,.72,0,1), box-shadow .7s cubic-bezier(.32,.72,0,1);
}
figure.evi:hover .artifact { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0,0,0,.55); }
figure.evi figcaption { font-size: .76rem; color: var(--accent); margin-top: .9rem; opacity: .9; }
figure.evi figcaption::before { content: "✎ "; }

.artifact.cert { text-align: center; border: 1px solid var(--line); outline: 1px solid var(--hairline); outline-offset: 5px; }
.artifact.cert .c-name { border-bottom: 1px solid var(--line); display: inline-block; min-width: 60%; }
.artifact.coupon { border: 1px dashed var(--warn); text-align: center; }
.artifact.tag { font-size: .86rem; }
.artifact.tag dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem; text-align: left; }
.artifact.tag dt { color: var(--ink-soft); text-transform: uppercase; font-size: .62rem; letter-spacing: .18em; align-self: baseline; }
.artifact.tag dd { margin: 0; }
.ev-name { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .04em; }
.ev-mono { font-size: .84rem; }
.ev-red { color: var(--warn); }
.ev-soft { color: var(--ink-soft); font-size: .76rem; }

/* ---------- the tear / glitch ---------- */
.tear-zone { position: relative; }
.tear { text-align: center; margin: 5rem 0 2rem; position: relative; }
.tear::before {
  content: ""; display: block; height: 2px; max-width: 55%; margin: 0 auto 1.8rem;
  background: repeating-linear-gradient(90deg, var(--warn) 0 12px, transparent 12px 20px);
  opacity: .8;
}
.tear button {
  font: inherit; font-size: .72rem; text-transform: uppercase; letter-spacing: .22em;
  background: transparent; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 999px;
  padding: .9rem 1.8rem; cursor: pointer;
  transition: background-color .5s cubic-bezier(.32,.72,0,1), color .5s, transform .5s cubic-bezier(.32,.72,0,1);
}
.tear button:hover { background: var(--warn); color: #140604; transform: scale(1.04); }
.tearing { animation: tear-flip .55s steps(3) 1; }
@keyframes tear-flip {
  0% { filter: none; transform: none; }
  40% { filter: invert(1) hue-rotate(40deg); transform: translateX(-4px) skewX(-2deg); }
  70% { filter: invert(1); transform: translateX(5px) skewX(3deg); }
  100% { filter: none; transform: none; }
}

/* ---------- reality table ---------- */
.reality { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.reality caption {
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-soft); padding-bottom: 1.1rem; text-align: left;
}
.reality th, .reality td { text-align: left; vertical-align: top; padding: 1.1rem 1.1rem; border: 1px solid var(--hairline); font-size: .88rem; }
.reality th { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.reality td a { word-break: break-word; }

/* ---------- closing ---------- */
.closing { text-align: center; padding: 7rem 0 2rem; }
.closing h2 { font-size: clamp(2.4rem, 7vw, 4.6rem); text-transform: uppercase; margin: 0 0 1.8rem; text-shadow: 0 0 50px var(--glow); }
.closing p { color: var(--ink-soft); max-width: 40rem; margin: 0 auto 2.4rem; }

/* ---------- sunset mode ---------- */
#sunset {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: none; justify-content: center;
  font-size: .8rem; letter-spacing: .1em;
}
#sunset.on { display: flex; }
#sunset .bar {
  background: rgba(10, 12, 14, .92); color: #ffd9d4; width: 100%;
  padding: .9rem 1.4rem; text-align: center;
  border-top: 1px solid var(--warn);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#sunset .bar strong { color: #fff; letter-spacing: .2em; }
html.sunset-1 body { filter: grayscale(.4); transition: filter 5s ease; }
html.sunset-2 body { filter: grayscale(.8) contrast(.9) brightness(.85); }
html.sunset-2 { font-size: .93em; }
html.sunset-3 body { filter: grayscale(1) contrast(.8) brightness(.7); }
html.sunset-3 { font-size: .86em; }

#toast {
  position: fixed; left: 50%; bottom: 4.5rem; transform: translateX(-50%) translateY(20px);
  z-index: 95; opacity: 0; pointer-events: none;
  font-size: .8rem; color: var(--accent);
  background: rgba(10, 8, 5, .92); border: 1px solid var(--accent);
  border-radius: 999px; padding: .8rem 1.5rem;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .5s cubic-bezier(.32,.72,0,1), transform .5s cubic-bezier(.32,.72,0,1);
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- surrender form ---------- */
.surrender { max-width: 34rem; margin: 0 auto; }
.surrender label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); margin: 1.5rem 0 .4rem; }
.surrender input[type="text"], .surrender textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: rgba(0,0,0,.25);
  border: 1px solid var(--hairline); border-radius: .8rem;
  padding: .9rem 1rem;
  transition: border-color .5s cubic-bezier(.32,.72,0,1), box-shadow .5s;
}
.surrender input:focus, .surrender textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--bg-raise), 0 0 24px var(--glow); }
.surrender input[readonly] { color: var(--ink-soft); }
.surrender .check { display: flex; gap: .7rem; align-items: flex-start; margin: 1.7rem 0; font-size: .88rem; }
.surrender .check input { margin-top: .35rem; accent-color: var(--accent); }
.surrender .check label { all: unset; cursor: pointer; }

#theater {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: center; justify-content: center; text-align: center;
  background: rgba(4, 2, 1, .96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink); padding: 2rem;
}
#theater.on { display: flex; }
#theater .beat { font-size: .95rem; max-width: 36rem; }
#theater .beat h2 { font-size: clamp(2rem, 6vw, 3.6rem); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 0 40px var(--glow); }
#theater .beat a { color: var(--accent); }

/* ---------- footer ---------- */
.disclosure {
  border-top: 1px solid var(--hairline);
  font-size: .8rem; color: var(--ink-soft);
  max-width: 62rem; margin: 0 auto; padding: 2rem 1.5rem 3rem;
}
.disclosure .d-real { color: var(--warn); font-weight: 600; }
.disclosure .d-est { display: none; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; }
html[data-skin="resistance"] .disclosure .d-est { display: inline-block; margin-top: .4rem; }

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .tearing { animation: none; }
  .eyebrow, .hero h1, .hero .sub, .hero .btn { animation: none; }
  .scrollcue::after { animation: none; }
  * { transition-duration: .01s !important; }
}

/* =====================================================================
   TRANSMISSION LAYER — boot, CRT swap, decrypt text, ticker, lock clock,
   legality terminal, poster lab, bench scope, monitor audio
   ===================================================================== */

/* body clearance for the ticker bar */
body { padding-bottom: 2.4rem; }

/* ---------- monitor audio button (injected next to the skin toggle) ---------- */
#audioToggle {
  font: inherit; font-size: .6rem; text-transform: uppercase; letter-spacing: .12em;
  white-space: nowrap;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem .85rem; cursor: pointer;
  transition: transform .45s cubic-bezier(.32,.72,0,1), border-color .45s, color .45s;
}
#audioToggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
#audioToggle:hover { border-color: var(--accent); transform: scale(1.04); }
#audioToggle:active { transform: scale(.97); }

/* ---------- ticker tape ---------- */
.ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  height: 2.1rem; display: flex; align-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3.5rem; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.ticker-track { display: flex; white-space: nowrap; will-change: transform; animation: ticker 64s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: inline-block; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.ticker-set .sep { color: var(--accent); font-style: normal; padding: 0 1.3rem; }
html[data-skin="corporate"] .t-res { display: none; }
html[data-skin="resistance"] .t-corp { display: none; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- lock clock (injected into every hero) ---------- */
.lockclock {
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 1.6rem;
}
.lockclock b { color: var(--accent); font-weight: 600; }

/* ---------- boot intro (injected on home, first visit per session) ---------- */
#boot {
  position: fixed; inset: 0; z-index: 150; background: #050607;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem; cursor: pointer;
}
.boot-static {
  position: absolute; inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: .16; animation: grainjit .12s steps(2) infinite;
}
@keyframes grainjit {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-2%, 1%); }
  100% { transform: translate(1%, -2%); }
}
.boot-roll {
  position: absolute; left: 0; right: 0; height: 3px;
  background: var(--accent); box-shadow: 0 0 24px var(--glow);
  animation: roll .8s cubic-bezier(.32,.72,0,1) .3s both;
}
@keyframes roll { from { transform: translateY(-4px); } to { transform: translateY(100vh); } }
.boot-seal {
  width: 110px; color: var(--accent); filter: drop-shadow(0 0 18px var(--glow));
  opacity: 0; animation: bootin .35s steps(3) 1s both;
}
.boot-line {
  font-size: .64rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center; line-height: 2;
  opacity: 0; animation: bootin .3s steps(2) 1.3s both;
}
@keyframes bootin { to { opacity: 1; } }
#boot.gone { animation: bootfade .32s ease both; pointer-events: none; }
@keyframes bootfade { to { opacity: 0; } }

/* ---------- CRT power swap (body-level, transform only, brief) ---------- */
body.crt-off { animation: crtOff .19s ease-in forwards; transform-origin: 50% 40%; }
@keyframes crtOff {
  60% { transform: scaleY(.5); filter: brightness(1.5); }
  100% { transform: scaleY(.004); filter: brightness(2.6); }
}
body.crt-on { animation: crtOn .26s cubic-bezier(.32,.72,0,1); transform-origin: 50% 40%; }
@keyframes crtOn {
  0% { transform: scaleY(.004); filter: brightness(2.6); }
  55% { transform: scaleY(1.04); }
  100% { transform: none; filter: none; }
}

/* ---------- hero h1: periodic signal glitch (RGB split) ---------- */
.hero h1 {
  animation: hero-in 1.3s cubic-bezier(.32,.72,0,1) .12s both, h1glitch 9s linear 3.2s infinite;
}
@keyframes h1glitch {
  0%, 93.5%, 100% { transform: none; text-shadow: 0 0 60px var(--glow); }
  94% { transform: translateX(2px) skewX(-1deg); text-shadow: -4px 0 rgba(255,93,82,.85), 4px 0 rgba(143,188,245,.85); }
  95.5% { transform: translateX(-2px); text-shadow: 3px 0 rgba(255,93,82,.85), -3px 0 rgba(143,188,245,.85); }
  97% { transform: none; text-shadow: 0 0 60px var(--glow); }
}

/* ---------- legality terminal (the-lock) ---------- */
.checker { display: flex; gap: .9rem; flex-wrap: wrap; align-items: flex-end; margin-top: 1.6rem; }
.checker label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); margin-bottom: .45rem; }
.checker input[type="number"] {
  width: 9.5rem; font: inherit; color: var(--ink);
  background: rgba(0,0,0,.25); border: 1px solid var(--hairline); border-radius: .8rem;
  padding: .9rem 1rem;
  transition: border-color .5s cubic-bezier(.32,.72,0,1), box-shadow .5s;
}
.checker input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--bg-raise), 0 0 24px var(--glow); }
.stamp-verdict { margin: 2.4rem 0 0; min-height: 7rem; display: flex; align-items: center; justify-content: center; text-align: center; }
.stamp-verdict .stamp-big {
  font-family: "Big Shoulders Display", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1;
  font-size: clamp(1.5rem, 4.5vw, 2.6rem);
  border: 3px solid currentColor; border-radius: .5rem;
  padding: 1.1rem 1.6rem; transform: rotate(-2deg);
}
.stamp-verdict.ok .stamp-big { color: var(--accent); box-shadow: 0 0 44px var(--glow); }
.stamp-verdict.bad .stamp-big { color: var(--warn); box-shadow: 0 0 44px rgba(255,93,82,.3); }
.stamp-verdict .stamp-sub {
  display: block; font-family: "IBM Plex Mono", monospace; font-weight: 400;
  font-size: .66rem; letter-spacing: .18em; margin-top: .7rem; color: var(--ink-soft);
}
.stamp-verdict.stamp-in .stamp-big { animation: stampIn .38s cubic-bezier(.32,.72,0,1) both; }
@keyframes stampIn {
  0% { transform: scale(2.4) rotate(-9deg); opacity: 0; filter: blur(6px); }
  100% { transform: scale(1) rotate(-2deg); opacity: 1; filter: none; }
}

/* ---------- poster lab (artifacts) ---------- */
.plab { display: grid; grid-template-columns: minmax(15rem, 21rem) 1fr; gap: 2.2rem; align-items: start; margin-top: 2rem; }
@media (max-width: 820px) { .plab { grid-template-columns: 1fr; } }
.plab-controls { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 5.5rem; }
@media (max-width: 820px) { .plab-controls { position: static; } }
.plab-controls label { font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); }
.plab-controls input[type="text"] {
  width: 100%; font: inherit; color: var(--ink);
  background: rgba(0,0,0,.25); border: 1px solid var(--hairline); border-radius: .8rem;
  padding: .9rem 1rem;
  transition: border-color .5s cubic-bezier(.32,.72,0,1), box-shadow .5s;
}
.plab-controls input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 24px var(--glow); }
#posterCanvas {
  width: 100%; max-width: 26rem; height: auto; display: block;
  border: 1px solid var(--hairline); border-radius: .6rem;
  background: #0d0805; box-shadow: 0 20px 60px rgba(0,0,0,.55);
  transform: rotate(.6deg);
}

/* ---------- bench scope (the-bench) ---------- */
.scope-card {
  margin: 2.8rem 0 0; border: 1px solid var(--hairline); border-radius: 1rem;
  background: var(--bg-raise); padding: 1.1rem 1.1rem .9rem;
}
.scope-card canvas { width: 100%; height: 210px; display: block; border-radius: .5rem; }
.scope-card figcaption { font-size: .7rem; color: var(--ink-soft); margin-top: .8rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- transmission layer: motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  #boot { display: none; }
  .ticker-track { animation: none; }
  .hero h1 { animation: none; }
  body.crt-off, body.crt-on { animation: none; }
  .boot-static, .boot-roll { animation: none; }
  .stamp-verdict.stamp-in .stamp-big { animation: none; }
}