/* ==========================================================================
   Return to Morroc: Refuge - core stylesheet
   Palette taken straight off the mark: black void, shattered silver, purple
   flame. Nothing below writes a raw colour; everything points at a token so
   the whole site can be re-themed by editing section 1.

   1. Tokens
   2. Reset and base
   3. Layout helpers
   4. Header, nav, drawer
   5. Footer
   6. Buttons, chips, badges
   7. Cards and panels
   8. Tables
   9. Hero
  10. Content blocks (prose, changelog, timeline, faq, stat rows)
  11. Utilities and motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Brand - purple flame */
  --pur-100: #f3e6ff;
  --pur-200: #ddc0ff;
  --pur-300: #c48dff;
  --pur-400: #a95cff;
  --pur-500: #9127f0;
  --pur-600: #7415c8;
  --pur-700: #4d0d86;
  --pur-900: #1d0533;

  /* Brand - shattered silver */
  --sil-100: #f6f5fa;
  --sil-200: #e2e0ea;
  --sil-300: #c6c2d3;
  --sil-400: #a49fb4;
  --sil-500: #837d93;
  --sil-700: #504a5d;

  /* Void */
  --ink-000: #000000;
  --ink-050: #06040a;
  --ink-100: #0a0710;
  --ink-200: #0f0b17;
  --ink-300: #171122;
  --ink-400: #241b33;
  --ink-500: #362a4a;

  /* Semantic */
  --bg: var(--ink-050);
  --bg-soft: var(--ink-100);
  --bg-elevated: rgba(255, 255, 255, 0.035);
  --bg-panel: rgba(15, 11, 23, 0.72);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);

  --text: #efedf5;
  --text-muted: #a8a2b6;
  --text-dim: #8b8499;

  --accent: var(--pur-400);
  --accent-strong: var(--pur-500);
  --accent-ink: #ffffff;
  --silver: var(--sil-300);
  --glow: rgba(169, 92, 255, 0.4);
  --live: #45d99a;
  --warn: #f0b429;

  /* Ranks, used by the dungeon tables and anywhere difficulty is shown. */
  --rank-b: #7fb2f0;
  --rank-a: #f0b429;
  --rank-s: #ff7a59;
  --rank-ss: #ff4d8d;

  /* Change families, used by every "what changed" list on the site. */
  --tag-added: #45d99a;
  --tag-changed: var(--pur-300);
  --tag-removed: #ff6b7d;

  /* Type */
  /* Viaoda Libre is Art Nouveau and carries the big statements. Atkinson
     Hyperlegible was designed for low-vision readability and does all the
     actual reading, including h3 and below where a decorative face stops
     helping. */
  --font-display: "Viaoda Libre", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid scale. No media query ever changes a font size. */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --step-1: clamp(1.12rem, 1.06rem + 0.3vw, 1.32rem);
  --step-2: clamp(1.38rem, 1.26rem + 0.6vw, 1.8rem);
  --step-3: clamp(1.7rem, 1.45rem + 1.2vw, 2.5rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-5: clamp(2.6rem, 1.8rem + 4.2vw, 5.2rem);

  /* Readability floor. Dense tables never negotiate below this. */
  --font-min: 0.72rem;

  --gap-xs: 0.5rem;
  --gap-sm: 0.85rem;
  --gap-md: 1.4rem;
  --gap-lg: 2.4rem;
  --gap-xl: 4rem;
  --gap-2xl: 6.5rem;

  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 22px;

  --shell: 1200px;
  --shell-narrow: 820px;
  --header-h: 68px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(169, 92, 255, 0.32), 0 14px 50px -12px var(--glow);

  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f2f0f5;
  --bg-soft: #ffffff;
  --bg-elevated: rgba(29, 5, 51, 0.04);
  --bg-panel: rgba(255, 255, 255, 0.82);
  --line: rgba(29, 5, 51, 0.14);
  --line-strong: rgba(29, 5, 51, 0.28);

  --text: #16101f;
  --text-muted: #574e66;
  --text-dim: #6a6278;

  --accent: var(--pur-600);
  --accent-strong: var(--pur-700);
  --silver: var(--sil-700);
  --glow: rgba(116, 21, 200, 0.24);
  --live: #0e7048;

  --rank-b: #2a63ac;
  --rank-a: #8a6000;
  --rank-s: #b13d1c;
  --rank-ss: #b01850;

  --tag-added: #0e7048;
  --tag-changed: var(--pur-600);
  --tag-removed: #c0263a;

  --shadow-md: 0 18px 45px rgba(29, 5, 51, 0.12);
  --shadow-glow: 0 0 0 1px rgba(116, 21, 200, 0.22), 0 14px 40px -14px var(--glow);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-x: hidden;
  /* The wiki-derived text contains the occasional unbreakable run - a long
     item name, a URL - and one of them was pushing a 375px page 47px wide. */
  overflow-wrap: break-word;
}

