@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); }

/* Every color, face and gutter lives here. Rules below only reference these. */
:root {
  color-scheme: dark;
  --ground: #060708;
  --panel: #0a0d10;
  --glass: rgba(6, 7, 8, .84);
  --scan: #11161b;
  --rule-faint: #151b20;
  --rule-soft: #1a2026;
  --rule: #232a30;
  --redaction: #20272d;
  --ghost: #3a424a;
  --dimmer: #4a545c;
  --dim: #5c6770;
  --muted: #8d97a0;
  --ink-soft: #aeb7bd;
  --ink-2: #c8d0d8;
  --ink: #ffffff;
  --neon: #0cd807;
  --neon-hover: #4ed658;
  --neon-wash: rgba(12, 216, 7, .3);
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --light-size: 560px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-display); }
a { color: var(--ink-soft); }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }

.page { position: relative; overflow-x: clip; background: var(--ground); }
.page::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: url(/assets/grain.png) repeat; opacity: .07; }
.mono { font-family: var(--font-mono); }
.caps { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

/* The hidden file behind the hero, and the light that reads it. */
.hero { position: relative; overflow: clip; min-height: clamp(640px, 100vh, 1000px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(20px, 3vw, 36px) var(--gutter) clamp(28px, 4vw, 48px); }
.file { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px 14px; padding: 16px; font-family: var(--font-mono); font-size: 14px; line-height: 1.4; pointer-events: none; user-select: none; }
.file span { padding: 2px 8px; white-space: nowrap; }
.scan span { background: var(--scan); color: transparent; }
.lit span { color: var(--neon); }
.lit {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .9) 42%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .9) 42%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--light-size) var(--light-size); mask-size: var(--light-size) var(--light-size);
  -webkit-mask-position: 12% 24%; mask-position: 12% 24%;
  animation: sweep 18s ease-in-out infinite alternate;
}
@keyframes sweep {
  0% { -webkit-mask-position: 6% 18%; mask-position: 6% 18%; }
  50% { -webkit-mask-position: 56% 78%; mask-position: 56% 78%; }
  100% { -webkit-mask-position: 96% 22%; mask-position: 96% 22%; }
}
.hero[data-pointer="on"] .lit {
  animation: none;
  -webkit-mask-position: calc(var(--mx, 50%) - var(--light-size) / 2) calc(var(--my, 50%) - var(--light-size) / 2);
  mask-position: calc(var(--mx, 50%) - var(--light-size) / 2) calc(var(--my, 50%) - var(--light-size) / 2);
}
.page[data-cleared="true"] .lit { animation: none; -webkit-mask-image: none; mask-image: none; opacity: .32; }

.top, .pitch { position: relative; z-index: 1; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: block; width: auto; height: 36px; }
.status { margin: 0; color: var(--ink-2); }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--neon); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.h1 { margin: 0; font-size: clamp(44px, 8.2vw, 132px); line-height: .96; font-weight: 800; letter-spacing: -.04em; }
.line { display: block; animation: up 1s cubic-bezier(.16, .84, .24, 1) both; }
.line:nth-child(2) { animation-delay: .12s; }
.line:nth-child(3) { animation-delay: .24s; }
@keyframes up { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: translateY(0); } }

/* The punchline bar opens for a moment, then closes again. */
.bar-hero { display: inline-block; margin: 0; padding: 0 .1em .06em; border: 0; border-radius: 0; background: var(--neon); color: var(--neon); font: inherit; letter-spacing: inherit; line-height: .9; cursor: pointer; animation: peek 8s ease-in-out 2.4s infinite; }
@keyframes peek { 0%, 80%, 100% { color: var(--neon); } 84%, 96% { color: var(--ground); } }
.bar-hero:hover, .bar-hero:focus-visible, .bar-hero[data-open="true"] { animation: none; color: var(--ground); }
.bar-hero:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.page[data-cleared="true"] .bar-hero { animation: none; color: var(--ground); }

