/* Lion Dance 101 - site stylesheet
   Theme: lacquered black, cinnabar red and gold leaf, taken from the logo.
   Layout: a slim header bar; a cover page with a chapter index; chapter pages with a
   70ch reading column, a sticky section list on wide screens, and prev/next "turn the page" links. */

:root {
  --bg: #0b0908;          /* lacquer black */
  --bg-2: #141010;        /* raised lacquer */
  --bg-3: #1d1715;        /* panels */
  --ink: #efe6d6;         /* rice paper */
  --ink-soft: #d4c8b6;
  --muted: #9d8e80;
  --rule: #2f2623;
  --red: #d23b26;         /* cinnabar, from the logo */
  --red-deep: #9e2414;
  --gold: #dca54c;        /* gold leaf, from the lotus */
  --gold-soft: #b8873a;
  --jade: #6fbf98;
  --display: "Gloock", Georgia, "Songti TC", serif;
  --body: "Literata", Georgia, "Songti TC", serif;
  --label: "IBM Plex Sans Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --zh: "Songti TC", "STSong", "Noto Serif CJK TC", "Source Han Serif TC", "PMingLiU", "PingFang TC", "Microsoft JhengHei", serif;
  --measure: 70ch;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --strong: #fff4e6;
  --topbar: rgba(11, 9, 8, 0.92);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { min-width: 0; }
html { scroll-padding-block-start: 80px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; interpolate-size: allow-keywords; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (any-pointer: fine) { html { overscroll-behavior-y: none; } }
body {
  margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
  background-image: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(210, 59, 38, 0.10), transparent 60%);
  background-repeat: no-repeat;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a:hover { color: color-mix(in oklch, var(--gold) 70%, white); } }
:focus-visible { outline: max(2px, 0.08em) solid var(--gold); outline-offset: 0.2em; border-radius: 2px; }
a, button, summary, .chip { touch-action: manipulation; }
.zh { font-family: var(--zh); font-weight: 500; letter-spacing: 0.02em; }
.rom { font-style: italic; color: var(--ink-soft); }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 20px; }

/* ---------- Header bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--topbar); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top, 0px); }
.topbar .wrap { display: flex; align-items: center; gap: 14px; height: 60px; }
.topbar .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.topbar .brand .seal { font-size: 15px; }
.topbar .brand b { font-family: var(--display); font-weight: 400; font-size: 21px; white-space: nowrap; }
.topbar nav { margin-left: auto; display: flex; gap: 18px; font-family: var(--label); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.topbar nav a { color: var(--ink-soft); text-decoration: none; }
.topbar nav a[aria-current="page"] { color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .topbar nav a:hover { color: var(--gold); } }

/* ---------- Seal stamp (chapter numbers) ---------- */
.seal { display: inline-grid; place-items: center; min-width: 2.2em; height: 2.2em; padding: 0 0.25em; background: var(--red); color: #fff4e6; font-family: var(--zh); font-weight: 700; line-height: 1; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 244, 230, 0.25), inset 0 0 0 4px var(--red); letter-spacing: 0; }

/* ---------- Cover ---------- */
.cover { text-align: center; padding-block: 88px 36px; }
.cover .kicker { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.24em; font-size: 13px; color: var(--gold); margin: 0 0 10px; }
.cover h1 { font-family: var(--display); font-weight: 400; font-size: clamp(46px, 9vw, 104px); line-height: 1; margin: 0; letter-spacing: -0.01em; }
.cover h1 .zh { display: block; font-size: 0.42em; color: var(--red); letter-spacing: 0.3em; margin-top: 12px; }
.cover .dek { max-width: 40em; margin: 22px auto 0; font-size: clamp(17px, 2.1vw, 20px); color: var(--ink-soft); }
.cover .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin-top: 22px; font-family: var(--label); font-size: 14px; color: var(--muted); }
.cover .stats b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.goldrule { height: 0; border: 0; border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); padding-top: 3px; width: 140px; margin: 30px auto; opacity: 0.8; }

