/* ============================================================================
   RIGGED STUDIOS
   the studio builds machines, so the site is built like one: machined stock, three
   inks off the robot, condensed industrial type, hard edges, numbers everywhere.
   the game art is the only place any other colour is allowed, and it runs at full
   strength with nothing screened over it.
   inks: ink (the keyline), red (the spot), amber (the highlight). that's the whole box.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:root {
  /* stock — warm near-black, never a blue-grey dashboard navy */
  --paper:   #14110e;
  --paper-2: #1e1a16;
  --paper-3: #2b2520;

  /* the inks, straight off the robot, printing light-on-dark */
  --ink:      #f2e8d6;
  --ink-soft: #f2e8d6cc;
  --ink-mut:  #f2e8d68f;
  --ink-hair: #f2e8d62b;
  --red:      #fb5c4c;
  --red-deep: #d93a2b;
  --amber:    #ffc431;

  /* the light stock, for the few objects that are actually printed paper */
  --sheet:      #f3ead9;
  --sheet-2:    #e9dcc3;
  --sheet-ink:  #14110e;

  /* the measured house layout is a full-bleed 12-column grid on a vw gutter, not a
     single centred max-width. --wrap stays for prose; --bleed is the page itself. */
  --wrap: min(1240px, 100% - 3rem);
  --pad-x: max(4.6vw, 22px);
  --bleed: calc(100% - var(--pad-x) * 2);
  --cols: 12;
  --grid-gap: clamp(12px, 1.6vw, 28px);
  --col: calc((var(--bleed) - (var(--cols) - 1) * var(--grid-gap)) / var(--cols));
  --gut: clamp(1rem, 3vw, 2.5rem);
  --ease: cubic-bezier(.2,.9,.25,1);
  --ease-press: cubic-bezier(.34,1.56,.64,1);

  --f-poster: "Anton", "Anton-fallback", "Impact", sans-serif;
  --f-slab:   "Archivo", "Archivo-fallback", system-ui, sans-serif;
  --f-text:   "Archivo", "Archivo-fallback", system-ui, -apple-system, sans-serif;
  --f-data:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* SEVEN sizes for the whole site. it had twenty-eight, which is the thing that reads
     as nobody having chosen any of them. every size below is one of these tokens.
     the display steps are set against anton at 1440, where the measured house range for
     a studio hero is 135-217px — the old cap was 120px and stopped scaling at 1396px. */
  --t-mega: clamp(3.4rem, 11.2vw, 11.5rem);   /* 161px at 1440 */
  --t-xl:   clamp(2.4rem, 6.2vw, 5.4rem);     /*  89px at 1440 */
  --t-l:    clamp(1.45rem, 2.7vw, 2.1rem);
  --t-m:    clamp(1.1rem, 1.35vw, 1.32rem);
  --t-body: 1.0625rem;
  --t-s:    0.8rem;
  --t-xs:   0.68rem;

  /* motion tokens, so timing is tunable from one place instead of 40 call sites */
  --anim-t: .75s;
  --anim-delay: .27s;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.62 var(--f-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* paper fibre. multiplied, not overlaid — overlay on a light stock reads as fog. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: .07; mix-blend-mode: overlay;
}

