/* =====================================================================
   screamingface — brand system  ·  brand.screamingface.ai
   Aesthetic: infra-retro-modern. Square, hairline, monochrome-with-one-
   accent. Refined, not "vibe-coded" (see the anti-rules in the guide).

   FULLY TOKENISED. Every value here is a var() from tokens.css (generated
   from tokens/tokens.json by build.mjs). This file only arranges tokens
   into the interface — it contains no raw colors, sizes, or fonts.

   Type roles (the whole scale, deliberately few):
     display  Garamond  --text-display   h1
     metric   Mono      --text-metric    big stat numbers
     lead     Sans      --text-lead      opening line
     body     Sans      --text-body      prose (incl. notes)
     sm       Sans/Mono --text-sm        captions, tables, climb, buttons
     micro    Mono      --text-micro     chart text, rail, footer
     label    Mono caps --text-label     eyebrow, h2, kickers, table headers
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- top rail (infra header) -------------------------------------- */
.rail {
  position: sticky; top: 0; z-index: 20;
  height: var(--rail-h); display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-5); background: var(--bg);
  border-bottom: var(--border-hairline) solid var(--line);
  font-family: var(--f-mono); font-size: var(--text-micro);
}
.rail .brand { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); font-family: var(--f-wordmark); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); }
.rail .brand .m { font-size: var(--text-body); }
.rail .sep { color: var(--ink-3); }
.rail .crumbs { display: flex; gap: var(--space-4); color: var(--ink-3); }
.rail .crumbs a { color: var(--ink-2); text-decoration: none; }
.rail .crumbs a:hover { color: var(--ink); }
.rail .crumbs a.here { color: var(--ink); border-bottom: var(--border-hairline) solid var(--ink); }
.rail .spacer { margin-left: auto; }
.rail .toggle {
  font-family: var(--f-mono); font-size: var(--text-sm); cursor: pointer;
  background: none; border: 0; color: var(--ink-2);
  padding: 0; line-height: 1;
}
.rail .toggle:hover { color: var(--ink); }

/* ---- column ------------------------------------------------------- */
.wrap { max-width: var(--col); margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-12); }
.wrap.wide { max-width: var(--col-wide); }

/* ---- type --------------------------------------------------------- */
h1 {
  font-family: var(--f-display); font-weight: var(--weight-semibold);
  font-size: var(--text-display); letter-spacing: var(--tracking-normal);
  line-height: var(--leading-tight); color: var(--ink); margin: 0 0 var(--space-4);
}
/* label role — the single treatment for every small caps label */
h2, .eyebrow, .kicker, thead th, .stage-head, .deltawrap .k, .stats .k, .logo-cell .cap, .rules h4, #gate .t {
  font-family: var(--f-mono); font-weight: var(--weight-semibold);
  font-size: var(--text-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-3);
}
h2 { margin: var(--space-9) 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: var(--border-hairline) solid var(--line); }
h3 { font-family: var(--f-sans); font-weight: var(--weight-semibold); font-size: var(--text-body); margin: var(--space-6) 0 var(--space-2); color: var(--ink); }

p { margin: 0 0 var(--space-4); }
.lead { font-family: var(--f-sans); font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--ink); letter-spacing: var(--tracking-tight); }
small, .small { font-size: var(--text-sm); }
.meta { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); }
.faint { color: var(--ink-3); }
.mono { font-family: var(--f-mono); }
strong, b { font-weight: var(--weight-semibold); color: var(--ink); }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li { margin: var(--space-1) 0; }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

hr { border: 0; border-top: var(--border-hairline) solid var(--line); margin: var(--space-7) 0; }

code, kbd {
  font-family: var(--f-mono); font-size: 0.85em;
  background: var(--surface); border: var(--border-hairline) solid var(--line); padding: 0 var(--space-1); border-radius: var(--radius-none);
}
pre {
  font-family: var(--f-mono); font-size: var(--text-sm); line-height: var(--leading-snug);
  background: var(--surface); border: var(--border-hairline) solid var(--line);
  padding: var(--space-4) var(--space-5); overflow-x: auto; margin: 0 0 var(--space-4); color: var(--ink);
}
pre .ok { color: var(--gain); }
pre .dim { color: var(--ink-3); }

