/* ==== 00-tokens.css ==== */
/* ==========================================================================
   00-tokens.css — design tokens (DESIGN-SPEC §3)
   Light is the default (:root). Dark mirrors the old mechanism:
   html[data-theme="dark"], set by the early head script / MG.theme.

   CONTRAST AUDIT (WCAG 2.x relative luminance, computed with
   notes-side script tools; ratios are foreground : background)
   --------------------------------------------------------------------------
   LIGHT
     ink        #0B0C0B on bg #FFFFFF ........ 19.60   on bg-2 #F4F5F3 .. 17.92
                on surface-2 #E9ECE9 ......... 16.46   on sage-tint ..... 14.93
     ink-2      #2A2D2B on bg ................ 13.92   on surface ....... 12.73
                on surface-2 ................. 11.69   on sage-tint ..... 10.60
     muted      #6B6F72 on bg ................  5.07   on bg-2/surface ..  4.64
                on surface-2 .................  4.26 FAIL -> use muted-2 (.tone-2)
                on sage-tint .................  3.86 FAIL -> use muted-2 / ink-2
                on sage-pale .................  4.45 FAIL -> use muted-2 (.tone-2)
     muted-2    #5E6265 on bg ................  6.16   on bg-2 ..........  5.63
                on surface-2 .................  5.17   on sage-tint .....  4.69
                on sage-pale .................  5.41
     sage-ink   #FFFFFF on sage #6E766F ......  4.68  (only PURE white passes;
                80% white on sage = 3.66 FAIL, so all on-hero text is 100% white)
     panel-ink  #FFFFFF on panel #3F4541 .....  9.82
     panel-muted #C9CECA on panel ............  6.15  (>= 4.5, kept as specified)
     inverse    #FFFFFF on ink (btn--primary)  19.60
     focus      #0B0C0B on bg ................ 19.60   focus-on-dark #FFF on sage 4.68
     games      #FFFFFF on #0E100F ........... 19.10   #C9CECA on #0E100F 11.97
     input underline uses --muted (5.07, UI >= 3:1); --line-strong is 1.60 and is
     decorative only (never the sole boundary of a control).
     GLASS BUTTON (spec: rgba(255,255,255,.18) + white text on the sage hero):
       white on that blend (#888F89) = 3.31 FAIL, hover .28 = 2.79 FAIL.
       Replaced with "smoked glass" rgba(14,16,15,.22) -> 6.47 (hover .34 -> 7.89),
       on the dark panel 11.77. Edge highlight is a decorative inset ring.
     legacy category accents (search palette chips) on bg:
       c-blue 7.01 · c-teal 6.15 · c-green 6.16 · c-gold 6.03 · c-orange 6.75
       c-red 7.42 · c-purple 7.60 · c-pink 7.33 (c-gold on surface 5.51)
   DARK
     ink        #F1F2EF on bg #0E100F ........ 16.99   bg-2 16.07  surface 15.61
                on surface-2 #1F2320 ......... 14.16   on sage-tint ..... 12.00
     ink-2      #D7DAD6 on bg 13.54 · surface 12.43 · surface-2 11.28 · sage-tint 9.56
     muted      #A3A8A4 on bg 7.91 · bg-2 7.48 · surface 7.26 · surface-2 6.59
                on sage-tint 5.58
     muted-2    #A9AEAA on bg 8.48 · bg-2 8.01 · surface-2 7.06
     sage-ink   #F1F2EF on sage #3B423D ......  9.19  (smoked glass 10.83)
     panel-ink  #F1F2EF on panel #1C201D ..... 14.67   panel-muted #B4B9B5 8.28
     inverse    #0E100F on ink ............... 16.99
     accents on bg: blue 9.09 · teal 9.86 · green 9.93 · gold 10.32 · orange 8.96
                    red 8.47 · purple 8.84 · pink 8.95 (blue on surface-2 7.58)
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* surfaces */
  --bg: #FFFFFF;
  --bg-2: #F4F5F3;
  --surface: #F4F5F3;
  --surface-2: #E9ECE9;

  /* text */
  --ink: #0B0C0B;
  --ink-2: #2A2D2B;
  --muted: #6B6F72;
  --muted-2: #5E6265;
  --ink-inverse: #FFFFFF;

  /* lines */
  --line: #E2E5E2;
  --line-strong: #C9CEC9;

  /* sage system */
  --sage: #6E766F;
  --sage-ink: #FFFFFF;
  --sage-tint: #DDE2DD;
  --sage-pale: #EEF1EE;

  /* dark inset panel (custo "app" panel) */
  --panel: #3F4541;
  --panel-ink: #FFFFFF;
  --panel-muted: #C9CECA;

  /* games band: identical in both themes */
  --games-bg: #0E100F;
  --games-ink: #FFFFFF;
  --games-muted: #C9CECA;

  /* focus */
  --focus: #0B0C0B;
  --focus-on-dark: #FFFFFF;
  --ring: var(--focus);

  /* glass / frost / veils */
  --glass-bg: rgba(14, 16, 15, .22);
  --glass-bg-hover: rgba(14, 16, 15, .34);
  --glass-edge: rgba(255, 255, 255, .30);
  --frost: color-mix(in srgb, var(--bg) 78%, transparent);
  --backdrop: rgba(14, 16, 15, .55);
  --veil: color-mix(in srgb, var(--bg) 82%, transparent);

  /* shadows */
  --shadow-hairline: 0 0 0 .5px rgba(0,0,0,.08), 0 1px 1px -1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.04);
  --shadow-soft: 0 1px 2px rgba(11,12,11,.06), 0 10px 30px -8px rgba(11,12,11,.16);
  --shadow-lift: 0 2px 6px rgba(11,12,11,.08), 0 30px 70px -16px rgba(11,12,11,.32);

  /* legacy category accents (search palette chips, data.color fallbacks).
     Desaturated, sage-family hues; each passes 4.5:1 as text on --bg. */
  --c-blue: #3E5C76;
  --c-teal: #2F6B66;
  --c-green: #3F6B48;
  --c-gold: #7A5F1E;
  --c-orange: #8A4B22;
  --c-red: #8E3B37;
  --c-purple: #5E4B7A;
  --c-pink: #83405F;

  /* theme-color meta values (kept in sync by MG.theme) */
  --theme-color: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0E100F;
  --bg-2: #141715;
  --surface: #171A18;
  --surface-2: #1F2320;

  --ink: #F1F2EF;
  --ink-2: #D7DAD6;
  --muted: #A3A8A4;
  --muted-2: #A9AEAA;
  --ink-inverse: #0E100F;

  --line: #262A27;
  --line-strong: #353A36;

  --sage: #3B423D;
  --sage-ink: #F1F2EF;
  --sage-tint: #2A302C;
  --sage-pale: #1B1F1C;

  --panel: #1C201D;
  --panel-ink: #F1F2EF;
  --panel-muted: #B4B9B5;

  --focus: #F1F2EF;
  --focus-on-dark: #FFFFFF;

  --glass-bg: rgba(14, 16, 15, .22);
  --glass-bg-hover: rgba(14, 16, 15, .38);
  --glass-edge: rgba(255, 255, 255, .18);
  --backdrop: rgba(0, 0, 0, .62);

  --shadow-hairline: 0 0 0 .5px rgba(255,255,255,.10), 0 1px 1px -1px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.35);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -8px rgba(0,0,0,.6);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 30px 70px -16px rgba(0,0,0,.8);

  --c-blue: #9DB6CC;
  --c-teal: #8CC5BE;
  --c-green: #9CC5A2;
  --c-gold: #D6BC7E;
  --c-orange: #E0A57F;
  --c-red: #E39A94;
  --c-purple: #BBA8DA;
  --c-pink: #DDA0BD;

  --theme-color: #0E100F;
}

/* Theme-independent tokens */
:root {
  /* type families (Google Fonts: Inter Tight 400/500/600, JetBrains Mono 400/500) */
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale (custo values at 1440, fluid to 375) */
  --t-wordmark: clamp(4.25rem, 19.5vw, 19rem);
  --t-h1: clamp(2.25rem, 1.35rem + 3vw, 3.5625rem);   /* 57px */
  --t-h2: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem);   /* 38px */
  --t-h3: clamp(1.125rem, 1.02rem + .35vw, 1.25rem);  /* 20px */
  --t-lead: clamp(1.25rem, 1.05rem + .7vw, 1.75rem);  /* 28px */
  --t-body: clamp(1rem, .96rem + .2vw, 1.125rem);     /* 18px */
  --t-text: clamp(1.0625rem, .98rem + .35vw, 1.25rem);/* 20px short blocks */
  --t-small: .9375rem;
  --t-micro: .75rem;

  --lh-wordmark: .8;
  --lh-h1: 1.047;
  --lh-h2: 1.18;
  --lh-h3: 1.43;
  --lh-lead: 1.3;
  --lh-body: 1.55;
  --lh-text: 1.43;

  --ls-wordmark: -.045em;
  --ls-h1: -.02em;
  --ls-h2: -.015em;
  --ls-micro: .06em;

  /* shape */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(.77, 0, .175, 1);      /* custo "IO" easeInOutQuart: panels, menu, sticky steps */
  --ease-out: cubic-bezier(.165, .84, .44, 1); /* custo "EO" easeOutQuart: hovers, reveals, clip-paths, image scale */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: .25s;
  --dur-2: .6s;
  --dur-3: 1.2s;

  /* layout */
  --gutter: clamp(20px, 5.28vw, 76px);
  --gap: clamp(12px, 1.25vw, 18px);
  --section-y: clamp(96px, 11vw, 182px);
  --header-h: clamp(72px, 7vw, 104px);
  --container-max: 1920px;
  --tap: 44px;

  /* z-index map (DESIGN-SPEC §6) */
  --z-base: 1;
  --z-rail: 40;
  --z-header: 50;
  --z-menu: 60;
  --z-inspector: 70;
  --z-overlay: 80;
  --z-chat: 90;
  --z-fab: 91;
  --z-toast: 95;
  --z-skip: 100;
}

/* Reduced transparency: frosted / glass surfaces become solid. */
@media (prefers-reduced-transparency: reduce) {
  :root,
  :root[data-theme="light"] {
    --frost: #FFFFFF;
    --glass-bg: #545B55;
    --glass-bg-hover: #474D48;
    --backdrop: rgba(14, 16, 15, .86);
    --veil: #FFFFFF;
  }
  :root[data-theme="dark"] {
    --frost: #0E100F;
    --glass-bg: #2C322E;
    --glass-bg-hover: #242925;
    --backdrop: rgba(0, 0, 0, .88);
    --veil: #0E100F;
  }
}

/* --------------------------------------------------------------------------
   Appended by F1 (CSS system). Theme-constant "on image" pair for small
   labels that sit on screenshots/photos (.badge--on-image).
   #0B0C0B on the 92% white blend: >= 16.8:1 even over a pure-black pixel.
   -------------------------------------------------------------------------- */
:root {
  --on-image-bg: rgba(255, 255, 255, .92);
  --on-image-ink: #0B0C0B;
}

/* ==== 01-base.css ==== */
/* ==========================================================================
   01-base.css  (F1 CSS system)
   Reset, document, surfaces, typography, layout primitives, utilities,
   reduced-motion / reduced-transparency / contrast / print safety nets.
   Depends on 00-tokens.css. Colors come from tokens only (print excepted).

   Breakpoints (literal px, mobile-first):
     sm  < 768     6-column grid, stacked layouts
     md  768-1023  12-column grid, helpers .col-md-*
     lg  >= 1024   12-column grid, helpers .col-span-* / .col-start-*
     xl  >= 1180   section rail + full header nav (F2)
   API notes: notes/api/css.md
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page token snapshot + icon masks
   The --page-* values are resolved on :root (current theme) and inherited,
   so [data-surface="page"] can restore them inside a dark/sage surface.
   -------------------------------------------------------------------------- */
:root {
  --page-bg: var(--bg);
  --page-bg-2: var(--bg-2);
  --page-surface: var(--surface);
  --page-surface-2: var(--surface-2);
  --page-ink: var(--ink);
  --page-ink-2: var(--ink-2);
  --page-muted: var(--muted);
  --page-muted-2: var(--muted-2);
  --page-ink-inverse: var(--ink-inverse);
  --page-line: var(--line);
  --page-line-strong: var(--line-strong);
  --page-sage-tint: var(--sage-tint);
  --page-sage-pale: var(--sage-pale);
  --page-shadow-hairline: var(--shadow-hairline);
  --page-ring: var(--focus);

  /* Decorative glyphs as masks (painted with currentColor). The arrow glyphs
     are not in the Google Fonts "latin" subset of Inter Tight, so they are
     drawn as SVG for a consistent stroke. The stroke color is mask alpha only. */
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h16.5M14 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E");
  --icon-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 17.5 17.5 6.5M8.5 6.5h9v9'/%3E%3C/svg%3E");
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5V20M6 14l6 6 6-6'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.2v15.6L20 12z' fill='black'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  /* One offset for every in-page jump (anchors, scrollIntoView, focus):
     keeps targets and keyboard focus out from under the fixed header
     (WCAG 2.4.11). See notes/api/css.md "Scroll offset". */
  scroll-padding-top: var(--header-h);
  /* SPEC-ADDENDUM C7: focused/scrolled-to targets also clear the chat FAB
     (56px circle / pill, bottom-right) and the toast. */
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  font-kerning: normal;
  /* No faux bold; faux italic stays allowed for <em> (no italic face is loaded). */
  font-synthesis: style;
  /* clip (not hidden): stops horizontal page scroll without creating a
     scroll container, so position: sticky keeps working. */
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  /* html keeps overflow: visible, so this propagates to the viewport and
     body never becomes a scroll container (sticky still works). */
  body {
    overflow-x: hidden;
  }
}

img,
picture,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

img {
  font-style: italic; /* styles alt text if an image fails */
}

iframe {
  border: 0;
}

svg {
  flex-shrink: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

a,
button,
summary,
[role="button"],
[role="tab"] {
  -webkit-tap-highlight-color: transparent;
}

summary {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul,
ol {
  padding-left: 1.25em;
}

/* Lists that carry a class are layout lists: no markers, no indent.
   (Add role="list" if Safari/VoiceOver must still announce it as a list.) */
:where(ul[class], ol[class]) {
  padding: 0;
  list-style: none;
}

dd {
  margin: 0;
}

hr,
.hairline {
  display: block;
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--line);
}

[hidden] {
  display: none !important;
}


/* --------------------------------------------------------------------------
   3. Surfaces
   Put data-surface on any block that changes the background. It paints
   itself (background + text) and re-maps the tokens, so every component
   inside adapts (buttons, chips, link arrows, lists, focus rings).
     dark   = custo dark inset panel (--panel)      e.g. AI Build panel
     sage   = hero / menu panel (--sage); all text is pure white (4.68:1)
     games  = the always-dark games band (#0E100F)
     page   = restore the theme's page tokens inside one of the above
   .on-dark only swaps the focus ring (for dark images / glass contexts).
   Contrast inside dark: muted text only on --bg / --surface (not --surface-2).
   -------------------------------------------------------------------------- */
[data-surface] {
  background-color: var(--bg);
  color: var(--ink);
}

[data-surface="dark"],
.panel-inset {
  --bg: var(--panel);
  --bg-2: color-mix(in srgb, var(--panel-ink) 5%, var(--panel));
  --surface: color-mix(in srgb, var(--panel-ink) 8%, var(--panel));
  --surface-2: color-mix(in srgb, var(--panel-ink) 13%, var(--panel));
  --sage-tint: color-mix(in srgb, var(--panel-ink) 10%, var(--panel));
  --sage-pale: color-mix(in srgb, var(--panel-ink) 6%, var(--panel));
  --ink: var(--panel-ink);
  --ink-2: var(--panel-ink);
  --muted: var(--panel-muted);
  --muted-2: var(--panel-muted);
  --ink-inverse: var(--panel);
  --line: color-mix(in srgb, var(--panel-ink) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--panel-ink) 34%, transparent);
  --shadow-hairline: 0 0 0 1px color-mix(in srgb, var(--panel-ink) 22%, transparent);
  --ring: var(--focus-on-dark);
  color-scheme: dark;
}

[data-surface="sage"] {
  --bg: var(--sage);
  --bg-2: var(--glass-bg);
  --surface: var(--glass-bg);
  --surface-2: var(--glass-bg-hover);
  --sage-tint: var(--glass-bg);
  --sage-pale: var(--glass-bg);
  --ink: var(--sage-ink);
  --ink-2: var(--sage-ink);
  --muted: var(--sage-ink);
  --muted-2: var(--sage-ink);
  --ink-inverse: var(--panel);
  --line: color-mix(in srgb, var(--sage-ink) 40%, transparent);
  --line-strong: color-mix(in srgb, var(--sage-ink) 60%, transparent);
  --shadow-hairline: inset 0 0 0 1px var(--glass-edge);
  --ring: var(--focus-on-dark);
  color-scheme: dark;
}

[data-surface="games"] {
  --bg: var(--games-bg);
  --bg-2: color-mix(in srgb, var(--games-ink) 4%, var(--games-bg));
  --surface: color-mix(in srgb, var(--games-ink) 7%, var(--games-bg));
  --surface-2: color-mix(in srgb, var(--games-ink) 12%, var(--games-bg));
  --sage-tint: color-mix(in srgb, var(--games-ink) 8%, var(--games-bg));
  --sage-pale: color-mix(in srgb, var(--games-ink) 5%, var(--games-bg));
  --ink: var(--games-ink);
  --ink-2: var(--games-ink);
  --muted: var(--games-muted);
  --muted-2: var(--games-muted);
  --ink-inverse: var(--games-bg);
  --line: color-mix(in srgb, var(--games-ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--games-ink) 30%, transparent);
  --shadow-hairline: 0 0 0 1px color-mix(in srgb, var(--games-ink) 20%, transparent);
  --ring: var(--focus-on-dark);
  color-scheme: dark;
}

[data-surface="page"] {
  --bg: var(--page-bg);
  --bg-2: var(--page-bg-2);
  --surface: var(--page-surface);
  --surface-2: var(--page-surface-2);
  --sage-tint: var(--page-sage-tint);
  --sage-pale: var(--page-sage-pale);
  --ink: var(--page-ink);
  --ink-2: var(--page-ink-2);
  --muted: var(--page-muted);
  --muted-2: var(--page-muted-2);
  --ink-inverse: var(--page-ink-inverse);
  --line: var(--page-line);
  --line-strong: var(--page-line-strong);
  --shadow-hairline: var(--page-shadow-hairline);
  --ring: var(--page-ring);
  color-scheme: light;
}

:root[data-theme="dark"] [data-surface="page"] {
  color-scheme: dark;
}

.on-dark {
  --ring: var(--focus-on-dark);
}


/* --------------------------------------------------------------------------
   4. Selection + focus
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--sage);
  color: var(--sage-ink);
}

:is([data-surface="dark"], [data-surface="sage"], [data-surface="games"], .panel-inset) ::selection {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Programmatic focus targets (main, dialog shells, headings) need no ring. */
:is(main, section, article, h1, h2, h3, h4, [role="dialog"], [role="region"], [role="tabpanel"]:not([tabindex="0"]))[tabindex="-1"]:focus {
  outline: none;
}


/* --------------------------------------------------------------------------
   5. Typography
   Inter Tight: display 500, body 400, 600 only for rare emphasis.
   Headings are ink; long copy is --muted inside .prose / .t-text.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
}

h4 {
  font-size: var(--t-body);
  line-height: 1.4;
  letter-spacing: 0;
}

h5,
h6 {
  font-size: var(--t-small);
  line-height: 1.4;
  letter-spacing: 0;
}

p,
li,
dd,
blockquote,
figcaption {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

b,
strong {
  font-weight: 600;
}

small {
  font-size: var(--t-small);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: .9em;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: .2em;
}

sub,
sup {
  position: relative;
  font-size: 70%;
  line-height: 0;
  vertical-align: baseline;
}

sup { top: -.5em; }
sub { bottom: -.25em; }

/* Type classes (sizes only; color is inherited unless noted) */
.t-wordmark {
  font-family: var(--font-sans);
  font-size: var(--t-wordmark);
  font-weight: 500;
  line-height: var(--lh-wordmark);
  letter-spacing: var(--ls-wordmark);
  white-space: nowrap;
}

.t-h1 {
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-wrap: balance;
}

.t-h2 {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}

.t-h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: 0;
}

.t-lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
  letter-spacing: -.005em;
  text-wrap: pretty;
}

/* custo t-text: short blocks, 20px / 1.43, gray */
.t-text {
  font-size: var(--t-text);
  font-weight: 400;
  line-height: var(--lh-text);
  color: var(--muted);
  text-wrap: pretty;
}

.t-body {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

.t-small {
  font-size: var(--t-small);
  line-height: 1.5;
}

.t-micro {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: normal;
  letter-spacing: 0;
}

/* Tone utilities (see the contrast audit in 00-tokens.css) */
.tone-ink { color: var(--ink); }
.tone-ink-2 { color: var(--ink-2); }
.tone-muted { color: var(--muted); }
.tone-2 { color: var(--muted-2); }

/* Rich text */
.prose {
  color: var(--muted);
}

.prose > * + * {
  margin-top: 1.2em;
}

.prose > :is(h2, h3, h4) {
  margin-top: 2em;
}

.prose > :is(h2, h3, h4) + * {
  margin-top: .6em;
}

.prose :is(h2, h3, h4, strong, b) {
  color: var(--ink);
}

.prose :is(ul, ol) {
  padding-left: 1.2em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: .5em;
}

.prose li::marker {
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   6. Links
   Component links (any class) style themselves. Unclassed links inside
   running text are underlined so they are not identified by color alone.
   -------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

:where(p, li, dd, td, figcaption, blockquote, .prose, .t-text, .t-body, .t-lead, .t-small) a:not([class]) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}

:where(p, li, dd, td, figcaption, blockquote, .prose, .t-text, .t-body, .t-lead, .t-small) a:not([class]):hover {
  text-decoration-color: currentColor;
}

.prose a:not([class]) {
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   7. Accessibility helpers
   -------------------------------------------------------------------------- */
.sr-only,
.visually-hidden,
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background-color: var(--page-ink);
  color: var(--page-ink-inverse);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--dur-1) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--page-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--page-bg), var(--shadow-lift);
}


/* --------------------------------------------------------------------------
   8. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 6 columns below 768, 12 from 768. Children span the full row unless a
   column helper says otherwise (lg: .col-span-N/.col-start-N;
   md: .col-md-N/.col-md-start-N; sm: .col-sm-N of 6). */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--grid-row-gap, clamp(28px, 4vw, 56px));
}

.grid-12 > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.grid-12--middle { align-items: center; }
.grid-12--bottom { align-items: end; }
.grid-12--top { align-items: start; }
.grid-12--flush { row-gap: 0; }

