/* sudoku.rubigogames.com
   No web fonts on purpose: the pages have to be instant and shift-free, and the
   board is the thing that should carry the design, not the headings. */

:root {
  --ink: #12141a;
  --ink-2: #4b5160;
  --ink-3: #737a8c;
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-2: #f2f3f7;
  --line: #e2e4ec;
  --line-strong: #c8ccd9;
  --accent: #2881e7;
  --accent-ink: #1565c0;
  --accent-wash: #e9f2fd;
  --shadow: 0 1px 2px rgb(16 20 32 / .05), 0 8px 24px -12px rgb(16 20 32 / .12);
  --shadow-lg: 0 2px 4px rgb(16 20 32 / .05), 0 24px 48px -24px rgb(16 20 32 / .22);

  /* Board roles, matched to HintPalette in the app. */
  --r-target: #a5d6a7;
  --r-cause: #43a047;
  --r-related: #64b5f6;
  --r-blocker: #ffb74d;
  --r-elim: #e57373;
  --cell-bg: #ffffff;
  --cell-line: #d8dbe6;
  --cell-line-strong: #6f7488;
  --note-ink: #5b6173;

  --wrap: 1120px;
  --measure: 68ch;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef5;
    --ink-2: #a8aec0;
    --ink-3: #848a9c;
    --bg: #0f1117;
    --surface: #161922;
    --surface-2: #1c202b;
    --line: #272c3a;
    --line-strong: #3a4054;
    --accent: #5fa8ff;
    --accent-ink: #8ec6ff;
    --accent-wash: #0f1d2c;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / .4), 0 24px 48px -24px rgb(0 0 0 / .7);

    --r-target: #558b2f;
    --r-cause: #2e7d32;
    --r-related: #1976d2;
    --r-blocker: #ffa726;
    --r-elim: #ce4744;
    --cell-bg: #12151d;
    --cell-line: #2b3040;
    --cell-line-strong: #767c92;
    --note-ink: #9aa1b5;
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -.022em; text-wrap: balance; font-weight: 680; }
h1 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.2rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); }
h3 { font-size: 1.125rem; letter-spacing: -.012em; }
p, li { text-wrap: pretty; }

a { color: var(--accent-ink); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

img, svg, picture { display: block; max-width: 100%; }
strong { font-weight: 640; }

/* Hidden by clipping, not by being parked off to one side. `left: -9999px`
   costs nothing in a left-to-right page, where overflow past the inline start
   is not scrollable, but under `dir="rtl"` that side IS the scrollable end:
   9999 + the viewport made the Arabic pages 11264px wide and they rendered as
   a blank screen. */
.skip {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 200;
  width: auto; height: auto; margin: 0; clip-path: none; overflow: visible;
  background: var(--accent); color: #fff; padding: .7rem 1.2rem;
  border-radius: 0 0 var(--r-sm) 0;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: calc(100% - 2rem); } }

/* ── Language offer ───────────────────────────────────────────────────── */
/* Inserted above the header by the inline lang-offer.js when the browser's
   language is not the page's and the site has it. The strip is written in the OFFERED language, so
   it sets its own lang and dir rather than inheriting the page's. */
.langbar { background: var(--accent-wash); border-bottom: 1px solid var(--line); font-size: .9375rem; }
/* The close button sits at the inline end regardless of how the sentence and
   the button wrap, so a narrow screen never strands a lone x on its own line. */
.langbar > .wrap { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding-block: .65rem; padding-inline: 0 2.6rem; }
.langbar p { margin: 0; flex: 1 1 8rem; min-width: 0; color: var(--ink); }
.langbar .btn-sm { white-space: nowrap; }
.langbar-close {
  position: absolute; inset-inline-end: -.55rem; top: .55rem;
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--ink-2); font-size: 1.5rem; line-height: 1; padding: .2rem .55rem;
  border-radius: var(--r-sm);
}
.langbar-close:hover { color: var(--ink); background: var(--surface); }

