:root {
  --deep: #122934;
  --ink: #183744;
  --slate: #1e4555;
  --blue: #6999be;
  --blue-bright: #8bb7d1;
  --brass: #c9ad75;
  --paper: #e7ebdf;
  --mist: #c8d5d2;
  --muted: #96afb2;
  --line: rgba(201, 173, 117, .42);
  --ink-line: rgba(24, 55, 68, .2);
  --sans: "Avenir Next", "Gill Sans", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--deep); font: 17px/1.65 var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
*:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 20; padding: 8px 12px; color: var(--deep); background: var(--brass); }
.skip-link:focus { left: 8px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--brass); color: var(--brass); font-weight: 800; letter-spacing: -.08em; }
.brand strong { display: block; font-size: 1.05rem; line-height: 1.15; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: .75rem; line-height: 1; }

/* Home: an architectural image establishes the place, then the shelf answers the query. */
.home-page { background: var(--deep); }
.home-main { min-height: 100svh; max-width: 1500px; margin: 0 auto; background: linear-gradient(115deg, #122934 0%, #183744 55%, #1d4555 100%); }
.home-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px clamp(20px, 5vw, 76px); border-bottom: 1px solid rgba(201, 173, 117, .28); }
.home-topbar nav { display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 3vw, 42px); color: var(--mist); font-size: .88rem; }
.home-topbar nav a { display: inline-flex; align-items: center; min-height: 44px; }
.home-topbar nav a:hover { color: #fff; }
.home-hero { display: grid; grid-template-columns: minmax(350px, .72fr) minmax(0, 1.28fr); min-height: 500px; padding: 30px clamp(20px, 5vw, 76px) 0; gap: clamp(28px, 5vw, 72px); }
.home-copy { align-self: center; padding: 18px 0 52px; }
.home-kicker, .guide-kicker, .toc-label, .room-index-mark { color: var(--brass); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.home-kicker { margin: 0 0 15px; }
.home-copy h1 { max-width: 560px; margin: 0; color: #f4f4ea; font-size: clamp(2.5rem, 4.2vw, 3.25rem); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; }
.lead { max-width: 520px; margin: 20px 0 0; color: var(--mist); font-size: 1.12rem; }
.guide-search { max-width: 560px; margin: 26px 0 0; }
.guide-search label, .lookup-form label { display: block; margin-bottom: 8px; color: var(--paper); font-weight: 700; font-size: .86rem; }
.search-field { display: flex; min-height: 50px; border: 1px solid rgba(231, 235, 223, .55); background: rgba(10, 28, 37, .55); }
.search-field input { width: 0; min-width: 0; flex: 1; border: 0; padding: 10px 13px; color: var(--paper); background: transparent; }
.search-field input::placeholder { color: #9bb0b2; }
.search-field button { min-width: 78px; border: 0; border-left: 1px solid rgba(231, 235, 223, .2); color: var(--deep); background: var(--brass); font-weight: 700; }
.search-field button:hover { background: #e1c98f; }
.search-field .clear-button { color: var(--paper); background: transparent; }
.search-field .clear-button:hover { background: rgba(139, 183, 209, .18); }
.search-hint { margin: 7px 0 0; color: var(--muted); font-size: .84rem; }
.home-visual { position: relative; min-height: 440px; margin: 0; overflow: hidden; border-left: 1px solid rgba(201, 173, 117, .35); }
.home-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 41, 52, .68), transparent 30%, rgba(18, 41, 52, .06) 75%), linear-gradient(0deg, rgba(18, 41, 52, .72), transparent 42%); pointer-events: none; }
.home-visual img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.06); }
.home-visual figcaption { position: absolute; right: 18px; bottom: 15px; z-index: 1; max-width: 420px; color: #d5dfdc; font-size: .72rem; line-height: 1.35; text-align: right; }
.home-visual figcaption a, .art-credit a { color: var(--brass); text-decoration: underline; }
.room-shelf { padding: 28px clamp(20px, 5vw, 76px) 32px; border-top: 1px solid rgba(201, 173, 117, .4); background: #183744; }
.shelf-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 15px; }
.shelf-heading h2 { margin: 0; color: #f0f1e7; font-size: 1.4rem; line-height: 1.25; }
.shelf-heading p { margin: 0; color: var(--muted); font-size: .9rem; }
.room-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(201, 173, 117, .4); border-bottom: 1px solid rgba(201, 173, 117, .4); }
.room-link { display: grid; grid-template-columns: 50px minmax(0, 1fr) 25px; gap: 13px; align-items: center; min-height: 120px; padding: 17px 18px; border-right: 1px solid rgba(201, 173, 117, .3); color: var(--paper); }
.room-link:last-child { border-right: 0; }
.room-link:hover { color: #fff; background: rgba(105, 153, 190, .13); text-decoration: none; }
.room-icon { display: grid; place-items: center; width: 50px; height: 50px; color: var(--blue-bright); border: 1px solid rgba(139, 183, 209, .42); }
.room-icon svg { width: 40px; height: 40px; }
.room-copy strong { display: block; color: #f1f2e9; font-size: 1.08rem; line-height: 1.25; }
.room-copy span { display: block; margin-top: 4px; color: var(--mist); font-size: .9rem; line-height: 1.35; }
.room-arrow { color: var(--brass); font-size: 1.4rem; text-align: right; }
.home-footnote { max-width: 660px; margin: 19px clamp(20px, 5vw, 76px) 0; color: var(--muted); font-size: .82rem; }
.site-footer { max-width: 1320px; margin: 0 auto; padding: 20px clamp(20px, 5vw, 76px) 30px; border-top: 1px solid rgba(201, 173, 117, .28); color: var(--muted); background: var(--deep); font-size: .8rem; line-height: 1.5; }
.site-footer details { max-width: 780px; }
.site-footer summary { display: inline-flex; min-height: 44px; align-items: center; color: var(--brass); cursor: pointer; font-weight: 700; }
.site-footer p { max-width: 760px; margin: 8px 0 0; }
.site-footer a { color: var(--brass); text-decoration: underline; }
.analytics-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.analytics-status { flex: 1 1 100%; }
.analytics-controls button { min-height: 44px; padding: 6px 12px; border: 1px solid rgba(201, 173, 117, .6); color: var(--deep); background: var(--brass); font-size: .8rem; font-weight: 700; }
.analytics-controls button:hover { background: #e1c98f; }
.analytics-controls button[hidden] { display: none; }

/* Guide pages: the hall image carries the atmosphere; the article remains a quiet reading canvas. */
.guide-page { background: var(--ink); color: var(--paper); }
.guide-main-root { min-height: 100svh; }
.guide-hero { position: relative; min-height: 530px; overflow: hidden; background: var(--deep); }
.guide-hero-art { position: absolute; inset: 0; z-index: 0; }
.guide-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 41, 52, .97) 0%, rgba(18, 41, 52, .82) 34%, rgba(18, 41, 52, .28) 73%, rgba(18, 41, 52, .48) 100%), linear-gradient(0deg, rgba(18, 41, 52, .9), transparent 54%); }
.guide-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.65) contrast(1.08); }
.art-credit { position: absolute; right: clamp(20px, 5vw, 76px); bottom: 16px; z-index: 1; margin: 0; color: #d5dfdc; font-size: .72rem; line-height: 1.35; }
.guide-hero-shade { position: relative; z-index: 1; min-height: 530px; }
.guide-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1500px; margin: 0 auto; padding: 15px clamp(20px, 5vw, 76px); border-bottom: 1px solid rgba(201, 173, 117, .3); }
.top-brand { display: inline-flex; align-items: center; gap: 11px; }
.top-brand .brand-mark { width: 35px; height: 35px; font-size: .9rem; }
.top-brand strong { display: block; font-size: .94rem; line-height: 1.1; }
.top-brand small { display: block; margin-top: 3px; color: var(--muted); font-size: .68rem; line-height: 1; }
.guide-topbar nav { display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 3vw, 38px); color: var(--mist); font-size: .84rem; }
.guide-topbar nav a { display: inline-flex; align-items: center; min-height: 44px; }
.guide-topbar nav a:hover, .guide-topbar nav a[aria-current="page"] { color: #fff; text-decoration: none; }
.guide-topbar nav a[aria-current="page"] { border-bottom: 2px solid var(--brass); }
.guide-hero-inner { display: block; max-width: 1320px; min-height: 462px; margin: 0 auto; padding: 60px clamp(20px, 5vw, 76px) 62px; }
.guide-kicker { margin: 0 0 15px; color: var(--brass); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.guide-title-block, .guide-answer { max-width: 620px; }
.guide-title-block h1 { max-width: 620px; margin: 0; color: #f0f2e8; font-size: clamp(2.1rem, 3.4vw, 2.625rem); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; }
.guide-answer { margin-top: 20px; }
.guide-answer .answer-block { margin: 0; padding: 18px 20px; border: 1px solid rgba(201, 173, 117, .62); border-left: 5px solid var(--brass); background: rgba(18, 41, 52, .84); color: var(--paper); box-shadow: 0 12px 32px rgba(4, 18, 25, .22); }
.answer-block p { margin: 0; }
.answer-block .answer-label { margin-bottom: 7px; color: var(--brass); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.guide-layout { display: grid; grid-template-columns: 172px minmax(0, 1fr); max-width: 1320px; margin: 0 auto; background: #d9e4e8; color: var(--ink); }
.guide-aside { padding: 50px 18px 80px 0; border-right: 1px solid var(--ink-line); }
.toc { position: sticky; top: 24px; display: grid; gap: 2px; padding-left: 15px; border-left: 2px solid rgba(201, 173, 117, .7); font-size: .86rem; }
.toc-label { padding: 7px 0; color: #507786; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; color: #507786; }
.toc a:hover { color: var(--ink); }
.guide-main { min-width: 0; padding: 50px clamp(24px, 5vw, 78px) 90px; }
.guide-main > section { max-width: 1040px; }
.guide-main > section:not(.sources) { border-top: 1px solid var(--ink-line); margin-top: 42px; padding-top: 30px; }
.guide-main > section:first-of-type { margin-top: 0; }
.guide-main h2 { margin: 0 0 16px; color: var(--ink); font-size: 1.7rem; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.guide-main h3 { margin: 26px 0 7px; font-size: 1.08rem; }
.guide-main p, .guide-main li { max-width: 720px; }
.guide-main p { margin-top: 0; }
.guide-main ol, .guide-main ul { padding-left: 1.35rem; }
.guide-main li + li { margin-top: 9px; }
.mobile-toc { display: none; }

.guide-main > section:has(> .mechanism-figure) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); column-gap: clamp(28px, 5vw, 68px); align-items: start; }
.guide-main > section:has(> .mechanism-figure) > h2 { grid-column: 1 / -1; }
.guide-main > section:has(> .mechanism-figure) > .mechanism-figure { grid-column: 2; grid-row: 2 / span 20; align-self: start; }
.guide-main > section:has(> .mechanism-figure) > p, .guide-main > section:has(> .mechanism-figure) > ol, .guide-main > section:has(> .mechanism-figure) > ul, .guide-main > section:has(> .mechanism-figure) > .table-wrap { grid-column: 1; }
.mechanism-figure { min-width: 0; margin: 0; padding: 10px; border: 1px solid rgba(201, 173, 117, .5); background: var(--slate); color: var(--paper); }
.diagram-wrap { padding: 0; overflow: hidden; background: var(--slate); }
.diagram { display: block; width: 100%; max-width: 100%; height: auto; }
.mechanism-figure figcaption { margin: 10px 2px 0; color: var(--mist); font-size: .86rem; line-height: 1.45; }
.mechanism-figure .diagram [fill="#eaf0f3"] { fill: var(--slate) !important; }
.mechanism-figure .diagram [fill="#fff"] { fill: #294f5e !important; }
.mechanism-figure .diagram [fill="#fff0c9"] { fill: rgba(201, 173, 117, .24) !important; }
.mechanism-figure .diagram [stroke="#24323a"] { stroke: #bfd0ce !important; }
.mechanism-figure .diagram [stroke="#8b1e2d"] { stroke: var(--brass) !important; }
.mechanism-figure .diagram [fill="#8b1e2d"] { fill: var(--brass) !important; }
.mechanism-figure .diagram [stroke="#1476d4"] { stroke: var(--blue-bright) !important; }
.mechanism-figure .diagram .diagram-title { fill: var(--paper) !important; }
.mechanism-figure .diagram .diagram-label { fill: #f1f2e8 !important; }
.mechanism-figure .diagram .diagram-note { fill: var(--mist) !important; }
.mechanism-figure .diagram .board-cell { fill: #294f5e !important; stroke: #7ea7b5 !important; }
.mechanism-figure .diagram .board-example { fill: rgba(201, 173, 117, .3) !important; stroke: var(--brass) !important; }
.chess-diagram { font-family: var(--sans); }
.chess-diagram .diagram-title, .chess-diagram .diagram-label { font-size: 25px; font-weight: 700; }
.chess-diagram .diagram-note { font-size: 25px; font-weight: 700; letter-spacing: 1px; }
.chess-diagram .piece-stroke { fill: none; stroke: var(--brass); stroke-width: 3; stroke-linecap: round; }
.chess-diagram .diagram-arrow { fill: none; stroke: var(--brass); stroke-width: 3; }
.table-wrap { overflow-x: auto; }
.piece-table, .route-table { width: 100%; border-collapse: collapse; margin: 20px 0; color: var(--ink); font-size: 1rem; text-align: left; }
.piece-table caption, .route-table caption { margin-bottom: 9px; color: #527685; font-size: .9rem; text-align: left; }
.piece-table th, .piece-table td, .route-table th, .route-table td { padding: 13px 12px; border-top: 1px solid var(--ink-line); vertical-align: top; }
.piece-table th, .route-table th { width: 120px; color: #315f70; font-weight: 700; }
.sources { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ink-line); color: #496b78; font-size: 1rem; }
.sources h2 { color: var(--ink); }
.sources a, .text-link { color: #2e6f8d; text-decoration: underline; }
.guide-footer { display: flex; justify-content: space-between; gap: 18px; margin-top: 60px; padding-top: 18px; border-top: 1px solid var(--ink-line); color: #577984; font-size: .85rem; }
.guide-footer a { color: #2e6f8d; text-decoration: underline; }
.not-found-page { min-height: 100svh; background: var(--deep); }
.not-found { max-width: 720px; margin: 0 auto; padding: 42px 24px 18vh; }
.not-found-kicker { margin: 80px 0 14px; color: var(--brass); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.not-found h1 { max-width: 620px; margin: 0; color: var(--paper); font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.08; }
.not-found p:not(.not-found-kicker) { max-width: 540px; color: var(--mist); }

@media (max-width: 1100px) {
  .home-hero { grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: 30px; }
  .guide-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(280px, 390px); gap: 38px; }
  .guide-layout { grid-template-columns: 150px minmax(0, 1fr); }
  .guide-main > section:has(> .mechanism-figure) { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); column-gap: 32px; }
}

@media (max-width: 800px) {
  body { font-size: 17px; }
  .home-topbar, .guide-topbar { display: block; padding: 14px 20px 10px; }
  .home-topbar nav, .guide-topbar nav { display: flex; flex-wrap: nowrap; max-width: 100%; margin-top: 8px; overflow-x: auto; gap: 20px; padding-bottom: 3px; white-space: nowrap; }
  .home-topbar nav a, .guide-topbar nav a { flex: 0 0 auto; min-height: 44px; }
  .home-hero { display: flex; flex-direction: column; min-height: 0; gap: 0; padding: 0; }
  .home-visual { order: -1; height: 124px; min-height: 124px; margin: 0; border-left: 0; border-bottom: 1px solid rgba(201, 173, 117, .4); }
  .home-visual img { min-height: 124px; height: 124px; object-position: center 50%; }
  .home-visual::after { background: linear-gradient(90deg, rgba(18, 41, 52, .72), rgba(18, 41, 52, .12)), linear-gradient(0deg, rgba(18, 41, 52, .65), transparent 65%); }
  .home-visual figcaption { right: 12px; bottom: 8px; max-width: 280px; font-size: .66rem; }
  .home-copy { padding: 22px 20px 25px; }
  .home-copy h1 { font-size: clamp(2rem, 8.5vw, 2.35rem); letter-spacing: -.035em; }
  .lead { margin-top: 12px; font-size: 1rem; }
  .guide-search { margin-top: 19px; }
  .room-shelf { padding: 24px 20px 26px; }
  .shelf-heading { margin-bottom: 13px; }
  .shelf-heading h2 { font-size: 1.22rem; }
  .room-index { grid-template-columns: 1fr; }
  .room-link { grid-template-columns: 50px minmax(0, 1fr) 25px; min-height: 90px; padding: 14px 0; border-right: 0; border-bottom: 1px solid rgba(201, 173, 117, .3); }
  .room-link:last-child { border-bottom: 0; }
  .room-copy span { font-size: .96rem; }
  .home-footnote { margin: 17px 20px 0; font-size: .82rem; }
  .site-footer { padding: 18px 20px 26px; }
  .analytics-controls { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .analytics-controls button { width: 100%; }

  .guide-hero { min-height: 0; }
  .guide-hero-art { position: relative; height: 124px; }
  .guide-hero-art::after { background: linear-gradient(90deg, rgba(18, 41, 52, .62), rgba(18, 41, 52, .1)), linear-gradient(0deg, rgba(18, 41, 52, .65), transparent 65%); }
  .guide-hero-art img { height: 124px; object-position: center 50%; }
  .art-credit { right: 12px; bottom: 8px; font-size: .66rem; }
  .guide-hero-shade { min-height: 0; background: var(--deep); }
  .guide-hero-inner { display: block; min-height: 0; padding: 25px 20px 28px; }
  .guide-kicker { margin-bottom: 9px; font-size: .7rem; }
  .guide-title-block h1 { font-size: clamp(1.9rem, 8vw, 2.1rem); line-height: 1.08; letter-spacing: -.035em; }
  .guide-answer { margin-top: 19px; }
  .guide-answer .answer-block { padding: 15px 15px; box-shadow: none; }
  .guide-layout { display: block; }
  .guide-aside { display: none; }
  .guide-main { padding: 0 20px 60px; }
  .mobile-toc { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--ink-line); }
  .mobile-toc a { display: inline-flex; align-items: center; min-height: 44px; color: #2e6f8d; font-size: .88rem; text-decoration: underline; }
  .guide-main > section:not(.sources) { margin-top: 30px; padding-top: 23px; }
  .guide-main h2 { font-size: 1.48rem; }
  .guide-main > section:has(> .mechanism-figure) { display: block; }
  .guide-main > section:has(> .mechanism-figure) > .mechanism-figure { margin-top: 22px; }
  .mechanism-figure { width: 100%; }
  .mechanism-figure figcaption { font-size: .88rem; }
  .piece-table th, .piece-table td, .route-table th, .route-table td { padding: 11px 8px; }
  .piece-table th, .route-table th { width: 92px; }
  .sources { margin-top: 42px; }
  .guide-footer { display: block; margin-top: 42px; }
  .guide-footer span { display: block; margin-top: 8px; }
  .not-found { padding: 30px 20px 20vh; }
}

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

/* Guide bodies: illustrated chapters on an architectural ink canvas. */
.guide-page .guide-layout {
  background:
    radial-gradient(circle at 12% 8%, rgba(105, 153, 190, .12), transparent 30rem),
    repeating-linear-gradient(135deg, rgba(180, 199, 209, .035) 0 1px, transparent 1px 18px),
    #173744;
  color: var(--paper);
}
.guide-page .guide-aside { background: rgba(10, 30, 40, .42); border-right-color: rgba(180, 199, 209, .18); }
.guide-page .toc { border-left-color: var(--brass); }
.guide-page .toc-label { color: var(--brass); }
.guide-page .toc a { color: var(--mist); }
.guide-page .toc a:hover { color: #fff; }
.guide-page .guide-main {
  background:
    radial-gradient(circle at 85% 4%, rgba(105, 153, 190, .09), transparent 28rem),
    repeating-linear-gradient(0deg, rgba(231, 235, 223, .025) 0 1px, transparent 1px 24px),
    #173744;
  color: var(--paper);
}
.guide-page .guide-main > section:not(.sources) { border-top: 0; margin-top: 0; padding-top: 66px; }
.guide-page .guide-main > section:first-of-type { padding-top: 8px; }
.guide-page .guide-main h2 { color: #f1f2e8; font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -.025em; }
.guide-page .guide-main h3 { color: #f1f2e8; }
.guide-page .guide-main p, .guide-page .guide-main li { color: #d6e0dc; }
.guide-page .guide-main strong { color: #fff8df; }
.guide-page .guide-main a { color: #b8d7e4; }
.guide-page .guide-main a:hover { color: #fff; }
.guide-page .mobile-toc { border-bottom-color: rgba(180, 199, 209, .22); }
.guide-page .mobile-toc a { color: #b8d7e4; }
.guide-page .lookup-form label { color: var(--paper); }
.guide-page .search-hint { color: var(--mist); }
.guide-page .table-wrap { background: rgba(10, 30, 40, .2); }
.guide-page .piece-table, .guide-page .route-table { color: var(--paper); }
.guide-page .piece-table caption, .guide-page .route-table caption { color: var(--mist); }
.guide-page .piece-table th, .guide-page .route-table th { color: var(--brass); }
.guide-page .piece-table th, .guide-page .piece-table td, .guide-page .route-table th, .guide-page .route-table td { border-top-color: rgba(180, 199, 209, .26); }
.guide-page .piece-table tbody th::before { display: inline-block; width: 1.35em; margin-right: .3em; color: var(--brass); font-size: 1.12em; line-height: 1; }
.guide-page .piece-table tbody tr:nth-child(1) th::before { content: "♔"; }
.guide-page .piece-table tbody tr:nth-child(2) th::before { content: "♕"; }
.guide-page .piece-table tbody tr:nth-child(3) th::before { content: "♗"; }
.guide-page .piece-table tbody tr:nth-child(4) th::before { content: "♖"; }
.guide-page .piece-table tbody tr:nth-child(5) th::before { content: "♘"; }
.guide-page .piece-table tbody tr:nth-child(6) th::before { content: "♙"; }


.guide-page .scene-figure {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(201, 173, 117, .55);
  background: #102d39;
  box-shadow: 0 16px 34px rgba(3, 16, 23, .28);
}
.guide-page .scene-image-link { display: block; overflow: hidden; }
.guide-page .scene-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.88) contrast(1.06); transition: transform .35s ease, filter .35s ease; }
.guide-page .scene-image-link:hover img { transform: scale(1.025); filter: saturate(1) contrast(1.06); }
.guide-page .scene-figure figcaption { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 0; padding: 12px 14px 14px; color: var(--mist); font-size: .82rem; line-height: 1.4; }
.guide-page .scene-caption { flex: 1 1 100%; }
.guide-page .scene-credit { color: #91aeb8; font-size: .76rem; }
.guide-page .scene-source { color: var(--brass); font-size: .76rem; text-decoration: underline; }
.guide-page .mechanism-figure { border-color: rgba(201, 173, 117, .48); background: rgba(9, 27, 37, .7); box-shadow: 0 12px 28px rgba(3, 16, 23, .2); }
.guide-page .sources { color: #c9d6d3; border-top-color: rgba(180, 199, 209, .26); }
.guide-page .sources h2 { color: #f1f2e8; }
.guide-page .sources a, .guide-page .text-link { color: #b8d7e4; }
.guide-page .guide-footer { border-top-color: rgba(180, 199, 209, .24); color: #9db6bc; }
.guide-page .guide-footer a { color: #b8d7e4; }

@media (max-width: 800px) {
  .guide-page .guide-layout {
    background:
      repeating-linear-gradient(135deg, rgba(180, 199, 209, .035) 0 1px, transparent 1px 18px),
      #173744;
  }
  .guide-page .guide-main {
    padding: 0 20px 64px;
    background:
      repeating-linear-gradient(0deg, rgba(231, 235, 223, .025) 0 1px, transparent 1px 24px),
      #173744;
  }
  .guide-page .guide-main > section:not(.sources) { padding-top: 46px; }
  .guide-page .guide-main > section:first-of-type { padding-top: 8px; }
  .guide-page .scene-figure { width: 100%; }
  .guide-page .scene-figure figcaption { font-size: .8rem; }
  .guide-page .scene-credit, .guide-page .scene-source { font-size: .74rem; }
  .guide-page .guide-main h2 { font-size: 1.55rem; }
}

.guide-page .scene-figure img { height: auto; aspect-ratio: auto; }

/* Chapter wrapper: the heading stays first; copy and media then alternate as a unit. */
.guide-page .guide-main > section:not(.sources)::before { content: none; display: none; }
.guide-page .guide-main > section.guide-section:has(> .chapter-layout) {
  display: block;
  max-width: 1180px;
}
.guide-page .chapter-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
  grid-template-areas:
    "intro scene"
    "rest annotation";
  column-gap: clamp(32px, 5vw, 86px);
  row-gap: 34px;
  align-items: start;
}
.guide-page .chapter-layout:not(:has(> .chapter-annotation)) {
  grid-template-areas:
    "intro scene"
    "rest rest";
}
.guide-page .chapter-copy { min-width: 0; }
.guide-page .chapter-intro { grid-area: intro; }
.guide-page .chapter-scene { grid-area: scene; min-width: 0; }
.guide-page .chapter-rest { grid-area: rest; min-width: 0; }
.guide-page .chapter-annotation { grid-area: annotation; min-width: 0; }
.guide-page .chapter-media .mechanism-figure { margin: 0; }

@media (max-width: 1100px) {
  .guide-page .chapter-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 38%); column-gap: 34px; }
}

@media (max-width: 800px) {
  .guide-page .chapter-layout { display: flex; flex-direction: column; gap: 0; }
  .guide-page .chapter-scene { margin: 24px 0 28px; }
  .guide-page .chapter-annotation { margin-top: 0; }
}