/* ==========================================================================
   DiwaX Games

   Theme lock ....... dark only. The brand identity ("Neon Jade Night") is a
                      dark identity; `color-scheme: dark` is declared and no
                      section inverts.
   Accent lock ...... jade (--jade) is the single interactive accent: links,
                      CTAs, active state, progress, focus. Two further brand
                      colours carry exactly one semantic job each and appear
                      nowhere else - saffron = a welcome-bonus figure,
                      violet = the "New" flag.
   Shape lock ....... 6px on every surface (plates, records, buttons, panels),
                      3px on small tags. Nothing else is rounded.
   Type ............. Space Grotesk (display) + Plus Jakarta Sans (text),
                      both self-hosted in /assets/fonts.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg:        #070f13;
  --bg-low:    #0c1519;
  --bg-panel:  #111b20;
  --bg-raised: #162126;
  --bg-inset:  #1c272d;
  --rule:      #23383f;
  --rule-soft: #18262c;

  /* the one interactive accent */
  --jade:      #4bffb5;
  --jade-dim:  #34f0a8;
  --jade-deep: #12e29b;
  --on-jade:   #04231a;

  /* single-job semantic colours */
  --bonus:     #fe893c;   /* welcome-bonus figures only */
  --new:       #a18eff;   /* the "New" flag only */

  /* text */
  --ink:       #eff8fd;
  --read:      #dbe7ea;
  --ink-2:     #a4acb2;
  --ink-3:     #848d93;

  --alert:     #ff716c;
  --star:      #ffc046;

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --text:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --page:   1320px;
  --gut:    24px;
  --spine:  300px;
  --mast:   64px;

  --r:      6px;   /* surfaces */
  --r-tag:  3px;   /* tags */

  --ease: cubic-bezier(.2, .7, .3, 1);
  --t:    200ms var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mast) + 20px);
  scrollbar-color: var(--rule) var(--bg);
  scrollbar-width: thin;
}

body {
  margin: 0;
  padding-top: var(--mast);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; flex: none; }
a { color: var(--jade); text-decoration: none; transition: color var(--t); cursor: pointer; }
a:hover { color: var(--jade-dim); }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; line-height: 1.15; margin: 0; }

/* browser surfaces ship with the design, not with the browser */
::selection { background: rgba(75, 255, 181, .26); color: #fff; }
:root { accent-color: var(--jade); caret-color: var(--jade); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--bg); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--jade-deep); }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gut); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--jade); color: var(--on-jade); padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: 1px solid transparent; border-radius: var(--r);
  font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.btn--primary { background: var(--jade); color: var(--on-jade); }
.btn--primary:hover { background: var(--jade-dim); color: var(--on-jade); box-shadow: 0 6px 18px rgba(75, 255, 181, .25); }
.btn--primary:active { transform: translateY(1px); }
.btn--lg { padding: 15px 26px; font-size: 15px; }
.btn--block { width: 100%; }

/* tags: the only 3px radius on the page */
.flag {
  display: inline-block; padding: 4px 9px; border-radius: var(--r-tag);
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.4;
}
.flag--new { background: #1b1240; color: #cfc3ff; }
.flag--hot { background: #3a1a06; color: #ffb98c; }
.flag--ver { background: var(--bg-inset); color: var(--ink-2); }

.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--star); }
.stars .star { display: block; }
.stars .star--off { color: #2c3a40; }

/* ====================================================== 1. MASTHEAD */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--mast); background: var(--bg); border-bottom: 1px solid var(--rule);
}
.masthead__inner { display: flex; align-items: center; gap: 24px; height: 100%; }

.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); margin-right: auto; }
.mark:hover { color: var(--ink); }
.mark img { width: 30px; height: 30px; border-radius: var(--r); }
.mark__name { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.03em; }
.mark__name b { color: var(--jade-deep); }

.mastnav { display: flex; align-items: center; gap: 26px; }
.mastnav a {
  position: relative; padding: 5px 0; color: var(--ink-2);
  font-size: 14px; font-weight: 500; transition: color var(--t);
}
.mastnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--jade); transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.mastnav a:hover { color: var(--ink); }
.mastnav a:hover::after { transform: scaleX(1); }
.mastnav a.is-active { color: var(--jade); }
.mastnav a.is-active::after { transform: scaleX(1); }