/* ---- masthead ----------------------------------------------------- */
.masthead { margin-bottom: var(--space-1); }
.masthead .eyebrow { display: block; margin-bottom: var(--space-3); }

/* ---- kicker / note ------------------------------------------------ */
.kicker { display: block; margin-bottom: var(--space-2); }
.note { border: var(--border-hairline) solid var(--line); border-left: var(--border-strong) solid var(--ink); background: var(--surface); padding: var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-body); }
.note.gain { border-left-color: var(--gain); }
.note.gain .kicker { color: var(--gain); }

/* ---- tables ------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: var(--text-sm); margin: 0 0 var(--space-5); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--line); }
thead th { border-bottom: var(--border-hairline) solid var(--line-2); }
tbody tr:hover { background: var(--surface); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.sota td { background: var(--gain-bg); }
tr.sota td:first-child { box-shadow: inset var(--border-strong) 0 0 var(--gain); }

/* ---- swatches ----------------------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: var(--border-hairline); background: var(--line); border: var(--border-hairline) solid var(--line); }
.swatch { background: var(--bg); }
.swatch .chip { height: var(--space-10); border-bottom: var(--border-hairline) solid var(--line); }
.swatch .m { font-family: var(--f-mono); font-size: var(--text-label); padding: var(--space-2); text-transform: none; letter-spacing: var(--tracking-normal); }
.swatch .m b { display: block; }
.swatch .m span { color: var(--ink-3); }

/* big-figure unit (the % set small + muted so the number leads) */
.v .u, .big .u { font-size: 0.45em; font-weight: var(--weight-regular); opacity: 0.5; margin-left: 2px; letter-spacing: 0; }

/* token-reference inline swatch (rendered by guide.js) */
.tok-sw { display: inline-block; width: 11px; height: 11px; border: var(--border-hairline) solid var(--line-2); vertical-align: -1px; margin-right: var(--space-2); }
#tok-semantic td:first-child, #tok-type td:first-child, #tok-text td:first-child { color: var(--ink); }

/* logo / mark */
.logo-row { display: flex; flex-wrap: wrap; border: var(--border-hairline) solid var(--line); margin: 0 0 var(--space-4); }
.logo-cell { padding: var(--space-6) var(--space-7); border-right: var(--border-hairline) solid var(--line); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; flex: 1; min-width: 150px; }
.logo-cell:last-child { border-right: 0; }
.logo-cell .big-mark { font-size: var(--space-10); line-height: 1; user-select: none; }

/* animated mark — the system 😱 emoji shaking with fear (no raster). em-based
   transforms so the shake scales with font-size; respects reduced-motion. */
.scream-shake { display: inline-block; transform-origin: center; animation: scream-shake 0.5s linear infinite; }
@keyframes scream-shake {
  0%, 100% { transform: rotate(0deg); }
  9%  { transform: rotate(-11deg); }
  18% { transform: rotate(10deg); }
  27% { transform: rotate(-10deg); }
  36% { transform: rotate(9deg); }
  45% { transform: rotate(-8deg); }
  54% { transform: rotate(7deg); }
  63% { transform: rotate(-6deg); }
  72% { transform: rotate(5deg); }
  81% { transform: rotate(-4deg); }
  90% { transform: rotate(3deg); }
}
/* wavy mark — "The Scream" horizontal ripple that travels downward. The emoji is
   sliced into horizontal bands (built by the band-builder script); each band sways
   left↔right and its phase increases down the glyph, so the wave propagates down.
   Pure CSS transforms → animates reliably and loops with no seam. */
