/* Luftchess public pages: the scoresheet world (docs/DESIGN_PUBLIC_PAGES.md). No JavaScript, nothing moves. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/static/fonts/atkinson-next-latin.18b2a1a39a.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* A metric-matched stand-in while the face loads, so the page does not jump when it arrives. */
@font-face {
  font-family: "Atkinson fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Liberation Sans");
  size-adjust: 99.1%;            /* measured 27 Sep 2026 against Arial with fontTools: widths 0.991, */
  ascent-override: 99.3%;        /* ascent 984 and descent 316 per 1000, divided by the size-adjust */
  descent-override: 31.9%;
  line-gap-override: 0%;
}

:root {
  --ground: #FCFDFE;
  --air: #D8E5F1;
  --sheet: #FCFDFE;
  --ink: #14203A;
  --ink-2: #4A5872;
  --cobalt: #1E44B0;
  --cobalt-hover: #17378F;
  --on-cobalt: #FFFFFF;
  --rule: #A9BBD9;
  --rule-strong: #667BA6;
  --amber: #B5650B;
  --amber-text: #8A5210;
  --board-light: #F0E7D6;
  --board-dark: #7F90C2;
  --board-ink: #14203A;
  --board-amber: #B5650B;
  --r-sheet: 4px;
  --r-sm: 6px;
  --gutter: 3rem;
  --font: "Atkinson Hyperlegible Next", "Atkinson fallback", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #23262D;
    --air: #2A3142;
    --sheet: #2E333C;
    --ink: #E7ECF3;
    --ink-2: #A7B2C4;
    --cobalt: #9DB5F5;
    --cobalt-hover: #BACBF8;
    --on-cobalt: #0F1628;
    --rule: #394455;
    --rule-strong: #707E96;
    --amber: #E3A55A;
    --amber-text: #E3A55A;
    --board-light: #E4DCCB;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--rule-strong) var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--cobalt); color: var(--on-cobalt); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.15s ease-out, background-color 0.15s ease-out; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 2px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 10; padding: 10px 14px; background: var(--sheet); color: var(--cobalt); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.moves, .num { font-variant-numeric: tabular-nums; }

/* ---------- header and footer ---------- */
.site-head { background: var(--ground); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.005em; text-decoration: none; min-height: 44px; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.mark-dot { fill: var(--cobalt); }
.mark-ring { stroke: var(--amber); }
.site-head .signin { color: var(--ink); font-weight: 600; text-decoration: none; padding: 10px 2px; }
.site-head .signin:hover, .site-head .signin:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }

.site-foot { background: var(--ground); color: var(--ink-2); font-size: 0.875rem; padding: 40px 0 48px; border-top: 1px solid var(--rule); }
.site-foot nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 20px; }
.site-foot nav a { color: var(--ink); display: inline-block; padding: 8px 0; text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.site-foot nav a:hover { text-decoration: underline; }
.site-foot p + p { margin-top: 6px; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--r-sm); background: var(--cobalt); color: var(--on-cobalt); font-weight: 650; font-size: 1.0625rem; text-decoration: none; }
.btn:hover, .btn:active { background: var(--cobalt-hover); }
.link-strong { font-weight: 600; display: inline-block; padding: 12px 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }

/* ---------- the hero: air field, promise, the example sheet ---------- */
.hero { background: var(--air); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
.hero h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); font-weight: 750; line-height: 1.04; letter-spacing: -0.01em; max-width: 13ch; }
.lead { margin-top: 18px; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); max-width: 34ch; }
/* Every fact carries its own separator; the one that starts a line sits in a strip clipped off the left,
   so a wrapped line never opens with a stray dot. */
.facts { margin: 14px 0 0 -1.25em; display: flex; flex-wrap: wrap; color: var(--ink-2); clip-path: inset(0 0 0 1.25em); }
.facts span { white-space: nowrap; }
.facts span::before { content: "·"; content: "·" / ""; display: inline-block; width: 1.25em; text-align: center; color: var(--rule-strong); }
.hero .actions { margin-top: 24px; }
.hero-text { padding-bottom: 32px; }

.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); }
.example { position: relative; z-index: 1; margin: 0 0 -64px; padding: 0 16px 20px; }
.example-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-2); border-bottom: 1px solid var(--rule-strong); padding: 12px 0 10px; }
.example-label .tag { color: var(--cobalt); }
.example-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

