/* =====================================================================
   STAY CHESSY, REDESIGN V3: "Playful + Bold + Clever"
   Hand-drawn chess characters on a clean, structured editorial interface.
   One stylesheet for every page in src/v3/ (system: docs/design-v3.md).

   Self-contained: V3 pages load only /fonts/fonts-v3.css and this file (no styles.css, v2.css or booking.css),
   and no V1 or V2 page loads this file, so the versions cannot affect each other. Class names that come from
   shared markup (booking wizard, waitlist and trial modals, pricing cards, Knight's Tour) are restyled here.
   Rules:
   - one Warm Nude background everywhere (nav included); Deep Navy only for the footer; no coloured panels,
     gradients, hatching, clouds or blobs; colour lives in the artwork, small accents, buttons and states
   - headings Bricolage Grotesque, everything else Plus Jakarta Sans
   - hand-drawn figures (src/images/chess-handdrawn/) are used unmodified, never on a tile or circle
   - cards are transparent with a thin outline; shadows only as the small offset on hover
   ===================================================================== */

/* ── tokens ── */
:root { --nav-h: 68px; }
@media (min-width: 768px) { :root { --nav-h: 80px; } }
body.v3 {
  /* palette (approved for V3) */
  --bg: #FAF0CA;        /* Warm Nude: the one page background */
  --ink: #0D3B66;       /* Deep Navy: text, outlines, footer */
  --yellow: #F4D35E;    /* Sunny Yellow: primary CTA */
  --coral: #F95738;
  --teal: #2A9D8F;
  --lav: #B59BFF;
  --white: #FFFFFF;
  /* derived from the palette */
  --ink-2: rgba(13, 59, 102, .8);   /* secondary text, about 5.9:1 on --bg */
  --line: rgba(13, 59, 102, .34);   /* card and field outlines */
  --rule: rgba(13, 59, 102, .18);   /* hairlines */
  --yellow-hover: #F0C63A;
  --err: #B3261E;
  /* type */
  --display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* layout: content max 1360px; side padding 20 / 32 / 48-64px; sections 64-96px; card gaps 16-24px */
  --max: 1280px;
  --pad: 16px;
  --section: 64px;
  --gap: 16px;
  --radius: 14px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
@media (min-width: 768px) { body.v3 { --pad: 32px; --gap: 20px; --section: 80px; } }
@media (min-width: 1024px) { body.v3 { --pad: clamp(48px, 4.4vw, 64px); --gap: 24px; --section: 96px; } }

/* ── design-system tokens: spacing / radii / elevation / motion / illustration palette
   (Claude Design export, 20 Oct 2026 — DESIGN.md §0/§9). Additive: nothing above is removed,
   these are the fuller scale + proposals the owner approved for build-out. ── */
body.v3 {
  /* spacing scale (4px base, 2px micro-step) */
  --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
  --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px;
  --max-detail: 1080px;
  --max-prose: 760px;
  --card-pad: 24px;
  --footer-pad: 48px;
  --tap-min: 44px;
  --button-min-h: 48px;
  --field-min-h: 56px;

  /* radii scale */
  --radius-0: 0; --radius-4: 4px; --radius-8: 8px; --radius-14: 14px;
  --radius-20: 20px; --radius-32: 32px; --radius-full: 9999px;
  --radius-button: 8px; --radius-field: 8px; --radius-card: 14px;
  --radius-tile: 14px; --radius-media: 20px; --radius-board: 20px;
  --radius-dialog: 32px; --radius-pill: 9999px;
  --outline-hair: 1.5px; --outline-strong: 2px; --outline-board: 3px;
  --focus-width: 3px; --focus-offset: 3px;

  /* elevation (flat baseline; navy offset shadow kept only on dialogs / game result card) */
  --shadow-none: none;
  --shadow-hover: rgba(0, 0, 0, .02) 0 0 0 1px, rgba(0, 0, 0, .04) 0 2px 6px, rgba(0, 0, 0, .1) 0 4px 8px;
  --shadow-dialog: 6px 6px 0 var(--ink);
  --shadow-popover: 4px 4px 0 var(--ink);
  --shadow-media: 0 24px 60px rgba(0, 0, 0, .3);

  /* motion: easing + durations (owner-approved 20 Oct 2026) */
  --ease-knight: cubic-bezier(.3, .8, .3, 1);
  --ease-knight-games: cubic-bezier(.4, 0, .2, 1);
  --ease-flip: cubic-bezier(.4, .15, .2, 1);
  --ease-fall: cubic-bezier(.22, .8, .35, 1);
  --ease-ambient: cubic-bezier(.45, 0, .55, 1);
  --dur-controls: 180ms; --dur-fade: 200ms; --dur-toggle: 240ms; --dur-menu: 250ms;
  --dur-leave: 260ms; --dur-expand: 280ms; --dur-dialog: 300ms; --dur-knight: 320ms;
  --dur-pop: 350ms; --dur-shake: 400ms; --dur-enter: 450ms; --dur-flip: 550ms;
  --dur-bounce: 600ms; --dur-reveal: 700ms; --dur-fall: 900ms;
  --dur-hint-loop: 1.1s; --dur-start-loop: 1.6s; --dur-toast-visible: 2600ms;
  --reveal-distance: 18px;
  /* M01 ambient (approved default) */
  --amb-sway-dur: 6.4s; --amb-sway-amp: 2.5deg;
  --amb-bob-dur: 5.2s; --amb-bob-amp: 3px;
  --amb-twinkle-dur: 3.6s; --amb-twinkle-amp: 1.08;
  --amb-hop-dur: 9s; --amb-hop-amp: 4px;
  /* M02 Games logo -> hero transfer (approved default, endState: stay) */
  --transfer-dur: 900ms; --transfer-stagger: 70ms; --transfer-lift: 28px;
  --transfer-ease: var(--ease-fall); --transfer-return-dur: 520ms;

  /* illustration palette — inside hand-drawn SVGs/board only, never UI text */
  --art-navy: #091d35; --art-cream: #ffebc5; --art-cream-hi: #fff6e6;
  --art-pink: #ff6584; --art-pink-deep: #f5376c; --art-yellow: #ffcc05; --art-yellow-hi: #ffda5c;
  --art-lavender: #c092f4; --art-lavender-hi: #dfbdff; --art-tan: #eec28b;
  --art-mint: #81d4b5; --art-sky: #76c9e4;

  /* game board state colours (readme.md proposals P01-P04, approved) */
  --board-light: var(--art-cream); --board-dark: var(--art-navy); --board-line: var(--art-navy);
  --board-outline: var(--art-navy); --board-visited: var(--yellow); --board-visited-line: var(--art-navy);
  --board-marker: var(--coral); --board-marker-ring: var(--art-navy); --board-hint: var(--coral);
  --board-focus-on-light: var(--ink); --board-focus-on-dark: var(--yellow);
  --path-1: #F95738; --path-2: #F4D35E; --path-3: #2A9D8F; --path-4: #B59BFF;
  --path-dead: rgba(13, 59, 102, .35);

  /* level / format accents */
  --accent-beginner: var(--coral); --accent-intermediate: var(--teal); --accent-advanced: var(--lav);
  --accent-individual: var(--yellow); --accent-group: var(--teal); --accent-series: var(--lav);
}
@media (prefers-reduced-motion: reduce), html[data-motion="reduced"] {
  body.v3 * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ── base ── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:where(body.v3) *, :where(body.v3) *::before, :where(body.v3) *::after { box-sizing: border-box; }
body.v3 {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
  animation: v3-in .45s var(--ease) backwards;   /* soft page entrance; backwards fill so the leaving fade below still applies */
  transition: opacity .26s ease;
}
body.v3.v3-leaving { opacity: 0; }
@keyframes v3-in { from { opacity: 0; } }
:where(body.v3) main { flex: 1 0 auto; }
body.v3 main:focus { outline: none; }
:where(body.v3) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
:where(body.v3) :where(img, svg, video) { display: block; max-width: 100%; }
:where(body.v3) :where(img) { height: auto; } /* width/height attributes give the ratio; CSS sets one side */
:where(body.v3) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.v3) a { color: inherit; }
body.v3 [id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
body.v3 :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.v3-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }

/* ── typography: one responsive scale ── */
body.v3 :where(h1, h2, h3) { font-family: var(--display); font-weight: 700; color: var(--ink); text-wrap: balance; font-optical-sizing: auto; }
body.v3 h1 { font-size: clamp(42px, 6vw, 80px); line-height: 1; letter-spacing: -.035em; }
body.v3 h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.03em; }
body.v3 h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.12; letter-spacing: -.02em; }
body.v3 h4 { font: inherit; }
body.v3 p { text-wrap: pretty; }
.v3-lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); }
.v3-eyebrow { display: inline-block; font: 700 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.v3-link, .v3-prose a, .bk-faq-desc a, .bk-consent a, .v3-consent a {
  font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: var(--coral); transition: text-decoration-color .18s; overflow-wrap: anywhere;
}
@media (hover: hover) { :is(.v3-link, .v3-prose a, .bk-faq-desc a, .bk-consent a, .v3-consent a):hover { text-decoration-color: var(--ink); } }

/* ── layout ── */
.v3-wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }

/* ── primary button (design system Button/md: 48px min-height, 12x22 inset, 8px radius, yellow, navy outline;
   hover = one composite shadow, no lift — owner decision 20 Oct 2026) ── */
body.v3 :is(.v3-btn, .bk-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--button-min-h); padding: 12px 22px; border: 2px solid var(--ink); border-radius: var(--radius-button);
  background: var(--yellow); color: var(--ink); font: 700 16px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: box-shadow var(--dur-controls) var(--ease), background-color var(--dur-controls), border-color var(--dur-controls);
}
body.v3 :is(.v3-btn, .bk-btn) svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-controls) var(--ease); }
@media (hover: hover) {
  body.v3 :is(.v3-btn, .bk-btn):hover:not(:disabled) { box-shadow: var(--shadow-hover); }
  body.v3 :is(.v3-btn, .bk-btn):hover svg { transform: translateX(3px); }
}
body.v3 :is(.v3-btn, .bk-btn):active:not(:disabled) { box-shadow: none; background: var(--yellow-hover); }
body.v3 .bk-btn { min-height: var(--tap-min); padding: 8px 14px; font-size: 15px; }
body.v3 .bk-btn-alt { background: transparent; }
body.v3 .bk-btn:disabled { opacity: .55; cursor: default; }
body.v3 .bk-btn[hidden] { display: none; }