/* The ambient purple bloom. Fixed so it does not scroll with content, and
   pointer-events off so it never eats a click. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% -10%, rgba(145, 39, 240, 0.22), transparent 65%),
    radial-gradient(48rem 34rem at 8% 8%, rgba(77, 13, 134, 0.2), transparent 60%);
}

html[data-theme="light"] body::before {
  background:
    radial-gradient(60rem 40rem at 78% -10%, rgba(145, 39, 240, 0.13), transparent 65%),
    radial-gradient(48rem 34rem at 8% 8%, rgba(116, 21, 200, 0.09), transparent 60%);
}

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

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--pur-300); }
html[data-theme="light"] a:hover { color: var(--pur-500); }

h1, h2, h3, h4 {
  margin: 0 0 var(--gap-sm);
  line-height: 1.2;
  text-wrap: balance;
}

/* The decorative face is reserved for headings big enough to carry it. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.005em;
}

h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.005em;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--gap-md); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--gap-md); padding-left: 1.3em; }
li { margin-bottom: 0.35em; }

code, kbd { font-family: var(--font-mono); font-size: 0.88em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap-lg) 0; }

::selection { background: var(--pur-600); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7em 1.2em;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */

.shell { width: min(100% - 2.4rem, var(--shell)); margin-inline: auto; }
.shell-narrow { width: min(100% - 2.4rem, var(--shell-narrow)); margin-inline: auto; }

.section { padding-block: var(--gap-2xl); }
.section--tight { padding-block: var(--gap-xl); }
.section--alt { background: var(--bg-elevated); border-block: 1px solid var(--line); }

.section-head { max-width: 62ch; margin-bottom: var(--gap-lg); }
.section-head p { color: var(--text-muted); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--gap-xs);
}

/* The one grid used everywhere. min() is what stops narrow screens from
   scrolling sideways; minmax(320px, 1fr) alone overflows. */
.grid {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid--tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack > * + * { margin-top: var(--gap-md); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap-sm); align-items: center; }

/* --------------------------------------------------------------------------
   4. Header, nav, drawer
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner { display: flex; align-items: center; gap: var(--gap-md); width: 100%; }

.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); flex: 0 0 auto; }
.brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 10px var(--glow)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.06em; }
.brand-sub { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }

.nav { display: flex; gap: 0.15rem; margin-left: auto; }
.nav a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--bg-elevated); }
.nav a[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); }

.header-actions { display: flex; align-items: center; gap: 0.4rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.icon-btn svg { width: 18px; height: 18px; }

.nav-toggle { display: none; }

@media (max-width: 1000px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
}

/* On a narrow phone the wordmark plus three buttons is wider than the shell,
   and the header is the one row that cannot be allowed to push the page
   sideways. Measured, not guessed: 375px was overflowing by 13px. */
@media (max-width: 560px) {
  .header-inner { gap: var(--gap-sm); }
  .brand img { width: 30px; height: 30px; }
  .brand-name { font-size: 0.78rem; letter-spacing: 0.03em; }
  .brand-sub { font-size: 0.55rem; letter-spacing: 0.2em; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 16px; height: 16px; }
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  padding: var(--gap-lg) 0;
  overflow-y: auto;
  display: none;
}
.drawer[data-open="true"] { display: block; }
.drawer nav { display: flex; flex-direction: column; gap: 0.2rem; margin-top: var(--gap-md); }
.drawer nav a {
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
  border: 1px solid transparent;
}
.drawer nav a:hover { background: var(--bg-elevated); }
.drawer nav a[aria-current="page"] { border-color: var(--line); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }

body.no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--gap-xl) var(--gap-lg);
  margin-top: var(--gap-2xl);
  background: var(--bg-soft);
}
.footer-grid { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer-grid h4 { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--gap-sm); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.45em; }
.footer-grid a { color: var(--text-muted); text-decoration: none; font-size: 0.92rem; }
.footer-grid a:hover { color: var(--accent); }
.footer-legal {
  margin-top: var(--gap-lg);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--step--1);
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   6. Buttons, chips, badges
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; }

.btn--primary {
  background: linear-gradient(135deg, var(--pur-500), var(--pur-700));
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { color: #fff; box-shadow: 0 0 0 1px var(--accent), 0 18px 55px -14px var(--glow); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); background: var(--bg-elevated); }
.btn--ghost:hover { color: var(--text); border-color: var(--accent); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  font-size: var(--step--1);
  color: var(--text-muted);
  white-space: nowrap;
}
.chip strong { color: var(--text); font-weight: 600; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: var(--font-min);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.rank-b  { color: var(--rank-b); }
.rank-a  { color: var(--rank-a); }
.rank-s  { color: var(--rank-s); }
.rank-ss { color: var(--rank-ss); }

.tag-added   { color: var(--tag-added); }
.tag-changed { color: var(--tag-changed); }
.tag-removed { color: var(--tag-removed); }

.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent);
}

/* --------------------------------------------------------------------------
   7. Cards and panels
   -------------------------------------------------------------------------- */

.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-md);
  backdrop-filter: blur(6px);
}
.card h3 { font-size: var(--step-1); }
.card p:last-child { margin-bottom: 0; }
.card--link { text-decoration: none; color: inherit; display: block; transition: border-color 0.18s var(--ease), transform 0.18s var(--ease); }
.card--link:hover { border-color: var(--accent); transform: translateY(-3px); color: inherit; }

.card-kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: block;
  margin-bottom: 0.35rem;
}

.panel {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  padding: var(--gap-md);
}
.panel--warn { border-left-color: var(--warn); }

.stat { text-align: left; }
.stat dt { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.stat dd { margin: 0.2rem 0 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--text); }

.stat-row { display: grid; gap: var(--gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); margin: 0; }

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel); }

table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
thead th {
  position: sticky;
  top: 0;
  background: var(--bg-soft);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--font-min);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-elevated); }
td.num { font-family: var(--font-mono); white-space: nowrap; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; padding-block: clamp(3rem, 8vw, 7rem) var(--gap-2xl); overflow: hidden; }
.hero-inner { display: grid; gap: var(--gap-xl); align-items: center; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 320px; margin-inline: auto; }
}

.hero h1 { font-size: var(--step-5); margin-bottom: var(--gap-md); }
.hero h1 .accent {
  background: linear-gradient(120deg, var(--pur-300), var(--sil-200) 55%, var(--pur-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede { font-size: var(--step-1); color: var(--text-muted); max-width: 52ch; }

.hero-art { position: relative; }
.hero-art img { filter: drop-shadow(0 0 60px var(--glow)); }

/* The mark turns slowly. Purely decorative, and switched off for anyone who
   asked the OS for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: slow-spin 90s linear infinite; }
}
@keyframes slow-spin { to { transform: rotate(360deg); } }

.page-hero { padding-block: var(--gap-xl) var(--gap-lg); border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 20ch; }
.page-hero p { color: var(--text-muted); max-width: 66ch; font-size: var(--step-1); }

.crumbs { font-size: var(--step--1); color: var(--text-dim); margin-bottom: var(--gap-sm); }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin-inline: 0.4rem; }

/* --------------------------------------------------------------------------
  10. Content blocks
   -------------------------------------------------------------------------- */

.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--gap-xl); }
.prose h3 { margin-top: var(--gap-lg); }

/* Change lists: one line per change, the tag column fixed so the eye can
   scan down the verbs instead of hunting for them. */
.changelist { list-style: none; padding: 0; margin: 0; }
.changelist li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--gap-sm);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.changelist li:last-child { border-bottom: 0; }
@media (max-width: 560px) {
  .changelist li { grid-template-columns: 1fr; gap: 0.25rem; }
}

.skill-block { border-top: 1px solid var(--line); padding-top: var(--gap-md); margin-top: var(--gap-md); }
.skill-block h4 { margin-bottom: 0.4rem; font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; }
.skill-block ul { margin: 0; padding-left: 1.15em; color: var(--text-muted); font-size: 0.94rem; }
.skill-block ul strong { color: var(--text); font-weight: 600; }

.job-tree { display: grid; gap: var(--gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.job-node { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--gap-sm) var(--gap-md); background: var(--bg-panel); }
.job-node h4 { margin-bottom: 0.25rem; }
.job-path { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); letter-spacing: 0.05em; }

.timeline { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.timeline li { position: relative; padding: 0 0 var(--gap-lg) var(--gap-md); margin: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(var(--gap-md) * -0.5 - 4px);
  top: 0.55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.timeline time { display: block; font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; }
.timeline h3 { font-size: var(--step-1); margin: 0.15rem 0 0.35rem; }
.timeline p { color: var(--text-muted); margin: 0; }

details.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  padding: 0 var(--gap-md);
  margin-bottom: var(--gap-sm);
}
details.faq summary {
  cursor: pointer;
  padding: var(--gap-sm) 0;
  font-weight: 600;
  font-family: var(--font-display);
  font-size: var(--step-1);
  list-style: none;
  display: flex;
  gap: var(--gap-sm);
  align-items: baseline;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: "+"; color: var(--accent); font-family: var(--font-mono); }
details.faq[open] summary::before { content: "\2212"; }
details.faq > *:not(summary) { color: var(--text-muted); }
details.faq > *:last-child { padding-bottom: var(--gap-md); }

.cta-band {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg);
  background:
    radial-gradient(40rem 20rem at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    var(--bg-panel);
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--gap-sm); }
.cta-band p { color: var(--text-muted); max-width: 56ch; margin-inline: auto; }
.cta-band .cluster { justify-content: center; margin-top: var(--gap-md); }

/* --------------------------------------------------------------------------
  11. Utilities and motion
   -------------------------------------------------------------------------- */

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Scroll reveal. Elements start visible; the observer only adds the "from"
   state once it is known to be running, so no-JS never hides content. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
  12. The mark
   ==========================================================================
   The logo is artwork on a black field, cut to a circle. It is NOT recoloured
   per theme: on the light theme it simply reads as a black medallion, which
   is what the artwork actually is. Anything else changes the brand colours.
   -------------------------------------------------------------------------- */

.mark { border-radius: 50%; }

html[data-theme="light"] .mark {
  box-shadow: 0 0 0 1px rgba(29, 5, 51, 0.18), 0 2px 12px rgba(29, 5, 51, 0.12);
}

html[data-theme="light"] .hero-art img {
  filter: drop-shadow(0 18px 60px rgba(77, 13, 134, 0.28));
}

/* ==========================================================================
  13. Class pages and the job tree
   ========================================================================== */

.lede { font-size: var(--step-1); color: var(--text-muted); max-width: 60ch; }

.page-hero--class {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}

.class-body { padding-block: var(--gap-xl) 0; }
.class-body .prose { max-width: 78ch; }
.prose-flow h2 { margin-top: var(--gap-xl); }
.prose-flow p, .prose-flow li { color: var(--text-muted); }

/* Fact bar: the four things you want before reading a word of prose. */
.factbar {
  display: grid;
  gap: var(--gap-sm) var(--gap-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin: 0 0 var(--gap-lg);
  padding: var(--gap-md);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.factbar dt {
  font-family: var(--font-mono);
  font-size: var(--font-min);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.factbar dd { margin: 0.2rem 0 0; font-weight: 700; }
.factbar a { font-weight: 400; }

/* Strengths and weaknesses side by side, because that is how the decision
   actually gets made. */
.verdict {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--gap-lg);
}
.verdict-col { padding: var(--gap-md); }
.verdict-col + .verdict-col { border-left: 1px solid var(--line); }
.verdict-col h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.verdict-col p { color: var(--text-muted); margin: 0; font-size: 0.96rem; }
.verdict-col--good { background: color-mix(in srgb, var(--tag-added) 8%, transparent); }
.verdict-col--good h3 { color: var(--tag-added); }
.verdict-col--bad { background: color-mix(in srgb, var(--tag-removed) 8%, transparent); }
.verdict-col--bad h3 { color: var(--tag-removed); }

@media (max-width: 560px) {
  .verdict-col + .verdict-col { border-left: 0; border-top: 1px solid var(--line); }
}

/* Callouts. The Refuge one is deliberately loud: on a page otherwise full of
   inherited material, the reader has to see at a glance which lines are new. */
.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--gap-md);
  margin-bottom: var(--gap-lg);
  background: var(--bg-elevated);
}
.callout h2, .callout h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--gap-sm);
  color: var(--accent);
}
.callout ul { margin: 0; padding-left: 1.15em; color: var(--text-muted); }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout--refuge { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.callout--warn { border-left-color: var(--warn); }
.callout--warn h2, .callout--warn h3 { color: var(--warn); }

.source-note {
  font-size: var(--step--1);
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  padding-top: var(--gap-md);
  margin-top: var(--gap-xl);
}

/* Skill table. The name column is a row header so screen readers announce it
   with every cell. */
#skilltable th[scope="row"] { font-weight: 700; white-space: nowrap; }
.skill-max { display: block; font-size: var(--font-min); color: var(--text-dim); font-weight: 400; }
.skill-extra { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.skill-note { font-size: var(--step--1); color: var(--text-dim); }

.chip--sm { padding: 0.05rem 0.45rem; font-size: var(--font-min); }

.field {
  flex: 1 1 240px;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
}
.field::placeholder { color: var(--text-dim); }

/* Skill type badges. Quieter than the rank badges: they sit in a dense table
   and must not shout over the text beside them. */
.sk-physical { color: #e8677a; }
.sk-magic    { color: #7f9dff; }
.sk-support  { color: #4fd3a0; }
.sk-debuff   { color: #c07df0; }
.sk-passive  { color: var(--text-dim); }
.sk-stance   { color: var(--warn); }
.sk-summon   { color: #40c4c4; }
.sk-active   { color: var(--sil-400); }
.sk-other    { color: var(--text-dim); }

html[data-theme="light"] .sk-physical { color: #b02a3d; }
html[data-theme="light"] .sk-magic    { color: #2f4fb0; }
html[data-theme="light"] .sk-support  { color: #0e7048; }
html[data-theme="light"] .sk-debuff   { color: #7a2fae; }
html[data-theme="light"] .sk-stance   { color: #8a6000; }
html[data-theme="light"] .sk-summon   { color: #0d6f6f; }
html[data-theme="light"] .sk-active   { color: var(--sil-700); }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: var(--gap-lg) 0 0; }
.pill {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
}
.pill:hover { border-color: var(--accent); color: var(--text); }
.pill--strong { border-color: var(--accent); color: var(--accent); }

/* --- the tree ----------------------------------------------------------- */

.tree { padding-block: var(--gap-lg) var(--gap-xl); }

.tree-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg) var(--gap-md);
  margin-bottom: var(--gap-lg);
  background: var(--bg-panel);
}
.tree-head { max-width: 62ch; margin-bottom: var(--gap-lg); }
.tree-head h2 { font-size: var(--step-2); margin-bottom: 0.3rem; }
.tree-head p { color: var(--text-muted); margin: 0; font-size: 0.96rem; }

.tree-row {
  display: grid;
  gap: var(--gap-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

/* The connector between rows. Purely decorative, and it disappears rather
   than lying about the shape of the tree on a narrow screen. */
.tree-link {
  height: var(--gap-md);
  margin-inline: auto;
  width: 1px;
  background: linear-gradient(var(--line-strong), transparent);
}

.node {
  display: block;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.node:hover { border-color: var(--accent); border-top-color: var(--accent); transform: translateY(-2px); color: inherit; }
.node-name { display: block; font-weight: 700; font-size: 0.98rem; }
.node-tag { display: block; font-size: var(--step--1); color: var(--text-dim); margin-top: 0.15rem; line-height: 1.4; }

/* One colour per tier, on the top edge, so a row reads as a rank. */
.node--orphan { border-top-color: var(--sil-300); }
.node--first  { border-top-color: var(--rank-b); }
.node--second { border-top-color: var(--pur-300); }
.node--spec   { border-top-color: var(--rank-a); }
.node--final  { border-top-color: var(--rank-s); }
.node--expert { border-top-color: var(--rank-ss); }
.node--alt    { border-top-color: var(--sil-500); }

/* ==========================================================================
  14. Long-form reference pages
   ========================================================================== */

/* A sticky contents rail beside the prose on wide screens, a plain list of
   links above it on narrow ones. */
.doc {
  display: grid;
  gap: var(--gap-xl);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--gap-xl);
}

@media (min-width: 1000px) {
  .doc { grid-template-columns: 220px minmax(0, 1fr); }
  .doc-toc {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 3rem);
    overflow-y: auto;
  }
}

.doc-toc h2 {
  font-family: var(--font-body);
  font-size: var(--font-min);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.doc-toc li { margin: 0; }
.doc-toc a {
  display: block;
  padding: 0.35rem 0.8rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.doc-toc a:hover { color: var(--text); border-left-color: var(--accent); }

.doc-body > section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.doc-body > section + section { margin-top: var(--gap-2xl); }
.doc-body h2 { font-size: var(--step-3); }
.doc-body h3 { margin-top: var(--gap-lg); font-size: var(--step-1); }
.doc-body p, .doc-body li { color: var(--text-muted); }
.doc-body p strong, .doc-body li strong { color: var(--text); }
.doc-body > section > p:first-of-type { font-size: var(--step-1); }

.def-list {
  display: grid;
  gap: 0;
  margin: var(--gap-md) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.def-list > div {
  display: grid;
  grid-template-columns: minmax(140px, 26%) 1fr;
  gap: var(--gap-md);
  padding: 0.75rem var(--gap-md);
  border-bottom: 1px solid var(--line);
}
.def-list > div:last-child { border-bottom: 0; }
.def-list dt { font-weight: 700; }
.def-list dd { margin: 0; color: var(--text-muted); }

@media (max-width: 560px) {
  .def-list > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

.steps { list-style: none; counter-reset: step; padding: 0; margin: var(--gap-md) 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; margin-bottom: var(--gap-md); }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.steps h3 { margin: 0 0 0.25rem; font-size: 1.02rem; }

/* The root of the tree is one node, so it should not stretch across the full
   grid width and pretend to be a row of six. */
.tree-row--single { grid-template-columns: minmax(0, 320px); }

.tree-group--root { background: color-mix(in srgb, var(--accent) 7%, var(--bg-panel)); }

@media print { .js .reveal { opacity: 1; transform: none; } }