::selection { background: var(--red); color: var(--sheet-ink); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ---------------------------------------------------------------- type ---- */
.poster, h1, h2 {
  font-family: var(--f-poster); font-weight: 400;
  text-transform: uppercase; line-height: .88;
  /* NEGATIVE. this was +0.005em, which at a 120px hero is +0.6px of air between caps —
     every studio site measured for this tracks display type in, never out. */
  letter-spacing: -0.015em; text-wrap: balance;
}
h1 { font-size: var(--t-mega); }
h2 { font-size: var(--t-xl); }
.kicker + h1, .kicker + h2, .dateline + h1, .dateline + h2 { margin-top: .62rem; }
h3 { font: 700 var(--t-l)/1.08 var(--f-slab); letter-spacing: -0.021em; text-wrap: balance; }
p { text-wrap: pretty; }

.dateline, .plate-label, .kicker {
  font: 600 var(--t-xs)/1 var(--f-data);
  letter-spacing: .15em; text-transform: uppercase;
}
.kicker { color: var(--red); }
.dateline { color: var(--ink-mut); }
.data { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.lede { font-size: var(--t-m); line-height: 1.5; max-width: 40ch; }
.measure { max-width: 62ch; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* second pass, off register. a press misses by a couple of MILLIMETRES — not by a
   proportion of the type size. em here is what turned a 6rem headline into a wordart
   drop shadow, so this is locked to px and stays the same at every size. */
.mis { position: relative; display: inline-block; }
.mis > span { position: relative; z-index: 1; }
.mis::before {
  content: attr(data-t);
  position: absolute; left: 0; top: 0; z-index: 0;
  color: var(--red);
  transform: translate(1px, 1px);
  transition: transform .6s var(--ease);
}
.mis.arm::before { transform: translate(4px, 3px); }

/* ------------------------------------------------------------ furniture ---- */
.wrap { width: var(--wrap); margin-inline: auto; }

.rule { border: 0; border-top: 2px solid var(--ink); }
.rule-thin { border-top-width: 1px; opacity: .35; }

/* tear-off. dotted die line with the nick marks a real perf has at either end. */
.perf {
  position: relative; height: 14px;
  background:
    radial-gradient(circle 2.2px at 9px 50%, var(--ink) 96%, transparent 97%) 0 0/18px 14px repeat-x;
  opacity: .5;
}

/* engine-turned ribbon and rosette, drawn from the same maths a banknote uses. the
   fill is only switched on where masks work — without the guard a browser that can't
   mask paints a solid block where the engraving should be. */
.guilloche {
  height: 46px; color: var(--ink); opacity: .3;
  background:
    repeating-linear-gradient(58deg, currentColor 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-58deg, currentColor 0 1px, transparent 1px 7px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* retired: the engine-turned flower read as a banknote costume, not as a studio that
   builds machines. kept as a no-op so every page's markup still validates. */
.rosette { display: none; }

/* what sits behind the dark sections now: a machined grid, ruled at the same 26px the
   lab plots on, with the stock washing back over it toward the edges. it is painted as
   one background stack rather than a pseudo so nothing has to fight over a z-index. */
.grid-bed {
  --bed: var(--paper);
  --bed-fade: radial-gradient(135% 105% at 50% 0, transparent 8%, var(--bed) 74%);
  background-image:
    var(--bed-fade),
    linear-gradient(var(--ink-hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-hair) 1px, transparent 1px);
  background-size: 100% 100%, 26px 26px, 26px 26px;
  background-repeat: no-repeat, repeat, repeat;
}
.pressroom, .foot { --bed: var(--paper-2); }
.card { --bed: var(--paper-2); --bed-fade: radial-gradient(120% 130% at 78% 108%, transparent 4%, var(--bed) 68%); }



/* registration crosshair, the thing that tells the printer the plates line up */
.reg {
  width: 26px; height: 26px; position: absolute; pointer-events: none; opacity: .5;
  background:
    linear-gradient(var(--ink), var(--ink)) 50% 0/1px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 50%/100% 1px no-repeat;
}
.reg::after {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid var(--ink); border-radius: 50%;
}

/* the screen used to sit over the game art until it scrolled in. the art is the
   product — it does not get a veil over it, at any point. the class stays inert. */
.halftone::after { content: none; }

/* --------------------------------------------------------------- buttons ---- */
/* a ticket, not a pill. two corners are guillotined, the red plate sits under the ink
   plate slightly out of register, and pressing it registers the two. */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem;
  font: 700 var(--t-s)/1 var(--f-data); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; background: var(--btn-bg); color: var(--btn-fg);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  transition: transform .13s var(--ease), background .13s linear;
  isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--red);
  transform: translate(5px, 5px);
  clip-path: inherit;
  transition: transform .13s var(--ease);
}
.btn:hover { transform: translate(1px, 1px); }
.btn:hover::before { transform: translate(3px, 3px); }
.btn:active { transform: translate(4px, 4px); }
.btn:active::before { transform: translate(0, 0); }
.btn-red { --btn-bg: var(--red); --btn-fg: var(--sheet-ink); }
.btn-red::before { background: var(--ink); }
.btn-open { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-open::before { background: var(--ink); opacity: .18; }
.btn-sm { padding: .62rem 1rem; font-size: var(--t-xs); }
.btn .arw { font-family: var(--f-text); font-weight: 700; transform: translateY(-1px); }

/* ---------------------------------------------------------------- stamps ---- */
/* status plate. square, dead level, one keyline — it is a part number, not a novelty
   rubber stamp tilted six degrees. used for status, nothing else. */
.stamp {
  display: inline-flex; align-items: center; color: var(--red);
  border: 1.5px solid currentColor;
  font: 700 var(--t-xs)/1 var(--f-data); letter-spacing: .12em; text-transform: uppercase;
}
/* the lamp. solid when it is live, hollow when it is not — the one thing on the plate
   you can read from across the room. */
.stamp::before {
  content: ""; align-self: center; flex: none;
  width: 7px; height: 7px; margin: 0 .5rem 0 .62rem;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.stamp-ink::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
/* the label cell carries the tint; the qualifier sits behind its own rule, the way a
   part number sits next to a part name. */
.stamp small {
  align-self: stretch; display: flex; align-items: center;
  margin-left: .62rem; padding: 0 .62rem;
  border-left: 1.5px solid currentColor;
  font-size: var(--t-xs); letter-spacing: .1em; font-weight: 500;
  color: var(--ink-mut);
}
.stamp { padding: .46rem 0; }
.stamp small { margin-block: -.46rem; }
.stamp:not(:has(small)) { padding-right: .7rem; }
.stamp-ink { color: var(--ink); }
.stamp-flat::before { display: none; }

/* the robot as a die-cut sticker: cream body knocked out of a solid red disc */
.bot-sticker { position: relative; flex: none; width: clamp(104px, 12vw, 158px); }
.bot-sticker::before {
  content: ""; position: absolute; inset: -30% -20% -16% -20%;
  background: var(--red); border-radius: 50%;
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 7px var(--ink);
}
.bot-sticker img { position: relative; width: 100%; }
.bot-sticker .bubble {
  position: absolute; z-index: 2; right: 88%; top: -8%;
  background: var(--paper); border: 2px solid var(--ink);
  padding: .42rem .6rem; white-space: nowrap;
  font: 700 var(--t-xs)/1 var(--f-data); letter-spacing: .1em; text-transform: uppercase;
}
.bot-sticker .bubble::after {
  content: ""; position: absolute; right: -9px; bottom: 6px;
  border: 5px solid transparent; border-left-color: var(--ink);
}
@media (max-width: 700px) { .bot-sticker { display: none; } }

/* ---------------------------------------------------------- plates & data ---- */
/* the brass plate screwed to the front of a machine: label above, number below */
.plates {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr));
  gap: 1px;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.plates > div {
  padding: .8rem .9rem .9rem;
  /* the rule is the cell's own outline bridging the 1px gap, not the container showing
     through it — a container background paints a filled block in the empty slot that a
     wrapped row leaves behind. */
  box-shadow: 0 0 0 1px var(--ink-hair);
  min-width: 0; overflow-wrap: break-word; hyphens: none;
}
.plate-label { color: var(--ink-mut); display: block; }
.plate-val {
  display: block; margin-top: .42rem; min-width: 0;
  /* 2:1 against the label above it, which is the ratio every studio spec strip uses */
  font: 700 calc(var(--t-xs) * 2)/1.2 var(--f-data);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  overflow-wrap: break-word; hyphens: none;
}
.plate-val em { font-style: normal; color: var(--red); }

/* contents page: title, dot leader, folio */
.index { border-top: 2px solid var(--ink); margin-top: 2.2rem; }
.index a {
  display: grid; grid-template-columns: 3.4rem auto minmax(2rem, 1fr) auto;
  align-items: baseline; gap: 1rem;
  padding: .95rem .2rem; border-bottom: 1px solid var(--ink-hair);
  text-decoration: none; transition: background .18s linear, padding-left .18s var(--ease);
}
.index a:hover { background: var(--paper-2); padding-left: .8rem; }
.index .no { font: 700 var(--t-s)/1 var(--f-data); color: var(--red); letter-spacing: .08em; }
.index .ttl { font: 400 var(--t-l)/1 var(--f-poster); text-transform: uppercase; letter-spacing: -.012em; }
.index .dots { border-bottom: 2px dotted var(--ink-hair); align-self: end; transform: translateY(-.35em); }
.index .st { font: 500 var(--t-xs)/1 var(--f-data); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mut); }
.index .st.live { color: var(--red); font-weight: 700; }

/* ------------------------------------------------------------- masthead ---- */
.mast {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.mast .bar {
  width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  padding-block: .7rem;
}
.mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
/* square. a rounded avatar chip is the loudest single tell there is, and every
   studio site measured for this ships its tiles at border-radius 0. */
.mark img { width: 34px; height: 34px; border-radius: 0; }
.mark-type {
  font: 400 var(--t-m)/1 var(--f-poster); letter-spacing: 0; text-transform: uppercase;
}
.mark-type em { font-style: normal; color: var(--red); }
.mast nav { margin-left: auto; display: flex; gap: clamp(.9rem, 2.2vw, 1.8rem); min-width: 0; }
.mast nav a {
  text-decoration: none; padding: .3rem 0;
  font: 700 var(--t-s)/1 var(--f-data); letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.mast nav a:hover { border-bottom-color: var(--ink); }
.mast nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
.mast .btn { margin-left: .4rem; }
@media (max-width: 760px) { .mast .btn { display: none; } }
@media (max-width: 540px) {
  .mast .bar { gap: .7rem; }
  .mark img { width: 28px; height: 28px; }
  .mark-type { font-size: var(--t-body); }
  .mast nav { gap: .85rem; }
  .mast nav a { font-size: var(--t-xs); letter-spacing: .07em; }
}
@media (max-width: 480px) { .mark-type { display: none; } }

/* ------------------------------------------------------------------ hero ---- */
/* broadsheet: the wood type runs the full measure, then a rule, then the deck sits
   beside the machine. the machine's half of the sheet is printed in solid ink. */
.hero { position: relative; padding-block: clamp(1.6rem, 3.6vw, 3rem) 0; }
.hero-in { width: var(--wrap); margin-inline: auto; position: relative; z-index: 1; }
.hero .rosette {
  width: min(720px, 76vw); aspect-ratio: 1;
  left: -13vw; top: -12vw; opacity: .11; z-index: 0;
}
.hero h1 { margin-top: .9rem; }
.hero h1 .ln { display: block; }
.hero h1 .ln-red {
  color: var(--red); font-size: .58em; margin-top: .1em;
  letter-spacing: -.012em;
}
.hero .rule { margin-top: clamp(1.2rem, 2.4vw, 2rem); }
.hero-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
}
.hero .lede { color: var(--ink-soft); }
.hero .cta { margin-top: 1.6rem; display: flex; gap: .9rem; flex-wrap: wrap; }
/* the printed stat block down the side of the deck */
.hero-foot { margin-top: 2rem; border-top: 2px solid var(--ink); }
.hero-foot div {
  display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: baseline;
  padding-block: .6rem; border-bottom: 1px solid var(--ink-hair);
  font: 500 var(--t-s)/1.4 var(--f-data); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mut);
}
.hero-foot .dots { border-bottom: 2px dotted var(--ink-hair); transform: translateY(-.3em); }
.hero-foot b {
  color: var(--ink); font: 700 var(--t-body)/1 var(--f-data); font-variant-numeric: tabular-nums;
}
.hero-foot div:last-child b { color: var(--red); }

/* the machine lives in the dark half of the sheet, bled off the right edge */
.cab-bleed { position: relative; padding: 1.5rem 0 1.5rem 1.5rem; }
.cab-bleed::before {
  content: ""; position: absolute;
  inset: 0 calc(-50vw + 50%) 0 0;
  background: #08090b; z-index: 0;
  box-shadow: inset 0 0 0 1px var(--ink-hair);
}
.cab { position: relative; z-index: 1; }
.cab-marquee {
  display: flex; align-items: center; gap: .55rem; justify-content: center;
  padding: .5rem .8rem; background: #0e161e;
  border: 2px solid #2b3947; border-bottom: 0;
}
.cab-marquee .bulbs { display: flex; gap: .5rem; }
.cab-marquee i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 7px 1px #ffc43188; animation: chase 1.4s steps(1) infinite;
}
.cab-marquee i:nth-child(3n+2) { animation-delay: .466s; }
.cab-marquee i:nth-child(3n+3) { animation-delay: .933s; }
@keyframes chase { 0%,33% { opacity: 1 } 34%,100% { opacity: .22 } }
.cab-marquee span {
  font: 700 var(--t-xs)/1 var(--f-data); letter-spacing: .2em;
  text-transform: uppercase; color: var(--amber);
}
.cab-screen {
  border: 2px solid #2b3947; background: #000;
  padding: 9px; position: relative;
}
.cab-screen iframe {
  display: block; width: 100%; aspect-ratio: 16/10; border: 0; background: #000;
}
.cab-plate {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem .2rem 0;
  font: 500 var(--t-xs)/1.4 var(--f-data); letter-spacing: .13em; text-transform: uppercase;
  color: #8695a5;
}
.cab-plate b { color: var(--amber); font-weight: 700; }

/* the contact sheet gets a wider first column than the hero does */
.card-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); }