/* ── Header ───────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar > .wrap { display: flex; align-items: center; gap: 1.5rem; height: 4rem; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem; font-weight: 700;
  color: var(--ink); text-decoration: none; letter-spacing: -.02em; font-size: 1.0625rem;
  margin-right: auto;
}
.brand-mark { width: 1.6rem; height: 1.6rem; color: var(--accent); flex: none; }
.brand-mark.small { width: 1.1rem; height: 1.1rem; display: inline-block; vertical-align: -.15em; }
.brand-mark svg { width: 100%; height: 100%; }

.mainnav { display: flex; gap: 1.4rem; }
.mainnav a {
  color: var(--ink-2); text-decoration: none; font-size: .9375rem; font-weight: 520;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: var(--ink); }
.mainnav a.is-current { color: var(--ink); border-bottom-color: var(--accent); }

.navtoggle { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; }
.navtoggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
.navtoggle span + span { margin-top: 5px; }
.mobilenav { display: none; }

@media (max-width: 900px) {
  .mainnav, .topbar .btn { display: none; }
  .navtoggle { display: block; }
  .mobilenav { display: flex; flex-direction: column; padding: .5rem 0 1rem; border-top: 1px solid var(--line); }
  .mobilenav[hidden] { display: none; }
  .mobilenav a { padding: .7rem 1.25rem; color: var(--ink); text-decoration: none; font-weight: 520; }
  .mobilenav a:hover { background: var(--surface-2); }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: .7rem 1.35rem; border-radius: 40px; font-weight: 600; font-size: .9375rem;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }

.store-row { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.6rem 0 0; }
.store-row.compact { margin-top: 1.25rem; }
.store-btn {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--ink); color: var(--bg); text-decoration: none;
  padding: .6rem 1.15rem; border-radius: 12px; line-height: 1.15;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em;
  transition: transform .15s ease, box-shadow .15s ease;
}
.store-btn:hover { color: var(--bg); transform: translateY(-2px); box-shadow: var(--shadow); }
.store-btn svg { width: 22px; height: 22px; flex: none; }
.store-btn span { display: flex; flex-direction: column; }
.store-btn small { font-size: .625rem; font-weight: 500; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }

/* ── Bands & shared prose ─────────────────────────────────────────────── */

.band { padding: clamp(2.75rem, 1.5rem + 4vw, 5rem) 0; }
.band + .band { border-top: 1px solid var(--line); }
.band-hero { padding-block: clamp(2.25rem, 1rem + 4vw, 4rem); border-top: 0; }
.band-features, .band-hub, .band-terms, .band-levels, .band-faq { background: var(--surface-2); }

.kicker {
  font-size: .8125rem; font-weight: 620; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .9rem;
}
.kicker a { color: inherit; }
.lede { color: var(--ink-2); font-size: 1.0625rem; max-width: var(--measure); }
.lede.big { font-size: clamp(1.0625rem, 1rem + .5vw, 1.3rem); color: var(--ink-2); }
.answer {
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.25rem); color: var(--ink-2);
  max-width: var(--measure); margin-top: 1.1rem;
}
.aka { color: var(--ink-3); font-size: .9375rem; margin-top: .6rem; }
.note { color: var(--ink-2); background: var(--surface-2); border-left: 3px solid var(--line-strong);
        padding: 1rem 1.2rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; max-width: var(--measure); }

.band-prose h2 { margin-top: 2.6rem; }
.band-prose h2:first-child { margin-top: 0; }
.band-prose p, .band-prose ul, .band-prose ol { max-width: var(--measure); margin-top: 1rem; }
.band-prose ul, .band-prose ol { padding-left: 1.3rem; }
.band-prose li + li { margin-top: .45rem; }
.band-prose .big { font-size: 1.125rem; }
ol.numbered li { margin-top: .8rem; }

.crumbs { padding: 1.1rem 0 0; }
.crumbs ol {
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0;
  font-size: .8125rem; color: var(--ink-3);
}
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--line-strong); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

