/* STRATEGIC design system (locked 2026-09-26, from prototypes/b-chess).
   Shared by every page: tokens, fonts, base, Staunton pieces, vellum sheets,
   buttons and links, nav, section scaffolding, mini boards, FAQ, footer.
   Page-specific styles live in css/pages/<page>.css. */
/* ---------- Fonts (self-hosted, SIL Open Font License: see /assets/fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/michroma-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/michroma-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ----------
   A monochrome tournament set on butter paper. Key surfaces are translucent
   vellum sheets laid over board drawings, so the board reads through them like
   tracing paper. Reflections and edges are feathered, never hard lines. Dark
   theme stays dark all the way down. */
:root {
  --display: "Michroma", "Eurostile Extended", "Microgramma", "Arial Black", sans-serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --wrap: 80rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.75rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 4.5rem;
  /* The display scale: page titles (d-1), section headings (d-2) and the home finale (d-3).
     Every page h1 uses --d-1 so no inner page out-shouts the home page. */
  --d-1: clamp(1.9rem, 3.2vw, 3rem);
  --d-2: clamp(1.5rem, 2.75vw, 2.5rem);
  --d-3: clamp(2.5rem, 5.5vw, 5.25rem);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html { background: #ffffff; }
html[data-theme="dark"] { background: #141414; }
.s-paper { --bg: #ffffff; --fg: #0e0e0e; }
.s-ink   { --bg: #0e0e0e; --fg: #f3f3f1; }
html[data-theme="dark"] .s-paper { --bg: #141414; --fg: #ecebe7; }
html[data-theme="dark"] .s-ink   { --bg: #1e1e1e; --fg: #ecebe7; }
.s-paper, .s-ink {
  background: var(--bg);
  color: var(--fg);
  --fg-2: color-mix(in srgb, var(--fg) 84%, var(--bg));
  --muted: color-mix(in srgb, var(--fg) 63%, var(--bg));
  --down: color-mix(in srgb, var(--fg) 45%, var(--bg));
  --line: color-mix(in srgb, var(--fg) 12%, var(--bg));
  --line-2: color-mix(in srgb, var(--fg) 40%, var(--bg));
  --sq-a: color-mix(in srgb, var(--fg) 5%, var(--bg));
  --sq-b: color-mix(in srgb, var(--fg) 12%, var(--bg));
  /* Tournament board: vellum-white light squares, graphite dark squares */
  --tb-l: #f3f2ee;
  --tb-d: #6a6966;
  --tb-edge: #2a2a2a;
  /* Staunton pieces: cream with a dark outline, and graphite */
  --pw-fill: #fbfaf6; --pw-line: #151515;
  --pb-fill: #1c1c1c; --pb-line: #0e0e0e; --pb-detail: #ececec;
  /* Vellum: white butter paper */
  --vl: rgba(255, 255, 255, .64);
  --vl-solid: #f6f6f5;
  --vl-edge: rgba(17, 17, 17, .035);
  --vl-hi: rgba(255, 255, 255, .85);
  --vl-glow: rgba(255, 255, 255, .55);
  --vl-shadow: rgba(17, 17, 17, .15);
  --vl-shadow-2: rgba(17, 17, 17, .05);
  /* the reflection: a wide, feathered highlight (peak .42, long falloff) */
  --sh-1: rgba(255, 255, 255, .42); --sh-2: rgba(255, 255, 255, .3); --sh-3: rgba(255, 255, 255, .16); --sh-4: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .s-paper, html[data-theme="dark"] .s-ink {
  --tb-l: #2b2b2b;
  --tb-d: #1a1a1a;
  --tb-edge: #4a4a4a;
  --pw-fill: #ecebe6; --pw-line: #0c0c0c;
  --pb-fill: #2c2c2c; --pb-line: #9b9b9b; --pb-detail: #cfcfcf;
  --vl: rgba(30, 30, 30, .62);
  --vl-solid: #1c1c1c;
  --vl-edge: rgba(255, 255, 255, .045);
  --vl-hi: rgba(255, 255, 255, .05);
  --vl-glow: rgba(255, 255, 255, .025);
  --vl-shadow: rgba(0, 0, 0, .5);
  --vl-shadow-2: rgba(0, 0, 0, .25);
  --sh-1: rgba(255, 255, 255, .075); --sh-2: rgba(255, 255, 255, .05); --sh-3: rgba(255, 255, 255, .028); --sh-4: rgba(255, 255, 255, .01);
}
.s-ink { --tb-l: #2b2b2b; --tb-d: #1a1a1a; --tb-edge: #4a4a4a; --vl: rgba(30, 30, 30, .62); --vl-solid: #1c1c1c; --vl-edge: rgba(255,255,255,.045); --vl-hi: rgba(255,255,255,.05); --vl-glow: rgba(255,255,255,.025);
  --sh-1: rgba(255,255,255,.075); --sh-2: rgba(255,255,255,.05); --sh-3: rgba(255,255,255,.028); --sh-4: rgba(255,255,255,.01); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
html.lenis { scroll-behavior: auto !important; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; overflow-x: clip; -webkit-font-smoothing: antialiased; }
/* A soft light falling across the paper: static, monochrome and cheap */
body::before { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  background: radial-gradient(120% 80% at 12% -10%, rgba(255,255,255,.55), transparent 55%), radial-gradient(90% 70% at 110% 110%, rgba(0,0,0,.035), transparent 60%);
  mix-blend-mode: soft-light; }
html[data-theme="dark"] body::before { background: radial-gradient(120% 80% at 12% -10%, rgba(255,255,255,.05), transparent 55%); mix-blend-mode: normal; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; border-radius: 2px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--fg, #111) 8%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.2; text-wrap: balance; }
/* Michroma has one weight and no italic: never let the browser fake either */
body, h1, h2, h3 { font-synthesis: none; }
.brand { font: inherit; letter-spacing: .02em; }
.caps { font-variant-caps: all-small-caps; letter-spacing: .06em; font-weight: 500; }
.skip { position: absolute; left: -9999px; top: 0; display: inline-flex; align-items: center; min-height: 2.75rem; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--fg); color: var(--bg); padding: 0 1rem; }

/* ---------- Staunton pieces ---------- */
.pc { display: block; width: 100%; height: 100%; overflow: visible; }
.pc-w { --pc-fill: var(--pw-fill); --pc-line: var(--pw-line); --pc-detail: var(--pw-line); }
.pc-b { --pc-fill: var(--pb-fill); --pc-line: var(--pb-line); --pc-detail: var(--pb-detail); }
[data-piece] { display: block; }
/* a piece's shadow on its square: it lifts and settles with the piece */
.shadow { position: absolute; left: 50%; bottom: 10%; width: 62%; height: 12%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.28), transparent); pointer-events: none; }
html[data-theme="dark"] .shadow { background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }

/* ---------- Vellum sheet ---------- */
.sheet {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--vl);
  -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--vl-edge), inset 0 1px 0 var(--vl-hi), inset 0 0 32px var(--vl-glow),
    0 44px 90px -52px var(--vl-shadow), 0 10px 34px -20px var(--vl-shadow-2);
}
.sheet::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--noise); background-size: 160px 160px; opacity: .045; pointer-events: none; }
.sheet > .sheen { position: absolute; z-index: -1; inset: 0; pointer-events: none;
  /* --sx runs -150 (off the left) to 260 (off the right), as the old moving band did */
  --cx: calc((var(--sx, 70) + var(--sp, 0)) * .55% - 7.5%);
  background: radial-gradient(ellipse 36% 85% at var(--cx) 34%, var(--sh-1) 0%, var(--sh-2) 20%, var(--sh-3) 40%, var(--sh-4) 60%, transparent 80%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sheet { background: var(--vl-solid); } }
@media (prefers-reduced-transparency: reduce) { .sheet { background: var(--vl-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* A faint board drawing that lies under the sheets */
.drawing { position: absolute; z-index: 0; pointer-events: none; --sq: 4rem;
  background: repeating-conic-gradient(var(--sq-b) 0 25%, transparent 0 50%) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 18%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 18%, transparent 100%); }

/* ---------- Buttons and links ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 3.25rem; padding: 0 1.6rem; font-size: .9375rem; font-weight: 500; letter-spacing: .015em;
  text-decoration: none; border: 1px solid var(--fg); white-space: nowrap;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
/* the fill rises like a sheet slid under the label */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .55s var(--ease); }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary::before { background: var(--bg); }
.btn-primary:hover { color: var(--fg); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn-ghost::before { background: var(--fg); }
.btn-ghost:hover { color: var(--bg); border-color: var(--fg); }
.btn:hover::before { transform: none; }
.btn:active { transform: translateY(1px); }
.link { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: .32em; transition: text-decoration-color .3s; }
.link:hover { text-decoration-color: currentColor; }

/* ---------- Nav (vellum once the page moves) ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 55; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color .35s, border-color .35s, box-shadow .35s; }
.nav.scrolled { background: var(--vl); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); border-bottom-color: var(--vl-edge); box-shadow: inset 0 -1px 0 var(--vl-hi); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav.scrolled { background: var(--vl-solid); } }
@media (prefers-reduced-transparency: reduce) { .nav.scrolled { background: var(--vl-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--nav-h); }
.nav-home { display: inline-flex; align-items: center; min-height: 2.75rem; }
.nav-logo { display: block; height: 2.25rem; color: var(--fg); }
.nav-links { display: flex; gap: 1.75rem; font-size: .9375rem; }
.nav-links a { text-decoration: none; color: var(--fg-2); position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { transform: scaleX(1); }
/* the section you are in: full colour with its rule drawn */
.nav-links a[aria-current="page"] { color: var(--fg); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.foot-cols a[aria-current="page"] { color: var(--fg); }
.nav-actions { display: flex; align-items: center; gap: .25rem; }
.nav-actions .login { font-size: .9375rem; color: var(--fg-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem; }
.nav-actions .login:hover { color: var(--fg); }
.nav-actions .btn { min-height: 2.75rem; padding: 0 1.2rem; margin-left: .25rem; }
.icon-btn { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-2); }
.icon-btn:hover { color: var(--fg); }
.theme-icon .moon { display: none; }
html[data-theme="dark"] .theme-icon .sun { display: none; }
html[data-theme="dark"] .theme-icon .moon { display: block; }
.menu-btn { display: none; }
.mobile-menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 0 var(--gutter) 2rem; transform: translateY(-100%); transition: transform .7s var(--ease); visibility: hidden; }
.mobile-menu.open { transform: none; visibility: visible; }
.mobile-menu .top { display: flex; justify-content: space-between; align-items: center; height: 4rem; }
.menu-top-actions { display: inline-flex; align-items: center; gap: .25rem; }
.mobile-menu nav { margin-top: 1.5rem; flex: 1; }
.mobile-menu nav a { display: flex; align-items: center; min-height: 3.5rem; font-family: var(--display); font-size: clamp(1.25rem, 5.5vw, 1.75rem); line-height: 1.3; text-decoration: none; }
.mobile-menu .actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 1100px) { .nav-links { display: none; } .menu-btn { display: inline-flex; } }
@media (max-width: 620px) {
  :root { --nav-h: 4rem; }
  .nav-actions .login { display: none; }
  .nav-logo { height: 1.75rem; }
  .nav-actions .btn { padding: 0 .9rem; font-size: .875rem; }
}
/* 320px phones and 400% zoom: the theme toggle moves into the menu, so the menu button always fits */
@media (max-width: 359px) {
  .nav-actions .theme-icon { display: none; }
  .nav-logo { height: 1.5rem; }
  .nav-actions .btn { padding: 0 .75rem; margin-left: 0; }
}


/* ---------- Section scaffolding ---------- */
.section { padding-block: clamp(5.5rem, 12vw, 10rem); }
.sec-head { max-width: 40rem; }
.sec-head h2 { font-size: var(--d-2); }
.sec-head p { margin-top: 1.25rem; color: var(--fg-2); max-width: 34rem; font-size: 1.125rem; }
.note { font-size: .875rem; color: var(--muted); }

/* ---------- Analytics consent (js/analytics.js; only when a GA ID is set) ---------- */
.consent { position: fixed; z-index: 70; left: var(--gutter); right: var(--gutter); bottom: 1rem; max-width: 40rem; margin-inline: auto; display: grid; gap: 1rem; padding: 1.25rem 1.5rem 1.35rem; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); color: var(--fg-2); font-size: .9375rem; line-height: 1.55; box-shadow: 0 24px 60px -30px var(--vl-shadow); }
.consent .link { min-height: 0; color: var(--fg); }
.consent-act { display: flex; flex-wrap: wrap; gap: .75rem; }
.foot-btn { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--fg-2); font-size: .9375rem; text-align: left; }
.foot-btn:hover { color: var(--fg); }
.foot-btn[hidden] { display: none; }
@media print { .consent { display: none; } }

/* ---------- Page close: inner pages end on one line and one move ----------
   (only the home page ends on the centred vellum sheet). src/partials/close.js */
.page-close { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4.5rem, 10vw, 8rem); }
.pc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.75rem clamp(2rem, 6vw, 6rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.pc-copy h2 { font-size: var(--d-2); line-height: 1.16; max-width: 20ch; }
.pc-copy p { margin-top: 1rem; max-width: 34rem; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.6; }
.pc-act { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; }
.pc-act .link { font-size: .9375rem; }
@media (max-width: 720px) { .pc-row { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---------- Mini boards (tournament style, with coordinates) ---------- */
.mini { --s: 3.25rem; display: grid; grid-template-columns: 1rem repeat(3, var(--s)); grid-template-rows: repeat(3, var(--s)) 1.25rem; position: relative; }
.mini .rk, .mini .fl { font-size: .75rem; color: var(--muted); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.mini .fl { font-family: var(--display); font-size: .75rem; }
.mini .sq { position: relative; background: var(--tb-l); }
.mini .sq.d { background: var(--tb-d); }
.mini .sq.hl::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--fg) 16%, transparent); opacity: var(--hl, 1); }
.mini .frame { position: absolute; left: 1rem; top: 0; width: calc(var(--s) * 3); height: calc(var(--s) * 3); border: 1px solid var(--tb-edge); pointer-events: none; }
.mini .piece { position: absolute; left: 1rem; top: 0; width: var(--s); height: var(--s); z-index: 2; }
.mini .piece [data-piece] { position: absolute; inset: 8%; }
.mini .trace { position: absolute; left: 1rem; top: 0; width: calc(var(--s) * 3); height: calc(var(--s) * 3); overflow: visible; pointer-events: none; z-index: 1; color: var(--fg); }


/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 5vw, 5rem); }
.faq-grid h2 { font-size: clamp(1.5rem, 2.75vw, 2.5rem); position: sticky; top: calc(var(--nav-h) + 2rem); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; min-height: 2.75rem; padding: 1.35rem 0; font-weight: 500; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 16px; height: 16px; position: relative; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.faq summary .plus::after { transform: rotate(90deg); }
.faq details[open] > summary .plus::after { transform: rotate(0deg); }
.faq .a { padding: 0 2.5rem 1.6rem 0; color: var(--fg-2); max-width: 44rem; }
.faq details.more { border-bottom: 0; }
.faq details.more > summary { display: inline-flex; font-family: var(--sans); font-size: .9375rem; padding: 1.25rem 0; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .3em; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid h2 { position: static; } .faq .a { padding-right: 0; } }


/* ---------- Footer ---------- */
.footer { padding-top: clamp(4rem, 8vw, 6rem); }
.foot-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 3rem; }
.foot-logo { height: 4.5rem; color: var(--fg); }
.foot-grid address { font-style: normal; margin-top: 1.75rem; color: var(--fg-2); font-size: .96875rem; line-height: 1.7; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; }
.foot-cols h3 { font-weight: 600; font-size: .9375rem; }
.foot-cols ul { margin-top: .5rem; }
.foot-cols a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; text-decoration: none; color: var(--fg-2); font-size: .9375rem; }
.foot-cols a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: .25em; }
.foot-base { display: flex; justify-content: space-between; gap: 1.5rem 2rem; margin-top: 3.5rem; padding-block: 1.5rem 2rem; font-size: .875rem; color: var(--muted); }
.foot-base p:first-child { max-width: 44rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr; gap: 2rem; } .foot-cols { grid-template-columns: 1fr 1fr; } .foot-base { flex-direction: column; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- Lenis (smooth scroll) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* ---------- Page chrome (replaces the prototype's inline styles) ---------- */
#top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.mobile-menu .menu-logo { display: block; height: 1.75rem; }
.section.tight-top { padding-top: clamp(2rem, 5vw, 4rem); }

/* ---------- Shared helpers ---------- */
/* Heading reveals (Site.textReveals) mask each line; the mask leaves room for
   Michroma's descenders (g, p, y) at any line-height. */
.rv-line-mask { padding-bottom: .18em; margin-bottom: -.18em; }
.nw { white-space: nowrap; }

@media print {
  body::before, .progress, .nav, .mobile-menu, .skip, #top-sentinel { display: none !important; }
  .sheet { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
}