@media (max-width: 900px) {
  .hero-cols, .card-cols { grid-template-columns: 1fr; }
  .cab-bleed { padding: 1.2rem 0; }
  .cab-bleed::before { inset: 0 calc(-50vw + 50%); }
  .hero .rosette { left: -40vw; top: -30vw; opacity: .08; }
}

/* ---------------------------------------------------------------- ticker ---- */
.ticker {
  position: relative; overflow: hidden;
  background: var(--sheet); color: var(--sheet-ink);
  border-block: 2px solid var(--sheet);
  padding-block: .85rem;
}
.ticker .guilloche {
  position: absolute; inset: 0; height: 100%; color: var(--sheet-ink); opacity: .1;
  -webkit-mask-image: none; mask-image: none;
}
.ticker-track {
  display: flex; width: max-content; position: relative;
  animation: roll var(--roll, 95s) linear infinite;
}
.ticker-track span {
  font: 400 var(--t-l)/1 var(--f-poster);
  text-transform: uppercase; letter-spacing: -.01em;
  padding-inline: 1.1rem; white-space: nowrap;
  display: flex; align-items: center; gap: 1.1rem;
}
.ticker-track span::after { content: "◆"; color: var(--red); font-size: .5em; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes roll { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- sections ---- */
.sec { width: var(--wrap); margin-inline: auto; padding-block: clamp(3rem, 6vw, 5.5rem); }
.sec-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(1.5rem, 7vw, 6rem); align-items: end; }
.sec-head p.measure { margin-top: 1rem; color: var(--ink-soft); }
.sec-bleed { position: relative; }

/* ---------------------------------------------------------------- sheets ---- */
/* one game, printed as a page: number, title, art in a mount, spec plates */
.sheet { padding-block: clamp(2.4rem, 4vw, 3.6rem); border-top: 2px solid var(--ink); }
.sheet:first-of-type { border-top: 0; }
.sheet-top {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.sheet-no {
  font: 700 var(--t-s)/1 var(--f-data); letter-spacing: .1em; color: var(--red);
  padding: .4rem .55rem; border: 2px solid var(--red);
}
.sheet-name { font: 400 var(--t-xl)/.88 var(--f-poster); text-transform: uppercase; letter-spacing: -.015em; }
.sheet-top .stamp { margin-left: auto; }

.sheet-body {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center;
}
.sheet.rev .sheet-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.sheet.rev .sheet-art { order: 2; }

/* the mount: a keyline and a paper margin, the way a print is dry-mounted.
   the margin is a BORDER, not padding, so overflow clips at the inside of the mount and
   the art can crop into itself. */
.art {
  position: relative;
  border: 9px solid var(--paper-2); outline: 2px solid var(--ink); outline-offset: 0;
  background: var(--paper-2); isolation: isolate; overflow: hidden;
}
.art > img.scene { width: 100%; display: block; }

/* the house move: the picture scales inside a box that does not move. nothing lifts,
   nothing gains a shadow, the layout never shifts. */
@media (hover: hover) and (pointer: fine) {
  .art > img.scene { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
  .art:hover > img.scene { transform: scale(1.055); }
}
.art-logo {
  position: absolute; z-index: 2; width: min(46%, 340px);
  right: 6%; bottom: 8%;
  filter: drop-shadow(0 6px 0 #16202b33);
  transition: transform .5s var(--ease);
}

.art-tall > img.scene { aspect-ratio: 3/4; object-fit: cover; }

/* proof pull: the unfinished machine gets one ink and a coarse screen until it ships.
   luminance stays in the photo, the hue comes off the plate — a real duotone, not a tint. */
.proof > img.scene { filter: grayscale(1) contrast(1.28) brightness(.96); }
.proof::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--red); mix-blend-mode: color;
}
.proof::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(var(--paper) 30%, transparent 32%);
  background-size: 4px 4px; opacity: .34; mix-blend-mode: multiply;
}
.proof .art-logo { filter: grayscale(1) contrast(1.2); }

/* tape, for the things pinned to the sheet rather than printed on it */
.tape {
  position: absolute; z-index: 3; width: 108px; height: 30px;
  background: #ffc43159; border-left: 1px dashed #ffffff22; border-right: 1px dashed #ffffff22;
  transform: rotate(-4deg);
}

.sheet-copy > p { color: var(--ink-soft); max-width: 44ch; }
.sheet-copy > p + p { margin-top: .9rem; }
.sheet-copy .plates { margin-top: 1.6rem; }
.sheet-copy .act { margin-top: 1.5rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }

/* the symbols, laid out like the paytable card taped inside the cabinet */
.symrow {
  margin-top: 1.5rem; display: flex; gap: 0; flex-wrap: wrap;
  border: 2px solid var(--ink); background: var(--paper-2);
}
.symrow figure {
  flex: 1 1 4.2rem; padding: .55rem .3rem .45rem; text-align: center;
  border-right: 1px solid var(--ink-hair);
}
.symrow figure:last-child { border-right: 0; }
.symrow img { width: 40px; height: 40px; object-fit: contain; margin-inline: auto; }
.symrow figcaption {
  margin-top: .35rem; font: 700 var(--t-xs)/1 var(--f-data);
  letter-spacing: .08em; color: var(--ink-mut);
}

@media (max-width: 600px) {
  .index a { grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .7rem; }
  .index .dots { display: none; }
  .index .st { font-size: var(--t-xs); text-align: right; }
}
@media (max-width: 860px) {
  .sheet-body, .sheet.rev .sheet-body { grid-template-columns: 1fr; }
  .sheet.rev .sheet-art { order: 0; }
  .sheet-top .stamp { margin-left: 0; }
}

/* ------------------------------------------------------------- press room ---- */
/* the toy. every line it prints is one real round drawn from the shipped tables. */
.pressroom {
  background: var(--paper-2); position: relative; overflow: hidden;
  border-block: 2px solid var(--ink-hair);
}
.pressroom .rosette { color: var(--ink); opacity: .07; width: 620px; aspect-ratio: 1; right: -140px; bottom: -180px; }
.pressroom .sec { position: relative; z-index: 1; }
.pr-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start;
}
.pressroom .kicker { color: var(--amber); }
.pr-modes { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.8rem; }
.mode {
  padding: .6rem .85rem; background: transparent; color: var(--ink-mut); cursor: pointer;
  border: 2px solid var(--paper-3);
  font: 700 var(--t-xs)/1 var(--f-data); letter-spacing: .1em; text-transform: uppercase;
  transition: color .15s linear, border-color .15s linear, background .15s linear;
}
.mode:hover { color: var(--ink); border-color: var(--ink-mut); }
.mode[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--sheet-ink); }
.pr-note {
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--ink-hair);
  font: 500 var(--t-s)/1.55 var(--f-data); color: var(--ink-mut); max-width: 46ch;
}