.contents h2 { font-family: var(--label); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 8px 0 16px; text-align: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 40px; }
.card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; color: var(--ink); transition: border-color 160ms ease, transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card:hover { border-color: var(--red); transform: translateY(-2px); color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) { .card:active, .turn a:active { transform: scale(0.98); } .turn a { transition: transform 160ms var(--ease-out), border-color 160ms ease; } }
.card .seal { font-size: 18px; }
.card b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.2; }
.card small { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; margin-top: 4px; }
.card .zt { font-family: var(--zh); color: var(--gold-soft); font-size: 14px; letter-spacing: 0.1em; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }

/* ---------- Chapter page ---------- */
.chhead { padding-block: 48px 10px; max-width: var(--measure); }
.chhead .eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--label); text-transform: uppercase; letter-spacing: 0.18em; font-size: 13px; color: var(--muted); }
.chhead .seal { font-size: 26px; }
.chhead h1 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5.5vw, 60px); line-height: 1.04; margin: 18px 0 8px; text-wrap: balance; }
.chhead .zt { font-family: var(--zh); font-size: 22px; color: var(--red); letter-spacing: 0.12em; margin: 0; }
.chhead .lede { font-size: 19px; color: var(--ink-soft); margin: 16px 0 0; }

.page { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 56px; align-items: start; padding-bottom: 40px; }
.toc { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; font-family: var(--label); font-size: 14px; border-left: 1px solid var(--rule); padding-left: 16px; }
.toc h2 { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; font-weight: 600; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.toc a { color: var(--muted); text-decoration: none; line-height: 1.3; display: block; }
.toc a.on { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--ink); } }
.toc a.on { box-shadow: -17px 0 0 -15px var(--red); }

/* ---------- Prose ---------- */
.prose { min-width: 0; }
.prose > * { max-width: var(--measure); }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.15; margin: 52px 0 12px; text-wrap: balance; color: var(--ink); }
.prose h2::before { content: ""; display: block; width: 36px; height: 3px; background: var(--red); margin-bottom: 14px; }
.prose h3 { font-family: var(--label); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; margin: 30px 0 8px; color: var(--gold); }
.prose p { margin: 0 0 15px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 16px; }
.prose li { margin: 0 0 6px; }
.prose li::marker { color: var(--red); }
.prose strong { color: var(--strong); }
.prose sup.fn { font-family: var(--label); font-size: 0.66em; line-height: 0; margin-left: 1px; }
.prose sup.fn a { text-decoration: none; color: var(--gold-soft); }
.prose sup.fn + sup.fn::before, .prose sup.fn a + a::before { content: ","; color: var(--muted); }
.prose a.vid { font-family: var(--label); font-size: 0.92em; }
.prose a.vid::before { content: "\25B6\00a0"; color: var(--red); font-size: 0.8em; }

.tablewrap { max-width: 100% !important; overflow-x: auto; margin: 20px 0 28px; border-top: 2px solid var(--gold-soft); background: var(--bg-2); border-radius: 0 0 4px 4px; }
table.data { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; }
table.data th { font-family: var(--label); font-weight: 600; text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); padding: 11px 12px 9px; border-bottom: 1px solid var(--rule); vertical-align: bottom; white-space: nowrap; }
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; min-width: 7em; color: var(--ink-soft); }
table.data td:first-child { color: var(--ink); font-variant-numeric: tabular-nums; }
table.data td.num, table.data th.num { min-width: 0; width: 3em; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { table.data tbody tr:hover { background: var(--bg-3); } }

aside { max-width: var(--measure); margin: 22px 0 26px; padding: 16px 20px; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--rule); }
aside h3 { margin: 0 0 6px !important; }
aside p:last-child { margin-bottom: 0; }
aside.note { border-left: 3px solid var(--jade); }
aside.note::before { content: "Coaching note"; display: block; font-family: var(--label); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--jade); margin-bottom: 6px; font-weight: 600; }
aside.contested { border-left: 3px solid var(--gold); }
aside.legend { border-left: 3px solid var(--red); background: linear-gradient(90deg, rgba(210, 59, 38, 0.08), transparent 40%), var(--bg-2); }
aside.legend h4 { color: var(--red) !important; }

