/* ============================================================
   Retro 247 — Cassette Inlay
   Class vocabulary is prefixed r2- (site-unique, no framework).
   No Astro scoped styles anywhere: the legacy .htm routes render
   through the container API, which does not emit scoped CSS.
   ============================================================ */

/* ---------- fonts: declared here, files from bunny.net ---------- */
/* ── Metric-matched fallbacks (Gate 27 / CLS) ─────────────────────────────────
   font-display:optional on a CONDENSED display face was costing CLS 0.19-0.23: when
   Saira Condensed replaced the fallback, every text block changed height and the
   whole page below it moved (one 0.211 shift, measured, moving section/figure/
   lede/stats together). These faces give the fallback the SAME box as the real
   font, so the swap is invisible and the webfont is still used — the alternative,
   font-display:optional, would have cost the display face on a first visit.
   size-adjust values are MEASURED ratios of rendered width against the platform
   sans; the override percentages are the font's own ascent/descent divided by the
   size-adjust, so the absolute box is preserved. */
@font-face{font-family:'Saira Fallback';src:local('Arial Narrow'),local('Helvetica'),local('Arial');
  font-weight:900;size-adjust:71.7%;ascent-override:159.0%;descent-override:61.4%;line-gap-override:0%}
@font-face{font-family:'Saira Fallback';src:local('Arial Narrow'),local('Helvetica'),local('Arial');
  font-weight:700;size-adjust:69.9%;ascent-override:163.1%;descent-override:63.0%;line-gap-override:0%}
@font-face{font-family:'Asap Fallback';src:local('Helvetica'),local('Arial');
  font-weight:400;size-adjust:87.9%;ascent-override:105.8%;descent-override:23.9%;line-gap-override:0%}
@font-face{font-family:'Mono Fallback';src:local('Courier New'),local('monospace');
  font-weight:600;size-adjust:96.3%;ascent-override:96.6%;descent-override:29.1%;line-gap-override:0%}

