/* ═══════════════════════════════════════════════════ Creator Saga — the table
   The site as the room round a game table: dark, warm, one lamp over the
   middle. What is a CARD is parchment and ink; what is furniture (headers,
   buttons, plaques) is dark wood with brass fittings. Shared by every page. */

@font-face {
  font-family: 'CreatorSagaSpirit';
  src: url('fonts/CreatorSagaSpirit.ttf') format('truetype');
  font-display: swap;
}

:root {
  --night:#0b0907; --wall:#15110d; --wall2:#1d1712;
  --brass:#d2a95c; --brass-hi:#f6dca0; --brass-dim:#8a6c3a;
  --cream:#efe4cf; --cream2:#bcae94; --cream3:#8c7f6a;
  --parch:#ecdfc3; --parch2:#e4d4b3; --parch3:#f3e9d4;
  --ink:#33231a; --ink2:#5a412c; --ink3:#6e553a; --rule:#9c7c55;
  --sanguine:#a4442a; --indigo:#324c7a; --ochre:#ac8038; --verd:#40704f; --violet:#62468a;
  --teamA:#3a5ea4; --teamB:#aa382e;
  /* SPIRIT, and each one's pencil (the colour mixed a quarter toward bistre,
     as the printed cards write their gates) */
  --str:#c43c3c; --pie:#c9a84c; --ing:#8a3cc4; --res:#3ca85c; --inf:#c47a3c; --tal:#3c6ec4;
  --str-p:#b1443c; --pie-p:#9a7b2c; --ing-p:#8644a2; --res-p:#3f8a4b; --inf-p:#a8652c; --tal-p:#4b69a2;
  --wood:#4e311d;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='520'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.1' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.05 0 0 0 0 0.025 1.9 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --paper:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Crimson Text', Georgia, serif;
  background: var(--night);
  color: var(--cream);
  line-height: 1.65;
  font-size: 18px;
  overflow-x: hidden;
}
::selection { background: rgba(210,169,92,.32); }
a { color: inherit; }

/* ── the table: walnut planks under a warm lamp; everything below the hero sits on it ── */
.table {                               /* the night over Erand, carried on from the horizon */
  position: relative; overflow-x: clip;
  background-color: #0b0a12;
  background-image:
    radial-gradient(1px 1px at 37px 61px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 151px 23px, rgba(255,240,220,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 233px 147px, rgba(220,230,255,.5), transparent 60%),
    radial-gradient(1px 1px at 89px 201px, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 281px 88px, rgba(255,230,240,.3), transparent 60%),
    radial-gradient(1px 1px at 190px 260px, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(ellipse 70% 40% at 15% 20%, rgba(120,70,150,.10), transparent 70%),
    radial-gradient(ellipse 60% 35% at 85% 65%, rgba(60,80,150,.10), transparent 70%),
    linear-gradient(180deg, #0a0a0c, #0d0b16 30%, #0b0a12);
  background-size: 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 100% 100%, 100% 100%, 100% 100%;
}
.table::before { content: none; }
.pool {                                /* a pool of lamplight over one place */
  position: relative;
  padding: 96px 24px;
  background: radial-gradient(ellipse 60% 55% at 50% 46%, rgba(255,214,150,.07), rgba(160,120,200,.03) 55%, transparent 78%);
}
.pool + .pool { border-top: none; }
/* each section its own band: alternate shades, and a brass rule with a
   hex at the seam so the eye always knows where one ends and the next begins */
.pool:nth-of-type(even) {
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(255,214,150,.06), transparent 75%),
    linear-gradient(180deg, rgba(40,32,58,.55), rgba(28,22,40,.55));
  box-shadow: inset 0 1px 0 rgba(210,169,92,.10), inset 0 -1px 0 rgba(210,169,92,.10);
}
.pool + .pool::before {
  content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(720px, 80%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210,169,92,.75) 30%, rgba(246,220,160,.9) 50%, rgba(210,169,92,.75) 70%, transparent);
}
.pool + .pool::after {
  content: ''; position: absolute; top: -9px; left: 50%; width: 16px; height: 18px; margin-left: -8px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, #f6dca0, #a57d3a);
  box-shadow: 0 0 10px rgba(242,200,120,.5);
}
.container { max-width: 1040px; margin: 0 auto; position: relative; }

/* ── brass: plaques, buttons, rules ── */
.plaque {
  display: table; margin: 0 auto 14px;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem); letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-hi);
  padding: 10px 30px 8px;
  background: linear-gradient(180deg, #2a1f15, #140f0a);
  border: 1px solid rgba(210,169,92,.6);
  outline: 1px solid rgba(210,169,92,.22); outline-offset: 3px;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,230,170,.12);
  text-shadow: 0 1px 0 #000;
  position: relative;
}
.plaque::before, .plaque::after {       /* the brass pins */
  content: ''; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbe7b4, #a07a38 60%, #4a3518);
  box-shadow: 0 1px 1px rgba(0,0,0,.6);
}
.plaque::before { left: 10px; } .plaque::after { right: 10px; }
@media (max-width: 520px) { .plaque { font-size: 1.02rem; letter-spacing: .1em; padding: 9px 26px 7px; } }
.lede {
  text-align: center; max-width: 620px; margin: 0 auto 46px;
  color: var(--cream2); font-style: italic; font-size: 1.1rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: .82rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: #1a120a;
  padding: 14px 40px 13px;
  background: linear-gradient(180deg, #f1d38f, #d2a95c 45%, #a57d3a);
  border: 1px solid #6e5226; border-radius: 3px;
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,245,210,.7), inset 0 -2px 0 rgba(80,55,20,.35);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 22px rgba(0,0,0,.55), 0 0 24px rgba(242,200,120,.25), inset 0 1px 0 rgba(255,245,210,.7); }
.btn.ghost {
  background: rgba(210,169,92,.06); color: var(--brass);
  border: 1px solid rgba(210,169,92,.55); box-shadow: none;
}
.btn.ghost:hover { background: rgba(210,169,92,.15); color: var(--brass-hi); }