@media (min-width: 768px) {
  .grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* sm helpers (of 6) */
@media (max-width: 767.98px) {
  .col-sm-1 { grid-column: auto / span 1; }
  .col-sm-2 { grid-column: auto / span 2; }
  .col-sm-3 { grid-column: auto / span 3; }
  .col-sm-4 { grid-column: auto / span 4; }
  .col-sm-5 { grid-column: auto / span 5; }
  .col-sm-6 { grid-column: auto / span 6; }
  .order-first-sm { order: -1; }
  .hide-sm { display: none !important; }
}

/* md helpers (of 12) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .col-md-1 { grid-column: auto / span 1; }
  .col-md-2 { grid-column: auto / span 2; }
  .col-md-3 { grid-column: auto / span 3; }
  .col-md-4 { grid-column: auto / span 4; }
  .col-md-5 { grid-column: auto / span 5; }
  .col-md-6 { grid-column: auto / span 6; }
  .col-md-7 { grid-column: auto / span 7; }
  .col-md-8 { grid-column: auto / span 8; }
  .col-md-9 { grid-column: auto / span 9; }
  .col-md-10 { grid-column: auto / span 10; }
  .col-md-11 { grid-column: auto / span 11; }
  .col-md-12 { grid-column: auto / span 12; }
  .col-md-start-1 { grid-column-start: 1; }
  .col-md-start-2 { grid-column-start: 2; }
  .col-md-start-3 { grid-column-start: 3; }
  .col-md-start-4 { grid-column-start: 4; }
  .col-md-start-5 { grid-column-start: 5; }
  .col-md-start-6 { grid-column-start: 6; }
  .col-md-start-7 { grid-column-start: 7; }
  .col-md-start-8 { grid-column-start: 8; }
  .col-md-start-9 { grid-column-start: 9; }
  .col-md-start-10 { grid-column-start: 10; }
  .col-md-start-11 { grid-column-start: 11; }
  .col-md-start-12 { grid-column-start: 12; }
}

/* lg helpers (of 12). Span uses the shorthand (start = auto), so a
   .col-start-N declared after it can set the start line. */
@media (min-width: 1024px) {
  .col-span-1 { grid-column: auto / span 1; }
  .col-span-2 { grid-column: auto / span 2; }
  .col-span-3 { grid-column: auto / span 3; }
  .col-span-4 { grid-column: auto / span 4; }
  .col-span-5 { grid-column: auto / span 5; }
  .col-span-6 { grid-column: auto / span 6; }
  .col-span-7 { grid-column: auto / span 7; }
  .col-span-8 { grid-column: auto / span 8; }
  .col-span-9 { grid-column: auto / span 9; }
  .col-span-10 { grid-column: auto / span 10; }
  .col-span-11 { grid-column: auto / span 11; }
  .col-span-12 { grid-column: auto / span 12; }
  .col-start-1 { grid-column-start: 1; }
  .col-start-2 { grid-column-start: 2; }
  .col-start-3 { grid-column-start: 3; }
  .col-start-4 { grid-column-start: 4; }
  .col-start-5 { grid-column-start: 5; }
  .col-start-6 { grid-column-start: 6; }
  .col-start-7 { grid-column-start: 7; }
  .col-start-8 { grid-column-start: 8; }
  .col-start-9 { grid-column-start: 9; }
  .col-start-10 { grid-column-start: 10; }
  .col-start-11 { grid-column-start: 11; }
  .col-start-12 { grid-column-start: 12; }
  .hide-lg { display: none !important; }

  /* Sticky column (Approach image, AI Build intro, Industries panel).
     Doubled class so the utility beats component position rules (.plate). */
  .sticky-lg.sticky-lg {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    align-self: start;
  }
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* --bg-2 equals --surface in light, so cards/chips inside a tinted section
   step up to the page color (light) or to --surface-2 (dark). */
.section--tint {
  --muted: var(--muted-2); /* muted fails 4.5:1 on some tints; muted-2 passes */
  --surface: var(--page-bg);
  --surface-2: var(--page-surface-2);
  background-color: var(--bg-2);
}

:root[data-theme="dark"] .section--tint {
  --surface: var(--page-surface-2);
  --surface-2: color-mix(in srgb, var(--page-ink) 12%, var(--page-bg-2));
}

.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Stack rhythm: vertical spacing between direct children */
.stack > * + * {
  margin-top: var(--stack, 1em);
}

.measure {
  max-width: 34em;
}


/* --------------------------------------------------------------------------
   9. Small utilities
   -------------------------------------------------------------------------- */
.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
}

.u-nowrap { white-space: nowrap; }
.u-balance { text-wrap: balance; }
.u-tabular { font-variant-numeric: tabular-nums; }

/* Apple-style frosted surface (header after the hero, sheets) */
.u-frost {
  background-color: var(--frost);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .u-frost {
    background-color: var(--bg);
  }
}


/* --------------------------------------------------------------------------
   10. Preference safety nets
   -------------------------------------------------------------------------- */

/* Reduced motion: every animation and transition becomes instant; interactive
   controls keep short color/focus transitions (color change is not motion). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  :is(a, button, input, select, textarea, summary, [role="button"], [role="tab"], .btn, .chip, .icon-btn, .link-arrow, .link-line) {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, box-shadow, opacity !important;
    transition-duration: var(--dur-1) !important;
    transition-timing-function: var(--ease-out) !important;
  }

  [data-parallax],
  [data-magnetic] {
    transform: none !important;
    translate: none !important;
  }
}

/* Reduced transparency: tokens already turn glass/frost solid; drop blur. */
@media (prefers-reduced-transparency: reduce) {
  .u-frost,
  .btn--glass,
  .icon-btn--glass,
  .badge--on-image {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* More contrast: gray copy becomes ink-2, hairlines get stronger. */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme] {
    --muted: var(--ink-2);
    --muted-2: var(--ink-2);
    --line: var(--line-strong);
  }
}

/* Forced colors (Windows High Contrast) */
@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }

  .skip-link,
  [data-surface] {
    border: 1px solid CanvasText;
  }
}


/* --------------------------------------------------------------------------
   11. Print
   Paper is always light; hardcoded black/white here only.
   -------------------------------------------------------------------------- */
@media print {
  :root,
  :root[data-theme] {
    --bg: #fff;
    --bg-2: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --ink: #000;
    --ink-2: #000;
    --muted: #333;
    --muted-2: #333;
    --line: #bbb;
    --line-strong: #888;
    --sage-tint: #eee;
    color-scheme: light;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    overflow: visible;
  }

  [data-surface] {
    --bg: #fff;
    --ink: #000;
    --ink-2: #000;
    --muted: #333;
    --muted-2: #333;
    background: #fff !important;
    color: #000 !important;
  }

  .skip-link,
  .site-header,
  .section-rail,
  .menu-panel,
  .overlay,
  .toast,
  .scroll-progress,
  .marquee__toggle,
  .marquee__track[aria-hidden="true"],
  #cwFab,
  #cwTeaser,
  #cwWidget,
  #inspector,
  video,
  iframe {
    display: none !important;
  }

  .section {
    padding-block: 24pt;
  }

  h1, h2, h3, h4 {
    break-after: avoid;
  }

  .plate,
  .card-surface,
  .tile,
  .stat,
  .acc__item,
  .num-list__item,
  figure,
  img {
    break-inside: avoid;
  }

  .prose a[href^="http"]::after,
  p a[href^="http"]:not([class])::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    word-break: break-all;
  }
}

/* ==== 02-components.css ==== */
/* ==========================================================================
   02-components.css  (F1 CSS system)
   Shared components (DESIGN-SPEC section 5) + reveal/motion hooks
   (FOUNDATION-CONTRACT). Every color is a token, so everything works in
   both themes and inside [data-surface] blocks (see 01-base.css section 3).
   Motion: custo EO = --ease-out (hovers, reveals, clips, image scale),
           custo IO = --ease (panels, accordions, large state changes).
   Hover effects run only on hover-capable devices; keyboard focus gets the
   same treatment through :focus-visible.
   API notes + markup: notes/api/css.md
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Text roll (custo nav/button label roll)
   <span class="roll"><span class="roll__a">Label</span><span class="roll__b" aria-hidden="true">Label</span></span>
   Structural selectors, so the class names on the two spans are optional.
   Trigger: hover/focus-visible of the closest a / button / .roll-host, or a
   held active state (.is-active / aria-current) on a link.
   -------------------------------------------------------------------------- */
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
}

.roll > :first-child,
.roll > :nth-child(2) {
  display: block;
  transition:
    transform .6s var(--ease-out),
    opacity .6s var(--ease-out);
}

.roll > :nth-child(2) {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  user-select: none;
}

@media (hover: hover) {
  :is(a, button, label, .roll-host):hover .roll > :first-child {
    opacity: 0;
    transform: translateY(-100%);
  }

  :is(a, button, label, .roll-host):hover .roll > :nth-child(2) {
    opacity: 1;
    transform: none;
  }
}

:is(a, button, .roll-host):focus-visible .roll > :first-child,
a:is(.is-active, [aria-current="true"], [aria-current="page"]) .roll > :first-child {
  opacity: 0;
  transform: translateY(-100%);
}

:is(a, button, .roll-host):focus-visible .roll > :nth-child(2),
a:is(.is-active, [aria-current="true"], [aria-current="page"]) .roll > :nth-child(2) {
  opacity: 1;
  transform: none;
}


/* --------------------------------------------------------------------------
   2. Buttons
   .btn                 pill, >= 44px, --t-h3, weight 500
   .btn--primary        ink fill, inverse text
   .btn--outline        1px currentColor ring, fills with ink on hover
   .btn--glass          smoked glass on the sage hero / dark panel
                        (--glass-bg tokens: white text 6.47:1; the spec's
                        rgba(255,255,255,.18) fails at 3.31:1)
   .btn--sm             header size (44px tall, 15px)
   .btn--on-dark        re-maps ink/inverse for dark/image backgrounds
   .btn--block          full width
   .btn-pair            Apple CTA pair (wraps, 12px gap)
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--tap);
  padding: 14px 28px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  translate: var(--mag, none);
  transition:
    background-color .6s var(--ease-out),
    color .6s var(--ease-out),
    border-color .6s var(--ease-out),
    box-shadow .6s var(--ease-out),
    translate .6s var(--ease-out),
    scale .25s var(--ease-out);
}

@media (min-width: 1024px) {
  .btn {
    padding: 17px 41px 18px;
  }
}

.btn:active {
  scale: .98;
}

.btn > svg,
.btn__icon {
  flex: none;
  width: 1em;
  height: 1em;
}

.btn:is(:disabled, [aria-disabled="true"]) {
  opacity: .5;
  cursor: not-allowed;
  scale: none;
}

/* primary */
.btn--primary {
  --btn-bg: var(--ink);
  --btn-fg: var(--ink-inverse);
}

/* outline */
.btn--outline {
  --btn-fg: var(--ink);
  --btn-bd: currentColor;
}

/* glass */
.btn--glass {
  --btn-bg: var(--glass-bg);
  --btn-fg: var(--sage-ink);
  --ring: var(--focus-on-dark);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

@media (hover: hover) {
  .btn--primary:hover:not(:disabled, [aria-disabled="true"]) {
    --btn-bg: color-mix(in srgb, var(--ink) 82%, var(--bg));
  }

  .btn--outline:hover:not(:disabled, [aria-disabled="true"]) {
    --btn-bg: var(--ink);
    --btn-fg: var(--ink-inverse);
    --btn-bd: var(--ink);
  }

  .btn--glass:hover:not(:disabled, [aria-disabled="true"]) {
    --btn-bg: var(--glass-bg-hover);
  }
}

.btn--primary:focus-visible {
  --btn-bg: color-mix(in srgb, var(--ink) 82%, var(--bg));
}

.btn--outline:focus-visible {
  --btn-bg: var(--ink);
  --btn-fg: var(--ink-inverse);
  --btn-bd: var(--ink);
}

.btn--glass:focus-visible {
  --btn-bg: var(--glass-bg-hover);
}

/* on-dark: local token re-map, composes with every variant */
.btn--on-dark {
  --ink: var(--panel-ink);
  --ink-inverse: var(--panel);
  --bg: var(--panel);
  --ring: var(--focus-on-dark);
}

/* small (header CTA) */
.btn--sm {
  min-height: var(--tap);
  padding: 0 20px;
  font-size: var(--t-small);
  line-height: 1.2;
}

.btn--block {
  width: 100%;
}

.btn-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.btn-pair--center {
  justify-content: center;
}

@media (max-width: 559.98px) {
  .btn-pair--fill-sm > .btn {
    flex: 1 1 auto;
  }
}


/* --------------------------------------------------------------------------
   3. Arrow link (custo secondary CTA) + underline link
   <a class="link-arrow" href="#…">Label</a>               → arrow
   <a class="link-arrow link-arrow--ext" …>Label <span class="sr-only">(opens in a new tab)</span></a>
   Glyph is a CSS mask (decorative, never announced). 1px line at 25% that
   fills left→right on hover and leaves toward the right on mouse-out.
   -------------------------------------------------------------------------- */
.link-arrow {
  --la-icon: var(--icon-arrow-right);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: var(--tap);
  padding-block: 6px 15px;
  color: inherit;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(color-mix(in srgb, currentColor 25%, transparent), color-mix(in srgb, currentColor 25%, transparent));
  background-repeat: no-repeat;
  background-position: 100% 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  transition: background-size .6s var(--ease-out), color var(--dur-1) var(--ease-out);
}

.link-arrow::after {
  content: "";
  flex: none;
  width: .85em;
  height: .85em;
  background-color: currentColor;
  -webkit-mask: var(--la-icon) center / contain no-repeat;
  mask: var(--la-icon) center / contain no-repeat;
  transition: transform .6s var(--ease-out);
}

.link-arrow--ext { --la-icon: var(--icon-arrow-ne); }
.link-arrow--down { --la-icon: var(--icon-arrow-down); }
.link-arrow--play { --la-icon: var(--icon-play); }
.link-arrow--play::after { width: .7em; height: .7em; }

/* play glyph sits before the label ("▶ Watch my journey") */
.link-arrow--play-start::after {
  order: -1;
}

@media (hover: hover) {
  .link-arrow:hover {
    background-position: 0 100%, 0 100%;
    background-size: 100% 1px, 100% 1px;
  }

  .link-arrow:hover::after { transform: translateX(4px); }
  .link-arrow--ext:hover::after { transform: translate(3px, -3px); }
  .link-arrow--down:hover::after { transform: translateY(3px); }
  .link-arrow--play:hover::after { transform: scale(1.12); }
}

.link-arrow:focus-visible {
  background-position: 0 100%, 0 100%;
  background-size: 100% 1px, 100% 1px;
}

.link-arrow--sm {
  padding-block: 10px 8px;
  font-size: var(--t-small);
  line-height: 1.35;
}

.link-arrow--block {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* custo min-width version: label left, arrow pushed right */
.link-arrow--wide {
  justify-content: space-between;
  min-width: min(100%, 19rem);
}

.link-arrow--on-dark {
  --ring: var(--focus-on-dark);
  color: var(--panel-ink);
}

/* Footer / list link: underline grows from the left, leaves to the right */
.link-line {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size .6s var(--ease-out), color var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
  .link-line:hover {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}

.link-line:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
}


/* --------------------------------------------------------------------------
   4. Icon button (44px raised circle)
   <button class="icon-btn" type="button" aria-label="…"><svg …/></button>
   -------------------------------------------------------------------------- */
.icon-btn {
  --size: var(--tap);
  --icon: 20px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-hairline);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  translate: var(--mag, none);
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    scale .6s var(--ease-out),
    translate .6s var(--ease-out);
}

.icon-btn > svg,
.icon-btn__icon {
  width: var(--icon);
  height: var(--icon);
}

@media (hover: hover) {
  .icon-btn:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: var(--surface);
    scale: 1.08;
  }
}

/* double ring: bg-colored halo + ring, readable over screenshots */
.icon-btn:focus-visible {
  box-shadow: var(--shadow-hairline), 0 0 0 5px var(--bg);
}

/* opt-in pressed look (not applied to the theme toggle, which also uses aria-pressed) */
.icon-btn--toggle[aria-pressed="true"] {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

@media (hover: hover) {
  .icon-btn--toggle[aria-pressed="true"]:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: color-mix(in srgb, var(--ink) 82%, var(--bg));
  }
}

.icon-btn:is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
}

.icon-btn:is(:disabled, [aria-disabled="true"]) > * {
  opacity: .3;
}

.icon-btn--glass {
  --ring: var(--focus-on-dark);
  background-color: var(--glass-bg);
  color: var(--sage-ink);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

@media (hover: hover) {
  .icon-btn--glass:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: var(--glass-bg-hover);
  }
}

.icon-btn--glass:focus-visible {
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}

.icon-btn--on-dark {
  --ring: var(--focus-on-dark);
  background-color: color-mix(in srgb, var(--panel-ink) 12%, transparent);
  color: var(--panel-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-ink) 28%, transparent);
}

@media (hover: hover) {
  .icon-btn--on-dark:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: color-mix(in srgb, var(--panel-ink) 22%, transparent);
  }
}

.icon-btn--on-dark:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-ink) 28%, transparent);
}

.icon-btn--solid {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

@media (hover: hover) {
  .icon-btn--solid:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: color-mix(in srgb, var(--ink) 82%, var(--bg));
  }
}

.icon-btn--lg {
  --size: 56px;
  --icon: 24px;
  font-size: 1.5rem;
}

@media (min-width: 1024px) {
  .icon-btn--lg {
    --size: 72px;
    --icon: 28px;
    font-size: 1.875rem;
  }
}

/* Mask glyphs for icon buttons: <span class="icon-btn__glyph icon-btn__glyph--next" aria-hidden="true"></span> */
.icon-btn__glyph {
  width: var(--icon);
  height: var(--icon);
  background-color: currentColor;
  -webkit-mask: var(--glyph, var(--icon-arrow-right)) center / contain no-repeat;
  mask: var(--glyph, var(--icon-arrow-right)) center / contain no-repeat;
}

.icon-btn__glyph--next { --glyph: var(--icon-arrow-right); }
.icon-btn__glyph--prev { --glyph: var(--icon-arrow-left); }
.icon-btn__glyph--ext { --glyph: var(--icon-arrow-ne); }
.icon-btn__glyph--play { --glyph: var(--icon-play); }
.icon-btn__glyph--plus { --glyph: var(--icon-plus); }


/* --------------------------------------------------------------------------
   5. Chips + chip row  (also used by .tabs__tab)
   36px visual, 44px hit area. Inactive: --surface + --ink-2 (12.7:1).
   Active: aria-pressed / aria-selected / aria-current / .is-active.
   -------------------------------------------------------------------------- */
.chip,
.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background-color: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

/* 44px tall hit area */
.chip::before,
.tabs__tab::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}

@media (hover: hover) {
  .chip:hover,
  .tabs__tab:hover {
    background-color: var(--surface-2);
    color: var(--ink);
  }
}

.chip:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"], .is-active),
.tabs__tab[aria-selected="true"] {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

.chip__count {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  opacity: .72;
}

.chip-row,
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 4px;
}

/* Mobile: one scrolling line with fade edges. Assumes the row sits in a
   .container; set --chip-row-bleed: 0px when it does not. */
