/* ChessCourseFinder. A filled-in tournament scoresheet: ruled form, printed
   ink, ballpoint blue for what you can act on, arbiter's red for warnings. */

@font-face { font-family: "Besley"; src: url("fonts/besley.woff2") format("woff2"); font-weight: 400 900; font-display: optional; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-display: optional; }
@font-face { font-family: "DM Mono"; src: url("fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-display: optional; }

:root {
  --paper: #FBFBF7; --paper-2: #F0F1EA; --ink: #14181C; --ink-2: #4A525B;
  --rule: #C7CBC1; --rule-ink: #14181C;
  --biro: #1E3FD0; --biro-soft: #E2E7FB; --stamp: #B92D1A; --stamp-soft: #FAE7E2;
  --hatch: #14181C; --square-l: #FBFBF7;
  --serif: "Besley", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --measure: 42rem; --gut: clamp(1rem, 4vw, 2.5rem);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #11141A; --paper-2: #1A1E26; --ink: #EDEEE8; --ink-2: #A9B0B9;
    --rule: #343B46; --rule-ink: #EDEEE8;
    --biro: #9DB1FF; --biro-soft: #222B4C; --stamp: #FF8D78; --stamp-soft: #3C201B;
    --hatch: #EDEEE8; --square-l: #11141A;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.62 var(--sans); overflow-wrap: break-word; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--biro); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--biro); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 750; line-height: 1.14; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
code { font: 500 .88em var(--mono); background: var(--paper-2); padding: .1em .35em; }
.wrap { width: min(100%, 78rem); margin-inline: auto; padding-inline: var(--gut); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: .5rem; }
html:not(.js) .js-only { display: none !important; }
.js .no-js-only { display: none !important; }
.eyebrow { font: 500 .8125rem/1.3 var(--mono); letter-spacing: .02em; color: var(--ink-2); margin: 0 0 .9rem; }
.token { background: var(--stamp-soft); color: var(--stamp); font: 500 .85em var(--mono); padding: .05em .3em; outline: 1px dashed var(--stamp); }

.btn { display: inline-flex; align-items: center; justify-content: center; font: 650 1rem/1 var(--sans); padding: .78rem 1.15rem; border: 2px solid var(--ink); border-radius: 0; text-decoration: none; white-space: nowrap; }
.btn-finder { background: var(--biro); border-color: var(--biro); color: var(--paper); }
.btn-finder:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-cta { background: var(--ink); color: var(--paper); }
.btn-cta:hover { background: var(--biro); border-color: var(--biro); }
.btn-pending { background: transparent; color: var(--ink-2); border-style: dashed; border-color: var(--rule); font-weight: 500; font-size: .875rem; white-space: normal; text-align: center; }
.arrow-link { font-weight: 650; text-decoration: none; }
.arrow-link:hover { text-decoration: underline; }

/* masthead */
.masthead { border-bottom: 3px double var(--rule-ink); background: var(--paper); }
.mast-row { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; }
.logo-mark { flex: none; color: var(--ink); }
.logo-word { font: 800 1.2rem/1 var(--serif); letter-spacing: -.02em; }
.nav-primary { display: flex; gap: 1.25rem; margin-inline-start: auto; }
.nav-primary a { color: var(--ink); text-decoration: none; font-weight: 550; font-size: 1rem; padding: .4rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-primary a:hover, .nav-primary a[aria-current] { border-bottom-color: var(--biro); color: var(--biro); }
.nav-mobile { display: none; position: relative; }
.nav-mobile summary { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-weight: 650; list-style: none; padding: .6rem .2rem; min-height: 44px; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-burger { width: 20px; height: 13px; border-block: 2px solid var(--ink); position: relative; }
.nav-burger::after { content: ""; position: absolute; inset: 3.5px 0 auto; border-top: 2px solid var(--ink); }
.nav-mobile-panel { position: absolute; right: calc(-1 * var(--gut) + .25rem); top: 100%; z-index: 20; width: min(20rem, calc(100vw - 1.5rem)); background: var(--paper); border: 2px solid var(--ink); display: grid; }
.nav-mobile-panel a { padding: .8rem 1rem; color: var(--ink); text-decoration: none; border-top: 1px solid var(--rule); font-weight: 550; }
.nav-mobile-panel a:first-child { border-top: 0; }
.nav-mobile-finder { background: var(--biro); color: var(--paper) !important; }
@media (max-width: 62rem) {
  .nav-primary, .mast-row > .btn-finder { display: none; }
  .nav-mobile { display: block; margin-inline-start: auto; }
}

.preview-band { background: var(--stamp-soft); color: var(--ink); font-size: .9375rem; padding: .55rem 0; border-bottom: 1px solid var(--stamp); }
.preview-band strong { color: var(--stamp); }

/* hero and the board */
.hero { padding-block: clamp(1.75rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 37rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.1rem); line-height: 1.04; font-weight: 800; }
.hero-lede { margin-block: 1.1rem 1.4rem; font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.5; max-width: 36rem; }
.hero-lede p { margin: 0; }
.finder-form { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-block-end: 1.25rem; }
html:not(.js) .finder-form, html:not(.js) .hero .finder-panel { display: none; }
.finder-form-full { grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: .3rem; }
.field > span { font: 500 .8125rem/1.3 var(--mono); color: var(--ink-2); }
input[type=number], select { width: 100%; font: 500 1.0625rem/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0; padding: .65rem .7rem; min-height: 48px; }
.finder-panel { border-top: 2px solid var(--ink); padding-top: .9rem; }
.panel-h { font-size: 1.3rem; margin-block-end: .55rem; }
.panel-sub { font: 500 .8125rem/1.3 var(--mono); color: var(--ink-2); margin-block: 1rem .35rem; letter-spacing: .02em; }
.panel-list { list-style: none; margin: 0; padding: 0; }
.panel-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.panel-list a { font-weight: 550; text-decoration: none; }
.panel-list a:hover { text-decoration: underline; }
.panel-type { font: 500 .78rem/1.5 var(--mono); color: var(--ink-2); }
.panel-empty, .panel-hint { color: var(--ink-2); margin: .5rem 0; font-size: 1rem; }
.panel-more { margin: .6rem 0 0; font-size: 1rem; }
.picks { list-style: none; margin: 0 0 .6rem; padding: 0; counter-reset: pick; }
.pick { border-bottom: 1px solid var(--rule); padding: .6rem 0 .7rem 2rem; position: relative; counter-increment: pick; }
.pick::before { content: counter(pick) "."; position: absolute; left: 0; top: .6rem; font: 500 1rem/1.5 var(--mono); color: var(--ink-2); }
.pick-title { margin: 0; font-weight: 700; }
.pick-vendor { color: var(--ink-2); font-weight: 450; }
.pick-why { margin: .25rem 0 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--ink-2); }
.sample-note { font-size: .9375rem; background: var(--stamp-soft); padding: .55rem .75rem; margin: .5rem 0; border-left: 3px solid var(--stamp); }
.sample-note strong { color: var(--stamp); }

.board-wrap { position: relative; }
.board { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.board td, .board th { padding: 0; }
.board tbody td { border: 0 solid var(--rule-ink); }
.board tbody tr:first-child td { border-top-width: 2px; }
.board tbody tr:last-child td { border-bottom-width: 2px; }
.board tbody td:nth-child(2) { border-left-width: 2px; }
.board tbody td:last-child { border-right-width: 2px; }
.col-rank { width: 5.75rem; }
.rank-h { padding-inline-end: .55rem !important; text-align: right; font: 500 .8rem/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.rank-n { display: none; }
.rank-h.is-active, .file-h.is-active { color: var(--biro); }
.file-h { padding-block-start: .45rem !important; text-align: center; font: 500 .72rem/1.2 var(--mono); color: var(--ink-2); }
.file-l { display: block; font-size: .85rem; color: var(--ink); }
.file-h.is-active .file-l { color: var(--biro); }
.file-name { display: block; overflow: hidden; text-overflow: ellipsis; }
.sq { display: block; position: relative; aspect-ratio: 1; color: inherit; text-decoration: none; outline-offset: -3px; }
.sq-l { background: var(--square-l); }
.sq-d { background: repeating-linear-gradient(135deg, var(--hatch) 0 1.2px, transparent 1.2px 6px); }
.sq-coord { position: absolute; left: 5px; top: 4px; font: 500 .66rem/1 var(--mono); color: var(--ink-2); background: var(--paper); padding: 1px 2px; opacity: 0; transition: opacity .12s; }
a.sq:hover .sq-coord, a.sq:focus-visible .sq-coord, .sq.is-sel .sq-coord { opacity: 1; }
.sq-stone { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 26%; aspect-ratio: 1; border-radius: 50%; }
.is-specific .sq-stone { background: var(--biro); box-shadow: 0 0 0 3px var(--paper); }
.is-general .sq-stone { background: var(--paper); border: 2px solid var(--biro); box-shadow: 0 0 0 3px var(--paper); }
a.sq:hover { background-color: var(--biro-soft); }
a.sq:hover .sq-stone { scale: 1.2; }
.sq.is-line { background-color: var(--biro-soft); }
.sq.is-sel { box-shadow: inset 0 0 0 3px var(--stamp); }
.sq.is-sel .sq-stone { opacity: 0; }
.board-knight { position: absolute; left: 0; top: 0; pointer-events: none; transition: transform .28s cubic-bezier(.3, .9, .4, 1); }
.board-knight svg { display: block; width: 100%; height: 100%; scale: .88; }
.board-key { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: .7rem 0 0; padding: 0 0 0 5.75rem; font-size: .875rem; color: var(--ink-2); }
.board-key li { display: inline-flex; align-items: center; gap: .4rem; }
.key-stone { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--biro); }
.key-specific { background: var(--biro); }
@media (prefers-reduced-motion: reduce) { .board-knight, .sq-coord { transition: none; } a.sq:hover .sq-stone { scale: 1; } }
@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero .board-wrap { order: -1; grid-row: 2; }
  .hero-copy { display: contents; }
  .hero-copy > * { grid-column: 1; }
  .hero-copy .eyebrow { grid-row: 1; margin-bottom: -1.2rem; }
  .hero h1 { grid-row: 2; }
  .hero-lede { grid-row: 3; margin-block: -1rem 0; }
  .hero .finder-form { grid-row: 4; margin: -.75rem 0 -.75rem; }
  .hero .board-wrap { grid-row: 5; order: 0; }
  .hero .finder-panel { grid-row: 6; }
}
@media (max-width: 40rem) {
  .col-rank { width: 1.25rem; }
  .rank-h { padding-inline-end: .3rem !important; }
  .rank-long, .file-name { display: none; }
  .rank-n { display: inline; }
  .board-key { padding-left: 1.25rem; }
  .sq-d { background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 4.5px); }
}

/* ruled home bands */
.band { padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule); }
.band h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.two-col { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); }
.col-head p { color: var(--ink-2); margin: .75rem 0 0; }
.col-head p a { color: var(--biro); }
.band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.5rem; }
.band-head p { margin: 0; }
.band-rules { background: var(--paper-2); }
.rules-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.rules-art { aspect-ratio: 5 / 4; object-fit: cover; object-position: 88% 50%; width: 100%; }
.art { display: block; width: 100%; height: auto; }
.rules-art { height: auto; }
@media (prefers-color-scheme: dark) { .art { filter: invert(.93) hue-rotate(180deg); } }
.rules { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.rules h3 { font-size: 1.15rem; margin-block: .35rem .4rem; }
.rules p { margin: 0; font-size: 1rem; color: var(--ink-2); }
.rule-sign { font: 500 1.35rem/1 var(--mono); color: var(--stamp); }
@media (max-width: 60rem) { .two-col { grid-template-columns: minmax(0, 1fr); } .rules-grid { grid-template-columns: minmax(0, 1fr); } .rules-art { max-width: 28rem; } }
@media (max-width: 36rem) { .rules { grid-template-columns: minmax(0, 1fr); } }

.ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-ink); }
.ledger-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .25rem .5rem; align-items: baseline; padding: .62rem 0; border-bottom: 1px solid var(--rule); }
.ledger-no { font: 500 .9rem/1.5 var(--mono); color: var(--ink-2); }
.ledger-row a { font-weight: 600; text-decoration: none; }
.ledger-row a:hover { text-decoration: underline; }
.ledger-type { font: 500 .78rem/1.5 var(--mono); color: var(--ink-2); white-space: nowrap; }
.ledger-type em { font-style: normal; color: var(--stamp); }
.ledger-cols { columns: 2; column-gap: 3rem; border-top: 0; }
.ledger-cols .ledger-row { break-inside: avoid; }
@media (max-width: 52rem) { .ledger-cols { columns: 1; } }
@media (max-width: 36rem) { .ledger-row { grid-template-columns: 2rem minmax(0, 1fr); } .ledger-type { grid-column: 2; } }