.wave-emoji { position: relative; display: inline-block; line-height: 1; }
.wave-emoji .wb-base { visibility: hidden; }
.wave-emoji .wb { position: absolute; left: 0; top: 0; width: 100%; text-align: center; animation: wave-x 0.5s linear infinite; will-change: transform; }
@keyframes wave-x {
  0%    { transform: translateX(0); }
  12.5% { transform: translateX(0.018em); }
  25%   { transform: translateX(0.025em); }
  37.5% { transform: translateX(0.018em); }
  50%   { transform: translateX(0); }
  62.5% { transform: translateX(-0.018em); }
  75%   { transform: translateX(-0.025em); }
  87.5% { transform: translateX(-0.018em); }
  100%  { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .wave-emoji .wb { animation: none; } }
@media (prefers-reduced-motion: reduce) { .scream-shake { animation: none; } }
.logo-cell img { width: 72px; height: 72px; }
.logo-cell .cap { display: block; }

/* ---- anti-rules grid (do / don't) --------------------------------- */
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--border-hairline); background: var(--line); border: var(--border-hairline) solid var(--line); font-size: var(--text-sm); }
.rules > div { background: var(--bg); padding: var(--space-3); }
.rules .no { border-top: var(--border-strong) solid var(--blind); }
.rules .yes { border-top: var(--border-strong) solid var(--gain); }
.rules h4 { margin-bottom: var(--space-2); }
.rules .no h4 { color: var(--blind); }
.rules .yes h4 { color: var(--gain); }
.rules ul { padding-left: var(--space-4); margin: 0; }
.rules li { font-family: var(--f-sans); }
@media (max-width: 620px) { .rules { grid-template-columns: 1fr; } }

/* ---- figure / chart ----------------------------------------------- */
figure { margin: 0 0 var(--space-4); border: var(--border-hairline) solid var(--line); background: var(--bg); }
figure svg { display: block; width: 100%; height: auto; }
figcaption { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); padding: var(--space-2) var(--space-3); border-top: var(--border-hairline) solid var(--line); }
/* all chart text is mono/micro by default; bold via inline font-weight where needed */
figure svg text { font-family: var(--f-mono); font-size: var(--text-micro); }
/* svg theme hooks */
.svg-ink   { fill: var(--ink); }
.svg-ink2  { fill: var(--ink-2); }
.svg-ink3  { fill: var(--ink-3); }
.svg-line  { stroke: var(--line); }
.svg-line2 { stroke: var(--line-2); }
.svg-axis  { stroke: var(--ink-3); }
.svg-gain  { fill: var(--gain); }
.svg-gain-s{ stroke: var(--gain); }
.svg-base  { fill: var(--ink-3); }
.svg-blind { fill: var(--blind); }
/* Data points always sit on top of lines/gridlines with a clean halo. Markers
   must be drawn AFTER lines and kept opaque for the halo to read. */
figure svg circle { paint-order: stroke; stroke: var(--bg); stroke-width: 3.5px; }
figure svg circle[fill="none"] { stroke-width: 1.3px; }  /* ring markers keep their own stroke */

/* ---- climb (direction A) ------------------------------------------ */
.climb { font-family: var(--f-mono); font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-4); }
.climb .row { display: grid; grid-template-columns: 210px 1fr 52px; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; }
.climb .lbl { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.6s ease; }
.climb .track { display: block; background: var(--surface); border: var(--border-hairline) solid var(--line); height: 18px; overflow: hidden; }
.climb .fill { display: block; height: 100%; }
.climb .fill.base { background: var(--ink-3); opacity: 0.5; }
.climb .fill.ens  { background: var(--ink-3); }
.climb .fill.priv { background: var(--gain); opacity: 0.6; }
.climb .fill.sota { background: var(--gain-grad-flow); background-size: 200% 100%; background-position: 0 0; }
.climb .row:hover .fill.sota { animation: sf-flow 14s linear infinite; }
.climb .row:hover .lbl, .climb .row:hover .val { color: var(--gain); }

/* Gradient flow on hover — the SF signature comes alive. Seamless because
   --gain-grad-flow is a gold→blue→gold palindrome tiled at 200%, so scrolling
   background-position one full tile loops with no visible jump. */
.gain-flow { background: var(--gain-grad-flow); background-size: 200% 100%; background-position: 0 0; }
.gain-flow:hover { animation: sf-flow 14s linear infinite; }
@keyframes sf-flow { from { background-position: 0 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .climb .row:hover .fill.sota, .gain-flow:hover { animation: none; }
}
.climb .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); transition: color 0.6s ease; }
.stage-head { display: block; margin: var(--space-4) 0 var(--space-1); }

