/* ==========================================================================
   More Mahjong — moremahjong.app

   Built to the Sketch comp in web/More.Mahjong.Web.sketch
   (page "AppStore - ScreenShots", groups "5 ・ Extra Large" + "… Copy").

   The page is one continuous scroll that SHIFTS COLOUR through five acts, with
   the hand-and-phone plate fixed dead centre and gameplay playing inside the
   phone. It ends on the blue "Free Online Mahjong" screen.

   Values taken from the comp, not eyeballed:
     pink   #ECB3C1     red  #D34242     blue #4A9ABF     cream #FFFAE3
     display type: SF Pro Black (comp: SFPro-Black 160 on a 2560 canvas = 6.25vw)
     header: wordmark x83 y111 424x58 · mark centred 132x140 · badge x2170 299x100
     hand plate: 920x994, screen rect x277–642 y121–875 → the % below
   ========================================================================== */

:root {
  /* comp palette */
  --pink:      #ECB3C1;
  --red:       #D34242;
  --blue:      #4A9ABF;
  --cream:     #FFFAE3;
  /* handbook pigments the acts also travel through */
  --gold:      #F5D45E;
  --gold-lt:   #FFF0BC;
  --green:     #1F6A38;
  --green-dk:  #164D29;
  --blue-dk:   #2F6178;
  --red-dk:    #A73129;   /* Theme redDark — Hong Kong's ink on the gold band, 4.64 */
  --ink-warm:  #262419;

  /* the live pair — JS interpolates these while scrolling; each act also sets
     them locally so the page is correct with JS off */
  --page: var(--pink);
  --ink:  var(--red);

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --font-serif:   ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif;

  --gutter: clamp(20px, 3.3vw, 56px);
  /* The comp's plate is 950x1026 on a 2560x1440 canvas — 37% of the width but
     71% of the HEIGHT, and the browser viewport is rarely 16:9. Sizing off width
     alone dropped the phone 19 points too low and opened a hole under the
     headline, so it takes whichever axis is tighter. */
  --hand-w: clamp(240px, min(44vw, 57vh), 620px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 6px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--page);
  padding: 0.75rem 1.25rem; border-radius: 0 0 12px 0;
  font-weight: 700; z-index: 200; text-decoration: none;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ backdrop
   The single colour field behind everything. JS drives it so the shift is a
   smooth interpolation rather than five hard steps. Only enabled once JS
   confirms it can run (html.blend) — otherwise each act paints itself. */
.backdrop {
  position: fixed; inset: 0; z-index: 0;
  background: var(--page);
  display: none;
}
.blend .backdrop { display: block; }
.blend .act { background: transparent; }

/* ---- what happens when the colour painter ISN'T driving (JS off, or it failed).
   The acts paint themselves, which is fine — but two fixed layers can't know
   which act they're over:
   1. the header would keep :root's red ink and land red-on-blue (1.67) on the
      end screen, so it takes the near-black that clears every act (min 2.36);
   2. the hand would hover over every act including the blue end screen, which
      has no phone in the comp — so it stops being fixed and simply sits in the
      hero and scrolls away. */
html:not(.blend) .site-header { color: var(--ink-warm); }
html:not(.blend) .stage { position: absolute; top: 0; height: 100svh; }

/* -------------------------------------------------------------------- stage
   The hand plate, fixed dead centre and anchored low so the headline clears
   it — the comp's composition. Purely decorative: the copy carries meaning. */
/* z-index 3: the plate sits ABOVE the copy, so the type passes behind the hand
   and the phone is never cut into. pointer-events:none keeps the text underneath
   selectable and its links clickable. */
.stage {
  position: fixed; inset: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.hand {
  position: relative;
  width: var(--hand-w);
  /* flush: the plate's bottom edge sits on the page's bottom edge */
  margin-bottom: 0;
  will-change: opacity;
}
.hand > img { display: block; width: 100%; height: auto; }

/* The phone screen. The plate is 920x994 with its black region at x277–642,
   y121–875 — but filling that whole region hides the phone's bezel, so the
   content is inset 18px (at native scale) inside it. Two bonuses: the bezel
   reads, and the inset rect's aspect becomes 0.4590 against the screenshots'
   0.4603, so `cover` now crops 0.29% instead of 5%.
   Percentages so it tracks any --hand-w. */
.hand-screen {
  position: absolute;
  left: 32.065%;
  top: 13.984%;
  width: 35.870%;
  height: 72.334%;
  overflow: hidden;
  /* Concentric with the phone's own screen corner. That corner is a squircle, not
     a circle — fitting its measured profile off the plate gives ~55px at the native
     920 width, so the 18px-inset content takes 55-18 = 37px. Expressed against
     --hand-w rather than as a % so the corners stay circular instead of going
     elliptical. 37/920 = 0.04022. */
  border-radius: calc(var(--hand-w) * 0.04022);
  background: #0B0B0B;
}
.hand-screen video,
.hero-still img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* the still stands in for the recording only when motion is unwelcome */
.hero-still { position: absolute; inset: 0; display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-still { display: block; }
}

/* ------------------------------------------------------------------- header
   Transparent, so the shifting colour runs under it. Wordmark left, mark
   centred as an overlay (claims no space, so it stays centred no matter how
   wide the side items get), CTA right. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: clamp(14px, 1.6vw, 26px) var(--gutter);
  color: var(--ink);
}
.site-header .row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.wordmark-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
/* aspect-ratio is REQUIRED on these. They are inline <svg> (so currentColor can
   follow the colour shift), and `width: auto` on an inline svg resolves to 100% of
   the container, not to the viewBox ratio — the mark was claiming 300px of width
   at 30px tall and colliding with the CTA on narrow screens. It looked correct
   because preserveAspectRatio centres the glyph inside the oversized box. */
.wordmark {
  height: clamp(15px, 1.35vw, 23px); width: auto; display: block;
  aspect-ratio: 294 / 38;
}
.mark-link {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}
/* The comp's mark is 132x140 on a 2560 canvas — its height is 5.5% of the canvas
   width, so it scales off vw. It's absolutely positioned, so growing it can't push
   the header's own row around. */
.mark {
  height: clamp(40px, 5vw, 78px); width: auto; display: block;
  aspect-ratio: 81 / 80;
}

/* ---------------------------------------------------------- App Store badge
   Apple's badge geometry is 119.664 x 40 and it must be used exactly as supplied
   — never redrawn, never recoloured (the Sketch comp recolours it; that part was
   not carried over). Apple also requires clear space around it of at least 1/10
   of its height, which the margin below provides.
   The artwork in assets/app-store-badge.svg is Apple's official black RGB badge,
   supplied by Lucas — used as-is, not recoloured the way the Sketch comp does. */
.badge-link {
  display: inline-flex; align-items: center;
  margin: 0.4em;                    /* Apple's clear-space rule */
  text-decoration: none;
}
.badge {
  display: block; width: auto;
  height: clamp(40px, 3.3vw, 52px);
  aspect-ratio: 119.664 / 40;
}
.badge-link--lg .badge { height: clamp(48px, 4.2vw, 64px); }

/* --------------------------------------------------------------------- acts */

.act {
  position: relative; z-index: 2;
  min-height: 100svh;
  /* Air under the logo before the copy starts. Pushing this down moves the headline
     toward the plate, so --hand-w came down 65vh → 62vh to keep the hero headline
     clear of it (measured: copy bottom 219, plate top 251). */
  padding: clamp(128px, 17vh, 200px) var(--gutter) clamp(48px, 7vh, 96px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: var(--page);
  color: var(--ink);
}
.act > * { max-width: min(1100px, 100%); }

/* the pair each act declares — also the no-JS fallback */
.act--pink  { --page: var(--pink);   --ink: var(--red); }
.act--gold  { --page: var(--gold);   --ink: var(--green-dk); }
/* cream, 4.33 — fine for this act's 74px headline (large text needs 3.0). Nothing
   small runs on the comp's red: at 11px nothing on-palette clears 4.5 (cream 4.33,
   gold-lt 3.99, paper 4.20; only pure white does, at 4.54), so the act is
   headline-only rather than carrying an off-palette colour. */
.act--red   { --page: var(--red);    --ink: var(--cream); }
.act--green { --page: var(--green);  --ink: var(--gold-lt); }
.act--blue  { --page: var(--blue);   --ink: var(--cream); }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.375rem, 6.25vw, 6.25rem);
  line-height: 0.97;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
/* the blue end screen's headline is the comp's pink on blue */
.act--blue h2 { color: var(--pink); }

.eyebrow {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 clamp(0.9rem, 1.6vh, 1.5rem);
}

/* Body copy sits at 24px+ wherever it runs on a low-contrast field, so the
   WCAG large-text threshold is the one that applies. See README. */
/* Body copy never drops below 24px. Two acts run cream on a saturated field —
   4.33 on red, 3.01 on blue — which clears WCAG's large-text threshold (3.0) but
   not the small-text one (4.5). At 17px it was failing on red; at 24px+ the large
   threshold is the one that applies and both pass. The comp's own body copy is
   large for the same reason. */
.say {
  font-size: clamp(1.5rem, 1.6vw, 1.75rem);
  line-height: 1.4;
  margin: clamp(1.1rem, 2.4vh, 2rem) auto 0;
  max-width: 34ch;
}
.act--blue .say { color: var(--cream); max-width: 30ch; }

/* the em dash stands alone as a separator between the two copy blocks */
.say-divider {
  color: var(--cream);
  font-size: clamp(1.5rem, 1.6vw, 1.75rem);
  line-height: 1;
  margin: clamp(0.75rem, 1.6vh, 1.25rem) auto;
  max-width: none;
}
/* the second block follows the divider, not the first paragraph */
.say-divider + .say { margin-top: clamp(0.75rem, 1.6vh, 1.25rem); }

/* One mono line under a headline. Kept to a single line so it clears the plate,
   which now draws over the copy. */
.mono-line {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(0.6875rem, 0.95vw, 0.9375rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: clamp(1rem, 2vh, 1.6rem) auto 0;
  max-width: 46ch;
}

.mono-list {
  list-style: none; margin: clamp(1.4rem, 3vh, 2.4rem) auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem clamp(0.9rem, 1.6vw, 1.75rem);
  max-width: 900px;
}
.mono-list li {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(0.6875rem, 0.9vw, 0.875rem);
  letter-spacing: 0.13em; text-transform: uppercase;
}
.mono-list li + li::before { content: "·"; margin-right: clamp(0.9rem, 1.6vw, 1.75rem); }

/* Tiya quotes the app, so this one line keeps the app's serif voice */
.quote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.125rem, 1.7vw, 1.75rem);
  line-height: 1.4;
  margin: clamp(1.1rem, 2.4vh, 2rem) auto 0;
  max-width: 26ch;
}

.act .badge-link--lg { margin-top: clamp(1.4rem, 3vh, 2.4rem); }

/* room for the hand: the copy lives in the upper part of each act */
.act-top { width: 100%; }
.act-spacer { flex: 1 1 auto; min-height: 34vh; }

/* ------------------------------------------------------------- locked footer
   Privacy / Terms and the Instagram link, pinned to the viewport and visible on
   every act. Both sit in near-black capsules for the same reason as the CTA: in
   the tinting --ink they'd measure 2.55 on pink, 4.33 on red and 3.01 on blue,
   all short of 4.5 for small text. Cream on near-black is 14.85 everywhere. */
.site-dock {
  position: fixed; z-index: 100;
  left: 0; right: 0; bottom: 0;
  padding: clamp(12px, 1.5vw, 22px) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  pointer-events: none;   /* only the capsules take clicks */
}
.dock-links, .dock-social { pointer-events: auto; }

.dock-links {
  display: flex; align-items: center; gap: clamp(0.9rem, 1.4vw, 1.4rem);
  background: var(--ink-warm); color: var(--cream);
  border-radius: 999px;
  padding: 0 clamp(0.9rem, 1.3vw, 1.2rem);
  min-height: 44px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
/* the links themselves carry the full 44x44 target, not just the capsule */
.dock-links a {
  color: var(--cream); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
}
.dock-links a:hover { text-decoration: underline; }

.dock-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--ink-warm); color: var(--cream);
}
.dock-social svg { width: 20px; height: 20px; aspect-ratio: 1 / 1; display: block; }