@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:optional;
  src:url(/fonts/saira-condensed-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:900;font-display:optional;
  src:url(/fonts/saira-condensed-latin-900-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Asap';font-style:normal;font-weight:400;font-display:optional;
  src:url(/fonts/asap-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Asap';font-style:normal;font-weight:500;font-display:optional;
  src:url(/fonts/asap-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Asap';font-style:normal;font-weight:600;font-display:optional;
  src:url(/fonts/asap-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sometype Mono';font-style:normal;font-weight:400;font-display:optional;
  src:url(/fonts/sometype-mono-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sometype Mono';font-style:normal;font-weight:600;font-display:optional;
  src:url(/fonts/sometype-mono-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --r2-shell:#37424f;      /* cold slate plastic — page ground */
  --r2-panel:#242c36;      /* darker band */
  --r2-inlay:#e6e8e4;      /* cool paper — never warm cream */
  --r2-inlay2:#d5d9d4;
  --r2-ink:#14181d;
  --r2-orange:#ff5f1f;     /* safety-orange label */
  --r2-window:#9aa3a8;     /* tape window grey */
  --r2-rule:#5a6674;
  --r2-rule2:#43505e;
  --r2-text:#e6e8e4;
  --r2-soft:#cfd6dc;
  --r2-mute:#93a0ab;
  --r2-ok:#7ee0a0;
  --r2-warn:#ffd166;
  --r2-bad:#ff8a7a;
  --r2-info:#8fd0ff;
  --r2-max:1120px;
  --r2-pad:24px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
body,h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,dl,dd,dt,blockquote,table{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}

body{
  background:var(--r2-shell);
  color:var(--r2-text);
  font-family:'Asap','Asap Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16.5px;line-height:1.64;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px);
  accent-color:var(--r2-orange);
}
::selection{background:var(--r2-orange);color:var(--r2-ink)}

/* the orange accent span: normal weight/style everywhere, never italic */
h1 em,h2 em,h3 em,h4 em{font-style:normal;color:var(--r2-orange)}
h1,h2,h3,h4,.r2-disp{
  font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;
  font-weight:900;line-height:1.03;letter-spacing:.005em;text-transform:uppercase;
}
h3,h4{font-weight:700}

/* in-text links: never underlined, hover effect only */
a{color:inherit;text-decoration:none}
.r2-prose a:not(.r2-btn),.r2-inline a:not(.r2-btn){
  color:var(--r2-orange);
  border-bottom:1px solid transparent;
  transition:border-color .12s linear,color .12s linear;
}
.r2-prose a:not(.r2-btn):hover,.r2-inline a:not(.r2-btn):hover{border-bottom-color:var(--r2-orange)}
.r2-prose a:not(.r2-btn):focus-visible,a:focus-visible{outline:2px solid var(--r2-orange);outline-offset:2px}

.r2-wrap{max-width:var(--r2-max);margin:0 auto;padding:0 var(--r2-pad)}
.r2-mono{font-family:'Sometype Mono','Mono Fallback',ui-monospace,monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.r2-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* skip link */
.r2-skip{position:absolute;left:-9999px;top:0;z-index:50}
.r2-skip:focus{left:8px;top:8px;background:var(--r2-orange);color:var(--r2-ink);padding:10px 14px;font-weight:600}

/* ---------- header ---------- */
.r2-head{background:var(--r2-panel);border-bottom:3px solid var(--r2-orange)}
.r2-bar{display:flex;align-items:center;gap:26px;padding:15px 0}
.r2-brand{display:flex;align-items:center;gap:12px}
.r2-brand svg{flex:none}
.r2-brand b{
  font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:900;font-size:1.5rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--r2-inlay);
}
.r2-brand b i{font-style:normal;color:var(--r2-orange)}
.r2-brand span{display:block;font-family:'Sometype Mono',monospace;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--r2-mute);font-weight:400;margin-top:1px}
.r2-nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.r2-nav{margin-left:auto;display:flex;gap:3px;flex-wrap:wrap;align-items:center}
.r2-nav a{
  font-family:'Sometype Mono',monospace;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;padding:10px 13px;color:#c6ced5;border:1px solid transparent;line-height:1.1;
}
.r2-nav a:hover{color:var(--r2-ink);background:var(--r2-orange);border-color:var(--r2-orange)}
.r2-nav a[aria-current]{color:var(--r2-ink);background:var(--r2-inlay)}

/* breadcrumb */
.r2-crumb{padding:10px 0;border-bottom:1px solid var(--r2-rule2);font-family:'Sometype Mono',monospace;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--r2-mute)}
.r2-crumb ol{display:flex;flex-wrap:wrap;gap:8px}
.r2-crumb li::after{content:"/";margin-left:8px;color:var(--r2-rule)}
.r2-crumb li:last-child::after{content:none}
.r2-crumb a:hover{color:var(--r2-orange)}

/* ---------- hero (shared skeleton, per-type variants below) ---------- */
.r2-hero{padding:46px 0 38px}
.r2-hero h1{font-size:clamp(2.1rem,4.7vw,3.7rem);color:var(--r2-inlay)}
.r2-hero h1 em{font-style:normal;color:var(--r2-orange)}
.r2-p-home .r2-hero h1 em{display:block}
.r2-sechead h2 em,.r2-prose h2 em,.r2-prose h3 em{font-style:normal;color:var(--r2-orange)}
.r2-lede{font-size:1.1rem;margin-top:16px;max-width:62ch;color:var(--r2-soft)}
.r2-hero__two{display:grid;grid-template-columns:1fr 400px;gap:42px;align-items:center}

/* hero image frame — a real <img>, never a background */
.r2-shot{border:1px solid var(--r2-panel);background:var(--r2-panel)}
.r2-shot img{width:100%}
.r2-shot figcaption{font-family:'Sometype Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--r2-mute);padding:8px 12px;border-top:1px solid var(--r2-rule2)}
/* the shots are served at their native pixel size; the browser scales them UP
   with nearest-neighbour, which stays crisp at any column width. Upscaling the
   files first and letting the browser scale DOWN was what made them blurry. */
.r2-pix{image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor;width:100%}
/* full-size recovered shots: normal smoothing is correct for these, they are
   anti-aliased screenshots rather than pixel art */
.r2-smooth{width:100%}

/* stats strip */
.r2-stats{display:flex;margin-top:24px;border:1px solid var(--r2-rule);flex-wrap:wrap}
.r2-stats div{padding:10px 18px;border-right:1px solid var(--r2-rule);flex:1;min-width:130px}
.r2-stats div:last-child{border-right:0}
.r2-stats .n{font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:900;font-size:1.85rem;
  line-height:1;color:var(--r2-orange)}
.r2-stats .l{font-family:'Sometype Mono',monospace;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--r2-mute);margin-top:4px}

/* buttons */
.r2-acts{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.r2-btn{
  font-family:'Sometype Mono',monospace;font-size:.78rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:12px 17px;border:1px solid var(--r2-inlay);color:var(--r2-inlay);
  /* the class is used on <button> as well as <a>; without these the user-agent
     button styles win and light text lands on a light buttonface background */
  background:transparent;cursor:pointer;display:inline-block;line-height:1.2;
}
.r2-btn:hover{background:var(--r2-orange);border-color:var(--r2-orange);color:var(--r2-ink)}
.r2-btn--p{background:var(--r2-orange);border-color:var(--r2-orange);color:var(--r2-ink)}
.r2-btn--p:hover{background:var(--r2-inlay);border-color:var(--r2-inlay);color:var(--r2-ink)}

/* ---------- bands & sections (tight rhythm, no double rules) ---------- */
.r2-band{padding:40px 0}
.r2-band--dark{background:var(--r2-panel);border-top:3px solid var(--r2-orange)}
.r2-band--rule{border-top:1px solid var(--r2-rule)}
.r2-band:last-of-type{padding-bottom:34px}
.r2-sechead{display:flex;align-items:flex-end;gap:18px;border-bottom:2px solid var(--r2-inlay);
  padding-bottom:9px;margin-bottom:22px}
.r2-sechead h2{font-size:clamp(1.5rem,2.9vw,2.25rem)}
.r2-sechead p{margin-left:auto;max-width:36ch;color:var(--r2-mute);font-size:.92rem;text-align:right}

/* ---------- prose ---------- */
.r2-prose{max-width:none}
.r2-prose p,.r2-prose ul,.r2-prose ol{margin-top:14px;text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto}
.r2-prose > :first-child{margin-top:0}
.r2-prose h2{margin-top:32px;font-size:clamp(1.4rem,2.6vw,2rem)}
.r2-prose h3{margin-top:24px;font-size:1.24rem;color:var(--r2-inlay)}
.r2-prose ul li,.r2-prose ol li{position:relative;padding-left:20px;margin-top:7px;text-align:left}
.r2-prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:3px;background:var(--r2-orange)}
.r2-prose ol{counter-reset:r2c}
.r2-prose ol li{counter-increment:r2c}
.r2-prose ol li::before{content:counter(r2c);position:absolute;left:0;top:0;
  font-family:'Sometype Mono',monospace;font-size:.62rem;font-weight:600;color:var(--r2-orange)}
.r2-prose strong{color:var(--r2-inlay);font-weight:600}
.r2-two{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}

/* a bespoke rule that draws a tape spool */
.r2-hr{border:0;height:14px;margin:26px 0;position:relative}
.r2-hr::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--r2-rule)}
.r2-hr::after{content:"";position:absolute;left:0;top:0;width:64px;height:13px;
  background:var(--r2-orange);clip-path:polygon(0 40%,100% 40%,100% 60%,0 60%)}

/* ---------- THE signature component: cassette inlay ---------- */
.r2-inlay{background:var(--r2-inlay);color:var(--r2-ink);border:1px solid var(--r2-panel)}
.r2-inlay__label{background:var(--r2-orange);color:var(--r2-ink);padding:7px 14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.r2-inlay__side{font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:900;
  font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase}
.r2-inlay__meta{font-family:'Sometype Mono',monospace;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600}
.r2-inlay img{width:100%;border-bottom:1px solid var(--r2-inlay2)}
.r2-inlay__body{padding:15px 18px 19px}
.r2-inlay__body h2,.r2-inlay__body h3,.r2-inlay__body p.r2-t{font-size:1.8rem;color:var(--r2-ink);line-height:.99}
.r2-inlay__by{color:#4e5a63;margin-top:5px;font-size:.94rem}
.r2-tracks{margin-top:14px;border-top:1px solid var(--r2-inlay2)}
.r2-tracks li{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px solid var(--r2-inlay2)}
.r2-tracks .no{font-family:'Sometype Mono',monospace;font-size:.72rem;font-weight:600;
  /* #8b959d gave 2.47:1 on the #e6e8e4 inlay — WCAG AA needs 4.5:1 at this size
     (11.5px is not 'large text'). #5a6269 measures 5.03:1 and keeps the muted
     micro-label register. Lighthouse a11y 96 -> 100 on the homepage. */
  color:#5a6269;
  flex:none;letter-spacing:.05em}
/* the dotted leader sat on top of the row rule, so every fact carried two lines */
.r2-tracks .dots{flex:1}
.r2-tracks .v{font-family:'Sometype Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.03em;
  text-align:right}
.r2-tracks a:hover{color:var(--r2-orange)}

/* inlay used as a grid card */
.r2-inlays{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px}

/* ---------- tables ---------- */
.r2-table{width:100%;border-collapse:collapse}
.r2-table caption{text-align:left;color:var(--r2-mute);padding-bottom:10px;font-size:.86rem}
.r2-table th{font-family:'Sometype Mono',monospace;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:600;text-align:center;color:var(--r2-soft);
  padding:0 14px 9px;border-bottom:1px solid var(--r2-rule)}
.r2-table th:first-child{text-align:left;padding-left:0}
.r2-table th:last-child{padding-right:0}
.r2-table td{padding:11px 14px 11px 0;border-bottom:1px solid var(--r2-rule2);vertical-align:baseline}
.r2-table .g{font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:700;font-size:1.2rem;
  text-transform:uppercase;letter-spacing:.01em}
.r2-table .g a:hover{color:var(--r2-orange)}
.r2-table .when{font-family:'Sometype Mono',monospace;font-size:.68rem;letter-spacing:.07em;color:#8d99a4}
/* the game name is plain text now; the row's single target is the button in .act */
.r2-table td.act{padding-right:0;text-align:right;white-space:nowrap}
.r2-table td.act a.r2-btn{border-color:var(--r2-rule);color:var(--r2-soft)}
/* :not(:hover) matters — the row-hover rule is more specific than the button's own
   hover rule, so without it the label stayed orange on the orange fill */
.r2-table tbody tr:hover td.act a.r2-btn:not(:hover){border-color:var(--r2-orange);
  color:var(--r2-orange)}
.r2-table td.act a.r2-btn:hover{background:var(--r2-orange);border-color:var(--r2-orange);
  color:var(--r2-ink)}
.r2-tag{font-family:'Sometype Mono',monospace;font-size:.66rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;white-space:nowrap;display:inline-block}
.r2-tag--sold{color:var(--r2-ok)}
.r2-tag--free{color:var(--r2-warn)}
.r2-tag--gone{color:var(--r2-bad)}
.r2-tag--src{color:var(--r2-info)}
.r2-tag--unk{color:var(--r2-mute)}

/* ---------- spec / definition grids ---------- */
/* Was: label, dotted leader, right-aligned value, plus a rule under every row —
   three lines' worth of furniture per fact, and the value ended up stranded at
   the far right. Now the value sits in its own column immediately after the
   label and the only line is the one the card already has. */
.r2-spec{max-width:640px}
.r2-spec div{display:grid;grid-template-columns:minmax(0,148px) 1fr;gap:6px 16px;
  align-items:baseline;padding:5px 0}
.r2-spec dt{font-family:'Sometype Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--r2-mute);font-weight:600}
.r2-spec .dots{display:none}
.r2-spec dd{color:var(--r2-inlay)}
/* A link in a fact row was inheriting the value colour with no underline, so it
   was distinguishable only by knowing it was there. Same treatment as in-text
   links: orange, underline on hover. Only the two review pages carry any. */
.r2-spec dd a{color:var(--r2-orange);border-bottom:1px solid transparent;
  transition:border-color .12s linear}
.r2-spec dd a:hover{border-bottom-color:var(--r2-orange)}
/* `specWide` opt-in: two columns across the full band on desktop, one centred
   column below it. Same construction as the game-entry facts block, so the two
   read as one system. Each row is a `div`, so the dl becomes the grid and the
   rows become stacked blocks — a row cannot be a grid of its own here or the
   value columns stop lining up between rows. */
.r2-spec--two{max-width:none}
@media(min-width:961px){
  .r2-spec--two{display:grid;grid-template-columns:1fr 1fr;gap:16px 34px}
  .r2-spec--two div{display:block;padding:0;border:0}
  .r2-spec--two div:last-child:nth-child(odd){grid-column:1 / -1}
  .r2-spec--two dt{font-size:.78rem}
  .r2-spec--two dd{font-size:.97rem;margin-top:4px;line-height:1.4}
}
@media(max-width:960px){
  .r2-spec--two{max-width:420px;margin-left:auto;margin-right:auto}
}

.r2-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border:1px solid var(--r2-rule)}
.r2-cols article{padding:17px 16px;border-right:1px solid var(--r2-rule)}
.r2-cols article:last-child{border-right:0}
.r2-cols h3{font-size:1.14rem;color:var(--r2-inlay)}
.r2-cols dl{margin-top:11px;font-size:.85rem}
.r2-cols dt{color:#8d99a4;font-family:'Sometype Mono',monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;margin-top:9px;font-weight:600}
.r2-cols dd{color:var(--r2-inlay)}

/* ---------- FAQ ---------- */
.r2-faq{margin-top:8px;border-top:1px solid var(--r2-rule)}
.r2-faq details{border-bottom:1px solid var(--r2-rule)}
.r2-faq summary{
  padding:14px 0 14px 30px;cursor:pointer;position:relative;list-style:none;
  font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:700;font-size:1.14rem;
  text-transform:uppercase;color:var(--r2-inlay);
}
/* The question is an <h3> inside the <summary> for heading semantics. It has to
   render as the summary line did, so the h3 inherits everything and adds nothing
   of its own — no margin, no size of its own, and it stays inline so the marker
   and the hover colour keep working. */
.r2-faq summary h3{
  display:inline;margin:0;padding:0;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;
}
.r2-faq summary::-webkit-details-marker{display:none}
.r2-faq summary::before{content:"";position:absolute;left:0;top:1.05em;width:14px;height:3px;
  background:var(--r2-orange);transition:transform .14s linear}
.r2-faq details[open] summary::before{transform:rotate(90deg)}
.r2-faq summary:hover{color:var(--r2-orange)}
.r2-faq .a{padding:0 0 15px 30px;color:var(--r2-soft)}
.r2-faq .a p{margin-top:10px}
.r2-faq .a p:first-child{margin-top:0}

/* ---------- footer ---------- */
.r2-foot{background:var(--r2-panel);border-top:3px solid var(--r2-orange);padding:34px 0 26px}
.r2-foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px}
.r2-foot__h{font-family:'Sometype Mono',monospace;font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#8d99a4;margin-bottom:8px}
.r2-foot li{padding:3px 0;font-size:.9rem}
.r2-foot a{color:var(--r2-soft)}
.r2-foot a:hover{color:var(--r2-orange)}
.r2-foot__note{margin-top:11px;color:var(--r2-mute);font-size:.87rem;max-width:32ch}
.r2-foot__bot{margin-top:24px;padding-top:14px;border-top:1px solid var(--r2-rule);
  display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;color:#8d99a4;font-size:.82rem}
.r2-foot__dom{font-family:'Sometype Mono',monospace;font-size:.68rem;letter-spacing:.1em;margin-left:auto}

/* ============================================================
   PER-PAGE-TYPE LAYOUTS — each type gets its own composition
   ============================================================ */

/* HOME — two-column hero + full-bleed shelf band + inlay grid */
.r2-p-home .r2-hero{padding:52px 0 40px}
.r2-p-home .r2-hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
.r2-p-home .r2-hero__two{grid-template-columns:1fr 380px}

/* GAME ENTRY — the inlay IS the page header; content sits beneath in one column */
/* align-items:stretch, so the right column is exactly as tall as the inlay and
   the screenshot strip can fill whatever is left under the status box instead of
   running past the bottom of the inlay or stopping short of it */
.r2-p-game .r2-entry{display:grid;grid-template-columns:370px 1fr;gap:38px;align-items:stretch;
  padding:34px 0 30px}
.r2-p-game .r2-entry h1{font-size:clamp(2rem,4.2vw,3.2rem);color:var(--r2-inlay)}
.r2-p-game .r2-entry .r2-lede{font-size:1.06rem}
.r2-p-game .r2-shots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.r2-p-game .r2-shots--one{grid-template-columns:1fr;justify-items:center}
.r2-p-game .r2-shots--one figure{max-width:460px;width:100%}
@media(min-width:961px){
  /* the right column becomes a column flexbox: h1, lede and status keep their
     natural height, the strip takes the remainder, and object-fit:contain scales
     each shot inside its share without cropping it */
  .r2-p-game .r2-entry > div:last-child{display:flex;flex-direction:column}
  .r2-p-game .r2-shots{flex:1 1 auto;min-height:0}
  .r2-p-game .r2-shots figure{min-height:0;display:flex;overflow:hidden}
  .r2-p-game .r2-shots figure img{height:100%;width:100%;object-fit:contain;object-position:center}
  /* A LONE shot must not grow. Filling the column makes a near-square screenshot
     ~460px tall, which becomes the tallest thing in the row, so align-items:stretch
     drags the inlay beside it to match and leaves dead space under its fact list.
     Cap it at the width one of a pair gets (324px) and let it keep its own height:
     the row is then governed by the inlay, as the layout intends. Rules sit after
     the two above and carry one more class, so they win on both counts. */
  .r2-p-game .r2-shots--one{flex:0 0 auto;align-content:start}
  .r2-p-game .r2-shots--one figure{max-width:300px;display:block;min-height:0}
  .r2-p-game .r2-shots--one figure img{height:auto;width:100%;object-fit:fill}
}
.r2-p-game .r2-status{margin-top:20px;border:1px solid var(--r2-rule);padding:14px 16px}
.r2-p-game .r2-status .k{font-family:'Sometype Mono',monospace;font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--r2-mute);font-weight:600}
.r2-p-game .r2-status .v{font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:900;
  font-size:1.5rem;text-transform:uppercase;margin-top:2px}

/* TOOL (micros compare, arcade) — instrument framing, dark panel first */
.r2-p-tool .r2-hero{padding:38px 0 26px}
.r2-p-tool .r2-rig{background:var(--r2-panel);border:1px solid var(--r2-rule);padding:20px}
.r2-p-tool .r2-picker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.r2-p-tool .r2-picker label{font-family:'Sometype Mono',monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--r2-mute);font-weight:600;display:block;margin-bottom:5px}
.r2-p-tool select{
  font-family:'Sometype Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.05em;
  background:var(--r2-shell);color:var(--r2-inlay);border:1px solid var(--r2-inlay);
  padding:9px 11px;min-width:190px;
}
.r2-p-tool .r2-vs{width:100%;border-collapse:collapse;margin-top:4px}
.r2-p-tool .r2-vs th{font-family:'Sometype Mono',monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:#8d99a4;text-align:left;padding:0 12px 8px 0;
  border-bottom:1px solid var(--r2-rule)}
.r2-p-tool .r2-vs td{padding:9px 12px 9px 0;border-bottom:1px solid var(--r2-rule2)}
.r2-p-tool .r2-vs td.n{font-family:'Sometype Mono',monospace;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--r2-mute);font-weight:600}
.r2-p-tool .r2-vs td.w{color:var(--r2-orange);font-weight:600}

/* REFERENCE (shelf, developers, timeline, index) — data-first, wide table */
.r2-p-ref .r2-hero{padding:36px 0 24px}
.r2-p-ref .r2-hero__two{grid-template-columns:1fr 330px;align-items:center}
.r2-p-ref .r2-filters{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}
.r2-p-ref .r2-filters button{
  font-family:'Sometype Mono',monospace;font-size:.58rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 13px;border:1px solid var(--r2-rule);background:transparent;
  color:var(--r2-soft);cursor:pointer;
}
.r2-p-ref .r2-filters button:hover{border-color:var(--r2-orange);color:var(--r2-orange)}
.r2-p-ref .r2-filters button[aria-pressed="true"]{background:var(--r2-orange);border-color:var(--r2-orange);
  color:var(--r2-ink)}

/* SUPPORT (about, contact, privacy, links, sitemap, 404) — single narrow column, centred */
.r2-p-support .r2-hero{padding:38px 0 22px;text-align:center}
.r2-p-support .r2-hero h1{font-size:clamp(1.9rem,4vw,3rem)}
.r2-p-support .r2-lede{margin:14px auto 0;text-align:center}
.r2-p-support .r2-hero .r2-shot{margin:24px auto 0;max-width:620px}
.r2-p-support .r2-col{max-width:74ch;margin:0 auto}
.r2-p-support .r2-sechead{justify-content:center;text-align:center}
.r2-p-support .r2-sechead p{margin-left:0;text-align:center}

/* ARTICLE / REVIEW — one measured column with a lead image */
.r2-p-article .r2-hero{padding:34px 0 22px}
.r2-p-article .r2-col{max-width:78ch}
.r2-p-article .r2-byline{font-family:'Sometype Mono',monospace;font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--r2-mute);font-weight:600;margin-top:12px}
.r2-p-article .r2-shot{margin-top:22px}
/* A section screenshot capped to its own pixel width (see PageDoc.astro) is
   narrower than the band, so centre it rather than leaving it hard left. */
.r2-shot--true{margin-left:auto;margin-right:auto}

/* ---------- timeline (hand-built, no library) ---------- */
.r2-tl{border-top:1px solid var(--r2-rule);margin-top:6px}
.r2-tl__row{display:grid;grid-template-columns:88px 1fr;gap:20px;padding:16px 0;
  border-bottom:1px solid var(--r2-rule2)}
.r2-tl__yr{font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:900;font-size:1.9rem;
  line-height:1;color:var(--r2-orange)}
.r2-tl__row h3{font-size:1.16rem}
.r2-tl__row p{margin-top:6px;color:var(--r2-soft)}

/* ---------- arcade canvas ---------- */
.r2-game{border:1px solid var(--r2-rule);background:var(--r2-ink);padding:14px}
.r2-game canvas{width:100%;height:auto;image-rendering:pixelated;background:#000;display:block}
.r2-game__bar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:12px;
  font-family:'Sometype Mono',monospace;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--r2-mute);font-weight:600}
.r2-game__bar b{color:var(--r2-orange)}

/* ---------- scroll wrapper for wide content ---------- */
.r2-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  .r2-hero__two,
  .r2-p-home .r2-hero__two,
  .r2-p-ref .r2-hero__two{grid-template-columns:1fr;gap:26px}
  .r2-p-game .r2-entry{grid-template-columns:1fr;gap:24px}
  .r2-two{grid-template-columns:1fr}
  .r2-foot__grid{grid-template-columns:1fr 1fr}
  .r2-sechead{flex-direction:column;align-items:flex-start;gap:7px}
  .r2-sechead p{margin-left:0;text-align:left}
  .r2-cols article{border-right:0;border-bottom:1px solid var(--r2-rule)}
  .r2-cols article:last-child{border-bottom:0}
}

@media(max-width:700px){
  :root{--r2-pad:18px}
  body{font-size:16px}
  /* Header stacks so the logo always leads. The nav used to be a wrapped flex
     row, which on a phone broke into two ragged lines with uneven gaps and the
     current-page block hanging in the middle of nothing. Six items divide
     exactly into a 2x3 ruled grid, so every cell is the same width, the whole
     cell is the tap target, and nothing wraps. */
  /* .r2-bar's own `padding:15px 0` overrides .r2-wrap's side gutter on the same
     element, so on a phone the logo and nav sat flush against the screen edge
     while the breadcrumb, prose and cards all had 18px. Restore the gutter here
     only — on desktop the bar is deliberately aligned with the hero, not the
     breadcrumb. */
  .r2-bar{flex-wrap:wrap;row-gap:12px;padding:15px var(--r2-pad) 0}
  .r2-nav{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0;
    border-top:1px solid var(--r2-rule)}
  .r2-nav a{padding:15px 6px;text-align:center;border:0;
    border-bottom:1px solid var(--r2-rule)}  /* padding repeated in the later block */
  .r2-nav a:nth-child(odd){border-right:1px solid var(--r2-rule)}
  .r2-nav a[aria-current]{background:var(--r2-inlay);color:var(--r2-ink)}

  /* hero centred on phones (text AND buttons) */
  .r2-hero{text-align:center}
  .r2-hero .r2-lede{margin-left:auto;margin-right:auto}
  .r2-acts{justify-content:center}
  .r2-stats div{text-align:center}
  .r2-p-game .r2-entry{text-align:center}
  .r2-p-game .r2-entry .r2-lede{margin-left:auto;margin-right:auto}
  .r2-prose p,.r2-prose ul,.r2-prose ol{text-align:left}

  /* wide tables become stacked cards */
  .r2-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .r2-table,.r2-table tbody,.r2-table tr,.r2-table td{display:block;width:100%}
  .r2-table caption{display:block;width:100%;text-align:left}
  .r2-table tr{border:1px solid var(--r2-rule);margin-bottom:12px;padding:12px 14px}
  .r2-table td{border:0;padding:5px 0;display:flex;justify-content:space-between;align-items:baseline;gap:14px}
  .r2-table td::before{content:attr(data-l);font-family:'Sometype Mono',monospace;font-size:.56rem;
    letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:#8d99a4;flex:none}
  .r2-table td.g{display:block;padding-bottom:8px;border-bottom:1px solid var(--r2-rule);margin-bottom:6px}
  .r2-table td.g::before{content:none}
  /* stacked-card mode: the button gets its own full-width line, no micro-label */
  .r2-table td.act{display:block;text-align:left;padding:11px 0 2px}
  .r2-table td.act::before{content:none}
  .r2-table td.act a.r2-btn{display:block;text-align:center;font-size:.74rem}

  .r2-inlays{grid-template-columns:1fr}
  .r2-foot__grid{grid-template-columns:1fr}
  .r2-foot__note{max-width:none}
  .r2-foot li{padding:6px 0}
  .r2-foot a{display:inline-block;padding:2px 0}
  .r2-tl__row{grid-template-columns:64px 1fr;gap:14px}
  .r2-tl__yr{font-size:1.5rem}
  .r2-spec div{grid-template-columns:1fr;gap:2px;padding:6px 0}
  .r2-p-tool select{min-width:0;width:100%}
  .r2-p-tool .r2-picker{flex-direction:column}
  .r2-p-tool .r2-picker > div{width:100%}

  /* F3 fixes measured at 360/390 in real mobile Chromium:
     micro-labels lifted to the 12px floor, and every non-prose link given
     enough vertical padding to clear a 24px tap target. Both were genuine at
     9.3-9.6px and 12px tall; the design intent survives the change. */
  .r2-tracks .no,.r2-tracks .v,.r2-table .when,.r2-foot__dom,
  .r2-inlay__meta,.r2-stats .l,.r2-spec dt,.r2-cols dt,.r2-shot figcaption{font-size:.75rem}
  .r2-tracks li{padding:9px 0}
  .r2-tracks a{display:inline-block;padding:6px 0}
  .r2-crumb a{display:inline-block;padding:6px 0}
  .r2-foot li a{display:inline-block;padding:6px 0;min-height:24px}
  .r2-table .g a{display:inline-block;padding:4px 0;min-height:24px}
  .r2-prose li a{padding:2px 0}
  .r2-spec dd a{display:inline-block;padding:5px 0;min-height:24px}
  /* same two F3 fixes for the studio register cards */
  .r2-regcard__lab,.r2-regcard__addr,.r2-tag{font-size:.75rem}
  .r2-regcard__val a{display:inline-block;padding:5px 0;min-height:24px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}

/* ---------- polish 2026-07-31 ---------- */
/* Inside the inlay GRID the dot leaders read as clutter; the entry page keeps
   them because there the rows are the page's contents list. */
.r2-inlays .r2-tracks .dots{display:none}
.r2-inlays .r2-tracks li{justify-content:space-between;gap:14px;padding:9px 0}
.r2-inlays .r2-tracks li > span:nth-child(2){flex:1}
.r2-inlays .r2-tracks{border-top:1px solid var(--r2-inlay2);margin-top:12px}
.r2-inlays .r2-tracks li:last-child{border-bottom:0}
.r2-inlays .r2-inlay__body{padding:16px 18px 14px}

/* homepage hero: give the right-hand column real presence */
.r2-p-home .r2-hero__two{grid-template-columns:1fr 480px;gap:46px}

/* the attract-mode board that replaces the small static hero image */
.r2-attract{border:1px solid var(--r2-rule);background:var(--r2-ink);padding:12px}
.r2-attract canvas{width:100%;height:auto;image-rendering:pixelated;background:#000;display:block}
.r2-attract p{margin-top:10px;font-family:'Sometype Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--r2-mute);font-weight:600;display:flex;gap:14px;flex-wrap:wrap}
.r2-attract p b{color:var(--r2-orange)}
.r2-attract p a:not(.r2-btn){color:var(--r2-orange);border-bottom:1px solid transparent}
.r2-attract p a:not(.r2-btn):hover{border-bottom-color:var(--r2-orange)}

@media(max-width:960px){
  .r2-p-home .r2-hero__two{grid-template-columns:1fr;gap:28px}
}
@media(max-width:700px){
  /* footer links in two columns on phones, brand block across the top */
  .r2-foot__grid{grid-template-columns:1fr 1fr;gap:22px}
  .r2-foot__grid > div:first-child{grid-column:1 / -1}
  .r2-foot__note{max-width:38ch}
  /* this block sits after the nav-grid rules above, so the cell padding has to
     be set here or source order silently wins */
  .r2-nav a{font-size:.75rem;padding:13px 6px}
  /* the last row would double up with the header's 3px orange rule */
  .r2-nav a:nth-last-child(-n+2){border-bottom:0}
  .r2-btn{font-size:.74rem;padding:12px 15px}
}

/* the long Gate-25 h1s need a slightly smaller display size to sit beside the
   hero panel without pushing it down the page */
.r2-p-home .r2-hero h1{font-size:clamp(2.1rem,4.1vw,3.2rem)}
.r2-p-ref .r2-hero h1,.r2-p-tool .r2-hero h1{font-size:clamp(1.9rem,3.5vw,2.8rem)}
/* stat labels were wrapping onto two lines */
.r2-stats div{min-width:150px}
.r2-stats .l{white-space:nowrap}
@media(max-width:700px){.r2-stats .l{white-space:normal}}

/* Grid cards: the recovered shots are not all the same ratio (100x75 and
   100x80 both occur), so in a GRID the card bodies stopped lining up. Lock the
   image box to 4:3 there and let the odd one crop by a few pixels. The entry
   page keeps the true ratio, because there the shot is the subject. */
.r2-inlays .r2-inlay img{aspect-ratio:4/3;object-fit:cover;object-position:center}
.r2-inlays .r2-inlay{display:flex;flex-direction:column}
.r2-inlays .r2-inlay__body{flex:1;display:flex;flex-direction:column}
.r2-inlays .r2-tracks{margin-top:auto}

/* footer, mobile: keep the brand a flex row (the tap-target rule above must not
   reach it), and let the last link group fill the row it lands on instead of
   sitting alone beside an empty cell. */
.r2-foot .r2-brand{display:flex;align-items:center;gap:12px}
@media(max-width:700px){
  .r2-foot__grid{gap:14px 22px}
  .r2-foot__grid > div:last-child{grid-column:1 / -1}
  .r2-foot__grid > div:last-child ul{columns:2;column-gap:22px}
  .r2-foot li{padding:4px 0}
  .r2-foot__h{margin-bottom:4px}
  .r2-foot__note{margin-top:9px}
}

/* stats as one full-width ruled row under the spread — four across, never wrapping */
.r2-p-home .r2-statrow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--r2-rule);
  border-top:0;margin-bottom:0}
.r2-p-home .r2-statrow div{padding:13px 18px;border-right:1px solid var(--r2-rule)}
.r2-p-home .r2-statrow div:last-child{border-right:0}
.r2-p-home .r2-statrow .n{font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:900;
  font-size:1.9rem;line-height:1;color:var(--r2-orange)}
.r2-p-home .r2-statrow .l{font-family:'Sometype Mono',monospace;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--r2-mute);margin-top:4px;white-space:nowrap}

/* the image in the first content band was running to the full 1120px */
.r2-p-home .r2-band .r2-shot{max-width:660px}

@media(max-width:1080px){
  .r2-spread__body{grid-template-columns:40px 1fr 400px}
  .r2-spread__game{padding:18px}
}
@media(max-width:900px){
  .r2-spread__body{grid-template-columns:34px 1fr}
  .r2-spread__game{grid-column:2;border-left:0;border-top:1px solid var(--r2-rule2);padding:0 32px 28px}
  .r2-spread__text{padding:26px 32px 22px}
  .r2-p-home .r2-statrow{grid-template-columns:1fr 1fr}
  .r2-p-home .r2-statrow div:nth-child(2){border-right:0}
  .r2-p-home .r2-statrow div:nth-child(1),.r2-p-home .r2-statrow div:nth-child(2){border-bottom:1px solid var(--r2-rule)}
}
@media(max-width:700px){
  .r2-spread__body{grid-template-columns:26px 1fr}
  .r2-spread__text{padding:22px 20px 18px;text-align:left}
  .r2-spread__text h1{max-width:none}
  .r2-spread__text .r2-lede{margin-left:0}
  .r2-spread__game{padding:0 20px 22px}
  .r2-spread__spine span{letter-spacing:.14em;font-size:.62rem}
  .r2-p-home .r2-statrow .l{white-space:normal}
  .r2-p-home .r2-band .r2-shot{max-width:none}
}

/* ============================================================
   HOMEPAGE HERO — quiet ground, motion only where it is invited
   Earlier revision animated the whole band (drifting tape, turning spools, a
   sweeping head pass). Measured against the content it was noise: three
   ambient loops competing with the h1. Now the ground is STATIC and faint,
   the only continuous motion is the board inside its own frame, and the light
   moves only where the cursor does.
   ============================================================ */
.r2-hero--home{position:relative;overflow:hidden;isolation:isolate;
  border-bottom:3px solid var(--r2-orange)}
.r2-hero--home > .r2-wrap{position:relative;z-index:2}

/* a very faint static tape field — texture, not animation */
.r2-tapebg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='46'%3E%3Crect x='0' y='20' width='26' height='6' fill='%239aa3a8' fill-opacity='0.34'/%3E%3C/svg%3E");
  background-size:60px 46px;
  mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}

/* the head light: a soft warm pool that follows the cursor across the band and
   fades out when it leaves. --gx/--gy are written by a rAF-throttled listener;
   --gon is the 0/1 fade. Nothing moves on its own. */
.r2-glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:calc(var(--gon,0) * 1);transition:opacity .45s ease;
  background:radial-gradient(420px 420px at var(--gx,50%) var(--gy,50%),
    rgba(255,95,31,.13) 0%, rgba(255,95,31,.06) 38%, transparent 70%)}
/* the tape brightens very slightly inside the pool */
.r2-glow::after{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='46'%3E%3Crect x='0' y='20' width='26' height='6' fill='%23ffd0b8' fill-opacity='0.5'/%3E%3C/svg%3E");
  background-size:60px 46px;
  mask-image:radial-gradient(300px 300px at var(--gx,50%) var(--gy,50%),#000 0%,transparent 68%);
  -webkit-mask-image:radial-gradient(300px 300px at var(--gx,50%) var(--gy,50%),#000 0%,transparent 68%)}
/* no cursor, no glow */
@media (hover:none),(pointer:coarse){.r2-glow{display:none}}

/* a small typed label above the h1 */
.r2-eyebrow{font-family:'Sometype Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--r2-mute);margin-bottom:16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.r2-eyebrow span{background:var(--r2-orange);color:var(--r2-ink);padding:4px 9px;
  font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:900;font-size:.94rem;
  letter-spacing:.07em}

.r2-p-home .r2-hero{padding:44px 0 34px}
.r2-p-home .r2-hero__two{grid-template-columns:1fr 470px;gap:44px;align-items:center}
.r2-p-home .r2-hero h1{font-size:clamp(2rem,3.9vw,3.1rem)}
.r2-p-home .r2-attract{background:rgba(20,24,29,.92)}

/* stats: one full-width ruled row under the hero, never wrapping */
.r2-p-home .r2-statrow{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--r2-rule);position:relative;z-index:2}
.r2-p-home .r2-statrow div{padding:14px 18px;border-right:1px solid var(--r2-rule)}
.r2-p-home .r2-statrow div:last-child{border-right:0}
.r2-p-home .r2-statrow .n{font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:900;
  font-size:1.9rem;line-height:1;color:var(--r2-orange)}
.r2-p-home .r2-statrow .l{font-family:'Sometype Mono',monospace;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--r2-mute);margin-top:4px;white-space:nowrap}

@media(max-width:960px){.r2-p-home .r2-hero__two{grid-template-columns:1fr;gap:28px}}
@media(max-width:900px){
  .r2-p-home .r2-statrow{grid-template-columns:1fr 1fr}
  .r2-p-home .r2-statrow div:nth-child(2){border-right:0}
  .r2-p-home .r2-statrow div:nth-child(1),
  .r2-p-home .r2-statrow div:nth-child(2){border-bottom:1px solid var(--r2-rule)}
}
@media(max-width:700px){
  .r2-p-home .r2-statrow .l{white-space:normal}
  .r2-eyebrow{font-size:.66rem;justify-content:center}
  .r2-tapebg{opacity:.22}
}
@media(prefers-reduced-motion:reduce){
  .r2-glow{display:none}
}

/* the demo panel's own action row: sits under the readout, full width of the
   panel so the link reads as a button rather than disappearing into the meta line */
.r2-acts--panel{margin-top:12px}
/* the shelf section borrows the two-column prose|figure shape used lower down */
.r2-p-home .r2-band--rule .r2-hero__two{align-items:center;gap:40px}
@media(max-width:960px){.r2-p-home .r2-band--rule .r2-hero__two{grid-template-columns:1fr;gap:26px}}

/* Buttons carry their own colours at a weight no ancestor link rule can beat.
   This is deliberate belt-and-braces: `.r2-prose a` (0,1,1) outranking
   `.r2-btn--p` (0,1,0) produced an orange label on an orange fill twice. */
a.r2-btn{color:var(--r2-inlay);background:transparent;border-color:var(--r2-inlay)}
a.r2-btn:hover{background:var(--r2-orange);border-color:var(--r2-orange);color:var(--r2-ink)}
a.r2-btn--p{background:var(--r2-orange);border-color:var(--r2-orange);color:var(--r2-ink)}
a.r2-btn--p:hover{background:var(--r2-inlay);border-color:var(--r2-inlay);color:var(--r2-ink)}
/* small variant, for the one-per-row button in the index table */
a.r2-btn--sm{font-size:.7rem;padding:9px 13px;letter-spacing:.06em}

/* ---- 1: the demo panel, tightened ---------------------------------------- */
.r2-attract{padding:10px}
.r2-attract p{margin-top:8px}
.r2-attract__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:8px}
.r2-attract__foot p{margin-top:0}
.r2-attract__foot .r2-btn{flex:none}

/* ---- 3: the whole card is a target, not just the title ------------------- */
.r2-inlays .r2-inlay{position:relative}
/* Exactly ONE target per card: the button. The title is plain text and the card
   itself is not clickable, so there is never a question about what a click does. */
a.r2-inlay__go{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding:11px 14px;background:var(--r2-ink);color:var(--r2-inlay);
  font-family:'Sometype Mono',monospace;font-size:.74rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--r2-ink);
  transition:background .13s linear,color .13s linear,border-color .13s linear}