ol.steps { list-style: none; counter-reset: st; padding: 0 !important; margin: 20px 0 28px; }
ol.steps > li { counter-increment: st; position: relative; padding: 13px 0 13px 3.4em; border-top: 1px solid var(--rule); margin: 0; }
ol.steps > li::before { content: counter(st); position: absolute; left: 0; top: 12px; width: 2.1em; height: 2.1em; display: grid; place-items: center; background: var(--red); color: #fff4e6; font-family: var(--label); font-weight: 600; font-size: 14px; border-radius: 3px; font-variant-numeric: tabular-nums; }
ol.steps > li > p:last-child, ol.steps > li > ul:last-child { margin-bottom: 0; }

blockquote.quote { max-width: var(--measure); margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--red); }
blockquote.quote p { font-family: var(--display); font-size: 23px; line-height: 1.35; margin: 0 0 8px; color: var(--strong); }
blockquote.quote cite { font-family: var(--label); font-style: normal; font-size: 14px; color: var(--muted); }

details.srcs { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 14px; }
details.srcs > summary { cursor: pointer; font-family: var(--label); font-size: 14px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
ol.sources { font-size: 14px; line-height: 1.5; color: var(--muted); padding-left: 2.2em; }
ol.sources li { margin-bottom: 5px; overflow-wrap: anywhere; }
ol.sources a { color: var(--ink-soft); }

figure.fig { margin: 26px 0 32px; max-width: 100%; overflow: hidden; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 4px; padding: 10px; }
figure.fig svg { width: 100%; height: auto; display: block; }
figure.fig figcaption { font-family: var(--label); font-size: 14px; color: var(--muted); margin-top: 8px; }

/* ---------- Prev / next ---------- */
.turn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 60px; }
.turn a { display: block; padding: 18px; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .turn a:hover { border-color: var(--red); } }
.turn small { display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--gold); margin-bottom: 4px; }
.turn b { font-family: var(--display); font-weight: 400; font-size: 20px; }
.turn .next { text-align: right; grid-column: 2; }

/* ---------- Timeline and glossary ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.chip { font-family: var(--label); font-size: 14px; border: 1px solid var(--rule); background: var(--bg-2); color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--red); color: #fff4e6; border-color: var(--red); }
.count { font-family: var(--label); font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.tl { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--gold-soft); max-width: 100% !important; }
.tl li { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.tl .when { font-family: var(--label); font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.tl .tag { font-family: var(--label); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); display: block; font-weight: 400; }
.tl h2 { font-family: var(--body); font-size: 17px; font-weight: 600; margin: 0 0 2px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.tl p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.gl-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 14px; }
.gl-tools input { font-size: max(16px, 1rem) !important; font-family: var(--label); padding: 9px 13px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg-2); color: var(--ink); width: 100%; max-width: 380px; }
.gl { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 28px; border-top: 2px solid var(--gold-soft); max-width: 100% !important; }
.gl .term { padding: 13px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.gl .term .t { font-weight: 600; }
.gl .term .z { font-family: var(--zh); font-size: 19px; margin-left: 6px; color: var(--red); }
.gl .term .r { font-family: var(--label); font-size: 13px; color: var(--muted); display: block; }
.gl .term .m { font-size: 15px; color: var(--ink-soft); margin: 4px 0 0; }
.gl .term .c { font-family: var(--label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--jade); }
.vlib { columns: 2 320px; column-gap: 32px; font-size: 15px; max-width: 100% !important; }
.vlib section { break-inside: avoid; margin-bottom: 20px; }
.vlib h2 { font-family: var(--label); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 8px; color: var(--gold); }
.vlib ul { list-style: none; padding: 0; margin: 0; }
.vlib li { padding: 4px 0; border-bottom: 1px dotted var(--rule); overflow-wrap: anywhere; }

footer.site { border-top: 1px solid var(--rule); padding-block: 26px 40px; font-family: var(--label); font-size: 14px; color: var(--muted); text-align: center; }

@media (max-width: 1000px) {
  .page { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar .brand b { display: none; }
  .topbar nav { gap: 14px; font-size: 13px; }
  .turn { grid-template-columns: 1fr; }
  .turn .next { grid-column: 1; }
  .tl li { grid-template-columns: minmax(0, 1fr); }
  .prose h2 { font-size: 26px; }
}

/* ---------- Additions after good-css.com review ---------- */
h1, h2, h3, h4 { text-wrap: balance; }
td, th { overflow-wrap: break-word; }
td, time, .count, .tl .when { font-variant-numeric: tabular-nums; }
.toc { overscroll-behavior: contain; scrollbar-width: thin; }