@media (max-width: 700px) {
  .dock-links { font-size: 0.625rem; letter-spacing: 0.1em; }
}

/* --------------------------------------------------------------- end screen
   The legal notes sit straight on the blue, centred under the button — no bar.
   They take the NEAR-BLACK ink rather than cream: cream on --blue is 3.01, which
   only satisfies large text, and these are 13px. Near-black is 4.94, and it's
   already the panel's voice (the CTA and the dock capsules are the same ink). */
.act--blue {
  justify-content: center;
  /* clearance for the locked dock */
  padding-bottom: clamp(96px, 12vh, 130px);
}
.endbar {
  /* kept tight so the whole end screen still fits one viewport */
  margin-top: clamp(18px, 2.4vh, 32px);
  color: var(--ink-warm);
  text-align: center;
}
.endbar a { color: var(--ink-warm); }

.footnotes {
  list-style: none; margin: 0 auto clamp(12px, 1.8vh, 20px); padding: 0;
  max-width: 62ch;
  font-size: 0.8125rem; line-height: 1.45; text-align: center;
}
.footnotes li { margin-bottom: 0.5rem; }
.copyright {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase; margin: 0;
}

/* ------------------------------------------------------------------- reveal */
.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------- narrow screens
   The hand shrinks and the copy needs the whole width. */