@media (max-width: 767.98px) {
  .chip-row,
  .tabs__list {
    --fade: 20px;
    flex-wrap: nowrap;
    margin-inline: calc(var(--chip-row-bleed, var(--gutter)) * -1);
    padding: 6px var(--chip-row-bleed, var(--gutter));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--chip-row-bleed, var(--gutter));
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  }

  .chip-row::-webkit-scrollbar,
  .tabs__list::-webkit-scrollbar {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   6. Badge (mono 12px uppercase pill)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background-color: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--on-image {
  background-color: var(--on-image-bg);
  color: var(--on-image-ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.badge--ink {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

.badge--outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}


/* --------------------------------------------------------------------------
   7. Section head (custo label + statement)
   ≥768: label cols 1-4, everything else cols 5-12 (baseline-aligned with
   the label). <768: stacked. Children may be direct (h2, .sec-sub,
   .link-arrow) or wrapped in .sec-head__main.
   -------------------------------------------------------------------------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(56px, 7vw, 120px);
}

.sec-head > * {
  min-width: 0;
}

.sec-head > .sec-label {
  margin-bottom: clamp(20px, 5.5vw, 32px);
}

@media (min-width: 768px) {
  .sec-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: baseline;
  }

  .sec-head > * {
    grid-column: 5 / -1;
  }

  .sec-head > .sec-label {
    grid-row: 1;
    grid-column: 1 / span 4;
    margin-bottom: 0;
    padding-right: var(--gap);
  }
}

/* single column at every width (e.g. inside a narrow panel column) */
@media (min-width: 768px) {
  .sec-head--stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .sec-head--stack > *,
  .sec-head--stack > .sec-label {
    grid-column: 1 / -1;
  }

  .sec-head--stack > .sec-label {
    grid-row: auto;
    margin-bottom: clamp(20px, 5.5vw, 32px);
  }
}

.sec-head--center {
  justify-items: center;
  text-align: center;
}

.sec-head--center .sec-sub {
  margin-inline: auto;
}

.sec-head--flush {
  margin-bottom: 0;
}

.sec-label {
  max-width: 24em;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}

/* custo t-h3 sentence label (Intro). .sec-label--sans is the name used in
   notes/WAVE1-BRIEF.md; both classes are the same component. */
.sec-label--text,
.sec-label--sans {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: normal;
  text-transform: none;
}

.sec-sub {
  max-width: 34em;
  margin-top: clamp(18px, 2vw, 28px);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
  color: var(--muted);
  text-wrap: pretty;
}

.sec-head > :is(.link-arrow, .btn-pair, .btn),
.sec-head__main > :is(.link-arrow, .btn-pair, .btn) {
  margin-top: clamp(28px, 3.2vw, 46px);
  justify-self: start;
}

.sec-head__main > :is(.link-arrow, .btn) {
  display: flex;
  width: fit-content;
}

.sec-head--center > :is(.link-arrow, .btn-pair, .btn) {
  justify-self: center;
}

.sec-head--center .sec-head__main > :is(.link-arrow, .btn) {
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   8. Plate (custo rounded media plate)
   <div class="plate"><img class="plate__img" src alt width height loading="lazy" decoding="async"></div>
   Ratio: .plate--4x3 / --4x5 / --1x1 / --16x9 / --3x2 or style="--plate-ratio: 4 / 5".
   -------------------------------------------------------------------------- */
.plate {
  --plate-inset: 7%;
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: var(--plate-ratio, 16 / 10);
  border-radius: var(--r);
  background-color: var(--sage-tint);
  /* Safari: keep the radius while the inner image scales */
  clip-path: inset(0 round var(--r));
}

/* clip-path would clip an outside outline, so a plate that is itself the
   <button>/<a> (work cards) draws its ring inside the edge, above the image */
.plate:focus-visible {
  outline-offset: -4px;
}

button.plate {
  width: 100%;
  padding: 0;
  cursor: pointer;
}

.plate--4x3 { --plate-ratio: 4 / 3; }
.plate--4x5 { --plate-ratio: 4 / 5; }
.plate--1x1 { --plate-ratio: 1 / 1; }
.plate--16x9 { --plate-ratio: 16 / 9; }
.plate--3x2 { --plate-ratio: 3 / 2; }
.plate--auto { aspect-ratio: auto; }

.plate__img {
  position: absolute;
  top: var(--plate-inset);
  left: var(--plate-inset);
  width: calc(100% - 2 * var(--plate-inset));
  height: calc(100% - 2 * var(--plate-inset));
  object-fit: cover;
  object-position: 50% 0;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-soft);
  transform-origin: 50% 50%;
  transition: transform .8s var(--ease);
}

.plate--auto .plate__img {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
}

/* image fills the plate */
.plate--bleed .plate__img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* window peeking up from the bottom edge */
.plate--peek .plate__img {
  height: calc(100% - var(--plate-inset));
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* whole image visible (game art, logos) */
.plate--contain .plate__img {
  object-fit: contain;
  object-position: 50% 50%;
  box-shadow: none;
}

@media (hover: hover) {
  .plate:hover .plate__img,
  :is(a, button):hover > .plate .plate__img {
    transform: scale(1.03);
  }
}

.plate:focus-within .plate__img,
:is(a, button):focus-visible .plate__img {
  transform: scale(1.03);
}

/* custo card hover: the frame shrinks inward with rounder corners */
.plate--frame {
  transition: clip-path .6s var(--ease-out);
}

@media (hover: hover) {
  .plate--frame:hover,
  :is(a, button):hover > .plate--frame {
    clip-path: inset(10px round 20px);
  }

  .plate--frame:hover .plate__img,
  :is(a, button):hover > .plate--frame .plate__img {
    transform: scale(1.05);
  }
}

/* Corner slots for badges / the ↗ button */
.plate__slot {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.plate__slot--tl { top: clamp(8px, 1vw, 14px); left: clamp(8px, 1vw, 14px); }
.plate__slot--tr { top: clamp(8px, 1vw, 14px); right: clamp(8px, 1vw, 14px); }
.plate__slot--bl { bottom: clamp(8px, 1vw, 14px); left: clamp(8px, 1vw, 14px); }
.plate__slot--br { bottom: clamp(8px, 1vw, 14px); right: clamp(8px, 1vw, 14px); }


/* --------------------------------------------------------------------------
   9. Card surface + dark inset panel
   -------------------------------------------------------------------------- */
.card-surface {
  --muted: var(--muted-2); /* muted on --surface is 4.64; muted-2 is 5.63 */
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background-color: var(--surface);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}

:is(a, button).card-surface,
.card-surface--interactive {
  cursor: pointer;
  transition: background-color .6s var(--ease-out), box-shadow .6s var(--ease-out);
}

@media (hover: hover) {
  :is(a, button).card-surface:hover,
  .card-surface--interactive:hover {
    background-color: var(--sage-tint);
  }
}

:is(a, button).card-surface:focus-visible,
.card-surface--interactive:focus-within {
  background-color: var(--sage-tint);
}

/* custo dark "app" panel: 18px side margin, radius, 182/62 padding.
   Gets the dark surface tokens automatically (01-base section 3).
   Mobile: full-bleed, square, 50/72 vertical padding. */
.panel-inset {
  position: relative;
  margin-inline: 0;
  padding: 50px var(--gutter) 72px;
  border-radius: 0;
  background-color: var(--bg);
  color: var(--ink);
}

@media (min-width: 768px) {
  .panel-inset {
    margin-inline: 18px;
    padding: clamp(80px, 12.6vw, 182px) clamp(28px, 4.3vw, 62px);
    border-radius: var(--r);
  }
}


/* --------------------------------------------------------------------------
   10. Tiles (Apple 2-up)
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

@media (min-width: 768px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tile {
  --muted: var(--muted-2);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: clamp(36px, 4.4vw, 64px) clamp(20px, 3vw, 48px) clamp(20px, 3vw, 48px);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  color: var(--ink);
  text-align: center;
}

.tile__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 32em;
}

.tile__kicker {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}

.tile__title {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
  text-wrap: balance;
}

.tile__sub {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
}

.tile .btn-pair {
  justify-content: center;
  margin-top: 8px;
}

.tile__media {
  width: 100%;
  margin-top: auto;
  padding-top: clamp(28px, 3.6vw, 48px);
}


/* --------------------------------------------------------------------------
   11. Stats (big number + label, hairline-divided)
   Hairlines are pseudo-elements centered in the gaps; the grid clips the
   outer ones, so only inner dividers show at any column count.
   -------------------------------------------------------------------------- */
.stats {
  --stats-cols: 2;
  --stats-gap: clamp(28px, 3.4vw, 56px);
  display: grid;
  grid-template-columns: repeat(var(--stats-cols), minmax(0, 1fr));
  gap: var(--stats-gap);
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

@media (max-width: 359.98px) {
  .stats { --stats-cols: 1; }
}

@media (min-width: 1024px) {
  .stats { --stats-cols: 4; }
  .stats--3 { --stats-cols: 3; }
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.stat--full {
  grid-column: 1 / -1;
}

.stat::before,
.stat::after {
  content: "";
  position: absolute;
  background-color: var(--line);
  pointer-events: none;
}

/* vertical divider (left) */
.stat::before {
  top: calc(var(--stats-gap) / -2);
  bottom: calc(var(--stats-gap) / -2);
  left: calc(var(--stats-gap) / -2);
  width: 1px;
  transform-origin: 50% 0;
}

/* horizontal divider (top) */
.stat::after {
  top: calc(var(--stats-gap) / -2);
  left: calc(var(--stats-gap) / -2);
  right: calc(var(--stats-gap) / -2);
  height: 1px;
  transform-origin: 0 50%;
}

.stat__num {
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

/* [data-count]: core keeps the real text in .sr-only and animates an
   aria-hidden clone (recommended class .count__clone). */
[data-count] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-count] > [aria-hidden="true"],
.count__clone {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   12. Numbered list (custo 01-04)
   Rows: --muted-2 inactive, --ink active (.is-active), 1px ink progress line.
   Modifiers: --auto (3s linear progress, drives auto-advance), --static
   (all ink, no line), --compact (text at --t-lead).
   Inactive gray applies only with JS (no-JS: all rows ink).
   -------------------------------------------------------------------------- */
.num-list {
  --num-dur: 3s;
  margin: 0;
  padding: 0;
  list-style: none;
}

.num-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: baseline;
  padding-block: clamp(24px, 2.8vw, 40px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: color .8s var(--ease-out);
}

.num-list__item:first-child {
  padding-top: 0;
}

@media (min-width: 768px) {
  .num-list__item {
    grid-template-columns: minmax(3.5rem, 1fr) minmax(0, 6fr);
  }
}

/* optional full-row wrapper (div or <button>) using the same columns */
.num-list__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: inherit;
  column-gap: inherit;
  align-items: inherit;
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
}

button.num-list__row {
  cursor: pointer;
}

.num-list__row:focus-visible {
  outline-offset: 8px;
  border-radius: var(--r-sm);
}

.num-list__index {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.num-list__text,
.num-list__title {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--ls-h2);
  color: inherit;
  text-wrap: pretty;
}

.num-list--compact :is(.num-list__text, .num-list__title) {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: -.005em;
}

.num-list__desc {
  grid-column: 2;
  margin-top: 12px;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

html.js .num-list:not(.num-list--static) .num-list__item:not(.is-active) {
  color: var(--muted-2);
}

@media (hover: hover) {
  .num-list__row:hover {
    color: var(--ink);
  }
}

.num-list__row:focus-visible {
  color: var(--ink);
}

/* progress line overlays the row border */
.num-list__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .8s var(--ease-out);
  pointer-events: none;
}

.num-list__item.is-active::after {
  transform: scaleX(1);
}

.num-list--static .num-list__item::after {
  display: none;
}

/* Auto-advance: the active row's line runs for --num-dur. Advance on its
   animationend (event.pseudoElement === "::after") so pausing the CSS also
   pauses the timer. Paused by hover, focus inside, or .is-paused. */
.num-list--auto .num-list__item::after {
  transition: none;
}

.num-list--auto .num-list__item.is-active::after {
  animation: mg-num-progress var(--num-dur) linear forwards;
}

.num-list--auto:is(:hover, :focus-within, .is-paused) .num-list__item.is-active::after {
  animation-play-state: paused;
}

@keyframes mg-num-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* per-row image (custo iris): position it in the section's own CSS */
.num-list__media {
  opacity: 0;
  clip-path: inset(20% round 20px);
  transition:
    opacity .6s var(--ease-out),
    clip-path .8s var(--ease-out);
}

.num-list__item.is-active .num-list__media,
html:not(.js) .num-list__item:first-child .num-list__media {
  opacity: 1;
  clip-path: inset(0 round var(--r));
}


/* --------------------------------------------------------------------------
   13. Meta table (recent.design inspector)
   <dl class="meta"><div class="meta__row"><dt>Tool</dt><dd>Storyline</dd></div>…</dl>
   (bare dt/dd pairs also work)
   -------------------------------------------------------------------------- */
.meta {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.45;
}

.meta dt,
.meta dd {
  margin: 0;
  padding-block: 11px;
}

.meta dt {
  padding-right: 1.25rem;
  color: var(--muted);
}

.meta dd {
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.meta > dt ~ dt,
.meta > dt ~ dt + dd {
  border-top: 1px solid var(--line);
}

.meta__row {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
}

.meta__row > dt {
  flex: none;
  padding-right: 0;
}

.meta__row + .meta__row {
  border-top: 1px solid var(--line);
}

.meta--ruled {
  border-block: 1px solid var(--line);
}

.meta dd a:not([class]) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}


/* --------------------------------------------------------------------------
   14. Accordion
   The panel opens from aria-expanded="true" on .acc__btn (via :has) or
   .is-open on .acc__item (fallback). grid-template-rows 0fr → 1fr.
   No JS: every panel is open and the icon is hidden.
   -------------------------------------------------------------------------- */
.acc {
  --acc-meta-w: 7.5rem;
  --acc-gap: clamp(16px, 2.4vw, 40px);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.acc__item {
  border-top: 1px solid var(--line);
}

.acc__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.acc__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta icon"
    "title icon"
    "sub icon";
  align-items: center;
  column-gap: var(--acc-gap);
  width: 100%;
  min-height: var(--tap);
  padding-block: clamp(20px, 2.2vw, 30px);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.acc__btn:focus-visible {
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

@media (min-width: 768px) {
  .acc__btn {
    grid-template-columns: var(--acc-meta-w) minmax(0, 1fr) auto;
    grid-template-areas:
      "meta title icon"
      "meta sub icon";
  }

  .acc--plain .acc__btn {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title icon"
      "sub icon";
  }

  /* separate rule: an unsupported :has() must not drop the one above */
  .acc__btn:not(:has(.acc__meta)) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title icon"
      "sub icon";
  }
}

.acc__meta {
  grid-area: meta;
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  .acc__meta {
    margin-bottom: 6px;
  }
}

.acc__title {
  grid-area: title;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

.acc--lg .acc__title {
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.acc__sub {
  grid-area: sub;
  margin-top: 4px;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted);
}

.acc__icon {
  grid-area: icon;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform .6s var(--ease-out);
}

.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  margin: -.75px 0 0 -7px;
  border-radius: 1px;
  background-color: currentColor;
}

.acc__icon::after {
  transform: rotate(90deg);
}

@media (hover: hover) {
  .acc__btn:hover .acc__icon {
    background-color: var(--surface);
  }
}

/* plus rotates 45deg into × and fills with ink */
.acc__btn[aria-expanded="true"] .acc__icon {
  background-color: var(--ink);
  color: var(--ink-inverse);
  transform: rotate(45deg);
}

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows .6s var(--ease),
    visibility 0s linear .6s;
}

.acc__item.is-open > .acc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows .6s var(--ease),
    visibility 0s linear 0s;
}

/* :has() path kept in its own rule so older engines still get .is-open */
.acc__item:has(> .acc__heading > .acc__btn[aria-expanded="true"], > .acc__btn[aria-expanded="true"]) > .acc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows .6s var(--ease),
    visibility 0s linear 0s;
}

.acc__inner {
  min-height: 0;
  overflow: hidden;
}

/* bottom spacing as a clipped child, so a closed panel is truly 0px */
.acc__inner::after {
  content: "";
  display: block;
  height: clamp(24px, 3vw, 40px);
}

@media (min-width: 768px) {
  .acc:not(.acc--plain) .acc__inner {
    padding-inline: calc(var(--acc-meta-w) + var(--acc-gap)) calc(40px + var(--acc-gap));
  }

  .acc--plain .acc__inner {
    padding-inline-end: calc(40px + var(--acc-gap));
  }
}

html:not(.js) .acc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

html:not(.js) .acc__icon {
  display: none;
}


/* --------------------------------------------------------------------------
   15. Tabs (chip-style tablist)
   <div class="tabs__list" role="tablist" aria-label="…"> <button class="tabs__tab" role="tab" aria-selected aria-controls id tabindex>…
   <div class="tabs__panel" role="tabpanel" aria-labelledby tabindex="0" hidden>…
   Tab visuals are shared with .chip (section 5); the list scrolls on mobile.
   -------------------------------------------------------------------------- */
.tabs__panel {
  padding-top: clamp(32px, 4.4vw, 72px);
}

.tabs__panel:focus-visible {
  outline-offset: 8px;
  border-radius: var(--r);
}

html.js .tabs__panel:not([hidden]) {
  animation: mg-tab-in .5s var(--ease-out) backwards;
}

@keyframes mg-tab-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}


/* --------------------------------------------------------------------------
   16. Marquee
   <div class="marquee">
     <div class="marquee__bar"><p class="marquee__label">Worked with</p><button class="icon-btn marquee__toggle" …></div>
     <div class="marquee__viewport">
       <ul class="marquee__track"><li class="marquee__item">Apple</li>…</ul>
       <ul class="marquee__track" aria-hidden="true">…same items…</ul>
     </div>
   </div>
   Runs only with JS (so the pause button works). Paused by hover, focus
   inside, or .is-paused. Static wrapped list under reduced motion, without
   JS, or with .is-static.
   -------------------------------------------------------------------------- */
.marquee {
  --marquee-dur: 60s;
  --marquee-gap: .55em;
  position: relative;
  display: grid;
  gap: clamp(14px, 1.6vw, 24px);
}

.marquee__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marquee__label {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink);
}

.marquee__viewport {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: baseline;
  margin: 0;
  padding: 0;
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls-h2);
  color: var(--muted-2);
  white-space: nowrap;
  list-style: none;
}

.marquee__item {
  display: flex;
  align-items: baseline;
}

.marquee__item::after {
  content: "·";
  content: "·" / "";
  padding-inline: var(--marquee-gap);
}

html.js .marquee:not(.is-static) .marquee__track {
  animation: mg-marquee var(--marquee-dur) linear infinite;
}

html.js .marquee--reverse:not(.is-static) .marquee__track {
  animation-direction: reverse;
}

html.js .marquee:is(:hover, :focus-within, .is-paused) .marquee__track {
  animation-play-state: paused;
}

@keyframes mg-marquee {
  to { transform: translateX(-100%); }
}

/* static list (no JS, .is-static, reduced motion via section 20) */
html:not(.js) .marquee__viewport,
.marquee.is-static .marquee__viewport {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

html:not(.js) .marquee__track,
.marquee.is-static .marquee__track {
  display: block;
  flex: 1 1 auto;
  white-space: normal;
}

html:not(.js) .marquee__item,
.marquee.is-static .marquee__item {
  display: inline;
}

html:not(.js) .marquee__item:last-child::after,
.marquee.is-static .marquee__item:last-child::after {
  content: none;
}

html:not(.js) .marquee__track[aria-hidden="true"],
.marquee.is-static .marquee__track[aria-hidden="true"],
html:not(.js) .marquee__toggle,
.marquee.is-static .marquee__toggle {
  display: none;
}


/* --------------------------------------------------------------------------
   17. Reveal + motion hooks (core JS adds .is-in once)
   Hidden states exist only under html.js. Reveals use animations with the
   independent translate/scale properties, so they never override a
   component's own transition or transform.
   -------------------------------------------------------------------------- */

/* [data-reveal] = "up" (default, 40px) | "fade" | "clip" */
html.js [data-reveal]:not(.is-in) {
  opacity: 0;
}

html.js [data-reveal="clip"]:not(.is-in) {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
}

html.js [data-reveal].is-in {
  animation:
    mg-fade 1s var(--ease) backwards,
    mg-rise 1.2s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

html.js [data-reveal="fade"].is-in {
  animation: mg-fade 1s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

html.js [data-reveal="clip"].is-in {
  animation: mg-clip 1.2s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

/* [data-reveal][data-reveal-stagger]: the parent stays put; its direct
   children reveal in sequence (80ms steps from --i, set by core; the
   nth-child values below are a fallback). Children that carry their own
   data-reveal are independent. */
html.js [data-reveal][data-reveal-stagger]:not(.is-in) {
  opacity: 1;
  clip-path: none;
}

html.js [data-reveal][data-reveal-stagger].is-in {
  animation: none;
}

html.js [data-reveal][data-reveal-stagger]:not(.is-in) > :not([data-reveal]) {
  opacity: 0;
}

html.js [data-reveal][data-reveal-stagger].is-in > :not([data-reveal]) {
  animation:
    mg-fade 1s var(--ease) backwards,
    mg-rise 1.2s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

html.js [data-reveal="fade"][data-reveal-stagger].is-in > :not([data-reveal]) {
  animation: mg-fade 1s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

html.js [data-reveal="clip"][data-reveal-stagger]:not(.is-in) > :not([data-reveal]) {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
}

html.js [data-reveal="clip"][data-reveal-stagger].is-in > :not([data-reveal]) {
  animation: mg-clip 1.2s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + var(--reveal-delay, 0ms));
}

[data-reveal-stagger] > :nth-child(2) { --i: 1; }
[data-reveal-stagger] > :nth-child(3) { --i: 2; }
[data-reveal-stagger] > :nth-child(4) { --i: 3; }
[data-reveal-stagger] > :nth-child(5) { --i: 4; }
[data-reveal-stagger] > :nth-child(6) { --i: 5; }
[data-reveal-stagger] > :nth-child(7) { --i: 6; }
[data-reveal-stagger] > :nth-child(8) { --i: 7; }
[data-reveal-stagger] > :nth-child(9) { --i: 8; }
[data-reveal-stagger] > :nth-child(10) { --i: 9; }
[data-reveal-stagger] > :nth-child(11) { --i: 10; }
[data-reveal-stagger] > :nth-child(n+12) { --i: 11; }

@keyframes mg-fade {
  from { opacity: 0; }
}

@keyframes mg-rise {
  from { translate: 0 40px; }
}

@keyframes mg-clip {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* [data-split] line reveal (makemepulse/custo): core wraps lines as
   .split-line > .split-line__inner[style="--i:n"]. Lines rise from below
   a clip, 1.2s EO, 90ms stagger. The padding/negative margin gives
   accents (Š) and descenders room inside the clip. */
.split-line {
  display: block;
  overflow: clip;
  padding-block: .1em .14em;
  margin-block: -.1em -.14em;
}

.split-line__inner {
  display: block;
}

html.js [data-split]:not(.is-in) .split-line__inner {
  translate: 0 calc(100% + .3em);
}

html.js [data-split].is-in .split-line__inner {
  animation: mg-line 1.2s var(--ease-out) backwards;
  animation-delay: calc(var(--split-delay, 0ms) + min(var(--i, 0), 15) * 90ms);
}

@keyframes mg-line {
  from { translate: 0 calc(100% + .3em); }
}

/* [data-draw] on a hairline element: scaleX 0 → 1 from the left, .9s IO.
   .stats[data-draw] draws its pseudo dividers instead of scaling itself. */
html.js [data-draw]:not(.stats):not(.is-in) {
  scale: 0 1;
  transform-origin: 0 50%;
}

html.js [data-draw]:not(.stats).is-in {
  transform-origin: 0 50%;
  animation: mg-draw-x .9s var(--ease) backwards;
  animation-delay: var(--draw-delay, 0ms);
}

html.js .stats[data-draw]:not(.is-in) .stat::after { scale: 0 1; }
html.js .stats[data-draw]:not(.is-in) .stat::before { scale: 1 0; }

html.js .stats[data-draw].is-in .stat::after {
  animation: mg-draw-x .9s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms);
}

html.js .stats[data-draw].is-in .stat::before {
  animation: mg-draw-y .9s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 80ms + 120ms);
}

.stats[data-draw] > :nth-child(2) { --i: 1; }
.stats[data-draw] > :nth-child(3) { --i: 2; }
.stats[data-draw] > :nth-child(4) { --i: 3; }
.stats[data-draw] > :nth-child(5) { --i: 4; }
.stats[data-draw] > :nth-child(6) { --i: 5; }
.stats[data-draw] > :nth-child(n+7) { --i: 6; }

@keyframes mg-draw-x {
  from { scale: 0 1; }
}

@keyframes mg-draw-y {
  from { scale: 1 0; }
}

/* [data-magnetic]: core may set --mag (e.g. "4px -2px") on the element;
   .btn and .icon-btn already apply and transition it. For any other
   element: */
[data-magnetic]:not(.btn):not(.icon-btn) {
  translate: var(--mag, none);
  transition: translate .6s var(--ease-out);
}

@media (hover: none), (pointer: coarse) {
  [data-magnetic] {
    translate: none !important;
  }
}

/* [data-parallax]: core writes transform inline (desktop, fine pointer,
   motion allowed). Hint the compositor only where it can run. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-parallax] {
    will-change: transform;
  }
}


/* --------------------------------------------------------------------------
   18. Toast (#toast, role=status; core adds .is-visible)
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: var(--z-toast);
  max-width: min(calc(100vw - 32px), 32rem);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background-color: var(--page-ink);
  color: var(--page-ink-inverse);
  box-shadow: var(--shadow-lift);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  translate: -50% 16px;
  pointer-events: none;
  transition:
    opacity var(--dur-1) var(--ease-out),
    translate .5s var(--ease-out);
}

@media (min-width: 768px) {
  .toast {
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
}

.toast:is(.is-visible, .is-open, .is-shown) {
  opacity: 1;
  translate: -50% 0;
}

.toast:empty {
  opacity: 0;
}


/* --------------------------------------------------------------------------
   19. Keyboard key
   -------------------------------------------------------------------------- */
kbd,
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: .1em .4em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background-color: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .75em;
  font-weight: 500;
  line-height: 1.4;
  vertical-align: .05em;
}


/* --------------------------------------------------------------------------
   20. Reduced motion (component specifics; global net is in 01-base)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* roll: color change only */
  .roll > :nth-child(2) {
    display: none;
  }

  .roll > :first-child {
    opacity: 1 !important;
    transform: none !important;
  }

  .btn:active {
    scale: none;
  }

  .icon-btn:hover {
    scale: none !important;
  }

  .link-arrow::after {
    transform: none !important;
  }

  .plate__img {
    transform: none !important;
  }

  .plate--frame {
    clip-path: inset(0 round var(--r)) !important;
  }

  /* numbered list: every row ink; the auto list keeps a static line on the
     active row so the selection stays visible */
  html.js .num-list:not(.num-list--static) .num-list__item:not(.is-active) {
    color: var(--ink);
  }

  .num-list:not(.num-list--auto) .num-list__item::after {
    display: none;
  }

  .num-list--auto .num-list__item.is-active::after {
    animation: none !important;
    transform: scaleX(1);
  }

  .num-list__media {
    clip-path: none;
  }

  /* marquee: static wrapped list */
  .marquee__viewport {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee__track {
    display: block;
    flex: 1 1 auto;
    white-space: normal;
    animation: none !important;
  }

  .marquee__item {
    display: inline;
  }

  .marquee__item:last-child::after {
    content: none;
  }

  .marquee__track[aria-hidden="true"],
  .marquee__toggle {
    display: none;
  }

  /* reveals: content is simply there */
  html.js [data-reveal],
  html.js [data-reveal-stagger] > *,
  html.js [data-split] .split-line__inner,
  html.js [data-draw],
  html.js .stats[data-draw] .stat::before,
  html.js .stats[data-draw] .stat::after {
    opacity: 1 !important;
    clip-path: none !important;
    translate: none !important;
    scale: none !important;
    animation: none !important;
  }

  .toast {
    translate: -50% 0;
  }
}


/* --------------------------------------------------------------------------
   21. Forced colors
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .link-arrow::after,
  .icon-btn__glyph,
  .acc__icon::before,
  .acc__icon::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  .num-list__item::after,
  .stat::before,
  .stat::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  .chip:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"], .is-active),
  .tabs__tab[aria-selected="true"],
  .icon-btn--toggle[aria-pressed="true"] {
    forced-color-adjust: none;
    border-color: Highlight;
    background-color: Highlight;
    color: HighlightText;
  }

  .acc__btn[aria-expanded="true"] .acc__icon {
    forced-color-adjust: none;
    background-color: Canvas;
    color: CanvasText;
    box-shadow: inset 0 0 0 1px CanvasText;
  }

  .num-list__item.is-active {
    text-decoration: underline;
  }

  .toast {
    border: 1px solid CanvasText;
  }
}

/* ==== 03-chrome.css ==== */
/* ==========================================================================
   03-chrome.css — skip link, header (+ scroll progress), menu panel,
   section rail, footer.                                   Owner: F2
   Hooks: notes/FOUNDATION-CONTRACT.md · API: notes/api/markup.md
   Colours come only from 00-tokens.css. Hover effects are limited to
   (hover:hover) and (pointer:fine). Reduced motion removes every
   transition/animation here (block at the end of the file).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. .sr-only and .skip-link live in 01-base.css (§7). Integrator: the
      duplicate copies that were here are removed so there is one source.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Header shell
   Local custom properties switch per state; the default (no state class,
   or no JS) is the frosted look so the header is always legible.
   -------------------------------------------------------------------------- */
.site-header {
  --hdr-fg: var(--ink);
  --hdr-btn-bg: var(--bg);
  --hdr-btn-bg-hover: var(--surface);
  --hdr-btn-fg: var(--ink);
  --hdr-btn-shadow: var(--shadow-hairline);
  --hdr-btn-blur: none;
  --hdr-cta-bg: var(--ink);
  --hdr-cta-fg: var(--ink-inverse);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--hdr-fg);
  transition: color .6s var(--ease);
}

/* Frosted layer (Apple): its own element so the header can slide away
   while the scroll-progress hairline stays pinned at the top. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  background: var(--frost);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header::before { background: var(--bg); }
}

/* is-on-hero: transparent, white text, smoked-glass controls.
   Only with JS (core removes it once the hero is passed). */
.js .site-header.is-on-hero:not(.is-frosted) {
  --hdr-fg: var(--sage-ink);
  --hdr-btn-bg: var(--glass-bg);
  --hdr-btn-bg-hover: var(--glass-bg-hover);
  --hdr-btn-fg: var(--sage-ink);
  --hdr-btn-shadow: inset 0 0 0 1px var(--glass-edge);
  --hdr-btn-blur: blur(10px);
  --hdr-cta-bg: var(--sage-ink);
  --hdr-cta-fg: var(--sage);
  --ring: var(--focus-on-dark);
}
.js .site-header.is-on-hero:not(.is-frosted)::before {
  opacity: 0;
}

/* is-hidden: slides up (scrolling down). Core never sets it under reduced
   motion or while focus is inside. The progress hairline stays visible. */
.site-header.is-hidden {
  pointer-events: none;
}
.site-header.is-hidden::before,
.site-header.is-hidden .site-header__inner {
  transform: translateY(calc(-100% - 2px));
}

.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  box-sizing: border-box;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  transition: transform .6s var(--ease);
}

/* Focus rings inside the chrome follow the surface they sit on. */
.site-header :focus-visible {
  outline: 2px solid var(--ring, var(--focus));
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   2. Brand + primary nav (custo text roll + scrollspy underline)
   -------------------------------------------------------------------------- */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-sm);
}

.site-nav {
  margin-inline: auto;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  border-radius: var(--r-sm);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.site-nav__link .roll {
  position: relative;
  display: block;
  overflow: hidden;
}
.site-nav__link .roll__a,
.site-nav__link .roll__b {
  display: block;
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
}
.site-nav__link .roll__b {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(100%);
}

/* active section (scrollspy) holds the rolled state + underline */
.site-nav__link.is-active .roll__a,
.site-nav__link:focus-visible .roll__a {
  opacity: 0;
  transform: translateY(-100%);
}
.site-nav__link.is-active .roll__b,
.site-nav__link:focus-visible .roll__b {
  opacity: 1;
  transform: none;
}
.site-nav__link.is-active::after,
.site-nav__link:focus-visible::after {
  opacity: 1;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav__link:hover .roll__a { opacity: 0; transform: translateY(-100%); }
  .site-nav__link:hover .roll__b { opacity: 1; transform: none; }
  .site-nav__link:hover::after { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   3. Actions: icon buttons, gears, theme icons, CTA, menu button
   -------------------------------------------------------------------------- */
.site-header__actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 8px;
  margin-left: auto;
}

.site-header .icon-btn,
.site-header .menu-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--hdr-btn-bg);
  color: var(--hdr-btn-fg);
  box-shadow: var(--hdr-btn-shadow);
  -webkit-backdrop-filter: var(--hdr-btn-blur);
  backdrop-filter: var(--hdr-btn-blur);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .4s var(--ease-out),
    color .4s var(--ease-out),
    box-shadow .4s var(--ease-out),
    transform .6s var(--ease-out);
}
.site-header .icon-btn > svg {
  display: block;
  width: 20px;
  height: 20px;
  grid-area: 1 / 1;
}
@media (hover: hover) and (pointer: fine) {
  .site-header .icon-btn:hover,
  .site-header .menu-btn:hover {
    background: var(--hdr-btn-bg-hover);
  }
}
.site-header .icon-btn:active,
.site-header .menu-btn:active {
  transform: scale(.94);
}

/* Gears ("how I built this"): two interlocking gears; they spin only while
   the control is hovered or focused, never on their own. */
.ai-gears {
  position: relative;
  display: block;
  width: 24px;
  height: 22px;
}
.ai-gear {
  position: absolute;
  display: block;
}
.ai-gear-big {
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
}
.ai-gear-small {
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
}
@keyframes mg-gear-spin { to { transform: rotate(360deg); } }
@keyframes mg-gear-spin-rev { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .icon-btn--gears:focus-visible .ai-gear-big { animation: mg-gear-spin 1.8s linear infinite; }
  .icon-btn--gears:focus-visible .ai-gear-small { animation: mg-gear-spin-rev 1.3s linear infinite; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .icon-btn--gears:hover .ai-gear-big,
  .menu-panel__row:hover .ai-gear-big { animation: mg-gear-spin 1.8s linear infinite; }
  .icon-btn--gears:hover .ai-gear-small,
  .menu-panel__row:hover .ai-gear-small { animation: mg-gear-spin-rev 1.3s linear infinite; }
}

/* Theme icons: sun in light, moon in dark (as before), cross-rotating. */
.icon-sun,
.icon-moon {
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
:root[data-theme="dark"] .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(.5);
}
:root:not([data-theme="dark"]) .icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
}

/* "Get in touch" (F1 .btn.btn--primary.btn--sm). Colours are switched per
   header state; F1 may read --btn-bg / --btn-fg, the direct properties
   cover an implementation that does not. */
.site-header__cta {
  --btn-bg: var(--hdr-cta-bg);
  --btn-fg: var(--hdr-cta-fg);
  flex: none;
  white-space: nowrap;
}
.js .site-header.is-on-hero:not(.is-frosted) .site-header__cta {
  background-color: var(--hdr-cta-bg);
  border-color: transparent;
  color: var(--hdr-cta-fg);
}

/* Menu button: "Menu" + two-line burger. Label is visible 640–1179px;
   icon-only (label kept for AT) below 640 and from 1180 up. */
.site-header .menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  min-width: 44px;
  padding: 0 18px 0 20px;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1;
}
.menu-btn__icon {
  position: relative;
  display: block;
  flex: none;
  width: 18px;
  height: 8px;
}
.menu-btn__icon::before,
.menu-btn__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .6s var(--ease);
}
.menu-btn__icon::before { top: 0; }
.menu-btn__icon::after { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before {
  transform: translateY(3.25px) rotate(45deg);
}
.menu-btn[aria-expanded="true"] .menu-btn__icon::after {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   4. Scroll progress hairline (2px; white on the hero, ink elsewhere)
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   5. Header responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1179.98px) {
  .site-nav { display: none; }
}
@media (min-width: 1180px) {
  .site-header__actions { margin-left: 0; }
}
@media (min-width: 1180px), (max-width: 639.98px) {
  .site-header .menu-btn {
    width: 44px;
    padding: 0;
    gap: 0;
  }
  .menu-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
@media (max-width: 639.98px) {
  .site-header__cta { display: none; }
  .site-header__actions { gap: 6px; }
  /* two-line lockup: "Matthew / Grunewald" */
  .site-header__brand {
    width: min-content;
    font-size: 1rem;
    line-height: 1.05;
    white-space: normal;
  }
}
@media (max-width: 359.98px) {
  .site-header__inner { gap: 8px; }
  .site-header__actions { gap: 4px; }
}

/* --------------------------------------------------------------------------
   6. Menu panel (custo navigation panel): full-screen sage, huge links,
      wipe-down entrance, staggered rows. Core: removes [hidden], adds
      .is-open next frame; on close removes .is-open, restores [hidden]
      after the clip-path transition (800ms) on the panel itself.
   -------------------------------------------------------------------------- */
.menu-panel {
  --ring: var(--focus-on-dark);
  --menu-line: color-mix(in srgb, var(--sage-ink) 30%, transparent);

  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: block;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sage);
  color: var(--sage-ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
}
.menu-panel[hidden] {
  display: none;
}
.menu-panel.is-open {
  clip-path: inset(0 0 0 0);
}
.menu-panel :focus-visible {
  outline: 2px solid var(--focus-on-dark);
  outline-offset: 3px;
}

.menu-panel__inner {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
}

.menu-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  min-height: var(--header-h);
}
.menu-panel__brand {
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.menu-panel .icon-btn,
.menu-panel__row-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  color: var(--sage-ink);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.menu-panel .icon-btn {
  cursor: pointer;
  transition: background-color .4s var(--ease-out), transform .6s var(--ease-out);
}
.menu-panel .icon-btn > svg,
.menu-panel__row-icon > svg {
  display: block;
  width: 20px;
  height: 20px;
  grid-area: 1 / 1;
}
.menu-panel__close > svg {
  transition: transform .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu-panel .icon-btn:hover { background: var(--glass-bg-hover); }
  .menu-panel__close:hover > svg { transform: rotate(90deg); }
}

.menu-panel__nav {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  padding-block: clamp(16px, 5vh, 64px);
}
.menu-panel__links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .menu-panel__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
  }
}
@media (min-width: 1280px) {
  .menu-panel__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
  }
}
.menu-panel__links > li {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.menu-panel.is-open .menu-panel__links > li {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s var(--ease-out) calc(.2s + var(--i, 0) * 45ms),
    transform 1s var(--ease-out) calc(.2s + var(--i, 0) * 45ms);
}
.menu-panel__link {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: .5em;
  padding-block: .06em;
  color: inherit;
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: var(--ls-h1);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.menu-panel__idx {
  flex: none;
  width: 1.75rem;
  padding-top: calc(var(--t-h1) * .42);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-micro);
}
.menu-panel__link::after {
  content: "";
  position: absolute;
  left: calc(1.75rem + .5em);
  right: 0;
  bottom: .1em;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .6s var(--ease-out);
}
.menu-panel__link.is-active::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
@media (hover: hover) and (pointer: fine) {
  .menu-panel__link:hover::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
}

.menu-panel__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: none;
  border-top: 1px solid var(--menu-line);
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.menu-panel.is-open .menu-panel__rows {
  opacity: 1;
  transition: opacity .8s var(--ease-out) .55s;
}
@media (min-width: 768px) {
  .menu-panel__rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}
.menu-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-height: 68px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--menu-line);
  background: none;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  .menu-panel__row { border-bottom: 0; }
}
.menu-panel__row-icon {
  transition: background-color .4s var(--ease-out), transform .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu-panel__row:hover .menu-panel__row-icon {
    background: var(--glass-bg-hover);
    transform: scale(1.08);
  }
}