.mastnav__cta {
  padding: 8px 15px !important; border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--ink) !important; font-weight: 700 !important;
}
.mastnav__cta::after { display: none; }
.mastnav__cta:hover { border-color: var(--jade); color: var(--jade) !important; }

/* Reading progress rides the masthead's own bottom rule.
   Native scroll-driven animation: no scroll listener, no JS. */
.masthead__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--jade-deep), var(--jade));
  transform: scaleX(0); transform-origin: left;
}
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  .has-progress .masthead__progress { animation: read-progress linear both; animation-timeline: scroll(root block); }
  .spinebar__progress i          { animation: read-progress linear both; animation-timeline: scroll(root block); }
}
@supports not (animation-timeline: scroll()) {
  .masthead__progress, .spinebar__progress { display: none; }
}

.mast-toggle {
  display: none; background: transparent; border: 1px solid var(--rule);
  border-radius: var(--r); padding: 7px; color: var(--ink);
}
.mast-toggle:hover { border-color: var(--jade); color: var(--jade); }
.mast-toggle .is-close { display: none; }
.mast-toggle[aria-expanded="true"] .is-open { display: none; }
.mast-toggle[aria-expanded="true"] .is-close { display: block; }

/* ========================================================== 2. HERO */
.hero {
  position: relative; overflow: hidden; padding: 96px 0 88px;
  background-image: url("/assets/images/bg/home.webp");
  background-size: cover; background-position: center;
}
/* Darkening overlay: heaviest under the copy, lightest where the art shows. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,15,19,.93) 0%, rgba(7,15,19,.88) 22%, rgba(7,15,19,.46) 50%, rgba(7,15,19,.18) 78%, rgba(7,15,19,.12) 100%),
    linear-gradient(180deg, rgba(7,15,19,.08) 0%, rgba(7,15,19,0) 26%, rgba(7,15,19,.62) 84%, var(--bg) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr minmax(0, 480px); gap: 64px; align-items: center;
}
.hero__copy h1 {
  font-size: clamp(2.5rem, 5vw, 4.1rem); font-weight: 700;
  letter-spacing: -.042em; line-height: 1.02; text-wrap: balance;
}
.hero__copy > p {
  margin: 22px 0 32px; font-size: 1.1rem; color: var(--read);
}

/* Four real artworks in a bounded 2x2; the right column is stepped down so the
   cluster reads asymmetric without growing past the fold. */
.hero__plates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.hero__plate {
  margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule);
  background: var(--bg-raised);
}
.hero__plate img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hero__plate figcaption {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 9px 11px; font-size: 12px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero__plate figcaption b { color: var(--bonus); font-size: 12.5px; }
.hero__plate--2, .hero__plate--4 { transform: translateY(30px); }

/* =================================================== 3. FACTS STRIP */
.facts { border-block: 1px solid var(--rule); background: var(--bg-low); }
.facts__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts__item {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 15px 22px 15px 0;
  border-right: 1px solid var(--rule-soft);
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.facts__item + .facts__item { padding-left: 22px; }
.facts__item:last-child { border-right: 0; padding-right: 0; }
.facts__item svg { color: var(--jade); }
.facts__item b { color: var(--ink); font-weight: 600; }

/* ====================================================== 4. SECTIONS */
.band { padding: 72px 0; }
.band--low { background: var(--bg-low); border-block: 1px solid var(--rule); }
.band__head { margin-bottom: 30px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.band__head h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 600; }
.band__head p { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; }

/* ======================================================== 5. RECORD */
.records { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }

.record {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; transition: border-color var(--t), transform var(--t);
}
.record:hover { border-color: rgba(75, 255, 181, .5); transform: translateY(-3px); }
.record:focus-within { border-color: var(--jade); }

.record__plate { position: relative; background: var(--bg-panel); }
.record__plate img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.record__plate .flag { position: absolute; top: 8px; left: 8px; }

.record__body { display: flex; flex-direction: column; flex: 1; gap: 9px; padding: 13px; }
.record__name { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
/* the title link is stretched over the whole record: one big tap target */
.record__name a { color: var(--ink); }
.record__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.record:hover .record__name a { color: var(--jade); }

.record__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule-soft);
}
.record__bonus { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--bonus); }
.record__go {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-3); transition: color var(--t);
}
.record:hover .record__go { color: var(--jade); }
.record__go svg { transition: transform var(--t); }
.record:hover .record__go svg { transform: translateX(2px); }