a.r2-inlay__go b{color:var(--r2-orange);font-weight:600;font-size:1rem;line-height:1;
  transition:transform .13s ease,color .13s linear}
a.r2-inlay__go:hover{background:var(--r2-orange);border-color:var(--r2-orange);color:var(--r2-ink)}
a.r2-inlay__go:hover b{color:var(--r2-ink);transform:translateX(3px)}
a.r2-inlay__go:focus-visible{outline:2px solid var(--r2-orange);outline-offset:2px}
@media(prefers-reduced-motion:reduce){a.r2-inlay__go:hover b{transform:none}}



/* ---------- studio register (developers.htm) ----------
   The register used to be a stack of dotted-leader spec rows, which right-aligned
   whole sentences against a dotted line and read as noise. It is now one card per
   studio: state on the edge in colour, address in mono, evidence left-aligned,
   one destination per card. NOT inside .r2-prose, so the prose link rule cannot
   reach the buttons. */
.r2-reg__intro{display:grid;grid-template-columns:1.12fr .88fr;gap:28px;align-items:start;
  margin-bottom:30px}
.r2-reg__how{color:var(--r2-soft);font-size:.95rem;max-width:46ch}
.r2-key{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:18px}
.r2-key>div{border-left:3px solid var(--r2-rule);padding:1px 0 1px 12px}
.r2-key--trading{border-left-color:var(--r2-ok)}
.r2-key--partial{border-left-color:var(--r2-warn)}
.r2-key--dark,.r2-key--lost{border-left-color:var(--r2-bad)}
.r2-key dd{color:var(--r2-mute);font-size:.85rem;margin-top:6px;line-height:1.45}
.r2-reg__stamp{font-family:'Sometype Mono',monospace;font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:#8d99a4;margin-top:20px;padding-top:14px;
  border-top:1px solid var(--r2-rule2)}
