/*
 * Site styles, "Drone and Pulse" design language (see DESIGN_BRIEF.md).
 * Mobile-first, no external resources: fonts are self-hosted in /assets/fonts/ (round 4).
 * Themes: light tokens on :root; dark via the system setting (unless the
 * visitor picked light) or via data-theme="dark". Calm motion via
 * prefers-reduced-motion or data-motion="reduce" (footer switch).
 * All CSS lives here: the CSP forbids <style> blocks and style="" attributes.
 */

/* ------------------------------------------------------------------ fonts (round 4) */
/* Variable WOFF2 files, SIL OFL 1.1 per Fontsource; see assets/fonts/README.md (licence text still
   to be added). font-display: swap, so text is never invisible. unicode-range keeps each file from
   being fetched unless the page shows characters it covers (Devanagari only on pages with Devanagari). */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/fraunces-latin-opsz.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-latin-wght.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: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-wght.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: "Noto Sans Devanagari"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/noto-sans-devanagari-wght.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+A8E0-A8FF;
}
/* Metric-matched fallbacks: local fonts resized so that text set in them takes (nearly) the same
   space as the web font, so the swap does not reflow the page. Ratios measured in Chrome on macOS
   (round 4): Inter/Arial width 1.070 (regular) and 1.012 (Inter 600 vs Arial Bold); Fraunces/Georgia
   0.96 to 1.05 depending on optical size (regular) and about 0.92 (Fraunces 600 vs Georgia Bold);
   JetBrains Mono/Courier New 1.000. Ascent/descent = web font metric / size-adjust. */
@font-face { font-family: "Fraunces Fallback"; font-weight: 100 549; src: local("Georgia"); size-adjust: 100%; ascent-override: 97.8%; descent-override: 25.5%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; font-weight: 550 900; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 92%; ascent-override: 106.3%; descent-override: 27.7%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 100 549; src: local("Arial"), local("ArialMT"); size-adjust: 107%; ascent-override: 90.6%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 101.2%; ascent-override: 95.8%; descent-override: 23.8%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

/* ------------------------------------------------------------------ tokens */
/* Round 6, "Staff and String" (DESIGN_IDENTITY.md): a practice room at dusk. Light = "Parchment", dark =
   "Tanpura night" (since 14 Nov 2026: "Forest and gold", see DESIGN_IDENTITY.md section 11). Every text/background pair is measured there (WCAG 2 formula, by script). The same dark set
   also paints the dark "stage" bands (.band-night) and the forest-green footer in the light theme; .theme-follow puts
   the visitor's own theme back inside a stage band (the Living String card reads its colours from <html>). */
:root, :root[data-theme="light"] .theme-follow, .tokens-paper {
  /* colour: light (parchment and ink) */
  --bg: #FBF5E9;              /* paper */
  --surface: #FFFCF5;         /* paper cards, tool panels */
  --surface-2: #EDE6CC;       /* sandal: page bands, insets, tracks */
  --text: #1A1712;            /* ink */
  --muted: #5A5046;
  --indigo: #1F4A35;          /* PRIMARY (name kept from rounds 1-6 to avoid touching every file): deep banyan-leaf green in light, gold in dark: links, primary buttons */
  --indigo-ink: #FFFFFF;      /* text on primary fills (the token is still called indigo) */
  --indigo-edge: #12301F;     /* pressable bottom edge */
  --indigo-soft: #E1ECDF;     /* current nav item, selected chips */
  --saffron: #E8891A;         /* FILLS ONLY on light: never text */
  --saffron-ink: #1A1712;     /* text on saffron fills */
  --saffron-edge: #AF600F;
  --saffron-text: #934509;    /* saffron for text and small icons */
  --teal: #136B65;            /* peacock teal: in tune, correct, success */
  --rose: #B23824;            /* madder red: emphasis words, sharp, errors (token name kept from round 1) */
  --gold: #80601A;            /* brass dark enough for text: "Coming soon", Store notes */
  --brass: #B8892F;           /* hairlines, rules, ornaments only (2.9:1 on paper: never text) */
  --line: #DDD3B0;            /* decorative hairlines */
  --line-strong: #8A7656;     /* outlines of controls (3:1+) */
  --card-edge: #D3C79C;       /* the brass-tinted 1 px edge of paper cards (decorative) */
  --focus: #1F4A35;
  --hi: rgb(255 255 255 / .8); /* inner top highlight of paper cards */
  --e-1: 0 1px 2px rgb(58 40 15 / .06), 0 2px 8px rgb(58 40 15 / .05);
  --e-2: 0 2px 4px rgb(58 40 15 / .06), 0 14px 34px rgb(58 40 15 / .1);
  --glow: rgb(232 137 26 / .35);
  /* textures (masks on pseudo-elements, never behind a text node's own box): ink and strength */
  --grain-ink: #5A3A12; --grain-a: .05;
  --doodle-ink: #8F6820; --doodle-a: .05;
  --staff-ink: rgb(184 137 47 / .5);  /* the five hairlines of the staff rules */
  --tick-ink: rgb(184 137 47 / .75);  /* bar-line ticks at card corners */
  color: var(--text);

  /* beat colours (paired with size and a text label, never colour alone) */
  --beat-strong: var(--saffron);
  --beat-medium: var(--teal);
  --beat-weak: #4A5A9A;   /* slate blue: a third hue next to saffron and teal, so strong, medium and weak beats never look alike (review 14 Nov 2026) */

  /* type (round 4: self-hosted Fraunces + Inter; see the @font-face rules above) */
  --font-display: "Fraunces", "Fraunces Fallback", ui-serif, Georgia, serif;
  --font-body: "Inter", "Noto Sans Devanagari", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; /* always with tabular-nums */
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-deva: "Noto Sans Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", "Nirmala UI", Mangal, "Inter", "Inter Fallback", sans-serif;
  /* display weights (Fraunces has a weight axis, 100-900, and an optical-size axis) */
  --w-hero: 470; --w-h1: 560; --w-h2: 580; --w-h3: 620;
  /* Fluid type (round 5: one size smaller everywhere, and it stops growing at about 1920 px).
     At 16 px rem: body 15-16 px, small 13 px, lead 17-19 px, card titles / h3 17-19 px,
     section h2 22-28 px, page h1 28-36 px, home hero 36-52 px. Round 4 values in DESIGN_BRIEF.md. */
  --step--1: .8125rem;
  --step-0: clamp(.9375rem, .9rem + .1vw, 1rem);
  --step-1: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --step-2: clamp(1.375rem, 1.2rem + .5vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.5rem + .75vw, 2.25rem);
  --step-4: clamp(2.25rem, 1.6rem + 1.6vw, 3.25rem);
  --step-num: clamp(2.75rem, 2rem + 2.6vw, 5rem);
  --step-lead: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);

  /* spacing (4 px base, in rem so very wide screens scale it with the type) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --band: clamp(2.5rem, 1.75rem + 2vw, 4.5rem); /* vertical padding of full-bleed bands (round 5: was up to 6rem) */
  --gutter: clamp(1rem, 2.5vw, 3rem);      /* side gutter: 16 px on phones, 36 px at 1440, 48 px from 1920 */
  --max: 150rem;                           /* content container (round 5): 2400 px, so the page uses about 95% of the width */
  --measure: 42.5rem;                      /* reading column: 680 px, about 70-80 characters */

  /* radius */
  --r-sm: 8px; --r-md: 16px; --r-lg: 28px; --r-pill: 999px;

  /* motion (round 4 motion system; DESIGN_BRIEF.md "Round 4: typography and motion") */
  --ease-out: cubic-bezier(.2, .8, .2, 1);     /* things settling: hovers, fades */
  --ease-in: cubic-bezier(.4, 0, 1, 1);        /* things leaving */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* back-and-forth (pendulum-like loops) */
  --ease-emph: cubic-bezier(.16, 1, .3, 1);    /* entrances: fast start, long soft landing */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* small pops and press releases; replaced by a real spring below where linear() works */
  --dur-1: 120ms;   /* press, colour change */
  --dur-2: 200ms;   /* small UI: chips, switches, word swaps */
  --dur-3: 320ms;   /* cards, buttons springing back */
  --dur-4: 560ms;   /* entrances, scroll reveals */
  --dur-5: 880ms;   /* hero headline words */
  --dist-1: 4px; --dist-2: 12px; --dist-3: 28px; /* travel: nudge, enter, reveal */
  --stagger: 70ms; --stagger-word: 55ms;
  /* round 1 names kept for older rules */
  --t-fast: var(--dur-1); --t-base: var(--dur-2); --t-slow: 360ms; --t-enter: 480ms;

  color-scheme: light;
}
/* The stage (dark bands): base colour, the amber cone of light from above and the green dusk at the edges.
   Defined on <html> only, per theme, so a stage band in the dark theme sits a step deeper than the page. */
:root { --stage-bg: #0B1710; --stage-cone: rgb(240 190 90 / .2); --stage-edge: rgb(80 140 100 / .4); }
/* A damped spring (about 8% overshoot, settles by the end) sampled into linear(); browsers without
   linear() keep the cubic-bezier above. */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, .04, .139, .271, .417, .561, .693, .807, .9, .971, 1.023, 1.056, 1.076, 1.083, 1.082, 1.075, 1.065, 1.053, 1.041, 1.029, 1.019, 1.011, 1.004, .999, .996, .994, .993, .993, .994, .996, 1); }
}

