/* Blind Scribes — the public site. "Vellum": the game's own illuminated-manuscript look.
   Tokens follow UI_DIRECTION.md (Direction A). Night vellum is the dark theme, day vellum the light. */

@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/alegreya.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/alegreya-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/alegreya-sc-500.woff2") format("woff2"); }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/alegreya-sc-700.woff2") format("woff2"); }

:root {
  /* night vellum (also the no-JS default) */
  --bg: #16110c;
  --surface: #211a12;
  --well: #0f0b07;
  --rule: #3d3224;
  --rule-strong: #6b5a42;
  --ink: #eadfc8;
  --ink-dim: #ad9c7f;
  --rubric: #e8806a;
  --rubric-deep: #a3321f;
  --gilt: #ddb256;
  --lapis: #94b4ea;
  --verd: #86c6a6;
  --on-rubric: #fff8ea;
  --shadow: rgba(0, 0, 0, 0.55);
  --hero-veil: linear-gradient(180deg, rgba(22,17,12,0.15) 0%, rgba(22,17,12,0.35) 45%, rgba(22,17,12,0.92) 82%, #16110c 100%);

  --serif: "Alegreya", "Iowan Old Style", Palatino, "Book Antiqua", Georgia, serif;
  --sc: "Alegreya SC", "Alegreya", Palatino, Georgia, serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* the classic scale: 14 16 18 21 24 30 36 48 60 72 */
  --t-sm: 0.875rem;
  --t-base: 1.125rem;
  --t-md: 1.3125rem;
  --t-lg: 1.5rem;
  --t-xl: 2.25rem;
  --t-2xl: 3rem;

  --measure: 38rem;
  --gutter: 1rem;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #ede3cc; --surface: #f7f1e3; --well: #e4d7ba; --rule: #c4b28c; --rule-strong: #8f7b57;
    --ink: #2b2118; --ink-dim: #66543f; --rubric: #a0301f; --rubric-deep: #a0301f; --gilt: #735208;
    --lapis: #1e4a8a; --verd: #2c6549; --on-rubric: #fffbf2; --shadow: rgba(60, 40, 10, 0.18);
    color-scheme: light;
  }
}
:root[data-theme="day"] {
  --bg: #ede3cc; --surface: #f7f1e3; --well: #e4d7ba; --rule: #c4b28c; --rule-strong: #8f7b57;
  --ink: #2b2118; --ink-dim: #66543f; --rubric: #a0301f; --rubric-deep: #a0301f; --gilt: #735208;
  --lapis: #1e4a8a; --verd: #2c6549; --on-rubric: #fffbf2; --shadow: rgba(60, 40, 10, 0.18);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* a faint ruling, like pricked and ruled vellum */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--gilt) 7%, transparent) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--rule) 22%, transparent) 27px 28px);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lapis); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--lapis); outline-offset: 3px; border-radius: 2px; }
code, kbd { font-family: var(--mono); font-size: 0.86em; color: var(--gilt); background: color-mix(in srgb, var(--well) 70%, transparent); padding: 0.05em 0.3em; border-radius: 3px; white-space: nowrap; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--sc); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: 0.01em; }
em { font-style: italic; }
strong { font-weight: 700; color: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--rubric-deep); color: var(--on-rubric); padding: 0.5rem 1rem; }
.skip:focus { top: 0.75rem; }

/* ------------------------------------------------------------------ header */
.masthead {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  max-width: 76rem; margin: 0 auto; padding: 0.5rem var(--gutter);
  display: flex; align-items: center; gap: 0.75rem;
}
.wordmark { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; font-family: var(--sc); font-weight: 700; font-size: var(--t-md); white-space: nowrap; }
.wordmark img { width: 28px; height: 28px; border-radius: 4px; }
.nav-wide { display: none; gap: 1.1rem; margin-left: auto; font-family: var(--sc); font-weight: 500; font-size: 1rem; }
.nav-wide a { color: var(--ink-dim); text-decoration: none; }
.nav-wide a:hover { color: var(--ink); }
.mast-actions { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }
.nav-wide + .mast-actions { margin-left: 0; }