/* ---- before/after delta (direction C) ----------------------------- */
.deltawrap { display: grid; grid-template-columns: 1fr auto 1fr; border: var(--border-hairline) solid var(--line); font-family: var(--f-mono); margin: var(--space-1) 0 var(--space-4); }
.deltawrap .cell { padding: var(--space-6) var(--space-5); }
.deltawrap .cell.mid { display: flex; align-items: center; justify-content: center; border-left: var(--border-hairline) solid var(--line); border-right: var(--border-hairline) solid var(--line); background: var(--surface); font-size: var(--text-lead); color: var(--gain); }
.deltawrap .k { display: block; }
.deltawrap .big { font-size: var(--text-display); line-height: var(--leading-tight); margin: var(--space-2) 0 var(--space-1); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.deltawrap .cell.before .big { color: var(--blind); }
.deltawrap .cell.after .big { color: var(--gain); }
@media (max-width: 620px) { .deltawrap { grid-template-columns: 1fr; } .deltawrap .cell.mid { border: 0; border-top: var(--border-hairline) solid var(--line); border-bottom: var(--border-hairline) solid var(--line); } }

/* ---- stat row (demo) ---------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); border: var(--border-hairline) solid var(--line); font-family: var(--f-mono); margin: 0 0 var(--space-5); }
.stats .s { padding: var(--space-4); border-right: var(--border-hairline) solid var(--line); }
.stats .s:last-child { border-right: 0; }
.stats .s .v { font-size: var(--text-metric); font-weight: var(--weight-semibold); margin-top: var(--space-2); font-variant-numeric: tabular-nums; color: var(--ink); }
.stats .s .v.gain { color: var(--gain); }
@media (max-width: 620px) { .stats { grid-template-columns: 1fr; } .stats .s { border-right: 0; border-bottom: var(--border-hairline) solid var(--line); } }

/* ---- buttons / deep-link ------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--f-mono); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border: var(--border-hairline) solid var(--ink); background: var(--ink); color: var(--bg); text-decoration: none; cursor: pointer; border-radius: var(--radius-none); }
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--surface); }

/* ---- email signup (connected input + button) --------------------- */
.signup { display: flex; justify-content: center; max-width: 440px; margin: var(--space-6) auto var(--space-2); }
.signup input { flex: 1 1 auto; min-width: 0; font-family: var(--f-mono); font-size: var(--text-sm); padding: var(--space-3); background: var(--bg); border: var(--border-hairline) solid var(--line-2); border-right: 0; color: var(--ink); outline: none; border-radius: var(--radius-none); }
.signup input::placeholder { color: var(--ink-3); }
.signup input:focus { border-color: var(--ink); }
.signup .btn { padding: var(--space-3) var(--space-5); white-space: nowrap; }

/* ---- footer ------------------------------------------------------- */
.foot { margin-top: var(--space-10); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--line); font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }

/* ---- gate --------------------------------------------------------- */
#gate { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); z-index: 100; }
#gate .m { font-size: var(--space-9); }
#gate .t { color: var(--ink-3); }
#gate form { display: flex; gap: var(--space-2); }
#gate input { font-family: var(--f-mono); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); background: var(--bg); border: var(--border-hairline) solid var(--line-2); color: var(--ink); outline: none; width: 200px; border-radius: var(--radius-none); }
#gate input:focus { border-color: var(--ink); }
#gate input.err { border-color: var(--blind); }
#gate button { font-family: var(--f-mono); font-size: var(--text-sm); padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--bg); border: var(--border-hairline) solid var(--ink); cursor: pointer; border-radius: var(--radius-none); }
#gate .e { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--blind); height: 14px; }
body.locked { overflow: hidden; }

@media (max-width: 620px) {
  .wrap { padding: var(--space-7) var(--space-4) var(--space-11); }
  h1 { font-size: var(--text-metric); }
  .lead { font-size: var(--text-body); }
  /* keep the full nav available on mobile: let the rail wrap instead of hiding it */
  .rail { height: auto; flex-wrap: wrap; padding: var(--space-2) var(--space-4); gap: var(--space-1) var(--space-3); }
  .rail .crumbs { flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
  .rail .spacer { display: none; }
  .climb .row { grid-template-columns: 124px 1fr 44px; }
}