/* Dark, "Forest night": forest-black, deep-green panels, warm text; saffron and brass as glow and lines, gold as the primary. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) .theme-follow {
    --bg: #0D1810; --surface: #14231A; --surface-2: #1B2F22;
    --text: #F4ECD6; --muted: #BBBDA3;
    --indigo: #E4BC5E; --indigo-ink: #12150E; --indigo-edge: #A77F2D; --indigo-soft: #26391F;
    --saffron: #F0A03A; --saffron-ink: #14110E; --saffron-edge: #B06A1C; --saffron-text: #F0A03A;
    --teal: #6BD0B4; --rose: #FF8B72; --gold: #CDBA94; --brass: #E1B456; --beat-weak: #A9B8EE;
    --line: #2B4030; --line-strong: #84A088; --card-edge: #3A5441; --focus: #E4BC5E;
    --hi: rgb(255 240 215 / .06); --e-1: none; --e-2: none; --glow: rgb(240 160 58 / .35);
    --grain-ink: #FFF1D6; --grain-a: .05; --doodle-ink: #E1B456; --doodle-a: .045;
    --staff-ink: rgb(225 180 86 / .3); --tick-ink: rgb(225 180 86 / .55);
    color-scheme: dark; color: var(--text);
  }
  :root:not([data-theme="light"]) { --stage-bg: #08120B; --stage-cone: rgb(240 190 90 / .15); --stage-edge: rgb(100 170 120 / .25); }
}
:root[data-theme="dark"], .band-night, .site-footer, .tokens-night {
  --bg: #0D1810; --surface: #14231A; --surface-2: #1B2F22;
  --text: #F4ECD6; --muted: #BBBDA3;
  --indigo: #E4BC5E; --indigo-ink: #12150E; --indigo-edge: #A77F2D; --indigo-soft: #26391F;
  --saffron: #F0A03A; --saffron-ink: #14110E; --saffron-edge: #B06A1C; --saffron-text: #F0A03A;
  --teal: #6BD0B4; --rose: #FF8B72; --gold: #CDBA94; --brass: #E1B456; --beat-weak: #A9B8EE;
  --line: #2B4030; --line-strong: #84A088; --card-edge: #3A5441; --focus: #E4BC5E;
  --hi: rgb(255 240 215 / .06); --e-1: none; --e-2: none; --glow: rgb(240 160 58 / .35);
  --grain-ink: #FFF1D6; --grain-a: .05; --doodle-ink: #E1B456; --doodle-a: .045;
  --staff-ink: rgb(225 180 86 / .3); --tick-ink: rgb(225 180 86 / .55);
  color-scheme: dark; color: var(--text);
}
:root[data-theme="dark"] { --stage-bg: #08120B; --stage-cone: rgb(240 190 90 / .15); --stage-edge: rgb(100 170 120 / .25); }
/* Inside a stage band, .theme-follow returns to the light set when the visitor's theme is light. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-follow {
    --bg: #FBF5E9; --surface: #FFFCF5; --surface-2: #EDE6CC; --text: #1A1712; --muted: #5A5046;
    --indigo: #1F4A35; --indigo-ink: #FFFFFF; --indigo-edge: #12301F; --indigo-soft: #E1ECDF;
    --saffron: #E8891A; --saffron-ink: #1A1712; --saffron-edge: #AF600F; --saffron-text: #934509;
    --teal: #136B65; --rose: #B23824; --gold: #80601A; --brass: #B8892F;
    --line: #DDD3B0; --line-strong: #8A7656; --card-edge: #D3C79C; --focus: #1F4A35;
    --hi: rgb(255 255 255 / .8); --e-1: 0 1px 2px rgb(58 40 15 / .06), 0 2px 8px rgb(58 40 15 / .05);
    --e-2: 0 2px 4px rgb(58 40 15 / .06), 0 14px 34px rgb(58 40 15 / .1); --glow: rgb(232 137 26 / .35);
    --grain-ink: #5A3A12; --grain-a: .05; --doodle-ink: #8F6820; --doodle-a: .05;
    --staff-ink: rgb(184 137 47 / .5); --tick-ink: rgb(184 137 47 / .75);
    color-scheme: light; color: var(--text);
  }
}
/* Round 5: the root font size no longer grows on wide monitors (it was 112.5 / 125 / 137.5 % above
   2200 / 3000 / 3200 px, which made text biggest exactly where the author found it too big). Wide
   screens now get a wider container and more columns instead; the visitor's own zoom and browser
   font size still scale everything, because all text sizes are in rem. */

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6;
  font-optical-sizing: auto; font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
main { flex: 1; outline: none; padding-bottom: var(--s-8); }
main:has(> .band:last-child) { padding-bottom: 0; }
img, svg, canvas { max-width: 100%; }
a { color: var(--indigo); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--w-h2); line-height: 1.12; margin: 1.4em 0 .5em; text-wrap: balance; font-synthesis: none; letter-spacing: -.012em; }
h1 { font-size: var(--step-3); font-weight: var(--w-h1); margin-top: .5em; letter-spacing: -.022em; line-height: 1.06; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); font-weight: var(--w-h3); letter-spacing: -.006em; line-height: 1.2; }
p, ul, ol { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
strong, b { font-weight: 650; }
[hidden] { display: none !important; }
.mt { margin-top: var(--s-3); }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
[lang="hi"], [lang="sa"], .deva { font-family: var(--font-deva); }
cite { font-style: italic; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--saffron); color: var(--saffron-ink); }

/* Layout model: full-bleed bands (backgrounds run edge to edge on any screen)
   holding a centred .wrap of up to 90rem with fluid gutters. Reading text is
   kept to --measure inside it (.prose), never the full container width. */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(var(--measure) + 2 * var(--gutter) + 80px); }
.prose { max-width: var(--measure); }
.band { padding: var(--band) 0; }
.band + .band { border-top: 1px solid var(--line); }
.band-surface { background: var(--surface); }
.band-alt { background: var(--surface-2); }

/* ------------------------------------------------------------------ round 6: paper and stage bands, textures */
/* Paper bands carry a fine grain (and, with .has-doodles, the faint instrument doodles); stage bands carry the
   grain plus a still cone of light. Textures are masks on ::before/::after layers BEHIND the content (isolation
   on the band), so text never sits on a background-image of its own box and the contrast checks still measure
   every text node; their worst points are measured from screenshots (tests/identity.test.js, DESIGN_IDENTITY.md).
   Nothing here animates (the hero's slow breathing lives in motion.css) and nothing uses blend modes. */
.band-paper, .band-night, .page-band, .site-footer { position: relative; isolation: isolate; }
.band-paper { background-color: var(--bg); }
.band-night { background-color: var(--stage-bg); color: var(--text); }
.band-paper + .band-paper, .band + .band-night, .band-night + .band, .band-night + .band-paper { border-top: 0; }
.band-paper::before, .band-night::before, .page-band::before, .site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--grain-ink); opacity: var(--grain-a);
  -webkit-mask: url("/assets/img/grain.svg") 0 0 / 240px 240px repeat; mask: url("/assets/img/grain.svg") 0 0 / 240px 240px repeat;
}
.band-paper.has-doodles::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--doodle-ink); opacity: var(--doodle-a);
  -webkit-mask: url("/assets/img/doodle-tile.svg") 0 0 / 600px 480px repeat; mask: url("/assets/img/doodle-tile.svg") 0 0 / 600px 480px repeat;
}
/* Stage light: an amber cone from above and green dusk at the edges, under the grain. */
.band-night::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 90% at 100% 0%, rgb(245 205 120 / .17), transparent 62%),
    radial-gradient(34% 55% at 0% 100%, rgb(90 150 80 / .20), transparent 70%),
    radial-gradient(circle at 14% 24%, rgb(160 200 90 / .10), transparent 3.6%),
    radial-gradient(circle at 31% 68%, rgb(225 185 90 / .08), transparent 3.0%),
    radial-gradient(circle at 77% 38%, rgb(140 190 100 / .09), transparent 3.8%),
    radial-gradient(circle at 90% 82%, rgb(225 185 90 / .07), transparent 3.4%),
    radial-gradient(60% 75% at 50% -12%, var(--stage-cone), transparent 72%),
    radial-gradient(130% 110% at 50% 40%, transparent 55%, var(--stage-edge));
}
/* the walnut footer gets the same soft light (forest and gold, 14 Nov 2026) */
.site-footer::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 90% at 100% 0%, rgb(245 205 120 / .17), transparent 62%),
    radial-gradient(34% 55% at 0% 100%, rgb(90 150 80 / .20), transparent 70%),
    radial-gradient(circle at 14% 24%, rgb(160 200 90 / .10), transparent 3.6%),
    radial-gradient(circle at 31% 68%, rgb(225 185 90 / .08), transparent 3.0%),
    radial-gradient(circle at 77% 38%, rgb(140 190 100 / .09), transparent 3.8%),
    radial-gradient(circle at 90% 82%, rgb(225 185 90 / .07), transparent 3.4%); }
.band-night .em-word, .site-footer .em-word { color: var(--saffron-text); }
.em-word { color: var(--rose); }

/* The staff rule: five brass hairlines, 4 px apart, opened by a bar line and closed by a final bar line
   (thin + thick), as a score's system. Used as the divider between two paper bands and under page bands. */
.staff-rule, .band-paper + .band-paper > .wrap::before {
  content: ""; display: block; height: 17px; pointer-events: none;
  background:
    linear-gradient(var(--staff-ink), var(--staff-ink)) left top / 1px 17px no-repeat,
    linear-gradient(var(--staff-ink), var(--staff-ink)) right 5px top / 1px 17px no-repeat,
    linear-gradient(var(--staff-ink), var(--staff-ink)) right top / 3px 17px no-repeat,
    repeating-linear-gradient(var(--staff-ink) 0 1px, transparent 1px 4px) left top / 100% 17px no-repeat;
}
.band-paper + .band-paper { padding-top: 0; }
.band-paper + .band-paper > .wrap::before { margin-bottom: var(--band); }
.band > .wrap > h2:first-child, .band > .wrap > .band-head:first-child h2 { margin-top: 0; }
.band-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5); }
.band-head h2 { margin-bottom: 0; }
.band-head p { margin: 0; max-width: 40em; }
main > .band:last-child { padding-bottom: var(--band); }