.theme-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.6rem;
  font: 500 0.95rem var(--sc); color: var(--ink-dim); background: none; border: 1px solid var(--rule); border-radius: 4px; cursor: pointer;
}
.theme-btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .sun { display: none; }
:root[data-theme="day"] .theme-btn .sun { display: block; }
:root[data-theme="day"] .theme-btn .moon { display: none; }
.theme-label { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.55rem 1.2rem;
  font: 700 1.0625rem var(--sc); letter-spacing: 0.02em; text-decoration: none; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent;
}
.btn-play { background: var(--rubric-deep); color: var(--on-rubric); border-color: color-mix(in srgb, var(--gilt) 55%, var(--rubric-deep)); box-shadow: inset 0 0 0 1px rgba(255,240,200,0.15); }
.btn-play:hover { background: color-mix(in srgb, var(--rubric-deep) 85%, #000); }
.btn-quiet { color: var(--ink); background: color-mix(in srgb, var(--surface) 80%, transparent); border-color: var(--rule-strong); }
.btn-quiet:hover { border-color: var(--gilt); }
.btn-sm { min-height: 40px; padding: 0.35rem 0.85rem; font-size: 1rem; }

.menu { position: relative; }
.menu > summary { list-style: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.7rem; border: 1px solid var(--rule); border-radius: 4px; font: 500 0.95rem var(--sc); color: var(--ink-dim); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { color: var(--ink); border-color: var(--rule-strong); }
.menu nav { position: absolute; right: 0; top: calc(100% + 0.5rem); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 0.5rem 0; min-width: 14rem; box-shadow: 0 12px 32px var(--shadow); }
.menu nav a { display: block; padding: 0.6rem 1.1rem; color: var(--ink); text-decoration: none; font-family: var(--sc); font-weight: 500; }
.menu nav a:hover { background: var(--well); }

@media (min-width: 64rem) {
  .nav-wide { display: flex; }
  .menu { display: none; }
  .theme-label { display: inline; }
}
@media (max-width: 26rem) { .wordmark span { font-size: 1.1rem; } }

/* ------------------------------------------------------------------ hero */
.hero { border-bottom: 1px solid color-mix(in srgb, var(--gilt) 60%, transparent); position: relative; isolation: isolate; min-height: min(92vh, 56rem); display: grid; align-items: end; overflow: hidden; background: #0f0b07; }
.hero-art { position: absolute; inset: 0; z-index: -2; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,11,7,0.05) 0%, rgba(15,11,7,0.25) 40%, rgba(15,11,7,0.86) 75%, rgba(15,11,7,0.94) 100%); }
.hero-text { max-width: 76rem; width: 100%; margin: 0 auto; padding: 8rem var(--gutter) 3rem; color: #f3ead6; }
.hero h1 {
  font-size: clamp(3.4rem, 13vw, 8.5rem); line-height: 0.88; letter-spacing: -0.01em; color: #f0d58f;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
  margin-bottom: 1.25rem;
}
.hero h1 .initial { color: #f4a48e; }
.hero-lede { font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.45; max-width: 34rem; margin: 0 0 1.75rem; text-shadow: 0 1px 12px rgba(0,0,0,0.8); }
.hero-lede em { color: #f0d58f; font-style: italic; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.hero .btn-quiet { color: #f3ead6; background: rgba(15,11,7,0.55); border-color: rgba(221,178,86,0.55); }
.hero-status { font-size: 1rem; color: #d9c9a8; margin: 0; max-width: 34rem; }
.hero-status .dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #86c6a6; margin-right: 0.45rem; vertical-align: 0.08em; box-shadow: 0 0 0 3px rgba(134,198,166,0.2); }
.hero-credit { position: absolute; right: var(--gutter); bottom: 0.75rem; font-size: 0.8rem; color: rgba(243,234,214,0.55); font-style: italic; margin: 0; display: none; }
@media (min-width: 48rem) {
  .hero-art img { object-position: 50% 30%; }
  .hero-credit { display: block; }
}

/* ------------------------------------------------------------------ folios (sections) */
main { display: block; }
.folio { max-width: 76rem; margin: 0 auto; padding: 4.5rem var(--gutter) 2rem; }
.folio + .folio { border-top: 1px solid var(--rule); }
.folio-head { max-width: var(--measure); margin-bottom: 2.25rem; }
.folio-head h2 { font-size: clamp(2.25rem, 6vw, 3.75rem); color: var(--rubric); margin-bottom: 0.75rem; }
.folio-head .kicker { font-style: italic; color: var(--ink-dim); font-size: var(--t-md); line-height: 1.45; margin: 0; }

/* the illuminated initial: once per folio */
.incipit::first-letter {
  float: left; font-family: var(--sc); font-weight: 700; font-size: 4.1em; line-height: 0.8;
  padding: 0.12em 0.14em 0.06em; margin: 0.06em 0.14em 0 0;
  color: var(--gilt); background: var(--well); border: 1px solid var(--gilt);
  box-shadow: inset 0 0 0 3px var(--well), inset 0 0 0 4px color-mix(in srgb, var(--rubric) 70%, transparent);
}
.prose { max-width: var(--measure); }
.prose p, .entry-text p { hyphens: auto; }

/* an entry: prose in the column, commands as glosses in the margin */
.entry { display: grid; gap: 0.25rem 3rem; padding: 1.75rem 0; border-top: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); }
.entry:first-of-type { border-top: 0; }
.entry h3 { font-size: var(--t-lg); color: var(--ink); margin-bottom: 0.6rem; }
.entry-text { max-width: var(--measure); }
.entry-text > :last-child { margin-bottom: 0; }
.gloss { font-size: 0.95rem; line-height: 1.5; color: var(--ink-dim); border-left: 2px solid var(--rubric); padding: 0.1rem 0 0.1rem 0.85rem; align-self: start; max-width: var(--measure); }
.gloss p { margin: 0 0 0.35rem; }
.gloss .gloss-title { font-family: var(--sc); font-weight: 500; color: var(--rubric); margin-bottom: 0.25rem; }
.gloss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.gloss li code { white-space: nowrap; }
@media (min-width: 62rem) {
  .entry { grid-template-columns: minmax(0, var(--measure)) minmax(12rem, 17rem); }
  .gloss { margin-top: 2.6rem; }
  .gloss ul { display: block; }
  .gloss li { margin-bottom: 0.3rem; }
}

.facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.6rem; padding: 1rem 0; margin: 1.5rem 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); list-style: none; max-width: var(--measure); }
.facts li { font-family: var(--sc); font-weight: 500; font-size: 1.05rem; color: var(--ink-dim); }
.facts b { font-family: var(--sc); font-weight: 700; color: var(--gilt); font-size: 1.25rem; }

blockquote.vision { margin: 2rem 0 0; padding: 0 0 0 1.25rem; border-left: 3px double var(--gilt); max-width: var(--measure); }
blockquote.vision p { font-style: italic; font-size: var(--t-md); line-height: 1.5; margin-bottom: 0.5rem; }
blockquote.vision footer { color: var(--ink-dim); font-size: 0.95rem; }

/* framed miniatures: a gilt hairline and a mat */
.mini { margin: 0; }
.mini .frame { padding: 5px; background: var(--well); border: 1px solid var(--gilt); box-shadow: 0 10px 28px var(--shadow); }
.mini .frame img { width: 100%; }
.mini figcaption { font-size: 0.95rem; color: var(--ink-dim); margin-top: 0.6rem; font-style: italic; line-height: 1.45; }

.inline-shot { margin: 1.25rem 0 0.25rem; max-width: var(--measure); }

/* ------------------------------------------------------------------ the heavy-blow demo */
.demo { margin: 1.5rem 0 0.5rem; max-width: var(--measure); background: var(--well); border: 1px solid var(--rule-strong); border-radius: 4px; overflow: hidden; }
.demo-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule); background: var(--surface); }
.demo-bar img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rubric); }
.demo-foe { font-family: var(--sc); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.demo-foe small { display: block; font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--ink-dim); font-size: 0.85rem; }
.demo-range { margin-left: auto; font-family: var(--sc); font-size: 0.85rem; color: var(--ink-dim); display: flex; gap: 0.6rem; }
.demo-range .on { color: var(--rubric); text-decoration: underline; text-underline-offset: 0.3em; }
.demo-log { padding: 0.9rem 1rem 0.4rem; font-size: 1.0625rem; }
.log-line { margin: 0 0 0.5rem; }
.log-line.foe { color: var(--rubric); }
.log-line.good { color: var(--verd); }
.log-line.bad { color: var(--rubric); font-weight: 700; }
.log-line.hint { color: var(--ink-dim); font-style: italic; font-size: 0.98rem; }
.demo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0.75rem 0.85rem; padding: 0.6rem 0.75rem; border: 1px solid var(--rubric); border-radius: 4px; background: color-mix(in srgb, var(--rubric) 10%, var(--surface)); }
.demo-strip .heavy { font-family: var(--sc); font-weight: 700; color: var(--rubric); font-size: 1.15rem; margin-right: auto; }
.demo-strip button, .demo-again { min-height: 44px; padding: 0 0.9rem; font: 700 1rem var(--sc); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 4px; cursor: pointer; }
.demo-strip button:hover, .demo-again:hover { border-color: var(--gilt); }
.demo-again { margin: 0 0.75rem 0.85rem; }
.demo-note { font-size: 0.9rem; color: var(--ink-dim); font-style: italic; margin-top: 0.5rem; max-width: var(--measure); }