/* openings gallery */
.opening-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1.5rem 1.25rem; }
.opening-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opening-card a { display: block; color: var(--ink); text-decoration: none; }
.opening-card .bd { display: block; width: 100%; height: auto; }
.opening-name { display: block; font: 700 1.1rem/1.2 var(--serif); margin-block-start: .55rem; }
.opening-card a:hover .opening-name { color: var(--biro); text-decoration: underline; }
.opening-line { display: block; font: 500 .78rem/1.4 var(--mono); color: var(--ink-2); margin-block-start: .15rem; }
@media (max-width: 44rem) { .opening-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* diagrams keep printed-plate colours in both themes */
.bd { background: #FBFBF7; }
.bd-l { fill: #FBFBF7; }
.bd-d { fill: #14181C; }
.bd-frame { fill: none; stroke: #14181C; stroke-width: .05; }
.bd-coord { font: 500 .28px var(--mono); fill: #4A525B; }
.bd-mark { fill: rgba(30, 63, 208, .22); }
.bd-arrow { stroke: #1E3FD0; stroke-width: .12; stroke-linecap: round; }
.bd-arrowhead { fill: #1E3FD0; }
.board-fig, .prose > .board-fig { margin: 1.5rem 0; max-width: 24rem; }
.board-fig .bd { display: block; width: 100%; height: auto; }
.board-fig figcaption { margin-block-start: .5rem; font-size: .9375rem; }
.board-cap { display: block; font: 500 .875rem/1.5 var(--mono); }
.board-pos { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* page head */
.page-head { padding-block: 1rem clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--rule); }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; margin-block-start: .75rem; }
.page-head-art .page-head-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); align-items: end; }
.page-art .board-fig { margin: 0; }
.page-head h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); line-height: 1.08; max-width: 19em; }
.vs { display: inline-block; font: 500 .4em/1 var(--mono); letter-spacing: 0; color: var(--stamp); border: 1.5px solid var(--stamp); border-radius: 50%; padding: .55em .5em; vertical-align: .25em; margin-inline: .1em; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem .55rem; margin: 0; padding: 0; font-size: .9rem; color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-inline-end: .55rem; color: var(--rule); }
.crumbs a { color: var(--ink-2); }
.sheet { display: flex; flex-wrap: wrap; margin: 1.25rem 0 0; border: 1px solid var(--rule-ink); width: fit-content; max-width: 100%; }
.sheet > div { padding: .4rem .85rem .45rem; border-inline-end: 1px solid var(--rule-ink); }
.sheet > div:last-child { border-inline-end: 0; }
.sheet dt { font: 500 .7rem/1.3 var(--mono); color: var(--ink-2); }
.sheet dd { margin: 0; font-weight: 650; font-size: .9375rem; }
.sheet a { color: var(--ink); }
@media (max-width: 44rem) { .page-head-art .page-head-grid { grid-template-columns: minmax(0, 1fr); } .page-art { max-width: 13rem; } .sheet { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .sheet > div { border-inline-end: 0; border-bottom: 1px solid var(--rule-ink); } .sheet > div:nth-child(odd) { border-inline-end: 1px solid var(--rule-ink); } .sheet > div:nth-last-child(-n + 2) { border-bottom: 0; } .sheet > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-inline-end: 0; } .sheet > div:nth-last-child(2):nth-child(even) { border-bottom: 1px solid var(--rule-ink); } }

/* article */
.article-grid { display: grid; grid-template-columns: 15rem minmax(0, var(--measure)); gap: clamp(2rem, 5vw, 5rem); justify-content: center; padding-block: 2rem 4rem; }
.article-grid.no-toc { grid-template-columns: minmax(0, var(--measure)); }
.article-rail { position: relative; }
.toc { position: sticky; top: 1rem; font-size: .9375rem; }
.toc summary { font: 500 .8125rem/1.3 var(--mono); color: var(--ink-2); cursor: pointer; padding-block: .3rem .55rem; border-bottom: 2px solid var(--rule-ink); list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; counter-reset: mv; margin: 0; padding: 0; }
.toc li { counter-increment: mv; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); padding: .42rem 0; border-bottom: 1px solid var(--rule); }
.toc li::before { content: counter(mv) "."; font: 500 .82rem/1.55 var(--mono); color: var(--ink-2); }
.toc a { color: var(--ink); text-decoration: none; line-height: 1.32; }
.toc a:hover { color: var(--biro); text-decoration: underline; }
@media (max-width: 58rem) {
  .article-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block-start: 1.25rem; }
  .toc { position: static; border: 1px solid var(--rule-ink); padding: .5rem .85rem; }
  .toc summary { border-bottom: 0; padding-block: .25rem; }
  .toc summary::after { content: "+"; float: right; }
  .toc[open] summary::after { content: "−"; }
}

.prose { counter-reset: sec; min-width: 0; }
.prose > * { max-width: var(--measure); }
.prose h2 { font-size: clamp(1.55rem, 2.6vw, 2rem); margin-block: 2.5rem .75rem; padding-block-start: .85rem; border-top: 1px solid var(--rule-ink); scroll-margin-top: 1rem; }
.prose > h2:first-child { margin-block-start: 0; }
.prose h3 { font-size: 1.3rem; margin-block: 1.75rem .5rem; scroll-margin-top: 1rem; }
.prose h4 { font: 700 1.05rem/1.3 var(--sans); margin-block: 1.4rem .3rem; }
.prose p { margin-block: 0 1.05rem; }
.prose ul, .prose ol { padding-inline-start: 1.4rem; margin-block: 0 1.05rem; }
.prose li { margin-block: .28rem; }
.prose li::marker { color: var(--ink-2); font-family: var(--mono); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2rem; }
.prose blockquote { margin: 1.25rem 0; padding: .1rem 0 .1rem 1.1rem; border-left: 3px solid var(--biro); }
.prose pre { background: var(--paper-2); padding: 1rem; overflow-x: auto; font-size: .9rem; }
.prose pre code { background: none; padding: 0; }
.prose img { display: block; margin-block: 1.5rem; }

.callout { border: 1px solid var(--rule-ink); padding: .8rem 1rem .25rem; margin-block: 1.5rem; background: var(--paper); }
.callout-head { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin-block: 0 .4rem; }
.callout-sign { font: 500 1.0625rem/1 var(--mono); min-width: 1.75rem; height: 1.75rem; display: inline-grid; place-items: center; background: var(--ink); color: var(--paper); padding-inline: .25rem; }
.callout-tip .callout-sign { background: var(--biro); }
.callout-caution .callout-sign, .callout-must .callout-sign { background: var(--stamp); }
.callout-unclear .callout-sign { background: transparent; color: var(--ink); border: 1px solid var(--rule-ink); }
.callout p:last-child { margin-block-end: .6rem; }

.evidence { border-block: 1px solid var(--rule-ink); padding: .7rem 0 .15rem; margin-block: 0 1.5rem; font-size: 1rem; }
.evidence-head { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin-block-end: .3rem !important; }
.evidence-sign { font: 500 1rem/1 var(--mono); }
.evidence-gated { background: var(--stamp-soft); padding-inline: .85rem; border-color: var(--stamp); }
.disclose { font-size: .9375rem; color: var(--ink-2); margin-block-end: 1.1rem; }
.review-note { font-size: 1rem; color: var(--ink-2); }

.table-wrap { max-width: 100% !important; overflow-x: auto; margin-block: 1.5rem; border-top: 2px solid var(--rule-ink); }
.prose .table-wrap { width: 100%; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.table-wrap th, .table-wrap td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table-wrap thead th { font: 500 .78rem/1.3 var(--mono); color: var(--ink-2); border-bottom: 1px solid var(--rule-ink); white-space: nowrap; }
.table-wrap tbody th { font-weight: 700; }
.a-right { text-align: right !important; }
.a-center { text-align: center !important; }
.th-sort { all: unset; cursor: pointer; font: inherit; color: var(--biro); }
.th-sort:hover { text-decoration: underline; }
.th-sort:focus-visible { outline: 3px solid var(--biro); outline-offset: 2px; }
th[aria-sort=ascending] .th-sort::after { content: " ↑"; }
th[aria-sort=descending] .th-sort::after { content: " ↓"; }
@media (max-width: 40rem) {
  .table-stack { border-top: 0; overflow: visible; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-stack table, .table-stack tbody, .table-stack tr, .table-stack th, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border: 1px solid var(--rule-ink); margin-block-end: .75rem; padding: .25rem .75rem .5rem; }
  .table-stack tbody th { border-bottom: 1px solid var(--rule); padding-block: .55rem; font: 700 1.1rem/1.3 var(--serif); }
  .table-stack td { border-bottom: 0; padding: .4rem 0 0; display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: .5rem; }
  .table-stack td::before { content: attr(data-label); font: 500 .78rem/1.5 var(--mono); color: var(--ink-2); }
}

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 1.5rem; border-top: 2px solid var(--rule-ink); }
.facts > div { padding: .55rem 1rem .55rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 500 .75rem/1.3 var(--mono); color: var(--ink-2); }
.facts dd { margin: .1rem 0 0; font-weight: 600; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-ink); border: 1px solid var(--rule-ink); margin-block: 1.75rem; }
.fit-col { background: var(--paper); padding: .9rem 1rem .25rem; }
.fit .fit-h { margin-block: 0 .5rem; font-size: 1.15rem; }
.fit-no .fit-h { color: var(--stamp); }
@media (max-width: 36rem) { .fit, .facts { grid-template-columns: minmax(0, 1fr); } }

.cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; border: 2px solid var(--rule-ink); padding: .9rem 1.1rem; margin-block: 1.75rem; }
.cta-body { flex: 1 1 15rem; min-width: 0; }
.cta-eyebrow { font: 500 .75rem/1.3 var(--mono); color: var(--ink-2); margin: 0 0 .25rem !important; }
.cta-name { font: 750 1.3rem/1.15 var(--serif); margin: 0 0 .25rem !important; }
.cta-note { margin: 0 !important; font-size: .9375rem; color: var(--ink-2); }

.sources { font-size: 1rem; margin-block-start: 2.5rem; }
.sources h2 { font-size: 1.3rem; margin-block: 0 .5rem; }
.sources ol { padding-inline-start: 1.4rem; }
.sources li { margin-block: .45rem; }
.src-meta { display: block; font: 500 .75rem/1.4 var(--mono); color: var(--ink-2); }
.next-move { border: 2px solid var(--biro); padding: .75rem 1rem; margin-block-start: 2.5rem; }
.next-label { font: 500 .75rem/1.3 var(--mono); color: var(--ink-2); margin: 0 0 .2rem !important; }
.next-move a { display: flex; justify-content: space-between; gap: 1rem; font: 750 1.2rem/1.25 var(--serif); text-decoration: none; }
.next-move a:hover .next-title { text-decoration: underline; }
.related { margin-block-start: 2.25rem; }
.related h2 { font-size: 1.3rem; margin-block: 0 .5rem; }
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .1rem 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.related a { font-weight: 600; text-decoration: none; }
.related a:hover { text-decoration: underline; }