/* Inner-page header band (full width). Round 6: sandal paper with grain, standing on a staff rule (::after). */
.page-band { background: var(--surface-2); border-bottom: 0; padding: var(--s-5) 0 var(--s-6); }
.page-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 17px; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(var(--staff-ink) 0 1px, transparent 1px 4px) left top / 100% 17px no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.page-band h1 { margin: var(--s-2) 0 var(--s-2); }
.page-band .lead, .page-band > .wrap > p { margin-bottom: 0; }
.page-band .crumb { margin-top: 0; }
.page-body { padding-top: var(--s-7); }
@media (min-width: 1100px) { .page-band { padding: var(--s-7) 0 var(--s-7); } .page-body { padding-top: var(--s-8); } }

/* Reading pages: text column plus a side column on wide screens */
.prose-layout { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  /* Round 5: text column and side column sit together on the left of the wide container (they were pushed to
     the two edges, which left the text floating mid-page on wide screens). */
  .prose-layout { grid-template-columns: minmax(0, var(--measure)) minmax(16rem, 26rem); justify-content: start; column-gap: var(--s-8); }
  .prose-aside { position: sticky; top: var(--s-5); align-self: start; }
}
.prose-layout > .prose > h2:first-child { margin-top: 0; }
.aside-card { background: var(--surface); border: 1px solid var(--card-edge); border-radius: var(--r-md); padding: var(--s-5); box-shadow: inset 0 1px 0 var(--hi), var(--e-1); }
.aside-card h2 { font-size: var(--step-1); margin: 0 0 var(--s-3); }
.aside-card ul { padding-left: 1.1em; margin-bottom: 0; }
.aside-card li + li { margin-top: var(--s-1); }
.toc { list-style: none; padding: 0 !important; }
.toc a { display: inline-flex; align-items: center; min-height: 32px; }

.skip-link {
  position: absolute; left: var(--s-2); top: -80px; z-index: 50;
  background: var(--surface); color: var(--text); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  border: 2px solid var(--focus);
}
.skip-link:focus { top: var(--s-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ buttons */
button, .button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.button, button:not([class]), button.primary, button.secondary, button.accent {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 10px 22px; border-radius: var(--r-pill);
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-weight: 650; line-height: 1.2; text-decoration: none; text-align: center;
  /* Round 6: an outlined brass button with a soft wooden edge (the pressable edge is 3 px now) */
  box-shadow: inset 0 1px 0 var(--hi), 0 3px 0 var(--card-edge);
  margin-bottom: 4px; /* room for the pressable edge */
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-base);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.button:hover, button:not([class]):hover, button.secondary:hover { background: var(--surface-2); color: var(--text); text-decoration: none; border-color: var(--saffron-edge); }
.button:active, button:not([class]):active, button.primary:active, button.secondary:active, button.accent:active {
  transform: translateY(2px); box-shadow: 0 1px 0 var(--card-edge);
}
/* Primary: solid forest green with a warm saffron glow on hover (gold with near-black text on dark). */
.button.primary, button.primary { background: var(--indigo); color: var(--indigo-ink); border-color: var(--indigo); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 3px 0 var(--indigo-edge); }
.button.primary:hover, button.primary:hover { background: var(--indigo); color: var(--indigo-ink); border-color: var(--indigo); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 3px 0 var(--indigo-edge), 0 10px 28px -8px var(--glow); }
.button.primary:active, button.primary:active { box-shadow: 0 1px 0 var(--indigo-edge); }
.button.accent, button.accent { background: var(--saffron); color: var(--saffron-ink); border-color: var(--saffron-edge); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 3px 0 var(--saffron-edge); }
.button.accent:hover, button.accent:hover { background: var(--saffron); color: var(--saffron-ink); border-color: var(--saffron-edge); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 3px 0 var(--saffron-edge), 0 10px 28px -8px var(--glow); }
.button.accent:active, button.accent:active { box-shadow: 0 1px 0 var(--saffron-edge); }
.button.lg, button.lg { min-height: 56px; padding: 12px 26px; font-size: 1.0625rem; }
button:disabled, button:disabled:active { opacity: .55; cursor: not-allowed; transform: none; }

.icon-btn {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 2px solid transparent; background: transparent; color: var(--text);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 22px; height: 22px; }

.round-btn {
  display: inline-grid; place-items: center; width: 56px; height: 56px; padding: 0; flex: none;
  border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-size: 1.6rem; font-weight: 700; line-height: 1; box-shadow: inset 0 1px 0 var(--hi), 0 3px 0 var(--card-edge); margin-bottom: 4px;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.round-btn:hover { background: var(--surface-2); border-color: var(--saffron-edge); }
.round-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--card-edge); }

/* ------------------------------------------------------------------ forms */
label, legend { font-weight: 600; }
input[type="number"], input[type="email"], input[type="text"], select, textarea {
  min-height: 48px; padding: 10px 14px; border-radius: var(--r-sm); border: 2px solid var(--line-strong);
  background: var(--surface); color: var(--text); max-width: 100%;
}
input[type="range"] { width: 100%; accent-color: var(--indigo); min-height: 36px; }
input:disabled, select:disabled { opacity: .6; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--s-2); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .hint, .hint { font-size: var(--step--1); color: var(--muted); font-weight: 400; }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.control-row { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-4); }
@media (min-width: 640px) { .control-row { grid-template-columns: 1fr 1fr; } }
.toggle { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 650; min-height: 44px; }
.toggle input { width: 22px; height: 22px; accent-color: var(--indigo); }

/* Chip group: native radios styled as pills (arrow keys work natively). */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips legend { width: 100%; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px;
  padding: 8px 14px; border-radius: var(--r-pill); border: 2px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.chip input:hover + span { background: var(--surface-2); }
.chip input:checked + span { background: var(--indigo); border-color: var(--indigo); color: var(--indigo-ink); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Switch (checkbox styled as a track and thumb) */
.switch { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; cursor: pointer; font-weight: 600; }
.switch input { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; margin: 0; border-radius: var(--r-pill);
  border: 2px solid var(--line-strong); background: var(--surface-2); position: relative; cursor: pointer; transition: background-color var(--t-base); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--line-strong); transition: transform var(--t-base) var(--ease-out), background-color var(--t-base); }
.switch input:checked { background: var(--indigo); border-color: var(--indigo); }
.switch input:checked::after { transform: translateX(18px); background: var(--indigo-ink); }

/* ------------------------------------------------------------------ header */
/* Round 6: a paper (forest-black in dark) bar resting on a brass hairline with a fainter second line under it, like the top of a
   staff. The bar is not sticky, so it is drawn opaque (a translucent fill would only show the same paper). */
.site-header { position: relative; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--card-edge); box-shadow: 0 2px 0 -1px var(--bg), 0 3px 0 -1px var(--line); min-height: 57px; }
.header-inner { display: flex; align-items: center; gap: var(--s-2); min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; margin-right: auto; min-width: 0; padding: 4px 0; border-radius: var(--r-sm); }
.brand:hover { text-decoration: none; }
.brand-mark { flex: none; width: 38px; height: 33px; }
.brand-mark .bm-canopy { fill: var(--brass); }
.brand-mark .bm-trunk { fill: var(--indigo); }
.brand-mark .bm-root { fill: none; stroke: var(--indigo); stroke-width: 1.5; stroke-linecap: round; }
.brand-mark .bm-ground { fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-linecap: round; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand h2 { margin: 0; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: -.005em; }
.main-nav { display: none; }
.nav-list, .footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.nav-list a, .footer-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--r-pill);
  text-decoration: none; color: var(--text); font-weight: 550;
}
.nav-list a:hover, .footer-list a:hover { background: var(--surface-2); }
.theme-icon .moon { display: none; }
:root[data-theme="dark"] .theme-icon .sun { display: none; }
:root[data-theme="dark"] .theme-icon .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon .sun { display: none; }
  :root:not([data-theme="light"]) .theme-icon .moon { display: block; }
}
@media (min-width: 900px) {
  /* Round 4: reserve the desktop header's full height (64 px + border) before site.js draws it,
     so the page does not jump down 8 px when the header appears (it was a 0.2 layout shift). */
  .site-header { min-height: 65px; }
  .header-inner { min-height: 64px; gap: var(--s-3); }
  .brand { margin-right: var(--s-4); }
  .main-nav { display: flex; align-self: stretch; margin-right: auto; min-width: 0; }
  .menu-btn { display: none; }
}
/* Narrow desktops: a long brand name may take two lines rather than squeeze the menu. */
@media (min-width: 900px) and (max-width: 1099px) { .brand-name { max-width: 9.5em; } }

/* Drop-down navigation (round 5; behaviour in site.js, "Desktop drop-downs"). Each section is a link plus a
   caret button; the panel hangs from the bottom of the header and site.js keeps it inside the viewport
   (--nav-x). Hidden panels use the hidden attribute, so they are skipped by Tab and screen readers. */