.r2-reg__stamp b{color:var(--r2-inlay);font-weight:600}

.r2-reg{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.r2-regcard{display:flex;flex-direction:column;padding:18px 19px 17px;
  border:1px solid var(--r2-rule);border-left-width:3px;background:rgba(20,24,29,.32)}
.r2-regcard--trading{border-left-color:var(--r2-ok)}
.r2-regcard--partial{border-left-color:var(--r2-warn)}
.r2-regcard--dark,.r2-regcard--lost{border-left-color:var(--r2-bad)}
.r2-regcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--r2-rule2)}
.r2-regcard__top h3{font-size:1.2rem;line-height:1.08;color:var(--r2-inlay)}
.r2-regcard__addr{font-family:'Sometype Mono',monospace;font-size:.72rem;letter-spacing:.04em;
  color:var(--r2-orange);margin-top:12px;word-break:break-word}
.r2-regcard__note{margin-top:10px;font-size:.92rem;line-height:1.6;color:var(--r2-soft)}
.r2-regcard__lab{font-family:'Sometype Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:#8d99a4;margin-top:15px}
.r2-regcard__val{font-size:.9rem;line-height:1.55;color:var(--r2-inlay);margin-top:5px}
.r2-regcard__nil{color:var(--r2-mute)}
.r2-regcard__val a{color:var(--r2-orange);border-bottom:1px solid rgba(255,95,31,.4)}
.r2-regcard__val a:hover{border-bottom-color:var(--r2-orange)}
/* rows stretch, so the two cards in a row are the same height; the button is
   pinned to the bottom edge so the buttons line up across the row too */
/* the prominent button goes to our own page; the studio's own address is the
   smaller secondary step beside it */
.r2-regcard__foot{margin-top:auto;padding-top:17px;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px}
.r2-regcard__ext{color:var(--r2-mute);border-color:var(--r2-rule)}
.r2-regcard__ext:hover{background:transparent;border-color:var(--r2-orange);color:var(--r2-orange)}
.r2-regcard__none{font-family:'Sometype Mono',monospace;font-size:.68rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--r2-bad);
  border:1px dashed currentColor;padding:9px 13px;display:inline-block}