/* the lever */
.pr-controls { display: flex; align-items: flex-end; gap: 1.8rem; margin-top: 2.2rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.lever {
  position: relative; width: 104px; height: 158px; background: none; border: 0;
  cursor: pointer; padding: 0; flex: none;
}
.lever-post {
  position: absolute; left: 50%; bottom: 0; width: 84px; height: 32px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4b433a 0 2px, #2b2621 2px, #191512);
  border: 1px solid #5d5348;
  box-shadow: inset 0 1px 0 #7d7060, 0 6px 14px #0009;
}
/* two countersunk bolts holding the plate down */
.lever-post::before, .lever-post::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 36% 30%, #9a8d7c, #3d362e 70%);
  box-shadow: inset 0 0 0 1px #14110e, 0 1px 0 #6d6255;
}
.lever-post::before { left: 10px; } .lever-post::after { right: 10px; }
.lever-arm {
  position: absolute; left: 50%; bottom: 24px; width: 13px; height: 104px;
  transform-origin: 50% 100%;
  /* turned steel: two speculars and a core shadow, not a flat three-stop ramp */
  background: linear-gradient(90deg,
    #5d564e 0, #8e8479 14%, #f4efe4 36%, #cfc6b8 50%, #6f665c 74%, #3f3830 100%);
  border-radius: 2px;
  box-shadow: 0 2px 10px #0008;
  transform: translateX(-50%) rotate(-13deg);
  transition: transform .55s var(--ease-press);
}
/* the knurled collar where the shaft meets the plate */
.lever-arm::after {
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 26px; height: 15px; transform: translateX(-50%);
  background:
    repeating-linear-gradient(90deg, #00000055 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #9b9184, #514941);
  border-radius: 3px; box-shadow: inset 0 1px 0 #cdc3b3, 0 2px 5px #0008;
}
.lever-arm::before {
  content: ""; position: absolute; left: 50%; top: -25px;
  width: 46px; height: 46px; border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 32% 24%, #ffd9d2 0 6%, #ff8d7f 22%, var(--red) 52%, var(--red-deep) 82%, #8e2114);
  box-shadow: inset 0 -6px 10px #00000045, 0 6px 16px #0009;
}
.lever[data-pulled="1"] .lever-arm { transform: translateX(-50%) rotate(64deg); }
.lever-cap {
  position: absolute; left: 50%; bottom: -1.4rem; transform: translateX(-50%);
  font: 700 var(--t-xs)/1 var(--f-data); letter-spacing: .18em; text-transform: uppercase; color: #8d9aa6;
}
.pr-quick { display: flex; gap: .5rem; flex-wrap: wrap; padding-bottom: .2rem; }

/* the printer head and the slip it feeds */
.pr-out { position: relative; }
.printer { background: var(--paper-3); border: 2px solid var(--ink-hair); padding: .8rem .9rem .55rem; }
.printer-face {
  display: flex; align-items: center; gap: .6rem;
  font: 700 var(--t-xs)/1 var(--f-data); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mut);
}
.printer-face .lamp {
  width: 8px; height: 8px; border-radius: 50%; background: var(--paper); flex: none;
}
.printer.busy .lamp { background: var(--amber); box-shadow: 0 0 8px 1px #ffc43188; }
.printer-slot {
  margin-top: .6rem; height: 10px; background: #07090b;
  box-shadow: inset 0 2px 3px #000;
}
.slip {
  --paper: var(--sheet); --paper-2: var(--sheet-2);
  --ink: var(--sheet-ink); --ink-soft: #14110ecc;
  --ink-mut: #14110e8c; --ink-hair: #14110e2b;
  position: relative; background: var(--paper); color: var(--ink);
  padding: .9rem 1rem 1.1rem; margin-inline: .4rem;
  box-shadow: 0 18px 34px #00000066;
}
.slip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 11px;
  background-image:
    linear-gradient(135deg, var(--paper) 50%, transparent 51%),
    linear-gradient(225deg, var(--paper) 50%, transparent 51%);
  background-size: 15px 15px; background-repeat: repeat-x;
}
.slip-head { text-align: center; border-bottom: 2px dashed var(--ink-hair); padding-bottom: .6rem; }
.slip-head strong { display: block; font: 400 var(--t-m)/1 var(--f-poster); text-transform: uppercase; letter-spacing: .01em; }
.slip-head span {
  display: block; margin-top: .3rem;
  font: 500 var(--t-xs)/1.5 var(--f-data); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mut);
}
.slip-feed {
  position: relative;
  -webkit-mask-image: linear-gradient(transparent 0, #000 26px);
          mask-image: linear-gradient(transparent 0, #000 26px);
}
.slip-lines {
  list-style: none; padding: .55rem 0; margin: 0;
  height: 232px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  font: 500 var(--t-s)/1.75 var(--f-data); font-variant-numeric: tabular-nums;
}
.slip-lines li { display: grid; grid-template-columns: 3.1rem 1fr auto; gap: .5rem; }
.slip-lines li .mult { text-align: right; }
.slip-lines li.zero { color: var(--ink-mut); }
.slip-lines li.hit .mult { font-weight: 700; }
.slip-lines li.big { color: var(--red); font-weight: 700; }
.slip-lines li.fresh { animation: feed .34s var(--ease); }
@keyframes feed { from { transform: translateY(-1.75em); opacity: 0 } to { transform: none; opacity: 1 } }
.slip-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink-mut); font: 500 var(--t-s)/1 var(--f-data);
  letter-spacing: .16em; text-transform: uppercase;
}
.slip-empty[hidden] { display: none; }
.slip-tot {
  border-top: 2px solid var(--ink); padding-top: .55rem;
  font: 500 var(--t-s)/1.85 var(--f-data); font-variant-numeric: tabular-nums;
}
.slip-tot div { display: flex; justify-content: space-between; gap: 1rem; }
.slip-tot .big { font-weight: 700; font-size: var(--t-body); }
.slip-tot .spec { color: var(--ink-mut); }
.slip-tot .off { color: var(--red); }
.slip-foot {
  margin-top: .6rem; text-align: center;
  font: 500 var(--t-xs)/1.6 var(--f-data); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mut);
}
@media (max-width: 880px) { .pr-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- craft ---- */
.craft { list-style: none; padding: 0; margin-top: 2.4rem; border-top: 2px solid var(--ink); }
.craft li {
  display: grid; grid-template-columns: 5rem minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem); align-items: start;
  padding-block: 1.5rem; border-bottom: 1px solid var(--ink-hair);
}
.craft .n {
  font: 700 var(--t-m)/1 var(--f-data); color: var(--red);
  -webkit-text-stroke: 0; letter-spacing: .02em;
}
.craft p { color: var(--ink-soft); }
@media (max-width: 760px) {
  .craft li { grid-template-columns: 3rem minmax(0,1fr); }
  .craft p { grid-column: 2; }
}