/* --------------------------------------------------------------------------
   7. Section rail (desktop ≥1180px): frosted vertical pill on the right
      edge; ticks extend when active; labels on hover/focus.
   -------------------------------------------------------------------------- */
.section-rail {
  position: fixed;
  top: 50%;
  right: max(12px, calc(var(--gutter) / 2 - 20px));
  z-index: var(--z-rail);
  transform: translateY(-50%);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), visibility 0s;
}
.section-rail.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(12px, -50%);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s linear .4s;
}
.no-js .section-rail.is-hidden {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%);
}

/* While core locks scroll (modal / menu open) the page scrollbar is removed
   and body gets padding-right = --scrollbar-comp. Keep the fixed chrome
   where it was so nothing jumps sideways behind the backdrop. */
html.is-scroll-locked .site-header {
  right: var(--scrollbar-comp, 0px);
}
html.is-scroll-locked .section-rail {
  margin-right: var(--scrollbar-comp, 0px);
}
@media (max-width: 1179.98px) {
  .section-rail { display: none; }
}
.section-rail__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  border-radius: var(--r-pill);
  background: var(--frost);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-hairline);
}
.section-rail__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  color: var(--muted-2);
  text-decoration: none;
  border-radius: var(--r-pill);
}
.section-rail__link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.section-rail__tick {
  display: block;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: width .6s var(--ease-out), background-color .4s var(--ease-out);
}
.section-rail__link.is-active {
  color: var(--ink);
}
.section-rail__link.is-active .section-rail__tick {
  width: 22px;
}
.section-rail__link:focus-visible .section-rail__tick {
  width: 18px;
  background: var(--ink);
}
.section-rail__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-soft);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
.section-rail__link:focus-visible .section-rail__label {
  opacity: 1;
  transform: translate(0, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .section-rail__link:hover { color: var(--ink); }
  .section-rail__link:hover .section-rail__tick { width: 18px; }
  .section-rail__link:hover .section-rail__label {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* --------------------------------------------------------------------------
   8. Footer (custo footer + makemepulse giant wordmark)
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  overflow: clip; /* clip, not hidden: keeps the root as the view-timeline scroller */
  padding-top: clamp(64px, 7.6vw, 110px);
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
.site-footer :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(56px, 6.5vw, 96px);
}
.site-footer__brand { grid-column: 1 / span 5; }
.site-footer__ask { grid-column: 7 / -1; }
.site-footer__cols {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 48px;
}
.site-footer__col--explore { grid-column: 1 / span 6; }
.site-footer__col--resources { grid-column: 7 / span 3; }
.site-footer__col--contact { grid-column: 10 / span 3; }

.site-footer__wordmark {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.site-footer__tagline {
  max-width: 22em;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-text);
  line-height: var(--lh-text);
}

.site-footer__title {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: 0;
}
.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__list--split {
  columns: 2;
  column-gap: var(--gap);
}
.site-footer__list > li {
  break-inside: avoid;
}
.site-footer__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  max-width: 100%;
  padding-block: 4px;
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1.62;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .6s var(--ease-out);
}
.site-footer__ext {
  flex: none;
  font-size: .85em;
}
.site-footer__link::after,
.foot-build-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .6s var(--ease-out);
}
.site-footer__link:focus-visible,
.foot-build-link:focus-visible {
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__link:hover,
  .foot-build-link:hover {
    color: var(--ink);
  }
  .site-footer__link:hover::after,
  .foot-build-link:hover::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
}
@media (pointer: coarse) {
  .site-footer__link {
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
}

/* Ask Agile ADDIE: big underline input + round submit */
.foot-ask {
  margin: 0;
}
.foot-ask__label {
  display: block;
  margin-bottom: clamp(12px, 1.6vw, 24px);
  color: var(--ink);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
}
.foot-ask__field {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--muted);
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.foot-ask__field:focus-within {
  border-bottom-color: var(--ink);
  box-shadow: 0 1px 0 0 var(--ink);
}
.foot-ask__input {
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(64px, 5.2vw, 80px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  -webkit-appearance: none;
  appearance: none;
}
.foot-ask__input::placeholder {
  color: var(--muted);
  opacity: 1;
}
/* the 2px ink underline on .foot-ask__field is the focus indicator */
.foot-ask__input:focus,
.foot-ask__input:focus-visible {
  outline: none;
}
.foot-ask__submit {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-inverse);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .6s var(--ease-out), background-color .4s var(--ease-out);
}
.foot-ask__submit > svg {
  display: block;
  width: 22px;
  height: 22px;
  transition: transform .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot-ask__submit:hover { transform: scale(1.08); }
  .foot-ask__submit:hover > svg { transform: translateX(2px); }
}
.foot-ask__submit:active { transform: scale(.95); }

/* Bottom bar */
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(72px, 9.3vw, 140px);
  padding-block: clamp(20px, 3vw, 44px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.45;
}
.site-footer__bar .foot {
  margin: 0;
}
.foot-build-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .6s var(--ease-out);
}
.foot-build-link::after {
  bottom: 10px;
}

/* Giant wordmark strip, clipped at the bottom edge (decorative). */
.site-footer__giant {
  position: relative;
  box-sizing: content-box;
  height: .66em;
  margin-top: clamp(4px, 1vw, 16px);
  padding-inline: var(--gutter);
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(4.25rem, 19.5vw, 30rem);
  font-weight: 500;
  line-height: var(--lh-wordmark);
  letter-spacing: var(--ls-wordmark);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  view-timeline-name: --mg-giant;
}
.site-footer__giant-word {
  display: block;
}
@keyframes mg-giant-rise {
  from { transform: translateY(55%); }
  to { transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-footer__giant-word {
      animation: mg-giant-rise linear both;
      animation-timeline: --mg-giant;
      animation-range: entry 0% entry 100%;
    }
  }
}

/* Footer responsive */
@media (max-width: 1023.98px) {
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__ask { grid-column: 1 / -1; }
  .site-footer__col--explore { grid-column: 1 / -1; }
  .site-footer__col--resources { grid-column: 1 / span 6; }
  .site-footer__col--contact { grid-column: 7 / span 6; }
  .site-footer__list--split { columns: 3; }
}
@media (max-width: 639.98px) {
  .site-footer__col--resources,
  .site-footer__col--contact { grid-column: 1 / -1; }
  .site-footer__list--split { columns: 2; }
  .site-footer__bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   9. Reduced motion, forced colours, print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .site-header,
  .site-header::before,
  .site-header__inner,
  .site-header .icon-btn,
  .site-header .menu-btn,
  .site-nav__link::after,
  .site-nav__link .roll__a,
  .site-nav__link .roll__b,
  .menu-btn__icon::before,
  .menu-btn__icon::after,
  .icon-sun,
  .icon-moon,
  .menu-panel,
  .menu-panel *,
  .section-rail,
  .section-rail *,
  .site-footer *,
  .foot-build-link::after {
    transition: none !important;
    animation: none !important;
  }
  .site-nav__link .roll__b { display: none; }
  .site-nav__link .roll__a { opacity: 1 !important; transform: none !important; }
  .scroll-progress { display: none; }
  .menu-panel__links > li,
  .menu-panel__rows {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .site-header::before {
    background: Canvas;
    border-bottom-color: CanvasText;
  }
  .site-header .icon-btn,
  .site-header .menu-btn,
  .menu-panel .icon-btn,
  .menu-panel__row-icon,
  .foot-ask__submit {
    border: 1px solid ButtonText;
  }
  .scroll-progress__bar { background: Highlight; }
  .menu-panel {
    background: Canvas;
    color: CanvasText;
  }
  .section-rail__list {
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .section-rail__link.is-active .section-rail__tick { background: Highlight; }
  .section-rail__label { border: 1px solid CanvasText; }
}

@media print {
  .skip-link,
  .site-header,
  .menu-panel,
  .section-rail,
  .site-footer__ask,
  .site-footer__giant {
    display: none !important;
  }
}

/* ==== 04-overlays.css ==== */
/* ==========================================================================
   04-overlays.css — modal shell (.overlay/.modal), info + expertise notes,
   AI modal + detail panel, video modals (journey, vimeo), game modal, toast.
   Owner: F2 · Hooks: notes/FOUNDATION-CONTRACT.md · API: notes/api/markup.md
   Open/close is driven by core (MG.openModal / MG.closeModal):
     [hidden] removed → next frame .is-open → (close) .is-open removed →
     [hidden] + aria-hidden restored after the transition (.5s).
   The legacy .open class is styled identically for safety.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */
.overlay {
  --ring: var(--focus);

  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  box-sizing: border-box;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-out);
}
.overlay[hidden] {
  display: none;
}
.overlay.is-open,
.overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: auto; /* centres, and never clips the top when taller than the viewport */
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
:root[data-theme="dark"] .modal {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lift);
}
.overlay.is-open .modal,
.overlay.open .modal {
  opacity: 1;
  transform: none;
}
.modal:focus {
  outline: none;
}
.modal :focus-visible {
  outline: 2px solid var(--ring, var(--focus));
  outline-offset: 3px;
}

/* Close button (.icon-btn.modal-close): 44px circle, top-right. */
.modal-close {
  position: absolute;
  top: clamp(12px, 1.6vw, 20px);
  right: clamp(12px, 1.6vw, 20px);
  z-index: 3;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-hairline);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .4s var(--ease-out), transform .6s var(--ease-out);
}
:root[data-theme="dark"] .modal-close {
  background: var(--surface-2);
}
.modal-close > svg {
  display: block;
  width: 20px;
  height: 20px;
  transition: transform .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover { background: var(--surface-2); }
  :root[data-theme="dark"] .modal-close:hover { background: var(--line-strong); }
  .modal-close:hover > svg { transform: rotate(90deg); }
}
.modal-close:active { transform: scale(.94); }

/* --------------------------------------------------------------------------
   2. Shared modal typography
   -------------------------------------------------------------------------- */
.modal-eyebrow {
  margin: 0 56px 12px 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.modal-eyebrow:empty {
  display: none;
}
.modal-title {
  margin: 0 52px 0 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}
.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
:root[data-theme="dark"] .modal-badge {
  background: var(--surface-2);
}
.modal-badge:empty {
  display: none;
}
.modal-bullets {
  margin-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--line);
}
.modal-bullets:empty {
  display: none;
}
.modal-bullet {
  display: grid;
  gap: 6px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.modal-bullet strong {
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.4;
}
.modal-bullet span {
  color: var(--muted);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   3. AI modal + detail panel. Sibling contract (do not break):
      .ai-detail-toggle[aria-expanded="true"] + .ai-detail-panel opens it.
   -------------------------------------------------------------------------- */
.ai-modal {
  max-width: 700px;
}
.ai-modal-body {
  margin-top: clamp(18px, 2vw, 28px);
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.ai-modal-body p {
  margin: 0 0 1em;
}
.ai-modal-body .ai-modal-sign {
  margin: 1.4em 0 0;
  color: var(--ink);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
}
.ai-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.ai-detail-toggle .acc-chev {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.375rem;
  line-height: 1;
  transition: transform .5s var(--ease), background-color .4s var(--ease-out);
}
:root[data-theme="dark"] .ai-detail-toggle .acc-chev {
  background: var(--surface-2);
}
.ai-detail-toggle[aria-expanded="true"] .acc-chev {
  transform: rotate(90deg);
}
@media (hover: hover) and (pointer: fine) {
  .ai-detail-toggle:hover .acc-chev { background: var(--sage-tint); }
}
.ai-detail-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .55s var(--ease), visibility 0s linear .55s;
}
.ai-detail-toggle[aria-expanded="true"] + .ai-detail-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .55s var(--ease), visibility 0s;
}
.ai-detail-inner {
  min-height: 0;
  overflow: hidden;
}
.ai-detail-inner ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 22px 0 6px;
  list-style: none;
  counter-reset: mg-ai-item;
}
.ai-detail-inner li {
  position: relative;
  padding-left: 40px;
  color: var(--ink-2);
  counter-increment: mg-ai-item;
}
.ai-detail-inner li::before {
  content: counter(mg-ai-item, decimal-leading-zero) ".";
  content: counter(mg-ai-item, decimal-leading-zero) "." / "";
  position: absolute;
  left: 0;
  top: .2em;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   4. Video modals (journey <video>, vimeo <iframe>): dark "cinema" sheet,
      16:9 stage sized to fit the viewport height.
   -------------------------------------------------------------------------- */
.overlay--media,
.overlay--game {
  --ring: var(--focus-on-dark);
}
.video-modal {
  display: flex;
  flex-direction: column;
  max-width: none;
  width: min(1120px, 100%, calc((100vh - 168px) * 16 / 9));
  width: min(1120px, 100%, calc((100dvh - 168px) * 16 / 9));
  min-width: min(280px, 100%);
  padding: 0;
  overflow: hidden;
  background: var(--games-bg);
  color: var(--games-ink);
}
:root[data-theme="dark"] .video-modal,
:root[data-theme="dark"] .game-modal {
  background: var(--games-bg);
}
.video-modal__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  min-height: 64px;
  padding: 10px 10px 10px clamp(16px, 2vw, 24px);
}
.video-modal__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--games-ink);
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
}
.video-modal .modal-close,
.game-modal .modal-close {
  position: static;
  margin-left: auto;
  background: color-mix(in srgb, var(--games-ink) 12%, transparent);
  color: var(--games-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--games-ink) 22%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .video-modal .modal-close:hover,
  .game-modal .modal-close:hover {
    background: color-mix(in srgb, var(--games-ink) 22%, transparent);
  }
}
.vid {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--games-bg);
}
.vid > iframe,
.vid > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--games-bg);
}
.vid-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 16px clamp(16px, 2vw, 24px) 20px;
  color: var(--games-muted);
  font-size: var(--t-small);
  line-height: 1.45;
}
.vid-foot > span:first-child {
  color: var(--games-ink);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Game modal: head bar + iframe stage + "Thanks for playing." screen
      (#gameThanks gets .show for 1.4s before the modal closes).
   -------------------------------------------------------------------------- */
.game-modal {
  --game-head-h: 60px;
  display: flex;
  flex-direction: column;
  max-width: none;
  width: min(1180px, 100%);
  height: min(880px, calc(100vh - 32px));
  height: min(880px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  background: var(--games-bg);
  color: var(--games-ink);
}
.game-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  box-sizing: border-box;
  height: var(--game-head-h);
  padding: 8px 8px 8px clamp(16px, 2vw, 24px);
  border-bottom: 1px solid color-mix(in srgb, var(--games-ink) 14%, transparent);
}
.game-head__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--games-ink);
}
.game-head .t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--games-ink);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--games-bg);
}
.game-body > iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.game-thanks {
  position: absolute;
  inset: var(--game-head-h) 0 0 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: var(--games-bg);
  color: var(--games-ink);
  text-align: center;
}
.game-thanks.show {
  display: flex;
  animation: mg-thanks-in .5s var(--ease-out) both;
}
.game-thanks .tt {
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.game-thanks .ss {
  color: var(--games-muted);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
@keyframes mg-thanks-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   6. Small screens: text modals become bottom sheets; the game goes
      full-screen.
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  .overlay:not(.overlay--media):not(.overlay--game) {
    padding: max(12px, env(safe-area-inset-top, 0px)) 0 0;
  }
  .overlay:not(.overlay--media):not(.overlay--game) > .modal {
    margin: auto 0 0;
    max-width: none;
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(40px);
  }
  .overlay.is-open:not(.overlay--media):not(.overlay--game) > .modal,
  .overlay.open:not(.overlay--media):not(.overlay--game) > .modal {
    transform: none;
  }
  .overlay--game {
    padding: 0;
  }
  .game-modal {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }
}

/* --------------------------------------------------------------------------
   7. Toast (#toast, role=status). Core: set text, add .is-visible; remove
      .is-visible after the timeout. Hidden while empty.
      Integrator: this block is the single source for the toast's position.
      It uses the independent `translate` property, like the 02-components
      base rule it overrides (a `transform` here would ADD to that rule's
      translate and push the toast off-centre).
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  z-index: var(--z-toast);
  box-sizing: border-box;
  max-width: min(480px, calc(100vw - 32px));
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: none;
  translate: -50% 16px;
  transition: opacity .35s var(--ease-out), translate .5s var(--ease-out);
}
.toast:empty {
  visibility: hidden;
}
.toast.is-visible,
.toast.is-open,
.toast.is-shown,
.toast.show {
  opacity: 1;
  translate: -50% 0;
}
@media (max-width: 639.98px) {
  /* clear the chat FAB (56px circle, bottom-right) */
  .toast {
    bottom: max(92px, calc(env(safe-area-inset-bottom, 0px) + 84px));
  }
}