@media(max-width:900px){
  .r2-reg__intro{grid-template-columns:1fr;gap:22px}
  .r2-reg__intro .r2-shot{max-width:620px}
}
@media(max-width:760px){
  .r2-reg{grid-template-columns:1fr}
  .r2-key{grid-template-columns:1fr;gap:12px}
  .r2-regcard__top{flex-direction:column;align-items:flex-start;gap:9px}
  /* the F3 floor rules live in the 700px block ABOVE this one, so at equal
     specificity the register declarations would win on source order — repeat
     them here where they are last */
  .r2-regcard__lab{font-size:.75rem}
  .r2-regcard__addr{font-size:.78rem}
  .r2-regcard__none{font-size:.75rem}
}

/* ---------- stat rows on phones ----------
   The stat block was a wrapping flex row with min-width:150px per cell, so three
   stats broke into 2 + 1 with the orphan floating in the middle. Two ruled
   columns instead; an odd last cell spans the full width so there is no hole.
   This block is last in the file on purpose: the min-width above would otherwise
   win on source order and force a horizontal overflow at 360px. */
@media(max-width:700px){
  .r2-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:20px}
  .r2-stats div{min-width:0;flex:none;padding:12px 10px;border-right:0;
    border-bottom:1px solid var(--r2-rule)}
  .r2-stats div:nth-child(odd){border-right:1px solid var(--r2-rule)}
  .r2-stats div:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
  .r2-stats div:last-child,
  .r2-stats div:nth-last-child(2):nth-child(odd){border-bottom:0}
  .r2-stats .n{font-size:1.7rem}
}