.nav-bar { flex-wrap: nowrap; align-items: stretch; gap: 0 2px; height: 100%; }
.nav-item { display: flex; align-items: center; }
.nav-bar .nav-top { padding: 8px 12px; font-size: .9375rem; white-space: nowrap; }
.nav-item.has-panel .nav-top { padding-right: 2px; border-radius: var(--r-pill) 0 0 var(--r-pill); }
.nav-trigger {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0 6px 0 0; margin: 0; flex: none;
  border: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; background: transparent; color: var(--text);
}
.nav-caret { width: 12px; height: 12px; transition: transform var(--dur-2) var(--ease-out); }
.nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-item.has-panel:hover .nav-top, .nav-item.has-panel:hover .nav-trigger, .nav-item.is-open .nav-top, .nav-item.is-open .nav-trigger { background: var(--surface-2); }
.nav-trigger:focus-visible { outline-offset: -3px; }
.nav-bar .nav-top:focus-visible { outline-offset: -3px; }
/* You are here: the section of the current page. */
.nav-bar .nav-top[aria-current] { color: var(--indigo); font-weight: 700; background: var(--indigo-soft); }
.nav-item.has-panel .nav-top[aria-current] + .nav-trigger { background: var(--indigo-soft); color: var(--indigo); }
.nav-bar .nav-top[aria-current]::after { content: ""; position: absolute; left: 12px; right: 2px; bottom: 6px; height: 2px; border-radius: 2px; background: currentColor; }
.nav-bar .nav-top { position: relative; }
.nav-item:not(.has-panel) .nav-top[aria-current]::after { right: 12px; }

.nav-panel {
  position: absolute; top: 100%; left: var(--nav-x, var(--gutter)); z-index: 30;
  width: 21rem; max-width: calc(100% - 2 * var(--gutter)); max-height: calc(100vh - 80px); overflow-y: auto;
  margin-top: 1px; padding: calc(var(--s-3) + 14px) var(--s-3) var(--s-3); background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--e-2);
  animation: nav-in var(--dur-2) var(--ease-out);
}
/* Round 6: a strip of staff lines across the top of every panel (decorative, a pseudo-element, so the panel's own
   background stays a plain colour for the contrast checks). */
.nav-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 13px; pointer-events: none;
  background: repeating-linear-gradient(var(--staff-ink) 0 1px, transparent 1px 3px) left top / 100% 13px no-repeat;
  border-bottom: 1px solid var(--card-edge);
}
.nav-panel-wide { width: 66rem; padding: calc(var(--s-4) + 12px) var(--s-5) var(--s-5); }
@keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } }
.nav-groups { display: grid; gap: var(--s-2) var(--s-5); grid-template-columns: minmax(0, 1fr); }
.nav-panel-wide .nav-groups { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.nav-group-title { margin: var(--s-2) 0 var(--s-1); padding: 0 10px; font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--saffron-text); }
.nav-group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-panel a { color: var(--text); text-decoration: none; border-radius: var(--r-sm); font-weight: 400; }
.nav-panel .nav-link { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; min-height: 44px; padding: 6px 10px; line-height: 1.3; }
.nav-link-name { font-weight: 650; font-size: .9375rem; }
.nav-link-desc { font-size: var(--step--1); color: var(--muted); }
.nav-panel a:hover { background: var(--surface-2); }
.nav-panel a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.nav-panel a[aria-current="page"] { background: var(--indigo-soft); box-shadow: inset 3px 0 0 var(--indigo); }
.nav-panel a[aria-current="page"] .nav-link-name { color: var(--indigo); }
.nav-panel .nav-all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; font-weight: 700; color: var(--indigo); }
.nav-panel-wide .nav-all { margin-bottom: var(--s-1); }
@media (prefers-reduced-motion: reduce) { .nav-panel { animation: none; } .nav-caret { transition: none; } }
:root[data-motion="reduce"] .nav-panel { animation: none; }
:root[data-motion="reduce"] .nav-caret { transition: none; }

/* Mobile menu sheet: the same sections as grouped lists. */
.nav-sheet {
  position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow-y: auto;
  display: flex; flex-direction: column; padding: var(--s-2) var(--gutter) var(--s-6);
}
.nav-sheet .sheet-top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); margin-bottom: var(--s-2); }
.nav-sheet .sheet-title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); }
.sheet-sec { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.sheet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-3); }
.sheet-h { margin: 0; font-size: var(--step-1); }
.sheet-h > a, .sheet-h-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.sheet-h-link[aria-current] { color: var(--indigo); }
.sheet-all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 650; font-size: .9375rem; }
.sheet-group-title { margin: var(--s-2) 0 2px; font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--saffron-text); }
.nav-sheet .sheet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 2px var(--s-2); }
.nav-sheet .sheet-list a { width: 100%; min-height: 48px; padding: 6px 12px; border-radius: var(--r-sm); line-height: 1.25; font-weight: 600; }
.nav-sheet .sheet-list a[aria-current] { background: var(--indigo-soft); color: var(--indigo); font-weight: 700; }
.nav-sheet .sheet-home { margin: 0 0 var(--s-1); }
.nav-sheet .sheet-home a { display: flex; align-items: center; min-height: 48px; padding: 6px 12px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-weight: 600; }
.nav-sheet .sheet-home a:hover { background: var(--surface-2); }
.nav-sheet .sheet-home a[aria-current] { background: var(--indigo-soft); color: var(--indigo); font-weight: 700; }
.nav-sheet .sheet-note { margin-top: var(--s-4); }
:root.menu-open { overflow: hidden; }
@media (min-width: 900px) { .nav-sheet { display: none !important; } }

/* ------------------------------------------------------------------ footer */
/* Round 6: the footer is forest-dark in both themes (the dark token set is applied to .site-footer above), with grain. */
.site-footer { margin-top: 0; background: var(--surface); border-top: 1px solid var(--line); font-size: .875rem; color: var(--text); }
.footer-string { display: block; width: 100%; height: 14px; margin-top: -1px; }
.footer-string path { fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-opacity: .7; }
.footer-inner { display: grid; gap: var(--s-5); padding-top: var(--s-6); padding-bottom: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-inner { grid-template-columns: 1.2fr 1fr 1.3fr; } }
@media (min-width: 1440px) { .footer-inner { grid-template-columns: minmax(0, 26rem) minmax(0, 24rem) minmax(0, 34rem); justify-content: space-between; } }
.footer-inner h2 { font-size: .75rem; font-family: var(--font-body); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--saffron-text); margin: 0 0 var(--s-3); }
.footer-inner > div:first-child h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.005em; text-transform: none; color: var(--text); }
.footer-inner p { margin: .3em 0; }
.footer-inner .footer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
.footer-inner .footer-list a { padding-left: 0; padding-right: 0; border-radius: 0; }
.footer-inner .footer-list a:hover { background: none; text-decoration: underline; }
.prefs { display: grid; gap: var(--s-3); }
.prefs .chips { gap: 6px; }
.prefs .chip span { min-width: 0; padding: 8px 12px; }
.footer-base { border-top: 1px solid var(--line); padding-top: var(--s-4); padding-bottom: var(--s-5); color: var(--muted); }
.footer-base p { margin: .2em 0; }

/* ------------------------------------------------------------------ layout pieces */
.section { margin-top: var(--s-7); }
.lead { font-size: var(--step-lead); line-height: 1.5; letter-spacing: -.011em; color: var(--muted); max-width: 36em; }
/* Round 6 section title: eyebrow (tracked capitals after a short brass rule) + Fraunces title, no pills. */
.eyebrow { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: .75rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--saffron-text); margin-bottom: var(--s-2); }
.eyebrow::before { content: ""; flex: none; width: 24px; height: 1.5px; background: var(--brass); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 var(--s-2); }
.hero { padding: var(--s-6) 0 var(--s-2); }
/* Round 5: grids fill the width with as many columns as fit instead of stretching a fixed number.
   .grid.two holds reading text (explanations under the tools), so its columns stop at 50rem and sit
   left-aligned; .three/.four hold cards and keep adding columns on wide screens. */
.grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 50rem)); }
.grid.three, .grid.four { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
@media (min-width: 960px) { .grid { gap: var(--s-5) var(--s-6); } }

/* Round 6 paper card: brass-tinted 1 px edge, a faint inner highlight, and two bar-line ticks (::before, decorative):
   a single bar line at the top left and a final bar line (thin + thick) at the bottom right, as a staff begins
   and ends. Cards that are links (.tool-tile, .soon-card, .card.lift) also lift and pluck their bottom "string". */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--card-edge); border-radius: var(--r-md);
  padding: var(--s-5); box-shadow: inset 0 1px 0 var(--hi), var(--e-1); display: flex; flex-direction: column;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base);
}
.card::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  background:
    linear-gradient(var(--tick-ink), var(--tick-ink)) left top / 1px 10px no-repeat,
    linear-gradient(var(--tick-ink), var(--tick-ink)) right 4px bottom / 1px 10px no-repeat,
    linear-gradient(var(--tick-ink), var(--tick-ink)) right bottom / 2.5px 10px no-repeat;
}
.card h2, .card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card .card-link { margin-top: auto; font-weight: 650; }
.card.tool { border-top: 3px solid var(--saffron); }
.card:hover { border-color: var(--line-strong); }
/* The plucked string: the bottom edge is the string at rest (brass, saffron on hover); on hover a half-sine arch
   (the fundamental of a string fixed at both ends) swings once and dies away. Transform and opacity only;
   Calm motion leaves just the colour change. */