.movesheet { width: 100%; border-collapse: collapse; }
.movesheet th, .movesheet td { height: 36px; padding: 0 8px; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 500; }
.movesheet thead th { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); height: 32px; }
.movesheet th[scope="row"] { width: var(--gutter); padding: 0 12px 0 0; text-align: right; color: var(--cobalt); font-weight: 500; }
.movesheet tbody tr.line td { color: var(--ink-2); }
.ringed { position: relative; display: inline-block; font-weight: 700; color: var(--ink); }
.ringed-empty { width: 3.25ch; height: 1.2em; vertical-align: middle; }
.cell-ring { position: absolute; left: 50%; top: 50%; width: 76px; height: 38px; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; }
.cell-ring path { fill: var(--amber); }

.example-board { display: grid; gap: 12px; justify-items: start; }
.board { display: block; width: 100%; height: auto; }
.board-example { max-width: 320px; }
.sq-l { fill: var(--board-light); }
.sq-d { fill: var(--board-dark); }
.co { font-family: var(--font); font-weight: 600; }
.co-on-l { fill: var(--board-dark); }
.co-on-d { fill: var(--board-light); }
.mk { fill: var(--board-ink); }
.mk-halo { fill: var(--board-light); stroke: var(--board-light); stroke-linejoin: round; }
.tg { fill: none; stroke: var(--board-ink); }
.tg-halo { fill: none; stroke: var(--board-light); }
.ring { fill: var(--board-amber); }
.ring-halo { fill: var(--board-light); stroke: var(--board-light); stroke-linejoin: round; }
.coach { font-size: 1.0625rem; line-height: 1.5; max-width: 34ch; }
.mv { font-weight: 700; white-space: nowrap; }
.u-amber { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.checked { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }

/* ---------- sections ---------- */
section { scroll-margin-top: 16px; }
.band { padding: 56px 0; }
.band-air { background: var(--air); }
.band h2, .reading h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; }
.features { padding-top: 112px; }
.entries { display: grid; gap: 32px; margin-top: 28px; list-style: none; }
.entry { border-top: 2px solid var(--cobalt); padding-top: 16px; }
.entry h3, .step h3, .faq summary { font-size: 1.125rem; font-weight: 650; line-height: 1.35; }
.entry p { margin-top: 8px; max-width: 46ch; }
.motto { margin-top: 10px !important; color: var(--ink-2); }
.also { margin-top: 32px; color: var(--ink-2); max-width: 66ch; }

.ruled { list-style: none; counter-reset: row; border-top: 1px solid var(--rule-strong); }
.ruled > li { counter-increment: row; display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); align-items: baseline; min-height: 48px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ruled > li::before { content: counter(row); color: var(--cobalt); font-weight: 500; font-variant-numeric: tabular-nums; }
.steps { margin-top: 28px; max-width: 66ch; }
.step p { margin-top: 4px; color: var(--ink-2); }
.more { margin-top: 20px; }

.for-whom p { margin-top: 16px; font-size: 1.125rem; max-width: 60ch; }

.honest { background: var(--ink); color: var(--ground); padding: 64px 0; }
.honest p { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem); line-height: 1.45; max-width: 40ch; font-weight: 500; }