/* ── skip link ── */
body.v3 .skip-link { position: absolute; left: 12px; top: -80px; z-index: 1000; padding: 12px 20px; border-radius: 12px; background: var(--ink); color: var(--white); font: 600 15px/1.2 var(--sans); text-decoration: none; }
body.v3 .skip-link:is(:focus, :focus-visible) { top: 12px; outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ── logo: wordmark + all six hand-drawn pieces, at their natural relative heights (king = --lh) ── */
.v3-logo { display: inline-flex; align-items: flex-end; gap: 10px; color: var(--ink); text-decoration: none; --lh: 34px; }
/* owner polish (21 Oct 2026): wordmark moved from the display face at synthesized 800 to Fredoka 700 (its real
   registered weight — see fonts-v3.css). Fredoka runs narrower than Bricolage Grotesque at the same size, so the
   size/tracking are nudged up slightly to keep the same visual footprint next to the six pieces. */
.v3-logo-text { font: 700 20px/1 'Fredoka', var(--display); letter-spacing: .01em; white-space: nowrap; padding-bottom: 3px; }
.v3-logo-pieces { display: inline-flex; align-items: flex-end; gap: 1px; }
/* fix (21 Oct 2026): the entrance used to be opacity:0 + animation:…both, which holds opacity:1 only as long as
   THAT SAME animation keeps running. The hover rule below swaps in a different animation (v3-hop), so the fall's
   held end-state was dropped and the base opacity:0 showed through — pieces vanished on hover. Fix: opacity is
   1 by default (not animation-held), and the fall only needs to fill *backwards* (hold its 0% state during the
   delay before it starts) — once it's done playing, the element's own opacity:1 already matches the 100% frame,
   so swapping to a different hover animation afterwards no longer resets anything. */
.v3-logo-pieces img { height: calc(var(--lh) * var(--h) / 738); width: auto; transform-origin: 50% 100%; opacity: 1; animation: v3-fall .7s cubic-bezier(.22, .8, .35, 1) backwards; }
.v3-logo-pieces img:nth-child(1) { animation-delay: .1s; } .v3-logo-pieces img:nth-child(2) { animation-delay: .18s; } .v3-logo-pieces img:nth-child(3) { animation-delay: .26s; }
.v3-logo-pieces img:nth-child(4) { animation-delay: .34s; } .v3-logo-pieces img:nth-child(5) { animation-delay: .42s; } .v3-logo-pieces img:nth-child(6) { animation-delay: .5s; }
/* logo "breathes" (owner decision 21 Oct 2026, site-wide nav + footer, every page except Games — see below):
   4s after the entrance settles, v3.js adds .collapsed and the five non-king pieces slide behind the king and
   fade; hovering the logo (or the king) brings them all back. */
.v3-logo-pieces img:not(:first-child) { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.v3-logo.collapsed .v3-logo-pieces img:not(:first-child) { opacity: 0; transform: translateX(-10px) scale(.6); pointer-events: none; }
.v3-logo.collapsed:hover .v3-logo-pieces img:not(:first-child), .v3-logo.collapsed:focus-within .v3-logo-pieces img:not(:first-child) { opacity: 1; transform: none; }
/* Games (owner decision 21 Oct 2026, redesigned same day): the NAV logo loads already-static (no fall-in of
   its own — it doesn't need one, the hand-off below IS its appearance signal) and never collapses to the king.
   One piece at a time peels off the nav and lands in the hero row beneath; the hero row's own fall-in (further
   down this file) is timed to receive each piece just as it leaves here, so it reads as one continuous flight
   rather than two unrelated entrances. `:not(.v3-logo-foot)` (22 Oct 2026 fix) keeps this to the nav logo only
   — the footer logo isn't part of the hand-off and was wrongly flying/fading away too; it now just keeps its
   normal entrance from .v3-logo-pieces img above and stays visible, same as on every other page. */
.v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img, .v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:not(:first-child) { opacity: 1; animation: v3-fly-to-hero .4s ease-in both; transition: none; pointer-events: none; }
@keyframes v3-fly-to-hero { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(16px) scale(.8); } }
.v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(1) { animation-delay: .3s; } .v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(2) { animation-delay: .65s; }
.v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(3) { animation-delay: 1s; } .v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(4) { animation-delay: 1.35s; }
.v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(5) { animation-delay: 1.7s; } .v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(6) { animation-delay: 2.05s; }
@media (min-width: 768px) { .v3-logo { --lh: 40px; gap: 12px; } .v3-logo-text { font-size: 23px; } }
/* removed (owner decision 21 Oct 2026): a hover hop used to swap the `animation` property on these pieces. Two
   problems — (1) it fired on every hover, including while collapsed, stacking an unwanted jump on top of the
   plain reveal below; (2) reassigning `animation` restarts it from scratch, re-entering v3-fall's own delay —
   so on mouse-*leave*, when the swap reverted to v3-fall, the king (never collapsed, so never caught by the
   .collapsed rules above) would replay its ENTRANCE: vanish, wait out its delay, then fall in again. The
   .collapsed reveal above is transition-based (not a keyframe `animation`), so it doesn't have this problem —
   hovering the logo now only ever does that, nothing layered on top. */

/* ── header (same background as the page; a hairline appears once the page scrolls) ── */
.v3-nav { position: fixed; inset: 0 0 auto; z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 10px var(--pad); background: var(--bg); border-bottom: 1.5px solid transparent; transition: border-color .25s; }
.v3-nav.scrolled { border-bottom-color: var(--rule); }
.v3-nav-links { display: none; margin: 0; padding: 0; list-style: none; align-items: center; gap: clamp(14px, 2.2vw, 32px); }
.v3-nav-links a { display: inline-block; padding-block: 12px; font: 600 15px/1.2 var(--sans); color: var(--ink); text-decoration: none; text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--coral); white-space: nowrap; }
@media (hover: hover) { .v3-nav-links a:not(.v3-nav-cta):hover { text-decoration-line: underline; } }
.v3-nav-links a.v3-nav-cta { padding: 11px 20px; border: 2px solid var(--ink); border-radius: 100px; background: var(--yellow); font-weight: 700; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
@media (hover: hover) { .v3-nav-links a.v3-nav-cta:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); } }
.nav-hamburger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.nav-hamburger svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nav-hamburger .icon-close, .nav-hamburger.open .icon-menu { display: none; }
.nav-hamburger.open .icon-close { display: block; }
.mobile-menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 199; flex-direction: column; padding: 8px var(--pad) 32px; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu.open { display: flex; animation: v3-menu .25s var(--ease); }
@keyframes v3-menu { from { opacity: 0; transform: translateY(-6px); } }
.mobile-menu a { padding: 18px 0; border-bottom: 1.5px solid var(--rule); font: 600 20px/1.2 var(--sans); color: var(--ink); text-decoration: none; }
.mobile-menu a.v3-nav-cta { margin-top: 28px; padding: 16px; border: 2px solid var(--ink); border-radius: 100px; background: var(--yellow); text-align: center; font-size: 17px; font-weight: 700; }
@media (min-width: 768px) {
  .v3-nav { min-height: 80px; }
  .v3-nav-links { display: flex; }
  .nav-hamburger, .mobile-menu, .mobile-menu.open { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) { .v3-nav-links { gap: 16px; } .v3-nav-links a { font-size: 14px; } .v3-nav-links a.v3-nav-cta { padding: 10px 16px; } .v3-logo { --lh: 36px; gap: 10px; } .v3-logo-text { font-size: 19px; } }

/* ── footer (Deep Navy) ── */
.v3-foot { background: var(--ink); color: var(--bg); padding: clamp(56px, 6vw, 80px) var(--pad) 32px; }
.v3-foot-in { max-width: var(--max); margin: 0 auto; }
.v3-foot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(250, 240, 202, .18); }
.v3-logo-foot { flex: none; color: var(--bg); --lh: 44px; }
.v3-foot-nav { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; flex: 1 1 auto; max-width: 720px; column-gap: 32px; }
.v3-foot-nav ul { display: grid; gap: 12px; align-content: start; margin: 0; padding: 0; list-style: none; }
.v3-foot-nav a { color: rgba(250, 240, 202, .88); font-size: 15px; font-weight: 500; text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: var(--yellow); }
.v3-foot-nav a:hover { color: var(--bg); text-decoration-line: underline; }
.v3-foot :focus-visible { outline-color: var(--yellow); outline-offset: 4px; border-radius: 4px; }
.v3-foot-copy { margin: 24px 0 0; font-size: 13px; color: rgba(250, 240, 202, .7); }
.v3-foot-contact a { display: inline-flex; align-items: center; gap: 10px; }
.v3-foot-contact svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v3-foot-contact .v3-foot-go { width: 17px; height: 17px; }
@media (max-width: 1023px) { .v3-foot-top { flex-direction: column; gap: 28px; } .v3-foot-nav { width: 100%; max-width: none; } }
@media (max-width: 767px) {
  .v3-foot { padding-top: 44px; padding-bottom: calc(max(28px, env(safe-area-inset-bottom)) + 68px); }
  .v3-foot-top { gap: 20px; padding-bottom: 0; border-bottom: 0; }
  .v3-logo-foot { --lh: 38px; }
  .v3-foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: stretch; column-gap: 24px; }
  .v3-foot-nav ul { gap: 0; }
  .v3-foot-nav ul:nth-child(-n+3) { display: contents; }
  .v3-foot-mail { display: none; }
  .v3-foot-contact { grid-column: 1 / -1; grid-row: 4; margin-top: 10px; padding-top: 6px; border-top: 1px solid rgba(250, 240, 202, .18); }
  .v3-foot-nav ul:nth-child(4) { grid-column: 1 / -1; grid-row: 5; display: flex; flex-wrap: wrap; column-gap: 22px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(250, 240, 202, .18); }
  .v3-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; overflow-wrap: anywhere; }
  .v3-foot-nav ul:nth-child(4) a { font-size: 14px; color: rgba(250, 240, 202, .76); }
  .v3-foot-copy { margin-top: 4px; }
}
@media (max-width: 359px) { .v3-foot-nav ul:nth-child(4) { column-gap: 14px; } }

/* ── hand-drawn artwork ── */
.v3-fig { width: auto; max-width: none; user-select: none; pointer-events: none; }
.v3-doodle { user-select: none; pointer-events: none; }
/* page-head figure group: figures stand on one baseline at their natural relative heights (king = --fh) */
.v3-head-art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 0 0 20px; --fh: clamp(104px, 10vw, 132px); }
/* entrance (22 Oct 2026): this figure is also a plain .v3-fig, so the unified entrance+idle system below
   (`.js :is(.v3-fig, ...)`, see v3.js) owns its opacity/reveal — it's above the fold here, so the
   IntersectionObserver fires it almost immediately rather than waiting on a scroll. */
.v3-head-art .v3-fig { height: calc(var(--fh) * var(--h) / 738); }
.v3-head-art .v3-doodle { position: absolute; width: clamp(34px, 3.4vw, 44px); height: auto; }
.v3-head-spark { left: calc(50% + 34px); top: 2px; transform: rotate(12deg); }
.v3-head-bubble { left: calc(var(--fh) * .5); top: -6px; transform: rotate(8deg); }

/* ── outlined cards and pills ── */
.v3-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 100px; color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; }
.v3-badge-soft { border-color: var(--lav); border-width: 2px; }