.tool-tile, .soon-card, .card.lift { border-bottom: 2px solid var(--card-edge); }
.tool-tile:hover, .soon-card:hover, .card.lift:hover, .tool-tile:focus-within, .soon-card:focus-within { border-bottom-color: var(--saffron); }
.tool-tile::after, .soon-card::after, .card.lift::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -7px; height: 12px; pointer-events: none;
  background-color: var(--saffron); opacity: 0; transform: scaleY(0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q50 -6 100 6' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q50 -6 100 6' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.tool-tile:hover::after, .soon-card:hover::after, .card.lift:hover::after { animation: pluck 1.1s var(--ease-out) both; }
@keyframes pluck {
  0% { opacity: 1; transform: scaleY(1); } 14% { transform: scaleY(-.78); } 28% { transform: scaleY(.56); }
  42% { transform: scaleY(-.38); } 56% { transform: scaleY(.24); } 70% { opacity: 1; transform: scaleY(-.12); }
  100% { opacity: 0; transform: scaleY(0); }
}
/* Pill badges: a small signal dot and the word. Free = teal, New = madder, Coming soon = brass, Planned = indigo. */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: .02em; padding: 3px 10px 3px 8px; border-radius: var(--r-pill); background: var(--indigo-soft); color: var(--indigo); border: 1px solid transparent; margin-bottom: var(--s-2); align-self: flex-start; }
.badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.soon { background: transparent; color: var(--gold); border-color: currentColor; }
.badge.free { background: transparent; color: var(--teal); border-color: currentColor; }
.badge.new { background: transparent; color: var(--rose); border-color: currentColor; }
.badge.planned { background: transparent; color: var(--indigo); border: 1px dashed currentColor; }
.badge.planned::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.note { border-left: 3px solid var(--indigo); background: var(--surface-2); padding: var(--s-3) var(--s-4); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: var(--s-4) 0; box-shadow: inset 1px 0 0 var(--surface), inset 2px 0 0 var(--brass); }
.note.warn { border-left-color: var(--rose); }
.note p:last-child { margin-bottom: 0; }
.placeholder-flag { font-family: var(--font-mono); font-size: .85rem; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; color: var(--rose); }
kbd, .kbd {
  display: inline-block; font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .8em; line-height: 1.35; min-width: 1.9em; text-align: center;
  padding: 2px 7px; border: 1.5px solid var(--line-strong); border-bottom-width: 3px; border-radius: 6px; background: var(--surface); color: var(--text);
}
.page-head { padding-top: var(--s-4); }
.page-head h1 { margin-bottom: var(--s-2); }
.crumb { margin: var(--s-4) 0 0; font-size: var(--step--1); }
.crumb a { font-weight: 600; }

.tool-panel { background: var(--surface); border: 1px solid var(--card-edge); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: inset 0 1px 0 var(--hi), var(--e-1); }
@media (min-width: 640px) { .tool-panel { padding: var(--s-5); } }
.status { min-height: 1.6em; }
.status.error { color: var(--rose); font-weight: 600; }

/* About page (14 Nov 2026): four paper cards across the width instead of one narrow column. Two columns from 900 px;
   the first card (why) and the contact card run the full width. Text lines stay readable (62ch). */
.about-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.about-grid .card h2 { font-size: var(--step-2); margin: 0 0 var(--s-3); }
.about-grid .card p { max-width: 62ch; }
.about-grid .card p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .about-grid .about-wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); align-content: start; }
  .about-grid .about-wide h2 { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ home */
/* Hero: one column on phones; from 1100 px a wide two-column layout with the
   text on the left and the Living String "instrument" on the right. */
/* Round 6: the hero is a stage band (.band-night): a dark practice room with a still cone of light, a large faint
   staff behind the words and two or three slow sound ribbons (.hero-sky, drawn in index.html, moved in motion.css).
   The Living String sits on a lit paper card (.theme-follow: it keeps the visitor's own theme, because the canvas
   reads its colours from <html>). */
.home-hero { padding: var(--s-6) 0 var(--s-7); overflow: hidden; }
.hero-grid { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
.home-hero h1 { font-size: var(--step-4); font-weight: var(--w-hero); letter-spacing: -.032em; line-height: 1.04; max-width: 17ch; margin-top: 0; }
.home-hero .lead { margin-bottom: 0; }
.home-hero .cta-row { margin-bottom: 0; }
.hero-text, .hero-grid > .hero-stage { position: relative; }
/* The faint staff across the stage, centred behind the headline column. */
.hero-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-sky::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 113px; margin-top: -56px;
  background: repeating-linear-gradient(var(--staff-ink) 0 1px, transparent 1px 28px) left top / 100% 113px no-repeat;
  opacity: .5;
}
.ribbon { position: absolute; left: 0; display: block; overflow: visible; max-width: none; pointer-events: none; }
.ribbon-1 { top: 70%; width: calc(100% + 720px); height: 160px; margin-top: -80px; }
.ribbon-2 { top: 78%; width: calc(100% + 900px); height: 160px; margin-top: -80px; }
.ribbon-3 { top: 63%; width: calc(100% + 600px); height: 120px; margin-top: -60px; }
/* The path carries fill="none" and vector-effect as attributes (they must travel into the <use> copies); colour,
   width and opacity are inherited: colour from the <svg>, the core strand from <pattern>, the others from each <use>. */
.ribbon pattern { stroke-width: 1.5; stroke-opacity: .26; }
.rb-saffron { stroke: var(--saffron); } .rb-brass { stroke: var(--brass); } .rb-indigo { stroke: var(--indigo); }
.rb-halo { stroke-width: 9; stroke-opacity: .05; }
.rb-2 { stroke-width: 1; stroke-opacity: .16; } .rb-3 { stroke-width: 1; stroke-opacity: .09; }
.string-stage { position: relative; }
.hero-stage {
  background: var(--surface); color: var(--text); border: 1px solid var(--card-edge); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--hi), 0 30px 60px -28px rgb(0 0 0 / .75), 0 0 90px -24px rgb(240 160 58 / .35);
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.hero-stage::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none; border-radius: calc(var(--r-lg) - 10px);
  background:
    linear-gradient(var(--tick-ink), var(--tick-ink)) left top / 1px 12px no-repeat,
    linear-gradient(var(--tick-ink), var(--tick-ink)) right 4px bottom / 1px 12px no-repeat,
    linear-gradient(var(--tick-ink), var(--tick-ink)) right bottom / 2.5px 12px no-repeat;
}
/* The Living String rests on the middle line of a staff (the canvas draws the string along the middle). */
.string-box {
  position: relative; height: 160px; --gap: 15px;
  background: repeating-linear-gradient(var(--staff-ink) 0 1px, transparent 1px var(--gap)) center / 100% calc(4 * var(--gap) + 1px) no-repeat;
}
@media (min-width: 768px) { .string-box { height: 220px; --gap: 21px; } .hero-stage { padding: var(--s-4) var(--s-5) var(--s-5); } }
@media (min-width: 1100px) {
  .home-hero { padding: var(--s-8) 0; min-height: min(64vh, 42rem); display: flex; align-items: center; }
  .home-hero > .wrap { width: 100%; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-8); }
  .hero-stage .string-box { height: clamp(220px, 18vw, 24rem); --gap: clamp(21px, 1.7vw, 2.25rem); }
}
.stage-label { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin: 0; color: var(--muted); font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.stage-label span:first-child { display: inline-flex; align-items: center; gap: 10px; color: var(--saffron-text); }
.stage-label span:first-child::before { content: ""; width: 24px; height: 1.5px; background: var(--brass); }
/* Static fallback (no JS, or before the canvas is ready): a plain string. */
.string-box::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: var(--line-strong);
}
.string-box.is-live::before { display: none; }
.string-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.string-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.note-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.note-chip {
  min-width: 44px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-pill);
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 650;
}
.note-chip:hover { background: var(--surface-2); }
.note-chip[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: var(--indigo-ink); }
.string-hint { flex-basis: 100%; margin: 0; }
.string-status { margin: 0; flex-basis: 100%; }
.string-status:empty { margin-top: calc(-1 * var(--s-3)); }