/* hub */
.hub-body { padding-block: 2rem 4rem; }
.hub-intro { margin-block-end: 1.5rem; }
.hub-rest { margin-block-start: 3rem; }
.hub-group { margin-block-start: 2.25rem; }
.hub-group h2 { font-size: 1.5rem; margin-block-end: .75rem; }

/* tools */
.tool-body { padding-block: 2rem 4rem; }
.finder-full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 37rem); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.finder-hint { margin: 0 0 .75rem; color: var(--ink-2); font-size: 1rem; }
.finder-rule { margin-block: 1.5rem 0; font-size: 1rem; max-width: 52rem; color: var(--ink-2); }
.finder-rule strong { color: var(--ink); }
.browse, .catalogue { margin-block-start: 3rem; }
.browse h2, .catalogue h2 { font-size: 1.6rem; margin-block-end: .9rem; }
.browse-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.browse-col h3 { font-size: 1.15rem; margin-block-end: .5rem; }
@media (max-width: 60rem) { .finder-full { grid-template-columns: minmax(0, 1fr); } .finder-full .board-wrap { grid-row: 1; } .browse-cols { grid-template-columns: minmax(0, 1fr); } }
.tool { border: 2px solid var(--rule-ink); padding: clamp(1rem, 3vw, 1.75rem); max-width: 60rem; }
.tool-note { font-size: .9375rem; color: var(--ink-2); margin: .9rem 0 0; }
.tool-sub { font-size: 1.15rem; margin-block: 1.25rem .5rem; }
.calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .85rem; }
.calc-out { display: block; margin-block-start: 1.25rem; padding-block-start: .9rem; border-top: 2px solid var(--rule-ink); min-height: 4.5rem; }
.calc-big { display: block; font: 800 clamp(2.4rem, 6vw, 3.5rem)/1 var(--serif); color: var(--biro); }
.calc-unit { display: block; margin-block-start: .3rem; color: var(--ink-2); }
.tool-result { margin-block-start: 1rem; }
.tool-prose { margin-block-start: 2.5rem; }
.map-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-block-start: 1rem; }
.map-col h3 { font-size: 1.15rem; margin-block-end: .4rem; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { padding: .35rem 0; border-bottom: 1px solid var(--rule); }
.check { display: inline-flex; gap: .55rem; align-items: center; min-height: 28px; font-weight: 600; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--biro); }
.check-line { display: block; font: 500 .75rem/1.4 var(--mono); color: var(--ink-2); padding-inline-start: 1.7rem; }
.no-js-only + .check-line { padding-inline-start: 0; }
.check-weights li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.check-weight input { width: 4.5rem; min-height: 40px; padding: .35rem .5rem; }
.map-list { list-style: none; margin: 0; padding: 0; }
.map-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.map-list a { font-weight: 600; }
@media (max-width: 44rem) { .map-cols { grid-template-columns: minmax(0, 1fr); } }

.trust-body { padding-block: 2rem 4rem; }
.swatches { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem; }
.swatch { display: inline-block; width: 1.5rem; height: 1.5rem; border: 1px solid var(--rule-ink); vertical-align: -.35em; margin-inline-end: .4rem; }