/* ── FAQ accordion (one component everywhere; no divider lines; behaviour in v3.js) ── */
.v3-faq h2 { margin: 0 0 clamp(14px, 2vw, 24px); font-size: clamp(34px, 4vw, 52px); }
.v3-faq-item + .v3-faq-item { margin-top: 24px; }
.v3-faq-item :is(h3, h4) { margin: 0; font: inherit; letter-spacing: 0; }
.v3-faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--ink); font: 700 clamp(17px, 1.5vw, 19px)/1.35 var(--sans); text-align: left; text-wrap: pretty; cursor: pointer; }
@media (hover: hover) { .v3-faq-q:hover > span:first-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--coral); } }
.v3-faq-pm { flex: none; position: relative; width: 24px; height: 24px; }
.v3-faq-pm::before, .v3-faq-pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; border-radius: 2px; background: var(--ink); }
.v3-faq-pm::after { transform: rotate(90deg); transition: transform .24s var(--ease); }
.v3-faq-item.open .v3-faq-pm::after { transform: rotate(0); }
.v3-faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .28s var(--ease), visibility 0s linear .28s; }
.v3-faq-item.open .v3-faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .28s var(--ease), visibility 0s; }
.v3-faq-a-in { overflow: hidden; min-height: 0; }
.v3-faq-a p { margin: 0 0 14px; max-width: 44em; padding-right: 42px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.v3-faq-a p:first-child { margin-top: 6px; }
.v3-faq-a p:last-child { margin-bottom: 4px; }

/* ── form fields (Contact, trial wizard, waitlist) ── */
body.v3 :is(.bk-field, .v3-field) { display: flex; flex-direction: column; gap: 8px; }
body.v3 :is(.bk-field, .v3-field) label { font: 700 12.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
body.v3 :is(.bk-field, .v3-field) :is(input, textarea, select), body.v3 .tw-tz select {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--white); color: var(--ink); font: 400 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; transition: border-color .18s;
}
body.v3 :is(.bk-field, .v3-field) textarea { min-height: 128px; resize: vertical; }
body.v3 :is(.bk-field, .v3-field) :is(input, textarea, select)::placeholder { color: rgba(13, 59, 102, .52); }
body.v3 :is(.bk-field, .v3-field, .tw-tz) :is(input, textarea, select):hover { border-color: rgba(13, 59, 102, .62); }
body.v3 :is(.bk-field, .v3-field, .tw-tz) :is(input, textarea, select):focus { border-color: var(--ink); }
body.v3 :is(.bk-field, .v3-field) select, body.v3 .tw-tz select {
  -webkit-appearance: none; appearance: none; padding-right: 46px; text-overflow: ellipsis; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230D3B66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 14px 8px;
}
body.v3 :is(.bk-consent, .v3-consent) { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
body.v3 :is(.bk-consent, .v3-consent) input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
body.v3 :is(.bk-err, .v3-err) { margin: 12px 0 0; font-size: 14.5px; font-weight: 600; color: var(--err); }
body.v3 :is(.bk-err, .v3-err):empty { margin: 0; }
body.v3 .bk-form { display: flex; flex-direction: column; gap: 16px; }
body.v3 .bk-row { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { body.v3 .bk-row { display: grid; grid-template-columns: 1fr 1fr; } }
body.v3 .bk-form button[type="submit"] { align-self: flex-start; }
@media (max-width: 767px) { body.v3 .bk-form button[type="submit"] { width: 100%; } }
body.v3 .bk-wl-foot { display: flex; flex-direction: column; gap: 14px; }

/* ── inner pages: head under the fixed header ── */
.v3-main { padding: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) 0 var(--section); }
.v3-head { text-align: center; }
.v3-head h1 { margin: 0 0 14px; }
.v3-head .v3-eyebrow { margin-bottom: 12px; }
.v3-head .v3-lead { max-width: 36em; margin: 0 auto; text-wrap: balance; }

/* ── modals (trial wizard and waitlist, <dialog>; behaviour in booking.js) ── */
html.bk-lock { overflow: hidden; scrollbar-gutter: stable; }
body.v3 .bk-modal { width: min(560px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: var(--radius-dialog); background: var(--bg); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
body.v3 .bk-modal[open] { display: flex; flex-direction: column; animation: v3-pop-in .3s var(--ease); }
@keyframes v3-pop-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
body.v3 .bk-modal::backdrop { background: rgba(13, 59, 102, .55); }
body.v3 .bk-modal [hidden] { display: none; }
.bk-modal-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 16px 6px 28px; }
.bk-modal-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding-top: 4px; }
.bk-modal-tag { font: 700 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
body.v3 .bk-modal-title { margin: 0; font: 700 34px/1.08 var(--display); letter-spacing: -.025em; color: var(--ink); }
.bk-modal-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 100px; background: var(--white); color: var(--ink); cursor: pointer; transition: background-color .18s; }
@media (hover: hover) { .bk-modal-x:hover { background: var(--yellow); } }
.bk-modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px; scroll-padding-bottom: 110px; }
body.v3 .bk-modal .bk-wl-sub { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
body.v3 .bk-modal .bk-wl-form { flex: 1 0 auto; }
body.v3 .bk-modal .bk-wl-foot { position: sticky; bottom: 0; margin-top: auto; gap: 0; padding: 12px 0 calc(24px + env(safe-area-inset-bottom)); background: var(--bg); }
body.v3 .bk-modal .bk-form button[type="submit"] { width: 100%; }
.bk-wl-thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.v3 .bk-modal-wide { width: min(780px, calc(100% - 32px)); } }
@media (max-width: 767px) {
  body.v3 .bk-modal { position: fixed; left: 0; right: 0; bottom: auto; top: calc(var(--vvt, 0px) + max(12px, env(safe-area-inset-top))); width: 100%; max-width: 100%; height: calc(var(--vvh, 100dvh) - max(12px, env(safe-area-inset-top))); max-height: none; margin: 0; border-width: 2px 0 0; border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; box-shadow: none; }
  .bk-modal-head { padding: 16px 12px 4px 22px; }
  body.v3 .bk-modal-title { font-size: 30px; }
  .bk-modal-body { padding: 0 22px; }
}

/* ── trial wizard (markup _partials/trial-wizard.html, logic booking-trial.js): an outlined card on /trial-lesson, plain inside the modal ── */
body.v3 .tw { max-width: 720px; margin: clamp(28px, 3.4vw, 44px) auto 0; padding: clamp(24px, 3.4vw, 40px); text-align: left; border: 1.5px solid var(--line); border-radius: var(--radius-dialog); }
body.v3 .tw h2 { margin: 0 0 8px; font-size: clamp(30px, 3vw, 38px); }
.tw-sub { margin: 0 0 18px; font-size: 16px; color: var(--ink-2); }
.tw-steps { display: flex; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.tw-steps li { flex: 1; padding-top: 10px; border-top: 4px solid var(--rule); border-radius: 2px; font: 700 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tw-steps li:is(.active, .done) { border-top-color: var(--teal); color: var(--ink); }
.tw-step { display: none; }
.tw-step.active { display: block; }
.tw-day, .tw-slot { border: 2px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
.tw-day { min-width: 76px; min-height: 62px; padding: 8px 14px; border-radius: 16px; font: 700 15px/1.25 var(--sans); text-align: center; }
.tw-day small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tw-slot { min-width: 80px; min-height: 52px; padding: 0 18px; border-radius: 16px; font: 700 16px/1 var(--sans); }
.tw-slot sup { margin-left: 2px; font-size: 10px; }
@media (hover: hover) { :is(.tw-day, .tw-slot):hover { border-color: var(--ink); } }
:is(.tw-day[aria-pressed="true"], .tw-slot[aria-pressed="true"]) { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.tw-day[aria-pressed="true"] small { color: rgba(250, 240, 202, .82); }
.tw-tz { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tw-status { margin: 0 0 12px; font-size: 15px; color: var(--ink-2); }
.tw-days, .tw-slots { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 767px) { .tw-days { display: grid; grid-template-columns: repeat(3, 1fr); } }
.tw-times { margin-top: 20px; padding-top: 18px; border-top: 1.5px solid var(--rule); }
.tw-day-label { margin: 0 0 12px; font: 700 15px/1.3 var(--sans); color: var(--ink); }
.tw-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.tw-back { min-height: 52px; padding: 0 26px; border: 2px solid var(--line); border-radius: 100px; background: transparent; color: var(--ink); font: 700 16px/1 var(--sans); cursor: pointer; transition: border-color .18s; }
@media (hover: hover) { .tw-back:hover { border-color: var(--ink); } }
.tw-sum { display: inline-block; margin: 0 0 18px; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.tw-note { margin: 0 0 18px; padding-left: 14px; border-left: 4px solid var(--teal); font-size: 14.5px; color: var(--ink-2); }
.tw-none { margin-bottom: 4px; }
.tw-none .tw-sub { margin-bottom: 14px; }
.tw-done-close { display: none; }
@media (max-width: 399px) { .tw-steps li { font-size: 11px; letter-spacing: .06em; } }
@media (max-width: 767px) { .tw-nav .bk-btn { flex: 1 1 auto; } .tw-back { padding: 0 20px; } }
/* inside the trial modal: no card; each step's buttons stay reachable at the bottom */
body.v3 .bk-modal .tw { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; }
body.v3 .bk-modal .tw-nav { position: sticky; bottom: 0; margin-top: 18px; padding: 12px 0 calc(24px + env(safe-area-inset-bottom)); background: var(--bg); }
body.v3 .bk-modal :is(.bk-form .tw-nav button[type="submit"], .tw-nav .bk-btn) { flex: 1 1 auto; width: auto; }
body.v3 .bk-modal .tw-done-close { display: flex; }

/* ── Trial lesson page ── */
.v3-trial .v3-head-art { --fh: clamp(150px, 14vw, 190px); }
.bk-price-link { margin: 16px 0 0; font-size: 16px; }

/* ── Contact page ── */
.ct-panel { max-width: 720px; margin: 0 auto; }
.ct-in h1 { margin: 0 0 12px; }
.ct-in .v3-head-art { justify-content: flex-start; --fh: clamp(150px, 14vw, 180px); }
.ct-in .v3-lead { margin: 0 0 clamp(28px, 3.4vw, 40px); }
.ct-side-art { display: none; }
@media (min-width: 768px) {
  .ct-panel { max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 18vw, 220px); gap: clamp(24px, 5vw, 64px); align-items: start; }
  .ct-mobile-art { display: none; }
  .ct-side-art { display: flex; justify-content: center; padding-top: clamp(48px, 7vw, 88px); }
  .ct-side-art .v3-head-art { --fh: clamp(150px, 13vw, 190px); margin: 0; }
}
.ct-form { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3.4vw, 40px); border: 1.5px solid var(--line); border-radius: var(--radius-dialog); }
.ct-row { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .ct-row { display: grid; grid-template-columns: 1fr 1fr; } }
.ct-form .v3-consent { margin: 2px 0 4px; }
.ct-form .v3-btn { align-self: flex-start; }
@media (max-width: 767px) { .ct-form .v3-btn { align-self: stretch; } }

/* ── Pricing (composition from Pricing V2, DECISIONS 64-68: one toggle, three cards, text CTAs; no figures inside the cards) ── */
.pv3 { --t-sub: 12px; --sub-tog: 24px; --tog-cards: 32px; --cpad: 24px; --cards-faq: 72px; --title-desc: 12px; --desc-price: 32px; --price-feat: 24px; --feat-row: 12px; --feat-cta: 32px; --cta-bottom: 24px; }
@media (min-width: 768px) { .pv3 { --tog-cards: 40px; --cpad: 28px; --cards-faq: 80px; } }
@media (min-width: 1280px) { .pv3 { --t-sub: 16px; --sub-tog: 32px; --tog-cards: 48px; --cpad: 36px; --cards-faq: 112px; } }
.pv3 .v3-head h1 { margin: 0 0 var(--t-sub); }
.pv3 .v3-head-art { --fh: clamp(112px, 10vw, 136px); gap: 10px; }
.bk-pkgs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: min(100%, 380px); margin: var(--sub-tog) auto 0; padding: 4px; border: 1.5px solid var(--line); border-radius: 100px; }
@media (min-width: 1280px) { .bk-pkgs { width: 420px; } }
.bk-pkg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; padding: 5px 10px; border: 0; border-radius: 100px; background: transparent; color: var(--ink); font: 700 15px/1.2 var(--sans); cursor: pointer; transition: background-color .18s, color .18s; }
.bk-pkg-s { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
@media (hover: hover) { .bk-pkg[aria-pressed="false"]:hover { background: rgba(255, 255, 255, .6); } }
.bk-pkg[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.bk-pkg[aria-pressed="true"] .bk-pkg-s { color: rgba(250, 240, 202, .85); }
.bk-cards { display: grid; gap: 24px; margin-top: var(--tog-cards); }
.bk-card { --acc: var(--yellow); --check: url(/images/chess-handdrawn/elements/check/check-butter.svg); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding: var(--cpad) var(--cpad) var(--cta-bottom); border: 1.5px solid var(--line); border-radius: var(--radius-card); color: var(--ink); }  /* P07: cards 24->14 */
.bk-card#offer-group { --acc: var(--teal); --check: url(/images/chess-handdrawn/elements/check/check-mint.svg); }
.bk-card[data-status="soon"] { --acc: var(--lav); --check: url(/images/chess-handdrawn/elements/check/check-lavender.svg); }
.bk-card > * { grid-column: 1; }
body.v3 .bk-card h3 { font-size: clamp(28px, 2.6vw, 36px); }
.bk-blurb { margin: var(--title-desc) 0 0; font-size: 17px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
.bk-prices { display: grid; margin-top: var(--desc-price); }
.bk-pkg-price { grid-area: 1 / 1; margin: 0; }
.bk-pkg-price[hidden] { display: block; visibility: hidden; }
.bk-price-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; line-height: 1.05; }
.bk-amount { font: 800 clamp(46px, 4.4vw, 60px)/1 var(--display); font-variant-numeric: lining-nums; letter-spacing: -.035em; white-space: nowrap; }
.bk-sym { margin-right: .06em; font-family: var(--sans); font-size: .58em; font-weight: 700; letter-spacing: 0; }
.bk-per { font-size: 16px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
/* Chess Series only: the per-instalment price restated as "N monthly payments · total" underneath, so it still reads as one fixed program. */
.bk-price-sub { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.bk-price-sub .bk-amount { font: inherit; font-weight: 600; letter-spacing: normal; }
.bk-price-sub .bk-sym { font-weight: 600; }
.bk-feats { display: grid; align-content: start; row-gap: var(--feat-row); margin: var(--price-feat) 0 0; padding: 0; list-style: none; }
.bk-feats li[hidden] { display: none; }
.bk-feats li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
/* the check is the hand-drawn element in the card accent (no circle behind it) */
.bk-check { flex: none; width: 22px; height: 22px; margin-top: -1px; background: var(--check) center / contain no-repeat; }
.bk-check svg { display: none; }
/* approved Pricing CTA treatment: text, small arrow, underline in the card accent */
.bk-cta { margin-top: var(--feat-cta); justify-self: start; }
.bk-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 2px 7px; border: 0; border-bottom: 3px solid var(--acc); border-radius: 0; background: none; color: var(--ink); font: 700 18px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: border-color .18s; }
.bk-arrow { flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); }
@media (hover: hover) { .bk-link:hover { border-bottom-color: var(--ink); } .bk-link:hover .bk-arrow { transform: translateX(4px); } }
@media (min-width: 768px) and (max-width: 1023px) {
  .bk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
  .bk-card { display: flex; flex-direction: column; align-items: flex-start; }
  .bk-card > * { align-self: stretch; }
  .bk-card[data-status="soon"] { grid-column: 1 / -1; justify-self: center; width: calc((100% - 24px) / 2); }
  .bk-cta { align-self: flex-start; margin-top: auto; padding-top: var(--feat-cta); }
}
@media (min-width: 1024px) {
  .bk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); }
  .bk-card { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  body.v3 .bk-card h3 { align-self: end; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .bk-cards { gap: 20px; } }
.pv3 { --faq-h-desc: 16px; --faq-desc-q: 32px; }
@media (min-width: 1280px) { .pv3 { --faq-h-desc: 24px; } }
.bk-faq { padding-top: var(--cards-faq); }
.bk-faq .v3-faq { display: grid; }
.bk-faq .v3-faq h2 { margin: 0; text-align: left; }
.bk-faq-desc { margin: var(--faq-h-desc) 0 0; max-width: 30em; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.bk-faq-list { margin-top: var(--faq-desc-q); }
@media (min-width: 1024px) { .bk-faq .v3-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; } .bk-faq-list { margin-top: 0; } }

/* ── text pages (Privacy, Terms, Accessibility) ── */
.v3-page { padding: calc(var(--nav-h) + clamp(32px, 5vw, 72px)) var(--pad) var(--section); }
.v3-prose { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.v3-prose .v3-head-art { justify-content: flex-start; --fh: 150px; margin-bottom: 16px; }
.v3-prose h1 { margin: 0 0 12px; font-size: clamp(40px, 5vw, 64px); }
.v3-prose .v3-date { margin: 0 0 clamp(28px, 4vw, 44px); font-size: 15px; }
.v3-prose h2 { margin: clamp(36px, 4vw, 48px) 0 10px; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.02em; }
.v3-prose :is(p, ul) { margin: 0 0 14px; }
.v3-prose ul { padding-left: 22px; }
.v3-prose li { margin-bottom: 6px; padding-left: 2px; }
.v3-prose li::marker { color: var(--coral); }
@media (max-width: 767px) { .v3-prose { font-size: 16px; } }

/* ── 404 ── */
.v3-nf { max-width: 560px; margin: 0 auto; text-align: center; }
.v3-nf-art { position: relative; display: block; width: max-content; margin: 0 auto 8px; }
.v3-nf-art .v3-fig { height: clamp(120px, 12vw, 150px); transform: rotate(-8deg); }
.v3-nf-spark { position: absolute; right: -30px; top: 0; width: 36px; transform: rotate(14deg); }
.v3-nf-code { font: 800 clamp(72px, 10vw, 120px)/1 var(--display); letter-spacing: -.04em; color: var(--coral); }
.v3-nf h1 { margin: 12px 0 14px; font-size: clamp(36px, 4.4vw, 56px); }
.v3-nf p { margin: 0 0 32px; }

/* =====================================================================
   HOME (src/v3/index.html). Section order, copy and behaviour as Homepage V2.
   ===================================================================== */
.hm-hero { padding: calc(var(--nav-h) + clamp(24px, 4vw, 64px)) 0 calc(var(--section) / 2); }
.hm-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hm-hero-copy { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "p" "a" "s"; justify-items: center; align-items: start; text-align: center; }
.hm-hero h1 { grid-area: h; position: relative; width: fit-content; max-width: 100%; margin: 0 0 20px; font-size: clamp(40px, 11vw, 52px); }
.hm-hero h1 .hm-l { display: block; }
.hm-hero h1 .hm-l:first-of-type { font-weight: 800; }
.hm-hero h1 em { font-style: normal; font-weight: 400; letter-spacing: -.03em; }
.hm-hero-stage { grid-area: s; position: relative; width: 150px; height: 190px; margin-top: 32px; }
.hm-hero-queen { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%) rotate(-3deg); transform-origin: 50% 100%; opacity: 1; animation: hm-queen-fall .8s .3s cubic-bezier(.22, .8, .35, 1) backwards; }
@keyframes hm-queen-fall { 0% { opacity: 0; transform: translateX(-50%) translateY(-60px) rotate(-3deg) scale(.85); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(-50%) rotate(-3deg); } }
.hm-hero-heart { position: absolute; right: -26px; top: 4px; width: 58px; transform: rotate(14deg); }
.hm-hero-spark { position: absolute; left: -16px; top: 46px; width: 34px; transform: rotate(-10deg); }
.hm-lead-d, .hm-h-d { display: none; }
.hm-hero .v3-lead { grid-area: p; max-width: 30em; margin: 0 0 28px; text-wrap: balance; }
.hm-actions { grid-area: a; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Knight's Tour: the board holds only squares and the knight; on phones a compact card opens the same game as a fullscreen dialog */
.hm-hero { --sq-light: #FFEBC5; --sq-dark: #091D35; }  /* chess-board.svg illustration palette (P03: one board look for every size) */
.kt { width: 100%; max-width: 360px; justify-self: center; }
.kt-head { display: flex; align-items: center; }
body.v3 .kt-title { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.kt-status { min-height: 1.4em; margin: 6px 0 14px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink-2); transition: color .2s; }
/* owner decision 21 Oct 2026: "Visit every square once." is the actual instruction once play starts (the knight
   just landed, this is the one line telling the player what to do next) — it used to read exactly like the
   idle "Choose a highlighted square" line before it, easy to miss. .playing is toggled in render() below. */
.kt-status.playing { display: inline-block; padding: 3px 12px; border-radius: 100px; background: var(--teal); color: var(--white); animation: v3-pop .4s var(--ease) backwards; }
.kt-frame {
  position: relative; aspect-ratio: 1; box-sizing: border-box;
  padding: 10%; /* chess-board.svg: 64 named squares sit in an 800x800 window at 10% inset of the 1000x1000 art */
  background: url(/images/chess-handdrawn/board/chess-board.svg) center / contain no-repeat;
}
/* frame now comes from chess-board.svg on .kt-frame (readme.md Option B); the grid just fills its window */
.kt-board { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; height: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
/* P04 (owner decision): no hover lift on the mini board, it stays still */
.kt-sq { position: relative; display: flex; align-items: center; justify-content: center; background: var(--sq-light); cursor: pointer; }
.kt-sq.dark { background: var(--sq-dark); }
.kt-sq.visited { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.kt-sq.valid-start::before { content: ''; width: 20%; height: 20%; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(249, 87, 56, .25); pointer-events: none; animation: v3-glow 1.6s ease-in-out infinite; }
@keyframes v3-glow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .72; } }
.kt-board.flash-start .kt-sq.valid-start::before { animation: v3-flash .45s ease-in-out 4; }
@keyframes v3-flash { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.7); } }
.kt-sq.hint::after { content: ''; position: absolute; inset: 10%; border: 3px solid var(--coral); border-radius: 50%; pointer-events: none; animation: v3-hint 1.1s ease-in-out infinite; }
@keyframes v3-hint { 0%, 100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.05); opacity: 1; } }
.kt-sq.invalid { animation: v3-shake .4s ease; }
@keyframes v3-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.kt-sq:focus-visible { outline: 3px solid var(--ink); outline-offset: -5px; }
.kt-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.kt-path.show { opacity: 1; }
.kt-pieces { position: absolute; inset: 0; pointer-events: none; }
.kt-piece { position: absolute; left: 0; top: 0; width: 20%; height: 20%; transition: transform .3s cubic-bezier(.3, .8, .3, 1); will-change: transform; }
.kt-piece img { position: absolute; inset: 6% 8%; width: 84%; height: 88%; max-width: none; object-fit: contain; } /* hand-drawn knight, uncropped and unstretched */
.kt-piece.bounce { animation: v3-win-bounce .6s ease; }
@keyframes v3-win-bounce { 0%, 100% { translate: 0 0; } 35% { translate: 0 -14%; } 65% { translate: 0 0; } 82% { translate: 0 -5%; } }
.kt-under { width: 100%; margin-top: 16px; }
.kt-prog { display: flex; align-items: center; gap: .45em; height: 30px; margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kt-prog [hidden] { display: none; }
.kt-done { font: 700 22px/1 var(--display); }
.kt-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kt-under.is-done .kt-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kt-tools[hidden] { display: none; }
.kt-btn { min-height: 42px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font: 700 14px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s; }
@media (hover: hover) { .kt-btn:hover:not(:disabled) { background: var(--white); } }
.kt-btn:active:not(:disabled) { background: var(--white); }
.kt-btn:disabled { opacity: .4; cursor: default; }
.kt-btn-primary { background: var(--yellow); }
@media (hover: hover) { .kt-btn-primary:hover:not(:disabled) { background: var(--yellow-hover); } }
#ktEndTools:not([hidden]), #ktDone:not([hidden]) { animation: v3-fade .2s ease-out both; }
@keyframes v3-fade { from { opacity: 0; } }
body.v3 .kt-explore { display: inline-block; margin-top: 14px; font-size: 14px; }
.kt-overlay { position: absolute; inset: 0; z-index: 6; display: none; align-items: center; justify-content: center; pointer-events: none; }
.kt-overlay.show { display: flex; }
/* owner decision 22 Oct 2026: shrunk from 79% width/24-34px type — it was reading as "cover the whole board"
   on this small widget. Sized down to roughly the same board-to-card ratio as the Games page overlay. */
.kt-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62%; max-height: 100%; min-height: 104px; padding: 20px 14px 14px; border: 2px solid var(--ink); border-radius: 16px; background: var(--bg); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); text-align: center; pointer-events: auto; }
.kt-x { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.kt-x::before { content: ''; position: absolute; inset: -7px; }
@media (hover: hover) { .kt-x:hover { background: var(--white); } }
.kt-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.kt-dead, .kt-win { display: none; flex-direction: column; align-items: center; width: 100%; }
.kt-dead.show, .kt-win.show { display: flex; }
.kt-msg { margin: 0; font: 700 16px/1.25 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.kt-solved { margin: 0; font: 800 23px/1.1 var(--display); letter-spacing: -.03em; }
.kt-dead .kt-btn { margin-top: 10px; padding: 0 16px; font-size: 13px; }
.kt-toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 100px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; }
@media (max-width: 767px) { .kt-toast { bottom: calc(24px + 68px + env(safe-area-inset-bottom)); } }
.kt-toast.show { opacity: 1; transform: translate(-50%, 0); }
.kt-teaser, .kt-shut { display: none; }

/* 02 lesson videos */
.hm-videos, .hm-skills, .hm-approach, .hm-lvl, .hm-programs, .hm-teacher, .hm-quotes, .hm-faq { padding-block: calc(var(--section) / 2); }
.hm-videos-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
/* owner decision (21 Oct 2026): the queen/heart/sparkle composition reserved for this section is removed —
   heading + lead only, no decorative figure or reserved space above the clips. */
.hm-videos-head h2 { margin: 0 0 14px; }
.clips { display: flex; align-items: flex-end; gap: 14px; width: 100%; }
.clip { position: relative; flex: 1 1 0; min-width: 0; margin: 0; }
.clip-btn, .clip video { display: block; width: 100%; overflow: hidden; border-radius: 20px; background: var(--ink); }
.clip-btn { position: relative; aspect-ratio: 9 / 16; padding: 0; border: 2px solid var(--ink); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.clip video { aspect-ratio: var(--ar); object-fit: contain; }
.clip-btn img { width: 100%; height: 100%; object-fit: cover; }
.clip-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); transition: transform .18s var(--ease); }
.clip-play svg { width: 16px; height: 16px; margin-left: 2px; fill: var(--ink); }
@media (hover: hover) { .clip-btn:hover { box-shadow: var(--shadow-hover); } .clip-btn:hover .clip-play { transform: scale(1.08); } }
.clip-btn:active .clip-play { transform: scale(.94); }
.clip-dots { display: none; }
/* video modal: custom controls, the clip's own ratio kept */
.vm[hidden] { display: none; }
.vm { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; overscroll-behavior: contain; }
.vm-backdrop { position: absolute; inset: 0; background: rgba(13, 59, 102, .86); }
.vm-box { position: relative; width: min(100%, calc(min(84dvh, 760px) * var(--vm-r, .5625))); aspect-ratio: var(--vm-r, .5625); overflow: hidden; border-radius: 20px; background: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.vm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ink); cursor: pointer; }
.vm-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); cursor: pointer; }
.vm-close svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.vm-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 2px solid var(--ink); border-radius: 100px; background: var(--bg); }
.vm-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
@media (hover: hover) { .vm-btn:hover { background: var(--white); } }
.vm-btn svg { width: 20px; height: 20px; fill: var(--ink); }
.vm-btn .i-on { display: none; } .vm-btn.is-on .i-on { display: inline; } .vm-btn.is-on .i-off { display: none; }
.vm-seek { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.vm-seek::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--ink) var(--p), var(--rule) var(--p)); }
.vm-seek::-moz-range-track { height: 6px; border-radius: 6px; background: var(--rule); }
.vm-seek::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--ink); }
.vm-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.vm-seek::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.vm-close:focus-visible { outline-color: var(--bg); box-shadow: 0 0 0 5px var(--ink); }