/* --------------------------------------------------------------------------
   8. Reduced motion, forced colours, print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .overlay,
  .modal,
  .modal-close,
  .modal-close > svg,
  .ai-detail-panel,
  .ai-detail-toggle .acc-chev,
  .game-thanks,
  .toast {
    transition: none !important;
    animation: none !important;
  }
  .modal,
  .overlay .modal {
    transform: none !important;
  }
  .toast {
    translate: -50% 0 !important;
  }
}

@media (forced-colors: active) {
  .modal {
    border: 1px solid CanvasText;
  }
  .modal-close,
  .ai-detail-toggle .acc-chev {
    border: 1px solid ButtonText;
  }
  .modal-badge {
    border: 1px solid CanvasText;
  }
  .toast {
    border: 1px solid CanvasText;
  }
}

@media print {
  .overlay,
  .toast {
    display: none !important;
  }
}

/* ==== 10-hero.css ==== */
/* B1: Hero (DESIGN-SPEC §7.1, SPEC-ADDENDUM C3/C4). Scoped to #top / .hero* */

#top.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(640px, min(100svh, 1000px));
  padding-top: calc(var(--header-h) + clamp(24px, 6vh, 72px));
  background: var(--sage);
  color: var(--sage-ink);
  overflow: hidden;
  isolation: isolate;
}
#top .hero__inner { width: 100%; box-sizing: border-box; position: relative; z-index: 3; }
#top .hero__copy { min-width: 0; }
#top .hero__statement {
  margin: 0;
  max-width: 13.5em;
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: 500;
  color: var(--sage-ink);
  text-wrap: balance;
}
#top .hero__eyebrow {
  margin: 24px 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--sage-ink); /* 100% white (ADDENDUM B) */
}

/* Typewriter: the real sentence is always in the DOM. While typing it is
   visually hidden and the aria-hidden layer is shown. */
#top .hero__type {
  position: relative;
  margin: 16px 0 0;
  min-height: 1.4em;
  font-size: var(--t-h3);
  line-height: 1.3;
  max-width: 24em;
  color: var(--sage-ink);
}
#top .hero__type-anim { display: none; }
#top .hero__type.is-typing .hero__type-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#top .hero__type.is-typing .hero__type-anim { display: inline; }
#top .hero__type.is-done .hero__type-text { animation: hero-type-settle .5s var(--ease-out) both; }
#top .hero__caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: currentColor;
  animation: hero-caret 1s steps(1) infinite;
}
@keyframes hero-caret { 50% { opacity: 0; } }
@keyframes hero-type-settle { from { opacity: .3; } to { opacity: 1; } }

#top .hero__ctas { margin-top: clamp(24px, 3vw, 40px); align-items: center; }
#top .hero__journey { color: var(--sage-ink); }

/* ---------- Product window (custo "mailbox"); no 3D tilt (C3) ---------- */
#top .hero-shot {
  position: relative;
  z-index: 2;
  align-self: center;
  width: clamp(260px, 30vw, 520px);
  margin-top: auto;
  padding-top: clamp(32px, 5vh, 64px);
  /* overlap the wordmark below */
  margin-bottom: calc(var(--t-wordmark) * -0.42);
}
#top .hero-shot__window {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sage-tint);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45), 0 0 0 1px var(--glass-edge);
}
#top .hero-shot__slides { position: absolute; inset: 0; }
#top .hero-shot__slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility 0s linear .9s;
}
#top .hero-shot__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s var(--ease), visibility 0s;
}
#top .hero-shot__slide:focus-visible { outline-offset: -4px; }
#top .hero-shot__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: scale .8s var(--ease);
}
@media (hover: hover) {
  #top .hero-shot__slide:hover .hero-shot__img { scale: 1.03; }
}
#top .hero-shot__slide:focus-visible .hero-shot__img { scale: 1.03; }
#top .hero-shot__cap {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#top .hero-shot__controls {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
#top .hero-shot__toggle .hero-shot__ico-play { display: none; }
#top .hero-shot.is-paused .hero-shot__toggle .hero-shot__ico-play { display: block; }
#top .hero-shot.is-paused .hero-shot__toggle .hero-shot__ico-pause { display: none; }
#top .hero-shot__toggle svg { width: 18px; height: 18px; }
#top .hero-shot__dots { display: flex; flex-wrap: wrap; }
#top .hero-shot__dot {
  position: relative;
  width: 28px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--sage-ink);
}
#top .hero-shot__dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  transition: background-color .3s var(--ease), scale .3s var(--ease);
}
#top .hero-shot__dot[aria-current="true"]::before { background: currentColor; scale: 1.25; }
#top .hero-shot__dot:focus-visible { outline-offset: -6px; }

/* ---------- Giant wordmark ---------- */
#top .hero-wordmark {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-inline: var(--gutter);
  font-weight: 500;
  line-height: var(--lh-wordmark);
  color: var(--sage-ink);
  white-space: nowrap;
}
#top .hero-wordmark__inner { display: block; }
#top .hero-wordmark__first {
  display: block;
  margin: 0 0 .35em .2em;
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: 0;
}
#top .hero-wordmark__last {
  display: block;
  font-size: var(--t-wordmark);
  letter-spacing: var(--ls-wordmark);
  margin-bottom: -.13em; /* crop the letter bottoms at the hero edge */
}
#top .hero-wordmark__char {
  display: inline-block;
  transition: translate .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  html:not(.intro-play) #top .hero-wordmark__char:hover { translate: 0 -2%; }
}

/* Flash-free intro curtain (C4 + notes/api/js.md §11): letters wait hidden
   until 05-delight.js decides; if JS never runs they reveal by themselves. */
@keyframes hero-letter-reveal { to { opacity: 1; } }
html.js:not(.intro-done):not(.intro-play) #top .hero-wordmark__char {
  opacity: 0;
  animation: hero-letter-reveal 0s 1.5s forwards;
}
html.intro-play #top .hero-wordmark { transform: none !important; }
html.intro-play #top .hero-wordmark__char { transition: none; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  #top .hero-shot { width: min(78vw, 340px); }
  #top .hero__statement { max-width: none; }
}
/* Desktop: the window sits in the right column beside the statement and only
   grazes the top of the wordmark, so the name stays readable. */
@media (min-width: 1024px) {
  #top .hero-shot {
    position: absolute;
    top: calc(var(--header-h) + clamp(24px, 6vh, 72px));
    right: var(--gutter);
    width: clamp(340px, 36vw, 620px);
    margin: 0;
    padding: 0;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #top .hero__caret { animation: none; }
  #top .hero-shot__slide,
  #top .hero-shot__slide.is-active { transition: none; }
  #top .hero-wordmark__char { transition: none; translate: none !important; }
  html.js:not(.intro-done):not(.intro-play) #top .hero-wordmark__char { opacity: 1; animation: none; }
}
html.reduced-motion #top .hero-wordmark__char { translate: none !important; }

@media (forced-colors: active) {
  #top .hero-shot__dot::before { border-color: CanvasText; }
  #top .hero-shot__dot[aria-current="true"]::before { background: Highlight; }
}

/* ==== 12-intro.css ==== */
/* B1: Intro (DESIGN-SPEC §7.2). Scoped to #intro / .intro-* */

/* Full-sentence label (WAVE1-BRIEF lesson); mirrors the foundation's .sec-label--text. */
#intro .sec-label--sans {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
}

#intro .intro-stats { margin-top: clamp(8px, 2vw, 24px); }
#intro .intro-stat { gap: 0; }
#intro .intro-stat__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-sm);
}
#intro a.intro-stat__link .intro-stat__label {
  align-self: flex-start;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease-out), color .25s;
  padding-bottom: 2px;
}
#intro a.intro-stat__link:hover .intro-stat__label,
#intro a.intro-stat__link:focus-visible .intro-stat__label {
  background-size: 100% 1px;
  color: var(--ink);
}
#intro a.intro-stat__link .intro-stat__num { transition: translate .6s var(--ease-out); }
@media (hover: hover) {
  #intro a.intro-stat__link:hover .intro-stat__num { translate: 0 -4px; }
}

#intro .intro-marquee { margin-top: clamp(64px, 8vw, 128px); }
#intro .marquee__toggle svg { width: 18px; height: 18px; }
#intro .intro-marquee__ico-play { display: none; }
#intro .intro-marquee.is-paused .intro-marquee__ico-play { display: block; }
#intro .intro-marquee.is-paused .intro-marquee__ico-pause { display: none; }

#intro .intro-marquee--offscreen .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  #intro a.intro-stat__link .intro-stat__num { translate: none !important; }
}

/* ==== 20-work.css ==== */
/* 20-work.css (B2): Work gallery, list view, image trail, inspector. */

/* ---------- toolbar ---------- */
#work .work-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; margin-bottom: clamp(40px, 5vw, 72px);
}
#work .work-chips { --chip-row-bleed: 0px; flex: 1 1 auto; min-width: 0; }
#work .work-view { display: flex; gap: 8px; flex: 0 0 auto; }
html:not(.js) #work .work-toolbar { display: none; }

/* ---------- groups ---------- */
#work .work-groups { display: grid; gap: clamp(64px, 8vw, 128px); }
#work .work-group__head {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--gap);
  padding-top: 20px; border-top: 1px solid var(--line); margin-bottom: clamp(28px, 3.5vw, 48px);
}
#work .work-group__index { font-family: var(--font-mono); font-size: var(--t-small); color: var(--muted); padding-top: .5em; }
#work .work-group__title { margin: 0; grid-column: 2; }
#work .work-group__sub { grid-column: 2; margin: 12px 0 0; color: var(--muted); font-size: var(--t-body); max-width: 40em; }

#work .work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3vw, 48px) var(--gap); }
@media (max-width: 1023px) { #work .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  #work .work-grid { grid-template-columns: minmax(0, 1fr); }
  #work .work-group__head { grid-template-columns: minmax(0, 1fr); }
  #work .work-group__title, #work .work-group__sub { grid-column: 1; }
  #work .work-group__index { padding: 0 0 8px; }
}

/* ---------- card ---------- */
#work .work-card { display: flex; flex-direction: column; min-width: 0; }
#work .work-card__media { position: relative; }
#work .work-card__plate { cursor: pointer; }
html:not(.js) #work .work-card__plate { cursor: default; }
#work .work-card__badge { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 80px); pointer-events: none; }
#work .work-card__ext { position: absolute; right: 12px; bottom: 12px; }
#work .work-card:hover .plate__img,
#work .work-card:focus-within .plate__img { transform: scale(1.03); }
#work .work-card__title { margin: 20px 0 8px; font-size: var(--t-h3); line-height: 1.3; }
#work .work-card__open {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-block; min-height: 44px; padding: 8px 0;
  font: inherit; color: var(--ink); text-align: left;
}
#work .work-card__open:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
#work .work-card__open:focus-visible { outline: 2px solid var(--ring, var(--focus)); outline-offset: 2px; border-radius: 4px; }
#work .work-card__desc {
  margin: 0 0 16px; color: var(--muted); font-size: 1rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#work .work-card__cta { align-self: flex-start; margin-top: auto; }

/* ---------- teaser (Your call) ---------- */
#work .work-teaser {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: clamp(32px, 3vw, 48px);
  padding: 20px 24px; min-height: 44px; border-radius: var(--r); background: var(--sage-pale);
  color: var(--ink); text-decoration: none; transition: background-color var(--dur-1);
}
#work .work-teaser:hover { background: var(--sage-tint); }
#work .work-teaser__kicker,
#work .work-teaser__time { font-family: var(--font-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); }
#work .work-teaser__title { font-size: var(--t-h3); font-weight: 500; flex: 1 1 16em; }
#work .work-teaser__time::after {
  content: ""; display: inline-block; width: .9em; height: .9em; margin-left: 10px; vertical-align: -.1em;
  background: currentColor; -webkit-mask: var(--icon-arrow-right) center/contain no-repeat; mask: var(--icon-arrow-right) center/contain no-repeat;
}

/* ---------- list view ---------- */
#work .work-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
#work .work-list__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 12px 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
#work .work-list__title {
  all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; font-size: var(--t-h2);
  line-height: 1.18; letter-spacing: -.015em; font-weight: 500; color: var(--ink); transition: color var(--dur-1);
}
#work .work-list__title:focus-visible { outline: 2px solid var(--ring, var(--focus)); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) {
  #work .work-list:hover .work-list__title { color: var(--muted-2); }
  #work .work-list .work-list__item:hover .work-list__title { color: var(--ink); }
}
#work .work-list__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: flex-end; }
#work .work-list__group { font-family: var(--font-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 767px) {
  #work .work-list__item { grid-template-columns: minmax(0, 1fr) 44px; }
  #work .work-list__meta { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  #work .work-list__ext { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- image trail ---------- */
#work .work-trail {
  position: fixed; left: 0; top: 0; z-index: calc(var(--z-header) - 1); width: 280px; pointer-events: none;
  opacity: 0; transition: opacity .25s var(--ease-out); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.18); background: var(--sage-tint);
}
#work .work-trail.is-visible { opacity: 1; }
#work .work-trail__img { display: block; width: 100%; height: auto; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { #work .work-trail { display: none; } }

/* ---------- inspector ---------- */
.inspector { position: fixed; inset: 0; z-index: var(--z-inspector); }
.inspector[hidden] { display: none !important; }
.inspector__veil {
  position: absolute; inset: 0; background: var(--veil);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.inspector__stage {
  position: absolute; margin: 0; top: 50%; left: calc(380px + (100vw - 380px) / 2);
  width: min(60vw, calc(100vw - 380px - 96px)); transform: translate(-50%, -46%); opacity: 0;
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); cursor: zoom-out;
}
.inspector__shot { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0,0,0,.22); background: var(--sage-tint); }
.inspector__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: 380px; max-width: 100%;
  background: var(--bg); color: var(--ink); box-shadow: var(--shadow-hairline);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(-100%); transition: transform .6s var(--ease-out);
}
.inspector.is-open .inspector__veil { opacity: 1; }
.inspector.is-open .inspector__stage { opacity: 1; transform: translate(-50%, -50%); }
.inspector.is-open .inspector__panel { transform: none; }
.inspector__bar { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.inspector__count { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--muted); margin-left: 6px; }
.inspector__close { margin-left: auto; }
.inspector__x { position: relative; width: 16px; height: 16px; display: block; }
.inspector__x::before, .inspector__x::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.inspector__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.inspector__nav:disabled { opacity: .4; cursor: default; }
.inspector__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 28px 24px 40px; }
.inspector__thumb { display: none; margin-bottom: 24px; }
.inspector__group { font-family: var(--font-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; }
.inspector__title { margin: 0 0 14px; outline: none; }
.inspector__badge { margin-bottom: 20px; }
.inspector__desc { color: var(--ink-2); font-size: var(--t-body); line-height: 1.55; margin: 0 0 24px; }
.inspector__meta { margin: 0 0 28px; }
.inspector__actions { margin-bottom: 24px; }
.inspector__actions .btn { padding-inline: 24px; font-size: 1rem; }
.inspector__ne {
  display: inline-block; width: .8em; height: .8em; margin-left: .45em; background: currentColor;
  -webkit-mask: var(--icon-arrow-ne) center/contain no-repeat; mask: var(--icon-arrow-ne) center/contain no-repeat;
}

@media (max-width: 1023px) {
  .inspector__stage { display: none; }
  .inspector__thumb { display: block; }
  .inspector__panel {
    top: auto; right: 0; width: 100%; max-height: 90vh; max-height: 90dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inspector__veil, .inspector__stage, .inspector__panel { transition: none; }
  .inspector__stage { transform: translate(-50%, -50%); }
}
@media (forced-colors: active) {
  .inspector__panel { border-right: 1px solid CanvasText; }
  .inspector__x::before, .inspector__x::after, .inspector__ne { background: CanvasText; }
}

/* ==== 30-approach.css ==== */
/* B3 — Approach (#band-pov) */
#band-pov .pov-grid { align-items: start; }
#band-pov .pov-media { max-width: 420px; }
#band-pov .pov-body { min-width: 0; }
#band-pov .pov-list { --num-dur: 6s; }
#band-pov .pov-list .num-list__text { margin: 0; outline: none; }
#band-pov .pov-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
#band-pov .pov-toggle svg { width: 20px; height: 20px; }
#band-pov .pov-toggle .pov-toggle__play { display: none; }
#band-pov .pov-toggle[aria-pressed="true"] .pov-toggle__play { display: block; }
#band-pov .pov-toggle[aria-pressed="true"] .pov-toggle__pause { display: none; }
#band-pov .pov-sig {
  margin: clamp(28px, 3vw, 48px) 0 0;
  max-width: 34em;
  font-size: var(--t-body);
  line-height: var(--lh-body, 1.55);
  color: var(--muted);
}
@media (max-width: 1023px) {
  #band-pov .pov-media { max-width: 320px; }
}
@media (max-width: 767px) {
  #band-pov .pov-media { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  #band-pov .pov-toggle { display: none; }
}

/* ==== 32-people.css ==== */
/* B3 — Facilitation (#band-people) */
#band-people .people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px) var(--gap);
}
@media (max-width: 900px) {
  #band-people .people-grid { grid-template-columns: minmax(0, 1fr); }
}
#band-people .people-col { min-width: 0; }
#band-people .people-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
}
#band-people .people-col__index {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#band-people .people-col__icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#band-people .people-col__title {
  margin: 20px 0 8px;
  font-size: var(--t-h2);
  outline: none;
}
#band-people .people-list { margin: 0; padding: 0; list-style: none; }
#band-people .people-list li {
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--muted);
}
#band-people .people-list li:last-child { border-bottom: 0; }
#band-people .people-list b {
  display: block;
  margin-bottom: 4px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

/* ==== 34-build.css ==== */
/* B4: AI Build (#band-build) + Current project (#build-now) */
#band-build { padding-block: clamp(16px, 2vw, 24px) var(--section-y); }
#band-build .build-grid { align-items: start; }
#band-build .build-intro .btn-pair { margin-top: clamp(24px, 3vw, 40px); }

/* Steps (custo app steps with cue points) */
#band-build .build-steps { list-style: none; margin: 0; padding: 0; }
#band-build .build-step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: var(--gap);
  padding-block: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--line);
  position: relative;
}
#band-build .build-step:last-child { border-bottom: 1px solid var(--line); }
#band-build .build-step::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease);
}
#band-build .build-step__index { grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 15px; color: var(--muted); padding-top: .4em; }
#band-build .build-step__title { font-size: var(--t-h2); margin: 0 0 .5em; color: var(--ink); transition: opacity .6s var(--ease); }
#band-build .build-step__text { margin: 0; color: var(--muted); max-width: 34em; }

/* Inactive steps stay legible: slightly dimmed title only (text stays muted at full contrast) */
html.js #band-build .build-steps.is-cued .build-step:not(.is-active) .build-step__title { opacity: .72; }
html.js #band-build .build-steps.is-cued .build-step.is-active::after { transform: scaleX(1); }

/* Pull quote */
#band-build .build-quote { margin: clamp(56px, 7vw, 120px) 0; padding: 0; }
#band-build .build-quote p { font-size: var(--t-h2); line-height: 1.2; color: var(--ink); margin: 0; max-width: 20em; }

/* Resource tile: single light tile inside the dark panel */
#band-build .build-resource { border-radius: var(--r); overflow: hidden; }
#band-build .build-resource .link-arrow { margin-top: 1.25em; }
@media (min-width: 768px) {
  #band-build .build-resource { grid-template-columns: 1fr; }
}
@media (min-width: 1280px) {
  #band-build .build-resource { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

/* Current project (on white, after the panel) */
#band-build .build-now { padding-top: var(--section-y); }
#band-build .build-now__body p { color: var(--muted); max-width: 34em; margin: 0 0 1em; }
#band-build .build-now__list { margin-block: clamp(32px, 4vw, 56px); }
#band-build .build-now__close { color: var(--ink); font-weight: 500; margin: 0; }

@media (max-width: 767px) {
  #band-build .build-step { grid-template-columns: 1fr; }
  #band-build .build-step__index { grid-row: auto; padding: 0 0 .5em; }
}

@media (prefers-reduced-motion: reduce) {
  #band-build .build-step::after, #band-build .build-step__title { transition: none; }
}

/* ==== 36-formats.css ==== */
/* B3 — Modalities (#band-overview) */
#band-overview .fmt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 1024px) {
  #band-overview .fmt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #band-overview .fmt-grid { grid-template-columns: minmax(0, 1fr); }
}
#band-overview .fmt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-height: 280px;
  min-width: 0;
  padding: 32px 32px 96px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
}
#band-overview .fmt-card__icon {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#band-overview .fmt-card__text {
  margin: 0;
  font-size: var(--t-h3);
  line-height: 1.43;
  color: var(--muted-2);
}
#band-overview .fmt-card__lead {
  display: block;
  margin-bottom: 6px;
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
}
#band-overview .fmt-card__plus {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inverse);
  transition: transform var(--dur-2) var(--ease-out);
}
#band-overview .fmt-card__plus::before {
  content: "";
  position: absolute;
  inset: 13px;
  background: currentColor;
  -webkit-mask: var(--icon-plus) center / contain no-repeat;
  mask: var(--icon-plus) center / contain no-repeat;
}
@media (hover: hover) {
  #band-overview .fmt-card:hover { background: var(--sage-tint); }
  #band-overview .fmt-card:hover .fmt-card__plus { transform: rotate(90deg); }
}
#band-overview .fmt-card:focus-visible { background: var(--sage-tint); }
#band-overview .fmt-card:focus-visible .fmt-card__plus { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  #band-overview .fmt-card__plus { transition: none; }
}
@media (forced-colors: active) {
  #band-overview .fmt-card { border: 1px solid CanvasText; }
  #band-overview .fmt-card__plus::before { background: CanvasText; }
}

/* ==== 40-journey.css ==== */
/* B5 Journey (DESIGN-SPEC 7.8, ADDENDUM C1/C7). Default = plain timeline; .jr--enhanced = sticky stage. */
#journey {
  --jr-t1: #E4E8E4; --jr-t2: #E9E4DA; --jr-t3: #DCE3E6; --jr-t4: #E6DEE2;
  --jr-t5: #DDE5DE; --jr-t6: #E8E2D6; --jr-t7: #DFE2EA; --jr-t8: #E3E6DC;
  --jr-ch-h: 60vh;
}
[data-theme="dark"] #journey {
  --jr-t1: #1C211D; --jr-t2: #24211B; --jr-t3: #1A2124; --jr-t4: #241D21;
  --jr-t5: #1A231C; --jr-t6: #262117; --jr-t7: #1D2029; --jr-t8: #20241A;
}
#journey .jr-ch:nth-child(8n+1) { --jr-tint: var(--jr-t1); }
#journey .jr-ch:nth-child(8n+2) { --jr-tint: var(--jr-t2); }
#journey .jr-ch:nth-child(8n+3) { --jr-tint: var(--jr-t3); }
#journey .jr-ch:nth-child(8n+4) { --jr-tint: var(--jr-t4); }
#journey .jr-ch:nth-child(8n+5) { --jr-tint: var(--jr-t5); }
#journey .jr-ch:nth-child(8n+6) { --jr-tint: var(--jr-t6); }
#journey .jr-ch:nth-child(8n+7) { --jr-tint: var(--jr-t7); }
#journey .jr-ch:nth-child(8n)   { --jr-tint: var(--jr-t8); }

/* Bypass links (visible, small) */
.jr-bypass {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-mono); font-size: var(--t-small, .875rem);
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.jr-bypass:hover { color: var(--ink); }
#journey-end { margin-top: clamp(16px, 3vw, 40px); }

/* ---------- Plain timeline (default, reduced motion, <768, calm) ---------- */
.jr-scroller { padding-inline: var(--gutter); max-width: 1920px; margin-inline: auto; }
.jr-constellation { display: none; }
.jr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.jr-ch {
  background: var(--jr-tint); color: var(--ink);
  border-radius: var(--r, 16px); padding: clamp(24px, 4vw, 48px);
  display: grid; gap: 12px; min-width: 0;
}
.jr-ch__country { margin: 0; font-size: var(--t-h2); font-weight: 500; line-height: 1.05; overflow-wrap: anywhere; }
.jr-ch__meta, .jr-ch__yr { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .02em; color: var(--ink); opacity: .8; }
.jr-ch__meta { margin: 6px 0 0; }
.jr-ch__org { margin: 0; font-weight: 600; }
.jr-ch__text { margin: 4px 0 0; max-width: 40em; }
.jr-ch__roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jr-ch__yr { display: inline-block; min-width: 8.5em; opacity: 1; }
.jr-pager { display: none; }