/* ── parchment: anything that is a card or a sheet ── */
.parch {
  color: var(--ink);
  background: var(--paper), linear-gradient(180deg, var(--parch3), var(--parch) 60%, var(--parch2));
  border: 1px solid var(--rule);
  outline: 1px solid rgba(156,124,85,.38); outline-offset: -6px;
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.5);
}
.parch strong { color: var(--ink); }
.spirit-word { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .08em; color: var(--sanguine); }
.table .spirit-word.on-wood { color: var(--brass-hi); }

/* ── the room's dark edge: header ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; gap: 22px;
  padding: 10px 22px;
  background: linear-gradient(180deg, rgba(23,18,14,.97), rgba(14,11,8,.97));
  border-bottom: 1px solid #2c2219;
  box-shadow: 0 2px 14px rgba(0,0,0,.6);
  transition: transform .35s ease, opacity .35s ease;
}
.topbar.tucked { transform: translateY(-110%); opacity: 0; }
.topbar .brand {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass); text-decoration: none; font-size: 1rem; white-space: nowrap;
}
.topbar nav { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.topbar nav a {
  font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream2); text-decoration: none; transition: color .2s;
}
.topbar nav a:hover, .topbar nav a.here { color: var(--brass-hi); }
.topbar .pip {
  font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); text-decoration: none;
  padding: 5px 13px 4px; border: 1px solid rgba(210,169,92,.5); border-radius: 3px; background: rgba(210,169,92,.06);
  transition: background .2s, color .2s;
}
.topbar .pip:hover { background: rgba(210,169,92,.16); color: var(--brass-hi); }
@media (max-width: 960px) { .topbar nav a.opt3 { display: none; } }   /* the busiest bar drops these first */
@media (max-width: 720px) {
  .topbar { padding: 9px 16px; gap: 12px; }
  .topbar nav { gap: 14px; }
  .topbar nav a.opt { display: none; }
}
@media (max-width: 440px) {
  .topbar .brand { font-size: .85rem; letter-spacing: .08em; }
  .topbar nav a.opt2 { display: none; }
  .topbar .pip { padding: 5px 9px 4px; }
}
/* the menu button: whatever the bar has had to hide, in a list under it */
.topbar .tb-more { display: none; flex: none; width: 36px; height: 30px; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid rgba(210,169,92,.4); border-radius: 3px; background: rgba(210,169,92,.06); }
.topbar .tb-more span, .topbar .tb-more::before, .topbar .tb-more::after { content: ''; display: block; width: 16px; height: 1.5px; background: var(--brass); transition: transform .2s, opacity .2s; }
.topbar.menu-open .tb-more span { opacity: 0; }
.topbar.menu-open .tb-more::before { transform: translateY(5.5px) rotate(45deg); }
.topbar.menu-open .tb-more::after { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 960px) {
  .topbar .tb-more { display: inline-flex; }
  .topbar.menu-open .tb-more { margin-left: auto; }
  .topbar.menu-open nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 4px 0 14px; flex-direction: column; align-items: stretch; gap: 0;
    background: linear-gradient(180deg, rgba(20,15,11,.98), rgba(12,9,7,.98)); border-bottom: 1px solid #2c2219; box-shadow: 0 14px 26px rgba(0,0,0,.6); }
  .topbar.menu-open nav a, .topbar.menu-open nav a.opt, .topbar.menu-open nav a.opt2, .topbar.menu-open nav a.opt3 { display: block; padding: 13px 24px; font-size: .78rem; border-top: 1px solid rgba(210,169,92,.08); }
  .topbar.menu-open nav a.pip { margin: 12px 24px 0; padding: 10px; text-align: center; border: 1px solid rgba(210,169,92,.5); }
}

