/* host reset, folded in at build time */
html{background:#08070C}
:root{color-scheme:dark}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  /* Red, black and white. Every text pair below is measured, not judged —
     WCAG AA wants 4.5:1 for body copy and 3:1 for large text and UI edges,
     and nothing here is under 4.5:1 against the surface it sits on.

       --ink   on --void   18.4:1      --red     on --void    6.0:1
       --muted on --void   11.5:1      --red-2   on --void    8.5:1
       --dim   on --void    7.4:1      white on --accent      5.0:1

     The rule that shapes the whole ramp: a red light enough to read as red
     on black is too light to carry white text, so the red that fills a
     button (--accent) is a darker red than the red that IS text (--red). */

  --void:#0B0B0C;              /* page ground */
  --ground:#131315;            /* raised once — panels, list rows */
  --raise:#1D1D20;             /* raised twice — cards */
  --edge:rgba(255,255,255,.18);    /* dividers — decorative, exempt from 1.4.11 */
  --edge-2:rgba(255,255,255,.38);  /* control borders — must clear 3:1, and does */

  --ink:#F4F4F5;               /* high emphasis */
  --muted:#CACAD0;             /* body copy on dark */
  --dim:#A6A6AE;               /* labels, captions, meta */

  --red:#FF5449;               /* red as text and marks */
  --red-2:#FF8A80;             /* the lighter red tone */
  --red-deep:#5C0F10;          /* fills and tints */
  --accent:#D32F2F;            /* red as a surface, under white text */
  --accent-on:#FFFFFF;
  --accent-hover:#B71C1C;      /* darker, so white text stays legible */

  /* ---- the games' own colours, not the site's ----------------------------
     Everything above this line is site chrome and is red/black/white.
     Everything below belongs to a shipping game and is left exactly as the
     games define it: Lightlock's five hues come out of the engine's
     colStandard and ARE the puzzle, and Twintangle and Punchfold are the
     palettes in brand.dart. Restyling these would misrepresent the products,
     so the theme stops at the edge of a device screen. */
  --base:#150B2E;              /* Lightlock's board ground */
  --mag:#FF2D92;
  --cyan:#12C9E8;
  --lime:#8FE024;
  --amber:#FFAB1A;
  --viol:#B06CFF;
  --teal:#2ADFC4;              /* Twintangle */
  --rust:#D8452F;              /* Punchfold */

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
h1,h2,h3,h4{
  font-family:var(--display);font-weight:800;
  letter-spacing:-.035em;line-height:.9;margin:0;
  text-wrap:balance;font-optical-sizing:auto;
}
p{margin:0}
a{color:inherit}
.mono{font-family:var(--mono)}
.label{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

/* ---------- film grain ---------- */
.grain{
  position:fixed;inset:-50%;z-index:900;pointer-events:none;opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation-name:grainshift;animation-duration:.7s;animation-timing-function:steps(4);animation-iteration-count:infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(0,0)}
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--edge);
  background:rgba(8,7,12,.82);backdrop-filter:blur(18px) saturate(1.2);
}
.nav-in{display:flex;align-items:center;gap:18px;height:64px;position:relative}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark .lens{
  width:22px;height:22px;border-radius:50%;flex:none;
  background:
    radial-gradient(circle at 32% 34%,#FFFFFF,transparent 56%),
    radial-gradient(circle at 68% 40%,var(--red),transparent 58%),
    radial-gradient(circle at 50% 74%,var(--accent),transparent 60%),
    #17070A;
  box-shadow:0 0 14px rgba(211,47,47,.55);
}
.mark b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.03em}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);padding:9px 12px;border-radius:100px;
}
.nav-links a:hover{color:var(--ink);background:rgba(244,241,255,.06)}
.cta{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:12px 19px;border-radius:100px;border:1px solid transparent;font-weight:600;
  background:var(--accent);color:var(--accent-on);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,background .25s ease;
}
.cta:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(211,47,47,.55)}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--edge-2)}
.cta.ghost:hover{background:rgba(244,241,255,.07);border-color:var(--muted);box-shadow:none}
.nav-links a.cta{color:var(--accent-on);background:var(--accent)}
.nav-links a.cta:hover{color:var(--accent-on);background:var(--accent-hover)}