.sub { margin: clamp(16px, 2vw, 24px) 0 clamp(28px, 3.4vw, 44px); color: var(--ink-2); font-size: clamp(22px, 2.5vw, 36px); font-weight: 500; letter-spacing: -.02em; }
.act { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.act .signup { flex: 1 1 420px; max-width: 640px; min-width: 0; }

.memo { flex: 0 1 430px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; padding: 14px 16px; background: var(--glass); color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.memo dt { color: var(--muted); }
.memo dd { margin: 0; }

/* Secondary bars hide jokes, never the secret. */
.bar { display: inline; margin: 0; padding: 0 .2em; border: 0; border-radius: 0; background: var(--redaction); color: var(--redaction); font: inherit; letter-spacing: inherit; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .12s linear; }
.bar:hover, .bar:focus-visible, .bar[data-open="true"] { color: var(--neon); }
.bar:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.page[data-cleared="true"] .bar { color: var(--neon); }

.form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.form label { color: var(--ink-2); }
.fields { display: flex; flex-wrap: wrap; gap: 10px; }
.email { flex: 1 1 240px; min-width: 0; height: 60px; padding: 0 18px; border: 1px solid var(--dim); border-radius: 0; background: var(--glass); color: var(--ink); font: inherit; font-size: 18px; }
.email::placeholder { color: var(--muted); }
.send { flex: 1 0 auto; height: 60px; padding: 0 28px; border: 0; border-radius: 0; background-color: var(--neon); color: var(--ground); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; transition: background-color .15s linear, transform .15s ease; }
.send:hover { background-color: var(--neon-hover); transform: translateY(-2px); }
.send:disabled { cursor: progress; opacity: .72; transform: none; }
.email:focus-visible, .send:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.fine { margin: 0; color: var(--muted); font-size: 13px; }
.form-error { margin: 0; padding-left: 12px; border-left: 3px solid var(--neon); color: var(--ink); font-size: 14px; }
.captcha:empty { display: none; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cleared:focus { outline: none; }

.stamp { display: inline-block; margin: 0; padding: 10px 18px; border: 3px solid var(--neon); color: var(--neon); font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; animation: slam .5s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes slam { from { opacity: 0; transform: scale(2.2) rotate(-9deg); } to { opacity: 1; transform: scale(1) rotate(-3deg); } }
.after { margin: 16px 0 0; color: var(--ink-2); font-size: clamp(18px, 1.8vw, 21px); }

/* Exhibits */
.exhibits { padding: clamp(56px, 8vw, 112px) var(--gutter); }
.ex-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.ex-head h2, .ex-head p { margin: 0; }
.ex-head h2 { color: var(--neon); }
.ex-head p { color: var(--muted); }
.lead { max-width: 21ch; margin: 0 0 clamp(36px, 5vw, 72px); font-size: clamp(34px, 5vw, 76px); line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.lead span { color: var(--dimmer); }
.ex { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) minmax(280px, 400px); gap: clamp(16px, 3vw, 48px); align-items: start; padding: clamp(36px, 5vw, 68px) 0; border-top: 1px solid var(--rule); }
.ex-label { margin: .9em 0 0; color: var(--muted); }
.st { margin: 0; font-size: clamp(32px, 4.4vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; }
.st .dim { color: var(--dim); }
.nt { margin: 1.1em 0 0; max-width: 46ch; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.wipe { position: relative; display: inline-block; }
.wipe::after { content: ""; position: absolute; inset: -.03em -.08em; background: var(--neon); transform: scaleX(0); transform-origin: right center; }
@keyframes declassify { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Specimen readouts: the AI at work, shown, never explained. */
.rd { margin: 0; padding: 16px 18px 18px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.rd-top { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft); color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.rd-top .dot { width: 7px; height: 7px; margin-right: 8px; }
.rd-foot { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.rd ol, .rd ul { list-style: none; margin: 0; padding: 0; }

.wave { display: flex; align-items: center; gap: 3px; height: 30px; margin-bottom: 14px; }
.wave i { flex: 1 1 0; height: 100%; background: var(--neon); opacity: .75; transform: scaleY(.2); animation: wave 1.1s ease-in-out infinite alternate; }
.wave i:nth-child(2n) { animation-delay: -.3s; animation-duration: .9s; }
.wave i:nth-child(3n) { animation-delay: -.55s; animation-duration: 1.3s; }
.wave i:nth-child(5n) { animation-delay: -.8s; }
.wave i:nth-child(7n) { animation-delay: -.15s; animation-duration: .7s; }
@keyframes wave { from { transform: scaleY(.12); } to { transform: scaleY(1); } }

.who { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.quote { margin: 4px 0 0; color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
.w { color: var(--ink); animation: hear 9s linear infinite both; }
.w.k { box-shadow: inset 0 -2px 0 var(--neon); animation-name: hear-key; }
.quote .w:nth-child(2) { animation-delay: .3s; }
.quote .w:nth-child(3) { animation-delay: .6s; }
.quote .w:nth-child(4) { animation-delay: .9s; }
.quote .w:nth-child(5) { animation-delay: 1.2s; }
.quote .w:nth-child(6) { animation-delay: 1.5s; }
.quote .w:nth-child(7) { animation-delay: 1.8s; }
@keyframes hear { 0% { color: var(--ghost); } 2%, 86% { color: var(--ink); } 95%, 100% { color: var(--ghost); } }
@keyframes hear-key {
  0% { color: var(--ghost); background-color: transparent; box-shadow: none; }
  2% { color: var(--ink); background-color: var(--neon-wash); box-shadow: inset 0 -2px 0 var(--neon); }
  9%, 86% { color: var(--ink); background-color: transparent; box-shadow: inset 0 -2px 0 var(--neon); }
  95%, 100% { color: var(--ghost); background-color: transparent; box-shadow: none; }
}
.rd .tags { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.tags li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; animation: tag 9s ease-out infinite both; }
.tags li:nth-child(1) { animation-delay: 2.4s; }
.tags li:nth-child(2) { animation-delay: 3s; }
.tags li:nth-child(3) { animation-delay: 3.6s; }
.tags b { color: var(--neon); font-weight: 500; }
@keyframes tag { 0% { opacity: 0; transform: translateX(-6px); } 4%, 86% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }

/* Exhibit B: a move found, traced through the companies tied to it, and stopped where nobody is exposed. */
.net { display: block; width: 100%; height: auto; margin-bottom: 12px; overflow: visible; }
.net .base path { fill: none; stroke: var(--rule); stroke-width: 1; }
.net .tr { fill: none; stroke: var(--neon); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; animation: trace 7s ease-out infinite both; }
.net circle { fill: var(--panel); stroke: var(--dim); stroke-width: 1.5; }
.net circle.hit { fill: var(--neon); stroke: var(--neon); animation: lightnode 7s linear infinite both; }
.net circle.core { fill: var(--neon); stroke: none; }
.net circle.ping { fill: none; stroke: var(--neon); transform-box: fill-box; transform-origin: center; animation: ping 2.4s ease-out infinite; }
.net rect { fill: var(--redaction); }
.net text { fill: var(--dim); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }
.net .d1 { animation-delay: .4s; }
.net .d2 { animation-delay: .6s; }
.net .d3 { animation-delay: .8s; }
.net .d4 { animation-delay: 1.2s; }
.net .d5 { animation-delay: 1.4s; }
.net circle.h1 { animation-delay: .9s; }
.net circle.h2 { animation-delay: 1.1s; }
.net circle.h3 { animation-delay: 1.3s; }
.net circle.h4 { animation-delay: 1.7s; }
.net circle.h5 { animation-delay: 1.9s; }
@keyframes trace { 0% { stroke-dashoffset: 1; opacity: 1; } 8%, 82% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lightnode { 0% { fill: var(--panel); stroke: var(--dim); } 3%, 82% { fill: var(--neon); stroke: var(--neon); } 94%, 100% { fill: var(--panel); stroke: var(--dim); } }
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3.4); opacity: 0; } }
.trace { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px 12px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--rule); }
.trace dt { color: var(--muted); }
.trace dd { margin: 0; color: var(--ink); }
.trace .meter { margin-top: 7px; }

.score li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 6px 14px; padding: 10px 0; border-bottom: 1px solid var(--rule-faint); }
.score .n { color: var(--muted); }
.score .hit { color: var(--ink); }
.meter { grid-column: 1 / -1; display: block; height: 4px; background: var(--rule-soft); }
.meter b { display: block; height: 100%; background: var(--neon); transform-origin: left center; }
.meter .p12 { width: 12%; }
.meter .p31 { width: 31%; }
.meter .p64 { width: 64%; }
.meter .p71 { width: 71%; }

.redacted { display: flex; flex-wrap: wrap; gap: 9px 7px; margin: 0; font-size: 15px; line-height: 1.5; }
.redacted .bar { display: inline-block; padding: 1px 8px; }

/* Closing */
.close { position: relative; overflow: clip; padding: clamp(72px, 10vw, 150px) var(--gutter) 0; border-top: 1px solid var(--rule); text-align: center; }
.big { margin: 0; font-size: clamp(44px, 8.2vw, 132px); line-height: .96; font-weight: 800; letter-spacing: -.04em; }
.close-form { width: 100%; max-width: 640px; margin: clamp(28px, 3.4vw, 44px) auto 0; }
.horns { display: block; width: clamp(280px, 64vw, 980px); height: auto; margin: clamp(56px, 7vw, 96px) auto 0; }
.horns path { fill: var(--neon); }
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.horizon { height: 1px; background: var(--dimmer); }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 24px var(--gutter); color: var(--muted); font-size: 13px; }

/* Scroll effects only where the browser can run them. Elsewhere everything simply shows. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wipe::after { animation: declassify linear both; animation-timeline: view(); animation-range: entry 35% cover 46%; }
    .horns { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    .meter b { animation: fill linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
  }
}
@media (max-width: 860px) {
  .ex { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ex-label { margin-top: 0; }
  .rd { margin-top: 12px; }
  .memo { flex-basis: 100%; }
}
@media (max-width: 520px) {
  :root { --light-size: 380px; }
  /* Fixed desktop line breaks orphan words on a phone; let the headline flow instead. */
  .line { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .lit, .dot, .line, .bar-hero, .stamp, .wave i, .w, .tags li, .net .tr, .net circle.hit, .net circle.ping { animation: none; }
  .wave i { transform: scaleY(.5); }
  .bar, .send { transition: none; }
  .stamp { transform: rotate(-3deg); }
}

/* Plain document pages (privacy, not found). */
.doc { max-width: 720px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--gutter) 64px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.doc .logo { margin-bottom: clamp(40px, 6vw, 72px); }
.doc h1 { margin: 0 0 8px; color: var(--ink); font-size: clamp(36px, 6vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.doc h2 { margin: 40px 0 8px; color: var(--ink); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.doc p, .doc ul { margin: 0 0 14px; }
.doc .stamp-line { color: var(--muted); }