@media (max-width: 700px) {
  :root { --hand-w: clamp(200px, min(92vw, 58vh), 400px); }
  .act { padding-top: clamp(112px, 15vh, 150px); }
  .act-spacer { min-height: 26vh; }
  .site-header .wordmark { display: none; }   /* mark + CTA only */
  .mark-link { left: 0; transform: translateY(-50%); }

  /* A portrait plate in a portrait viewport is width-limited, so bottom-anchoring
     it left ~400px of dead field under the headline. Centred and nudged below the
     copy instead — the whole phone shows, which reads better on a phone anyway. */
  .stage { align-items: center; }
  .hand { margin-bottom: 0; margin-top: 13vh; }
}

/* ----------------------------------------------------------- legal subpages */

/* The legal pages are their own light surface — no acts, no colour shift, and
   NO colour in the type: every word is the near-black reading ink (14.85 on
   cream). The header inherits --ink, so it is repointed here too, otherwise it
   arrives red on cream. */
body.on-subpage { --page: var(--cream); --ink: var(--ink-warm); background: var(--cream); }

.subpage {
  background: var(--cream); color: var(--ink-warm);
  min-height: 100vh;
  /* bottom clearance for the locked dock */
  padding: clamp(96px, 12vh, 150px) var(--gutter) clamp(104px, 12vh, 140px);
}
.subpage .prose { max-width: 68ch; margin-inline: auto; }
.subpage h1 {
  font-size: clamp(2rem, 4.6vw, 3.25rem); color: var(--ink-warm);
  margin-bottom: 1.25rem;
}
.subpage h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem); color: var(--ink-warm);
  letter-spacing: -0.02em; margin: 2.5rem 0 0.75rem;
}
.subpage p, .subpage li { max-width: 66ch; }
.subpage p { margin: 0 0 1.1rem; }
.subpage ul { padding-left: 1.25rem; }
.subpage li { margin-bottom: 0.5rem; }
.subpage .eyebrow, .subpage .updated { color: var(--ink-warm); }
.subpage .updated {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.subpage-nav {
  max-width: 68ch; margin: clamp(40px, 6vh, 72px) auto 0;
  padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.12);
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.subpage-nav a { color: var(--ink-warm); text-decoration: none; }

/* support page: the Instagram DM is the primary action */
.support-actions { margin: clamp(20px, 3vh, 32px) 0; }
.support-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-warm); color: var(--cream);
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  padding: 0.9em 1.5em; border-radius: 999px;
  min-height: 48px; text-decoration: none;
}
.support-btn:hover { text-decoration: none; }
.subpage-nav a:hover { text-decoration: underline; }