/* mobile menu */
.burger{
  display:none;margin-left:auto;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;border-radius:100px;cursor:pointer;
  background:transparent;border:1px solid var(--edge-2);color:var(--ink);
}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;
}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.panel{
  /* Opaque, not rgba(8,7,12,.97). Chromium composites a translucent panel
     inside a backdrop-filtered ancestor (.nav) far lighter than its alpha
     says, and the page showed straight through the open menu. */
  display:none;position:absolute;top:100%;left:0;right:0;
  background:#0B0B0C;backdrop-filter:blur(20px);
  border-bottom:1px solid var(--edge);padding:6px 32px 20px;
}
.panel a{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 2px;border-bottom:1px solid var(--edge);text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.panel a:last-of-type{border-bottom:0}
.panel a span{color:var(--dim);font-size:10px}
.panel .cta{margin-top:14px;width:100%;justify-content:center;padding:16px;color:var(--accent-on)}

/* ---------- hero ---------- */
.hero{position:relative;padding:88px 0 64px;isolation:isolate}
#field{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;
}
.hero-fallback{
  position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(46% 52% at 18% 30%,rgba(211,47,47,.52),transparent 70%),
    radial-gradient(44% 50% at 76% 26%,rgba(255,138,128,.20),transparent 70%),
    radial-gradient(50% 56% at 52% 88%,rgba(255,84,73,.34),transparent 70%),
    var(--void);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:220px;z-index:-1;
  background:linear-gradient(to bottom,transparent,var(--void));
  pointer-events:none;
}
.hero-in{position:relative;display:grid;grid-template-columns:1fr 372px;gap:56px;align-items:center}
/* The dot stays pinned beside the label's first line and the label wraps
 * beneath itself — letting the flex row wrap instead orphaned the dot. */