/* rail: browse-by-recency, scroll-snapped */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; scrollbar-width: thin;
}
.rail > .record { scroll-snap-align: start; }

/* ranked: the top bonus as a banner, the rest as a two-column ranking */
.ranked { display: block; }
.ranked__lead {
  position: relative; display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: center;
  background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 22px; margin-bottom: 26px;
}
.ranked__leadart { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); }
.ranked__leadart img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ranked__amount {
  margin: 0; font-family: var(--display); font-size: 2.5rem; font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--bonus);
}
.ranked__leadbody h3 { margin: 10px 0 0; font-size: 1.3rem; font-weight: 600; }
.ranked__leadbody h3 a { color: var(--ink); }
.ranked__leadbody h3 a::after { content: ""; position: absolute; inset: 0; }
.ranked__lead:hover h3 a { color: var(--jade); }
.ranked__desc {
  margin: 10px 0 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* column-major so the ranking still reads top-to-bottom, then continues right */
.ranked__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column;
  column-gap: 40px;
}
.ranked__list li { border-bottom: 1px solid var(--rule-soft); }
.ranked__list a {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px;
  padding: 10px 4px; color: var(--ink); transition: background var(--t), padding var(--t);
}
.ranked__list a:hover { background: rgba(75, 255, 181, .05); padding-inline: 10px 8px; color: var(--ink); }
.ranked__list img { width: 34px; height: 34px; border-radius: var(--r-tag); object-fit: cover; }
.ranked__name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked__bonus { font-family: var(--display); font-size: 14.5px; font-weight: 700; color: var(--bonus); }

/* ---- game page hero band: that game's own artwork, blurred and graded ---- */
main { position: relative; }
main > .ghero {
  position: absolute; inset: 0 0 auto 0; height: 660px; z-index: 0;
  background-size: cover; background-position: center top; pointer-events: none;
}
main > .ghero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,15,19,.12) 0%, rgba(7,15,19,.34) 40%, rgba(7,15,19,.82) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgba(7,15,19,.72) 0%, rgba(7,15,19,.30) 34%, rgba(7,15,19,.16) 100%);
}
main > .ghero ~ *:not(.sheet) { position: relative; z-index: 1; }

/* ================================================ 6. SPINE + READER */
.crumbs { display: flex; align-items: center; gap: 7px; padding-top: 20px; font-size: 13px; color: var(--ink-3); }
.crumbs svg { color: var(--rule); }
.crumbs [aria-current="page"] { color: var(--ink-2); }

.page { display: grid; grid-template-columns: var(--spine) minmax(0, 1fr); gap: 60px; align-items: start; }

.spine { position: sticky; top: calc(var(--mast) + 28px); padding: 36px 0 64px; }
.spine__plate { width: 112px; height: 112px; border-radius: var(--r); border: 1px solid var(--rule); object-fit: cover; }
.spine__name { margin: 18px 0 0; font-size: 1.9rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.spine__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.spine__bonus { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.spine__bonus dt { font-size: 12px; color: var(--ink-3); }
.spine__bonus dd {
  margin: 3px 0 0; font-family: var(--display); font-size: 2.3rem; font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--bonus);
}
.spine__action { margin-top: 18px; }

/* specs as a two-column pair grid, not a bordered row list */
.spine__specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px;
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule);
}
.spine__specs div { min-width: 0; }
.spine__specs dt { font-size: 11.5px; color: var(--ink-3); }
.spine__specs dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); }

.spine__sections { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
.spine__sections--top { margin-top: 0; padding-top: 0; border-top: 0; }
.spine__label { font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 10px; font-family: var(--text); }

.toc { position: relative; list-style: none; margin: 0; padding: 0 0 0 16px; }
.toc::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.toc__fill {
  position: absolute; left: 0; top: 6px; width: 1px; height: 0;
  background: linear-gradient(180deg, var(--jade-deep), var(--jade));
  transition: height 420ms var(--ease);
}
.toc a {
  position: relative; display: -webkit-box; padding: 6px 0;
  font-size: 13px; line-height: 1.4; color: var(--ink-2);
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t);
}
.toc a::before {
  content: ""; position: absolute; left: -16px; top: 12px; width: 1px; height: 0;
  background: var(--jade); transition: height var(--t);
}
.toc a:hover { color: var(--ink); }
.toc a.is-current { color: var(--jade); font-weight: 600; }
.toc a.is-current::before { height: 14px; top: 10px; }