/* ------------------------------------------------------------------ lab ---- */
.lab {
  border: 2px solid var(--ink); background: var(--paper-2);
  padding: clamp(.9rem, 2vw, 1.4rem); margin-top: 2rem; position: relative;
}
/* graph paper, because that is what the curve was plotted on the first time */
.lab::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--ink-hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-hair) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .45;
}
.lab > * { position: relative; }
.lab-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.lab-bar .spacer { flex: 1; }
.lab-btn {
  padding: .6rem .85rem; background: transparent; cursor: pointer;
  border: 2px solid var(--ink); color: var(--ink);
  font: 700 var(--t-xs)/1 var(--f-data); letter-spacing: .1em; text-transform: uppercase;
  transition: background .14s linear, color .14s linear;
}
.lab-btn:hover { background: var(--paper-3); }
.lab-btn.on, .lab-btn.red { background: var(--red); border-color: var(--red); color: var(--paper); }
.lab-btn.red:hover { background: var(--red-deep); border-color: var(--red-deep); }
#labCv { width: 100%; height: 320px; display: block; margin-top: 1rem; }
#labSpec { font: 500 var(--t-s)/1.4 var(--f-data); letter-spacing: .08em; color: var(--ink-mut); text-transform: uppercase; }
.lab-ro { margin-top: 1rem; }