.kicker{display:flex;align-items:flex-start;gap:11px;margin-bottom:24px}
.kicker .label{white-space:normal;line-height:1.5}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.72) 44%,rgba(11,11,12,.14) 76%);
}
.kicker .dot{
  width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px;
  background:var(--red);box-shadow:0 0 12px var(--accent);
}
h1{font-size:clamp(44px,7.4vw,104px);line-height:.86;letter-spacing:-.045em}
.line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.line > span{
  display:block;
  animation-name:lineup;animation-duration:1.05s;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
}
.line:nth-child(2) > span{animation-delay:.09s}
.line:nth-child(3) > span{animation-delay:.18s}
@keyframes lineup{from{transform:translateY(104%)}to{transform:translateY(0)}}
h1 .glow{
  /* Ends on white so the last word never drops below the 3:1 large-text
     floor, which a red-only gradient would do at its darkest stop. */
  background:linear-gradient(96deg,var(--accent),var(--red) 42%,#FFFFFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{color:var(--muted);font-size:18px;max-width:42ch;margin-top:26px}
.lede b{color:var(--ink);font-weight:600}
.hero-row{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
.hero-meta{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:36px}
.hero-meta div{display:flex;align-items:baseline;gap:9px}
.hero-meta b{font-family:var(--mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.hero-meta span{font-size:12.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.04em}

/* ---------- device ---------- */
.device{
  --scr:var(--base);--scr-ink:var(--ink);--scr-dim:var(--dim);
  --scr-mut:var(--muted);--scr-edge:var(--edge-2);--scr-won:var(--lime);
  position:relative;border-radius:38px;padding:11px;
  background:linear-gradient(160deg,#33262A,#141013 62%);
  box-shadow:0 40px 90px -32px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  transform-style:preserve-3d;will-change:transform;
}
.device .screen{
  border-radius:28px;overflow:hidden;background:var(--scr);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
  padding:16px 14px 14px;color:var(--scr-ink);
}
.device .bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.device .bar .nm{font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:-.02em;color:var(--scr-ink)}
.device .bar .rt{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--scr-dim);letter-spacing:.08em}
.device .glass{
  position:absolute;inset:11px;border-radius:28px;pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.10),transparent 34%,transparent 72%,rgba(255,255,255,.05));
}

/* boards, shared */
.tgt-row{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.mini{display:grid;grid-template-columns:repeat(5,11px);gap:2px}
.mini i{aspect-ratio:1;border-radius:1px;display:block}
.tgt-row p{font-size:11px;color:var(--scr-mut);line-height:1.4}
.board{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;
  background:var(--base);border-radius:6px;padding:6px;touch-action:none;
}
.cell{aspect-ratio:1;box-shadow:inset 0 0 0 2px var(--base);transition:background .18s ease}
.sheets{position:absolute;inset:6px;pointer-events:none}
.sh{
  position:absolute;pointer-events:auto;cursor:grab;touch-action:none;border:2px dashed currentColor;
  border-radius:4px;background:color-mix(in srgb,currentColor 10%,transparent);
  transition:box-shadow .2s ease;
}
.sh.drag,.sh:active{cursor:grabbing;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 32%,transparent)}
/* On a chip, because the cell underneath ranges from near-black to white as
 * the sheets stack — no single ink colour stays legible across that. */
.sh i{
  position:absolute;top:3px;left:3px;font-family:var(--mono);font-weight:600;
  font-style:normal;color:#fff;background:rgba(0,0,0,.78);
  padding:1px 5px;border-radius:3px;line-height:1.4;
}
.b-foot{display:flex;align-items:center;gap:10px;margin-top:11px}
.b-foot .st{font-family:var(--mono);font-size:10px;color:var(--scr-mut);letter-spacing:.03em;flex:1;line-height:1.5}
.b-foot .st.won{color:var(--scr-won)}
.b-foot .mv{font-family:var(--mono);font-size:10px;color:var(--scr-dim);font-variant-numeric:tabular-nums}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  overflow:hidden;padding:15px 0;background:var(--ground);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.tick-run{
  display:flex;gap:0;width:max-content;
  animation-name:tick;animation-duration:38s;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick-run span{
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:0 26px;display:flex;align-items:center;gap:26px;white-space:nowrap;color:var(--muted);
}
.tick-run span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--dim)}
.tick-run span em{font-style:normal;color:var(--ink)}

/* ---------- reveal (scroll-driven, degrades to load) ---------- */
.rise{
  animation-name:rise;animation-duration:1s;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
  animation-timeline:view();animation-range:entry 6% cover 34%;
}
@keyframes rise{from{opacity:.28;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- lineup ---------- */
.lineup{padding:96px 0 88px;border-top:1px solid var(--edge)}
.lineup-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.lineup-in > *{min-width:0}
.lineup h2{font-size:clamp(32px,4.6vw,58px);letter-spacing:-.05em}
.lineup p{color:var(--muted);font-size:16.5px;max-width:56ch}
.lineup-keys{display:grid;gap:1px;background:var(--edge);border-radius:8px;overflow:hidden;margin-top:26px}
.lineup-keys div{
  background:var(--ground);padding:14px 17px;display:flex;
  align-items:baseline;justify-content:space-between;gap:14px;
}
.lineup-keys b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.03em}
.lineup-keys span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ---------- rooms ---------- */
.room{position:relative;padding:104px 0;border-top:1px solid var(--edge)}
.room::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 60% at 78% 26%,color-mix(in srgb,var(--rc) 20%,transparent),transparent 72%);
}
.room-in{position:relative;display:grid;grid-template-columns:1fr 356px;gap:60px;align-items:center}
.room-in > *{min-width:0}
.room.flip .room-in{grid-template-columns:356px 1fr}
.room.flip .room-copy{order:2}
.room.flip .room-art{order:1}
.room .swatches{display:flex;gap:5px;margin-bottom:20px}
.room .swatches i{width:26px;height:5px;border-radius:100px;display:block}
.room h2{font-size:clamp(38px,5.6vw,74px);letter-spacing:-.05em}
.room h2 .n{
  display:block;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.2em;
  color:var(--rc);margin-bottom:14px;text-transform:uppercase;
}
.room .tag{
  font-family:var(--display);font-weight:500;font-size:clamp(18px,2.2vw,25px);
  color:var(--rc);margin-top:14px;letter-spacing:-.02em;
}
.room .desc{color:var(--muted);font-size:16.5px;max-width:50ch;margin-top:20px}
.room .desc em{color:var(--ink);font-style:normal;font-weight:600}
.rules{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:1px;background:var(--edge);border-radius:6px;overflow:hidden}
.rules li{
  background:var(--ground);padding:12px 15px;font-family:var(--mono);font-size:11px;
  line-height:1.55;color:var(--muted);display:flex;gap:11px;
}
.rules li b{color:var(--rc);font-weight:600;flex:none}
.getrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
/* The filled button always uses the darker red — a red light enough to read
 * as red on black cannot carry white text at 4.5:1. */
.getrow .cta{background:var(--accent);color:var(--accent-on)}
.getrow .cta:hover{background:var(--accent-hover);box-shadow:0 10px 30px -8px rgba(211,47,47,.55)}
.stores{display:flex;gap:16px}
.stores a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;border-bottom:1px solid var(--edge-2);padding-bottom:3px;
}
.stores a:hover{color:var(--ink);border-bottom-color:var(--rc)}