.promise { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s-5) 0; }
.promise.band-paper { background-color: var(--bg); border: 0; padding: var(--s-6) 0 var(--s-5); }
.promise-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .promise-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .promise-list { grid-template-columns: repeat(4, 1fr); } }
.promise-list li { display: grid; grid-template-columns: 32px 1fr; gap: 2px var(--s-3); align-items: start; align-content: start; }
.promise-list svg { grid-row: span 2; width: 32px; height: 32px; }
.promise-list strong { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -.005em; }
.promise-list span { color: var(--muted); font-size: .875rem; }
.promise-foot { margin: var(--s-4) 0 0; }
.motif-line { fill: none; stroke: var(--indigo); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.motif-fill { fill: var(--saffron); }
.motif-soft { fill: none; stroke: var(--brass); stroke-width: 1.5; }

.tool-card { padding-top: 0; overflow: hidden; }
.tool-card .card-body { display: flex; flex-direction: column; flex: 1; }
.tool-art { position: relative; height: clamp(140px, 10vw, 13rem); margin: 0 calc(-1 * var(--s-5)) var(--s-4); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.tool-art svg { width: auto; height: 85%; max-width: 100%; }
.art-core { fill: var(--saffron); }

/* Tool-card motion graphics (round 4). Each one shows what the tool does: a bar of beats with its
   accents, a tuner needle settling in tune, two drone strings at 3:2, an A-B loop, a scale on a
   keyboard. Still when idle; they play while the card is hovered or focused, and once when the card
   scrolls into view (motion.js adds .is-entered). Transform and opacity only. Calm motion and the
   device's reduce-motion setting keep them still (see the reduced-motion rules at the end). */
.mg-num { fill: var(--muted); font-family: var(--font-num); font-weight: 600; font-size: 11px; text-anchor: middle; }
.mg-start { text-anchor: start; }
.mg-axis, .mg-ab, .mg-peg { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; }
.mg-dot { transform-box: fill-box; transform-origin: center; opacity: .7; }
.mg-b1 { fill: var(--saffron); } .mg-b3 { fill: var(--teal); } .mg-b2, .mg-b4 { fill: var(--indigo); }
.mg-ring { fill: none; stroke: var(--saffron); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.mg-needle { stroke: var(--teal); stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 75px 100px; }
.mg-intune { fill: var(--teal); transform-box: fill-box; transform-origin: center; }
.mg-band { fill: var(--glow); opacity: .55; }
.mg-str { fill: none; stroke-linecap: round; transform-box: view-box; }
.mg-sa { stroke: var(--saffron-edge); stroke-width: 3; transform-origin: 83px 46px; }
.mg-pa { stroke: var(--teal); stroke-width: 2.2; transform-origin: 83px 80px; }
.mg-loop { fill: var(--indigo-soft); stroke: var(--indigo); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mg-wave { fill: none; stroke: var(--line-strong); stroke-width: 2.5; stroke-linecap: round; }
.mg-head { fill: none; stroke: var(--rose); stroke-width: 2.5; stroke-linecap: round; }
.mg-key { fill: var(--saffron); opacity: 0; }
.mg-white { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linejoin: round; }
.mg-black { fill: var(--indigo); }

/* One run when the card arrives (.is-entered, a short lead-in so it starts once the card is visible);
   looping while hovered or focused. */
.tool-card { --mg-lead: 0s; }
.tool-card.is-entered:not(:hover):not(:focus-within) { --mg-lead: .45s; }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-dot { animation: mg-beat 2.4s var(--ease-out) both; }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-ring { animation: mg-ring 2.4s var(--ease-out) both; animation-delay: var(--mg-lead); }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-b1 { animation-delay: var(--mg-lead); }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-b2 { animation-delay: calc(var(--mg-lead) + .6s); }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-b3 { animation-delay: calc(var(--mg-lead) + 1.2s); }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-b4 { animation-delay: calc(var(--mg-lead) + 1.8s); }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-needle { animation: mg-needle 3.2s linear both; animation-delay: var(--mg-lead); }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-intune { animation: mg-intune 3.2s linear both; animation-delay: var(--mg-lead); }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-sa { animation: mg-vibrate 1.2s var(--ease-in-out) 2 both; animation-delay: var(--mg-lead); }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-pa { animation: mg-vibrate .8s var(--ease-in-out) 3 both; animation-delay: var(--mg-lead); }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-head { animation: mg-play 1.8s linear 2 both; animation-delay: var(--mg-lead); }
.tool-card:is(:hover, :focus-within, .is-entered) .mg-key { animation: mg-key 2.4s var(--ease-out) both; }
.mg-key:nth-child(1) { animation-delay: var(--mg-lead) !important; }
.mg-key:nth-child(2) { animation-delay: calc(var(--mg-lead) + .26s) !important; }
.mg-key:nth-child(3) { animation-delay: calc(var(--mg-lead) + .52s) !important; }
.mg-key:nth-child(4) { animation-delay: calc(var(--mg-lead) + .78s) !important; }
.mg-key:nth-child(5) { animation-delay: calc(var(--mg-lead) + 1.04s) !important; }
.mg-key:nth-child(6) { animation-delay: calc(var(--mg-lead) + 1.3s) !important; }
.mg-key:nth-child(7) { animation-delay: calc(var(--mg-lead) + 1.56s) !important; }
.mg-key:nth-child(8) { animation-delay: calc(var(--mg-lead) + 1.82s) !important; }
.tool-card:is(:hover, :focus-within) :is(.mg-dot, .mg-ring, .mg-needle, .mg-intune, .mg-sa, .mg-pa, .mg-head, .mg-key) { animation-iteration-count: infinite; }
@keyframes mg-beat { 0% { opacity: .7; transform: none; } 3% { opacity: 1; transform: scale(1.32); } 22% { opacity: 1; transform: none; } 45%, 100% { opacity: .7; transform: none; } }
@keyframes mg-ring { 0% { opacity: .8; transform: scale(1); } 32% { opacity: 0; transform: scale(2.2); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes mg-needle {
  0%, 6% { transform: none; } 30% { transform: rotate(-32deg); } 46% { transform: rotate(9deg); }
  55% { transform: rotate(-4deg); } 62% { transform: rotate(1.5deg); } 68%, 100% { transform: none; }
}
@keyframes mg-intune { 0%, 8% { opacity: 1; transform: none; } 14%, 64% { opacity: 0; transform: none; } 70% { opacity: 1; transform: scale(1.5); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes mg-vibrate { 0%, 100% { transform: none; } 50% { transform: scaleY(-1); } }
@keyframes mg-play { from { transform: none; } to { transform: translateX(48px); } }
@keyframes mg-key { 0% { opacity: 0; } 3% { opacity: .85; } 16% { opacity: .85; } 34%, 100% { opacity: 0; } }

/* Promise icons draw their line once when they scroll into view. */
[data-draw] .revealing .motif-line { stroke-dasharray: 1; animation: draw-line 480ms var(--ease-out) both; animation-delay: calc(min(var(--reveal-i, 0), 8) * var(--stagger) + 120ms); }
@keyframes draw-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Hero headline: the two foundations, pulse and pitch, carry the two brand colours. */
.home-hero .w-pulse { color: var(--saffron-text); }
.home-hero .w-pitch { color: var(--indigo); }
.tool-card .button { align-self: flex-start; margin-top: auto; }
.tool-meta { margin-top: var(--s-2); }
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--e-2); }
.card.lift:hover { box-shadow: var(--e-2); }

.teaser-art { width: 56px; height: 56px; margin-bottom: var(--s-3); }

/* ------------------------------------------------------------------ tool lists (round 5) */
/* Drawn by site.js from SITE_CONFIG.nav: the home page's "Browse tools" (groups side by side, one row per
   tool) and the /tools/ page (one section per group, compact cards). */
.browse-grid { display: grid; gap: var(--s-5) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.browse-group h3 { margin: 0; font-size: var(--step-1); display: flex; align-items: center; gap: 10px; }

/* Round 6 doodle icons (assets/img/doodles/*.svg, drawn for this site): masks tinted with the brass text colour,
   chosen per link from its href (site.js draws the lists, so no markup is needed). */
.doodle, .tt-link::before, .browse-group h3::before {
  background-color: var(--gold);
  -webkit-mask: var(--icon, url("/assets/img/doodles/quarter-note.svg")) center / contain no-repeat;
  mask: var(--icon, url("/assets/img/doodles/quarter-note.svg")) center / contain no-repeat;
}
.doodle { display: inline-block; width: 48px; height: 48px; flex: none; }
.browse-group h3::before { content: ""; width: 30px; height: 30px; flex: none; }
.tt-link::before { content: ""; width: 34px; height: 34px; flex: none; }
#bg-practise { --icon: url("/assets/img/doodles/metronome.svg"); }
#bg-theory { --icon: url("/assets/img/doodles/harmonium.svg"); }
#bg-train { --icon: url("/assets/img/doodles/headphones.svg"); }
#bg-reference { --icon: url("/assets/img/doodles/note-values.svg"); }
.tt-link[href="/tools/metronome/"] { --icon: url("/assets/img/doodles/metronome.svg"); }
.tt-link[href="/tools/tuner/"] { --icon: url("/assets/img/doodles/tuning-fork.svg"); }
.tt-link[href="/tools/drone/"] { --icon: url("/assets/img/doodles/tanpura.svg"); }
.tt-link[href="/tools/practice-player/"] { --icon: url("/assets/img/doodles/cassette.svg"); }
.tt-link[href="/tools/scales/"] { --icon: url("/assets/img/doodles/harmonium.svg"); }
.tt-link[href="/tools/circle-of-fifths/"] { --icon: url("/assets/img/doodles/pitch-pipe.svg"); }
.tt-link[href="/tools/transpose/"] { --icon: url("/assets/img/doodles/note-step.svg"); }
.tt-link[href="/tools/fretboard/"] { --icon: url("/assets/img/doodles/guitar.svg"); }
.tt-link[href="/tools/ear-training/"] { --icon: url("/assets/img/doodles/headphones.svg"); }
.tt-link[href="/tools/note-reading/"] { --icon: url("/assets/img/doodles/eighth-notes.svg"); }
.tt-link[href="/tools/calculators/"] { --icon: url("/assets/img/doodles/note-values.svg"); }
.tt-link[href="/raaga/"] { --icon: url("/assets/img/doodles/bansuri.svg"); }
.tt-link[href="/raaga/melakarta/"] { --icon: url("/assets/img/doodles/chakra.svg"); }
.browse-blurb { margin: 2px 0 var(--s-2); }
.browse-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.browse-list li { border-bottom: 1px solid var(--line); }
.browse-link { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 7px 8px; margin: 0 -8px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; line-height: 1.3; }
.browse-link:hover { background: var(--surface-2); }
.browse-link:hover .browse-name { text-decoration: underline; text-decoration-thickness: 1px; }
.browse-name { font-weight: 650; color: var(--indigo); }
.browse-desc { font-size: var(--step--1); color: var(--muted); }
.browse-note { margin: var(--s-5) 0 0; }

/* Round 6: Raaga and Coming soon are two bands now (stage, then paper); .home-more is kept for older markup. */
.home-more { display: grid; gap: var(--s-7) var(--s-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
.home-soon .band-head { margin-bottom: var(--s-5); }
.home-soon .soon-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.feature { display: grid; gap: var(--s-4) var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
.feature h2 { margin: 0 0 var(--s-2); }
.feature p { max-width: 42em; }
.feature .cta-row { margin: var(--s-4) 0 0; }
.feature-art { width: 96px; height: 96px; }
@media (min-width: 760px) { .feature { grid-template-columns: auto minmax(0, 1fr); } .feature-art { width: 132px; height: 132px; } }
/* Round 6: the Raaga feature on its own stage band, with a swara wheel (12 semitone ticks; the seven shuddh
   swaras of Bilawal, Sa at the top). */
.feature-band .feature { gap: var(--s-5) var(--s-8); }
/* Wide screens: the wheel and the words stay together in the middle of the stage instead of leaving it empty. */
@media (min-width: 760px) { .feature-band .feature { grid-template-columns: auto minmax(0, 44rem); justify-content: center; } }
.feature-band .feature-art { width: 140px; height: 140px; }
@media (min-width: 760px) { .feature-band .feature-art { width: clamp(180px, 16vw, 15rem); height: clamp(180px, 16vw, 15rem); } }
.sw-rim { fill: none; stroke: var(--brass); stroke-width: 1.2; stroke-opacity: .7; }
.sw-tick { stroke: var(--brass); stroke-width: 1.2; stroke-linecap: round; stroke-opacity: .7; }
.sw-dot { fill: var(--surface); stroke: var(--brass); stroke-width: 1.5; }
.sw-sa { fill: var(--saffron); stroke: none; }
.sw-pa { fill: var(--teal); stroke: none; }
.sw-label { fill: var(--muted); font-family: var(--font-body); font-size: 9px; font-weight: 650; letter-spacing: .04em; text-anchor: middle; }
.sw-string { fill: none; stroke: var(--saffron); stroke-width: 1.2; stroke-opacity: .55; }
.sw-start { text-anchor: start; } .sw-end { text-anchor: end; }
/* On the stage the hero's lead is set in the full text colour: the ribbons may pass behind it. */
.home-hero .lead { color: var(--text); }

.soon-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.soon-card { padding: var(--s-4) var(--s-5); }
.soon-card h3 { margin: 0 0 var(--s-1); font-size: var(--step-1); }
.soon-link { color: var(--text); text-decoration: none; }
.soon-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.soon-card:hover .soon-link { text-decoration: underline; text-decoration-thickness: 1px; }

.tool-group + .tool-group { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.tool-group-head h2 { margin: 0; }
/* Round 6: a short brass rule over each group title (the eyebrow rule, without a label). */
.tool-group-head h2::before { content: ""; display: block; width: 24px; height: 1.5px; margin-bottom: 10px; background: var(--brass); }
.tool-group-head p { margin: var(--s-1) 0 var(--s-4); }
@media (min-width: 1440px) {
  .tool-group { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .tool-group-head p { margin-bottom: 0; }
}
/* Very wide screens: two groups side by side (Practise | Theory, Train | Reference, Raaga), so rows of four
   cards fill the width instead of leaving a third of it empty. */
@media (min-width: 2200px) {
  .tool-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); }
  .tool-group, .tool-group + .tool-group { display: block; margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--line); }
  .tool-group-head p { margin-bottom: var(--s-4); }
}
/* At most six cards to a row, at least 14rem each (four in a row at 1440 px beside the group heading). */
.tile-grid {
  list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(14rem, calc((100% - 5 * var(--s-4)) / 6))), 1fr));
}
.tool-tile { padding: var(--s-4) var(--s-4) var(--s-4); gap: var(--s-2); }
.tt-name { margin: 0; font-size: var(--step-1); }
.tt-link { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
.tt-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tool-tile:hover .tt-link { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 1px; }
.tool-tile p { margin: 0; }
@supports selector(:has(a)) {
  .tool-tile:has(.tt-link:focus-visible), .soon-card:has(.soon-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .tt-link:focus-visible, .soon-link:focus-visible { outline: none; }
}

/* ------------------------------------------------------------------ metronome */
.metro { display: grid; gap: var(--s-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .metro { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.stage {
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--card-edge);
  border-radius: var(--r-lg); box-shadow: inset 0 1px 0 var(--hi), var(--e-1); padding: var(--s-5) var(--s-4) var(--s-4); text-align: center;
}
@media (min-width: 640px) { .stage { padding: var(--s-6) var(--s-6) var(--s-5); } }
.dial-wrap { position: relative; width: 240px; height: 240px; margin: 0 auto; }
@media (min-width: 640px) { .dial-wrap { width: 280px; height: 280px; } }
.rings { position: absolute; inset: 0; pointer-events: none; }
.ring {
  position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--beat-weak);
  transform: scale(var(--s, .6)); opacity: var(--o, 0); will-change: transform, opacity;
}
.ring[data-level="3"] { border-color: var(--beat-strong); border-width: 6px; background: radial-gradient(circle, transparent 62%, var(--glow) 100%); }
.ring[data-level="2"] { border-color: var(--beat-medium); border-width: 4px; }
.ring[data-level="0"] { border-style: dashed; border-color: var(--line-strong); }
.fast-dot { position: absolute; left: 50%; top: -2px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--line); }
.fast-dot.on { background: var(--saffron); }
.fast-dot.on[data-level="2"] { background: var(--teal); }
.fast-dot.on[data-level="1"] { background: var(--indigo); }
.stage:not(.is-fast):not(.is-calm) .fast-dot { display: none; }
.stage.is-fast .ring, .stage.is-calm .ring { display: none; }

.dial { position: absolute; inset: 0; border-radius: 50%; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.dial:active { cursor: grabbing; }
.dial:focus-visible { outline-offset: 4px; }
.dial-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial-face { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.dial-rim { fill: var(--surface-2); }
.dial-knurl { transform-origin: 120px 120px; transform-box: view-box; }
.dial-knurl line { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.dial-track { fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; }
.dial-fill { fill: none; stroke: var(--saffron); stroke-width: 10; stroke-linecap: round; }
.dial-knob { fill: var(--surface); stroke: var(--saffron-edge); stroke-width: 4; }
.dial-readout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.bpm-value { font-family: var(--font-display); font-size: var(--step-num); font-weight: 430; font-variant-numeric: lining-nums; font-synthesis: none; line-height: .95; letter-spacing: -.01em; }
.bpm-unit { font-weight: 700; font-size: var(--step--1); letter-spacing: .14em; color: var(--muted); }
/* Tempo words are set upright and semi-bold, as tempo markings are printed in scores. */
.tempo-word { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: .01em; color: var(--text); min-height: 1.4em; }
.laya-word { font-size: var(--step--1); color: var(--muted); min-height: 1.3em; }
.step-row { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-4); }
.step-row .hint { max-width: 13em; }

.beats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-2); margin: var(--s-5) 0 0; }
.beat-group { display: flex; gap: var(--s-2); padding: 0 var(--s-1); }
.beat-group + .beat-group { border-left: 2px dotted var(--line-strong); padding-left: var(--s-3); }
.beat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 52px; padding: 0; border: 0; background: none; color: var(--text);
}
.beat .dot {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid var(--beat-weak); background: var(--surface); font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-num);
  transition: transform var(--t-fast) var(--ease-spring);
}
.beat[data-level="3"] .dot { border-color: var(--saffron-edge); border-width: 4px; }
.beat[data-level="2"] .dot { border-color: var(--teal); }
.beat[data-level="0"] .dot { border-style: dashed; border-color: var(--line-strong); color: var(--muted); }
.beat .lvl { font-size: .75rem; font-weight: 600; color: var(--muted); }
.beat.active .dot { background: var(--indigo); color: var(--indigo-ink); transform: scale(1.12); }
.beat.active[data-level="3"] .dot { background: var(--saffron); color: var(--saffron-ink); }
.beat.active[data-level="2"] .dot { background: var(--teal); color: var(--bg); }
.beat.active[data-level="0"] .dot { background: var(--surface-2); color: var(--text); }
.beats-help { margin: var(--s-2) auto 0; max-width: 32em; }

.start-row { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }
.start-row { flex-wrap: nowrap; }
.start-row .start-btn { flex: 1 1 auto; max-width: 320px; min-height: 60px; font-size: 1.125rem; }
.start-row .tap-btn { flex: 0 0 auto; min-width: 100px; min-height: 60px; font-size: 1rem; padding-left: 18px; padding-right: 18px; }
.stage .status { margin: var(--s-3) 0 0; }

.settings { display: grid; gap: var(--s-5); }
.settings h2 { margin: 0; }
.settings .bpm-field input { width: 8em; }
.unit-hint { margin-top: var(--s-2); }
.shortcuts { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.shortcuts li { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: var(--s-3); align-items: baseline; }

/* ------------------------------------------------------------------ learn / store */
.signup { display: flex; flex-direction: column; gap: var(--s-2); max-width: 480px; }
.signup .row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: flex-start; }
.signup input { flex: 1 1 220px; }
.book-cover {
  aspect-ratio: 2 / 3; max-width: 220px; width: 100%; border-radius: var(--r-sm);
  background: var(--indigo); color: var(--indigo-ink); box-shadow: var(--e-2);
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-4);
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2;
  border-top: 10px solid var(--saffron);
}
.book-cover span { font-family: var(--font-body); font-weight: 500; font-size: .875rem; margin-top: var(--s-2); }
.book { display: grid; gap: var(--s-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .book { grid-template-columns: 220px 1fr; } }

/* ------------------------------------------------------------------ round 6 components: accordion, photo frame */
/* Accordion: native <details class="acc"><summary>...</summary><div class="acc-body">...</div></details>, so it
   opens with Enter/Space and works without JavaScript. Outlined rows; a plus that turns into a minus; the open
   row stands on a hard brass offset shadow. A heading may sit inside <summary> (h2/h3) for heading navigation. */
.acc-group { display: grid; gap: var(--s-3); }
.acc { background: var(--surface); border: 1px solid var(--card-edge); border-radius: var(--r-md); transition: box-shadow var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out); }
.acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 48px; padding: var(--s-3) var(--s-4);
  cursor: pointer; list-style: none; border-radius: inherit; font-weight: 650;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary > :is(h2, h3, h4) { margin: 0; font-size: var(--step-1); }
.acc > summary::after {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
  color: var(--saffron-text); transition: transform var(--dur-3) var(--ease-out);
}
.acc[open] > summary::after { transform: rotate(180deg); background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat; }
.acc > summary:hover { background: var(--surface-2); }
.acc > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.acc[open] { box-shadow: 4px 4px 0 var(--brass); translate: -2px -2px; }
.acc-body { padding: 0 var(--s-4) var(--s-4); }
.acc-body > :last-child { margin-bottom: 0; }

/* Photo frame, reserved for the author's own photographs later (none are used yet): rounded corners, a brass
   outline frame offset behind the picture, and an optional saffron-to-forest duotone (.duotone). */
.photo-frame { position: relative; isolation: isolate; margin: 0 14px 14px 0; border-radius: var(--r-md); }
.sg-photo, figure:has(> .photo-frame) { margin: 0; }
.photo-frame::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border: 1.5px solid var(--brass); border-radius: var(--r-md); pointer-events: none; }
.photo-frame > img, .photo-frame > svg { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--e-2); }
.photo-frame.duotone { overflow: visible; }
.photo-frame.duotone > img { filter: grayscale(1) contrast(1.05); }
.photo-frame.duotone::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); background: linear-gradient(160deg, rgb(232 137 26 / .45), rgb(31 74 53 / .55)); mix-blend-mode: color; pointer-events: none; }
/* Markup: <figure><div class="photo-frame"><img alt="..."></div><figcaption>...</figcaption></figure> (the caption sits
   outside the frame, so the brass outline never runs behind its text). */
.photo-frame + figcaption { margin-top: var(--s-2); }

/* ------------------------------------------------------------------ forced colours (Windows contrast themes) */
/* Textures, ornaments, ribbons and doodles are decoration: they go; borders come back so every card, panel,
   button and badge keeps a visible edge in the system colours. */
@media (forced-colors: active) {
  .band-paper::before, .band-paper::after, .band-night::before, .band-night::after, .page-band::before, .page-band::after,
  .site-footer::before, .site-footer::after, .card::before, .card::after, .hero-stage::before, .hero-sky, .nav-panel::before, .staff-rule,
  .band-paper + .band-paper > .wrap::before, .eyebrow::before, .tool-group-head h2::before, .stage-label span:first-child::before,
  .doodle, .tt-link::before, .browse-group h3::before, .photo-frame::after { display: none !important; }
  .string-box { background: none; }
  .card, .tool-panel, .aside-card, .hero-stage, .stage, .acc, .badge, .note, .button, .round-btn { border: 1px solid CanvasText; }
  .acc[open] { box-shadow: none; translate: none; }
  .acc > summary::after { content: "+"; display: grid; place-items: center; background: none; border-color: CanvasText; color: CanvasText; font-weight: 700; line-height: 1; transform: none; }
  .acc[open] > summary::after { content: "\2212"; background: none; transform: none; }
  /* Checked chips and the switches are drawn with background colours, which forced colours replace with one colour,
     so on and off looked alike: draw them in system colours (wave 7 reviews; the pages' own scoped rules stay). */
  .chip input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .chip input:not(:checked) + span { forced-color-adjust: none; background: Canvas; color: CanvasText; border-color: CanvasText; }
  .switch input { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .switch input::after { background: CanvasText; }
  .switch input:checked { background: Highlight; border-color: Highlight; }
  .switch input:checked::after { background: HighlightText; }
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .card:hover, .tool-card:hover { transform: none; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
}
:root[data-motion="reduce"] .card:hover, :root[data-motion="reduce"] .tool-card:hover { transform: none; }
/* Round 4: the home page's motion graphics and drawn icons stay still. */
@media (prefers-reduced-motion: reduce) {
  .tool-art *, [data-draw] .motif-line { animation: none !important; }
}
:root[data-motion="reduce"] .tool-art *, :root[data-motion="reduce"] [data-draw] .motif-line { animation: none !important; }
/* Round 6: the plucked string, the open accordion's lift: off with Calm motion / reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .tool-tile::after, .soon-card::after, .card.lift::after { animation: none !important; opacity: 0; }
  .acc[open] { translate: none; }
}
:root[data-motion="reduce"] .tool-tile::after, :root[data-motion="reduce"] .soon-card::after, :root[data-motion="reduce"] .card.lift::after { animation: none !important; opacity: 0; }
:root[data-motion="reduce"] .acc[open] { translate: none; }

/* ------------------------------------------------------------------ wide-screen layout (round 2) */
.footer-base { border-top: 0; position: relative; }
.footer-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.page-band .note { background: var(--surface); }
.tool-band { padding: var(--s-4) 0 var(--s-5); }
.tool-band h1 { margin-bottom: var(--s-1); font-size: var(--step-3); }
.tool-band .crumb { margin-bottom: 0; }
.tool-band p.muted { max-width: 60em; }
@media (min-width: 1100px) { .tool-band { padding: var(--s-5) 0 var(--s-6); } }
.tool-band + .page-body { padding-top: var(--s-5); }
@media (min-width: 1100px) { .tool-band + .page-body { padding-top: var(--s-6); } }
.card.planned { background: transparent; border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
.below-tool { align-items: start; }
.below-tool h2 { margin-top: 0; }

/* Metronome on wide screens: instrument large on the left, controls on the right */
@media (min-width: 1280px) {
  .metro { grid-template-columns: minmax(0, 1.7fr) minmax(22rem, 1fr); gap: var(--s-6); align-items: stretch; }
  .stage { padding: var(--s-6) var(--s-7) var(--s-5); display: flex; flex-direction: column; justify-content: center; }
  .dial-wrap { width: clamp(280px, min(24vw, 40vh), 30rem); height: clamp(280px, min(24vw, 40vh), 30rem); }
  .stage .beats { margin-top: var(--s-4); }
  .beat .dot { width: 56px; height: 56px; }
  .beat { width: 60px; }
  .settings { padding: var(--s-6); }
}

.tool-head p:last-child, .page-band p:last-child { margin-bottom: 0; }
.page-band .note, .page-band .lead { max-width: 60rem; }

/* ------------------------------------------------------------------ shared tool-page pieces (round 3) */
.tool-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.help-btn { min-height: 44px; padding: 6px 16px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--line-strong); }
.help-q { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--indigo); color: var(--indigo-ink); font-weight: 800; font-size: .85rem; }

/* Segmented control: two or three native radios as one pill (arrow keys work natively). */
.segmented { display: inline-flex; max-width: 100%; border: 2px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-2); padding: 3px; gap: 2px; margin: 0 auto var(--s-4); }
.seg { position: relative; display: inline-flex; min-width: 0; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); font-weight: 650; line-height: 1.2; transition: background-color var(--t-fast), color var(--t-fast); }
.seg input:hover:not(:checked) + span { background: var(--surface); }
.seg input:checked + span { background: var(--indigo); color: var(--indigo-ink); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 420px) { .seg span { padding: 8px 10px; font-size: .95rem; } }