/* ==========================================================================
   Content pages (the six style pages, the FAQ, the solitaire explainer).
   These carry the organic search weight, so they are prose-first and readable —
   and they never touch index.html. Body is the cream subpage surface with the
   near-black reading ink; each page opens on a colour band in its own style's
   verified (page, ink) pair.
   ========================================================================== */

.doc-hero {
  background: var(--band, var(--green));
  color: var(--band-ink, var(--gold-lt));
  padding: clamp(96px, 13vh, 168px) var(--gutter) clamp(40px, 6vh, 72px);
  text-align: center;
}
.doc-hero .inner { max-width: 900px; margin-inline: auto; }
.doc-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.02; letter-spacing: -0.032em;
  margin: 0 0 clamp(0.6rem, 1.4vh, 1rem); color: inherit;
}
.doc-hero .kicker {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 clamp(0.8rem, 1.6vh, 1.25rem);
}
.doc-hero .tagline {
  font-family: var(--font-mono); font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6;
  margin: 0 auto; max-width: 56ch;
}

/* Style pairs, each measured against the COMP palette (which is more saturated than
   the app's Theme — pink/blue-dk is 3.80 here, not the 4.57 it is on Theme's pink).
   Every pair below clears 4.5, because these bands carry a 13px kicker and tagline,
   not just the headline. Two needed the deeper shade to get there. */