/* ---------- Enhanced sticky stage ---------- */
.jr--enhanced .jr-scroller {
  position: relative; padding: 0; max-width: none;
  height: calc(100vh - var(--header-h) + 8 * var(--jr-ch-h));
}
.jr--enhanced .jr-stage {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); overflow: hidden;
}
.jr--enhanced .jr-constellation {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 20; pointer-events: none; color: var(--ink);
}
.jr-constellation__base { fill: none; stroke: currentColor; stroke-opacity: .12; stroke-width: 1; }
.jr-constellation__line {
  fill: none; stroke: currentColor; stroke-width: 1;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--jr-f, 0) / 8);
}
.jr-node circle { fill: var(--bg); stroke: currentColor; stroke-width: 1; transition: fill .4s var(--ease-out); }
.jr-node text { font-family: var(--font-mono); font-size: 13px; fill: currentColor; text-anchor: middle; opacity: .55; }
.jr-node.is-on circle { fill: currentColor; }
.jr-node.is-on text { opacity: 1; }

.jr--enhanced .jr-list { display: block; position: absolute; inset: 0; }
.jr--enhanced .jr-ch {
  position: absolute; inset: 0; border-radius: 0; padding: clamp(24px, 4vw, 64px);
  display: block;
  clip-path: inset(calc(var(--p, 1) * 100%) 0 0 0);
  will-change: clip-path;
}
.jr--enhanced .jr-ch:first-child { --p: 0; }
.jr--enhanced .jr-ch__subject {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92%, 1400px); text-align: center; z-index: 1;
}
.jr--enhanced .jr-ch__country { font-size: calc(var(--t-wordmark) * .55); letter-spacing: -.03em; line-height: .95; overflow-wrap: normal; }
.jr--enhanced .jr-ch__meta { font-size: .9375rem; margin-top: 16px; }
.jr--enhanced .jr-ch__facts {
  position: absolute; left: clamp(24px, 4vw, 64px); bottom: clamp(24px, 5vh, 64px);
  max-width: min(38em, 60%); z-index: 1;
}

/* Dot pager: same right-edge channel as #sectionRail (C7) */
.jr--enhanced .jr-pager {
  display: block; position: fixed; right: clamp(8px, 1.4vw, 24px); top: 50%;
  transform: translateY(-50%); z-index: var(--z-rail, 50);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s;
}
.jr--enhanced .jr-pager.is-active { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-out); }
.jr-pager__list { list-style: none; margin: 0; padding: 0; display: grid; }
.jr-dot {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
}
.jr-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid currentColor; transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.jr-dot:hover::before, .jr-dot:focus-visible::before { transform: scale(1.4); }
.jr-dot[aria-current="true"]::before { background: currentColor; transform: scale(1.4); }

@media (max-width: 1023px) {
  .jr--enhanced .jr-ch__facts { max-width: calc(100% - 2 * clamp(24px, 4vw, 64px) - 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .jr-ch, .jr-node circle, .jr-dot::before { transition: none; }
}
@media (forced-colors: active) {
  .jr-dot::before { border-color: CanvasText; }
  .jr-dot[aria-current="true"]::before { background: Highlight; }
}

/* ==== 50-experience.css ==== */
/* 50-experience.css — Experience shell, Impact (+ evidence/ladder), Industries, Education. Owner: B6.
   Tabs/accordion visuals come from 02-components.css; this file only extends them. */

#band-experience .exp-tabs { min-width: 0; }

/* ---------- Impact ---------- */
#band-experience .exp-impact__bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(24px, 3vw, 48px);
}
#band-experience .exp-impact__bar:not(:has(:not([hidden]))) { display: none; }

/* keep focus rings of edge links visible while still clipping the outer dividers */
#band-experience .exp-impact { overflow: clip; overflow-clip-margin: 6px; }
#band-experience .exp-metric { gap: 14px; }

#band-experience .exp-metric__head {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}
#band-experience .exp-metric__num {
  display: block;
  margin-bottom: 6px;
  font-size: var(--t-h1);
  line-height: 1;
  letter-spacing: var(--ls-h1);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
@media (max-width: 559.98px) {
  #band-experience .exp-impact { --stats-cols: 1; }
}
#band-experience .exp-metric__desc { color: var(--muted); max-width: 40em; }

/* before / after hairline bars (aria-hidden; metric text is the content) */
#band-experience .exp-bars {
  display: grid;
  gap: 8px;
  max-width: 28rem;
  margin-top: 4px;
}
#band-experience .exp-bars__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
#band-experience .exp-bars__lbl,
#band-experience .exp-bars__cap {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
#band-experience .exp-bars__cap { margin: 2px 0 0; text-transform: none; }
#band-experience .exp-bars__track {
  position: relative;
  display: block;
  height: 2px;
  background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat;
}
#band-experience .exp-bars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: var(--ink);
}
/* 0: a single tick */
#band-experience .exp-bars__fill.is-zero { width: 2px; }
/* "under": open, dashed cap at the end */
#band-experience .exp-bars__fill.is-under {
  background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px);
}
#band-experience .exp-bars__fill.is-under::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  bottom: -4px;
  border-right: 1px dashed var(--ink);
}
/* "at least": a short dashed extension */
#band-experience .exp-bars__fill.is-atleast::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 18px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px);
}

/* evidence lines */
#band-experience .exp-ev {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: 4px;
}
#band-experience .exp-ev__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
#band-experience .exp-ev__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  margin: 0;
  padding: 0;
}
#band-experience .exp-ev__link {
  min-height: var(--tap);
  text-align: left;
}
#band-experience .exp-ev__rel {
  font-family: var(--font-mono);
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--muted);
}

/* ---------- Kirkpatrick ladder ---------- */
#band-experience .exp-ladder__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0 0 clamp(24px, 3vw, 40px);
  padding: 0;
}
#band-experience .exp-ladder__counts li + li::before {
  content: "·";
  margin-right: 6px;
  color: var(--muted);
}
#band-experience .exp-ladder__count {
  min-height: var(--tap);
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}
@media (hover: hover) {
  #band-experience .exp-ladder__count:hover { color: var(--ink); text-decoration-color: currentColor; }
}

#band-experience .exp-ladder__grid {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
}
@media (min-width: 1024px) {
  #band-experience .exp-ladder__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

#band-experience .exp-ladder__rungs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
#band-experience .exp-rung {
  padding-block: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--line);
}
#band-experience .exp-rung__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}
#band-experience .exp-rung__lvl {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted);
  min-width: 2.5rem;
}
#band-experience .exp-rung__title {
  margin: 0;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  flex: 1 1 auto;
}
#band-experience .exp-rung__def {
  margin: 6px 0 0;
  padding-left: calc(2.5rem + 16px);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted);
}
#band-experience .exp-ladder__items {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
}
#band-experience .exp-rung .exp-ladder__items { padding-left: calc(2.5rem + 16px); }
#band-experience .exp-ladder__item {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
#band-experience .exp-ladder__text { font-size: var(--t-body); line-height: 1.45; }
#band-experience .exp-ladder__src {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
@media (hover: hover) {
  #band-experience .exp-ladder__item:hover .exp-ladder__text { text-decoration: underline; text-underline-offset: 4px; }
}
#band-experience .exp-shelf { margin-top: clamp(32px, 4vw, 56px); }
#band-experience .exp-ladder__grid > .exp-shelf { margin-top: 0; }
#band-experience .exp-shelf__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--muted);
}

/* ---------- Industries (basetis list + sticky detail) ---------- */
#band-experience .exp-ind {
  display: grid;
  gap: clamp(32px, 5vw, 96px);
}
@media (min-width: 768px) {
  #band-experience .exp-ind { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
#band-experience .exp-ind__list {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
#band-experience .exp-ind__list li { border-top: 1px solid var(--line); }
#band-experience .exp-ind__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: var(--tap);
  padding: clamp(10px, 1.2vw, 16px) 0;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: 500;
  text-align: left;
  color: var(--muted-2);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), padding var(--dur-2) var(--ease);
}
#band-experience .exp-ind__btn::after {
  content: "";
  flex: none;
  width: .6em;
  height: .6em;
  background: currentColor;
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
  mask: var(--icon-arrow-right) center / contain no-repeat;
  opacity: 0;
  translate: -8px 0;
  transition: opacity var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease);
}
#band-experience .exp-ind__btn[aria-pressed="true"] { color: var(--ink); }
#band-experience .exp-ind__btn[aria-pressed="true"]::after { opacity: 1; translate: 0 0; }
@media (hover: hover) {
  #band-experience .exp-ind__btn:hover { color: var(--ink); }
}
@media (max-width: 767.98px) {
  #band-experience .exp-ind__btn { color: var(--ink); }
  #band-experience .exp-ind__btn::after {
    opacity: 1;
    translate: 0 0;
    -webkit-mask-image: var(--icon-plus);
    mask-image: var(--icon-plus);
  }
  #band-experience .exp-ind__detail { display: none; }
}
#band-experience .exp-ind__detail {
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--surface);
}
@media (min-width: 768px) {
  #band-experience .exp-ind__detail { position: sticky; top: calc(var(--header-h) + 40px); }
}
#band-experience .exp-ind__detail.is-swap { animation: exp-ind-in .5s var(--ease-out) backwards; }
@keyframes exp-ind-in { from { opacity: 0; translate: 0 8px; } }
#band-experience .exp-ind__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
#band-experience .exp-ind__title { margin: 0 0 20px; font-size: var(--t-h2); line-height: var(--lh-h2); }
#band-experience .exp-ind__row {
  display: grid;
  gap: 4px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
}
#band-experience .exp-ind__row strong { color: var(--ink); font-weight: 500; }
#band-experience .exp-ind__row span { color: var(--muted); }

/* ---------- Education ---------- */
#band-experience .exp-edu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 0;
  padding: 0;
}
@media (min-width: 560px) { #band-experience .exp-edu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #band-experience .exp-edu { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#band-experience .exp-edu__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: translate var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
@media (hover: hover) {
  #band-experience .exp-edu__card:hover { translate: 0 -4px; box-shadow: var(--shadow-soft); }
}
#band-experience .exp-edu__mark {
  margin: 0 0 clamp(16px, 2vw, 32px);
  font-size: var(--t-h1);
  line-height: 1;
  letter-spacing: var(--ls-h1);
  color: var(--ink);
}
#band-experience .exp-edu__field { margin: 0; color: var(--ink-2); font-size: var(--t-body); }
#band-experience .exp-edu__org { margin: 0; color: var(--muted); font-size: var(--t-small); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #band-experience .exp-ind__detail.is-swap { animation: none; }
  #band-experience .exp-ind__btn,
  #band-experience .exp-ind__btn::after,
  #band-experience .exp-edu__card { transition: none; }
  #band-experience .exp-edu__card:hover { translate: none; }
}
html.reduced-motion #band-experience .exp-ind__detail.is-swap { animation: none; }

/* forced colors: bars stay visible */
@media (forced-colors: active) {
  #band-experience .exp-bars__fill { background: CanvasText; }
}

/* ==== 52-cases.css ==== */
/* B7: Career + Case Studies (parts inside #panel-career / #panel-casestudies)
   Prefixes: .car- (career), .cs- (case studies), .lvl-badge, .ba- (before/after),
   .scn- (scenario), .mind (mindful minute). Tokens only; both themes; reduced motion. */

/* ---------- shared panel content ---------- */
.car-acc .acc__inner > *,
.cs-acc .acc__inner > * {
  /* room for focus rings inside the clipped .acc__inner */
  margin-inline: 4px;
}

.car-body {
  max-width: 46em;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.car-body p { margin: 0; }
.car-body p + p { margin-top: 1em; }
.car-body b { color: var(--ink); font-weight: 600; }

.car-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 24px;
}

.car-ask,
.cs-ask {
  margin-top: 28px;
}

.car-links .link-arrow,
.car-ask,
.cs-ask,
.ba-tools .link-arrow,
.scn-debrief__links .link-arrow,
.mind__open {
  min-height: var(--tap);
}

/* ---------- case-study row: tag + level badge ---------- */
.cs-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.lvl-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.lvl-badge[hidden] { display: none; }

/* ---------- STAR grid ---------- */
.cs-star {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
}
.cs-star:focus { outline: none; }
.cs-star__row {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cs-star dt,
.scn-context dt,
.scn-debrief__star dt {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.cs-star dd,
.scn-context dd,
.scn-debrief__star dd {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
@media (min-width: 768px) {
  .cs-star { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}
@media (min-width: 1180px) {
  .cs-star { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- before / after (research #10) ---------- */
.ba-figure {
  margin: 0 0 32px;
}
.ba-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  .ba-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ba-before,
.ba-after {
  padding: 16px;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-hairline);
}
.ba-label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.ba-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ba-shape {
  fill: var(--sage-tint);
  stroke: var(--ink-2);
  stroke-width: 1.5;
}
.ba-ln {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ba-dash { stroke-dasharray: 4 6; stroke: var(--muted); }
.ba-solid { fill: var(--ink-2); }
.ba-outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.ba-chg { transition: stroke-width var(--dur-2) var(--ease); }
/* highlight = heavier ink weight + an outline shape (never colour alone) */
.ba-figure.is-highlight .ba-chg { stroke: var(--ink); stroke-width: 3; }
.ba-figure.is-highlight .ba-solid.ba-chg { fill: var(--ink); }
.ba-figure.is-highlight .ba-outline { opacity: 1; }
.ba-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 32px;
  margin-top: 12px;
}
.ba-highlight[aria-pressed="true"] { font-weight: 600; }

/* ---------- "Your call" scenario (research #2) ---------- */
.scn {
  margin: 0 0 40px;
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-hairline);
}
.scn__head { margin-bottom: 20px; }
.scn__title {
  margin: 0;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.scn__title:focus { outline: none; }
.scn__note {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted);
}
.scn__start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.scn__time {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted);
}
.scn-q {
  margin: 0 0 24px;
  padding-left: 18px;
  border-left: 2px solid var(--ink);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
}
.scn-q p { margin: 0; }
.scn-context {
  display: grid;
  gap: 16px 32px;
  margin: 0 0 20px;
}
@media (min-width: 768px) {
  .scn-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.scn-ctrl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

/* status board: mono hairline steps, text first */
.scn-board {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}
@media (min-width: 900px) {
  .scn-board { grid-template-columns: 3fr 2fr; gap: 32px; }
}
.scn-board__label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.scn-board__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scn-board__step {
  position: relative;
  padding: 8px 0 0;
  flex: 1 1 8em;
  min-width: 0;
  border-top: 2px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted-2);
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.scn-board__step.is-past { color: var(--muted); border-top-color: var(--line-strong); }
.scn-board__step[aria-current="step"] {
  color: var(--ink);
  font-weight: 600;
  border-top-color: var(--ink);
}
.scn-board__step[aria-current="step"]::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}

.scn-steps { display: grid; gap: 24px; }
.scn-step {
  margin: 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  min-width: 0;
  animation: scn-in .5s var(--ease-out) both;
}
.scn-step__legend {
  display: grid;
  gap: 4px;
  padding: 0;
  margin-bottom: 14px;
}
.scn-step__num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.scn-step__q {
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  color: var(--ink);
}
.scn-step__opts { display: grid; gap: 8px; }
.scn-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--tap);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.scn-opt input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ink);
}
.scn-opt label {
  flex: 1;
  color: var(--ink-2);
  cursor: pointer;
}
/* make the whole row the hit area */
.scn-opt label::after {
  content: "";
  position: absolute;
  inset: 0;
}
.scn-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.scn-opt:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (hover: hover) {
  .scn-step:not(:disabled) .scn-opt:hover { background-color: var(--surface-2); }
}
.scn-step:disabled .scn-opt { opacity: .62; }
.scn-step:disabled .scn-opt label { cursor: default; }
.scn-step:disabled .scn-opt.is-chosen {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.scn-step:disabled .scn-opt.is-chosen label { color: var(--ink); font-weight: 600; }
.scn-step__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 14px;
}
.scn-step__hint {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.scn-result {
  margin-top: 16px;
  padding-left: 18px;
  border-left: 2px solid var(--line-strong);
}
.scn-consequence {
  margin: 0 0 6px;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}
.scn-consequence:focus { outline: none; }
.scn-consequence__k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted);
  margin-right: 6px;
}
.scn-result__text {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  max-width: 44em;
}

.scn-debrief {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
  animation: scn-in .5s var(--ease-out) both;
}
.scn-debrief__title {
  margin: 0 0 16px;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
}
.scn-debrief__title:focus { outline: none; }
.scn-debrief__star {
  display: grid;
  gap: 16px 32px;
  margin: 0 0 20px;
}
@media (min-width: 768px) {
  .scn-debrief__star { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.scn-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
}
.scn-facts li {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink);
}
.scn-path {
  display: grid;
  gap: 0;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.scn-path__row {
  display: grid;
  gap: 4px 24px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .scn-path__row { grid-template-columns: 1fr 1.3fr 1.3fr; }
}
.scn-path__row p { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.scn-path__q { color: var(--muted) !important; }
.scn-path__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.scn-debrief__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 32px;
}
.scn-practice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
}
.scn-practice__note { font-size: var(--t-small); color: var(--muted); }

@keyframes scn-in {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- mindful minute (career › The Mindful Design) ---------- */
.mind { --mind-dur: 0s; margin-top: 28px; }
.mind__body {
  margin-top: 12px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: var(--sage-pale);
  box-shadow: var(--shadow-hairline);
}
.mind__intro {
  margin: 0 0 20px;
  max-width: 40em;
  color: var(--ink-2);
}
.mind__stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}
.mind__orb {
  position: relative;
  flex: none;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
}
.mind__orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.mind__ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--sage-tint);
  box-shadow: inset 0 0 0 2px var(--ink-2);
  transform: scale(.45);
  transition: transform var(--mind-dur, 0s) cubic-bezier(.45, 0, .55, 1);
}
.mind[data-phase="in"] .mind__ring,
.mind[data-phase="hold"] .mind__ring { transform: scale(1); }
.mind[data-phase="out"] .mind__ring { transform: scale(.45); }
.mind[data-phase="hold"] .mind__ring { transition-duration: 0s; }
.mind__cues { min-width: 0; flex: 1 1 14em; }
.mind__phase {
  margin: 0;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: 500;
  color: var(--ink);
}
.mind__count {
  min-height: 1.5em;
  margin: 4px 0 12px;
  font-family: var(--font-mono);
  font-size: var(--t-h3);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mind__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mind__steps li {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.mind__steps li[aria-current="step"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.mind__ctrl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ---------- reduced motion: static circle, instant steps ---------- */
@media (prefers-reduced-motion: reduce) {
  .mind__ring { transition: none !important; transform: scale(.72) !important; }
  .scn-step,
  .scn-debrief { animation: none !important; }
  .ba-outline,
  .ba-chg,
  .scn-board__step { transition: none !important; }
}
html.reduced-motion .mind__ring { transition: none; transform: scale(.72); }
html.reduced-motion .scn-step,
html.reduced-motion .scn-debrief { animation: none; }

/* ---------- forced colours ---------- */
@media (forced-colors: active) {
  .ba-shape, .ba-ln, .ba-outline { stroke: CanvasText; }
  .ba-solid { fill: CanvasText; }
  .scn-board__step[aria-current="step"]::before { background: CanvasText; }
  .mind__ring { box-shadow: inset 0 0 0 2px CanvasText; }
}

@media print {
  .scn__start, .scn-ctrl, .mind, .ba-tools { display: none !important; }
}

/* ==== 60-practice.css ==== */
/* 60-practice.css — B8: Guidelines (#band-practice) + shared sub-header row (.pr-subhead, also used in #band-foundations) */

.pr-blocks,
.fd-blocks {
  display: grid;
  gap: clamp(72px, 9vw, 140px);
}

/* custo two-column sub-header: title left, sub right */
.pr-subhead {
  display: grid;
  gap: 10px 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-bottom: clamp(28px, 4vw, 56px);
}
.pr-subhead__title {
  font-size: var(--t-h2);
  line-height: var(--lh-h2, 1.15);
  letter-spacing: var(--ls-h2, -0.02em);
  font-weight: 500;
  color: var(--ink);
}
.pr-subhead__sub {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--muted);
  max-width: 34em;
}
@media (min-width: 768px) {
  .pr-subhead {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--gap);
    align-items: baseline;
  }
}

/* ---------- Design Principles: 2 large tiles ---------- */
#band-practice .pr-principles {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 768px) {
  #band-practice .pr-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#band-practice .pr-principle {
  --muted: var(--muted-2);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: clamp(200px, 22vw, 300px);
  padding: clamp(24px, 3vw, 40px);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color .5s var(--ease), translate .6s var(--ease-out);
}
#band-practice .pr-principle__text { display: grid; gap: 10px; }
#band-practice .pr-principle__title {
  font-size: var(--t-h2);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: var(--ls-h2, -0.02em);
}
#band-practice .pr-principle__sub {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
  max-width: 28em;
}
.pr-plus {
  flex: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: var(--shadow-hairline);
  transition: rotate .6s var(--ease-out), background-color .4s var(--ease), color .4s var(--ease);
}
.pr-plus::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon-plus) center / contain no-repeat;
  mask: var(--icon-plus) center / contain no-repeat;
}
@media (hover: hover) {
  #band-practice .pr-principle:hover { background: var(--sage-tint); translate: 0 -4px; }
  #band-practice .pr-principle:hover .pr-plus { rotate: 90deg; background: var(--ink); color: var(--ink-inverse); }
}
#band-practice .pr-principle:focus-visible { background: var(--sage-tint); }
#band-practice .pr-principle:focus-visible .pr-plus { rotate: 90deg; background: var(--ink); color: var(--ink-inverse); }

/* ---------- What I Can Do For You: 4 numbered cards (C6) ---------- */
#band-practice .pr-services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  #band-practice .pr-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  #band-practice .pr-services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#band-practice .pr-service {
  --muted: var(--muted-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: translate .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
#band-practice .pr-service__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(16px, 3vw, 48px);
}
#band-practice .pr-service__index {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--muted);
}
#band-practice .pr-service__ico {
  font-size: 28px;
  line-height: 1;
}
#band-practice .pr-service__title {
  font-size: var(--t-h3);
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink);
}
#band-practice .pr-service__text {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--muted);
}
@media (hover: hover) {
  #band-practice .pr-service:hover { translate: 0 -4px; box-shadow: var(--shadow-soft); }
}

/* ---------- Style Guides: Apple 2-up tiles ---------- */
#band-practice .pr-guide .btn { gap: 8px; }
.pr-ext {
  display: inline-block;
  width: .8em;
  height: .8em;
  background: currentColor;
  -webkit-mask: var(--icon-arrow-ne) center / contain no-repeat;
  mask: var(--icon-arrow-ne) center / contain no-repeat;
  transition: translate .4s var(--ease-out);
}
@media (hover: hover) {
  #band-practice .pr-guide .btn:hover .pr-ext { translate: 2px -2px; }
}

/* typographic PDF cover inside a plate */
#band-practice .pr-cover-plate { display: grid; place-items: center; }
#band-practice .pr-cover {
  position: absolute;
  inset: var(--plate-inset, 7%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 3vw, 36px);
  border-radius: var(--r-sm);
  background: var(--sage);
  color: var(--sage-ink);
  box-shadow: var(--shadow-soft);
  transition: scale .8s var(--ease);
}
#band-practice .pr-cover__rule {
  display: block;
  width: 48px;
  height: 2px;
  background: currentColor;
}
#band-practice .pr-cover__title {
  font-size: clamp(1.25rem, 2.6vw, 2.5rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.03em;
  max-width: 10em;
}
#band-practice .pr-cover__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
}
@media (hover: hover) {
  #band-practice .pr-guide:hover .pr-cover { scale: 1.03; }
}

@media (prefers-reduced-motion: reduce) {
  #band-practice .pr-principle,
  #band-practice .pr-service,
  #band-practice .pr-cover,
  .pr-plus,
  .pr-ext { transition: background-color .25s, color .25s, box-shadow .25s; }
  #band-practice .pr-principle:hover,
  #band-practice .pr-service:hover { translate: none; }
  #band-practice .pr-guide:hover .pr-cover { scale: none; }
  #band-practice .pr-principle:hover .pr-plus,
  #band-practice .pr-principle:focus-visible .pr-plus { rotate: none; }
}
@media (forced-colors: active) {
  #band-practice .pr-principle,
  #band-practice .pr-service { border: 1px solid CanvasText; }
  .pr-plus::before, .pr-ext { background: CanvasText; }
}