/* ---------- the eight machines, as cards ----------
   These were full-band rows: a heading, a blurb, then three spec rows whose
   dotted leaders ran the whole width of the page with the value stranded at the
   far right. Two columns of cards keeps each spec row short. */
.r2-mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.r2-mcard{border:1px solid var(--r2-rule);background:rgba(20,24,29,.32);padding:18px 19px 16px;
  display:flex;flex-direction:column}
.r2-mcard h3{font-size:1.2rem;line-height:1.1;color:var(--r2-inlay);
  padding-bottom:11px;border-bottom:1px solid var(--r2-rule2)}
.r2-mcard p{margin-top:10px;font-size:.92rem;line-height:1.6;color:var(--r2-soft)}
/* pinned to the foot of the card: the blurbs run two or three lines, so without
   this the spec rows of the two cards in a row sat at different heights. Cards
   are equal height, so anchoring the data to the bottom lines it up across the
   row. A tighter label column than the site default keeps the value close to
   its label — these labels are all short. */
.r2-mcard .r2-spec{margin-top:auto;padding-top:16px;max-width:none}
.r2-mcard .r2-spec div{grid-template-columns:minmax(0,104px) 1fr}
/* same reason as the spec rows above: the homepage cards carry blurbs of
   different length, so the button is pushed to the foot of the card and the
   buttons line up across the row. */