/* 03 skills: figures stand beside the text, no tiles */
.hm-skills-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hm-skills-head { max-width: 640px; margin-inline: auto; text-align: center; }
.hm-skills-head h2 { margin: 0 0 14px; }
.hm-skills-head .v3-lead { max-width: 32em; margin-inline: auto; }
.hm-skill-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 20px; margin: 0; padding: 0; list-style: none; max-width: 420px; margin-inline: auto; }
.hm-skill { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hm-skill-art { display: flex; align-items: flex-end; justify-content: center; height: 96px; margin-bottom: 16px; }
.hm-skill-art .v3-fig { height: 100%; }
.hm-skill h3 { margin: 0 0 8px; font-size: clamp(20px, 2.2vw, 24px); }
.hm-skill p { max-width: 22em; margin-inline: auto; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* 04 my approach: an editorial pull-quote between two navy rules */
.hm-approach-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; max-width: 920px; margin-inline: auto; padding-block: clamp(20px, 2.4vw, 36px); }
.hm-approach-mark { grid-column: 1 / -1; width: clamp(56px, 5vw, 72px); height: auto; margin-bottom: 18px; transform: rotate(-6deg); }
body.v3 .hm-approach-q { grid-column: 1 / -1; margin: 0 0 clamp(22px, 3vw, 36px); font-size: clamp(36px, 5vw, 64px); line-height: 1.02; }
.hm-approach-a { grid-column: 1 / -1; max-width: 36em; margin-bottom: clamp(26px, 3vw, 36px); }
.hm-approach-a p { font-size: clamp(18px, 1.65vw, 22px); line-height: 1.6; color: var(--ink-2); }
.hm-approach-a .hm-approach-first { font-weight: 700; color: var(--ink); }
.hm-approach-a p + p { margin-top: 14px; }
.hm-approach-portrait { grid-column: 1; width: 120px; height: 120px; object-fit: cover; object-position: 58% 40%; border: 2px solid var(--ink); border-radius: 24px; }
.hm-approach-by { display: none; }

/* 05 learning levels: rows on phones and tablets, outlined cards from 1024px; the figures grow from pawn to queen */
.hm-lvl-head { max-width: 680px; margin-bottom: clamp(20px, 3vw, 40px); }
.hm-lvl-head h2, .hm-programs-head h2 { margin: 0 0 14px; }
.hm-lvl-list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.hm-lvl-item a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; grid-template-areas: "art name arrow" "desc desc desc"; column-gap: 16px; align-items: center; height: 100%; padding: 20px 0; color: var(--ink); text-decoration: none; }
.hm-lvl-art { grid-area: art; display: flex; align-items: flex-end; justify-content: center; height: 76px; }
.hm-lvl-art .v3-fig { height: 100%; transform-origin: 50% 100%; }
.hm-lvl-item:nth-child(1) .v3-fig { height: 68%; } .hm-lvl-item:nth-child(2) .v3-fig { height: 84%; }
.hm-lvl-item h3 { grid-area: name; align-self: end; margin: 0 0 4px; font-size: clamp(26px, 3vw, 36px); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: transparent; transition: text-decoration-color .18s; }
.hm-lvl-item p { grid-area: desc; align-self: start; margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hm-lvl-more { display: none; }
.hm-lvl-arrow { grid-area: arrow; display: grid; place-items: center; }
.hm-lvl-arrow svg, .hm-prog-arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.hm-lvl-item a:focus-visible { outline-offset: 2px; border-radius: 8px; }
@media (hover: hover) {
  .hm-lvl-item a:hover h3 { text-decoration-color: var(--coral); }
  .hm-lvl-item a:hover .hm-lvl-arrow svg { transform: translateX(4px); }
}

/* 06 ways to learn: outlined cards, the whole card is the link */
.hm-programs-head { max-width: 760px; margin-bottom: clamp(22px, 3vw, 40px); }
.hm-prog-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.hm-prog-note { max-width: 36em; margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.hm-prog a { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "art ." "art title" "art badges" "art ." "desc desc" "meta meta"; grid-template-rows: 1fr auto auto 1fr auto auto; column-gap: 16px; align-content: start; height: 100%; padding: 20px; border: 1.5px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: transform .22s var(--ease), border-color .22s, box-shadow .22s var(--ease); }
.hm-prog-art { grid-area: art; display: flex; align-items: flex-end; justify-content: center; height: 84px; }
.hm-prog-art .v3-fig { height: 100%; transform-origin: 50% 100%; }
/* sized per icon (not per position), since Ways to learn is reordered Group / Chess Series / Individual to match Pricing */
.hm-prog-group .hm-prog-art .v3-fig { height: 72%; } .hm-prog-series .hm-prog-art .v3-fig { height: 78%; }
.hm-prog h3 { grid-area: title; margin: 0; }
.hm-prog-badges { grid-area: badges; align-self: start; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-prog-badges .v3-badge:not(.v3-badge-soft) { display: none; }
.hm-prog-badges .v3-badge-soft { margin-top: 8px; }
.hm-prog .hm-prog-d { grid-area: desc; margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.hm-prog-meta { grid-area: meta; display: block; margin-top: 12px; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.hm-prog-time { display: flex; align-items: flex-start; gap: 7px; }
.hm-prog-meta svg { flex: none; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-prog-mt { min-width: 0; line-height: 1.3; text-wrap: pretty; }
.hm-prog-age::before, .hm-prog-soon::before { content: '·'; margin: 0 5px; }
.hm-prog-soon { display: none; }
.hm-prog-arrow { display: none; }
.hm-prog a:focus-visible { outline-offset: 3px; }
@media (hover: hover) { .hm-prog a:hover { border-color: var(--ink); box-shadow: var(--shadow-hover); } }
.hm-prog a:active { transform: none; border-color: var(--ink); }

/* 07 about */
.hm-teacher-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hm-portrait { position: relative; max-width: 300px; }
.hm-portrait img:first-child { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); border-radius: var(--radius-dialog); }
.hm-portrait-heart { position: absolute; right: -20px; top: -22px; width: 68px; height: auto; transform: rotate(14deg); }
.hm-teacher h2 { margin: 0 0 18px; }
.hm-teacher p { max-width: 36em; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.hm-teacher p + p { margin-top: 14px; }
.hm-teacher p.hm-big { margin-bottom: 18px; font: 600 clamp(23px, 2.6vw, 34px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.hm-teacher p.hm-about-end { margin-top: 26px; padding-left: 18px; border-left: 4px solid var(--coral); font: 600 clamp(22px, 2.3vw, 30px)/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
/* owner polish (21 Oct 2026): Try a lesson sat right under the last paragraph with no breathing room — local gap, not a global .hm-actions change */
.hm-teacher .hm-actions { margin-top: 28px; }

/* 08 testimonials: open quotes with a coloured rule, one visible on phones, two from tablet */
.hm-quotes { --qg: 28px; text-align: center; }
.hm-quotes h2 { margin: 0 0 clamp(28px, 3.6vw, 48px); }
.hm-q-carousel { max-width: 640px; margin-inline: auto; }
.hm-q-track { display: flex; gap: var(--qg); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hm-q-track::-webkit-scrollbar { display: none; }
.hm-q { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin: 0; padding: clamp(32px, 4vw, 44px) clamp(24px, 4vw, 40px); border: 2px solid var(--ink); border-radius: var(--radius-dialog); background: var(--white); scroll-snap-align: start; }
.hm-q-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--qc, var(--coral)); border: 2px solid var(--ink); font: 700 26px/1 var(--display); color: var(--ink); }
.hm-q:nth-child(2) { --qc: var(--teal); } .hm-q:nth-child(3) { --qc: var(--lav); } .hm-q:nth-child(4) { --qc: var(--yellow); }
.hm-q blockquote { font: 600 clamp(22px, 2.3vw, 28px)/1.34 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; max-width: 26em; }
.hm-q figcaption { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.hm-q-nav { display: none; align-items: center; justify-content: center; gap: 4px; margin-top: 24px; }
.js .hm-q-nav { display: flex; }
.hm-q-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.hm-q-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); }
@media (hover: hover) { #hvQPrev:hover:not(:disabled) svg { transform: translateX(-3px); } #hvQNext:hover:not(:disabled) svg { transform: translateX(3px); } }
.hm-q-arrow:disabled { opacity: .3; cursor: default; }
.hm-q-dots { display: flex; align-items: center; }
.hm-q-dots button { display: grid; place-items: center; width: 30px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hm-q-dots button::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 8px; background: var(--ink); opacity: .25; transition: width .25s var(--ease), opacity .25s; }
.hm-q-dots button[aria-current="true"]::before { width: 22px; opacity: .9; }

/* 09 FAQ (shared accordion) with categories and "View all questions" */
.hm-faq-in { max-width: 880px; }
.hm-faq-cat { margin: clamp(32px, 4vw, 48px) 0 12px; font-size: clamp(22px, 2.2vw, 28px); }
.hm-faq-cat::after { content: ''; display: block; width: 40px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--teal); }
.hm-faq-in > h2 + .hm-faq-cat { margin-top: 18px; }
.hm-faq-more { display: none; align-items: center; gap: 10px; min-height: 48px; margin-top: 26px; padding: 0 24px; border: 2px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font: 700 16px/1 var(--sans); cursor: pointer; transition: background-color .15s; }
.js .hm-faq-more { display: inline-flex; }
@media (hover: hover) { .hm-faq-more:hover { background: var(--white); } }
.hm-faq-more svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .24s var(--ease); }
.hm-faq.faq-all .hm-faq-more svg { transform: rotate(180deg); }
.js .hm-faq:not(.faq-all) [data-extra] { display: none; }

/* 10 final CTA: big type, the pawn with celebration rays */
.hm-cta { padding: calc(var(--section) / 2) 0 var(--section); }
.hm-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) 88px; grid-template-areas: "h h" "p art" "b art"; column-gap: 12px; align-items: start; padding-top: clamp(56px, 7vw, 104px); }
.hm-cta-grid > h2 { grid-area: h; max-width: 11em; margin: 0 0 16px; font-size: clamp(40px, 7vw, 104px); line-height: .98; letter-spacing: -.04em; }
.hm-cta-grid > p { grid-area: p; max-width: 24em; margin: 0 0 24px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--ink); }
.hm-cta-grid > .v3-btn { grid-area: b; justify-self: start; }
.hm-cta-art { grid-area: art; position: relative; align-self: end; justify-self: end; display: block; height: 96px; }
.hm-cta-piece { position: relative; height: 100%; width: auto; max-width: none; transform: rotate(4deg); transform-origin: 50% 100%; }
.hm-cta-rays { position: absolute; left: 50%; top: -34%; width: 120%; max-width: none; height: auto; transform: translateX(-50%); }

/* ── home, phones only (max-width 767px) ── */
@media (max-width: 767px) {
  .hm-hero .v3-lead { font-size: 17px; }
  .hm-portrait-heart { right: -8px; top: -20px; width: 60px; }
  .js .kt-teaser { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 2px solid var(--ink); border-radius: 22px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
  .kt-teaser:active { background: var(--white); }
  .kt-teaser-art { position: relative; flex: none; width: 68px; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--ink); border-radius: 14px; background: repeating-conic-gradient(var(--sq-dark) 0 25%, var(--sq-light) 0 50%) 0 0 / 40% 40%; }
  .kt-teaser-art img { position: absolute; left: 24%; top: 18%; width: 52%; height: 64%; object-fit: contain; max-width: none; }
  .kt-teaser-text { flex: 1 1 auto; min-width: 0; }
  .kt-teaser-title { display: block; font: 700 24px/1.1 var(--display); letter-spacing: -.02em; }
  .kt-teaser-sub { display: block; margin-top: 4px; font-size: 15px; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
  .kt-teaser-go { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 100px; background: var(--lav); font-size: 15px; font-weight: 700; line-height: 1; }
  .js .kt { display: none; }
  .js .kt.is-modal { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; max-width: none; padding: max(14px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; overscroll-behavior: contain; --kt-w: min(100%, 420px, max(240px, calc(100dvh - 300px))); }
  .kt.is-modal > :is(.kt-head, .kt-status, .kt-frame, .kt-under, .kt-explore) { width: var(--kt-w); }
  .kt.is-modal .kt-head { justify-content: space-between; min-height: 44px; }
  .kt.is-modal .kt-shut { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); cursor: pointer; }
  .kt-shut svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
  .kt.is-modal .kt-explore { text-align: center; }
  body.v3 .kt-title { font-size: 24px; }
  .kt-btn { min-height: 44px; padding-inline: clamp(8px, 3vw, 12px); }
  body.v3 .kt-explore { padding-block: 10px; margin-top: 4px; }

  .clips { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; align-items: flex-start; gap: 12px; width: auto; margin-inline: calc(-1 * var(--pad)); padding: 4px var(--pad) 6px; scroll-padding-inline: var(--pad); }
  .clips::-webkit-scrollbar { display: none; }
  .clip { flex: 0 0 min(78%, 280px); scroll-snap-align: start; scroll-snap-stop: always; }
  .clip-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px; }
  .clip-dots i { display: block; width: 8px; height: 8px; border-radius: 8px; background: var(--ink); opacity: .25; transition: width .25s var(--ease), opacity .25s; }
  .clip-dots i.on { width: 24px; opacity: 1; }

  .hm-prog .hm-prog-d { text-wrap: pretty; }
}
@media (max-width: 359px) {
  .js .kt-teaser { gap: 10px; padding: 12px; }
  .kt-teaser-art { width: 52px; }
  .kt-teaser-go { padding: 0 14px; }
  .kt-teaser-title { font-size: 22px; }
  .hm-skill-list { column-gap: 14px; }
  .hm-lvl-item a { column-gap: 12px; }
}

/* ── home, tablet and up (768px+) ── */
@media (min-width: 768px) {
  .hm-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; }
  .hm-hero-copy { justify-items: start; text-align: left; }
  .hm-hero h1 { font-size: clamp(42px, 5.4vw, 80px); }
  .hm-hero-stage { display: none; }
  .kt { max-width: 300px; }
  .hm-skill-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .hm-skill-art { height: 104px; }
  .hm-teacher-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 44px; align-items: start; }
  .hm-approach-a { grid-column: 2; grid-row: 3; margin-bottom: 0; }
  .hm-approach-portrait { grid-row: 3; align-self: start; width: 132px; height: 132px; margin-right: 18px; }
  .hm-lvl-art { height: 84px; }
  .hm-lvl-item a { grid-template-columns: 64px minmax(0, 1fr) 28px; column-gap: 22px; padding: 22px 0; }
  /* ways to learn (tablet): the age and "Dates coming soon" move into the bottom line, the badge row goes */
  .hm-prog-badges { display: none; }
  .hm-prog-soon { display: inline; color: #4F3A9E; } /* dark lavender text, about 7:1 on --bg */
  .hm-prog-soon::before { color: var(--ink); }
  .hm-prog a { grid-template-columns: 72px minmax(0, 1fr) 28px; grid-template-areas: "art title arrow" "art desc arrow" "art meta arrow"; padding: 22px 22px 22px 18px; column-gap: 18px; }
  .hm-prog-art { height: 100px; align-self: center; }
  .hm-prog .hm-prog-d { margin-top: 8px; }
  .hm-prog-arrow { display: grid; grid-area: arrow; align-self: center; place-items: center; }
  @media (hover: hover) { .hm-prog a:hover .hm-prog-arrow svg { transform: translateX(4px); } }
  .hm-cta-grid { grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 280px); grid-template-areas: "h art" "p art" "b art"; column-gap: clamp(32px, 6vw, 96px); }
  .hm-cta-art { align-self: end; justify-self: center; height: clamp(150px, 16vw, 220px); }
}

/* ── home, desktop (1024px+) ── */
@media (min-width: 1024px) {
  .hm-hero-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(48px, 6vw, 112px); }
  .hm-hero-copy { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h h" "p s" "a s"; grid-template-rows: auto auto 1fr; column-gap: 32px; }
  .kt { max-width: 360px; }
  .hm-videos-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
  .clips { max-width: 620px; justify-self: end; }
  .hm-approach-grid { grid-template-columns: auto minmax(0, 1fr); }
  .hm-approach-a { grid-column: 1 / -1; grid-row: auto; margin-bottom: clamp(26px, 3vw, 36px); }
  .hm-approach-portrait { grid-row: auto; width: 64px; height: 64px; margin: 0; object-position: 64% 28%; border-radius: 50%; }
  .hm-approach-by { display: grid; gap: 2px; }
  .hm-approach-by strong { font-size: 18px; font-weight: 700; line-height: 1.2; }
  .hm-approach-by span { font-size: 15px; line-height: 1.3; color: var(--ink-2); }
  .hm-lvl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .hm-lvl-item a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "name" "desc" "more"; grid-template-rows: auto auto auto 1fr; align-items: start; padding: 28px 28px 30px; border-radius: var(--radius); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
  .hm-lvl-art { justify-content: flex-start; height: 116px; margin-bottom: 18px; }
  .hm-lvl-arrow { display: none; }
  .hm-lvl-item h3 { margin-bottom: 8px; }
  .hm-lvl-item .hm-lvl-more { grid-area: more; display: block; align-self: stretch; margin-top: 18px; font-size: 15px; }
  .hm-lvl-item a:focus-visible { border-radius: var(--radius); }
  @media (hover: hover) { .hm-lvl-item a:hover { box-shadow: var(--shadow-hover); } }
  .hm-prog-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-prog a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "badges" "art" "title" "desc" "meta"; grid-template-rows: auto auto auto 1fr auto; padding: 24px 28px 28px; }
  .hm-prog-badges { display: flex; min-height: 30px; }
  .hm-prog-badges .v3-badge:not(.v3-badge-soft) { display: inline-flex; }
  .hm-prog-badges .v3-badge-soft { margin-top: 0; }
  .hm-prog-art { justify-content: flex-start; height: 150px; margin: 22px 0 20px; }
  .hm-prog h3 { margin-bottom: 8px; }
  .hm-prog .hm-prog-d { margin: 0; }
  .hm-prog-meta { margin-top: 16px; }
  .hm-prog-age, .hm-prog-soon, .hm-prog-arrow { display: none; }
  .hm-teacher-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
  .hm-portrait { max-width: 420px; }
  .hm-portrait-heart { width: 84px; right: -26px; top: -28px; }
  .hm-teacher p { font-size: 18px; }
}
@media (min-width: 1024px) { .hm-skill-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); max-width: none; } .hm-skill-art { height: 112px; } }