/* ==== 62-foundations.css ==== */
/* 62-foundations.css — B8: Expertise (#band-foundations): ADDIE → Agile acrostic, theory columns, tools list + detail pane */

/* ================= ADDIE → Agile (research #7) ================= */
#band-foundations .addie {
  position: relative;
  margin-bottom: clamp(56px, 7vw, 112px);
}
#band-foundations .addie__loop {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#band-foundations .phase {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  align-items: baseline;
}
#band-foundations .phase-letter {
  grid-row: span 2;
  font-size: clamp(3.5rem, 12vw, 10rem);
  line-height: .85;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--ink);
  transition: color .6s var(--ease);
}
#band-foundations .phase-word {
  font-size: var(--t-h3);
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: opacity .6s var(--ease), translate .8s var(--ease-out);
}
#band-foundations .phase-ev {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  transition: opacity .6s var(--ease) .1s, translate .8s var(--ease-out) .1s;
}
#band-foundations .phase-link {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
  line-height: 1.4;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 4px;
  cursor: pointer;
}
#band-foundations .phase-link:hover { text-decoration-color: currentColor; }
#band-foundations .phase-link__kind {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  display: inline-block;
}
#band-foundations .phase-quote {
  font-size: var(--t-small, 15px);
  line-height: 1.45;
  color: var(--muted);
  max-width: 22em;
}

/* the loop arc: hidden on narrow screens */
#band-foundations .loop-arc { display: none; }

#band-foundations .addie__agile {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  transition: opacity .7s var(--ease) .35s, translate .9s var(--ease-out) .35s;
}
#band-foundations .addie__agile-word {
  font-size: var(--t-h1);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
}
#band-foundations .addie__agile-caption {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34em;
}
#band-foundations .addie__quote { margin: 0; max-width: 34em; }
#band-foundations .addie__quote p {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
}
#band-foundations .addie__quote p::before { content: "\201C"; }
#band-foundations .addie__quote p::after { content: "\201D"; }
#band-foundations .addie__quote footer {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
#band-foundations .addie__quote footer::before { content: "\2014\00a0"; }
#band-foundations .addie__agile-links { display: flex; flex-wrap: wrap; gap: 0 28px; }

#band-foundations .addie__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
#band-foundations .addie__controls .btn[aria-disabled="true"] { opacity: .45; cursor: default; }

/* collapsed states exist only once JS has enhanced the block */
#band-foundations .addie.is-enhanced .phase:not(.is-open) .phase-letter { color: var(--muted-2); }
#band-foundations .addie.is-enhanced .phase:not(.is-open) .phase-word,
#band-foundations .addie.is-enhanced .phase:not(.is-open) .phase-ev {
  opacity: 0;
  translate: 0 16px;
}
#band-foundations .addie.is-enhanced:not(.is-looped) .addie__agile {
  opacity: 0;
  translate: 0 16px;
}

/* wide: the letters line up as the acrostic */
@media (min-width: 900px) {
  #band-foundations .addie__loop {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gap);
  }
  #band-foundations .phase {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
  #band-foundations .phase-letter { grid-row: auto; }
  #band-foundations .phase-word { font-size: clamp(1.05rem, 1.55vw, 1.6rem); }
  #band-foundations .loop-arc {
    display: block;
    width: 100%;
    height: clamp(48px, 6vw, 96px);
    margin-top: 8px;
    overflow: visible;
  }
  #band-foundations .loop-arc path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.4s var(--ease);
  }
  #band-foundations .loop-arc .loop-arc__head { transition-delay: 1.2s; transition-duration: .3s; }
  #band-foundations .addie.is-enhanced:not(.is-looped) .loop-arc path { stroke-dashoffset: 1; }
  #band-foundations .addie__agile {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
    justify-items: center;
    text-align: center;
  }
  #band-foundations .addie__agile-caption,
  #band-foundations .addie__quote { margin-inline: auto; }
  #band-foundations .addie__agile-links { justify-content: center; }
  #band-foundations .addie__controls { justify-content: center; }
}

/* ================= Theory / tool columns (custo footer columns) ================= */
#band-foundations .fd-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px var(--gap);
}
@media (min-width: 640px) {
  #band-foundations .fd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  #band-foundations .fd-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  #band-foundations .fd-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#band-foundations .fd-cat {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--muted);
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
#band-foundations .fd-list { margin: 0; padding: 0; list-style: none; }
#band-foundations .fd-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-h3);
  line-height: 1.25;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 calc(100% - 6px);
  transition: background-size .6s var(--ease-out), color .3s var(--ease);
}
#band-foundations .fd-plus {
  font-size: .8em;
  color: var(--muted);
  transition: rotate .5s var(--ease-out), color .3s var(--ease);
}
@media (hover: hover) {
  #band-foundations .fd-item:hover { background-size: 100% 1px; }
  #band-foundations .fd-item:hover .fd-plus { color: var(--ink); rotate: 90deg; }
}
#band-foundations .fd-item:focus-visible { background-size: 100% 1px; }

/* ================= Tools: list + inline detail pane (C9) ================= */
#band-foundations .fd-tools { display: grid; gap: var(--gap); }
#band-foundations .fd-tool[aria-pressed="true"] { background-size: 100% 1px; }
#band-foundations .fd-tool[aria-pressed="true"] .fd-plus { color: var(--ink); rotate: 45deg; }

#band-foundations .fd-pane {
  --muted: var(--muted-2);
  align-self: start;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-hairline);
}
#band-foundations .fd-pane.is-swapping { animation: fd-pane-in .5s var(--ease-out); }
@keyframes fd-pane-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
#band-foundations .fd-pane__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
#band-foundations .fd-pane__title {
  margin-top: 8px;
  font-size: var(--t-h2);
  line-height: 1.15;
  font-weight: 500;
  color: var(--ink);
}
#band-foundations .fd-pane__badge { margin-top: 12px; }
#band-foundations .fd-pane__h {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}
#band-foundations .fd-pane__uses,
#band-foundations .fd-pane__projlist { margin: 8px 0 0; padding: 0; list-style: none; }
#band-foundations .fd-pane__use {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-body);
  line-height: 1.5;
}
#band-foundations .fd-pane__use strong { font-weight: 500; color: var(--ink); font-size: 15px; }
#band-foundations .fd-pane__use span { color: var(--muted); }
#band-foundations .fd-proj {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#band-foundations .fd-proj__title { font-size: var(--t-body); font-weight: 500; }
#band-foundations .fd-proj__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (hover: hover) {
  #band-foundations .fd-proj:hover .fd-proj__title { text-decoration: underline; text-underline-offset: 4px; }
}

/* the inline pane is a ≥768px feature; below that openTool() opens the info modal */
@media (max-width: 767.98px) {
  #band-foundations .fd-pane { display: none !important; }
}
@media (min-width: 1024px) {
  #band-foundations .fd-tools.is-enhanced { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  #band-foundations .fd-tools.is-enhanced .fd-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #band-foundations .fd-pane {
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #band-foundations .phase-word,
  #band-foundations .phase-ev,
  #band-foundations .addie__agile,
  #band-foundations .loop-arc path,
  #band-foundations .fd-item,
  #band-foundations .fd-plus { transition: none; }
  #band-foundations .fd-pane.is-swapping { animation: none; }
}
@media (forced-colors: active) {
  #band-foundations .loop-arc path { stroke: CanvasText; }
  #band-foundations .fd-pane { border: 1px solid CanvasText; }
  #band-foundations .fd-tool[aria-pressed="true"] { text-decoration: underline; }
}
@media print {
  #band-foundations .addie .phase-word,
  #band-foundations .addie .phase-ev,
  #band-foundations .addie__agile { opacity: 1 !important; translate: none !important; }
  #band-foundations .addie__controls { display: none; }
}

/* ==== 70-games.css ==== */
/* ==========================================================================
   70-games.css (B9): Games band  #band-connect > #deeper
   Always dark ([data-surface="games"] supplies bg/ink/muted in both themes).
   ========================================================================== */

#band-connect {
  /* Decorative sprite + accent palette. The band is identical in both themes,
     so these mirror the dark-theme --c-* values (all >= 7:1 on --games-bg). */
  --games-purple: #BBA8DA;
  --games-teal: #8CC5BE;
  --games-orange: #E0A57F;
  --games-gold: #F2C94C;
  --games-pink: #E59BB4;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--games-bg);
  color: var(--games-ink);
}

/* grain: SVG feTurbulence at 6% */
#band-connect::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---------- stage: centered statement with sprites around it ---------- */
#band-connect .games-stage {
  position: relative;
  text-align: center;
  padding-block: clamp(48px, 8vw, 120px) clamp(56px, 8vw, 128px);
}

#band-connect .games-kicker {
  color: var(--games-muted);
  margin: 0 0 clamp(16px, 2vw, 28px);
}

#band-connect .games-title {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: .95;
  letter-spacing: -.04em;
  font-weight: 500; /* CD note: 500 */
  color: var(--games-ink);
}

#band-connect .games-sub {
  position: relative;
  z-index: 1;
  max-width: 36em;
  margin: clamp(20px, 2.4vw, 32px) auto 0;
  font-size: var(--t-body, 1rem);
  line-height: 1.6;
  color: var(--games-muted);
}

/* ---------- sprites ---------- */
#band-connect .games-sprites {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#band-connect .games-sprite {
  position: absolute;
  translate: var(--gx, 0px) var(--gy, 0px);
}
#band-connect .games-sprite svg {
  display: block;
  width: clamp(40px, 6vw, 90px);
  height: auto;
  image-rendering: pixelated;
}
#band-connect .games-sprite--tetro  { top: 8%;  left: 4%; }
#band-connect .games-sprite--token  { top: 14%; right: 6%; }
#band-connect .games-sprite--matman { bottom: 10%; left: 10%; }
#band-connect .games-sprite--ghost  { bottom: 6%; right: 12%; }
#band-connect .games-sprite--token svg  { width: clamp(32px, 4.5vw, 64px); }
#band-connect .games-sprite--matman svg { width: clamp(40px, 5.5vw, 78px); }
#band-connect .games-sprite--ghost svg  { width: clamp(36px, 5vw, 70px); }

#band-connect .games-px--purple { fill: var(--games-purple); }
#band-connect .games-px--teal   { fill: var(--games-teal); }
#band-connect .games-px--gold   { fill: var(--games-gold); }
#band-connect .games-px--pink   { fill: var(--games-pink); }
#band-connect .games-px--white  { fill: var(--games-ink); }
#band-connect .games-px--dark   { fill: var(--games-bg); }
#band-connect .games-px--shine  { fill: var(--games-ink); opacity: .35; }
#band-connect .games-matman__mouth { fill: var(--games-bg); }

/* motion (only when allowed) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduced-motion) #band-connect .games-sprite__bob {
    animation: games-bob 6s ease-in-out infinite;
  }
  html:not(.reduced-motion) #band-connect .games-sprite--tetro  .games-sprite__bob { animation-duration: 7s; }
  html:not(.reduced-motion) #band-connect .games-sprite--token  .games-sprite__bob { animation-name: games-fall; animation-duration: 5.2s; animation-delay: -1.3s; }
  html:not(.reduced-motion) #band-connect .games-sprite--matman .games-sprite__bob { animation-name: games-drift; animation-duration: 9s; animation-delay: -2s; }
  html:not(.reduced-motion) #band-connect .games-sprite--ghost  .games-sprite__bob { animation-duration: 6.4s; animation-delay: -3s; }

  html:not(.reduced-motion) #band-connect .games-matman__mouth {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: games-chomp .5s steps(1, end) infinite;
  }
  html:not(.reduced-motion) #band-connect .games-ghost__eyes {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: games-blink 4s steps(1, end) infinite;
  }
  html:not(.reduced-motion) #band-connect .games-sprite {
    transition: translate .9s var(--ease-out);
  }

  /* paused offscreen / hidden tab (70-games.js sets .is-paused) */
  #band-connect.is-paused .games-sprite__bob,
  #band-connect.is-paused .games-matman__mouth,
  #band-connect.is-paused .games-ghost__eyes {
    animation-play-state: paused;
  }
}

@keyframes games-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}
@keyframes games-fall {
  0%, 100% { transform: translateY(-10px) rotate(-6deg); }
  50%      { transform: translateY(12px) rotate(6deg); }
}
@keyframes games-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(18px, -8px); }
}
@keyframes games-chomp {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(.08); }
}
@keyframes games-blink {
  0%   { transform: scaleY(1); }
  94%  { transform: scaleY(.1); }
  97%  { transform: scaleY(1); }
}

/* ---------- game cards ---------- */
#band-connect .games-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap, 24px);
}
@media (min-width: 768px) {
  #band-connect .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#band-connect .games-grid__item { display: flex; min-width: 0; }

#band-connect .games-card {
  --accent: var(--games-purple);
  appearance: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: clamp(10px, 1vw, 14px);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--games-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-hairline);
  transition: translate .6s var(--ease-out), background-color .3s var(--ease-out);
}
#band-connect .games-card--teal   { --accent: var(--games-teal); }
#band-connect .games-card--orange { --accent: var(--games-orange); }

@media (hover: hover) {
  #band-connect .games-card:hover { translate: 0 -4px; background: var(--surface-2); }
}
#band-connect .games-card:focus-visible { translate: 0 -4px; background: var(--surface-2); }

#band-connect .games-card__plate {
  display: block;
  width: 100%;
  background: var(--sage-pale);
}
@media (hover: hover) {
  #band-connect .games-card:hover .plate__img { scale: 1.03; }
}
#band-connect .games-card:focus-visible .plate__img { scale: 1.03; }

#band-connect .games-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  padding: clamp(16px, 1.6vw, 24px) clamp(8px, 1vw, 14px) clamp(8px, 1vw, 12px);
}
#band-connect .games-card__text {
  display: block;
  font-size: var(--t-body, 1rem);
  line-height: 1.55;
  color: var(--games-muted);
}
#band-connect .games-card__lead {
  display: block;
  margin-bottom: 6px;
  font-size: var(--t-h3);
  line-height: 1.2;
  font-weight: 500;
  color: var(--accent);
}

#band-connect .games-card__play {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  background: var(--games-ink);
  color: var(--games-bg);
  font-size: 15px;
  font-weight: 500;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
#band-connect .games-card__play-glyph {
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--icon-play) center / contain no-repeat;
  mask: var(--icon-play) center / contain no-repeat;
}
@media (hover: hover) {
  #band-connect .games-card:hover .games-card__play { background: var(--accent); }
}
#band-connect .games-card:focus-visible .games-card__play { background: var(--accent); }

/* small screens: keep sprites out of the text column */
@media (max-width: 599px) {
  #band-connect .games-sprite--tetro  { top: 2%; left: 2%; }
  #band-connect .games-sprite--token  { top: 4%; right: 3%; }
  #band-connect .games-sprite--matman { bottom: 2%; left: 4%; }
  #band-connect .games-sprite--ghost  { bottom: 1%; right: 4%; }
}

/* reduced motion: static sprites, no lift */
@media (prefers-reduced-motion: reduce) {
  #band-connect .games-sprite { translate: none; }
  #band-connect .games-card,
  #band-connect .games-card:hover,
  #band-connect .games-card:focus-visible { translate: none; }
}
html.reduced-motion #band-connect .games-sprite { translate: none; }

@media (forced-colors: active) {
  #band-connect .games-card { border: 1px solid CanvasText; }
  #band-connect .games-card__play { border: 1px solid CanvasText; }
  #band-connect .games-card__play-glyph { background: CanvasText; }
}

/* ==== 80-praise.css ==== */
/* ==========================================================================
   80-praise.css (B9): Praise  #band-recommendations > #testimonials
   <1024px: one-at-a-time scroll-snap slider. >=1024px: 2x2 grid (ADDENDUM C5).
   ========================================================================== */

#band-recommendations .praise-slider { position: relative; }

/* ---------- track: slider (mobile/tablet) ---------- */
#band-recommendations .praise-track {
  display: flex;
  gap: var(--gap, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
}
#band-recommendations .praise-track::-webkit-scrollbar { display: none; }
#band-recommendations .praise-track:focus-visible { outline-offset: 4px; }

#band-recommendations .praise-card {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--surface);
}
#band-recommendations .praise-card:focus { outline: none; }
#band-recommendations .praise-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

#band-recommendations .praise-card__mark {
  display: block;
  height: .55em;
  font-size: clamp(4rem, 6vw, 6rem);
  line-height: 1;
  font-weight: 500;
  color: var(--muted-2);
}

#band-recommendations .praise-card__quote {
  margin: 0;
  flex: 1;
}
#band-recommendations .praise-card__quote p {
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}

#band-recommendations .praise-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}
#band-recommendations .praise-card__name { color: var(--ink); font-weight: 500; }

/* ---------- controls ---------- */
#band-recommendations .praise-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
#band-recommendations .praise-count {
  min-width: 5.5em;
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#band-recommendations .praise-count__cur { color: var(--ink); }
#band-recommendations .praise-arrow[aria-disabled="true"] { opacity: .4; cursor: default; }
/* no JS: arrows do nothing, the track still scrolls */
html:not(.js) #band-recommendations .praise-controls { display: none; }

/* ---------- desktop: 2x2 grid of all four ---------- */
@media (min-width: 1024px) {
  #band-recommendations .praise-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    border-radius: 0;
  }
  #band-recommendations .praise-card { flex: none; }
  #band-recommendations .praise-controls { display: none; }
}

/* ---------- social proof row ---------- */
#band-recommendations .praise-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin-top: clamp(36px, 4vw, 56px);
}
#band-recommendations .praise-avatars {
  display: flex;
  margin: 0;
  padding: 0 0 0 12px;
  list-style: none;
}
#band-recommendations .praise-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--sage-tint);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
#band-recommendations .praise-avatar:nth-child(2) { background: var(--sage-pale); }
#band-recommendations .praise-avatar:nth-child(3) { background: color-mix(in srgb, var(--sage-tint) 60%, var(--bg)); }
#band-recommendations .praise-avatar:nth-child(4) { background: var(--surface-2); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.reduced-motion) #band-recommendations .praise-track { scroll-behavior: smooth; }
}

@media (forced-colors: active) {
  #band-recommendations .praise-card { border: 1px solid CanvasText; }
  #band-recommendations .praise-avatar { border-color: CanvasText; }
}

/* ==== 88-contact.css ==== */
/* B4: Contact (#contact) */
#contact .contact-portrait { max-width: 320px; border-radius: var(--r-lg); --plate-ratio: 540 / 600; }
#contact .contact-portrait .plate__img { width: 100%; height: 100%; object-fit: cover; }
#contact .contact-main .sec-label { margin: 0 0 1.25rem; }
#contact .contact-main h2 { margin: 0; }
#contact .contact-lead { margin-top: 1.25rem; }
#contact .btn-pair { margin-top: clamp(24px, 3vw, 40px); }
#contact .contact-list { margin-top: clamp(32px, 4vw, 56px); max-width: 40rem; }
#contact .contact-list a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
#contact .brief-slot:not([hidden]) { margin-top: clamp(32px, 4vw, 56px); }

@media (max-width: 767px) {
  #contact .contact-portrait { max-width: 220px; }
  #contact .contact-list .meta__row { flex-wrap: wrap; }
}

/* ==== 90-chat.css ==== */
/* 90-chat.css — Agile ADDIE chat widget, teaser and FAB (B10).
   DESIGN-SPEC §8: white sheet (radius --r-lg), ink header text, ink send button,
   sage "MG" avatar; FAB = ink pill "Ask Agile ADDIE" on desktop, 56px circle on mobile.
   z: widget --z-chat (90), FAB --z-fab (91). */

/* ---------------------------------------------------------------- FAB */
.chat-fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 56px;
  min-height: 56px;
  padding: 0 22px 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inverse);
  font: 500 var(--t-small)/1 var(--font-sans);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.chat-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.chat-fab:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.chat-fab svg { width: 20px; height: 20px; flex: none; }
.chat-fab .ico-close { display: none; }
.chat-fab.open .ico-chat { display: none; }
.chat-fab.open .ico-close { display: block; }

@media (max-width: 767px) {
  .chat-fab { width: 56px; padding: 0; }
  .chat-fab__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* the sheet covers the FAB on phones; its own Close button takes over */
  html.chat-open .chat-fab { display: none; }
}

/* ---------------------------------------------------------------- teaser */
.chat-teaser {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-chat);
  display: flex;
  align-items: flex-start;
  max-width: min(300px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.chat-teaser[hidden] { display: none; }
.chat-teaser.visible { opacity: 1; transform: none; }
.chat-teaser__open {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 14px 4px 14px 16px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font-family: var(--font-sans);
  cursor: pointer;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.chat-teaser-body { font-weight: 600; font-size: var(--t-small); }
.chat-teaser-sub { color: var(--muted-2); font-size: var(--t-small); }
.chat-teaser-x {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--muted-2);
  cursor: pointer;
}
.chat-teaser-x svg { width: 14px; height: 14px; }
.chat-teaser-x:hover { color: var(--ink); background: var(--surface); }
.chat-teaser__open:focus-visible,
.chat-teaser-x:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* ---------------------------------------------------------------- widget sheet */
.chat-widget {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-chat);
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(100dvh - 84px - var(--header-h) - 16px));
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  font-family: var(--font-sans);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.chat-widget[hidden] { display: none; }
.chat-widget.open { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .chat-widget {
    inset: auto 0 0 0;
    width: 100%;
    height: min(86dvh, 100dvh - 48px);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(24px);
  }
}

/* header */
.cw-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid var(--line);
}
.cw-av {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--sage-ink);
  font: 600 .875rem/1 var(--font-sans);
  letter-spacing: .02em;
}
.cw-hdr-text { flex: 1; min-width: 0; }
.cw-hdr-title { margin: 0; font-size: var(--t-body); font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: normal; }
.cw-hdr-sub { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: var(--t-micro); color: var(--muted-2); }
.cw-online { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); flex: none; }
.cw-hdr-btns { display: flex; gap: 2px; flex: none; }
.cw-hdr-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--ink-2);
  cursor: pointer;
}
.cw-hdr-btn svg { width: 18px; height: 18px; }
.cw-hdr-btn:hover { background: var(--surface); color: var(--ink); }
.cw-hdr-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* messages */
.cw-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cw-msgs:focus-visible { outline: 2px solid var(--ring); outline-offset: -4px; }
.cw-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; animation: cwFade .2s var(--ease-out); }
.cw-msg.user { align-self: flex-end; align-items: flex-end; }
@keyframes cwFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.cw-bubble {
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-small);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cw-msg.bot .cw-bubble { border-bottom-left-radius: var(--r-sm); }
.cw-msg.user .cw-bubble { background: var(--ink); color: var(--ink-inverse); border-bottom-right-radius: var(--r-sm); }
.cw-bubble.disclaimer {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--muted-2);
  font-size: var(--t-micro);
  line-height: 1.5;
}
.cw-bubble--error { border: 1px solid var(--line-strong); }

.cw-contact-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; white-space: normal; }
.cw-contact-link,
.cw-email-btn {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: normal;
}
.cw-email-btn { display: flex; margin-top: 6px; }
.cw-contact-link:hover, .cw-email-btn:hover { text-decoration-thickness: 2px; }
.cw-contact-link:focus-visible, .cw-email-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }

.cw-msg-actions { margin-top: 2px; }
.cw-speak-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--muted-2);
  cursor: pointer;
}
.cw-speak-btn svg { width: 18px; height: 18px; }
.cw-speak-btn .cw-speak-stop { display: none; }
.cw-speak-btn.speaking .cw-speak-icon { display: none; }
.cw-speak-btn.speaking .cw-speak-stop { display: block; }
.cw-speak-btn.speaking, .cw-speak-btn.loading { color: var(--ink); }
.cw-speak-btn.loading { animation: cwPulseOpacity 1s ease-in-out infinite; }
.cw-speak-btn:hover { background: var(--surface); color: var(--ink); }
.cw-speak-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.cw-typing .cw-bubble { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.cw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: cwBounce 1.2s infinite; }
.cw-dot:nth-child(2) { animation-delay: .15s; }
.cw-dot:nth-child(3) { animation-delay: .3s; }
@keyframes cwBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes cwPulseOpacity { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* quick topics */
.cw-sugg { padding: 0 16px 12px; }
.cw-sugg[hidden] { display: none; }
.cw-sugg-label {
  margin: 0 0 8px;
  font: 500 var(--t-micro)/1.2 var(--font-mono);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted-2);
}
.cw-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cw-chip-grid > li { display: flex; }
.cw-chip {
  flex: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.cw-chip:hover { border-color: var(--line-strong); background: var(--surface); }
.cw-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.cw-chip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-chip-title { font-size: var(--t-small); font-weight: 600; line-height: 1.25; }
.cw-chip-sub { font-size: var(--t-micro); color: var(--muted-2); line-height: 1.3; }
.cw-chip-star { color: var(--sage); font-size: .75rem; line-height: 1.6; }
@media (max-width: 359px) { .cw-chip-grid { grid-template-columns: 1fr; } }

/* input bar */
.cw-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 12px;
  border-top: 1px solid var(--line);
}
.cw-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.3 var(--font-sans);   /* 16px: no iOS zoom */
}
.cw-input::placeholder { color: var(--muted-2); opacity: 1; }
.cw-input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.cw-mic, .cw-send {
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
}
.cw-mic[hidden] { display: none; }
.cw-mic { border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); }
.cw-mic:hover { background: var(--surface); }
.cw-mic svg { width: 18px; height: 18px; position: relative; }
.cw-mic .cw-mic-stop { display: none; }
.cw-mic.listening .cw-mic-icon, .cw-mic.sending .cw-mic-icon { display: none; }
.cw-mic.listening .cw-mic-stop { display: block; }
.cw-mic.sending .cw-mic-stop { display: block; animation: cwPulseOpacity 1s ease-in-out infinite; }
.cw-mic-ring { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--c-red); opacity: 0; }
.cw-mic.listening { color: var(--c-red); }
.cw-mic.listening .cw-mic-ring { opacity: 1; animation: cwPulseOpacity 1.2s ease-in-out infinite; }
.cw-send { border: 0; background: var(--ink); color: var(--ink-inverse); }
.cw-send svg { width: 18px; height: 18px; }
.cw-send:hover { background: var(--ink-2); }
.cw-send[aria-disabled="true"] { opacity: .45; cursor: progress; }
.cw-mic:focus-visible, .cw-send:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------------------------------------------------------------- forced colors */
@media (forced-colors: active) {
  .chat-fab, .chat-widget, .chat-teaser, .cw-bubble, .cw-chip, .cw-send { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .chat-fab, .chat-teaser, .chat-widget, .cw-chip { transition: none; }
  .chat-widget, .chat-teaser { transform: none; }
  .chat-fab:hover { transform: none; }
  .cw-msg, .cw-dot, .cw-speak-btn.loading, .cw-mic.sending .cw-mic-stop, .cw-mic.listening .cw-mic-ring { animation: none; }
}
html.reduced-motion .chat-fab,
html.reduced-motion .chat-teaser,
html.reduced-motion .chat-widget,
html.reduced-motion .cw-chip { transition: none; }
html.reduced-motion .chat-widget,
html.reduced-motion .chat-teaser,
html.reduced-motion .chat-fab:hover { transform: none; }
html.reduced-motion .cw-msg,
html.reduced-motion .cw-dot,
html.reduced-motion .cw-speak-btn.loading,
html.reduced-motion .cw-mic.sending .cw-mic-stop,
html.reduced-motion .cw-mic.listening .cw-mic-ring { animation: none; }

/* ==== 92-threads.css ==== */
/* 92-threads.css (B11): "Find your way" row (#5 threads + #8 path), MG.walk bar, thread ticks. */

.fyw {
  margin-top: clamp(40px, 6vw, 88px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
  min-width: 0;
}
.fyw__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.fyw__threads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
  flex: 1 1 320px;
}
.fyw__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted);
}
.fyw__chips { --chip-row-bleed: 0px; min-width: 0; flex: 1 1 auto; }
.fyw__toggle-ico {
  display: inline-block;
  width: .6em; height: .6em;
  margin-right: .55em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--dur-1, .3s) var(--ease, ease);
}
.fyw__toggle[aria-expanded="true"] .fyw__toggle-ico { transform: translateY(15%) rotate(225deg); }

.fyw__form,
.fyw__result,
.fyw__panel {
  margin-top: 24px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--surface);
  border-radius: var(--r);
  color: var(--ink);
  max-width: 56rem;
}
.fyw__fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.fyw__legend, .fyw__field-label {
  font-size: var(--t-h3);
  font-weight: 500;
  padding: 0;
  margin-bottom: 12px;
  color: var(--ink);
}
.fyw__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.fyw__radio {
  width: 20px; height: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--ink);
}
.fyw__opt-label { cursor: pointer; padding-block: 8px; }
.fyw__field { margin-top: 20px; display: grid; gap: 8px; max-width: 24rem; }
.fyw__field[hidden] { display: none; }
.fyw__field-label { margin: 0; font-size: var(--t-body); }
.fyw__select {
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.fyw__hint { margin: 12px 0 0; color: var(--ink); font-weight: 600; }
.fyw__build { margin-top: 24px; }

.fyw__h { margin: 0 0 8px; font-size: var(--t-h3); }
.fyw__route { margin: 0 0 12px; color: var(--muted); font-size: var(--t-small); }
.fyw__steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.fyw__steps > li { border-bottom: 1px solid var(--line); }
.fyw__step {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 10px 4px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.fyw__step-n { font-family: var(--font-mono); font-size: var(--t-small); color: var(--muted); flex: none; }
.fyw__step-t { overflow-wrap: anywhere; }
@media (hover: hover) {
  .fyw__step:hover .fyw__step-t { text-decoration: underline; text-underline-offset: .2em; }
}
.fyw__actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- MG.walk inline bar (in normal flow, right after the current target) ---- */
.walk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  box-shadow: 0 0 0 4px var(--bg);
  max-width: 100%;
  box-sizing: border-box;
  grid-column: 1 / -1;
  flex: 1 0 100%;
  width: 100%;
}
.walk-bar__status { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; flex: 1 1 240px; }
.walk-bar__pos { font-family: var(--font-mono); font-size: var(--t-small); white-space: nowrap; }
.walk-bar__now { font-weight: 500; overflow-wrap: anywhere; }
.walk-bar__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.walk-bar__btn {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 18px;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.walk-bar__btn--next { background: var(--ink); color: var(--ink-inverse); }
.walk-bar__btn:disabled { opacity: .45; cursor: not-allowed; }
.walk-bar__btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: 0 0 0 5px var(--bg); }
@media (hover: hover) {
  .walk-bar__btn:not(:disabled):hover { background: var(--ink); color: var(--ink-inverse); }
}
[data-surface="dark"] .walk-bar,
[data-surface="games"] .walk-bar { border-color: var(--ink); }

/* ---- thread ticks: the right-edge channel (C7) while a thread walk runs, >=1180px only ---- */
.thr-ticks {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-rail, 30);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 10px 8px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  pointer-events: none;
}
.thr-ticks__tick {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  transition: transform var(--dur-1, .3s) var(--ease, ease), background-color var(--dur-1, .3s);
}
.thr-ticks__tick.is-done { background: var(--muted); border-color: var(--muted); }
.thr-ticks__tick.is-current { background: var(--ink); transform: scale(1.4); }
@media (max-width: 1179.98px) { .thr-ticks { display: none; } }
html.is-scroll-locked .thr-ticks { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fyw__toggle-ico, .thr-ticks__tick { transition: none; }
}
html.reduced-motion .fyw__toggle-ico, html.reduced-motion .thr-ticks__tick { transition: none; }

@media print {
  .fyw, .walk-bar, .thr-ticks { display: none !important; }
}

/* ==== 93-brief.css ==== */
/* 93-brief.css (B11): hiring-panel brief inside Contact (#hiringBrief) + print stylesheet. */

#hiringBrief { margin-top: clamp(32px, 4vw, 56px); min-width: 0; }
.brief-card {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
}
.brief-card__line { margin: 0 0 16px; font-size: var(--t-h3); font-weight: 500; }
.brief-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.brief-card__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.brief-card__opt label { cursor: pointer; }
.brief-card__chk { width: 24px; height: 24px; margin: 0; accent-color: var(--ink); flex: none; }

.brief-host { margin-top: 24px; }
.brief {
  padding: clamp(20px, 3.5vw, 48px);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow-wrap: anywhere;
}
.brief__name { margin: 0; font-size: var(--t-h2); }
.brief__role { margin: 4px 0 0; font-family: var(--font-mono); font-size: var(--t-small); color: var(--muted); }
.brief__statement { margin: 12px 0 0; font-size: var(--t-h3); }
.brief__list { margin: 0; padding: 0; list-style: none; }
.brief__list > li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.brief__list > li:last-child { border-bottom: 0; }
.brief__stats { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px; }
.brief__stats > li { border: 0; font-weight: 500; }
.brief__block { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.brief__h {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.brief__p { margin: 0; }
.brief__link { text-decoration: underline; text-underline-offset: .2em; }
.brief__url, .brief__result { display: block; }
.brief__url { font-family: var(--font-mono); font-size: var(--t-micro, 12px); color: var(--muted); }
.brief__result { color: var(--ink-2); }
.brief__q { color: var(--muted); }
.brief__picks { counter-reset: pick; }
.brief__contact { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.brief__contact dt { color: var(--muted); }
.brief__contact dd { margin: 0; min-width: 0; }
.brief__xapi { margin-top: 20px; }
.brief__xapi summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.brief__xapi pre {
  margin: 8px 0 0;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  white-space: pre-wrap;
  background: var(--surface);
  border-radius: var(--r-sm);
}
.brief-actions { margin-top: 20px; flex-wrap: wrap; }
.brief-actions [hidden] { display: none; }
.brief__privacy { margin: 12px 0 0; font-size: var(--t-small); color: var(--muted); }
.brief__status { margin: 8px 0 0; font-size: var(--t-small); min-height: 1.5em; }
.brief-print { display: none; }

@media (max-width: 479.98px) {
  .brief__contact { grid-template-columns: 1fr; }
}

/* ---- print: only the brief, black on white, URLs shown ---- */
@media print {
  html.brief-printing body > *:not(#briefPrint) { display: none !important; }
  html.brief-printing #briefPrint { display: block !important; }
  html.brief-printing, html.brief-printing body { background: #fff !important; color: #000 !important; }
  #briefPrint .brief {
    border: 0; padding: 0; background: #fff; color: #000;
    font: 11pt/1.45 var(--font-sans), system-ui, sans-serif;
  }
  #briefPrint * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  #briefPrint .brief__name { font-size: 22pt; }
  #briefPrint .brief__statement { font-size: 13pt; }
  #briefPrint .brief__block { break-inside: avoid; border-top-color: #999; margin-top: 12pt; padding-top: 8pt; }
  #briefPrint .brief__list > li { border-bottom-color: #ddd; padding: 2pt 0; }
  #briefPrint a { text-decoration: none; }
  #briefPrint .brief__url { font-size: 9pt; }
  #briefPrint details, #briefPrint .brief-actions { display: none !important; }
  @page { margin: 16mm; }
}

/* ==== 94-dnotes.css ==== */
/* B12 · Research #4: Design notes. Scoped to .dnote / .dn-* */

.dnote {
  margin: 1.25rem 0 1.5rem;
  max-width: 60ch;
  border-left: 2px solid var(--line-strong);
  padding-left: 1rem;
  color: var(--ink-2);
}
.dnote[hidden] { display: none; }
.dnote:not([hidden]) { animation: dnote-in .2s var(--ease-out) both; }
@keyframes dnote-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dnote:not([hidden]) { animation: none; } }
html.reduced-motion .dnote:not([hidden]) { animation: none; }

.dnote__summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-2);
  list-style: none;
  gap: .5rem;
}
.dnote__summary::-webkit-details-marker { display: none; }
.dnote__summary::before {
  content: "+";
  display: inline-block;
  width: 1ch;
  font-weight: 500;
}
.dnote__details[open] > .dnote__summary::before { content: "\2212"; }

.dnote-label {
  margin: .25rem 0 .5rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-2);
}
.dnote__gagne {
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--muted-2);
}
.dnote__text {
  margin: 0 0 .75rem;
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--ink);
}
.dnote__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
}
.dnote__actions button {
  min-height: var(--tap);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink);
  cursor: pointer;
}
.dnote__actions button[hidden] { display: none; }

/* ≥1180px: left column of the .sec-head grid, under the .sec-label (no summary) */
@media (min-width: 1180px) {
  .sec-head > .dnote--side {
    grid-column: 1 / span 4;
    grid-row: 2 / span 3;
    align-self: start;
    margin: 1.5rem 0 0;
    padding-right: var(--gap);
  }
  .dnote--side .dnote__summary { display: none; }
}

/* Dark panels (section--tint etc. keep tokens; panel surfaces use their own ink) */
[data-surface="panel"] .dnote,
[data-surface="dark"] .dnote { color: var(--panel-muted); border-left-color: var(--panel-muted); }

/* ---------- switch ---------- */
.dn-row { margin: 1.25rem 0 0; }
.dn-row--inline { margin-top: 1rem; }

.dn-switch {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--tap);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink);
  cursor: pointer;
}
.dn-switch__track {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ink-2);
  background: var(--bg);
  transition: background-color var(--dur-1) var(--ease-out);
}
.dn-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.dn-switch[aria-checked="true"] .dn-switch__track { background: var(--ink); border-color: var(--ink); }
.dn-switch[aria-checked="true"] .dn-switch__thumb { transform: translateX(18px); background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .dn-switch__track, .dn-switch__thumb { transition: none; } }
html.reduced-motion .dn-switch__track, html.reduced-motion .dn-switch__thumb { transition: none; }
@media (forced-colors: active) {
  .dn-switch__track { border-color: ButtonText; }
  .dn-switch__thumb { background: ButtonText; }
  .dn-switch[aria-checked="true"] .dn-switch__track { background: Highlight; }
}

/* menu row variant: full-width row like the other .menu-panel__row items */
.dn-switch--menu { width: 100%; justify-content: space-between; }

/* ---------- stepper (Learning Science sub-header) ---------- */
.dn-stepper { margin-top: 1.25rem; }
.dn-stepper[hidden] { display: none; }
.dn-stepper__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  counter-reset: dnstep;
}
.dn-stepper__item { counter-increment: dnstep; }
.dn-stepper__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: var(--tap);
  padding: .5rem .875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
  text-align: left;
  cursor: pointer;
}
.dn-stepper__btn::before {
  content: counter(dnstep, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--muted-2);
}
.dn-stepper__gagne {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--muted-2);
}
@media (hover: hover) and (pointer: fine) {
  .dn-stepper__btn:hover { border-color: var(--ink); }
}

@media print {
  .dn-switch, .dn-row, .dn-stepper, .dnote__actions { display: none !important; }
}

/* ==== 95-access.css ==== */
/* B12 · Research #6: Reading & access panel, preference classes, X-ray tests.
   Scoped to .access-*, .audit-*, .xray-*, .focus-spot and the html.pref-* / html.test-* classes. */

/* ================= Part A: preferences on <html> ================= */

/* Readable type (1.4.8): Atkinson Hyperlegible Next (loaded on demand), body ≥20px, left-aligned */
html.pref-type {
  --font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Inter Tight", Arial, sans-serif;
  --t-body: 1.25rem;
  --t-text: 1.25rem;
  --t-small: 1.125rem;
}
html.pref-type body { font-family: var(--font-sans); }
html.pref-type main p,
html.pref-type main li,
html.pref-type main dd { text-align: left; }

/* Text spacing (1.4.12): the WCAG test values. Decorative giant words are exempt. */
html.pref-spacing :where(body *):not(svg, svg *, .hero-wordmark, .hero-wordmark *, .site-footer__giant, .site-footer__giant *),
html.test-spacing :where(body *):not(svg, svg *, .hero-wordmark, .hero-wordmark *, .site-footer__giant, .site-footer__giant *) {
  line-height: 1.5 !important;
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}
html.pref-spacing main p,
html.test-spacing main p { margin-bottom: 2em !important; }

/* Calm motion (2.3.3): everything settles at once, whatever the OS says */
html.pref-calm *,
html.pref-calm *::before,
html.pref-calm *::after {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
html.pref-calm { scroll-behavior: auto !important; }
html.pref-calm ::view-transition-group(*),
html.pref-calm ::view-transition-old(*),
html.pref-calm ::view-transition-new(*) { animation: none !important; }

/* Stronger contrast (1.4.6) */
:root.pref-contrast[data-theme] {
  --muted: var(--ink-2);
  --muted-2: var(--ink-2);
  --line: var(--line-strong);
  --panel-muted: var(--panel-ink);
  --games-muted: var(--games-ink);
}
html.pref-contrast main a:not(.btn):not(.icon-btn):not(.chip),
html.pref-contrast .site-footer a { text-decoration: underline; text-underline-offset: .2em; }
html.pref-contrast :focus-visible {
  outline-width: 3px !important;
  outline-style: solid !important;
  outline-offset: 2px;
}

/* ================= Part B: session tests ================= */
html.test-gray main { filter: grayscale(1); }

.xray-layer,
.focus-spot {
  position: fixed;
  inset: 0 auto auto 0;
  pointer-events: none;
  z-index: calc(var(--z-overlay) - 2);
}
.xray-layer { width: 100vw; height: 100vh; overflow: hidden; }
.xray-layer[hidden], .focus-spot[hidden] { display: none; }

.xray-box {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px dashed var(--ink);
  box-sizing: border-box;
}
.xray-box--landmark { border-style: solid; border-color: var(--c-blue); }
.xray-box--heading { border-color: var(--c-green); }
.xray-box--img { border-color: var(--c-purple); }
.xray-tag {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--bg);
  background: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xray-box--landmark > .xray-tag { top: auto; bottom: 0; left: auto; right: 0; }
.xray-box--img > .xray-tag { top: auto; bottom: 0; white-space: normal; }
.xray-order {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--bg);
}

.focus-spot {
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--bg);
  transition: transform var(--dur-1) var(--ease-out), width var(--dur-1) var(--ease-out), height var(--dur-1) var(--ease-out);
}
.focus-spot__tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focus-spot--below .focus-spot__tag { bottom: auto; top: calc(100% + 6px); }
@media (prefers-reduced-motion: reduce) { .focus-spot { transition: none; } }
html.reduced-motion .focus-spot { transition: none; }
@media (forced-colors: active) {
  .xray-box, .focus-spot { border-color: Highlight; }
  .xray-tag, .xray-order, .focus-spot__tag { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}

/* The section rail is hidden by core (MG.rail.setHidden('xray')); belt and braces: */
html.test-xray #sectionRail { visibility: hidden; }

/* ================= entry points ================= */
#siteHeader .icon-btn--access { display: none; }
@media (min-width: 1180px) { #siteHeader .icon-btn--access { display: inline-flex; } }
.access-glyph {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -.01em;
}
.access-try { margin: 1.25rem 0 0; }
.access-try .link-arrow,
.access-foot-link {
  min-height: var(--tap);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.access-foot-link { text-decoration: underline; text-underline-offset: .2em; font-size: var(--t-small); }

/* ================= panel ================= */
.access-panel {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: var(--gutter);
  z-index: calc(var(--z-overlay) - 1);
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - var(--header-h) - 24px);
  max-height: calc(100dvh - var(--header-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.access-panel[hidden] { display: none; }
.access-panel.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .access-panel { transition: none; transform: none; } }
html.reduced-motion .access-panel { transition: none; transform: none; }

/* <768px (and 400% zoom): a full modal sheet */
.access-panel.is-modal {
  inset: 0;
  top: 0;
  right: 0;
  width: 100%;
  max-height: none;
  height: 100%;
  border: 0;
  border-radius: 0;
  z-index: calc(var(--z-fab) + 1);
}

.access-panel__sheet { padding: 20px 20px 28px; }
.access-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.access-panel__title { margin: 0; font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 600; }
.access-panel__quote {
  margin: 0 0 1.5rem;
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.access-panel__quote-tag,
.access-switch__sc {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  color: var(--muted-2);
}
.access-panel__quote-tag { margin-right: .35em; }

.access-part { padding-top: 1.25rem; border-top: 1px solid var(--line); margin-top: 1.25rem; }
.access-part:first-of-type { margin-top: 0; }
.access-part__title { margin: 0 0 .75rem; font-size: var(--t-body); font-weight: 600; }
.access-part__sub { margin: 1.5rem 0 .5rem; font-size: var(--t-small); font-weight: 600; }

.access-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.access-item + .access-item { margin-top: .25rem; }

.access-switch,
.access-goto {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: var(--tap);
  padding: .25rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.access-switch__label { flex: 1 1 auto; }
.access-switch__track {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ink-2);
  background: var(--bg);
}
.access-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform var(--dur-1) var(--ease-out);
}
.access-switch[aria-checked="true"] .access-switch__track { background: var(--ink); border-color: var(--ink); }
.access-switch[aria-checked="true"] .access-switch__thumb { transform: translateX(18px); background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .access-switch__thumb { transition: none; } }
html.reduced-motion .access-switch__thumb { transition: none; }
@media (forced-colors: active) {
  .access-switch__track { border-color: ButtonText; }
  .access-switch__thumb { background: ButtonText; }
  .access-switch[aria-checked="true"] .access-switch__track { background: Highlight; }
}
.access-goto { text-decoration: underline; text-underline-offset: .2em; }

.access-why {
  margin: 0 0 .5rem;
  line-height: 1.5;
  color: var(--muted-2);
  font-size: .8125rem;
}

.audit-summary {
  list-style: none;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  background: var(--surface);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ink);
}
.audit-note { margin: 0 0 .75rem; font-size: var(--t-small); line-height: var(--lh-body); color: var(--ink-2); }
.audit-note--fact { font-family: var(--font-mono); font-size: .8125rem; color: var(--ink); }
.audit-scope { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--muted-2); }

.audit-report { margin-top: 1rem; border-top: 1px solid var(--line); }
.audit-report__summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--t-small);
}
.audit-report__body { font-size: .8125rem; line-height: 1.5; }
.audit-report__title { margin: 1rem 0 .35rem; font-size: .8125rem; font-weight: 600; }
.audit-report__body p { margin: 0; }
.audit-outline { margin: 0; padding-left: 1.1rem; }
.audit-outline .audit-outline { padding-left: 1rem; }
.audit-list { margin: 0; padding-left: 1.1rem; }
.audit-table-wrap { overflow-x: auto; }
.audit-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.audit-table th,
.audit-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.audit-table thead th { font-weight: 600; }

.audit-real { list-style: none; margin: 0; padding: 0; }
.audit-real__link {
  min-height: var(--tap);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

@media print {
  .access-panel, .xray-layer, .focus-spot, .icon-btn--access, .access-try, .access-foot-link { display: none !important; }
  html.test-gray main { filter: none; }
}

/* ==== 96-search.css ==== */
/* 96-search.css — site search / command palette (B13). Tokens only; both themes via the tokens. */
.cmdk-overlay { align-items: flex-start; padding-top: 12vh; }
.cmdk-modal {
  position: relative;
  width: min(640px, 100%);
  max-width: 640px;
  max-height: 70vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.cmdk-modal .modal-close { position: absolute; top: 8px; right: 8px; z-index: 1; }
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 64px 10px 20px;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
}
.cmdk-input-row > svg { width: 20px; height: 20px; color: var(--sage); flex-shrink: 0; }
.cmdk-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-h3);
}
.cmdk-input::placeholder { color: var(--sage); opacity: 1; }
.cmdk-input:focus { outline: none; }
.cmdk-input-row:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }
.cmdk-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; padding: 8px; }
.cmdk-results[hidden] { display: none; }
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
}
.cmdk-item.active { background: var(--surface); box-shadow: inset 2px 0 0 var(--ink); }
.cmdk-item-cat {
  flex-shrink: 0;
  min-width: 88px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cmdk-accent, var(--ink));
  background: color-mix(in srgb, var(--cmdk-accent, var(--ink)) 12%, transparent);
}
.cmdk-item-text { min-width: 0; flex: 1; }
.cmdk-item-title { display: block; font-size: var(--t-small); font-weight: 600; line-height: 1.3; color: var(--ink); }
.cmdk-item-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--t-micro);
  line-height: 1.35;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-empty { padding: 40px 20px; text-align: center; color: var(--ink-2); font-size: var(--t-small); }
.cmdk-hint {
  padding: 8px 12px 12px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cmdk-empty[hidden], .cmdk-hint[hidden] { display: none; }

@media (max-width: 600px) {
  .cmdk-overlay { padding: 16px; padding-top: 8vh; }
  .cmdk-modal { max-height: 84vh; }
  .cmdk-item-cat { min-width: 0; }
  .cmdk-item-sub { white-space: normal; }
}
@media (forced-colors: active) {
  .cmdk-item.active { outline: 2px solid Highlight; }
}