.spinebar { display: none; }

/* ---- the reader ---- */
.reader { padding: 34px 0 72px; }
.reader--center { padding-bottom: 0; }
.reader > h1 {
  font-size: clamp(1.8rem, 3.3vw, 2.6rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; margin-bottom: 26px;
}
.reader h2 {
  font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 600; text-wrap: balance;
  margin: 60px 0 16px; padding-top: 18px; border-top: 1px solid var(--rule);
  scroll-margin-top: calc(var(--mast) + 90px);
}
.reader h3 { font-size: 1.12rem; font-weight: 600; margin: 34px 0 9px; letter-spacing: -.015em; }
.reader p { margin: 0 0 20px; color: var(--read); }
.reader > p:first-of-type { font-size: 1.12rem; line-height: 1.65; color: var(--ink); }
.reader ul { margin: 0 0 22px; padding: 0; list-style: none; }
.reader li { position: relative; padding-left: 20px; margin-bottom: 12px; color: var(--read); }
.reader li::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 1px; background: var(--jade); }
.reader strong { color: var(--ink); font-weight: 700; }
.reader a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---- FAQ accordion (native <details>, keyboard-operable without JS) ---- */
.faq { margin: 0 0 26px; border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule-soft); }
.faq__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 17px 0; cursor: pointer; list-style: none;
  transition: color var(--t);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
/* specificity must beat `.reader h3`, which otherwise adds a 34px top margin */
.faq__item summary .faq__q {
  margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  line-height: 1.45; color: var(--ink); letter-spacing: -.015em; transition: color var(--t);
}
.faq__item summary:hover .faq__q { color: var(--jade); }
.faq__item summary .faq__q strong { font-weight: 600; color: inherit; }
.faq__item[open] .faq__q { color: var(--jade); }
.faq__mark { color: var(--ink-3); margin-top: 4px; transition: transform var(--t), color var(--t); }
.faq__item[open] .faq__mark { transform: rotate(90deg); color: var(--jade); }
.faq__item summary:focus-visible { outline: 2px solid var(--jade); outline-offset: 4px; }
.faq__a { padding: 0 0 20px; }
.faq__a p { margin: 0 0 14px; color: var(--read); }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a ul { margin-bottom: 0; }

/* ====================================================== 7. NOTICES */
.notice { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--alert); }
.notice h3 {
  display: flex; align-items: center; gap: 7px; margin: 0 0 6px;
  font-family: var(--text); font-size: 12.5px; font-weight: 700; color: var(--alert);
}
.notice p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #d6c1c1; }

.duty-band { background: var(--bg-low); border-top: 1px solid var(--rule); }
.duty { border-top: 2px solid var(--alert); padding-top: 26px; }
.duty h2 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin-bottom: 14px; }
.duty h2 svg { color: var(--alert); }
.duty p { margin: 0 0 13px; color: #d6c1c1; font-size: 15px; }
.duty__tips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.duty__tips li {
  padding: 6px 13px; border: 1px solid var(--rule); border-radius: var(--r);
  font-size: 12.5px; color: var(--ink-2);
}

/* ===================================================== 8. COLOPHON */
.colophon { border-top: 1px solid var(--rule); background: var(--bg); padding: 52px 0 24px; }
.colophon__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 42px; }
.colophon__about p { margin: 14px 0 0; color: var(--ink-2); font-size: 14px; }
.colophon__col h2 {
  font-family: var(--text); font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  margin: 0 0 13px; padding-bottom: 9px; border-bottom: 1px solid var(--rule-soft);
}
.colophon__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.colophon__col a { color: var(--ink-2); font-size: 14px; }
.colophon__col a:hover { color: var(--jade); }
.colophon__foot {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-3);
}
.colophon__age { display: inline-flex; align-items: center; gap: 7px; color: var(--alert); font-weight: 700; font-size: 12px; }

/* ======================================================= 9. TO TOP */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r);
  background: var(--bg-raised); border: 1px solid var(--rule); color: var(--jade);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t), background var(--t), color var(--t);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--jade); color: var(--on-jade); }