/* ------------------------------------------------------------------ classes and races */
.classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; margin: 0; padding: 0; list-style: none; }
.class h3 { font-size: var(--t-lg); color: var(--ink); margin: 0.85rem 0 0.35rem; }
.class p { font-size: 1rem; line-height: 1.55; margin: 0 0 0.4rem; color: var(--ink); }
.class .branch { color: var(--ink-dim); font-size: 0.95rem; }
@media (min-width: 48rem) { .classes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 2rem; } }

.races-head { margin-top: 4rem; }
.races { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem 2rem; }
.race { display: grid; grid-template-columns: 76px 1fr; gap: 1rem; align-items: center; }
.race img { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; border: 1px solid var(--gilt); box-shadow: 0 0 0 3px var(--well), 0 0 0 4px var(--rule-strong); }
.race h3 { font-size: 1.25rem; }
.race p { margin: 0.1rem 0 0; font-size: 0.98rem; line-height: 1.45; color: var(--ink-dim); }
.race p b { color: var(--ink); font-weight: 700; }
@media (min-width: 40rem) { .races { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .races { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aside-note { font-size: 0.95rem; color: var(--ink-dim); font-style: italic; max-width: var(--measure); margin-top: 1.5rem; }

/* ------------------------------------------------------------------ the world */
.hour-note { font-style: italic; color: var(--ink-dim); margin: -1rem 0 2rem; max-width: var(--measure); }
.towns { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.75rem 2.25rem; }
@media (min-width: 52rem) { .towns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.town .frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.town .frame img { width: 100%; height: 100%; object-fit: cover; }
.town .night { display: none; }
:root[data-theme="night"] .town .day, :root:not([data-theme]) .town .day { display: none; }
:root[data-theme="night"] .town .night, :root:not([data-theme]) .town .night { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .town .day { display: block; }
  :root:not([data-theme]) .town .night { display: none; }
}
.town-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.85rem; margin: 1rem 0 0.4rem; }
.town h3 { font-size: 1.75rem; color: var(--ink); }
.town .band { font-family: var(--sc); font-weight: 500; color: var(--rubric); font-size: 1.05rem; }
.town blockquote { margin: 0 0 0.6rem; font-style: italic; color: var(--ink); line-height: 1.55; }
.town blockquote::before { content: "\201C"; color: var(--gilt); }
.town blockquote::after { content: "\201D"; color: var(--gilt); }
.town p { font-size: 1rem; color: var(--ink-dim); margin: 0; line-height: 1.55; }

.gazetteer-head { margin-top: 4.5rem; }
.gazetteer { display: grid; gap: 1.75rem 2.5rem; margin-top: 1.5rem; }
@media (min-width: 40rem) { .gazetteer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .gazetteer { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gazetteer h4 { font-size: 1.15rem; color: var(--rubric); border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem; margin-bottom: 0.5rem; }
.gazetteer ul { list-style: none; padding: 0; margin: 0; }
.gazetteer li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.18rem 0; font-size: 1rem; border-bottom: 1px dotted color-mix(in srgb, var(--rule) 80%, transparent); }
.gazetteer li span:last-child { color: var(--ink-dim); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; font-size: 0.92rem; }

/* ------------------------------------------------------------------ screens and paintings */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; list-style: none; margin: 0; padding: 0; align-items: start; }
@media (min-width: 52rem) { .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.shots a, .bosses a { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.paint-head { margin-top: 4.5rem; }
.bosses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .bosses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .bosses { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 1.75rem; } }
.bosses figcaption { font-style: normal; }
.bosses figcaption b { display: block; font-family: var(--sc); font-weight: 700; color: var(--ink); font-size: 1.05rem; line-height: 1.25; }
.wide-plate { margin-top: 3rem; }

dialog.viewer { padding: 0; border: 1px solid var(--gilt); background: var(--well); color: var(--ink); max-width: min(92vw, 60rem); max-height: 92vh; }
dialog.viewer::backdrop { background: rgba(10, 7, 4, 0.82); }
dialog.viewer figure { margin: 0; padding: 0.5rem; }
dialog.viewer img { max-height: calc(92vh - 6rem); width: auto; margin: 0 auto; }
dialog.viewer figcaption { padding: 0.6rem 0.25rem 0.2rem; font-family: var(--sc); font-weight: 500; }
.viewer-close { position: absolute; top: 0.4rem; right: 0.4rem; min-width: 44px; min-height: 44px; font: 700 1.4rem var(--serif); color: var(--ink); background: color-mix(in srgb, var(--well) 80%, transparent); border: 1px solid var(--rule-strong); border-radius: 4px; cursor: pointer; }

/* ------------------------------------------------------------------ how to play */
.play-folio { position: relative; isolation: isolate; }
.play-plate { margin: 0 0 2.5rem; }
.play-plate .frame { aspect-ratio: 16 / 7; overflow: hidden; }
.play-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.steps { counter-reset: step; list-style: none; margin: 0 0 2rem; padding: 0; max-width: var(--measure); }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.25rem 3.25rem; }
.steps li::before {
  content: counter(step, lower-roman); position: absolute; left: 0; top: 0.05rem; width: 2.25rem; text-align: center;
  font-family: var(--sc); font-weight: 700; font-size: 1.15rem; color: var(--rubric); border-bottom: 1px solid var(--gilt);
}
.steps h3 { font-size: 1.3rem; margin-bottom: 0.25rem; }
.steps p { margin: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.6rem 0 0; }
.notice { max-width: var(--measure); border: 1px solid var(--rule-strong); border-left: 4px solid var(--gilt); background: color-mix(in srgb, var(--surface) 85%, transparent); padding: 1rem 1.2rem; margin: 2rem 0 0; border-radius: 0 4px 4px 0; }
.notice h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.notice p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ what's new */
.releases { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.release { display: grid; gap: 0.2rem 2rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.release:first-child { border-top: 0; padding-top: 0; }
.release .ver { font-family: var(--sc); font-weight: 700; color: var(--gilt); font-size: 1.15rem; font-variant-numeric: lining-nums; }
.release h3 { font-size: 1.6rem; color: var(--ink); margin-bottom: 0.4rem; }
.release p { margin: 0 0 0.5rem; }
.release .tag { font-size: 0.95rem; color: var(--ink-dim); font-style: italic; }
@media (min-width: 48rem) { .release { grid-template-columns: 7rem 1fr; } }
.ahead { margin-top: 3rem; }

/* ------------------------------------------------------------------ faq */
.faq { max-width: 48rem; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.25rem 1rem 0; position: relative; font-family: var(--sc); font-weight: 700; font-size: 1.2rem; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.85rem; font-family: var(--serif); font-size: 1.5rem; color: var(--rubric); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 1rem; max-width: var(--measure); }

/* ------------------------------------------------------------------ conduct */
.two-col { display: grid; gap: 2rem 3rem; }
@media (min-width: 56rem) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col h3 { font-size: 1.4rem; color: var(--ink); margin-bottom: 0.6rem; }
.two-col ul { padding-left: 1.1rem; margin: 0; }
.two-col li { margin-bottom: 0.55rem; }
.two-col li::marker { color: var(--rubric); }

/* ------------------------------------------------------------------ footer */
.colophon { border-top: 1px solid var(--rule-strong); margin-top: 3rem; background: var(--well); }
.colophon-inner { max-width: 76rem; margin: 0 auto; padding: 2.5rem var(--gutter) 3rem; display: grid; gap: 1.5rem 3rem; font-size: 0.98rem; color: var(--ink-dim); }
@media (min-width: 56rem) { .colophon-inner { grid-template-columns: 1.4fr 1fr; } }
.colophon h2 { font-size: 1.5rem; color: var(--gilt); margin-bottom: 0.6rem; }
.colophon nav ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
.colophon nav li { margin-bottom: 0.4rem; }
.colophon nav a { color: var(--ink); text-decoration: none; font-family: var(--sc); font-weight: 500; }
.colophon nav a:hover { text-decoration: underline; }
.colophon p { margin: 0 0 0.6rem; }

/* ------------------------------------------------------------------ marginalia and other small mischief */
.scribble { display: none; }
@media (min-width: 62rem) and (hover: hover) {
  .scribble {
    display: block; margin: 1.4rem 0 0; max-width: 14rem;
    font-family: var(--serif); font-style: italic; font-size: 0.92rem; line-height: 1.35;
    color: color-mix(in srgb, var(--rubric) 75%, var(--ink-dim));
    transform: rotate(-2.5deg); transform-origin: left top;
    opacity: 0; transition: opacity 400ms ease 250ms;
  }
  .scribble::before { content: "\261E\00a0"; color: var(--gilt); font-style: normal; }
  .entry:hover .scribble, .entry:focus-within .scribble { opacity: 0.9; }
}
.explicit { font-style: italic; font-size: 0.92rem; margin-top: 1.2rem !important; max-width: 34rem; }

.toast {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 60; transform: translateX(-50%);
  width: min(34rem, calc(100vw - 2rem)); padding: 0.85rem 1.1rem;
  background: var(--well); color: var(--ink); border: 1px solid var(--gilt); border-radius: 4px;
  box-shadow: 0 16px 40px var(--shadow); font-size: 1rem; line-height: 1.5;
  opacity: 0; pointer-events: none; transition: opacity 250ms ease;
}
.toast.show { opacity: 1; }
.toast:empty { display: none; }
.toast .t-title { font-family: var(--sc); font-weight: 700; color: var(--rubric); display: block; }
.toast .t-cmd { font-family: var(--mono); color: var(--gilt); font-size: 0.9rem; display: block; margin-bottom: 0.25rem; }

/* ------------------------------------------------------------------ second pass: fill the wide folios */
.folio-head { max-width: 46rem; }
.folio-head .kicker { max-width: var(--measure); }
.what-grid { display: grid; gap: 2rem 4rem; }
.what-side .facts { margin-top: 0; }
@media (min-width: 62rem) {
  .what-grid { grid-template-columns: minmax(0, var(--measure)) minmax(14rem, 22rem); align-items: start; }
  .what-side { position: sticky; top: 6rem; }
  .what-side .facts { flex-direction: column; gap: 0.5rem; padding: 1.25rem 0; }
  .what-side .facts li { display: flex; align-items: baseline; gap: 0.6rem; }
  .what-side .facts b { font-size: 1.9rem; line-height: 1; min-width: 4.2rem; text-align: right; }
}
.play-grid { display: grid; gap: 0 4rem; }
@media (min-width: 62rem) {
  .play-grid { grid-template-columns: minmax(0, var(--measure)) minmax(16rem, 1fr); align-items: start; }
  .play-grid .notice { margin-top: 0; }
}