/* 404 */
.nf { padding-block: clamp(2.5rem, 6vw, 5rem); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 3rem; align-items: center; }
.nf h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: 1; font-weight: 800; }
.nf-lede { font-size: 1.25rem; max-width: 30rem; margin-block: 1rem 1.5rem; }
.nf-links { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.nf-board .board-fig { margin: 0; }
@media (max-width: 44rem) { .nf-grid { grid-template-columns: minmax(0, 1fr); } .nf-board { max-width: 18rem; } }

/* footer */
.foot { border-top: 3px double var(--rule-ink); padding-block: 2.5rem 1.75rem; font-size: 1rem; }
.foot-brand { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.foot-brand p { margin: 0; color: var(--ink-2); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 2rem; margin-block-start: 2rem; }
.foot-h { font: 500 .8125rem/1.3 var(--mono); color: var(--ink-2); padding-block-end: .4rem; border-bottom: 1px solid var(--rule-ink); margin-block-end: .4rem; letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding-block: .22rem; }
.foot-cols a { color: var(--ink); text-decoration: none; font-size: .9375rem; line-height: 1.35; display: inline-block; }
.foot-cols a:hover { color: var(--biro); text-decoration: underline; }
.foot-legal { margin-block: 2rem 0; font-size: .875rem; color: var(--ink-2); max-width: 52rem; }
.foot-preview { margin-block: .5rem 0; font-size: .875rem; color: var(--stamp); }
.foot-preview a { color: var(--stamp); }
@media (max-width: 52rem) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media print { .masthead, .foot, .article-rail, .cta, .preview-band { display: none; } }

/* catalogue-driven tools */
.last-read { font: 500 .8125rem/1.4 var(--mono); color: var(--ink-2); margin: 0 0 .75rem; }
.panel-note { font-size: .9375rem; color: var(--ink-2); margin: .1rem 0 .6rem; }
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: .5rem; }
.field-wide { grid-column: 1 / -1; }
input[type=text] { width: 100%; font: 500 1.0625rem/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0; padding: .65rem .7rem; min-height: 48px; }
.chip { display: inline-block; font: 500 .75rem/1.3 var(--mono); padding: .15rem .4rem; border: 1px solid var(--rule-ink); }
.chip-ok { border-color: var(--biro); color: var(--biro); }
.chip-warn { border-color: var(--stamp); color: var(--stamp); }
.pick-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 0; }
.pick-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .35rem 0 0; font-size: .9375rem; }
.btn-more { background: transparent; color: var(--biro); border-color: var(--biro); cursor: pointer; margin-block: .5rem; }
.btn-more:hover { background: var(--biro); color: var(--paper); }
.cell-note { display: block; font-size: .8125rem; line-height: 1.35; color: var(--ink-2); margin-block-start: .15rem; }
.block { display: block; }
.tool-wide { max-width: none; }
.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: .75rem 1rem; align-items: end; margin-block-start: 1rem; }
.filters .check { min-height: 48px; }
.filter-count { font: 500 .875rem/1.4 var(--mono); color: var(--ink-2); margin: .75rem 0 0; }
tr[hidden] { display: none !important; }
.tool-wide .table-wrap table { font-size: .9375rem; }
.tool-wide .table-wrap th:first-child { min-width: 13rem; }
@media (max-width: 62rem) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .filters .check { min-height: 32px; } .table-stack tr[hidden] { display: none !important; } }
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.calc-fig { min-width: 0; }
.calc-fig .calc-big { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.calc-desc { display: block; font-size: .875rem; color: var(--ink-2); }
.calc-msg { margin: .25rem 0; color: var(--ink-2); }
.calc-line { display: grid; gap: .1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.calc-total { font-weight: 650; margin: .9rem 0 0; }
.day-row { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.topic-name { font-weight: 600; }
.day-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .75rem; }
.day-grid > li { border: 1px solid var(--rule-ink); padding: .55rem .7rem; }
.day-grid h4 { font: 700 1rem/1.3 var(--serif); margin: 0 0 .3rem; }
.day-grid ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.day-grid ul li { display: flex; justify-content: space-between; gap: .75rem; padding: .15rem 0; }
.day-min { font: 500 .8125rem/1.6 var(--mono); color: var(--ink-2); white-space: nowrap; }
.check-count { display: block; font-size: .8125rem; color: var(--ink-2); padding-inline-start: 1.7rem; }
.no-js-only + .check-count { padding-inline-start: 0; }
.map-h { font: 700 1.15rem/1.3 var(--serif); margin: 1.1rem 0 .1rem; }
.map-list li { display: block; }
.map-title { font-weight: 650; display: block; }
.map-links { display: flex; gap: 1rem; font-size: .9375rem; }
.map-links a { font-weight: 500; }
@media (max-width: 36rem) { .calc-grid { grid-template-columns: minmax(0, 1fr); } }
.filters .check { align-items: flex-start; }
.filters .check input { margin-block-start: .3rem; }

/* ---------- composition pass ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.masthead { view-transition-name: masthead; }
.prose p, .prose li { text-wrap: pretty; }

/* Local colour flip: any block can be printed in reverse */
.band-ink, .foot, .next-move {
  --paper: #14181C; --paper-2: #1D2228; --ink: #EDEEE8; --ink-2: #A9B0B9;
  --rule: #39414B; --rule-ink: #EDEEE8; --biro: #A9BAFF; --biro-soft: #262F52; --stamp: #FF8D78;
  background: var(--paper); color: var(--ink);
}
@media (prefers-color-scheme: dark) { .band-ink, .foot, .next-move { --paper: #1A1E26; --paper-2: #232833; } }

/* masthead additions */
.mast-row { gap: 1.1rem; }
.nav-primary { gap: 1.1rem; align-items: center; }
.nav-more { position: relative; }
.nav-more summary { list-style: none; cursor: pointer; font-weight: 550; padding: .4rem 0; border-bottom: 2px solid transparent; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: " +"; font-family: var(--mono); color: var(--ink-2); }
.nav-more[open] summary::after { content: " −"; }
.nav-more summary:hover { color: var(--biro); }
.nav-more-panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; min-width: 12rem; background: var(--paper); border: 2px solid var(--ink); display: grid; }
.nav-more-panel a { padding: .6rem .85rem; border-bottom: 1px solid var(--rule); }
.nav-more-panel a:last-child { border-bottom: 0; }
.search-btn { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1.5px solid var(--rule); color: var(--ink); padding: .5rem .6rem; min-height: 44px; font: 500 .9375rem/1 var(--sans); cursor: pointer; }
.search-btn:hover { border-color: var(--biro); color: var(--biro); }
.search-btn kbd { font: 500 .75rem/1 var(--mono); border: 1px solid var(--rule); padding: .1rem .3rem; color: var(--ink-2); }
@media (max-width: 72rem) { .nav-primary, .mast-row > .btn-finder { display: none; } .nav-mobile { display: block; margin-inline-start: 0; } .search-btn { margin-inline-start: auto; } }
@media (max-width: 40rem) { .search-label, .search-btn kbd { display: none; } .logo-word { font-size: 1.08rem; } }
@media (hover: none) { .search-btn kbd { display: none; } }

.search { width: min(40rem, calc(100vw - 1.5rem)); max-height: 80vh; margin: 10vh auto auto; padding: 0; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.search::backdrop { background: rgb(17 20 26 / .55); }
.search-top { display: flex; border-bottom: 2px solid var(--ink); }
.search input[type=search] { flex: 1; min-width: 0; font: 500 1.125rem/1.3 var(--sans); color: var(--ink); background: transparent; border: 0; padding: .95rem 1rem; outline: none; }
.search-close { background: none; border: 0; font: 500 .75rem/1 var(--mono); color: var(--ink-2); padding: 0 1rem; cursor: pointer; }
.search-status { margin: 0; padding: .6rem 1rem .25rem; font: 500 .8125rem/1.4 var(--mono); color: var(--ink-2); }
.search-list { list-style: none; margin: 0; padding: 0 0 .4rem; max-height: 56vh; overflow: auto; }
.search-list a { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; color: var(--ink); text-decoration: none; font-weight: 600; }
.search-list .is-active a, .search-list a:hover { background: var(--biro-soft); }
.search-type { flex: none; font: 500 .75rem/1.7 var(--mono); color: var(--ink-2); }

/* hero: the selected square gets a hand-drawn ring */
.sq.is-sel { box-shadow: none; }
.sq.is-sel::after { content: ""; position: absolute; inset: -6%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M52 6C22 3 5 24 6 50c1 28 22 45 47 44 26-1 43-22 41-47C92 22 72 5 44 9' fill='none' stroke='%23B92D1A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; pointer-events: none; z-index: 2; }

/* the rating ladder */
.band-ink { border-bottom: 0; }
.band-ink h2 { color: var(--ink); }
.band-note { margin: 0; color: var(--ink-2); max-width: 26rem; }
.ladder { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-ink); }
.ladder a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr) auto; align-items: center; gap: .25rem 2rem; padding: clamp(.55rem, 1.2vw, 1rem) .5rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: background-color .15s, padding-left .2s; }
.lad-n { font: 800 clamp(2.5rem, 7.2vw, 6rem)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.lad-t { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 550; color: var(--ink-2); }
.lad-a { font: 500 1.75rem/1 var(--mono); color: var(--biro); }
.ladder a:hover, .ladder a:focus-visible { background: var(--biro); padding-left: 1.25rem; color: #14181C; }
.ladder a:hover .lad-t, .ladder a:hover .lad-a, .ladder a:focus-visible .lad-t, .ladder a:focus-visible .lad-a { color: #14181C; }
.lad-more { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1.5rem 0 0; padding: 0; }
.lad-more a { color: var(--ink); font-weight: 550; }
.lad-more .arrow-link { color: var(--biro); }
.ladder-side { margin-block-end: 1.75rem; }
.ladder-side a { grid-template-columns: minmax(0, 1fr) auto; padding: .45rem .25rem; }
.ladder-side .lad-n { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.ladder-side .lad-t { display: none; }
.ladder-side a:hover, .ladder-side a:focus-visible { color: var(--paper); padding-left: .75rem; }
.ladder-side a:hover .lad-a, .ladder-side a:focus-visible .lad-a { color: var(--paper); }
@media (max-width: 44rem) {
  .ladder a { grid-template-columns: minmax(0, 1fr) auto; }
  .lad-t { grid-column: 1; grid-row: 2; }
  .lad-a { grid-column: 2; grid-row: 1 / span 2; }
}

/* symptom grid */
.skill-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--rule-ink); border-left: 1px solid var(--rule); }
.skill-grid a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; height: 100%; min-height: 7.5rem; padding: 1.1rem 1.1rem 1.25rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.skill-file { font: 800 2.6rem/1 var(--serif); color: var(--biro); min-width: 2rem; }
.skill-t { font: 700 1.2rem/1.25 var(--serif); }
.skill-grid a:hover, .skill-grid a:focus-visible { background: var(--biro-soft); }
@media (max-width: 60rem) { .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .skill-grid { grid-template-columns: minmax(0, 1fr); } .skill-grid a { min-height: 0; } }

/* routes: home copy set in columns */
.band-routes { border-bottom: 0; }
.routes-intro { font: 500 clamp(1.25rem, 2vw, 1.6rem)/1.4 var(--serif); max-width: 52rem; margin-block-end: 2.25rem; }
.routes-intro p { margin: 0 0 .75rem; }
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem clamp(1.5rem, 3vw, 3rem); }
.route { font-size: 1rem; }
.route > * { max-width: none; }
.route h2 { font-size: 1.35rem; margin: 0 0 .6rem; padding-block-start: .6rem; border-top: 2px solid var(--rule-ink); }
@media (max-width: 62rem) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .routes { grid-template-columns: minmax(0, 1fr); } }

/* page head: a ruled sheet */
.page-head { background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px); background-color: var(--paper); border-bottom: 2px solid var(--rule-ink); padding-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { background: var(--paper); box-decoration-break: clone; -webkit-box-decoration-break: clone; display: inline; padding-inline-end: .15em; }
.page-head .crumbs ol { background: var(--paper); display: inline-flex; padding-inline-end: .5rem; }
.page-head-art .page-head-grid { align-items: start; }
.page-head-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.page-art .art { width: 15rem; max-width: 100%; background: var(--paper); }
.page-art .board-fig { background: var(--paper); padding: .5rem; }
.mark { display: flex; align-items: center; gap: .85rem; background: var(--paper); border: 1px solid var(--rule-ink); padding: .6rem .8rem; color: var(--ink); text-decoration: none; }
.mark svg { display: block; width: 5.5rem; height: 5.5rem; flex: none; }
.mark-d { fill: var(--rule); }
.mark-lit { fill: var(--biro); }
.mark-frame { fill: none; stroke: var(--rule-ink); stroke-width: .12; }
.mark-text { display: grid; gap: .1rem; }
.mark-k { font: 500 .7rem/1.3 var(--mono); color: var(--ink-2); }
.mark-v { font-weight: 650; font-size: .9375rem; line-height: 1.25; }
.mark:hover { border-color: var(--biro); }
.mark:hover .mark-v { color: var(--biro); }
.sheet { background: var(--paper); }
@media (max-width: 44rem) { .page-head-grid { grid-template-columns: minmax(0, 1fr); } .page-art .art { width: 11rem; } .mark svg { width: 4.25rem; height: 4.25rem; } }

/* article rhythm */
.answer { font: 500 clamp(1.25rem, 1.9vw, 1.5rem)/1.42 var(--serif); letter-spacing: -.005em; border-left: 4px solid var(--biro); padding-left: 1rem; margin-block-end: 1.5rem !important; }
.prose .disclose, .prose .depth { font-size: .9375rem; color: var(--ink-2); line-height: 1.5; }
.prose .depth strong { color: var(--ink); }
.prose > h2, .prose > .pending > h2 { counter-increment: sec; position: relative; }
@media (min-width: 76rem) {
  .prose > h2::before, .prose > .pending > h2::before { content: counter(sec) "."; position: absolute; right: calc(100% + .9rem); top: 1.05rem; font: 500 1rem/1 var(--mono); color: var(--ink-2); letter-spacing: 0; }
}
.hub-copy > h2::before, .route h2::before { content: none !important; }
.toc a[aria-current] { color: var(--biro); font-weight: 650; }
.toc li:has(a[aria-current])::before { color: var(--biro); }
.pending { background: var(--stamp-soft); border-left: 4px solid var(--stamp); padding: .1rem 1rem .4rem; margin-block-start: 2.5rem; }
.pending > h2 { border-top: 0; margin-block-start: .65rem; padding-block-start: .25rem; font-size: 1.4rem; }
.pending > h2::after { content: "∞"; font: 500 1rem/1 var(--mono); margin-inline-start: .6rem; color: var(--stamp); }
.table-wrap { border-top: 0; }
.table-wrap thead th { background: var(--ink); color: var(--paper); border-bottom: 0; padding: .55rem .7rem; }
.table-wrap th, .table-wrap td { padding-inline: .7rem; }
.table-wrap .th-sort { color: var(--paper); }
.table-wrap tbody tr:hover > * { background: var(--biro-soft); }
.next-move { border: 0; padding: 1.1rem 1.25rem; }
.next-move a { font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--ink); }
.next-arrow { color: var(--biro); }
.sources ol { columns: 2; column-gap: 2rem; }
.sources li { break-inside: avoid; }
@media (max-width: 44rem) { .sources ol { columns: 1; } }