/* -------------------------------------------------------------- contact ---- */
/* the card is a piece of printed stationery: ink keyline, a solid red head band with
   the department reversed out of it, and crop marks at the corners. */
.card {
  position: relative; margin: clamp(1.8rem,4vw,3.2rem) 0 0; max-width: 46rem;
  border: 3px solid var(--ink); background: var(--paper-2);
  overflow: hidden;
}
.card .rosette { width: 380px; aspect-ratio: 1; right: -120px; bottom: -150px; opacity: .13; }
.card > .rosette { position: absolute; }
.card-band {
  background: var(--red); color: var(--sheet-ink);
  padding: .7rem clamp(1.2rem, 3vw, 2.4rem);
  font: 700 var(--t-s)/1 var(--f-data); letter-spacing: .16em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.card-body { position: relative; padding: clamp(1.4rem, 3.4vw, 2.6rem); }
.card .mail {
  display: inline-block;
  font: 700 var(--t-l)/1.1 var(--f-slab); letter-spacing: -.028em;
  text-decoration: none; overflow-wrap: anywhere;
  border-bottom: 5px solid var(--red);
}
.card .mail:hover { color: var(--red); }
.card-foot {
  margin-top: 1.8rem; padding-top: 1.1rem; border-top: 2px dashed var(--ink-hair);
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center;
  font: 500 var(--t-s)/1.5 var(--f-data); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mut);
}
.card .reg { opacity: .35; }
.card .reg-tl { left: 10px; top: 10px; } .card .reg-tr { right: 10px; top: 10px; }
.card .reg-bl { left: 10px; bottom: 10px; } .card .reg-br { right: 10px; bottom: 10px; }