/* twintangle mini worlds */
.tw-worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.tw-w{display:flex;flex-direction:column;gap:6px}
.tw-w .lb{font-family:var(--mono);font-size:7.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--scr-dim);white-space:nowrap}
.tw-g{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
/* Twintangle's own palette. Only the wall ring and the home marker got
 * thicker, so the board stays readable — the hues are the game's. */
.tw-c{aspect-ratio:1;border-radius:2px;background:rgba(232,246,244,.07);position:relative}
.tw-c.wall{background:#0E3B37;box-shadow:inset 0 0 0 1px rgba(42,223,196,.30)}
.tw-c.home::after{content:"";position:absolute;inset:24%;border:2px solid #FF6FA8;border-radius:50%}
.tw-c .pw{position:absolute;inset:16%;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(42,223,196,.65)}
.tw-c.done .pw{background:#FF6FA8;box-shadow:0 0 12px rgba(255,111,168,.7)}
.pad{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(2,26px);gap:4px}
.pad button{border:1px solid var(--scr-edge);background:transparent;color:var(--scr-ink);border-radius:4px;font-family:var(--mono);font-size:12px;cursor:pointer}
.pad button:hover{background:color-mix(in srgb,var(--teal) 16%,transparent);border-color:var(--teal)}
.pad .u{grid-column:2;grid-row:1}.pad .l{grid-column:1;grid-row:2}
.pad .d{grid-column:2;grid-row:2}.pad .r{grid-column:3;grid-row:2}

/* punchfold */
.pf-wrap{display:grid;gap:12px}
.pf-top{display:flex;gap:14px;align-items:flex-start}
/* Punchfold is paper: its own cream stock, kraft creases and red ink.
 * The outer rule was #E6D6C0 on #FDF8F0 and effectively invisible, so it
 * moved one step darker in the game's own ramp rather than out of it. */
.pfg{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid #C6B29A;background:#FDF8F0;border-radius:2px;overflow:hidden}
.pfg.sm{width:74px}
.pfg.lg{flex:1}
.pfc{aspect-ratio:1;position:relative;border-right:1px dotted #C6B29A;border-bottom:1px dotted #C6B29A;background:#FDF8F0}
.pfc:nth-child(4n){border-right:0}
.pfc:nth-child(n+13){border-bottom:0}
.pfc.hole::after{content:"";position:absolute;inset:22%;border-radius:50%;background:#1A1208}
.pfc.live{cursor:crosshair}
.pfc.live:hover{background:#FBEDE7;box-shadow:inset 0 0 0 1.5px var(--rust)}
.pfc.away{background:repeating-linear-gradient(45deg,#E6D6C0,#E6D6C0 3px,transparent 3px,transparent 6px)}
.pfc.crV{border-right:2px dashed var(--rust)}
.pfc.crH{border-bottom:2px dashed var(--rust)}
.pf-btns{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pf-btns button{
  font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  padding:8px 7px;border-radius:4px;cursor:pointer;border:1px solid var(--scr-edge);
  background:transparent;color:var(--scr-ink);
}
.pf-btns button:hover:not([disabled]){background:color-mix(in srgb,var(--rust) 18%,transparent);border-color:var(--rust)}
.pf-btns button[disabled]{opacity:.35;cursor:not-allowed}

/* ---------- engine ---------- */
.engine{padding:112px 0;border-top:1px solid var(--edge);background:var(--ground)}
.sec-head{max-width:60ch;margin-bottom:44px}
.sec-head h2{font-size:clamp(30px,4.4vw,56px)}
.sec-head p{color:var(--muted);margin-top:18px;font-size:16.5px}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.node{
  background:var(--raise);border:1px solid var(--edge);border-radius:10px;padding:26px 24px 28px;
  position:relative;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s ease;
}
.node:hover{transform:translateY(-4px);border-color:var(--edge-2)}
.node .role{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--nc)}
.node h3{font-size:27px;margin-top:11px;letter-spacing:-.04em}
.node code{font-family:var(--mono);font-size:10.5px;color:var(--muted);display:block;margin-top:8px;word-break:break-all}
.node p{font-size:14.5px;color:var(--muted);margin-top:15px}
.node .beam{position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--nc);opacity:.8}
.invariant{
  margin-top:26px;border-radius:12px;padding:44px 46px;position:relative;overflow:hidden;
  background:linear-gradient(112deg,#25171A,#100E10 68%);
  border:1px solid rgba(255,84,73,.34);
}
.invariant::before{
  content:"";position:absolute;inset:-40% -10% auto auto;width:460px;height:460px;
  background:radial-gradient(closest-side,rgba(211,47,47,.30),transparent 70%);
}
.invariant q{
  quotes:none;display:block;position:relative;font-family:var(--display);font-weight:800;
  font-size:clamp(23px,3.4vw,42px);line-height:1.02;letter-spacing:-.045em;
}
.invariant q b{color:var(--red)}
.invariant p{position:relative;color:var(--muted);font-size:15.5px;margin-top:20px;max-width:72ch}
.vec{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.vec span{
  font-family:var(--mono);font-size:10.5px;padding:8px 12px;border-radius:100px;
  border:1px solid var(--edge);color:var(--muted);font-variant-numeric:tabular-nums;
}
.vec span b{color:var(--ink);font-weight:600}

/* ---------- numbers ---------- */
.numbers{padding:112px 0;border-top:1px solid var(--edge)}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge);border-radius:10px;overflow:hidden}
.fig{background:var(--void);padding:26px 22px 28px;transition:background .3s ease}
.fig:hover{background:var(--raise)}
.fig .v{
  font-family:var(--display);font-weight:800;font-size:clamp(28px,3vw,40px);
  letter-spacing:-.05em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.fig .v em{font-style:normal;color:var(--red)}
.fig .l{font-size:13.5px;color:var(--muted);margin-top:11px;line-height:1.42}
.fig .c{font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-top:12px;letter-spacing:.06em}
.stampline{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:22px;letter-spacing:.05em;line-height:1.7}

/* ---------- close ---------- */
.close{position:relative;padding:120px 0 60px;overflow:hidden;border-top:1px solid var(--edge)}
/* pointer-events:none is not decoration. This pseudo-element is positioned,
   so it paints above the static footer below it and — without this — swallows
   every click on the footer links. */
.close::before{
  content:"";position:absolute;inset:auto -10% -70% -10%;height:640px;
  pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(211,47,47,.34),transparent 70%) 22% 40%/60% 80% no-repeat,
    radial-gradient(closest-side,rgba(255,138,128,.16),transparent 70%) 74% 46%/56% 76% no-repeat;
}
.close-in{position:relative;text-align:center;padding-bottom:58px}
/* the footer sits in its own .wrap; lift it over the glow too */
.close > .wrap{position:relative;z-index:1}
.close h2{font-size:clamp(34px,6.4vw,88px);letter-spacing:-.05em}
.close p{color:var(--muted);margin:20px auto 0;max-width:48ch;font-size:17px}
.close .row{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
footer{border-top:1px solid var(--edge);padding:26px 0 52px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer span{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.08em}
footer a{color:var(--muted);text-decoration:none;margin-left:20px}
footer a:hover{color:var(--ink)}

/* ==========================================================================
   Type scale — Material's minimums, applied after the component rules above.
   Three rules decide everything here:
     · body copy is 16px or more, at a line height of at least 1.5
     · no text below 12px, including mono labels and captions
     · interactive targets reach 48px, so a thumb hits what it aims at
   The original values (9.5-11px mono at 60% opacity greys) were the actual
   reason the page felt hard to read — it was as much size as colour.
   ========================================================================== */
body{font-size:17px;line-height:1.6}
.label,.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--dim)}
.nav-links a{font-size:13px;letter-spacing:.08em}
.panel a{font-size:14px;letter-spacing:.08em;color:var(--muted)}
.panel a span{font-size:12px;color:var(--dim)}
.cta{font-size:14px;padding:15px 22px;letter-spacing:.06em;min-height:48px}
.cta.sm{font-size:13px;padding:12px 17px;min-height:42px}

.lede{font-size:19px;line-height:1.55;color:var(--muted)}
.hero-meta b{font-size:17px}
.hero-meta span{font-size:14px;color:var(--muted);letter-spacing:.03em}

.device .bar .nm{font-size:14px}
.device .bar .rt{font-size:12px;letter-spacing:.05em;color:var(--scr-mut)}
.tgt-row p{font-size:13px;line-height:1.45}
.b-foot .st{font-size:12.5px;line-height:1.5}
.b-foot .mv{font-size:12.5px}
.sh i{font-size:11px}

.tick-run span{font-size:16px;color:var(--muted)}
.tick-run span em{color:var(--ink)}

.lineup p,.room .desc,.sec-head p,.close p{font-size:17px;line-height:1.6;color:var(--muted)}
.lineup-keys b{font-size:17px}
.lineup-keys span{font-size:12px;color:var(--dim);letter-spacing:.1em}
/* The tagline is always the mid red: --rc varies by room for the eyebrow,
 * swatches and marks, but Punchfold's white tone would collide with its own
 * heading here, and a 12px eyebrow in the darker red would miss 4.5:1. */
.room .tag{font-size:clamp(20px,2.4vw,27px);color:var(--red)}
.rules li{font-size:13px;line-height:1.6;color:var(--muted)}
.stores a{font-size:12px;color:var(--muted);letter-spacing:.08em;padding-bottom:4px}
.verb{font-size:12px}

.node .role{font-size:12px;letter-spacing:.13em}
.node code{font-size:12.5px;color:var(--muted)}
.node p{font-size:16px;line-height:1.55;color:var(--muted)}
.invariant p{font-size:16.5px;line-height:1.6;color:var(--muted)}
.vec span{font-size:12.5px;color:var(--muted)}
.vec span b{color:var(--ink)}

.fig .l{font-size:15px;line-height:1.45;color:var(--muted)}
.fig .c{font-size:12px;color:var(--dim);letter-spacing:.04em}
.stampline{font-size:13px;line-height:1.8;color:var(--dim)}
footer span{font-size:12.5px;color:var(--dim);letter-spacing:.06em}
footer a{color:var(--muted)}

.tw-w .lb{font-size:11px;letter-spacing:.03em}
.pf-btns button{font-size:12px;padding:13px 8px;letter-spacing:.05em}
.pad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,36px)}
.pad button{font-size:15px}

/* ---------- tablet landscape / small laptop ---------- */
@media (max-width:1120px){
  .hero-in{grid-template-columns:1fr 320px;gap:40px}
  .room-in{grid-template-columns:1fr 320px;gap:44px}
  .room.flip .room-in{grid-template-columns:320px 1fr}
  .lineup-in{gap:40px}
  .flow{gap:14px}
}

/* ---------- tablet portrait ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  .panel{display:block}
  .nav-in{gap:12px}

  .hero{padding:56px 0 48px}
  .hero-in{grid-template-columns:1fr;gap:44px;justify-items:start}
  h1{font-size:clamp(46px,9.4vw,74px)}
  .lede{font-size:17px;max-width:52ch}
  .device{max-width:400px;width:100%}

  .lineup{padding:72px 0 68px}
  .lineup-in{grid-template-columns:1fr;gap:30px}

  .room{padding:76px 0}
  .room-in,.room.flip .room-in{grid-template-columns:1fr;gap:38px}
  .room.flip .room-copy{order:1}
  .room.flip .room-art{order:2}
  .room h2{font-size:clamp(40px,8vw,62px)}
  .room .desc{max-width:60ch}
  .room::before{background:radial-gradient(70% 40% at 50% 8%,color-mix(in srgb,var(--rc) 18%,transparent),transparent 72%)}
  .hero-scrim{background:linear-gradient(180deg,rgba(11,11,12,.86),rgba(11,11,12,.56) 40%,rgba(11,11,12,.84))}

  .engine,.numbers{padding:80px 0}
  .flow{grid-template-columns:1fr;gap:12px}
  .figs{grid-template-columns:repeat(2,1fr)}
  .close{padding:88px 0 48px}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  .wrap{padding:0 20px}
  .panel{padding:6px 20px 20px}
  .kicker .label{letter-spacing:.1em;font-size:12px}

  .hero{padding:44px 0 40px}
  h1{font-size:clamp(40px,12.5vw,64px)}
  .lede{font-size:16px}
  /* Stacked, because "How it is built" cannot sit on one line in half of a
     390px viewport and a two-line button beside a one-line one reads broken. */
  .hero-row{gap:10px;flex-direction:column;align-items:stretch}
  .hero-row .cta{width:100%;justify-content:center;padding:16px}
  .hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:30px}

  .device{max-width:none;border-radius:30px;padding:9px}
  .device .screen{border-radius:22px;padding:14px 12px 12px}
  .device .glass{inset:9px;border-radius:22px}

  .ticker{padding:12px 0}
  .tick-run span{font-size:13px;padding:0 18px;gap:18px}

  .room{padding:60px 0}
  .room h2{font-size:clamp(38px,11vw,54px)}
  .room .tag{font-size:19px}
  .room .desc,.lineup p,.sec-head p,.close p{font-size:16px}
  .rules li{font-size:13px;padding:13px 14px}
  .getrow{gap:14px}
  .getrow .cta{width:100%;justify-content:center;padding:15px}
  .stores{width:100%;justify-content:space-between}

  .lineup h2,.sec-head h2,.close h2{font-size:clamp(30px,9vw,44px)}
  .engine,.numbers{padding:64px 0}
  .figs{grid-template-columns:1fr}
  .invariant{padding:28px 22px;border-radius:10px}
  .invariant q{font-size:clamp(21px,6.6vw,30px)}
  .node{padding:22px 20px 24px}
  .close{padding:70px 0 40px}
  .close .row{flex-direction:column}
  .close .row .cta{width:100%;justify-content:center;padding:15px}
  footer{flex-direction:column;gap:12px}
  footer a{margin:0 20px 0 0}

  /* 48px touch targets, per Material */
  .pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,44px)}
  .pad button{font-size:17px}
  .pf-btns button{padding:15px 8px;font-size:12px}
  .tw-w .lb{font-size:10px;letter-spacing:0}
}

/* ---------- very narrow ---------- */
@media (max-width:390px){
  .tw-worlds{gap:6px}
  .tw-g{gap:1.5px}
  .mini{grid-template-columns:repeat(5,9px)}
  .pf-top{gap:10px}
}

/* ---------- touch devices: no hover-only affordances ---------- */
@media (hover:none){
  .cta:hover{transform:none;box-shadow:none}
  .node:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .line > span{transform:none!important;opacity:1!important}
  .rise{opacity:1!important;transform:none!important}
}