/* On phones the tool header is one compact row: the description is skipped and the help button is a round "?". */
@media (max-width: 639px) {
  .tool-band { padding: var(--s-2) 0 calc(var(--s-3) + 6px); }
  /* Round 6: a tighter staff under the compact phone header, so the title does not sit on its lines. */
  .page-band::after { height: 13px; background-image: repeating-linear-gradient(var(--staff-ink) 0 1px, transparent 1px 3px); background-size: 100% 13px; }
  .tool-band h1 { font-size: 1.75rem; margin-top: 0; }
  .tool-head > div > p.muted { display: none; }
  .tool-head { flex-wrap: nowrap; align-items: center; }
  .help-btn { flex: none; width: 44px; padding: 0; border-radius: 50%; font-size: 0; gap: 0; margin-bottom: 0; }
  .help-btn .help-q { width: 28px; height: 28px; font-size: 1rem; }
  .tool-band + .page-body { padding-top: var(--s-3); }
}

/* ------------------------------------------------------------------ shortcuts sheet and tour (guide.js) */
.guide-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--s-4); background: rgb(18 19 31 / .55); overflow-y: auto; }
.guide-sheet { width: 100%; max-width: 40rem; max-height: calc(100vh - 2 * var(--s-4)); overflow-y: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--e-2); padding: var(--s-5); }
.guide-sheet h2 { margin: 0; font-size: var(--step-2); }
.guide-sheet h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--step-1); }
.guide-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.guide-x { font-size: 1.75rem; line-height: 1; }
.guide-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-4); }
:root.guide-open { overflow: hidden; }