/* ====================================================== 10. REVEAL */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ================================================== 11. RESPONSIVE */
@media (max-width: 1279px) {
  :root { --spine: 260px; }
  .records { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page { gap: 42px; }
  .ranked__lead { grid-template-columns: 150px 1fr; }
  .ranked__list { column-gap: 28px; }
}

@media (max-width: 1023px) {
  .records { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__plates { max-width: 520px; }

  .page { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page--doc .spine { display: none; }
  .spine { display: none; }
  .reader { padding-top: 22px; }

  /* the spine folds into a sticky bar */
  .spinebar {
    display: block; position: sticky; top: var(--mast); z-index: 110;
    background: var(--bg); border-bottom: 1px solid var(--rule);
  }
  .spinebar__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
  .spinebar__plate { width: 34px; height: 34px; border-radius: var(--r-tag); border: 1px solid var(--rule); object-fit: cover; }
  .spinebar__id { min-width: 0; flex: 1; display: block; }
  .spinebar__name {
    display: block; font-family: var(--display); font-size: 13.5px; font-weight: 700;
    letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .spinebar__bonus { display: block; font-size: 11.5px; color: var(--bonus); font-weight: 700; }
  .spinebar__toc {
    display: inline-flex; align-items: center; gap: 6px; background: transparent;
    border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink);
    padding: 9px 11px; font-size: 12.5px; font-weight: 600;
  }
  .spinebar__toc:hover { border-color: var(--jade); color: var(--jade); }
  .spinebar__progress { height: 2px; background: var(--rule-soft); }
  .spinebar__progress i {
    display: block; height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--jade-deep), var(--jade));
    transform: scaleX(0); transform-origin: left;
  }

  .sheet { position: fixed; inset: 0; z-index: 200; background: rgba(4, 9, 12, .74); }
  .sheet[hidden] { display: none; }
  .sheet__panel {
    position: absolute; inset: auto 0 0 0; max-height: 78vh; overflow-y: auto;
    background: var(--bg-low); border-top: 1px solid var(--rule);
    padding: 16px var(--gut) 28px; border-radius: var(--r) var(--r) 0 0;
  }
  .sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .sheet__head h2 { font-size: 15px; }
  .sheet__close { background: transparent; border: 0; color: var(--ink-2); padding: 6px; }
  .sheet .toc a { padding: 11px 0; font-size: 15px; }

  .mast-toggle { display: block; }
  .mastnav {
    position: fixed; inset: var(--mast) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px var(--gut) 18px; background: #0a1216; border-bottom: 1px solid var(--rule);
    box-shadow: 0 20px 34px rgba(0, 0, 0, .55);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }
  .mastnav.is-open { opacity: 1; visibility: visible; transform: none; }
  .mastnav a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--rule-soft); }
  .mastnav a::after { display: none; }
  .mastnav__cta { margin-top: 12px; text-align: center; }

  .colophon__grid { grid-template-columns: 1fr 1fr; }
  .colophon__about { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root { --gut: 16px; --mast: 56px; }
  body { font-size: 16px; }

  .hero { padding: 56px 0 60px; }
  main > .ghero { height: 420px; }
  .hero__copy h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  .hero__copy > p { font-size: 1rem; margin-bottom: 26px; }
  .hero__plates { gap: 10px; }
  .hero__plate figcaption { padding: 7px 9px; font-size: 11px; }

  .facts__inner { display: grid; grid-template-columns: 1fr; }
  .facts__item { padding: 11px 0; margin: 0; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .facts__item:last-child { border-bottom: 0; }

  .band { padding: 48px 0; }
  .records { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .record__body { padding: 11px; gap: 8px; }
  .record__name { font-size: 13.5px; }
  .record__go { font-size: 10.5px; }
  .record__bonus { font-size: 15px; }

  /* the rail bleeds to the screen edge so the snap feels native */
  .wrap--bleed { padding-inline: 0; }
  .rail { grid-auto-columns: 62vw; gap: 12px; padding-inline: var(--gut); }

  .ranked__lead { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .ranked__leadart { max-width: 140px; }
  .ranked__amount { font-size: 2rem; }
  .ranked__list { grid-template-rows: none; grid-auto-flow: row; }

  .reader h2 { margin-top: 44px; }
  .reader > p:first-of-type { font-size: 1.05rem; }
  .colophon__grid { grid-template-columns: 1fr; gap: 26px; }
  .to-top { right: 12px; bottom: 12px; }
}

/* ====================================================== 12. MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}