.facts { display: grid; gap: .25rem; margin-top: 1.8rem; max-width: 34rem; }
.facts > div { display: flex; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--ink-3); font-size: .9375rem; flex: 0 0 11rem; }
.facts dd { margin: 0; font-weight: 560; font-size: .9375rem; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.chips-label { font-size: .8125rem; font-weight: 620; letter-spacing: .05em; text-transform: uppercase;
               color: var(--ink-3); margin-top: 2rem; }
.chip {
  display: inline-block; padding: .35rem .8rem; border-radius: 12px; font-size: .875rem;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ── Home ─────────────────────────────────────────────────────────────── */

.home-hero { background: linear-gradient(180deg, var(--accent-wash), transparent 80%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-copy h1 { margin-bottom: 1.1rem; }
.hero-art img { margin-inline: auto; width: min(100%, 300px); height: auto; filter: drop-shadow(0 30px 50px rgb(16 20 32 / .22)); border-radius: 26px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem; list-style: none; padding: 0; margin-top: 2.25rem; }
.hero-facts li { font-size: .875rem; color: var(--ink-3); line-height: 1.3; }
.hero-facts strong { display: block; font-size: 1.75rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .hero-art img { width: min(100%, 230px); }
}

.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; margin-top: 2rem; }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.4rem; }
.fcard h3 { margin-bottom: .5rem; }
.fcard p { color: var(--ink-2); font-size: .9375rem; }

.lgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; }
.lcard {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.4rem; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.lcard:hover { border-color: var(--accent); transform: translateY(-2px); color: inherit; }
.lcard h3 { margin-bottom: .45rem; }
.lcard p { color: var(--ink-2); font-size: .9375rem; }
.lcard .more { display: inline-block; margin-top: .9rem; font-size: .875rem; font-weight: 600; color: var(--accent-ink); }
.lcard .more::after { content: " \2192"; }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.shot img { border-radius: 20px; box-shadow: var(--shadow-lg); width: 100%; height: auto; }
.shot figcaption { margin-top: .85rem; font-size: .875rem; color: var(--ink-3); text-align: center; }

/* ── Technique hub & pages ────────────────────────────────────────────── */

.tgroup + .tgroup { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.tgroup h2 { margin-bottom: .4rem; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: .75rem; margin-top: 1.4rem; }
.tcard {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1rem 1.15rem; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.tcard:hover { border-color: var(--accent); transform: translateY(-1px); color: inherit; }
.tcard strong { display: block; font-size: 1rem; letter-spacing: -.012em; }
.tcard span { display: block; margin-top: .3rem; color: var(--ink-3); font-size: .875rem; line-height: 1.45; }

.relgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; margin-top: 1.5rem; }
.relcard {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1rem 1.15rem; text-decoration: none; color: inherit;
}
.relcard:hover { border-color: var(--accent); color: inherit; }
.relcard small { display: block; color: var(--ink-3); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 620; }
.relcard strong { display: block; margin-top: .3rem; font-size: 1.0625rem; letter-spacing: -.015em; }

.band-tech-hero { background: linear-gradient(180deg, var(--surface-2), transparent 85%); }
.band-related p { max-width: var(--measure); }

/* ── Levels & glossary ────────────────────────────────────────────────── */

.levels { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: .9375rem; }
.levels caption { text-align: left; color: var(--ink-3); font-size: .875rem; padding-bottom: .6rem; }
.levels th, .levels td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.levels thead th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 620; }
.levels tbody th { font-weight: 620; }

.level + .level { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.level p { max-width: var(--measure); margin-top: .75rem; color: var(--ink-2); }
.level-claim { font-size: 1.125rem; color: var(--ink) !important; font-weight: 560; }

.terms { columns: 2; column-gap: 2.5rem; margin-top: 1rem; }
@media (max-width: 760px) { .terms { columns: 1; } }
.term { break-inside: avoid; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.term h2 { font-size: 1.0625rem; letter-spacing: -.012em; }
.term p { color: var(--ink-2); font-size: .9375rem; margin-top: .4rem; }
.term .eg { color: var(--ink-3); font-size: .875rem; font-style: italic; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faqs { margin-top: 1.75rem; max-width: 52rem; }
.faqs details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.faqs details + details { margin-top: .6rem; }
.faqs summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary h3 { font-size: 1rem; font-weight: 580; flex: 1; }
.faqs summary::after { content: "+"; font-size: 1.25rem; color: var(--ink-3); line-height: 1; }
.faqs details[open] summary::after { content: "\2013"; }
.faqs details > div { padding: 0 1.25rem 1.15rem; color: var(--ink-2); font-size: .9375rem; }
.faqs details > div p + p { margin-top: .7rem; }

/* ── The board ────────────────────────────────────────────────────────── */

.board-fig { margin: 1.75rem 0 0; max-width: 30rem; }
.board {
  position: relative;
  display: grid; grid-template-columns: repeat(9, 1fr); aspect-ratio: 1;
  background: var(--cell-bg);
  border: 2px solid var(--cell-line-strong); border-radius: 6px; overflow: hidden;
  container-type: inline-size;
}
.cell {
  position: relative; display: grid; place-items: center;
  border-right: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line);
  min-width: 0;
}
.cell:nth-child(9n) { border-right: 0; }
.cell:nth-child(n+73) { border-bottom: 0; }
.cell.bx-r { border-right: 2px solid var(--cell-line-strong); }
.cell.bx-b { border-bottom: 2px solid var(--cell-line-strong); }

.val { font-size: 5.1cqw; font-weight: 560; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; place-items: center; }
.notes i { font-style: normal; font-size: 2.35cqw; line-height: 1; color: var(--note-ink); font-variant-numeric: tabular-nums; }
.notes i.nhl { color: #fff; font-weight: 700; background: #1565c0; border-radius: 2px; padding: .1em .22em; margin: -.1em -.22em; }
.notes i.nrcc { color: #fff; font-weight: 700; background: #ef6c00; border-radius: 2px; padding: .1em .22em; margin: -.1em -.22em; }
.notes i.ngone { color: var(--r-elim); text-decoration: line-through; text-decoration-thickness: .1em; opacity: .85; }
/* Struck by an earlier step, not this one: same mark, one tier back. */
.notes i.ncarried { opacity: .6; }

.cell.r-target { background: var(--r-target); }
.cell.r-cause { background: var(--r-cause); }
.cell.r-related { background: var(--r-related); }
.cell.r-blocker { background: var(--r-blocker); }
.cell.r-elim { background: var(--r-elim); }
.cell.r-cause .val, .cell.r-related .val, .cell.r-cause .notes i, .cell.r-related .notes i { color: #fff; }
.cell.r-target .val, .cell.r-blocker .val, .cell.r-target .notes i, .cell.r-blocker .notes i { color: #17240f; }
.cell.r-elim .val, .cell.r-elim .notes i { color: #3d0000; }
.cell.r-elim .notes i.ngone { color: #3d0000; }
.cell.in-path { box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--r-related) 14%, transparent); }

.cell.gb { --gb: var(--r-cause); }
.cell.gb-related { --gb: var(--r-related); }
.cell.gb-blocker { --gb: var(--r-blocker); }
.cell.gb-elimination { --gb: var(--r-elim); }
.cell.gb-target { --gb: var(--r-target); }
.cell.gb::after, .cell.gb2::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-color: var(--gb); border-style: solid; border-width: 0;
}
.cell.gb2 { --gb: var(--r-related); }
.cell.gb2-cause { --gb: var(--r-cause); }
.cell.gb2-blocker { --gb: var(--r-blocker); }
.cell.gb2-elimination { --gb: var(--r-elim); }
/* Exact classes, never [class*=]: the role class gb-target contains "gb-t". */
.cell.gbe-t::after, .cell.gb2e-t::after { border-top-width: 3px; }
.cell.gbe-b::after, .cell.gb2e-b::after { border-bottom-width: 3px; }
.cell.gbe-l::after, .cell.gb2e-l::after { border-left-width: 3px; }
.cell.gbe-r::after, .cell.gb2e-r::after { border-right-width: 3px; }

.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.links line { stroke: var(--ink); stroke-width: .045; stroke-linecap: round; opacity: .55; stroke-dasharray: .16 .12; }

.board-fig figcaption { margin-top: .75rem; font-size: .875rem; color: var(--ink-3); }
.board-nav { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; }
.board-nav button {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-size: 1rem; cursor: pointer;
}
.board-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.board-nav button:disabled { opacity: .35; cursor: default; }
.board-step { font-size: .875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1.25rem; font-size: .8125rem; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; flex: none; vertical-align: -.05em; }
.dot.r-target { background: var(--r-target); }
.dot.r-cause { background: var(--r-cause); }
.dot.r-related { background: var(--r-related); }
.dot.r-blocker { background: var(--r-blocker); }
.dot.r-elim { background: var(--r-elim); }

.lesson + .lesson { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.lesson h3 { margin-bottom: .4rem; }
@media (min-width: 900px) {
  .lesson { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .lesson h3, .lesson > .lede { grid-column: 1 / -1; }
  .lesson .board-fig { margin-top: 1rem; }
  .lesson .steps { margin-top: 1.9rem; }
}
.steps { list-style: none; padding: 0; margin-top: 1.5rem; counter-reset: s; }
.steps li { display: flex; gap: .85rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps .n {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--surface-2);
  color: var(--ink-3); font-size: .75rem; font-weight: 640; display: grid; place-items: center;
  margin-top: .15rem;
}
.steps li.is-active .n { background: var(--accent); color: #fff; }
.steps p { font-size: .9375rem; color: var(--ink-2); }
.steps li.is-active p { color: var(--ink); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.sitefoot { background: var(--surface-2); border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.foot-cta { text-align: center; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.foot-kicker { font-size: .8125rem; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.foot-cta h2 { margin: .6rem auto 0; max-width: 22ch; }
.foot-cta .store-row { justify-content: center; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; padding: 2.5rem 0; }
.foot-cols h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 620; }
.foot-cols ul { list-style: none; padding: 0; margin-top: .9rem; }
.foot-cols li + li { margin-top: .5rem; }
.foot-cols a { color: var(--ink-2); text-decoration: none; font-size: .9375rem; }
.foot-cols a:hover { color: var(--accent); text-decoration: underline; }
.foot-base { border-top: 1px solid var(--line); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; color: var(--ink-3); font-size: .875rem; }
.foot-base a { color: var(--ink-2); }

/* ── Legal pages ──────────────────────────────────────────────────────── */

.band-legal h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem); }
.band-legal h2 { font-size: 1.25rem; margin-top: 2.2rem; }
.band-legal .legal-updated { color: var(--ink-3); font-size: .9375rem; margin-top: .5rem; }
.band-legal p, .band-legal ul { color: var(--ink-2); font-size: .9375rem; }

.tech-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.tech-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .4rem 1.35rem 1.1rem; }
.tech-card .facts { margin-top: 0; max-width: none; }
.tech-card .facts > div { display: block; }
.tech-card .facts dt { flex: none; font-size: .8125rem; }
.tech-card .facts dd { margin-top: .1rem; }
@media (max-width: 880px) { .tech-hero { grid-template-columns: 1fr; } }
.lessons { margin-top: 2.25rem; }
.legend { margin-top: 1.5rem; }

/* Hero bands are not inside .band-prose, so they need their own rhythm. */
.band-hero p + p, .band-hero ul, .band-hero ol, .band-hero table { margin-top: 1.1rem; }
.band-hero p:not(.answer):not(.kicker):not(.aka):not(.lede) { max-width: var(--measure); color: var(--ink-2); }
.lesson > .lede { margin-bottom: -.75rem; }

/* ── Language switcher ────────────────────────────────────────────────── */

.langs { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: -.5rem; }
.langs h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 620; }
.langs ul { list-style: none; padding: 0; margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.langs a { color: var(--ink-2); text-decoration: none; font-size: .875rem; }
.langs a:hover { color: var(--accent); text-decoration: underline; }
.langs a[aria-current] { color: var(--ink); font-weight: 620; }

/* The screenshots are the store images, caption and all, so they carry their
   own light background: give them a frame rather than letting them glare. */
.shots { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.shot img { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero-art img { border-radius: 18px; border: 1px solid var(--line); filter: none; box-shadow: var(--shadow-lg); width: min(100%, 330px); }

/* RTL: the page mirrors, the Sudoku grid does not — a board is a board. */
[dir="rtl"] .board, [dir="rtl"] .notes, [dir="rtl"] .levels { direction: ltr; }
[dir="rtl"] .steps li, [dir="rtl"] .facts > div { text-align: start; }
[dir="rtl"] .lcard .more::after { content: " \2190"; }
[dir="rtl"] .crumbs li + li::before { content: "\\"; }