/* current page in the header and menu (set by v3.js) */
.v3-nav-links a[aria-current="page"] { text-decoration-line: underline; }
.mobile-menu a[aria-current="page"] { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--coral); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =====================================================================
   LEARN CHESS (src/v3/courses-preview.html). One page: a short intro, three expandable levels (owner decision
   21 Oct 2026, replacing the earlier tab interface), then the shared lesson/practical/CTA sections once.
   Each level keeps an accent: Beginner coral, Intermediate teal, Advanced lavender (underline, accent bar).
   ===================================================================== */
.cs-intro { padding: calc(var(--nav-h) + clamp(64px, 9vw, 112px)) 0 clamp(20px, 2.6vw, 32px); text-align: center; }
.cs-intro h1 { margin: 0 0 14px; }
.cs-intro .v3-lead { max-width: 34em; margin: 0 auto; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
#levels { padding-block: clamp(20px, 2.6vw, 32px); }
.level-list { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-inline: auto; }
.level { --acc: var(--coral); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.level[data-level="intermediate"] { --acc: var(--teal); }
.level[data-level="advanced"] { --acc: var(--lav); }
.level-summary { display: flex; align-items: center; gap: 16px; padding: 18px clamp(16px, 2.4vw, 28px); list-style: none; cursor: pointer; }
.level-summary::-webkit-details-marker { display: none; }
.level-summary:focus-visible { outline-offset: -4px; }
.level-fig { flex: none; display: flex; align-items: flex-end; justify-content: center; height: 56px; }
.level-fig .cs-fig { height: calc(52px * var(--h) / 634); width: auto; }
.level-head { flex: 1 1 auto; min-width: 0; }
.level-name { display: block; margin-bottom: 2px; font: 800 clamp(19px, 1.9vw, 23px) var(--display); color: var(--ink); }
.level-line { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.level-chevron { flex: none; display: flex; }
.level-chevron svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.level[open] .level-chevron svg { transform: rotate(180deg); }
.level::before { content: ''; display: block; height: 4px; background: var(--acc); }
.level-body { padding: 4px clamp(16px, 2.4vw, 28px) clamp(24px, 3vw, 36px); border-top: 1.5px solid var(--line); }
.level-body-h { margin: 20px 0 0; font-size: clamp(19px, 1.7vw, 22px); text-align: center; }
#method, #practical { padding-block: 28px; }
@media (min-width: 768px) { #method, #practical { padding-block: calc(var(--section) / 2); } }
.cs-art { width: 60px; height: auto; max-width: none; }
.cs-fig { width: auto; }
/* section heads: centred title and intro */
.v3-courses :is(.who-inner, .details-inner, .structure-header, .lesson-header, .format-header) { text-align: center; }
.v3-courses :is(.who-inner, .details-inner) > h2, .v3-courses .structure-title, .v3-courses :is(.lesson-header, .format-header) h2 { margin: 0 0 12px; }
.v3-courses :is(.who-intro, .details-intro, .structure-intro, .lesson-intro) { max-width: 36em; margin: 0 auto; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
/* Learn Chess "How we learn": stacked intro paragraphs + one smaller note line (Coming soon) */
.lesson-header .lesson-intro + .lesson-intro { margin-top: 14px; }
.lesson-header .lesson-intro.lesson-note { margin-top: 22px; font-size: 15px; color: var(--ink-2); font-style: italic; }
.v3-courses :is(.who-grid, .details-grid, .area-grid, .lesson-timeline, .format-cards) { margin-top: clamp(28px, 3.4vw, 44px); }
/* hero: the level's figure (pawn, bishop, queen: the same growth as the Home levels), title, subtitle, CTAs */
.v3-courses [id$="-hero"] { padding-top: clamp(36px, 5vw, 72px); }
.hero-grid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-icon { display: flex; align-items: flex-end; justify-content: center; margin-bottom: 20px; --fh: clamp(150px, 14vw, 190px); }
.hero-icon .cs-fig { height: calc(var(--fh) * var(--h) / 634); }
.hero-text h1 { margin: 0 0 14px; }
.hero-text p.hero-sub { max-width: 24em; margin: 0 auto 14px; font: 600 clamp(22px, 2.4vw, 30px)/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.hero-text p.hero-desc { max-width: 34em; margin: 0 auto; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
.hero-cta, .cta-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 32px; }
/* who it is for, what children will develop, how learning works: outlined cards */
.who-grid, .details-grid, .format-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.who-card, .detail-card, .format-card { padding: clamp(24px, 2.6vw, 32px); border-radius: var(--radius); }
.detail-card, .format-card { border: 1.5px solid var(--line); }
.who-card, .format-card { text-align: center; }
.who-icon, .format-card-icon { display: flex; align-items: flex-end; justify-content: center; height: 72px; margin-bottom: 18px; }
.format-card-icon .cs-fig { height: calc(76px * var(--h) / 634); }
.v3-courses :is(.who-card, .detail-card, .format-card) h3 { margin: 0 0 10px; font-size: clamp(21px, 1.8vw, 25px); }
.v3-courses :is(.who-card, .detail-card, .format-card) p { font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
.format-card .format-compare { display: inline-block; margin-top: 12px; }
.detail-card { text-align: left; }
.detail-card h3::before { content: ''; display: block; width: 32px; height: 4px; margin-bottom: 16px; border-radius: 4px; background: var(--acc); }
@media (min-width: 768px) { .who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .details-grid, .format-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .details-grid, .format-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* "Learning that fits your child": stays a 2x2 grid even on wide desktop (owner decision 21 Oct 2026), unlike the 4-up "What we work on" grid */
.format-cards.format-cards-fit { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .format-cards.format-cards-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .format-cards.format-cards-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Chess Matters quote: editorial quote with the level accent; like and share keep their behaviour */
.quote-box { --q: #F95738; max-width: 820px; margin: 0 auto; padding-left: clamp(20px, 3vw, 32px); border-left: 4px solid var(--acc); }
#panel-intermediate .quote-box { --q: #2A9D8F; } #panel-advanced .quote-box { --q: #B59BFF; } /* also the colour of the shared quote image */
.quote-box blockquote { margin: 0 0 18px; font: 600 clamp(26px, 3vw, 40px)/1.22 var(--display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.quote-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.quote-author { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.quote-actions { display: flex; align-items: center; gap: 8px; }
.quote-like, .quote-share { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 100px; background: transparent; color: var(--ink); font: 700 14px/1 var(--sans); cursor: pointer; transition: border-color .18s, color .18s; }
@media (hover: hover) { :is(.quote-like, .quote-share):hover { border-color: var(--ink); } }
:is(.quote-like, .quote-share) svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quote-like.liked { border-color: var(--ink); }
.quote-like.liked svg { fill: var(--coral); stroke: var(--coral); }
.quote-like.pop svg { animation: v3-like .35s var(--ease); }
@keyframes v3-like { 45% { transform: scale(1.3); } }
.quote-like-count:empty { display: none; }
.quote-share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quote-share-row[hidden] { display: none; }
.qs-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line); border-radius: 14px; background: transparent; color: var(--ink); cursor: pointer; transition: border-color .18s; }
@media (hover: hover) { .qs-btn:hover { border-color: var(--ink); } }
.qs-btn svg { width: 18px; height: 18px; fill: currentColor; }
.qs-btn[data-copy] svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.qs-btn[data-save] svg, .qs-file svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qs-file svg .dot { fill: currentColor; stroke: none; }
.qs-btn.qs-file { width: auto; gap: 6px; padding: 0 14px; border-radius: 100px; font: 700 13px/1 var(--sans); }
.qs-note { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.qs-note[hidden] { display: none; }
@media (min-width: 768px) { .quote-share-row { justify-content: flex-end; } .qs-note { text-align: right; } }
/* learning areas: flip cards (one flipped at a time); the turn button is a plain icon, no circle */
.area-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--gap); max-width: 960px; margin-inline: auto; text-align: left; }
@media (min-width: 768px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area-card { position: relative; perspective: 1400px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.flip-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4, .15, .2, 1); }
.area-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.face { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 28px 64px 28px 28px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: border-color .2s, background-color .2s; }
.face-back { transform: rotateY(180deg); background: var(--art-lavender-hi); }
@media (hover: hover) { .area-card:hover .face { border-color: var(--ink); } }
.area-card:has(.flip-btn:focus-visible) .face { border-color: var(--ink); }
.v3-courses .face h3 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 26px); }
.area-desc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.area-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.area-list li { position: relative; padding-left: 20px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.area-list li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.flip-btn { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--yellow); color: var(--ink); cursor: pointer; transition: transform .4s cubic-bezier(.4, .15, .2, 1); }
.flip-btn svg { width: 15px; height: 15px; transition: transform .4s cubic-bezier(.4, .15, .2, 1); }
.area-card.is-flipped .flip-btn svg { transform: rotate(180deg); }
.flip-tip { display: none; }
@media (hover: hover) { .flip-btn:hover { background: var(--art-yellow-hi, var(--yellow)); } }
@media (max-width: 767px) { .face { padding: 24px 58px 24px 22px; } }
/* no-JS fallback for Learn Chess "What we work on" (owner decision 21 Oct 2026): without JS the flip button
   does nothing, so don't rely on the 3D flip to reveal the back text — stack both faces in normal flow instead. */
html:not(.js) .flip-btn { display: none; }
html:not(.js) .flip-inner { display: block; }
html:not(.js) .face { position: static; padding-right: 28px; }
html:not(.js) .face-back { transform: none; -webkit-backface-visibility: visible; backface-visibility: visible; margin-top: 10px; }
/* how a lesson looks: four steps joined by a hairline (row from 768px, column on phones); icons stand on the page background */
.lesson-timeline { display: flex; flex-direction: column; max-width: 440px; margin-inline: auto; text-align: left; }
.timeline-step { position: relative; display: flex; align-items: flex-start; gap: 18px; padding-bottom: 26px; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step:not(:last-child)::after { content: ''; position: absolute; left: 27px; top: 60px; width: 1.5px; height: calc(100% - 64px); background: var(--line); }
.timeline-circle { flex: none; display: grid; place-items: center; width: 56px; height: 56px; background: var(--bg); }
.timeline-circle .cs-art { width: 52px; }
/* "A lesson in four moves": each badge is a cropped close-up of a hand-drawn piece (owner decision 21 Oct
   2026, replacing the plain numbered badge) — pawn, knight, bishop, rook, in that order. The circle is an
   outlined medallion rather than a solid fill, so the piece's own colours stay legible on it. */
.timeline-num { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 2px solid var(--teal); overflow: hidden; }
.timeline-num img { position: absolute; left: 50%; top: -8%; height: 175%; width: auto; max-width: none; transform: translateX(-50%); }
.timeline-num img[src*="rook.svg"] { top: 2%; height: 160%; } /* rook's crenellated top sits lower on the art than the other pieces' heads */
.timeline-num img[src*="pawn.svg"] { top: 0%; height: 250%; } /* pawn's own art is shorter overall (viewBox 427 vs 517-738 for the others), so its round head is a bigger share of the full height — the shared -8%/175% crop zoomed out too far and caught the collar/body instead of just the face */
/* stepped reveal (owner decision 21 Oct 2026): the four steps pop in one after another as the block scrolls
   into view, cascading off the shared .v3-rv reveal already on .lesson-timeline. */
.js .timeline-step { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.lesson-timeline.in .timeline-step { opacity: 1; transform: none; }
.lesson-timeline.in .timeline-step:nth-child(1) { transition-delay: .05s; }
.lesson-timeline.in .timeline-step:nth-child(2) { transition-delay: .22s; }
.lesson-timeline.in .timeline-step:nth-child(3) { transition-delay: .39s; }
.lesson-timeline.in .timeline-step:nth-child(4) { transition-delay: .56s; }
.timeline-content { padding-top: 6px; }
.v3-courses .timeline-content h3 { margin: 0 0 4px; font-size: 21px; }
.timeline-content p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 768px) {
  .lesson-timeline { position: relative; flex-direction: row; max-width: none; text-align: center; }
  .lesson-timeline::before { content: ''; position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 1.5px; background: var(--line); }
  .timeline-step { flex: 1; flex-direction: column; align-items: center; gap: 16px; padding: 0 12px; }
  .timeline-step::after { display: none; }
  .timeline-circle { position: relative; z-index: 1; width: 72px; height: 64px; }
  .timeline-circle .cs-art { width: 58px; }
  .timeline-num { width: 48px; height: 48px; font-size: 20px; }
  .timeline-content { padding-top: 0; }
  .timeline-content p { text-wrap: balance; }
}
/* closing CTA: centred, under a navy rule like the Home CTA */
.cta-inner { padding-top: clamp(48px, 6vw, 88px); text-align: center; }
.v3-courses [id$="-cta"] { padding-bottom: var(--section); }
/* owner polish (21 Oct 2026): a quiet figure above the heading so the closing CTA isn't bare text + button, same visual language as the Home CTA's figure; smaller than a hero icon and no new animation */
.cs-cta-icon { --fh: clamp(96px, 9vw, 130px); margin-bottom: 18px; }
.cta-inner h2 { margin: 0 0 14px; }
.cta-text { max-width: 30em; margin: 0 auto; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: balance; }

/* =====================================================================
   GAMES (src/v3/playground.html). Knight's Tour, all game logic unchanged. Breakpoint 860px as in the game script
   (fullscreen play mode on portrait phones). Board colours per size come from the script (V3 palette).
   ===================================================================== */
.v3-playground { --board-light: #FFFFFF; --board-dark: #2A9D8F; --board-outline: #0D3B66; --visited-fill: #F4D35E; --dot-fill: #0D3B66; }
.v3-playground .container { max-width: 1320px; margin: 0 auto; }
.v3-playground .section-pad { padding: clamp(24px, 3vw, 48px) var(--pad) var(--section); }
/* hero: the six hand-drawn pieces drop in once onto the page background */
#kt-piece-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) var(--pad) clamp(32px, 5vw, 64px); overflow: hidden; --ph: clamp(78px, 9vw, 120px); } /* bottom padding added (owner decision 21 Oct 2026) — the hero row sat flush against the game section below it */
.kt-hero-logo-pieces { display: inline-flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 16px); }
.kt-hero-logo-pieces span { display: inline-flex; align-items: flex-end; opacity: 1; animation: v3-fall .5s cubic-bezier(.22, .8, .35, 1) backwards; }
.kt-hero-logo-pieces span img { height: calc(var(--ph) * var(--h) / 738); width: auto; max-width: none; }
/* one piece lands here right as its twin leaves the nav above (.v3-playground .v3-logo-pieces img:nth-child(N),
   delay .3s + .35s*N, .4s flight) — same order (king, queen, rook, bishop, knight, pawn), so nth-child pairs up;
   each lands ~.2s into its departure, so it's caught mid-flight rather than popping in after an empty gap. */
.kt-hero-logo-pieces span:nth-child(1) { animation-delay: .5s; } .kt-hero-logo-pieces span:nth-child(2) { animation-delay: .85s; } .kt-hero-logo-pieces span:nth-child(3) { animation-delay: 1.2s; }
.kt-hero-logo-pieces span:nth-child(4) { animation-delay: 1.55s; } .kt-hero-logo-pieces span:nth-child(5) { animation-delay: 1.9s; } .kt-hero-logo-pieces span:nth-child(6) { animation-delay: 2.25s; }
@keyframes v3-fall { 0% { opacity: 0; transform: translateY(-80px) scale(.8); } 60% { opacity: 1; } 80% { transform: translateY(4px) scale(1.03); } 100% { opacity: 1; transform: none; } }
.kt-hero-playground { font: 700 12.5px/1.2 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); animation: v3-fade .6s 1.1s both; }
@media (max-width: 760px) { #kt-piece-hero { --ph: 56px; gap: 10px; } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.anim-in { opacity: 0; animation: fadeSlideUp .55s var(--ease) forwards; }

.game-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 580px); justify-content: center; align-items: center; gap: clamp(48px, 7.5vw, 116px); }
.board-col { display: flex; flex-direction: column; align-items: stretch; }
.board-frame {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; box-sizing: border-box;
  padding: 10%; /* chess-board.svg: 64 named squares sit in an 800x800 window at 10% inset of the 1000x1000 art */
  background: url(/images/chess-handdrawn/board/chess-board.svg) center / contain no-repeat;
}
.board-wrap { position: relative; width: 100%; height: 100%; }
/* frame now comes from chess-board.svg on .board-frame (readme.md Option B); the grid sits in its window, no separate outline */
.board { display: grid; width: 100%; height: 100%; overflow: hidden; }
.sq { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; cursor: pointer; user-select: none; transition: background-color .25s ease, box-shadow .25s ease; }
/* keyboard focus ring (22 Oct 2026 fix): the generic sitewide :focus-visible rule (outline-offset: 3px,
   outward) mostly vanished here — squares sit edge to edge with no gap, so an outward ring on one square
   paints mostly underneath its neighbour and .board's overflow:hidden clips the rest. There was an orphaned
   `.kt-sq:focus-visible` rule with the right idea (inset) but the wrong, no-longer-used class name — this
   replaces it, correctly scoped to `.sq`, so Shift+arrow keyboard navigation between squares is actually
   visible, not just functional for a screen reader. */
body.v3 .sq:focus-visible { outline: var(--outline-strong) solid var(--yellow); outline-offset: -4px; z-index: 2; }
.sq.light { background: var(--board-light); }
.sq.dark { background: var(--board-dark); }
.sq.visited { background: var(--visited-fill); box-shadow: inset 0 0 0 2px var(--ink); }
.sq .dot { width: 14%; height: 14%; border-radius: 50%; pointer-events: none; }
.sq.light .dot { background: var(--board-dark); }
.sq.dark .dot { background: var(--board-light); }
.sq.hint::after { content: ''; position: absolute; inset: 10%; border: 3px solid var(--dot-fill); border-radius: 50%; pointer-events: none; animation: v3-hint 1.1s ease-in-out infinite; }
.sq.valid-start::before { content: ''; width: 12%; height: 12%; border-radius: 50%; background: var(--dot-fill); box-shadow: 0 0 0 5px var(--dot-glow, rgba(13, 59, 102, .32)); pointer-events: none; animation: v3-glow 1.6s ease-in-out infinite; }
.board.flash-start .sq.valid-start::before { animation: v3-flash .45s ease-in-out 4; }
.sq.invalid { animation: v3-shake .4s ease; }
.knight-piece { position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: left .32s cubic-bezier(.4, 0, .2, 1), top .32s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; }
.knight-piece.show { opacity: 1; }
.knight-piece img { width: 86%; height: 88%; max-width: none; object-fit: contain; -webkit-user-drag: none; user-select: none; } /* hand-drawn knight, uncropped and unstretched */
.knight-piece.win-bounce { animation: v3-win-bounce .6s ease; }

.sq-tooltip { position: absolute; z-index: 30; max-width: 190px; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--white); font-size: 12.5px; font-weight: 600; line-height: 1.45; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.sq-tooltip.show { opacity: 1; }
.path-line { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.path-line.show { opacity: 1; }
/* result pop-up (win / dead end), the V3 card */
.board-overlay { position: absolute; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; padding: 16px; }
.board-overlay.show { display: flex; }
.overlay-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 340px; max-width: 100%; min-height: 236px; padding: 44px 32px 32px; border: 2px solid var(--ink); border-radius: 22px; background: var(--bg); box-shadow: 4px 4px 0 var(--ink); text-align: center; }
.overlay-close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.overlay-close::before { content: ''; position: absolute; inset: -4px; }
@media (hover: hover) { .overlay-close:hover { background: var(--white); } }
.overlay-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.overlay-dead-wrap, .overlay-solved-wrap { display: none; flex-direction: column; align-items: center; width: 100%; }
.overlay-dead-wrap.show, .overlay-solved-wrap.show { display: flex; }
.overlay-msg { margin: 0; font: 700 22px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.overlay-solved { font: 800 clamp(32px, 5vw, 40px)/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); }
.pop-actions { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.pop-count { margin: 10px 0 -8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.pop-count b { color: var(--ink); font-weight: 800; }
.pop-count[hidden] { display: none; }
.pop-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font: 700 14px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s; }
@media (hover: hover) { .pop-btn:hover { background: var(--white); } }
.pop-btn[aria-expanded="true"] { background: var(--yellow); }
.pop-btn svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pop-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.pop-sub[hidden] { display: none; }
.pop-chip { min-height: 40px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 100px; background: transparent; color: var(--ink); font: 700 13px/1 var(--sans); cursor: pointer; }
@media (hover: hover) { .pop-chip:hover { border-color: var(--ink); } }
.pop-chip[disabled] { opacity: .5; cursor: progress; }
@media (max-width: 380px) { .board-overlay { padding: 10px; } .overlay-card { min-height: 164px; padding: 38px 16px 24px; } .pop-actions { margin-top: 20px; } .pop-btn { padding: 0 16px; } }
/* share buttons: plain outlined squares (network icons), share panel slides open beside the controls */
.share-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; transition: border-color .15s; }
@media (hover: hover) { .share-btn:hover { border-color: var(--ink); } }
.share-btn svg { width: 17px; height: 17px; fill: currentColor; }
.share-btn[data-copy] svg, #copyLinkBtn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-btn.share-file { width: auto; gap: 6px; padding: 0 12px; border-radius: 100px; font: 700 12px/1 var(--sans); }
.share-btn.share-file svg { fill: none; stroke: currentColor; stroke-width: 2; }
.share-btn.share-file svg .dot { fill: currentColor; stroke: none; }
.pop-sub .share-btn { width: 40px; height: 40px; }
.pop-sub .share-btn.share-file { width: auto; }
.v3-playground .toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; padding: 11px 18px; border-radius: 100px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); transition: opacity .2s ease, transform .2s ease; }
@media (max-width: 767px) { .v3-playground .toast { bottom: calc(24px + 68px + env(safe-area-inset-bottom)); } }
.v3-playground .toast.show { opacity: 1; transform: translateX(-50%); }
.share-anchor { position: relative; display: inline-flex; }
.share-panel { position: absolute; top: 50%; left: calc(100% + 10px); z-index: 20; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; max-width: 0; padding: 6px; overflow: hidden; border: 1.5px solid transparent; border-radius: 100px; background: var(--bg); opacity: 0; pointer-events: none; transform: translateY(-50%); transition: max-width .3s ease, opacity .2s ease, padding .3s ease; }
.share-panel.show { max-width: 380px; padding: 6px 8px; border-color: var(--line); opacity: 1; pointer-events: auto; }
/* 861-1279px: not enough room to the right of the controls, so the panel opens above them, right-aligned */
@media (min-width: 861px) and (max-width: 1279px) { .share-panel { top: auto; bottom: calc(100% + 10px); left: auto; right: 0; transform: none; } }
/* info column */
.info-col { display: flex; flex-direction: column; }
.v3-playground .info-col h1 { margin: 0 0 14px; font-size: clamp(44px, 6vw, 80px); }
.kt-rules { margin: 0 0 16px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.5; color: var(--ink-2); }
/* the knight's speech bubble: white bubble with a thin outline; the outline takes the stage colour (focus, close, win) */
.size-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 11px; }
.size-pill { min-height: 48px; padding: 0 22px; border: 2px solid var(--line); border-radius: 100px; background: transparent; color: var(--ink); font: 700 16px/1 var(--sans); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
@media (hover: hover) { .size-pill:hover { border-color: var(--ink); } }
.size-pill.selected { border-color: transparent; color: var(--bg); } /* the script fills it with the board outline colour (navy) */
/* Drawn / Plain board-style toggle (BoardStylePicker, owner decision 21 Oct 2026 — finally built; was
   deferred since the P03 "one board look" note in readme.md). Same pill language as the size picker, two
   options instead of four. */
/* Games settings panel (22 Oct 2026 revision): plain words instead of pill buttons, selected option
   underlined (not the unselected one — a reversal from the first pass, closer to how underline usually
   signals "this is the current state"), 44px tap targets per WCAG even though the text is small. */
.text-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-bottom: 20px; font: 600 14px/1.3 var(--sans); color: var(--ink-2); }
.toggle-word { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border: none; background: none; padding: 0 3px; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; font-weight: 500; transition: color .2s; }
@media (hover: hover) { .toggle-word:hover { color: var(--ink); } }
.toggle-word.selected { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-style: solid; text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: default; }
.toggle-word:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
/* the Plain frame: no hand-drawn illustration, just a neat line directly around the grid (22 Oct 2026
   revision — owner felt the first pass's white mat band was too wide/clunky). Padding on .board-frame stays
   the same 10% as the drawn frame above, so the grid itself is still the same size either way; this ring now
   sits on .board-wrap (the grid's own box, no white fill around it) instead of padding out .board-frame with a
   filled gutter, and uses an inset box-shadow rather than a real `border` so it costs no box-model space and
   can't nudge the grid size either way. */
.board-frame.style-plain { background: none; }
.board-frame.style-plain .board-wrap { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 var(--outline-strong) var(--board-outline, var(--ink)); }
.kt-odd-note { display: flex; align-items: center; gap: 7px; min-height: 24px; margin-bottom: 40px; font-size: 14px; line-height: 1.4; color: var(--ink-2); visibility: hidden; opacity: 0; transition: opacity .15s ease; }
.kt-odd-note.show { visibility: visible; opacity: 1; }
.kt-odd-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-fill); }
.odd-info-wrap { position: relative; display: inline-flex; }
.odd-info { position: relative; width: 20px; height: 20px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); font: 700 12px/17px var(--display); text-align: center; cursor: pointer; }
.odd-info::before { content: ''; position: absolute; inset: -12px; }
.odd-tip { position: absolute; bottom: calc(100% + 8px); right: -10px; z-index: 40; width: max-content; max-width: 220px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: var(--white); font: 600 12.5px/1.45 var(--sans); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.odd-info-wrap:hover .odd-tip, .odd-info:focus-visible + .odd-tip, .odd-info-wrap.open .odd-tip { opacity: 1; }
.v3-playground .status { min-height: 0; margin: 10px 0; font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.v3-playground .status:empty { margin: 0; }
.v3-playground .status.win { color: #006C54; }
.v3-playground .status.dead { color: #A1402D; }
.stat-block { max-width: 500px; }
.stat-row { display: flex; align-items: flex-start; gap: 28px; margin-bottom: 18px; }
.stat-item { display: flex; flex-direction: column; }
.stat-num { display: inline-block; font: 800 32px/1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.v3-playground .pop { display: inline-block; animation: v3-stat .35s var(--ease); }
@keyframes v3-stat { 45% { transform: scale(1.25); } }
.stat-label { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.stat-divider { align-self: stretch; width: 1.5px; background: var(--rule); }
.progress-track { position: relative; width: 100%; height: 10px; overflow: hidden; border-radius: 100px; background: var(--rule); }
.progress-fill { position: absolute; inset: 0; width: 0%; border-radius: 100px; background: var(--board-outline); transition: width .45s cubic-bezier(.4, 0, .2, 1), background-color .3s ease; }
/* game controls: outlined icon buttons (no coloured circles); Hint is the yellow one */
.board-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 500px; margin: 28px 0 0; }
.board-controls .share-anchor { margin-left: 14px; }
.board-controls .settings-anchor { margin-left: 8px; }
/* Settings popover (22 Oct 2026): Board style + Legal moves, previously two always-visible text rows above
   the board, now live here behind one icon button so the top of the info column goes straight from board
   size to "choose a square to start" / stats. Opens upward off the controls row so it has room in both the
   normal layout and mobile fullscreen play, where vertical space is tight. */
.settings-anchor { position: relative; display: inline-flex; }
.settings-panel { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 20; display: flex; flex-direction: column; gap: 10px; min-width: 240px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: var(--shadow-hover); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.settings-panel.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.settings-panel .text-toggle { margin-bottom: 0; flex-wrap: nowrap; }
@media (max-width: 860px) { .settings-panel { left: auto; right: 0; transform: translateY(6px); } .settings-panel.show { transform: translateY(0); } }
.kt-key-hint { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); }
.ctrl-icon-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--ink); border-radius: var(--radius-tile); background: transparent; color: var(--ink); cursor: pointer; transition: box-shadow .18s var(--ease), background-color .18s; }
.ctrl-icon-btn.chip-gold { background: var(--yellow); }
@media (hover: hover) { .ctrl-icon-btn:hover:not(:disabled) { box-shadow: var(--shadow-hover); } }
.ctrl-icon-btn:active:not(:disabled) { box-shadow: none; }
.ctrl-icon-btn:disabled { opacity: .35; cursor: default; }
.ctrl-icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pin-share-btn.active { background: var(--ink); color: var(--bg); }
.kt-exit { display: none; }
.kt-moves-toggle { display: none; }

@media (max-width: 860px) {
  .v3-playground .section-pad { padding-top: 20px; }
  .game-grid { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; margin: 0 auto; }
  .v3-playground .info-col h1 { margin-bottom: 8px; font-size: 40px; }
  .kt-rules { margin-bottom: 12px; font-size: 17px; }
  /* phone flow: intro -> board -> stats -> controls, as one outlined game card */
  .game-grid .board-col, .game-grid .info-col { display: contents; }
  .info-col h1 { order: 1; } .info-col .kt-rules { order: 2; } .info-col .size-picker { order: 4; } .info-col .kt-odd-note { order: 5; } .info-col #status { order: 6; }
  .info-col .size-picker { margin-bottom: 8px; }
  .info-col .kt-odd-note { margin-bottom: 14px; }
  .info-col .stat-block { order: 8; max-width: none; margin: 0; padding: 14px 16px 12px; border: 1.5px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; }
  .info-col .stat-row { gap: 18px; margin-bottom: 10px; }
  .info-col .stat-num { font-size: 22px; }
  .info-col .stat-label { margin-top: 3px; font-size: 10px; }
  .info-col .progress-track { height: 6px; }
  /* art's own hand-drawn edge replaces the card border-inline here; padding stays 10% (unset) so the window keeps aligning to the square SVG on all sides */
  .board-col .board-frame { order: 9; max-width: none; margin: 0 auto; }
  .info-col .board-controls { order: 10; justify-content: space-around; max-width: none; margin: 0 0 20px; padding: 12px 12px 16px; border: 1.5px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px; }
  .info-col .kt-key-hint { order: 11; text-align: center; }
  .board-controls .share-anchor { margin-left: 0; }
  .board-controls .settings-anchor { margin-left: 0; }
  .size-pill { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .ctrl-icon-btn { width: 44px; height: 44px; }
  .info-col .share-panel { top: auto; bottom: calc(100% + 10px); left: auto; right: 0; }
  .share-panel { top: calc(100% + 10px); left: auto; right: 0; flex-wrap: wrap; max-width: 220px; max-height: 0; border-radius: 16px; transform: none; }
  .share-panel.show { max-width: 220px; max-height: 120px; }
}
/* portrait phones after the first move: fixed fullscreen play mode (stats bar, the biggest board that fits, the bubble, controls) */
@media (max-width: 860px) and (orientation: portrait) {
  body.v3.kt-play { overflow: hidden; }
  body.kt-play #kt-hero { position: fixed; inset: 0; z-index: 1000; height: 100vh; height: 100dvh; padding: env(safe-area-inset-top) 0 0; overflow: hidden; background: var(--bg); }
  body.kt-play #kt-hero > .container { height: 100%; }
  body.kt-play .game-grid { display: flex; flex-direction: column; height: 100%; max-width: 560px; padding: 10px 12px 0; }
  body.kt-play .info-col :is(h1, .kt-rules, .size-picker, .kt-odd-note, #status, .kt-key-hint) { display: none; }
  body.kt-play .anim-in { opacity: 1; animation: none; }
  body.kt-play .info-col .stat-block { position: relative; order: 1; flex: none; padding: 10px 60px 10px 14px; border-bottom: 1.5px solid var(--line); border-radius: 16px; }
  body.kt-play .info-col .stat-row { justify-content: flex-start; gap: 14px; margin-bottom: 7px; }
  body.kt-play .info-col .stat-num { font-size: 18px; }
  body.kt-play .info-col .stat-label { margin-top: 2px; font-size: 9px; }
  body.kt-play .info-col .progress-track { height: 5px; }
  body.kt-play .kt-exit { position: absolute; top: 50%; right: 8px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 2px solid var(--ink); border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; transform: translateY(-50%); }
  body.kt-play .kt-exit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  /* compact Legal-moves toggle, fullscreen only — Drawn/Plain and the full Legal-moves control hide above
     with the rest of .text-toggle, so this is the only way to reach it once the game is full screen. */
  body.kt-play .kt-moves-toggle { display: flex; position: absolute; top: 50%; right: 54px; transform: translateY(-50%); align-items: center; height: 36px; min-width: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font: 700 12px var(--sans); cursor: pointer; }
  body.kt-play .kt-moves-toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  body.kt-play .info-col :is(.stat-block, .board-controls) { align-self: stretch; width: auto; }
  body.kt-play .board-col .board-frame { order: 2; flex: none; width: var(--kt-board, 100%); margin: auto 0; border: 0; }
  body.kt-play .info-col .board-controls { order: 4; flex: none; justify-content: space-around; gap: 4px; margin: 0 -12px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border: 0; border-top: 1.5px solid var(--line); border-radius: 0; background: var(--bg); }
  body.kt-play .ctrl-icon-btn { width: 46px; height: 46px; }
  body.kt-play .share-panel { top: auto; bottom: calc(100% + 14px); left: auto; right: 0; flex-wrap: nowrap; max-width: 0; max-height: none; }
  body.kt-play .share-panel.show { max-width: calc(100vw - 32px); }
  body.kt-play .toast { z-index: 1100; bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .size-picker { gap: 7px; }
  .size-pill { padding: 0 11px; font-size: 14px; }
  .stat-row { justify-content: space-between; gap: 8px; }
  .stat-divider { display: none; }
  .stat-num, .info-col .stat-num { font-size: 20px; white-space: nowrap; }
  .stat-label { font-size: 11px; letter-spacing: .05em; }
  .info-col .stat-block { padding: 14px 12px 10px; }
  .info-col .board-controls { gap: 6px; padding: 12px 8px 14px; }
  .ctrl-icon-btn { width: 44px; height: 44px; }
}

/* ── motion: scroll reveal and a single "pop" of the hand-drawn doodles; nothing loops except the game's start hints ── */
.js .v3-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .v3-rv.in { opacity: 1; transform: none; }
.js .v3-doodle:not(.in) { opacity: 0; }
/* ambient-motion entrance (22 Oct 2026): default-hidden behind `.js`, same convention as .v3-rv above, so a
   no-JS visit still sees the art fully drawn. v3.js plays a one-time 650ms fade+rise the first time each
   element is in view, then hands off to a looping idle drift — see the ambient-motion IIFE there. */
.js :is(.v3-fig, .cs-fig, .cs-art, .hm-cta-piece) { opacity: 0; translate: 0 14px; }
.v3-doodle.in { animation: v3-pop .7s var(--ease) .15s backwards; }
@keyframes v3-pop { from { opacity: 0; scale: .5; rotate: -14deg; } }
/* motion revision (22 Oct 2026): animation-swap-on-hover replaced with a transform transition, same fix
   already applied to the header figures below — swapping `animation` restarts it on mouse-leave (a snap back
   instead of a smooth return); a `transition` on `transform` doesn't have that problem, and composes cleanly
   with the idle WAAPI drift in v3.js, which drives individual rotate/scale/translate properties instead of
   the `transform` shorthand. .motion-character (added by v3.js to every figure/icon it animates) carries the
   transition; the selectors below just supply the hover target position. */
.motion-character { transition: transform 320ms cubic-bezier(.22, .8, .24, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.hm-lvl-item a, .hm-prog a):hover .v3-fig { transform: rotate(-3deg) translateY(-4px); }
  .hm-skill:hover .v3-fig { transform: translateY(-5px); }
  :is(.who-card, .format-card):hover :is(.v3-fig, .cs-fig, .cs-art) { transform: scale(1.06) rotate(3deg); }
  .level-summary:hover .cs-fig { transform: rotate(3deg) translateY(-4px); }
  .area-card:hover .flip-btn { animation: v3-bounce .5s var(--ease); }
  .cs-cta-icon:hover .cs-fig, .hero-icon:hover .cs-fig { transform: scale(1.06) rotate(-3deg); }
}
@keyframes v3-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 70% { transform: translateY(1px); } }
/* fix (21 Oct 2026): same restart bug as the nav logo above, on three more spots that each have their OWN
   load-in `animation` directly on the element (.v3-head-art .v3-fig, its .v3-doodle, .hm-hero-queen) — a hover
   rule swapping `animation` on top of that replays the entrance on mouse-leave (vanish, then fall in again).
   These three get motion from a `transition` on `transform` instead: transitions don't restart an unrelated
   `animation` property, so the one-time entrance plays once, ever, and hover just eases in and back out. */
.v3-head-art .v3-fig, .v3-head-art .v3-doodle.in { transition: transform .35s var(--ease); }
.hm-hero-queen { transition: transform .35s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .v3-head-art:hover .v3-fig { transform: rotate(-4deg) translateY(-3px); }
  .v3-head-art:hover .v3-fig:nth-child(2) { transform: rotate(3deg) translateY(-3px); }
  .v3-head-art:hover .v3-fig:nth-child(3) { transform: rotate(-3deg) translateY(-3px); }
  .v3-head-art:hover .v3-doodle.in { transform: scale(1.12) rotate(6deg); }
  .hm-hero-stage:hover .hm-hero-queen { transform: translateX(-50%) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.v3 { animation: none; transition: none; }
  .js .v3-rv, .js .v3-doodle:not(.in), .js :is(.v3-fig, .cs-fig, .cs-art, .hm-cta-piece) { opacity: 1; transform: none; translate: none; transition: none; }
  .motion-character { transition: none; }
  .v3-doodle.in, .mobile-menu.open, body.v3 .bk-modal[open] { animation: none; }
  body.v3 :is(.v3-btn, .bk-btn, .v3-nav-cta, .hm-prog a, .hm-lvl-item a, .clip-btn, .kt-board, .bk-link, .bk-arrow, .v3-faq-a, .v3-faq-pm::after, .hm-faq-more svg, .hm-q-dots button::before, .clip-dots i) { transition: none; }
  body.v3 :is(.v3-btn, .bk-btn, .v3-nav-cta, .hm-prog a, .hm-lvl-item a, .clip-btn, .kt-board):hover { transform: none; }
  .kt-piece { transition: none; }
  .kt-piece.bounce, .kt-sq.valid-start::before, .kt-board.flash-start .kt-sq.valid-start::before, .kt-sq.hint::after, .kt-sq.invalid, #ktEndTools:not([hidden]), #ktDone:not([hidden]) { animation: none; }
  .kt-toast { transition: none; }
  .hm-q-track { scroll-behavior: auto; }
  /* Learn Chess and Games */
  .kt-hero-logo-pieces span, .kt-hero-playground, .anim-in { opacity: 1; animation: none; }
  .flip-inner, .flip-btn svg, .flip-tip, .face, .knight-piece, .sq, .share-panel, .progress-fill, .ctrl-icon-btn, .v3-playground .toast { transition: none; }
  .sq.hint::after, .sq.valid-start::before, .board.flash-start .sq.valid-start::before, .sq.invalid, .knight-piece.win-bounce, .quote-like.pop svg, .v3-playground .pop { animation: none; }
  .ctrl-icon-btn:hover:not(:disabled) { transform: none; }
}