.band--filipino    { --band: var(--pink);    --band-ink: var(--ink-warm); }  /* 8.74 */
.band--taiwanese   { --band: var(--cream);   --band-ink: var(--green);   }  /* 6.31 */
.band--american    { --band: var(--blue-dk); --band-ink: var(--cream);   }  /* 6.46 */
.band--hongkong    { --band: var(--gold);    --band-ink: var(--red-dk);  }  /* 4.64 */
.band--riichi      { --band: var(--red-dk);  --band-ink: var(--cream);   }  /* 6.43 */
.band--traditional { --band: var(--green);   --band-ink: var(--gold-lt); }  /* 5.80 */
.band--house       { --band: var(--gold);    --band-ink: var(--green-dk); }  /* 6.80 */

.doc {
  background: var(--cream); color: var(--ink-warm);
  padding: clamp(48px, 8vh, 88px) var(--gutter) clamp(104px, 12vh, 140px);
}
.doc .prose { max-width: 68ch; margin-inline: auto; }
.doc h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  letter-spacing: -0.02em; color: var(--ink-warm);
  margin: clamp(2rem, 4vh, 3rem) 0 0.75rem;
}
.doc h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  letter-spacing: -0.01em; color: var(--ink-warm);
  margin: 1.75rem 0 0.5rem;
}
.doc p { margin: 0 0 1.1rem; max-width: 68ch; font-size: 1.0625rem; line-height: 1.62; }
.doc ul { padding-left: 1.25rem; margin: 0 0 1.1rem; }
.doc li { margin-bottom: 0.55rem; line-height: 1.55; }
.doc strong { font-weight: 700; }

/* a compact facts table — good for humans, and answer engines read tables well */
.facts-table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.9375rem; }
.facts-table th, .facts-table td {
  text-align: left; padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.12); vertical-align: top;
}
.facts-table th {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  width: 11rem; white-space: nowrap;
}

/* cross-links between the style pages — the internal linking that makes these rank */
.doc-nav {
  max-width: 68ch; margin: clamp(40px, 6vh, 72px) auto 0;
  padding-top: clamp(20px, 3vh, 28px); border-top: 1px solid rgba(0,0,0,0.12);
}
.doc-nav p {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.9rem;
}
.doc-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.doc-nav a { color: var(--ink-warm); text-decoration: underline; text-underline-offset: 3px; }

.doc .badge-link { margin-top: clamp(1.5rem, 3vh, 2.25rem); }

/* the homepage's six style names become links — no visual change beyond hover */
.mono-list a { color: inherit; text-decoration: none; }
.mono-list a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* a discreet internal-link line at the foot of the end screen */
.endbar-nav {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 0.9rem;
}
.endbar-nav a { color: var(--ink-warm); text-decoration: none; }
.endbar-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }