/* =============================================================================
   Vast: The Mysterious Manor — Setup & Reference Utility
   Design: the Manor's own rulebook. The official living rules (vast.mm.livingrules.io) frame a white
   page on the Manor's teal-to-purple herringbone floor; the role setup sheets put each role on a coloured
   band with a white display title over a line drawing of the Manor's front door; the Haunted Hallways
   booklet sets white pages with DwarvenAxe headings ("1) Collect Ruin"), Norwester small-caps sub-heads,
   Noto Serif text, ► bullets and grey ink splatter.
   Fonts: New Rocker (for DwarvenAxe BB), Fjalla One (for Norwester), Noto Serif (the rulebook's own text face).
   Art: images/hero-manor.webp (living-rules header), role-*.webp (living-rules role art),
   floor.webp (living-rules floor texture), door.webp (setup-sheet line art), splatter.webp (Haunted Hallways).
   ============================================================================= */

:root {
  /* paper & ink */
  --paper:      #ffffff;
  --paper-2:    #f6f3fa;   /* configurator sheet */
  --lav:        #efebf6;   /* callouts, teaching script */
  --lav-2:      #c8c7df;   /* the living rules' sidebar lavender */
  --line:       #ddd5e8;
  --ink:        #1d1626;
  --ink-2:      #443a52;
  --ink-3:      #584e66;
  --ctl:        #85799a;   /* control borders, ≥3:1 on paper */
  /* the Manor */
  --manor:      #714692;   /* Manor setup-sheet band */
  --manor-deep: #4f2f6c;
  --night:      #211a2e;   /* box-art shadows: hero and footer ground */
  --night-2:    #352a49;
  --candle:     #f3d36b;
  --rust:       #93351f;   /* living-rules link colour */
  /* the five seats (setup-sheet bands) and the Cave */
  --seat-paladin:   #9c8417;
  --seat-skeletons: #2d5b3c;
  --seat-spider:    #901114;
  --seat-manor:     #714692;
  --seat-warlock:   #757172;
  --seat-cave:      #2c6a73;
  --hh:             #8f1116;  /* Haunted Hallways cover red */

  --measure: 70ch;
  --col-pad: 40px;
  --f-text: "Noto Serif", Georgia, "Times New Roman", serif;
  --f-display: "New Rocker", "Noto Serif", Georgia, serif;
  --f-label: "Fjalla One", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
  background: var(--night); color: var(--ink);
  font-family: var(--f-text); font-size: 1.0625rem; line-height: 1.6;
  min-height: 100vh; overflow-x: hidden; -webkit-text-size-adjust: 100%;
  font-synthesis: none;
}
a { color: var(--rust); text-underline-offset: 2px; }
a:hover { color: var(--manor-deep); }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
img { max-width: 100%; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The living rules frame the page on the Manor's herringbone floor (wide screens only).
   The tile is 640 px wide and centred, so its side seams always fall under the white column. */
@media (min-width: 1000px) {
  body {
    background:
      linear-gradient(rgba(33, 26, 46, .5), rgba(33, 26, 46, .5)),
      url("../images/floor.webp") center top / 640px auto repeat,
      var(--night-2);
  }
}

/* ---- header: the Manor's front door, and the five roles waiting outside ---------------------- */
.topbar {
  position: relative;
  background:
    linear-gradient(180deg, rgba(33, 26, 46, .86), rgba(33, 26, 46, .94)),
    url("../images/floor.webp") center 40% / cover no-repeat,
    var(--night);
  border-bottom: 6px solid var(--manor);
  color: #f1ecf8;
}
.hero {
  max-width: 1180px; margin: 0 auto; padding: 18px 32px 0;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(420px, 1fr); gap: 0 30px; align-items: end;
}
.hero-art { align-self: end; }
.brand-title { margin: 0; line-height: 0; }
.hero-img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%);
  mask-composite: intersect;
}
.hero-copy { padding: 26px 0 0; min-width: 0; }
.brand-sub {
  font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 3.1vw, 2.45rem); line-height: 1.05;
  color: var(--candle); text-shadow: 0 2px 0 #000;
}
.tagline { margin-top: 10px; max-width: 54ch; }
.tagline .tag-hook { display: block; font-style: italic; font-size: 1.16rem; line-height: 1.45; color: #ffffff; }

.seats {
  list-style: none; display: flex; align-items: flex-end; gap: 8px;
  margin-top: 26px; padding: 0 2px; position: relative;
}
.seats::before {     /* the floor the five stand on */
  content: ""; position: absolute; left: -10px; right: -10px; bottom: 10px; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 199, 223, .28), rgba(200, 199, 223, 0));
}
/* each figure gets a share of the row in proportion to its picture's width, so none is squeezed */
.seat { position: relative; flex: var(--ar) 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.seat img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5)); }
.seat-manor img { width: 86%; margin-bottom: 12px; }
.seat span {
  position: relative; z-index: 1; margin-top: -6px; margin-bottom: 12px; padding: 1px 8px 2px;
  font-family: var(--f-label); font-size: 0.82rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.35; white-space: nowrap;
  color: #ffffff; background: var(--seat-c); border: 1px solid rgba(255, 255, 255, .55); border-radius: 2px;
}
.seat-paladin   { --seat-c: #7a6710; --ar: .714; }
.seat-skeletons { --seat-c: var(--seat-skeletons); --ar: .664; }
.seat-spider    { --seat-c: var(--seat-spider); --ar: .745; }
.seat-manor     { --seat-c: var(--seat-manor); --ar: 1.205; }
.seat-warlock   { --seat-c: #615e5f; --ar: .732; }

/* ---- the page: a white sheet ------------------------------------------------------------------ */
main {
  position: relative; isolation: isolate;
  max-width: 980px; margin: 0 auto; padding: 8px var(--col-pad) 56px;
  background: var(--paper);
  box-shadow: 0 0 3.5rem rgba(0, 0, 0, .55);
}
/* grey ink splatter bleeding off the page edge, as in the Haunted Hallways booklet */
main::before, main::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 380px; height: 280px; background: url("../images/splatter.webp") no-repeat center / contain; opacity: .13;
}
main::before { top: 40px; right: -150px; transform: rotate(-12deg); }
main::after { bottom: 120px; left: -210px; width: 320px; transform: rotate(168deg); }
main { overflow: hidden; overflow: clip; }

.sec { margin-top: 52px; }
.sec:first-child, .page-intro + .sec { margin-top: 30px; }
.page-intro {
  margin-top: 30px; max-width: var(--measure); padding: 2px 0 2px 18px; border-left: 4px solid var(--manor);
  font-size: 1.08rem; line-height: 1.6; color: var(--ink-2);
}
section h2 {
  font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 4.2vw, 2.65rem); line-height: 1.08;
  color: var(--ink); padding-bottom: 6px; margin-bottom: 10px; border-bottom: 3px solid var(--ink);
}
.sec-note { color: var(--ink-2); font-style: italic; margin-bottom: 18px; max-width: var(--measure); }

/* ---- configurator: a setup sheet -------------------------------------------------------------- */
.cfg {
  display: flex; flex-direction: column; gap: 24px;
  background: var(--paper-2); border: 1px solid var(--line); border-top: 6px solid var(--manor);
  padding: 22px 24px 26px;
}
.cfg [hidden] { display: none !important; }
.cfg-label {
  display: block; margin-bottom: 9px;
  font-family: var(--f-label); font-weight: 400; font-size: 1.06rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
}
.cfg-label .hint {
  font-family: var(--f-text); font-style: italic; font-size: 0.94rem; letter-spacing: 0; text-transform: none; color: var(--ink-3);
}

.chips, .mods, .mode-grid, .mix-btns, .var-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mixes, .vars { display: flex; flex-direction: column; gap: 12px; }

.chip, .mode-btn, .mod, .mix-btn, .vis-btn, .var-btn {
  position: relative; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--ctl); border-radius: 3px;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.chip:hover, .mode-btn:hover, .mod:hover, .mix-btn:hover, .vis-btn:hover, .var-btn:hover {
  border-color: var(--manor-deep); box-shadow: 0 2px 0 var(--lav-2);
}
.chip.on, .mode-btn.on, .mod.on, .mix-btn.on, .vis-btn.on, .var-btn.on {
  background: var(--manor-deep); border: 2px solid var(--ink); color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}
/* selected = filled + a candle-gold check, never colour alone */
.chip.on::before, .mode-btn.on::before, .mod.on::before, .mix-btn.on::before, .vis-btn.on::before, .var-btn.on::before {
  content: "✓"; position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-text); font-size: 0.85rem; font-weight: 700; line-height: 1;
  background: var(--candle); color: var(--ink); border: 2px solid var(--ink); z-index: 1;
}
.chip.off, .mod.off, .mix-btn.off, .vis-btn.off, .var-btn.off {
  cursor: not-allowed; background: transparent; border-style: dashed; color: var(--ink-3); box-shadow: none;
}
.chip.off b, .vis-btn.off b, .var-btn.off b, .mix-btn.off b, .mod.off .mod-name { color: var(--ink-3); }
.chip.lock { cursor: default; }
.chip.lock:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); border-color: var(--ink); }

.chip, .vis-btn { display: flex; flex-direction: column; min-height: 50px; padding: 7px 16px 8px; }
.chip b, .vis-btn b, .mix-btn b, .var-btn b { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.chip span, .vis-btn span, .mix-btn span, .var-btn span { font-size: 0.875rem; line-height: 1.4; color: var(--ink-3); }
.on span, .on .mod-sum { color: #ece4f6 !important; }

/* sets in play: the core game's purple, Haunted Hallways' red */
#expansions .chip { border-left-width: 7px; }
#expansions .chip:nth-child(1) { border-left-color: var(--manor); }
#expansions .chip:nth-child(2) { border-left-color: var(--hh); }
#expansions .chip.on:nth-child(2) { border-left-color: #c4363c; }
#expansions .chip.on:nth-child(1) { border-left-color: #a77fd0; }

/* ways to play: each a little setup sheet with its own band */
.mode-btn { flex: 1 1 220px; padding: 12px 18px 15px; color: var(--ink-2); border-top-width: 7px; }
.mode-btn:nth-child(1) { border-top-color: var(--manor); }
.mode-btn:nth-child(2) { border-top-color: var(--seat-paladin); }
.mode-btn:nth-child(3) { border-top-color: var(--seat-cave); }
.mode-btn.on { border-top-width: 7px; }
.mode-btn.on:nth-child(1) { border-top-color: #a77fd0; }
.mode-btn.on:nth-child(2) { border-top-color: var(--candle); }
.mode-btn.on:nth-child(3) { border-top-color: #5fb3bd; }
.mode-btn b {
  display: block; margin-bottom: 4px;
  font-family: var(--f-display); font-weight: 400; font-size: 1.32rem; line-height: 1.15; color: var(--ink);
}
.mode-btn span { display: block; font-size: 0.95rem; line-height: 1.5; }
.mode-btn.on b { color: #ffffff; }

.mix-row, .var-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: start; }
.mix-count, .var-role {
  padding-top: 12px; font-family: var(--f-label); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.mix-btn { display: flex; flex-direction: column; min-height: 50px; padding: 7px 14px 8px; }
.star { color: #7a5c00; }
.on .star { color: var(--candle); }
.var-btn { display: flex; flex-direction: column; justify-content: center; min-height: 46px; padding: 6px 13px; }
.rank-btn { min-width: 66px; }

/* visitors and travelers: a bar in the colour of the seat they take */
#visitors .vis-btn:not(:first-child), #travelers .vis-btn { border-left-width: 7px; border-left-color: var(--seat); }
#visitors .vis-btn:nth-child(2), #travelers .vis-btn:nth-child(1), #travelers .vis-btn:nth-child(5) { --seat: var(--seat-paladin); }
#visitors .vis-btn:nth-child(3), #travelers .vis-btn:nth-child(2) { --seat: var(--seat-skeletons); }
#visitors .vis-btn:nth-child(4), #travelers .vis-btn:nth-child(3), #travelers .vis-btn:nth-child(6) { --seat: var(--seat-spider); }
#visitors .vis-btn:nth-child(5), #travelers .vis-btn:nth-child(4) { --seat: var(--seat-warlock); }
#visitors .vis-btn.on:not(:first-child), #travelers .vis-btn.on { border-left-color: var(--seat); }

/* Haunted Hallways options carry the expansion's red band */
.mod { flex: 1 1 240px; padding: 10px 16px 13px; color: var(--ink-2); border-top: 5px solid var(--hh); }
.mod.on { border-top: 5px solid #c4363c; }
.mod.off { border-top: 5px dashed var(--ctl); }
.mod-name { display: block; font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-bottom: 2px; }
.mod-sum { display: block; font-size: 0.93rem; line-height: 1.45; }
.mod.on .mod-name { color: #ffffff; }

/* ---- setup: role-sheet bands and "1)" headings ----------------------------------------------- */
.teach-bar { margin: 4px 0 22px; }
.phase { margin-top: 34px; }
.phase:first-child { margin-top: 10px; }
.phase-title {
  position: relative; overflow: hidden;
  margin: 0 calc(-1 * var(--col-pad)) 4px; padding: 11px var(--col-pad) 10px;
  font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; color: #ffffff;
  background: var(--manor);
}
.phase-title::after {   /* the Manor door, faint, as on the setup sheets */
  content: ""; position: absolute; right: 24px; top: -38px; width: 120px; height: 177px; pointer-events: none;
  background: url("../images/door.webp") no-repeat center / contain; opacity: .2; filter: brightness(0) invert(1);
}
.step { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 12px; padding: 18px 0 18px; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step-num {
  font-family: var(--f-display); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--manor);
  text-align: right; padding-top: 1px;
}
.step-num::after { content: ")"; }
.step-body { min-width: 0; }
.step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 6px; }
.step-head h4 { font-family: var(--f-display); font-weight: 400; font-size: 1.42rem; line-height: 1.2; color: var(--ink); }
.step-text { max-width: var(--measure); }
.step-text ul, .ref-body ul, .teach-panel ul { list-style: none; margin: 6px 0 6px; padding-left: 1.35em; }
.step-text ul > li, .ref-body ul > li, .teach-panel ul > li { position: relative; margin-bottom: 5px; }
.step-text ul > li::before, .ref-body ul > li::before, .teach-panel ul > li::before {
  content: "►"; position: absolute; left: -1.6em; top: .52em; font-size: .72em; line-height: 1; color: var(--manor);
}
.step-text ol { margin: 6px 0 6px 1.5em; }
.step-text ol > li { margin-bottom: 5px; padding-left: 2px; }
.step-text ol > li::marker { font-weight: 700; color: var(--manor-deep); }
.step-text ol + ul { margin-top: 10px; }
.step-text p + p, .step-text p + ul { margin-top: 8px; }
.inline-note {
  margin-top: 10px; padding: 9px 14px 10px; font-size: 1rem; line-height: 1.55; color: var(--ink-2);
  background: var(--lav); border-left: 4px solid var(--manor);
}

/* source tags: little banners, one colour per box */
.tag {
  display: inline-block; white-space: nowrap;
  font-family: var(--f-label); font-weight: 400; font-size: 0.84rem; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3;
  padding: 3px 17px 3px 9px; color: #ffffff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}
.tag-core   { background: #5b3780; }
.tag-mix    { background: #2c4a7c; }
.tag-var    { background: #8a3a1c; }
.tag-hh     { background: var(--hh); }
.tag-solo   { background: #6b5810; }
.tag-travel { background: #1f5f66; }

.src-line { margin-top: 10px; font-size: 0.875rem; line-height: 1.5; font-style: italic; color: var(--ink-3); }

/* ---- teaching script: the Manor's setup sheet ------------------------------------------------- */
#teachBtn, .teach-copy {
  position: relative; isolation: isolate; cursor: pointer;
  font-family: var(--f-label); font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
  background: transparent; border: 0;
}
#teachBtn::before, .teach-copy::before {   /* shaped like a breach marker */
  content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  transition: background-color .15s;
}
#teachBtn { min-height: 50px; padding: 11px 34px 10px; font-size: 1.12rem; color: #ffffff; }
#teachBtn::before { background: var(--manor-deep); }
#teachBtn:hover::before { background: var(--manor); }
#teachBtn[aria-expanded="true"]::before { background: var(--night); }
.teach-copy { min-height: 44px; padding: 9px 28px 8px; font-size: 0.98rem; color: var(--ink); }
.teach-copy::before { background: #ffffff; }
.teach-copy:hover::before { background: var(--candle); }

.teach-panel {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: calc(var(--measure) + 70px); margin: 0 0 30px; padding: 0 28px 24px;
  background: var(--lav); border: 2px solid var(--manor); border-top: 0;
}
.teach-panel::after {
  content: ""; position: absolute; z-index: -1; right: -40px; bottom: -30px; width: 300px; height: 443px; pointer-events: none;
  background: url("../images/door.webp") no-repeat center / contain; opacity: .1;
}
.teach-panel[hidden] { display: none; }
.teach-top {
  display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  margin: 0 -28px 16px; padding: 14px 28px 13px; background: var(--manor); color: #ffffff;
}
.teach-top h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.55rem; line-height: 1.15; }
.teach-note { font-style: italic; color: var(--ink-2); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--ctl); }
.teach-panel h4 {
  font-family: var(--f-label); font-weight: 400; font-size: 1.08rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--manor-deep); margin: 20px 0 6px;
}
.teach-panel p { margin-bottom: 10px; }
.teach-panel ul { margin-bottom: 12px; }

/* ---- reference: the living rules' coloured section bars ------------------------------------- */
#reference { margin-top: 8px; }
.ref { --bar: var(--lav-2); background: var(--paper); border: 1px solid var(--line); border-left: 7px solid var(--bar); margin-bottom: 6px; }
.ref[data-key="the-paladin"], .ref[data-key^="the-armored-knight"], .ref[data-key="visiting-the-manor-the-knight"], .ref[data-key^="solo-"] { --bar: var(--seat-paladin); }
.ref[data-key="the-skeletons"], .ref[data-key="visiting-the-manor-the-goblins"], .ref[data-key^="haunted-hallways-new-skeletons"] { --bar: var(--seat-skeletons); }
.ref[data-key="the-spider"], .ref[data-key^="the-shadow-paladin"], .ref[data-key="visiting-the-manor-the-dragon"] { --bar: var(--seat-spider); }
.ref[data-key="the-manor"] { --bar: var(--seat-manor); }
.ref[data-key="the-warlock"], .ref[data-key="visiting-the-manor-the-thief"] { --bar: var(--seat-warlock); }
.ref[data-key^="traveling-"], .ref[data-key^="visiting-the-cave"] { --bar: var(--seat-cave); }
.ref summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 10px 14px 10px 16px;
  font-family: var(--f-label); font-weight: 400; font-size: 1.14rem; letter-spacing: .045em; text-transform: uppercase; line-height: 1.3;
  color: var(--ink);
}
.ref summary::-webkit-details-marker { display: none; }
.ref summary::after {   /* a square tile: + to reveal, − to close */
  content: "+"; flex: none; margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: 2px solid var(--manor-deep); color: var(--manor-deep); background: var(--paper);
  font-family: var(--f-text); font-weight: 700; font-size: 1.4rem; line-height: 1;
}
.ref[open] summary::after { content: "\2212"; background: var(--manor-deep); color: #ffffff; }
.ref summary:hover { background: var(--paper-2); }
.ref[open] > summary { background: var(--lav); border-bottom: 1px solid var(--line); }
.ref-body { padding: 10px 22px 22px 20px; max-width: calc(var(--measure) + 60px); overflow-x: auto; }
.ref-body h4 {
  font-family: var(--f-label); font-weight: 400; font-size: 1.04rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--manor-deep); margin: 18px 0 5px;
}
.ref-body h4:first-child { margin-top: 6px; }
.ref-body p { margin-bottom: 9px; }
.ref-body ol { margin: 6px 0 12px 1.5em; }
.ref-body ol > li { margin-bottom: 5px; }
.ref-body ol > li::marker { font-weight: 700; color: var(--manor-deep); }
.ref-body ul { margin-bottom: 12px; }
.ref-body li ul { margin-top: 5px; margin-bottom: 4px; }
.ref-body li ul > li::before { content: "▹"; font-size: .8em; top: .3em; }
.ref-body .aid-icon-grid { margin: 8px 0 10px; }   /* rulebook marker pictures (css/icons.css) */
.ref-body ul.aid-icons { margin-top: 8px; }
.ic-nw { white-space: nowrap; }   /* an inline rulebook icon stays on the line of the word it marks */
.ref-table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 1rem; line-height: 1.5; }
.ref-table th, .ref-table td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.ref-table thead th {
  background: var(--manor-deep); color: #ffffff; border-color: var(--manor-deep);
  font-family: var(--f-label); font-weight: 400; font-size: 0.95rem; letter-spacing: .05em; text-transform: uppercase;
}
.ref-table tbody tr:nth-child(even) { background: var(--paper-2); }
.ref-table tbody th { font-weight: 700; }
.gloss dt { font-weight: 700; margin-top: 10px; color: var(--ink); }
.gloss dd { margin-left: 0; padding-left: 14px; border-left: 2px solid var(--lav-2); }
.ref-body > .src-line { margin-top: 14px; padding-top: 8px; border-top: 1px dotted var(--ctl); }

/* ---- search ------------------------------------------------------------------------------------ */
.rsearch-wrap { margin-bottom: 18px; max-width: calc(var(--measure) + 60px); }
#rresults { max-width: calc(var(--measure) + 60px); }
#rsearch {
  width: 100%; min-height: 54px; padding: 12px 16px 12px 50px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f2f6c' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") no-repeat 16px 50% / 22px;
  color: var(--ink); border: 2px solid var(--ctl); border-left: 7px solid var(--manor); border-radius: 0;
  font: inherit; -webkit-appearance: none; appearance: none;
}
#rsearch:hover { border-color: var(--manor-deep); border-left-color: var(--manor); }
#rsearch:focus { outline: 3px solid var(--rust); outline-offset: 2px; }
#rsearch::placeholder { color: var(--ink-3); opacity: 1; }
.rhint { color: var(--ink-2); font-style: italic; }
.rhit { padding: 12px 16px 13px; border: 1px solid var(--line); border-left: 5px solid var(--lav-2); background: var(--paper); margin-bottom: 10px; }
.rhit-src {
  font-family: var(--f-label); font-weight: 400; font-size: 0.95rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--manor-deep); margin-bottom: 5px;
}
.rhit-text { font-size: 1rem; line-height: 1.55; }
.rhit-text mark, .aid-srch mark { background: #f6dd85; color: var(--ink); padding: 0 2px; border-radius: 2px; }

/* ---- components glossary + search tokens ------------------------------------------------------ */
#components, .aid-srch {
  --comp-surface: #ffffff; --comp-fig: #f1edf7; --comp-ink: var(--ink); --comp-muted: var(--ink-3);
  --comp-line: var(--ctl); --comp-accent: var(--manor-deep); --comp-accent-ink: #ffffff;
  --comp-head-font: var(--f-label); --comp-radius: 3px;
}

/* ---- footer ------------------------------------------------------------------------------------ */
.footer {
  padding: 30px 24px 44px; text-align: center; font-style: italic; font-size: 0.95rem; line-height: 1.6; color: #ddd5ea;
  background:
    linear-gradient(rgba(33, 26, 46, .9), rgba(33, 26, 46, .96)),
    url("../images/floor.webp") center 70% / cover no-repeat,
    var(--night);
  border-top: 6px solid var(--manor);
}
.footer p { max-width: 70ch; margin: 0 auto; }

/* ---- responsive -------------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  main { box-shadow: none; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 0 var(--col-pad); }
  .hero-art { width: 100%; max-width: 660px; margin: 0 auto; }
  .hero-copy { padding: 10px 0 16px; }
  .tagline { max-width: none; }
  .seats { display: none; }
}
@media (max-width: 640px) {
  :root { --col-pad: 16px; }
  .hero-art { max-width: none; margin: 0 -16px; width: auto; }
  .hero-img {      /* full-bleed, cropped to the logo */
    height: clamp(168px, 40vw, 260px); object-fit: cover; object-position: 50% 75%;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, .55) 100%); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, .55) 100%); mask-composite: add;
  }
  main { padding: 4px var(--col-pad) 40px; }
  main::before { right: -220px; width: 300px; }
  main::after { left: -230px; width: 300px; }
  .sec { margin-top: 44px; }
  .brand-sub { font-size: 1.6rem; }
  .tagline .tag-hook { font-size: 1.06rem; }
  .page-intro { margin-top: 22px; font-size: 1.04rem; padding-left: 14px; }
  .cfg { padding: 18px 14px 20px; margin: 0 -6px; }
  .mode-btn, .mod { flex-basis: 100%; }
  .mix-row, .var-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mix-count, .var-role { padding-top: 0; }
  .phase-title { font-size: 1.4rem; }
  .phase-title::after { right: 10px; width: 90px; }
  .step { grid-template-columns: 38px minmax(0, 1fr); column-gap: 8px; }
  .step-num { font-size: 1.6rem; }
  .step-head h4 { font-size: 1.28rem; }
  .teach-panel { padding: 0 16px 18px; }
  .teach-top { margin: 0 -16px 12px; padding: 12px 16px 11px; }
  .teach-top h3 { font-size: 1.35rem; }
  .ref summary { font-size: 1.04rem; padding: 10px 10px 10px 12px; gap: 10px; }
  .ref-body { padding: 8px 12px 18px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}