/* page turns: cross-document view transitions (Chrome, Edge, Safari 18.2+) */
@view-transition { navigation: auto; }

/* reading progress: a thin cinnabar-to-gold thread under the header on chapter pages */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .topbar::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; background: linear-gradient(90deg, var(--red), var(--gold)); transform-origin: 0 50%; transform: scaleX(0); animation: read-progress linear both; animation-timeline: scroll(root block); }
    body:not(:has(.chhead)) .topbar::after { display: none; }
  }
}
@keyframes read-progress { to { transform: scaleX(1); } }

/* wide tables: fade the right edge only while more columns are hidden */
@property --fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes table-fade { from { --fade-end: 3rem; } to { --fade-end: 0px; } }
@supports (animation-timeline: scroll()) {
  .tablewrap { mask-image: linear-gradient(to right, #000 calc(100% - var(--fade-end)), transparent); animation: table-fade linear both; animation-timeline: scroll(self inline); }
}

/* source lists open and close smoothly */
details.srcs > summary { list-style: none; display: flex; align-items: center; gap: 0.5em; }
details.srcs > summary::-webkit-details-marker { display: none; }
details.srcs > summary::before { content: "+"; display: inline-grid; place-items: center; inline-size: 1.4em; block-size: 1.4em; border: 1px solid var(--gold-soft); border-radius: 2px; font-size: 13px; }
details.srcs[open] > summary::before { content: "−"; }
details.srcs::details-content { block-size: 0; overflow: clip; }
details.srcs[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: no-preference) {
  details.srcs::details-content { transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete; }
}

/* safe area on notched phones */
footer.site { padding-block-end: max(40px, env(safe-area-inset-bottom, 0px)); }

/* ---------- Search ---------- */
.search-open { display: inline-flex; align-items: center; gap: 8px; margin-left: 18px; padding: 6px 10px 6px 12px; font-family: var(--label); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg-2); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; flex: none; }
.search-open svg { inline-size: 16px; block-size: 16px; }
.search-open kbd { font-family: var(--label); font-size: 12px; line-height: 1; padding: 3px 6px; color: var(--muted); border: 1px solid var(--rule); border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .search-open:hover { color: var(--gold); border-color: var(--gold-soft); } }
@media (max-width: 640px) {
  .search-open { margin-left: 10px; padding: 8px; }
  .search-open span, .search-open kbd { display: none; }
}
.topbar nav a { white-space: nowrap; }
@media (max-width: 640px) { .topbar nav { gap: 12px; letter-spacing: 0.03em; } }
@media (max-width: 400px) { .topbar nav { gap: 9px; font-size: 12px; letter-spacing: 0.02em; } .topbar .wrap { gap: 8px; } .search-open { margin-left: 6px; padding: 7px; } }

dialog.search { inline-size: min(780px, calc(100vw - 32px)); max-inline-size: none; max-block-size: min(84vh, 820px); margin: 7vh auto auto; padding: 0; color: var(--ink); background: var(--bg-2); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65); overflow: hidden; }
dialog.search[open] { display: flex; flex-direction: column; }
dialog.search::backdrop { background: rgba(6, 4, 4, 0.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sr-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.sr-head svg { inline-size: 20px; block-size: 20px; color: var(--gold); flex: none; }
.sr-head input { flex: 1; min-inline-size: 0; font: 400 max(16px, 19px)/1.3 var(--body); color: var(--ink); background: transparent; border: 0; outline: none; }
.sr-head input::placeholder { color: var(--muted); }
.sr-head input::-webkit-search-cancel-button { filter: invert(0.8); }
.sr-x { font-family: var(--label); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); background: var(--bg-3); border: 1px solid var(--rule); border-radius: 4px; padding: 4px 8px; cursor: pointer; flex: none; }
.sr-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.sr-filters .chip { font-size: 13px; padding: 4px 11px; }
.sr-filters .n { opacity: 0.75; font-variant-numeric: tabular-nums; }
.sr-status { margin: 0; padding: 10px 18px 6px; font-family: var(--label); font-size: 13px; color: var(--muted); }
.sr-list { list-style: none; margin: 0; padding: 0 8px 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; flex: 1 1 auto; }
.sr-list li { margin: 0; }
.sr-list a { display: block; padding: 10px 12px; color: var(--ink); text-decoration: none; border: 1px solid transparent; border-radius: 6px; }
.sr-list a[aria-selected="true"], .sr-list a:focus-visible { background: var(--bg-3); border-color: var(--gold-soft); outline: none; }
@media (hover: hover) and (pointer: fine) { .sr-list a:hover { background: var(--bg-3); color: var(--ink); } }
.sr-kind { display: block; font-family: var(--label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.sr-ctx { color: var(--muted); letter-spacing: 0.04em; text-transform: none; }
.sr-h { display: block; margin: 2px 0 3px; font-family: var(--display); font-size: 18px; line-height: 1.3; }
.sr-s { display: block; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.sr-list mark, mark.hit { color: inherit; background: rgba(220, 165, 76, 0.3); border-radius: 2px; padding: 0 1px; }
mark.hit.cur { background: rgba(220, 165, 76, 0.62); box-shadow: 0 0 0 1px var(--gold); }
.sr-more { display: block; inline-size: 100%; margin: 6px 0 0; padding: 10px; font-family: var(--label); font-size: 14px; color: var(--ink-soft); background: var(--bg-3); border: 1px solid var(--rule); border-radius: 6px; cursor: pointer; }
.sr-tips { margin: 0; padding: 10px 18px 14px; font-family: var(--label); font-size: 13px; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--rule); }
.sr-tips b { color: var(--ink-soft); font-weight: 600; }
.sr-tips button { font: inherit; color: var(--gold); background: none; border: 0; padding: 0 3px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  dialog.search { inline-size: 100vw; max-block-size: none; block-size: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .sr-tips { display: none; }
}
.hitbar { position: fixed; z-index: 30; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; font-family: var(--label); font-size: 14px; color: var(--ink); background: var(--bg-3); border: 1px solid var(--gold-soft); border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); white-space: nowrap; }
.hitbar button { inline-size: 32px; block-size: 32px; display: inline-grid; place-items: center; font-size: 15px; color: var(--ink); background: var(--bg-2); border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .hitbar button:hover { border-color: var(--gold); color: var(--gold); } }


/* ---------- Added in the improvement pass ---------- */
.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -80px; z-index: 40; padding: 10px 16px; background: var(--gold); color: #1a120c; font-family: var(--label); font-size: 14px; border-radius: 4px; text-decoration: none; }
.skip:focus { inset-block-start: 10px; color: #1a120c; }
main:focus { outline: none; }
.pad-end { padding-bottom: 50px; }
.gl-tools label.count { margin: 0; }
.theme-toggle { flex: none; inline-size: 34px; block-size: 34px; display: inline-grid; place-items: center; margin-left: 8px; font-size: 16px; line-height: 1; color: var(--ink-soft); background: var(--bg-2); border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { color: var(--gold); border-color: var(--gold-soft); } }
@media (max-width: 640px) { .theme-toggle { margin-left: 6px; } }
@media (max-width: 400px) { .theme-toggle { inline-size: 30px; block-size: 30px; margin-left: 4px; } }

/* light theme (opt in with the header button; the guide opens dark) */
html[data-theme="light"] {
  --bg: #f6f0e4; --bg-2: #fffaf0; --bg-3: #efe6d2;
  --ink: #241a14; --ink-soft: #43362c; --muted: #6a5b4e; --rule: #d9ccb4;
  --red: #b3281a; --red-deep: #8c1d10; --gold: #82540c; --gold-soft: #9a6d22; --jade: #2b7352;
  --strong: #150e09; --topbar: rgba(246, 240, 228, 0.92);
  color-scheme: light;
}
html[data-theme="light"] body { background-image: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(179, 40, 26, 0.07), transparent 60%); }
html[data-theme="light"] .sr-head input::-webkit-search-cancel-button { filter: none; }
html[data-theme="light"] dialog.search { box-shadow: 0 30px 90px rgba(60, 40, 20, 0.35); }
html[data-theme="light"] dialog.search::backdrop { background: rgba(40, 28, 20, 0.5); }
html[data-theme="light"] mark.hit, html[data-theme="light"] .sr-list mark { background: rgba(220, 165, 76, 0.45); }

/* resume card on the cover */
.resume-wrap { max-width: 520px; margin: 0 auto 28px; }
.resume-wrap .lbl { font-family: var(--label); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; text-align: center; }
.card.resume { border-color: var(--gold-soft); }

/* in-chapter list on narrow screens (the sticky sidebar is hidden below 1000px) */
.toc-m { display: none; margin: 0 0 22px; padding: 12px 16px; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 4px; font-family: var(--label); font-size: 15px; }
.toc-m > summary { cursor: pointer; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; color: var(--gold); }
.toc-m ol { margin: 10px 0 0; padding-left: 1.4em; display: grid; gap: 6px; }
.toc-m a { color: var(--ink-soft); text-decoration: none; }
@media (max-width: 1000px) { .toc-m { display: block; } }

/* wide tables: keep the first column in view while scrolling sideways */
@media (max-width: 1000px) {
  .tablewrap table.data th:first-child, .tablewrap table.data td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--bg-2); max-inline-size: 9.5em; box-shadow: 1px 0 0 var(--rule); }
}

/* videos filter */
.vfilter { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 14px 0 18px; }
.vfilter input { font-family: var(--label); font-size: max(16px, 1rem); padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg-2); color: var(--ink); inline-size: 100%; max-inline-size: 320px; }
.vlib li[hidden], .vlib section[hidden] { display: none; }
.vfilter .count { margin: 0 0 0 auto; }