.r2-mcard .r2-acts{margin-top:auto;padding-top:18px}
@media(max-width:760px){
  .r2-mgrid{grid-template-columns:1fr}
}

/* ---------- brand blocks, centred on phones ----------
   Last in the file on purpose: the footer and header brand rules above set
   display/max-width on the same elements and would win on source order. */
@media(max-width:700px){
  .r2-bar{justify-content:center}
  .r2-bar .r2-brand{justify-content:center}
  .r2-foot__grid > div:first-child{text-align:center}
  .r2-foot .r2-brand{justify-content:center}
  .r2-foot__note{max-width:none;margin-left:0;margin-right:0}
}

/* ---------- Spool controls ----------
   A directional pad with the wait move in the middle, because waiting is a move
   in this game and belongs where the hand already is. Restart sits apart so it
   cannot be hit while playing, and the script promotes it to the primary style
   only when the run is over. */
.r2-pad{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:16px}
.r2-pad__dir{display:grid;grid-template-columns:repeat(3,62px);grid-auto-rows:46px;gap:6px}
.r2-pad__dir .r2-btn{padding:0;display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;line-height:1}
.r2-pad__u{grid-column:2;grid-row:1}
.r2-pad__l{grid-column:1;grid-row:2}
.r2-pad__c{grid-column:2;grid-row:2}
.r2-pad__r{grid-column:3;grid-row:2}
.r2-pad__d{grid-column:2;grid-row:3}
.r2-pad__dir .r2-pad__c{font-size:.7rem;letter-spacing:.06em}
.r2-pad__side{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.r2-pad__keys{font-family:'Sometype Mono',monospace;font-size:.72rem;letter-spacing:.05em;
  color:var(--r2-mute);max-width:34ch;line-height:1.6}
.r2-pad__keys b{color:var(--r2-soft);font-weight:600}
@media(max-width:700px){
  .r2-pad{justify-content:center;gap:18px}
  .r2-pad__side{align-items:center;text-align:center;width:100%}
  .r2-pad__dir{grid-template-columns:repeat(3,72px);grid-auto-rows:52px;margin:0 auto}
  .r2-pad__keys{font-size:.78rem}
}

/* ---------- charts on the shelf report ----------
   These were inline SVG at a fixed 720px, which meant one of two bad outcomes on
   a phone: scaled down, and the labels went with it (a 13px label rendered at
   6px), or left at full size and wider than the screen. Plain elements instead —
   widths and heights are the only thing the data sets, so the type stays real
   type at every width and the block centres itself. */
.r2-bars{display:grid;gap:15px;max-width:760px;margin:0 auto 28px}
.r2-bars li{display:grid;grid-template-columns:minmax(0,175px) 1fr 2.4rem;align-items:center;gap:16px}
.r2-bars__k{font-family:'Sometype Mono',monospace;font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:#a8b2ba;line-height:1.4}
.r2-bars__t{display:block;height:26px;background:rgba(230,232,228,.06)}
.r2-bars__t i{display:block;height:100%}
.r2-bars b{font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:900;font-size:1.45rem;
  line-height:1;color:var(--r2-inlay)}
/* the comparison chart: long labels, so they sit above their own bar */
.r2-bars--stack li{grid-template-columns:1fr 2.6rem;grid-template-areas:'k k' 't v';row-gap:8px}
.r2-bars--stack .r2-bars__k{grid-area:k}
.r2-bars--stack .r2-bars__t{grid-area:t;height:32px}
.r2-bars--stack b{grid-area:v;justify-self:start}
.r2-bars__note{display:block!important;font-family:'Sometype Mono',monospace;font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;color:#7f8b95;text-align:right;margin-top:-4px}

/* columns by year: two rows sharing one flex geometry, so the year labels stay
   under their own column */
.r2-plot{max-width:620px;margin:0 auto 26px}
.r2-plot__bars,.r2-plot__axis{display:flex;justify-content:center;gap:clamp(16px,4vw,40px)}
.r2-plot__bars{align-items:flex-end;height:200px;border-bottom:1px solid var(--r2-rule)}
.r2-plot__c{flex:0 0 clamp(44px,9vw,58px);display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%}
.r2-plot__c b{font-family:'Saira Condensed','Saira Fallback','Arial Narrow',sans-serif;font-weight:900;font-size:1.45rem;
  line-height:1;color:var(--r2-inlay);margin-bottom:7px}
.r2-plot__c i{display:block;width:100%;background:var(--r2-orange)}
.r2-plot__axis{padding-top:10px}
.r2-plot__axis span{flex:0 0 clamp(44px,9vw,58px);text-align:center;font-family:'Sometype Mono',monospace;
  font-size:.76rem;letter-spacing:.09em;color:#a8b2ba}
@media(max-width:560px){
  .r2-bars li{grid-template-columns:1fr 2.4rem;grid-template-areas:'k k' 't v';row-gap:7px}
  .r2-bars__k{grid-area:k}
  .r2-bars__t{grid-area:t}
  .r2-bars b{grid-area:v;justify-self:start}
  .r2-plot__bars{height:170px}
}

/* ---------- the fact pair on a game entry ----------
   On a phone the two lists stacked into one long column of six label/value
   rows, which read as loose text rather than a data block. Two columns inside
   a framed panel instead, with the labels lifted off the 12px floor. */
@media(max-width:640px){
  .r2-facts{border:1px solid var(--r2-rule);background:rgba(20,24,29,.3);
    padding:16px 17px 18px;gap:16px;text-align:left}
  .r2-facts .r2-spec{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px;max-width:none}
  .r2-facts .r2-spec div{display:block;padding:0}
  /* three facts in two columns leaves the last one beside an empty cell */
  .r2-facts .r2-spec div:last-child:nth-child(odd){grid-column:1 / -1}
  .r2-facts .r2-spec dt{font-size:.78rem}
  .r2-facts .r2-spec dd{font-size:.97rem;margin-top:4px;line-height:1.4}
  .r2-facts .r2-spec:first-child{padding-bottom:16px;border-bottom:1px solid var(--r2-rule2)}
}

/* a commissioned still life on an entry, where the record left only a thumbnail */
.r2-more{margin-top:20px}
.r2-more p{color:var(--r2-soft)}

.r2-plate{max-width:620px;margin:22px auto 4px}
.r2-plate--slot{max-width:none;margin:16px 0 0}

/* the two-column hero: text left, image right. Used by the review, feature and
   support pages; the centred hero is still the default elsewhere. */
/* .r2-p-support .r2-hero{text-align:center} sits on the same element and is more
   specific, so the split variant has to be spelled out for that page type too */
.r2-hero--split,
.r2-p-support .r2-hero--split,
.r2-p-article .r2-hero--split,
.r2-p-ref .r2-hero--split{text-align:left}
.r2-hero--split .r2-lede{margin:14px 0 0;text-align:left;max-width:62ch}
.r2-hero--split .r2-shot,
.r2-p-support .r2-hero--split .r2-shot{margin:0;max-width:none}
.r2-hero--split .r2-hero__two{grid-template-columns:1fr 420px;align-items:center}
/* several of these images are square and would tower over a 420px column, so the
   box is fixed at 3:2 and the image fills it without distortion */
.r2-hero--split .r2-shot img{aspect-ratio:3/2;object-fit:cover;object-position:center}
@media(max-width:960px){
  .r2-hero--split .r2-hero__two{grid-template-columns:1fr}
  .r2-hero--split .r2-shot{max-width:620px}
}
@media(max-width:700px){
  .r2-hero--split,.r2-hero--split .r2-lede{text-align:center}
  .r2-hero--split .r2-lede{margin-left:auto;margin-right:auto}
}
/* the wide variant runs its prose at full width, so its section heads line up
   with it rather than staying centred like the narrow support pages */
.r2-sec--wide .r2-sechead{justify-content:space-between;text-align:left}
.r2-sec--wide .r2-sechead p{margin-left:auto;text-align:right}
@media(max-width:960px){
  .r2-sec--wide .r2-sechead p{margin-left:0;text-align:left}
}