.tour-target { outline: 3px dashed var(--saffron-text); outline-offset: 6px; border-radius: var(--r-md); }
.tour-card { position: absolute; z-index: 55; width: min(21rem, calc(100vw - 24px)); background: var(--surface); color: var(--text); border: 2px solid var(--saffron-edge); border-radius: var(--r-md); box-shadow: var(--e-2); padding: var(--s-4); text-align: left; }
.tour-card p { margin: 0; }
.tour-count { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--saffron-text); }
.tour-title { font-family: var(--font-display); font-weight: 650; font-size: var(--step-1); line-height: 1.2; margin-top: var(--s-1) !important; }
.tour-text { margin-top: var(--s-2) !important; color: var(--text); }
.tour-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3); }
.tour-actions button { min-height: 44px; padding: 6px 18px; }
@media print { .tour-card, .guide-overlay { display: none !important; } }

/* ===== Forest and gold (14 Nov 2026): the home banner picture and the textures of the dark bands ===== */
.forest-banner { margin: 0; background: #0A140E; color: #F4ECD6; border-bottom: 1px solid var(--brass); }
@media print { .forest-banner { display: none; } }
.forest-banner picture { display: block; }
/* The WHOLE picture at every size (14 Nov 2026: the author saw the bottom cut off in Chrome when it was trimmed to 62vh).
   It runs edge to edge up to its own width (1774 px); on wider screens it stays that wide and is centred on the same dark colour. */
.forest-banner picture { max-width: 1774px; margin-inline: auto; }
.forest-banner img { display: block; width: 100%; height: auto; }