/* hubs in two columns */
.hub-grid { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.hub-copy { min-width: 0; }
.hub-side .hub-group:first-child { margin-block-start: 0; }
.hub-side .hub-group h2 { font-size: 1.2rem; }
.hub-side .ledger-row { grid-template-columns: 2rem minmax(0, 1fr); padding: .5rem 0; }
.hub-side .ledger-type { display: none; }
.hub-side .ledger-cols { columns: 1; }
.hub-grid-gallery { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); }
.hub-side .opening-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1.25rem 1rem; }
.hub-side .opening-name { font-size: 1rem; }
@media (max-width: 62rem) { .hub-grid, .hub-grid-gallery { grid-template-columns: minmax(0, 1fr); } .hub-side { border-top: 2px solid var(--rule-ink); padding-block-start: 1.25rem; } }

/* footer in reverse */
.foot { border-top: 0; }
.foot-preview, .foot-preview a { color: var(--stamp); }

/* subtle scroll-driven settle on list rows; transform only, so nothing is ever hidden */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes settle { from { transform: translateY(14px); } to { transform: none; } }
    .ladder li, .skill-grid li, .opening-card { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}

/* header fit */
.logo-word { white-space: nowrap; }
.nav-primary { gap: .9rem; }
.nav-primary a, .nav-more summary { font-size: .96875rem; white-space: nowrap; }
@media (max-width: 78rem) { .nav-primary, .mast-row > .btn-finder { display: none; } .nav-mobile { display: block; margin-inline-start: 0; } .search-btn { margin-inline-start: auto; } }
@media (max-width: 30rem) { .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .mast-row { gap: .75rem; } }