/* --------------------------------------------------------------- colophon ---- */
.foot { background: var(--paper-2); position: relative; overflow: hidden; border-top: 2px solid var(--ink); }
.foot .guilloche { color: var(--ink); opacity: .28; }
.foot .rosette { color: var(--ink); opacity: .06; width: 480px; aspect-ratio: 1; left: 50%; top: -60px; transform: translateX(-50%); }
.foot-in {
  width: var(--wrap); margin-inline: auto; position: relative;
  padding-block: clamp(2.2rem, 4vw, 3.4rem);
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1.6rem 2rem; align-items: center;
}
.foot img.bot { width: 74px; }
.foot .colophon {
  font: 500 var(--t-s)/1.7 var(--f-data); letter-spacing: .06em; color: var(--ink-mut);
  text-transform: uppercase;
}
.foot .colophon b { color: var(--ink); font-weight: 700; }
.foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.foot-links a {
  text-decoration: none; font: 700 var(--t-s)/1 var(--f-data);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  border-bottom: 2px solid transparent; padding-bottom: .25rem;
}
.foot-links a:hover { border-bottom-color: var(--red); }
.foot-links .crew { color: var(--ink-mut); }
@media (max-width: 720px) { .foot-in { grid-template-columns: auto minmax(0,1fr); } .foot-links { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- motion ---- */
/* the hidden state only exists once js has said it can run the reveal — a css-only
   page (or a dead script) shows everything rather than a sheet of blanks */
.js .rise { opacity: 0; transform: translateY(16px); }
.js .rise.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-stag="1"] { transition-delay: .07s } [data-stag="2"] { transition-delay: .14s }
[data-stag="3"] { transition-delay: .21s } [data-stag="4"] { transition-delay: .28s }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track, .cab-marquee i { animation: none; }
  .rise { opacity: 1; transform: none; }
  .mis.arm::before { transform: translate(1px, 1px); }
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* ======================================================================== rhythm ==
   everything below exists because the page measured as a document rather than a site:
   one centred column, uniform padding on every section, a blanket fade on 22 elements
   and zero scroll-linked motion. ================================================= */

/* the full-bleed 12-column bed. .wrap still works and still centres; this is for the
   places that should run to the edge of the sheet. */
.bleed {
  width: var(--bleed); margin-inline: auto;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}
.bleed > .all { grid-column: 1 / -1; }

/* section padding was the same clamp on every section, top and bottom. a real page
   breathes unevenly — the lead-in is short, the exit is long. */
.sec { padding-block: clamp(2.6rem, 5vw, 4.4rem) clamp(4.4rem, 9vw, 9rem); }
.sec + .sec { padding-top: clamp(1.4rem, 3vw, 2.6rem); }

/* ---- the light stock. the studio prints on two grounds, and flipping to the light
   one is what stops eight screens of near-black reading as one long template. ---- */
.stock-light {
  --paper: var(--sheet); --paper-2: var(--sheet-2); --paper-3: #ded0b4;
  --ink: var(--sheet-ink); --ink-soft: #14110ecc; --ink-mut: #14110e96;
  --ink-hair: #14110e2e; --bed: var(--sheet);
  background: var(--paper); color: var(--ink);
}
.stock-light .btn { --btn-bg: var(--ink); --btn-fg: var(--paper); }
/* the outline button has to put --btn-bg BACK to transparent. inheriting the solid
   button's ink background here painted dark ink on a dark ink ground — a black slab
   with invisible text on it. */
.stock-light .btn-open { --btn-bg: transparent; --btn-fg: var(--ink); }
.stock-light .btn-red { --btn-bg: var(--red); --btn-fg: var(--sheet-ink); }

/* ---- motion. the page already had scroll-linked parallax (js/press.js, [data-float])
   and a gated IntersectionObserver reveal with a 2.6s failsafe. what it did NOT have was
   any section-scale motion, so this adds one scroll-linked effect and nothing else.

   IT DOES NOT CLIP CONTENT. a first pass here wiped the game art in with clip-path on a
   view() timeline and left five of six arts sitting at inset(0 100% 0 0) — invisible —
   because an element whose range never becomes active keeps its `from` state, and on a
   short page or a tall viewport that range may never be entered at all. a reveal that can
   hide the product is a bug, not a flourish. only decoration gets a timeline. ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* the section rules draw themselves across. gated on .js for the same reason
       everything else is: with no js the page is simply already settled. */
    .js .rule { animation: rule-draw linear both; animation-timeline: view(); animation-range: entry 6% cover 22%; }
  }
  /* the headline settles once, on load. no timeline, so it always completes. */
  .hero h1 .ln { animation: ln-settle var(--anim-t) var(--ease) both; }
  .hero h1 .ln-red { animation-delay: var(--anim-delay); }
}
@keyframes rule-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ln-settle { from { opacity: 0; transform: translateY(.12em); } to { opacity: 1; transform: none; } }

/* the mark knocks out of whatever it sits on instead of shipping a light and a dark
   copy of itself */
.foot img.bot, .mark img { mix-blend-mode: normal; }
.stock-light .bot-sticker::before { box-shadow: 0 0 0 5px var(--paper), 0 0 0 7px var(--ink); }