/* 404 */
.lost { text-align: center; padding-block: 96px; }
.lost h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 8vw, 80px); margin: 0 0 10px; }
.lost p { color: var(--ink-soft); max-width: 36em; margin: 0 auto 14px; }

/* print: a clean paper copy of a chapter */
@media print {
  :root, html[data-theme="light"] { --bg: #fff; --bg-2: #fff; --bg-3: #f4f4f4; --ink: #111; --ink-soft: #222; --muted: #444; --rule: #bbb; --gold: #6b4300; --gold-soft: #6b4300; --red: #8c1d10; --jade: #1d5a40; --strong: #000; color-scheme: light; }
  body { background: #fff !important; font-size: 11pt; line-height: 1.5; }
  .topbar, .toc, .toc-m, .skip, .turn, .hitbar, dialog.search, .search-open, .theme-toggle, .resume-wrap, .vfilter, footer.site { display: none !important; }
  .page { display: block; }
  .prose > *, .chhead { max-width: none; }
  a { color: inherit; text-decoration: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #444; word-break: break-all; }
  .prose sup.fn a::after, ol.sources a::after, .vlib a::after { content: none !important; }
  details.srcs::details-content { block-size: auto !important; content-visibility: visible !important; overflow: visible !important; }
  details.srcs > summary::before { display: none; }
  .tablewrap { overflow: visible; mask-image: none; animation: none; border-top-color: #444; }
  .tablewrap table.data th:first-child, .tablewrap table.data td:first-child { position: static; box-shadow: none; max-inline-size: none; }
  table.data { font-size: 9.5pt; }
  .prose h2 { break-after: avoid; }
  .prose h2::before { background: #444; }
  tr, aside, blockquote, figure, ol.steps > li { break-inside: avoid; }
  .seal { box-shadow: none; border: 1px solid #000; background: #fff; color: #000; }
}

/* ---------- Cover additions, 9 Oct 2026 ---------- */
.cover .stats-note { max-width: 46em; margin: 14px auto 0; font-family: var(--label); font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.start ul { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 22px; }
.start li { border-top: 1px solid var(--rule); }
.start a { display: block; padding: 12px 0 14px; color: var(--ink); text-decoration: none; font-size: 17px; line-height: 1.35; }
.start a:hover, .start a:focus-visible { color: var(--gold); }
.start small { display: block; margin-top: 4px; font-family: var(--label); font-size: 13px; color: var(--muted); }
.vlib .vnote { display: block; margin: 3px 0 9px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.vlib .vnote::before { content: attr(data-basis); font-family: var(--label); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-right: 8px; }
.vlib .vnote a { color: var(--ink-soft); }