/* page head: the ruled sheet fades in behind the art, never behind the type */
.page-head { background-image: none; position: relative; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px); -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 86%); mask-image: linear-gradient(90deg, transparent 50%, #000 86%); }
.page-head h1 { background: none; display: block; padding: 0; }
.page-head .crumbs ol { background: none; display: flex; padding: 0; }
.sheet { background: var(--paper); }
.page-art .art { background: none; mix-blend-mode: multiply; }
.page-art .board-fig { background: none; padding: 0; }
.page-art .bd { background: #FBFBF7; }
@media (prefers-color-scheme: dark) { .page-art .art { mix-blend-mode: screen; } }
@media (max-width: 44rem) { .page-head::before { display: none; } }

/* ladder numerals stay on one line */
.lad-n { white-space: nowrap; font-size: clamp(2.4rem, 6.4vw, 5.25rem); }
.ladder-side .lad-n { font-size: clamp(1.9rem, 3vw, 2.5rem); }

/* art sits in the page, not on it */
.art { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { .art, .page-art .art { mix-blend-mode: lighten; } }

/* soft paper edge so art never shows a box */
.page-art .art {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}

/* ---------- review pass ---------- */
/* The board reads as a position: stones are rating-specific, general squares just carry their name */
.is-general .sq-stone { display: none; }
.is-general .sq-coord { opacity: .62; background: transparent; left: 50%; top: 50%; translate: -50% -50%; font-size: .72rem; }
.sq-d.is-general .sq-coord { background: var(--paper); padding: 1px 3px; }
a.sq:hover .sq-coord, a.sq:focus-visible .sq-coord { opacity: 1; color: var(--biro); }
.sq.is-sel .sq-coord { opacity: 0; }
.key-coord { font: 500 .72rem/1 var(--mono); color: var(--ink-2); }
.board-knight { transition: none; }
.board-knight svg { filter: drop-shadow(0 1px 0 rgb(20 24 28 / .25)); }
.finder-panel.is-open { min-height: 18rem; }
.panel-h:focus { outline: none; }

.sq-count { display: none; }
.board.show-counts .sq { background-image: none; }
.board.show-counts .sq::before { content: ""; position: absolute; inset: 0; background: var(--biro); opacity: var(--heat, 0); }
.board.show-counts .sq-stone, .board.show-counts .sq-coord { display: none; }
.board.show-counts .sq-count { display: grid; place-items: center; position: absolute; inset: 0; font: 500 .9rem/1 var(--mono); color: var(--ink); z-index: 1; }
.board.show-counts .sq-count:not(:empty) { text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 2px var(--paper); }
.density { margin: .25rem 0 .9rem; }
.density-note { font-size: .875rem; color: var(--ink-2); margin: .25rem 0 0; }

.board-legend { display: none; margin: .65rem 0 0; font: 500 .72rem/1.5 var(--mono); color: var(--ink-2); }
.board-legend div { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); padding: .15rem 0; }
.board-legend dt { color: var(--ink); }
.board-legend dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 .7rem; }
.board-legend b { color: var(--biro); font-weight: 500; }
@media (max-width: 40rem) { .board-legend { display: block; } }

/* Page head: plain paper, no half-ruled sheet */
.page-head::before { display: none; }

/* Dark: quieter hatch, plated diagrams */
@media (prefers-color-scheme: dark) {
  :root { --hatch: #7A828C; }
  .bd { outline: 4px solid #FBFBF7; outline-offset: -1px; }
}

/* Diagram marks and side chip */
.bd-mini .bd-mark { fill: rgba(30, 63, 208, .26); }
.opening-side { display: block; font: 500 .72rem/1.3 var(--mono); color: var(--biro); margin-block-start: .5rem; }
.opening-side + .opening-name { margin-block-start: .05rem; }

/* Wide data tables take the free column */
.article-grid { justify-content: start; }
.table-wide tbody th, .table-wide thead th:first-child { position: sticky; left: 0; z-index: 1; }
.table-wide tbody th { background: var(--paper); }
.table-wide tbody tr:hover > th { background: var(--biro-soft); }
.table-wide thead th:first-child { background: var(--ink); }
@media (min-width: 76rem) {
  .prose .table-wide { max-width: none !important; width: min(58rem, calc(100vw - 2 * var(--gut) - 20rem)); }
}
@media (max-width: 40rem) {
  .table-wide.table-stack tbody th { position: static; }
}

/* Comparison tables read as a scoresheet */
.t-comparison .prose .table-wrap tbody { counter-reset: row; }
.t-comparison .prose .table-wrap tbody tr { counter-increment: row; }
.t-comparison .prose .table-wrap tbody th::before { content: counter(row) ". "; font: 500 .85em var(--mono); color: var(--ink-2); }

/* Signs and stamps */
.rule-sign { font: 800 2.6rem/1 var(--serif); color: var(--stamp); }
.callout-sign { min-width: 2.1rem; height: 2.1rem; font: 800 1.25rem/1 var(--serif); }
.prose .depth { border: 1.5px solid var(--stamp); padding: .55rem .75rem; }
.prose .depth strong { color: var(--stamp); }

/* Board mark */
.mark-h { fill: var(--ink-2); }
.mark svg { background: var(--paper); }

/* Calculators: empty state is a hint */
.calc-msg { color: var(--ink-2); font-size: 1rem; }
.pph-example { margin-block-start: .5rem; }
.btn-text { background: none; border: 0; padding: .35rem 0; color: var(--biro); font: 650 1rem/1.3 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
fieldset.bare { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.bare > legend { padding: 0; font: 750 1.15rem/1.3 var(--serif); margin-block: 1.1rem .45rem; }
.map-col fieldset.bare > legend { margin-block-start: 0; }
.plan-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .85rem; }
.btn-plan { background: transparent; color: var(--biro); border-color: var(--biro); cursor: pointer; }
.btn-plan:hover { background: var(--biro); color: var(--paper); }

/* Tracker */
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin-block: 1.25rem .75rem; }
.plate { margin: 0; min-width: 0; }
.plate svg { display: block; width: 100%; height: auto; }
.plate figcaption { font-size: .875rem; color: var(--ink-2); margin-block-start: .35rem; }
.pl-axis { stroke: var(--rule-ink); stroke-width: 1; fill: none; }
.pl-grid { stroke: var(--rule); stroke-width: 1; }
.pl-t { font: 500 11px var(--mono); fill: var(--ink-2); }
.pl-dot { fill: var(--biro); fill-opacity: .72; stroke: var(--paper); stroke-width: 1; }
a:hover .pl-dot, a:focus .pl-dot { fill: var(--stamp); fill-opacity: 1; }
@media (max-width: 52rem) { .plates { grid-template-columns: minmax(0, 1fr); } }
.tr-empty { padding: .75rem; margin: .5rem 0 0; background: var(--paper-2); }
.tr-more { margin-block-start: .85rem; }
.row-more { display: none; }
@media (max-width: 40rem) {
  .compact .row-more { display: inline-grid; place-items: center; float: right; width: 2.75rem; height: 2.75rem; margin: -.5rem -.4rem 0 .5rem; background: none; border: 1.5px solid var(--rule); color: var(--biro); font: 500 1.25rem/1 var(--mono); cursor: pointer; }
  .compact tr:not(.open) td:not([data-label="List price"]):not([data-label="Refund terms"]) { display: none; }
  .compact tr:not(.open) td[data-label="Refund terms"] .cell-note, .compact tr:not(.open) td[data-label="List price"] .cell-note { display: none; }
}

/* Opening walker */
.walker { border: 2px solid var(--rule-ink); padding: clamp(1rem, 2.4vw, 1.75rem); margin-block-end: 2.5rem; }
.walker h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.walk-intro { margin: .35rem 0 1.1rem; color: var(--ink-2); max-width: 40rem; }
.walk-grid { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.walk-board { aspect-ratio: 1; }
.walk-board svg { display: block; width: 100%; height: 100%; }
.walk-arrow { cursor: pointer; }
.walk-hit { stroke: transparent; stroke-width: .7; stroke-linecap: round; }
.walk-line { stroke: #1E3FD0; stroke-width: .11; stroke-linecap: round; opacity: .75; }
.walk-head { fill: #1E3FD0; opacity: .85; }
.walk-arrow:hover .walk-line, .walk-arrow:hover .walk-head { stroke: #B92D1A; fill: #B92D1A; opacity: 1; }
.walk-status { font: 500 .8125rem/1.4 var(--mono); color: var(--ink-2); margin: 0 0 .5rem; }
.walk-sheet { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-ink); min-height: 2.25rem; }
.walk-sheet li { display: grid; grid-template-columns: 2.25rem 1fr 1fr; padding: .28rem 0; border-bottom: 1px solid var(--rule); font: 500 .95rem/1.4 var(--mono); }
.walk-empty { display: block !important; color: var(--ink-2); font-family: var(--sans) !important; }
.walk-n { color: var(--ink-2); }
.walk-next { display: flex; flex-wrap: wrap; gap: .45rem; margin-block: .85rem; min-height: 3rem; }
.walk-move { display: grid; gap: .05rem; background: var(--biro); color: var(--paper); border: 0; padding: .45rem .8rem; min-height: 44px; font: 700 1.05rem/1.2 var(--mono); cursor: pointer; text-align: left; }
.walk-move:hover { background: var(--ink); }
.walk-move .walk-count { color: inherit; opacity: .85; font: 500 .7rem/1.2 var(--sans); }
.walk-end { margin: .4rem 0; color: var(--ink-2); }
.walk-tools { display: flex; gap: 1rem; }
.walk-btn { background: none; border: 0; padding: .35rem 0; min-height: 44px; color: var(--biro); font: 600 .9375rem/1 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.walk-btn:disabled { color: var(--ink-2); text-decoration: none; cursor: default; }
.walk-lines { list-style: none; margin: .4rem 0 0; padding: 0; border-top: 2px solid var(--rule-ink); max-height: 14rem; overflow: auto; }
.walk-lines li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .1rem 1rem; padding: .4rem 0; border-bottom: 1px solid var(--rule); }
.walk-lines a { font-weight: 600; text-decoration: none; }
.walk-lines a:hover { text-decoration: underline; }
.walk-count { font: 500 .78rem/1.5 var(--mono); color: var(--ink-2); }
@media (max-width: 52rem) { .walk-grid { grid-template-columns: minmax(0, 1fr); } .walk-board { max-width: 26rem; } }

@media print { .walker, .plan-actions, .search-btn { display: none; } }

.day-grid h3 { font: 700 1rem/1.3 var(--serif); margin: 0 0 .3rem; }
.tool-result h2.tool-sub { font-size: 1.25rem; margin-block: 1.1rem .25rem; }

.sq-d.is-general .sq-coord { opacity: 1; color: var(--ink-2); background: var(--paper); padding: 1px 4px; }
.board.show-counts .sq.hot .sq-count { color: #fff; text-shadow: none; }
@media (max-width: 40rem) { .is-general .sq-coord { font-size: .62rem; } }