/* grimwyrm.com (gdd-mvp.md section 7). The game's grimdark painted look:
   a dark ground, black leather and gold leaf, Cinzel lettering. One
   deliberate dark theme; everything is served from this site. */

@font-face {
  font-family: "Cinzel";
  src: url("/fonts/cinzel-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("/fonts/cinzel-black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ground: #0e0c0a;
  --ground-2: #15120f;
  --panel: #1c1813;
  --line: #3a3027;
  --ink: #ece2cf;
  --ink-dim: #b2a58e;
  --gold: #d0ab62;
  --gold-deep: #8d7041;
  --blood: #b3261b;
  --parchment: #e4d4b2;
  --parchment-ink: #2b1d12;
  --display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 66ch;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--parchment); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: 0.02em; }
h3 { font-size: 1.2rem; letter-spacing: 0.04em; }
p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9em;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 12px;
  z-index: 10;
  background: var(--panel);
  padding: 8px 12px;
}

/* ---- masthead ---- */

.masthead {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 20px var(--gutter);
}
.wordmark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.masthead nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.masthead nav a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.masthead nav a.nav-play {
  color: var(--parchment-ink);
  background: linear-gradient(180deg, #e7c77d, #b58c45);
  border-radius: 3px;
  border-bottom: 0;
  padding: 4px 12px;
}
.masthead nav a.nav-play:hover, .masthead nav a.nav-play[aria-current="page"] { color: var(--parchment-ink); filter: brightness(1.08); }
/* On the home page the hero's button is the one gold button in view. */
.masthead nav a.nav-play.is-quiet {
  color: var(--gold);
  background: none;
  border: 1px solid var(--gold-deep);
  padding: 3px 11px;
}
.masthead nav a.nav-play.is-quiet:hover { color: var(--parchment); border-color: var(--gold); filter: none; }

/* ---- shared by the pages ---- */

.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink); max-width: 34em; }
.live { color: var(--ink-dim); font-size: 0.95rem; letter-spacing: 0.02em; }
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 0;
}
.cta-more {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.note {
  margin-top: 36px;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
  color: var(--ink-dim);
}

/* ---- bands ---- */

.band { padding-block: clamp(56px, 7vw, 96px); }
.band + .band { border-top: 1px solid var(--line); }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 760px; }
.band p { max-width: var(--measure); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head p:last-child { margin-bottom: 0; color: var(--ink-dim); }
.section-head .h-line { display: block; }

/* ---- home: the reel, three moves and their clips ----
   The current move's headline and line on the left; its clip on the
   right, its caption under the clip, then the three moves as steps
   (js/moves.js). The panels share one grid cell, so the copy never
   changes height as the moves turn. With reduced motion or no script the
   moves become a still list (further down) and no clip is fetched. */

.reel {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(76vh, 720px);
  padding: clamp(96px, 12vh, 120px) var(--gutter) clamp(32px, 4vh, 48px);
  background:
    radial-gradient(48% 62% at 70% 48%, rgba(208, 171, 98, 0.13), rgba(208, 171, 98, 0) 72%),
    radial-gradient(130% 80% at 50% 0%, #1b1612 0%, var(--ground) 62%);
  border-bottom: 1px solid var(--line);
}
.reel-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.reel-id {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1.6em;
}
.reel-id-name { color: var(--gold); }

.moves { display: grid; }
.move {
  grid-area: 1 / 1;
  align-self: end;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.move.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s, visibility 0s;
}
.move-line {
  font-weight: 900;
  font-size: clamp(2.1rem, 3.5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.move-line span { display: block; color: var(--gold); }
.move-sub {
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 31em;
  margin: 0;
}
.move-still { display: none; }

.reel-cta { margin-top: clamp(28px, 4vh, 40px); }
.reel-status { color: var(--ink-dim); font-size: 0.92rem; margin: 1em 0 0; }

.reel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  border: 1px solid var(--gold-deep);
  box-shadow:
    0 0 0 6px rgba(14, 12, 10, 0.92),
    0 0 0 7px var(--line),
    0 34px 70px rgba(0, 0, 0, 0.65);
}
.reel-clip {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.reel-clip.is-current { opacity: 1; }

/* Whose turn is on screen, above the clip, so it never covers the table. */
.reel-cues { display: grid; margin: 0 0 12px 2px; }
.reel-cue {
  grid-area: 1 / 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.reel-cue::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.reel-cue.is-on { opacity: 1; }

/* The caption sits against the picture it proves. */
.reel-captions { display: grid; margin-top: 20px; }
.reel-caption {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: 0.03em;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.reel-caption.is-current { opacity: 1; visibility: visible; transition: opacity 0.5s ease 0.15s, visibility 0s; }
/* Cinzel's 1 reads as an I: numbers that prove something are in Inter. */
.reel-caption b, .move-still b {
  font-family: var(--body);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold);
  font-size: 1.15em;
}

.reel-bar {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 18px;
  visibility: hidden;
}
.reel.is-turning .reel-bar { visibility: visible; }
.reel-steps {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.reel-step {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 0 4px;
  border: 0;
  background: none;
  color: var(--ink-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.reel-track {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.reel-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform: scaleX(0);
  transform-origin: left center;
}
.reel-label {
  display: block;
  margin-top: 8px;
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--ink-dim);
}
.reel-step:hover .reel-label { color: var(--parchment); }
.reel-step[aria-current="step"] .reel-label { color: var(--gold); }
.reel-pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.reel-pause:hover { border-color: var(--gold-deep); color: var(--gold); }
.reel-pause-icon {
  width: 10px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.reel-pause[data-paused] .reel-pause-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

/* Phones and narrow windows: the claim, then its proof, then the button. */
@media (max-width: 900px) {
  .reel { min-height: 0; padding-top: 140px; }
  .reel-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .reel-copy { display: contents; }
  .reel-id { order: 1; margin-bottom: 1em; }
  .moves { order: 2; margin-bottom: 26px; }
  .reel-media { order: 3; }
  .reel-cta { order: 4; }
  .reel-captions { margin-top: 16px; }
  .reel-bar { margin-top: 14px; }
}
@media (max-width: 520px) {
  /* One line of masthead on the home page: the section links are a scroll
     away, and News is in the footer. */
  .masthead.is-home { flex-wrap: nowrap; gap: 12px; }
  .masthead.is-home .wordmark { font-size: 1.12rem; }
  .masthead.is-home nav { flex-wrap: nowrap; gap: 16px; }
  .masthead.is-home nav a { font-size: 0.78rem; letter-spacing: 0.12em; }
  .masthead.is-home nav a[href^="/#"], .masthead.is-home nav a[href="/news/"] { display: none; }
  .reel { padding-top: 92px; }
  /* The wordmark above already says Grimwyrm; the H1 keeps it for search
     and screen readers. */
  .reel-id-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .reel-id { font-size: 0.72rem; letter-spacing: 0.16em; }
  .move-line { font-size: 1.85rem; }
  .move-sub { font-size: 1rem; }
  .reel-cue { font-size: 0.66rem; letter-spacing: 0.14em; }
  .reel-caption { font-size: 1.15rem; }
  .reel-steps { gap: 10px; }
  .reel-label { font-size: 0.85rem; }
}
@media (max-width: 374px) {
  /* Too narrow for one line after all: let it wrap, and clear it. */
  .masthead.is-home, .masthead.is-home nav { flex-wrap: wrap; }
  .reel { padding-top: 124px; }
}

/* The still list: with reduced motion, or with no script to turn the
   moves, all three stand side by side, each over its clip's proof frame. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .reel { min-height: 0; }
  .reel-inner { grid-template-columns: minmax(0, 1fr); max-width: 1180px; gap: 0; }
  .reel-copy { display: block; }
  .reel-media { display: none; }
  .moves { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-bottom: 0; }
  .move, .move.is-current {
    grid-area: auto;
    align-self: start;
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .move-line { font-size: clamp(1.35rem, 2vw, 1.7rem); }
  .move-sub { font-size: 1rem; color: var(--ink-dim); }
  .move-still { display: block; order: -1; margin: 0 0 20px; }
  .move-still img { border-radius: 6px; border: 1px solid var(--line); }
  .move-still figcaption {
    margin-top: 10px;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: 0.03em;
  }
}
/* On a phone the still list puts the button straight after the first
   move, not under all three. */
@media (prefers-reduced-motion: reduce) and (max-width: 900px), (scripting: none) and (max-width: 900px) {
  .reel-copy { display: flex; flex-direction: column; }
  .moves { display: contents; }
  .reel-id { order: 0; }
  #move-tax { order: 1; }
  .reel-cta { order: 2; margin: 4px 0 40px; }
  #move-toll, #move-wages { order: 3; }
  .move + .move { margin-top: 32px; }
}

/* ---- home: the sums, each move as a ledger ---- */

.sums { background: var(--ground-2); }
/* Each card spans four rows of the grid (tag, heading, ledger, note) and
   shares them with its neighbours, so the headings, the ledgers and their
   double rules line up across the cards. */
.sum-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.sum-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  background: var(--ground);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-deep);
  border-radius: 4px;
  padding: 24px 24px 26px;
}
.sum-card h3 { font-size: 1.22rem; letter-spacing: 0.02em; margin-bottom: 16px; }
/* The ledger fills its row, so the shorter ones end on the same double
   rule as the longest; its margins are its neighbours' (height: 100%). */
.sum-card .ledger { height: 100%; margin: 0; }
.sum-card > p:last-child { color: var(--ink-dim); font-size: 0.95rem; line-height: 1.6; margin: 18px 0 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  border: 1px solid var(--gold-deep);
  border-radius: 3px;
  padding: 3px 9px 2px;
}
.tag:hover { color: var(--parchment); border-color: var(--gold); }

/* A ledger: lines of an account, the result under a double rule. */
.ledger {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 18px;
  font-size: 0.93rem;
}
.ledger th, .ledger td { padding: 8px 0; border-bottom: 1px dotted #4a3d31; vertical-align: baseline; }
.ledger th { text-align: left; font-weight: 400; color: var(--ink-dim); padding-right: 14px; }
/* Cinzel's 1 reads as an I, so the figures are in Inter. */
.ledger td {
  text-align: right;
  white-space: nowrap;
  font-family: var(--body);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1rem;
  color: var(--ink);
}
.ledger tfoot th, .ledger tfoot td { padding-top: 12px; border-bottom: 3px double var(--gold-deep); }
.ledger tfoot th { color: var(--ink); }
.ledger tfoot td { font-size: 1.35rem; color: var(--gold); }

/* The line after the ledgers: the threat to all that saving. */
.sums-after {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  color: var(--ink);
}
.sums-after .tag { flex: none; }

@media (max-width: 1000px) {
  .sum-cards { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
  .sum-card .ledger { height: auto; }
}

/* ---- home: the ready-made decks, text first ---- */

.deck-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.deck {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 22px 24px;
  background: var(--ground);
}
.deck img {
  width: 60px;
  aspect-ratio: 428 / 488;
  object-fit: cover;
  border-radius: 50% 50% 6px 6px / 40% 40% 6px 6px;
  border: 1px solid var(--gold-deep);
}
.deck h3 { font-size: 1.08rem; margin: 2px 0 2px; }
.deck .deck-lead { font-size: 0.85rem; letter-spacing: 0.03em; color: var(--gold); margin: 0 0 10px; }
.deck .deck-rule { font-size: 0.95rem; line-height: 1.55; color: var(--ink-dim); margin: 0; }
@media (max-width: 960px) { .deck-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .deck-list { grid-template-columns: minmax(0, 1fr); } }

/* ---- home: ways to play, the ones that need nobody first ---- */

.modes { background: var(--ground-2); }
.mode-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.mode { border-top: 2px solid var(--gold-deep); padding-top: 20px; }
.mode h3 { margin-bottom: 0.4em; }
.mode p { color: var(--ink-dim); margin: 0; }
.people {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.people h3 { font-size: 1.05rem; color: var(--ink); }
.people p { color: var(--ink-dim); }
.people .live { margin: 0; }
@media (max-width: 860px) { .mode-list { grid-template-columns: minmax(0, 1fr); } }

/* ---- home: the playtest, plainly ---- */

.playtest-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.playtest-head h2 { margin-bottom: 1em; }
.plain-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); border-top: 1px solid var(--line); }
.plain-list li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1.4em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e7c77d, #a9823f);
}
.feedback {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 20px 22px 6px;
}
.feedback h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.feedback p { color: var(--ink-dim); font-size: 0.95rem; }
@media (max-width: 860px) {
  .playtest-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .plain-list { order: 1; margin-bottom: 28px; }
  .playtest-head { display: contents; }
  .playtest-head .feedback { order: 2; }
}

/* ---- home: questions ---- */

.faq { background: var(--ground-2); }
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px clamp(32px, 5vw, 72px);
  margin: 36px 0 0;
}
.faq-list dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}
.faq-list dd { margin: 0; color: var(--ink-dim); max-width: var(--measure); }
@media (max-width: 760px) { .faq { background: var(--ground-2); }
.faq-list { grid-template-columns: minmax(0, 1fr); } }

/* ---- home: the closing band ---- */

.closing {
  text-align: center;
  background:
    radial-gradient(60% 120% at 50% 110%, rgba(179, 38, 27, 0.18), rgba(179, 38, 27, 0) 70%),
    var(--ground);
}
.closing-line {
  font-weight: 900;
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  line-height: 1.12;
  max-width: 20ch;
  margin: 0 auto 0.8em;
}
.closing-line span { display: block; color: var(--gold); }
.closing .cta { justify-content: center; margin-inline: auto; }

/* ---- news, 404 ---- */

.page-head { padding-block: 150px 24px; }
.page-title { font-weight: 900; font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: 0.04em; }
.posts { padding-top: 24px; }
.page-head + .posts { border-top: 0; }
.post { border-top: 1px solid var(--line); padding-top: 28px; }
.post-date { color: var(--gold); font-size: 0.9rem; letter-spacing: 0.04em; }
.lost { padding-block: 180px 120px; }
.button {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--parchment-ink);
  background: linear-gradient(180deg, #e7c77d, #b58c45);
  padding: 10px 20px;
  border-radius: 4px;
}
.button:hover { color: var(--parchment-ink); filter: brightness(1.08); }

/* ---- play, how to play, privacy (SITE-05) ---- */

.download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 28px;
}
.button-large { font-size: 1.05rem; padding: 14px 28px; }
.download-note { margin: 0; color: var(--ink-dim); font-size: 0.92rem; }

.rules h2 { margin-top: 1.7em; }
.rules h2:first-child { margin-top: 0; }
.rules h3 { color: var(--gold); margin-top: 1.4em; }
.rules ul, .steps ul { padding-left: 1.2em; margin: 0 0 1em; }
.rules li, .steps li { margin-bottom: 0.45em; }
.rules li::marker, .steps ul li::marker { color: var(--gold-deep); }

/* Numbered steps, each number a coin. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 30px;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 64px;
  margin: 0;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -6px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--parchment-ink);
  background: linear-gradient(180deg, #e7c77d, #a9823f);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 190, 0.35), 0 6px 14px rgba(0, 0, 0, 0.45);
}
.steps h3 { color: var(--ink); margin: 0 0 0.35em; }
.aside {
  color: var(--ink-dim);
  font-size: 0.95rem;
  border-left: 2px solid var(--line);
  padding-left: 12px;
}

.turn { padding-left: 1.4em; margin: 0 0 1em; }
.turn li { margin-bottom: 0.55em; padding-left: 0.2em; }
.turn li::marker { color: var(--gold); font-family: var(--display); font-weight: 700; }

.glossary {
  display: grid;
  grid-template-columns: 11.5em minmax(0, 1fr);
  gap: 12px 26px;
  margin: 14px 0 8px;
}
.glossary dt {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.glossary dd { margin: 0; color: var(--ink-dim); }
@media (max-width: 560px) {
  .glossary { grid-template-columns: 1fr; gap: 2px; }
  .glossary dd { margin-bottom: 14px; }
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ---- footer ---- */

.footer { border-top: 1px solid var(--line); background: #0a0908; }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 40px var(--gutter) 48px; color: var(--ink-dim); }
.footer-mark {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.footer-small { font-size: 0.85rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 1em; }
.footer-links a { color: var(--ink-dim); }
.footer-links a:hover { color: var(--ink); }