/* ── footer: the dark beyond the table ── */
footer {
  position: relative; text-align: center; padding: 60px 24px 44px;
  background: linear-gradient(180deg, #120d09, #070504);
  border-top: 1px solid #2c2219; color: var(--cream3);
}
footer::before { content: none; }
.footer-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; }
.footer-by { font-size: .8rem; font-style: italic; color: var(--cream3); margin-bottom: 8px; }
.footer-launch { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream2); margin-bottom: 22px; }
.footer-links { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-bottom: 22px; }
.footer-links a { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--cream3); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--brass-hi); }
.footer-copy { font-size: .72rem; color: #5b5144; }

/* ── overlays: a sheet laid over the table ── */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(6,4,3,.86);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 16px; overflow-y: auto;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
  cursor: pointer;
}
.sheet-overlay.visible { opacity: 1; pointer-events: auto; }
.sheet {
  cursor: default; position: relative;
  width: 100%; max-width: 760px; margin: auto;
  padding: 46px 48px 40px;
  transform: translateY(18px) rotate(-.4deg); transition: transform .35s ease;
}
.sheet-overlay.visible .sheet { transform: none; }
.sheet .close {
  position: absolute; top: 12px; right: 16px; background: none; border: none; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 1.2rem; color: var(--ink3);
}
.sheet .close:hover { color: var(--sanguine); }
.sheet .close:focus:not(:focus-visible) { outline: none; }
.sheet .close:focus-visible { outline: 1px dashed var(--ink3); outline-offset: 3px; }
.sheet-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: .1em; text-align: center; color: var(--ink); }
.sheet-sub { text-align: center; font-style: italic; color: var(--ink2); margin: 4px 0 26px; padding-bottom: 16px; border-bottom: 1px solid rgba(156,124,85,.5); }
.sheet h4 { font-family: 'Cinzel', serif; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sanguine); margin: 24px 0 8px; }
.sheet p { color: var(--ink2); margin-bottom: 12px; font-size: 1.02rem; }
.sheet p strong { color: var(--ink); }
.sheet .note {
  margin-top: 16px; padding: 14px 18px 4px;
  border-left: 3px solid var(--violet); background: rgba(98,70,138,.07);
}
@media (max-width: 600px) { .sheet { padding: 40px 22px 30px; } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ── sign-in (auth.js, 7 Oct 2026): the account link in the top bar, the sign-in sheet ── */
.topbar nav a.acct { align-items: center; gap: 7px; }
@media (min-width: 721px) { .topbar nav a.acct { display: inline-flex; } }   /* narrower, it waits in the menu with the other links */
.topbar .acct-pic { width: 22px; height: 22px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--brass-dim); }
.topbar .acct-init { display: inline-flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: .62rem; color: #1a120a; background: linear-gradient(180deg, #f1d38f, #a57d3a); }
.topbar nav a.acct-admin.off, .topbar.menu-open nav a.acct-admin.off { display: none; }
.topbar.menu-open nav a.acct { display: flex; }
.auth-sheet { max-width: 440px; text-align: center; }
.auth-btns { display: flex; flex-direction: column; gap: 12px; margin: 6px auto 0; max-width: 320px; }
.auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; cursor: pointer;
  padding: 12px 18px; border-radius: 4px; font: 600 1.05rem/1.2 'Crimson Text', Georgia, serif; letter-spacing: .01em;
  border: 1px solid rgba(98,66,40,.5); box-shadow: 0 2px 4px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s, filter .15s;
}
.auth-btn svg { width: 20px; height: 20px; flex: none; }
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,.22); }
.auth-btn:focus-visible { outline: 2px solid var(--sanguine); outline-offset: 3px; }
.auth-btn[disabled] { cursor: wait; filter: saturate(.6) brightness(.95); transform: none; }
.auth-btn.busy span::after { content: '…'; }
.auth-google { background: #fff; color: #1f1f1f; border-color: #a8a29a; }
.auth-discord { background: #5865f2; color: #fff; border-color: #3c45a5; }
.auth-apple { background: #000; color: #fff; border-color: #000; }
.auth-twitch { background: #9146ff; color: #fff; border-color: #6a2fc4; }
.auth-facebook { background: #1877f2; color: #fff; border-color: #0f5bc0; }
.auth-msg { min-height: 1.2em; margin: 14px 0 0 !important; color: var(--sanguine) !important; font-size: .95rem !important; }
.auth-fine { margin: 6px 0 0 !important; font-size: .9rem !important; font-style: italic; color: var(--ink3) !important; }
.auth-opt { /* 16 Oct 2026 (Chris: "too simple, doesn't draw enough attention"): the updates opt-in as a
     card above the sign-in buttons -- a bold line and a switch; lit gold when it's on */
  position: relative; display: flex; align-items: center; gap: 12px; margin: 4px auto 16px; max-width: 320px; cursor: pointer;
  padding: 12px 14px; text-align: left; border-radius: 6px; user-select: none;
  border: 1.5px dashed rgba(165,125,58,.75); background: linear-gradient(180deg, rgba(246,220,160,.28), rgba(210,169,92,.14));
  box-shadow: inset 0 1px 0 rgba(255,250,232,.6); transition: border-color .2s, background .2s, box-shadow .2s, transform .15s;
}
.auth-opt:hover { transform: translateY(-1px); border-color: #a57d3a; box-shadow: 0 4px 10px rgba(80,55,20,.16), inset 0 1px 0 rgba(255,250,232,.6); }
.auth-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.auth-opt .ao-text { flex: 1; min-width: 0; line-height: 1.25; }
.auth-opt .ao-text b { display: block; font-family: 'Cinzel', serif; font-weight: 700; font-size: .86rem; letter-spacing: .06em; color: var(--ink); }
.auth-opt .ao-text em { display: block; margin-top: 3px; font-size: .92rem; color: var(--ink3); }
/* the switch: a groove and a brass knob that slides across when it's on */
.auth-opt .ao-switch { flex: none; position: relative; width: 44px; height: 24px; border-radius: 12px;
  background: rgba(98,66,40,.25); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); transition: background .2s; }
.auth-opt .ao-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(180deg, #fffaf0, #d9cbb0); box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s; }
.auth-opt input:checked ~ .ao-switch { background: linear-gradient(180deg, #4f8a52, #3f7a46); }
.auth-opt input:checked ~ .ao-switch::after { transform: translateX(20px); }
.auth-opt:has(input:checked) { border-style: solid; border-color: #a57d3a;
  background: linear-gradient(180deg, rgba(246,220,160,.55), rgba(210,169,92,.3)); box-shadow: 0 0 0 3px rgba(210,169,92,.22), inset 0 1px 0 rgba(255,250,232,.7); }
.auth-opt input:focus-visible ~ .ao-switch { outline: 2px solid var(--sanguine); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .auth-opt, .auth-opt .ao-switch, .auth-opt .ao-switch::after { transition: none; } }
.auth-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 950; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 10px 22px 9px; border-radius: 3px; font-family: 'Cinzel', serif; font-size: .78rem; letter-spacing: .12em; color: var(--brass-hi);
  background: linear-gradient(180deg, #2a1f15, #140f0a); border: 1px solid rgba(210,169,92,.6); box-shadow: 0 10px 24px rgba(0,0,0,.6);
  transition: opacity .25s, transform .25s;
}
.auth-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── the landing pages (/discover/..., 7 Oct 2026): open to everyone; the pages they
   lead to are for registered players. A hero (picture | words), one row across, and the
   "Want more?" plaque. ── */
.disc { padding-top: 58px; }
.disc-in { max-width: 1100px; margin: 0 auto; padding: 0 20px 70px; }
.disc-hero { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px 0 10px; }
.disc-art { justify-self: center; position: relative; width: min(320px, 100%); }
.disc-art img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 3px 4px rgba(0,0,0,.5), 0 26px 50px rgba(0,0,0,.7); }
.disc-art.tilt img { transform: rotate(-3deg); }
.disc-fan { position: relative; height: 470px; }
.disc-fan img { position: absolute; left: 50%; top: 10px; width: 230px; margin-left: -115px; border-radius: 8px; box-shadow: 0 3px 4px rgba(0,0,0,.5), 0 22px 40px rgba(0,0,0,.65); transform-origin: 50% 110%; }
.disc-fan img:nth-child(1) { transform: rotate(-13deg) translateX(-34px); }
.disc-fan img:nth-child(2) { transform: rotate(11deg) translateX(34px); }
.disc-fan img:nth-child(3) { transform: translateY(-6px); }
.disc-kick { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 10px; }
.disc-text h1 { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: .04em; color: var(--brass-hi); text-shadow: 0 2px 18px rgba(0,0,0,.8); margin-bottom: 14px; }
.disc-text h1 span { display: block; color: var(--cream); }
.disc-lede { font-size: 1.26rem; font-style: italic; color: var(--cream); line-height: 1.45; margin-bottom: 16px; }
.disc-text p { color: var(--cream2); font-size: 1.07rem; line-height: 1.7; margin-bottom: 13px; }
.disc-text p b { color: var(--cream); font-weight: 600; }
.disc-quote { margin: 6px 0 14px; padding: 4px 0 4px 18px; border-left: 2px solid var(--brass-dim); font-style: italic; color: var(--cream) !important; }
.disc-quote cite { display: block; margin-top: 6px; font-style: normal; font-family: 'Cinzel', serif; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
/* one row across: steps, pillars or eras */
.disc-row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; margin: 46px 0 0; }
.disc-cell { position: relative; border: 1px solid rgba(210,169,92,.3); border-radius: 4px; padding: 18px 18px 16px; background: linear-gradient(180deg, rgba(42,31,21,.55), rgba(20,15,10,.55)); }
.disc-cell b { display: block; font-family: 'Cinzel', serif; font-size: 1.15rem; color: var(--brass-hi); letter-spacing: .04em; line-height: 1.2; }
.disc-cell em { display: block; font-family: 'Cinzel', serif; font-style: normal; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin: 3px 0 8px; }
.disc-cell p { color: var(--cream2); font-size: .98rem; line-height: 1.55; }
.disc-cell .no { position: absolute; top: -13px; left: 14px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: .75rem; color: #1a120a;
  background: linear-gradient(180deg, #f1d38f, #a57d3a); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.disc-steps .disc-cell { padding-top: 22px; }
.disc-steps .disc-cell:not(:last-child)::after { content: '\2192'; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--brass-dim); font-size: 1rem; z-index: 2; }
/* the "Want more?" plaque */
.want-more { max-width: 780px; margin: 54px auto 0; text-align: center; padding: 34px 40px 30px; border-radius: 4px; position: relative;
  background: linear-gradient(180deg, #2a1f15, #140f0a); border: 1px solid rgba(210,169,92,.6); outline: 1px solid rgba(210,169,92,.22); outline-offset: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,230,170,.12); }
.want-more::before, .want-more::after { content: ''; position: absolute; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fbe7b4, #a07a38 60%, #4a3518); }
.want-more::before { left: 14px; } .want-more::after { right: 14px; }
.want-more .wm-kick { font-family: 'Cinzel', serif; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; }
.want-more h2 { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: .06em; color: var(--brass-hi); line-height: 1.2; margin-bottom: 10px; }
.want-more p { color: var(--cream2); font-size: 1.06rem; line-height: 1.6; max-width: 600px; margin: 0 auto 18px; }
.want-more .wm-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.want-more .wm-fine { margin: 14px auto 0; font-size: .9rem; font-style: italic; color: var(--cream3); }
/* "What's inside" / "Places to begin" */
.disc-h2 { display: flex; align-items: center; gap: 16px; font-family: 'Cinzel', serif; font-weight: 700; font-size: .86rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-hi); margin: 54px 0 18px; }
.disc-h2::before, .disc-h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(210,169,92,.6)); }
.disc-h2::after { background: linear-gradient(270deg, transparent, rgba(210,169,92,.6)); }
.disc-toc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.disc-toc h3 { font-family: 'Cinzel', serif; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); border-bottom: 1px solid rgba(210,169,92,.3); padding-bottom: 6px; margin-bottom: 6px; }
.disc-toc h3 small { display: block; font-family: 'Crimson Text', serif; font-style: italic; font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--cream3); margin-top: 2px; }
.disc-toc a { display: flex; gap: 10px; padding: 4px 2px; font-size: 1rem; color: var(--cream2); text-decoration: none; border-radius: 2px; }
.disc-toc a span { min-width: 22px; font-family: 'Cinzel', serif; font-size: .78rem; color: var(--brass); padding-top: 2px; }
.disc-toc a:hover { color: var(--brass-hi); background: rgba(210,169,92,.08); }
.disc-hooks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.disc-hooks a { display: block; padding: 14px 16px 12px; border: 1px solid rgba(210,169,92,.3); border-radius: 4px; text-decoration: none; color: var(--cream); font-size: 1.05rem; line-height: 1.35;
  background: linear-gradient(180deg, rgba(42,31,21,.55), rgba(20,15,10,.55)); transition: border-color .2s, transform .2s; }
.disc-hooks a span { display: block; font-family: 'Cinzel', serif; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 4px; }
.disc-hooks a:hover { border-color: var(--brass); transform: translateY(-2px); }
.disc-foot { margin: 34px auto 0; text-align: center; font-style: italic; color: var(--cream3); font-size: .95rem; }
@media (max-width: 900px) {
  .disc-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 30px; }
  .disc-art { width: min(230px, 62vw); }
  .disc-fan { height: 360px; width: min(320px, 92vw); } .disc-fan img { width: 180px; margin-left: -90px; }
  .disc-text { text-align: center; }
  .disc-quote { text-align: left; }
  .disc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disc-steps .disc-cell::after { display: none; }
  .disc-toc, .disc-hooks { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .want-more { padding: 28px 20px 24px; }
}
@media (max-width: 520px) { .disc-row { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* words for a screen reader only (a pause between a heading and its subtitle, a page's name) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── phones (10 Oct 2026): nothing to read under 12px, and the footer's links a full
   fingertip tall (44px), so a thumb lands on the one it meant ── */
@media (max-width: 720px) {
  .topbar nav a, .topbar .pip { font-size: .75rem; }
  .topbar .pip { white-space: nowrap; }
  .footer-launch, .footer-copy, .footer-links a { font-size: .75rem; }
  .footer-links { gap: 0 20px; margin-bottom: 14px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .disc-kick, .disc-quote cite, .disc-cell em, .disc-hooks a span, .disc-toc h3, .want-more .wm-kick { font-size: .75rem; }
}
@media (max-width: 400px) { .topbar .pip { letter-spacing: .1em; } }
/* the narrowest phones: the bar keeps its name, Get Notified and the menu; FAQ waits in the menu */
@media (max-width: 380px) { .topbar:not(.menu-open) nav a:not(.pip) { display: none; } }