.faq { margin-top: 28px; max-width: 72ch; border-top: 1px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr) 20px; align-items: center; min-height: 56px; padding: 10px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { color: var(--cobalt); font-weight: 500; font-size: 1rem; font-variant-numeric: tabular-nums; }
.faq summary svg { width: 14px; height: 14px; justify-self: end; color: var(--ink-2); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq summary:hover { color: var(--cobalt); }
.faq .a { padding: 0 0 18px var(--gutter); max-width: calc(66ch + var(--gutter)); }
.faq .a p + p { margin-top: 10px; }

.close .wrap { display: grid; gap: 28px; align-items: center; }
.close .board-luft { width: 160px; }
.close h2 { margin-bottom: 12px; }
.close p { max-width: 44ch; font-size: 1.125rem; }
.close .actions { margin-top: 24px; }

/* ---------- reading pages ---------- */
.title-band { background: var(--air); padding: 40px 0 44px; }
.title-band h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 750; line-height: 1.08; letter-spacing: -0.01em; max-width: 20ch; }
.title-band .summary { margin-top: 12px; font-size: 1.125rem; color: var(--ink-2); max-width: 52ch; }
.title-band .updated { margin-top: 12px; font-size: 0.875rem; color: var(--ink-2); }
.reading { padding: 40px 0 72px; }
.reading .col { max-width: calc(66ch + var(--gutter)); }
.reading section + section { margin-top: 44px; }
.reading h2 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.75rem); }
.reading h3 { font-size: 1.125rem; font-weight: 650; margin-top: 24px; }
.reading p, .reading ul, .reading ol, .reading dl { margin-top: 12px; }
.reading ul:not(.ruled):not(.accounts) { padding-left: 1.25em; }
.reading li + li { margin-top: 6px; }
.reading .ruled > li + li { margin-top: 0; }
.reading .ruled { margin-top: 16px; }
.reading .ruled > li > div > p:first-child { margin-top: 0; }
.clause { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); }
.clause > .n { color: var(--cobalt); font-weight: 500; font-variant-numeric: tabular-nums; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.75rem); line-height: 1.15; }
.clause > div > h2 { margin: 0; }
.sub { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); margin-top: 12px; }
.sub > .n { color: var(--cobalt); font-variant-numeric: tabular-nums; }
.sub > p { margin-top: 0; }
.note { border-left: 3px solid var(--amber); background: var(--sheet); padding: 14px 18px; margin: 0 0 36px; max-width: calc(66ch + var(--gutter)); }
.note p { margin: 0; }
.note p + p { margin-top: 6px; }
.table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.9375rem; }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
.table thead th { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); border-bottom-color: var(--rule-strong); }
.table tbody th { font-weight: 650; }
.table-lic thead th:first-child { width: 30%; }
.table-lic thead th:nth-child(2) { width: 24%; }
.id { white-space: nowrap; }
.accounts { list-style: none; border-top: 1px solid var(--rule-strong); }
.accounts li { min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.accounts li.empty { color: var(--ink-2); }
dl.gloss dt { font-weight: 650; margin-top: 16px; }
dl.gloss dd { margin: 4px 0 0; }
.figure { display: grid; gap: 16px; margin-top: 16px; }
.figure .board-luft { width: 160px; }
.figure .coach { max-width: 44ch; }
.plain-sheet { padding: 16px; margin-top: 16px; }

/* ---------- 404 ---------- */
.nf { background: var(--air); min-height: calc(100svh - 56px); display: grid; align-items: center; padding: 40px 0 72px; }
.nf .sheet { max-width: 560px; padding: 0 20px 24px; }
.nf h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 700; line-height: 1.2; margin-top: 20px; }
.nf .empty-row { display: grid; grid-template-columns: var(--gutter) 1fr 1fr; height: 40px; border-bottom: 1px solid var(--rule); align-items: center; }
.nf .empty-row .g { color: var(--cobalt); font-variant-numeric: tabular-nums; }
.nf .actions { margin-top: 20px; }

/* ---------- wider screens ---------- */
@media (min-width: 600px) {
  .wrap { padding: 0 24px; }
  .example { padding: 0 24px 24px; }
  .example-body { grid-template-columns: minmax(0, 1fr) minmax(0, 264px); gap: 24px; }
  .entries { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .close .wrap { grid-template-columns: 160px minmax(0, 1fr); gap: 40px; }
  .figure { grid-template-columns: 160px minmax(0, 1fr); gap: 28px; align-items: center; }
}
@media (min-width: 960px) {
  .wrap { padding: 0 32px; }
  .site-head .wrap { min-height: 64px; }
  .hero .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; padding-top: 72px; }
  .hero-text { grid-column: 1 / 7; padding: 0 0 80px; }
  .lead { font-size: 1.25rem; margin-top: 24px; }
  .facts { margin-top: 16px; }
  .table-lic thead th:first-child { width: 28%; }
  .table-lic thead th:nth-child(2) { width: 26%; }
  .hero .actions { margin-top: 32px; }
  .example { grid-column: 7 / 13; justify-self: end; width: 100%; max-width: 560px; margin-bottom: 0; align-self: start; margin-top: 10px; }
  .movesheet th, .movesheet td { height: 40px; }
  .band { padding: 80px 0; }
  .features { padding-top: 80px; }
  .entries { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .honest { padding: 88px 0; }
  .title-band { padding: 56px 0 60px; }
  .reading { padding: 56px 0 96px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .site-head .signin, .skip, .actions { display: none; }
  .hero, .band-air, .title-band, .nf { background: none; }
  .honest { background: none; color: #000; }
}
.reading .ruled h3 { margin-top: 0; }