/* site.css — themes/bundle.css + styles.css. Regenerate: bun run css:bundle */
/* Auto-bundled theme cascade: hue → shared → brand-light → semantic → brand-dark */
/* Regenerate after editing theme sources: cat hue shared brand-light semantic brand-dark > bundle.css */

/* ===== hue.css ===== */
/*
 * Brand hue primitives — mirrored from Deedee client/themes/theme/hue.ts
 * active-theme sets --hue and --chroma-base on :root at runtime.
 */
:root {
  --hue: 65;
  --hue-lower: calc(var(--hue) - 5);
  --hue-low: calc(var(--hue) - 2);
  --hue-high: calc(var(--hue) + 3);
  --hue-higher: calc(var(--hue) + 6);
  --hue-accent: calc(var(--hue) - 3);
  --hue-secondary: calc(var(--hue) - 6);
  --hue-cta-end: calc(var(--hue) - 33);

  --chroma-base: 0.014;
}


/* ===== shared.css ===== */
/*
 * Mode-agnostic type, space, radius, motion — Deedee sharedThemeTokens shape.
 * Accent defaults; brand files refine per mode.
 * Units: px only (see calvinmaighan/no-rem-em).
 */
:root {
  --accent: oklch(0.42 calc(var(--chroma-base) * 8) var(--hue-accent));
  /* Accent-as-text; brand files refine per mode (same role as --cta-text). */
  --accent-text: oklch(0.42 calc(var(--chroma-base) * 10) var(--hue-accent));

  --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-mono: var(--mono);
  /* Google: Source Serif 4 (successor to Source Serif Pro); system serifs after */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, Cambria, "Times New Roman",
    Times, serif;

  /* Spacing — padding / margin / gap */
  --gap-xs: 2px;
  --gap-s: 6px;
  --gap-m: 12px;
  --gap-l: 20px;
  --gap-xl: 32px;

  /* Padding scale */
  --pad-s: 8px;
  --pad-m: 16px;
  --pad-l: 24px;

  /* Type scale */
  --font-s: 14px;
  --font-m: 16px;
  --font-l: 20px;
  --font-xl: 24px;
  --font-h3: 32px;
  --font-h2: 40px;
  --font-h1: 48px;
  --font-h0: 76px;

  /* Radius */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-xl: 32px;
  --radius-xxl: 48px;

  /* Legacy space aliases (px). Prefer --gap-* in new code. */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: var(--gap-m);
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: var(--gap-xl);
  --space-xl: 48px;
  --space-2xl: 72px;
  --space-3xl: 112px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 180ms;
  --dur-mid: 280ms;

  /* Shared control hover — filter only, no fill swap */
  --hover: saturate(1.15) brightness(1.08);

  /* Legacy radius aliases */
  --radius-input: var(--radius-m);
  --radius-panel: var(--radius-xl);
  --radius-btn: var(--radius-xl);

  /*
   * Breakpoints (mobile-first ranges):
   *   mobile  … 0 – --mobile
   *   tablet  … --mobile – --tablet
   *   desktop … --tablet – --desktop (and up)
   * @media cannot read custom props — keep query literals in sync with these.
   */
  --mobile: 720px;
  --tablet: 1020px;
  --desktop: 1320px;

  --max: 1200px;
  --measure: 720px;
  --pad: var(--gap-l);
  --header-h: 64px;
}


/* ===== brand-light.css ===== */
/*
 * Light brand — Deedee surface ladder:
 *   --base         lowest (section below hero)
 *   --background   canvas
 *   --muted        header / answers / how-we-work
 *   --card         raised cards
 *   --button       controls on muted sections
 */
:root,
:root[data-theme="light"] {
  --chroma: var(--chroma-base);
  --chroma-muted: calc(var(--chroma-base) * 0.889);
  --chroma-card: calc(var(--chroma-base) * 0.778);
  --chroma-button: calc(var(--chroma-base) * 0.667);
  --chroma-border: calc(var(--chroma-base) * 1.222);
  --chroma-text: calc(var(--chroma-base) * 2.222);
  --chroma-secondary: calc(var(--chroma-base) * 4.444);
  --chroma-accent: calc(var(--chroma-base) * 11.111);
  --chroma-label: calc(var(--chroma-base) * 6.389);

  --l-0: 0.86;
  --l-1: 0.88;
  --l-2: 0.92;
  --l-3: 0.97;
  --l-5: 0.99;

  --text: oklch(0.2 var(--chroma-text) var(--hue) / 88%);
  /* Darker muted/secondary so body copy clears WCAG on --muted / --background. */
  --text-muted: oklch(0.32 var(--chroma-text) var(--hue) / 92%);
  --secondary-text: oklch(0.28 var(--chroma-secondary) var(--hue-secondary));
  --article: #232323;
  --reading: var(--button);

  /* Ink band; --l-0 stays for borders */
  --base: oklch(0.2 var(--chroma) var(--hue-lower));
  --background: oklch(var(--l-1) 0.02 var(--hue-lower));
  --muted: oklch(var(--l-2) 0.022 var(--hue-low));
  --card: oklch(var(--l-3) var(--chroma-card) var(--hue));
  --button: oklch(var(--l-5) var(--chroma-button) var(--hue-high));
  --button-hover: oklch(1 var(--chroma-button) var(--hue-high));

  --secondary: oklch(0.909 0.043 73);
  --secondary-hover: oklch(0.87 0.055 70);

  /* Soft peach-beige — warm badge / accent fill (not the muddy olive L=0.42) */
  --accent: oklch(0.86 0.055 62);
  /* Accent-as-text: same chroma as --cta (0.2); L mid so it stays on-gamut. */
  --accent-text: oklch(0.42 0.2 48);

  /* Dark ink on green fill — mid-green on --cta fails contrast. */
  --cta-text: oklch(0.22 0.08 145);

  --hero-text: oklch(0.48 var(--chroma-label) var(--hue-accent));
  --text-gradient: linear-gradient(
    118deg,
    var(--cta) 8%,
    color-mix(in oklch, var(--cta) 45%, var(--text)) 48%,
    var(--text) 92%
  );

  --canvas: linear-gradient(180deg, var(--card) 0%, var(--secondary) 200%);
  --muted-gradient: linear-gradient(-180deg, var(--muted) 0%, var(--background) 150%);
  --card-gradient: linear-gradient(-180deg, var(--card) 0%, var(--muted) 150%);
  --card-gradient-soft: linear-gradient(
    -180deg,
    color-mix(in oklch, var(--card) 88%, transparent) 0%,
    color-mix(in oklch, var(--muted) 88%, transparent) 150%
  );
  --button-gradient: linear-gradient(0deg, var(--card) 0%, var(--button) 150%);

  --light: oklch(0.9 var(--chroma-muted) var(--hue) / 85%);
  --lighter: oklch(0.9 var(--chroma-muted) var(--hue) / 90%);
  --lightest: oklch(0.9 var(--chroma-muted) var(--hue) / 95%);
  --dark: oklch(0.1 var(--chroma-muted) var(--hue) / 4%);
  --darker: oklch(0.1 var(--chroma-muted) var(--hue) / 8%);
  --darkest: oklch(0.1 var(--chroma-muted) var(--hue) / 16%);

  --shadow: inset 0 2px 3px 0 var(--lightest), 0 2px 3px -1px var(--darker),
    0 4px 5px -1px var(--dark), inset 0 -2px 4px -2px var(--background);
  --shadow-ghost: 0 2px 3px -1px var(--darker), 0 4px 5px -1px var(--dark);
  --shadow-card: inset 0 2px 3px 0 var(--lightest), 0 4px 8px -2px var(--darker),
    0 8px 16px -4px var(--darkest), inset 0 -2px 4px -2px var(--background);
  --shadow-button: inset 0 1px 2px -1px var(--lighter), 0 4px 6px -2px var(--darker),
    0 4px 8px -2px var(--dark), inset 0 -2px 4px -2px var(--background);
  --shadow-hover: inset 0 1px 3px -1px var(--lightest), 0 6px 6px -3px var(--darkest),
    0 6px 12px -3px var(--dark), inset 0 -2px 4px -2px var(--background);
  --shadow-cutout: inset 0 -1px 1px -1px var(--muted), inset 0 1px 2px -1px var(--darker),
    inset -1px -3px 6px -1px var(--background);
  --shadow-cutout-muted: inset 0 -1px 1px -1px color-mix(in oklch, var(--muted) 55%, transparent),
    inset 0 1px 1px -1px color-mix(in oklch, var(--darker) 40%, transparent),
    inset -1px -2px 3px -1px color-mix(in oklch, var(--background) 65%, transparent);
  --shadow-cutout-card: inset 0 -1px 1px -1px var(--card), inset 0 1px 2px -1px var(--darker),
    inset -1px -3px 6px -1px var(--muted);

  --button-shadow: var(--shadow-button);

  /* Top inset like --shadow-button; short neutral drop; longer green glow */
  --cta-shadow:
    inset 0 1px 2px -1px var(--lighter),
    0 2px 4px -1px var(--darker),
    0 6px 14px -2px color-mix(in oklch, var(--cta) 42%, transparent);
  --cta-shadow-hover:
    inset 0 1px 3px -1px var(--lightest),
    0 3px 5px -1px var(--darkest),
    0 8px 18px -2px color-mix(in oklch, var(--cta) 52%, transparent);

  /* Dark hairline + alpha (not --l-0 — that leftover is ~0.86 and looks muddy) */
  --border: oklch(0.2 var(--chroma-border) var(--hue) / 0.14);
  --border-hover: oklch(0.2 var(--chroma-border) var(--hue) / 0.24);
  --border-muted: color-mix(in oklch, var(--border) 65%, transparent);

  color-scheme: light;
}




/* ===== semantic.css ===== */
/*
 * Fixed semantic colors — unchanged when brand hue / mode shifts.
 * Green CTA fill; status tokens only if UI needs them later.
 */
:root {
  --cta: oklch(74% 0.2 145);
  --cta-border: oklch(62% 0.18 145 / 0.15);
  /* Mode files refine lightness; hue stays with --cta (145). */
  --cta-text: oklch(0.42 0.11 145);
  /* Accent-as-text fallback; brand-light / brand-dark override. */
  --accent-text: oklch(0.42 0.2 48);
}


/* ===== brand-dark.css ===== */
/*
 * Dark brand — warm espresso ladder (not cool slate invert).
 * Surfaces (deep → bright):
 *   Deep shadow #130F0B · Dark espresso #1D1815 · Main #221D19
 *   Warm brown #27211D · Soft highlight #2F2824 · Brightest #453B36
 * CTA green + secondary beige match light (semantic / light values).
 */
:root[data-theme="dark"] {
  --chroma: 0.011;
  --chroma-muted: 0.012;
  --chroma-card: 0.013;
  --chroma-button: 0.016;
  --chroma-border: 0.016;
  --chroma-text: 0.012;
  --chroma-secondary: 0.043;
  --chroma-accent: calc(var(--chroma-base) * 8.333);
  --chroma-label: calc(var(--chroma-base) * 2.222);

  /* Ladder L matches espresso table */
  --l-0: 0.172; /* Deep shadow */
  --l-espresso: 0.214; /* Dark espresso */
  --l-1: 0.235; /* Main background */
  --l-2: 0.253; /* Warm brown */
  --l-3: 0.283; /* Soft highlight */
  --l-5: 0.361; /* Brightest reflection */

  --text: oklch(0.96 0.012 60 / 90%);
  --text-muted: oklch(0.78 0.014 55 / 72%);
  --secondary-text: oklch(0.82 0.03 70 / 78%);
  --article: var(--text);
  --reading: var(--base);

  --base: oklch(0.172 0.01 67); /* #130F0B Deep shadow */
  --espresso: oklch(0.214 0.01 53); /* #1D1815 Dark espresso */
  --background: oklch(0.235 0.011 61); /* #221D19 Main background */
  --muted: oklch(0.253 0.012 56); /* #27211D Warm brown */
  --card: oklch(0.283 0.013 52); /* #2F2824 Soft highlight */
  --button: oklch(0.361 0.016 48); /* #453B36 Brightest reflection */
  --button-hover: oklch(0.4 0.018 48);

  /* Warm beige at ~button lift (not light cream) */
  --secondary: oklch(0.361 0.028 70);
  --secondary-hover: oklch(0.4 0.032 68);

  --accent: oklch(0.88 var(--chroma-accent) var(--hue-accent));
  /* Same yellow as --accent — readable accent-as-text on dark surfaces. */
  --accent-text: oklch(0.88 var(--chroma-accent) var(--hue-accent));

  /* Same hue as --cta (145); light tint on the green fill */
  --cta-text: oklch(0.96 0.05 145);

  --hero-text: oklch(0.92 var(--chroma-label) var(--hue-accent));
  --text-gradient: linear-gradient(
    118deg,
    var(--cta) 8%,
    color-mix(in oklch, var(--cta) 45%, var(--text)) 48%,
    var(--text) 92%
  );

  --canvas: linear-gradient(180deg, var(--background) 0%, var(--card) 200%);
  --muted-gradient: linear-gradient(180deg, var(--muted) 0%, var(--background) 180%);
  --card-gradient: linear-gradient(180deg, var(--card) 0%, var(--muted) 180%);
  --card-gradient-soft: linear-gradient(
    180deg,
    color-mix(in oklch, var(--card) 88%, transparent) 0%,
    color-mix(in oklch, var(--muted) 88%, transparent) 180%
  );
  --button-gradient: linear-gradient(0deg, var(--card) 0%, var(--button) 150%);

  --light: oklch(0.361 0.016 48 / 18%);
  --lighter: oklch(0.361 0.016 48 / 28%);
  --lightest: oklch(0.4 0.018 48 / 38%);
  --dark: oklch(0.172 0.01 67 / 35%);
  --darker: oklch(0.172 0.01 67 / 50%);
  --darkest: oklch(0.172 0.01 67 / 65%);

  --shadow: inset 0 1px 2px -1px var(--light), 0 1px 2px -1px var(--darker),
    0 2px 4px -1px var(--dark);
  --shadow-ghost: 0 1px 2px -1px var(--darker), 0 2px 4px -1px var(--dark);
  --shadow-card: inset 0 1px 2px -1px var(--light), 0 4px 10px -2px var(--darker),
    0 10px 20px -4px var(--darkest);
  --shadow-button: inset 0 1px 2px -1px var(--lighter), 0 4px 6px -1px var(--darker),
    0 4px 8px -1px var(--dark);
  --shadow-hover: inset 0 1px 3px -1px var(--lightest), 0 6px 6px -1px var(--darker),
    0 6px 12px -1px var(--dark);
  --shadow-cutout: inset -1px -1px 4px -2px var(--button), inset 0 1px 8px -1px var(--darkest),
    inset 0 -1px 1px 1px var(--light);
  --shadow-cutout-muted: inset -1px -1px 2px -2px color-mix(in oklch, var(--button) 50%, transparent),
    inset 0 1px 4px -1px color-mix(in oklch, var(--darkest) 45%, transparent),
    inset 0 -1px 1px 0 color-mix(in oklch, var(--light) 55%, transparent);
  --shadow-cutout-card: inset -1px -1px 4px -2px var(--card), inset 0 1px 8px -1px var(--darkest),
    inset 0 -1px 1px 1px var(--light);

  --button-shadow: var(--shadow-hover);

  --border: oklch(0.361 0.016 48 / 0.4);
  --border-hover: oklch(0.4 0.018 48 / 0.55);
  --border-muted: color-mix(in oklch, var(--border) 65%, transparent);

  /* CTA: inherit semantic.css (same green as light) — no dark override */

  --cta-shadow:
    inset 0 1px 2px -1px var(--lighter),
    0 2px 4px -1px var(--darker),
    0 6px 14px -2px color-mix(in oklch, var(--cta) 42%, transparent);
  --cta-shadow-hover:
    inset 0 1px 3px -1px var(--lightest),
    0 3px 5px -1px var(--darkest),
    0 8px 18px -2px color-mix(in oklch, var(--cta) 52%, transparent);

  color-scheme: dark;
}






/* ===== styles.css ===== */
/* Hallmark · genre: modern-minimal · macrostructure: Letter · theme: custom
 * tone: utilitarian · anchor hue: beige 65 · enrichment: none
 * nav: N1b · footer: Ft5 · CTA: squircle green · display: Archivo Black
 * theme: site/themes (Deedee-style hue + brand-light/dark)
 * designed-as: site portfolio · beige / black / white / green
 */

/* Theme tokens load from HTML <link>s (parallel) — see index/contact/tips heads. */
/* Fonts also load from HTML <link> (preconnect + stylesheet). */

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

html {
  overflow-x: clip;
  overflow-y: auto;
  scroll-behavior: smooth;
}
body {
  position: relative;
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--font-m);
  line-height: 1.6;
  color: var(--text);
  background: var(--background);
  min-height: 100vh;
}
img,
svg {
 display: block;
 max-width: 100%;
}
.visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}
a {
 color: inherit;
}
::selection {
 background: color-mix(in oklch, var(--cta) 45%, transparent);
 color: var(--text);
}
button,
input,
select,
textarea {
 font: inherit;
}
h1,
h2,
h3,
h4 {
 font-style: normal;
 overflow-wrap: anywhere;
 min-width: 0;
}
.wrap {
 width: min(var(--max), calc(100% - 2 * var(--pad)));
 margin-inline: auto;
}
.letter-rail {
 max-width: 704px;
}
.site-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 40;
 height: var(--header-h);
 background: var(--card-gradient);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border-bottom: 1px solid var(--border);
 box-shadow: var(--shadow-ghost);
}
.site-header .bar {
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: center;
 gap: var(--space-sm);
 width: 100%;
 height: var(--header-h);
 padding-left: var(--pad);
 padding-right: var(--pad);
 box-sizing: border-box;
}
.brand {
 font-family: var(--font-display);
 font-weight: 400;
 font-size: var(--font-m);
 letter-spacing: -0.2px;
 text-decoration: none;
 white-space: nowrap;
 text-transform: uppercase;
}
.header-actions {
 display: flex;
 align-items: center;
 gap: var(--space-2xs);
 justify-self: end;
}
.locale-menu {
 position: relative;
}
.locale-popover {
 position: absolute;
 top: calc(100% + var(--gap-s));
 right: 0;
 z-index: 45;
 display: none;
 flex-direction: column;
 gap: var(--gap-xs);
 min-width: 100%;
 padding: var(--gap-s);
 border: 1px solid var(--border);
 border-radius: var(--radius-btn);
 corner-shape: squircle;
 background: linear-gradient(
  180deg,
  color-mix(in oklch, var(--card) 72%, transparent) 0%,
  color-mix(in oklch, var(--muted) 72%, transparent) 150%
);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 box-shadow: var(--shadow-ghost);
 opacity: 0;
 transform: translateY(-6px);
 pointer-events: none;
 transition:
  opacity 220ms var(--ease-out),
  transform 220ms var(--ease-out),
  display 220ms allow-discrete;
}
.locale-popover.is-open {
 display: flex;
 opacity: 1;
 transform: translateY(0);
 pointer-events: auto;
}
@starting-style {
 .locale-popover.is-open {
  opacity: 0;
  transform: translateY(-6px);
}}
.locale-option {
 appearance: none;
 border: 0;
 background: transparent;
 color: var(--text-muted);
 font: inherit;
 font-size: 11.52px;
 font-weight: 700;
 letter-spacing: 0.6px;
 text-align: left;
 padding: 8.8px var(--gap-m);
 border-radius: calc(var(--radius-btn) - var(--radius-s));
 corner-shape: squircle;
 cursor: pointer;
}
.locale-option:hover,
.locale-option:focus-visible {
 color: var(--text);
 background: color-mix(in oklch, var(--button) 55%, transparent);
 outline: none;
}
.locale-option[aria-selected="true"] {
 color: var(--text);
 background: color-mix(in oklch, var(--button) 70%, transparent);
}
.icon-sprite {
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
}
.icon {
 width: 18.4px;
 height: 18.4px;
 display: block;
 flex-shrink: 0;
}
.icon-btn,
.btn {
 border-radius: var(--radius-btn);
 corner-shape: squircle;
 border: 1px solid var(--border);
 background: var(--button-gradient);
 box-shadow: var(--button-shadow);
 color: var(--text);
 cursor: pointer;
 transition:
  background var(--dur-short) var(--ease-out),
  border-color var(--dur-short) var(--ease-out),
  color var(--dur-short) var(--ease-out),
  box-shadow var(--dur-short) var(--ease-out),
  transform var(--dur-short) var(--ease-out);
}
.icon-btn {
 min-width: 40px;
 height: 40px;
 padding: 0;
 display: inline-grid;
 place-items: center;
 filter: none;
 transition:
  filter var(--dur-mid) var(--ease-out),
  box-shadow var(--dur-mid) var(--ease-out),
  transform var(--dur-short) var(--ease-out);
}
.icon-btn:hover {
 filter: var(--hover);
 box-shadow: var(--shadow-hover);
}
.icon-btn-wide {
 min-width: auto;
 padding: 0 var(--gap-m);
 display: inline-flex;
 align-items: center;
 gap: var(--gap-s);
}
.icon-btn-text {
 font-size: 11.52px;
 font-weight: 700;
 letter-spacing: 0.6px;
}
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--gap-s);
 min-height: 45.6px;
 padding: var(--gap-m) var(--gap-l);
 text-decoration: none;
 font-weight: 600;
 font-size: var(--font-m);
 white-space: nowrap;
}
.btn-primary {
 background: var(--cta);
 border-color: var(--cta-border);
 color: var(--cta-text);
 box-shadow: var(--cta-shadow);
 filter: none;
 transition:
  filter var(--dur-mid) var(--ease-out),
  box-shadow var(--dur-mid) var(--ease-out),
  transform var(--dur-short) var(--ease-out);
}
.btn-primary:hover {
 filter: var(--hover);
 box-shadow: var(--cta-shadow-hover);
}
.btn-secondary {
 background: color-mix(in oklch, var(--secondary) 88%, transparent);
 border-color: var(--secondary-hover);
 color: var(--text);
 box-shadow: var(--shadow-button);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 filter: none;
 transition:
  filter var(--dur-mid) var(--ease-out),
  box-shadow var(--dur-mid) var(--ease-out),
  transform var(--dur-short) var(--ease-out);
}
.btn-secondary:hover {
 filter: var(--hover);
 box-shadow: var(--shadow-hover);
}
.btn:active,
.btn.is-active,
.icon-btn:active,
.menu-toggle:active {
 transform: translateY(1px);
}
.btn:focus-visible,
.icon-btn:focus-visible,
.menu-toggle:focus-visible,
.oss-pkg:focus-visible,
.oss-repo:focus-visible,
.foot-meta a:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}
.menu-toggle {
 margin-left: var(--gap-s);
 min-width: 40px;
 height: 40px;
 padding: 0;
 display: inline-grid;
 place-items: center;
 border-radius: var(--radius-btn);
 corner-shape: squircle;
 border: 1px solid var(--cta-border);
 background: var(--cta);
 box-shadow: var(--cta-shadow);
 color: var(--cta-text);
 cursor: pointer;
 filter: none;
 transition:
  filter var(--dur-mid) var(--ease-out),
  box-shadow var(--dur-mid) var(--ease-out),
  transform var(--dur-short) var(--ease-out);
}
.menu-toggle:hover {
 filter: var(--hover);
 box-shadow: var(--cta-shadow-hover);
}
.backdrop {
 position: fixed;
 top: var(--header-h);
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 30;
 display: none;
 background-color: oklch(17% 0.03 255 / 0);
 backdrop-filter: blur(0);
 -webkit-backdrop-filter: blur(0);
 pointer-events: none;
 visibility: hidden;
 transition:
  background-color 360ms var(--ease-out),
  backdrop-filter 360ms var(--ease-out),
  -webkit-backdrop-filter 360ms var(--ease-out),
  display 360ms allow-discrete;
}
.backdrop.is-open {
 display: block;
 background-color: oklch(17% 0.03 255 / 0.12);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 pointer-events: auto;
 visibility: visible;
}
@starting-style {
 .backdrop.is-open {
  background-color: oklch(17% 0.03 255 / 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}}
.nav-drawer {
 position: fixed;
 top: calc(var(--header-h) + var(--gap-m));
 right: var(--gap-s);
 bottom: var(--gap-m);
 z-index: 35;
 width: min(320px, calc(100vw - 12px));
 display: none;
 flex-direction: column;
 gap: var(--space-sm);
 padding: var(--space-lg) var(--gap-xl) var(--gap-xl);
 overflow: auto;
 border: 1px solid var(--border);
 border-radius: var(--radius-xl);
 corner-shape: squircle;
 background: linear-gradient(
  180deg,
  color-mix(in oklch, var(--card) 72%, transparent) 0%,
  color-mix(in oklch, var(--muted) 72%, transparent) 150%
);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 box-shadow: var(--shadow-ghost);
 opacity: 0;
 transform: translateY(-12px);
 pointer-events: none;
 transition:
  opacity 360ms var(--ease-out),
  transform 360ms var(--ease-out),
  display 360ms allow-discrete;
}
.nav-drawer.is-open {
 display: flex;
 opacity: 1;
 transform: translateY(0);
 pointer-events: auto;
}
@starting-style {
 .nav-drawer.is-open {
  opacity: 0;
  transform: translateY(-12px);
}}
.nav-drawer a:not(.btn) {
 text-decoration: none;
 font-weight: 500;
 padding: 8.8px 0;
 border-bottom: 1px solid var(--border);
 white-space: nowrap;
}
.nav-drawer .btn {
 margin-top: auto;
 width: 100%;
 justify-content: center;
}
section {
 padding: var(--space-2xl) 0;
 background: var(--background);
}
.pad-tight {
 padding: var(--space-xl) 0;
}
.pad-tall {
 padding: var(--space-3xl) 0;
}
.band-base {
 background: var(--muted);
}
.band-warm {
 background: var(--muted);
}
.band-cool {
 background: var(--muted);
}
.band-raise {
 background: var(--card);
}
.band-ink {
 background: var(--base);
 color: oklch(0.96 var(--chroma-text) var(--hue) / 88%);
}
.band-tail {
 background: var(--muted-gradient);
}
.band-tail > section {
 background: transparent;
}
.band-ink .section-head h2 {
 color: inherit;
}
.section-head {
 max-width: var(--measure);
 margin-bottom: var(--space-xl);
}
.section-head h2 {
 font-family: var(--font-display);
 font-size: var(--font-h1);
 font-weight: 400;
 letter-spacing: -0.5px;
 line-height: 1.05;
 margin: 0 0 var(--space-xs);
}
.section-head p {
 margin: 0;
 color: var(--text-muted);
 max-width: 544px;
}
.fold {
 display: flex;
 flex-direction: column;
}
.hero {
 position: relative;
 isolation: isolate;
 flex: 1 1 auto;
 display: flex;
 align-items: center;
 min-height: 100dvh;
 padding: var(--space-lg) 0;
 padding-top: calc(var(--header-h) + var(--space-lg));
 /* clip (not hidden): hide ambient bleed without creating a scroll trap */
 overflow: clip;
}
.hero-ambient {
 position: absolute;
 inset: 0;
 z-index: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 opacity: 1;
 background: var(--canvas);
}
:root[data-theme="dark"] .hero-ambient {
 opacity: 0.9;
}
main {
 position: relative;
 z-index: 1;
}
.hero.band-base {
 background: transparent;
}
.hero-content {
 position: relative;
 z-index: 1;
}
.hero-tempo {
 position: absolute;
 right: var(--pad);
 bottom: var(--space-md);
 z-index: 2;
 display: flex;
 align-items: center;
 gap: 8.8px;
 padding: var(--gap-s) var(--gap-m);
 border-radius: var(--radius-btn);
 border: 1px solid color-mix(in oklch, var(--text) 10%, transparent);
 background: var(--card-gradient-soft);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 color: var(--text-muted);
 font-size: 11.52px;
 font-weight: 600;
 letter-spacing: 0.6px;
 text-transform: uppercase;
 user-select: none;
}
.hero-tempo-label {
 display: none;
 opacity: 0.85;
}
.hero-tempo-value {
 min-width: 3.5ch;
 font-variant-numeric: tabular-nums;
 color: var(--secondary-text);
}
.hero-tempo input[type="range"] {
 --tempo-fill: 0%;
 width: 88px;
 height: 5.6px;
 appearance: none;
 background: linear-gradient(
  90deg,
  var(--text) 0%,
  var(--text) var(--tempo-fill),
  color-mix(in oklch, var(--text) 14%, transparent) var(--tempo-fill),
  color-mix(in oklch, var(--text) 14%, transparent) 100%
);
 border-radius: 999px;
 cursor: pointer;
}
.hero-tempo input[type="range"]::-webkit-slider-thumb {
 appearance: none;
 width: 13.6px;
 height: 13.6px;
 border-radius: 50%;
 background: var(--text);
 border: 2px solid #fff;
 cursor: pointer;
}
.hero-tempo input[type="range"]::-moz-range-thumb {
 width: 13.6px;
 height: 13.6px;
 border-radius: 50%;
 background: var(--text);
 border: 2px solid #fff;
 cursor: pointer;
}
:root[data-theme="dark"] .hero-tempo input[type="range"]::-webkit-slider-thumb {
 border-color: var(--secondary);
}
:root[data-theme="dark"] .hero-tempo input[type="range"]::-moz-range-thumb {
 border-color: var(--secondary);
}
@media (min-width: 720px) {
 .hero-tempo-label {
  display: inline;
}
 .hero-tempo input[type="range"] {
  width: 120px;
}}
.hero-copy {
 max-width: 640px;
 overflow: visible;
}
.hero-copy h1 {
 font-family: var(--font-display);
 font-size: var(--font-h0);
 font-weight: 400;
 letter-spacing: -0.6px;
 line-height: 1.05;
 margin: 0;
 max-width: 12ch;
 text-wrap: balance;
 overflow: visible;
 color: var(--text);
 text-box: trim-start cap text;
 text-box-trim: trim-start;
 text-box-edge: cap text;
 padding-bottom: var(--gap-xs);
}
.hero-copy h1 .hero-word {
 background: linear-gradient(
  180deg,
  var(--text) 0%,
  var(--text) 40%,
  var(--cta) 90%,
  var(--cta) 100%
);
 background-clip: text;
 -webkit-background-clip: text;
 color: transparent;
 -webkit-text-fill-color: transparent;
 filter:
  drop-shadow(0 -1px 1px var(--lighter))
  drop-shadow(0 2px 3px var(--darker))
  drop-shadow(0 4px 5px var(--dark));
}
@supports (text-box: trim-start cap text) {
 .hero-copy h1 {
  padding-bottom: 0;
}}
.hero-rule {
 display: block;
 width: 104px;
 height: 3px;
 margin: 14.4px 0 var(--space-md);
 border-radius: 1px;
 background: linear-gradient(
  90deg,
  var(--cta),
  color-mix(in oklch, var(--cta) 55%, transparent) 55%,
  transparent
);}
.hero-copy .lede {
 margin: 0 0 var(--space-lg);
 color: var(--secondary-text);
 max-width: 544px;
 font-size: var(--font-m);
 line-height: 1.55;
}
.cta-row {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-xs);
}
.tips {
 flex: 0 0 auto;
 min-height: min(72vh, 672px);
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.tips-head {
 margin-bottom: var(--space-xl);
}
.tips-grid {
 display: grid;
 gap: var(--space-lg);
 max-width: 720px;
}
.tips-card {
 display: grid;
 grid-template-columns: minmax(12ch, 1fr) auto;
 column-gap: var(--space-lg);
 row-gap: var(--space-sm);
 align-items: start;
 overflow: hidden;
 padding: var(--space-md);
 border: 1px solid color-mix(in oklch, var(--border) 55%, transparent);
 border-radius: var(--radius-xl);
 background: var(--muted);
 box-shadow: var(--shadow-button);
 color: var(--text);
}
.tips-card-copy {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: flex-start;
 align-self: stretch;
 gap: var(--space-xs);
 min-width: 0;
 text-align: start;
}
.tips-card-desc {
 margin: 0;
 font-size: var(--font-l);
 line-height: 1.45;
 color: var(--secondary-text);
 max-width: 36ch;
}
.tips-card-aside {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: var(--space-sm);
 width: min(280px, 46vw);
}
.tips-card-media {
 display: block;
 width: 100%;
 line-height: 0;
 overflow: hidden;
 border-radius: var(--radius-m);
}
.tips-card-media img {
 width: 100%;
 height: auto;
 aspect-ratio: 1672 / 941;
 object-fit: cover;
}
.tips-card-meta {
 margin: 0;
 margin-top: auto;
 font-size: var(--font-s);
 color: var(--text-muted);
 letter-spacing: 0.3px;
}
.tips-card-copy h3 {
 margin: 0;
 font-family: var(--font-display);
 font-size: clamp(var(--font-l), 2.4vw, 27.2px);
 font-weight: 400;
 letter-spacing: -0.3px;
 line-height: 1.2;
 overflow-wrap: normal;
 text-wrap: balance;
}
.tips-card-cta {
 box-sizing: border-box;
 justify-content: center;
 width: auto;
 padding-inline: var(--space-md);
 background: var(--accent);
 border-color: var(--accent);
 /* Dark ink on peach fill — --accent-text is accent-as-text, not on-fill. */
 color: oklch(0.28 0.08 55);
 box-shadow: var(--shadow-button);
}
.tips-card-cta:hover {
 box-shadow: var(--shadow-hover);
}
.bundle-grid {
 display: grid;
 gap: var(--space-md);
}
.bundle-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: var(--space-sm);
 padding: var(--space-xl);
 border: 1px solid var(--border);
 border-radius: var(--radius-panel);
 background: var(--card-gradient);
 box-shadow: var(--shadow-card);
 min-width: 0;
}
.bundle-card h3 {
 font-family: var(--font-display);
 font-size: clamp(24px, 2.4vw, 29.6px);
 font-weight: 400;
 letter-spacing: -0.3px;
 margin: 0;
}
.bundle-card p:not(.bundle-rec) {
 margin: 0;
 color: var(--secondary-text);
 font-size: var(--font-m);
 line-height: 1.55;
}
.bundle-card.is-recommended {
 border-color: color-mix(in oklch, var(--cta) 55%, var(--border));
 box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklch, var(--cta) 28%, transparent);
}
:root[data-theme="light"] .bundle-card.is-recommended {
 border-color: var(--accent);
 box-shadow: var(--shadow-card);
}
.bundle-rec {
 position: absolute;
 top: 0;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 1;
 margin: 0;
 font-size: var(--font-s);
 font-weight: 600;
 letter-spacing: 0.4px;
 color: oklch(0.28 0.08 55);
 background: var(--accent);
 border: 0;
 border-radius: var(--radius-btn);
 corner-shape: squircle;
 padding: 4.8px 10.4px;
 white-space: nowrap;
}
.bundle-cta {
 margin-top: var(--space-xl);
}
@media (min-width: 720px) {
 .bundle-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}
 .bundle-card.is-recommended {
  transform: translateY(-4px);
}}
.stack {
 position: relative;
 isolation: isolate;
 overflow: clip;
 /* Soft solid: ink band rebuilds the surface ladder against --base, so every
    element is a filled shape with a shadow — no strokes anywhere. */
 --stack-lift: 0 2px 4px -2px var(--darkest), 0 10px 24px -12px var(--darkest);
 --stack-lift-hover: 0 4px 8px -3px var(--darkest), 0 18px 36px -16px var(--darkest);
 --stack-pill-lift: 0 1px 2px -1px var(--darker), 0 4px 10px -6px var(--darkest);
}
.stack::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 background: radial-gradient(
  52% 46% at 10% -6%,
  color-mix(in oklch, var(--cta) 16%, transparent),
  transparent 68%
 );
}
.stack .section-head {
 margin-bottom: var(--space-md);
}
.stack .section-head p {
 color: color-mix(in oklch, currentColor 74%, transparent);
}
.stack-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--gap-s) var(--gap-l);
 margin-bottom: var(--space-lg);
 font-size: var(--font-s);
 color: color-mix(in oklch, currentColor 62%, transparent);
}
.stack-legend {
 display: inline-flex;
 align-items: center;
 gap: var(--gap-s);
}
.stack-legend-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--cta);
}
.stack-board {
 display: grid;
 gap: var(--gap-l);
}
.stack-card {
 display: flex;
 flex-direction: column;
 gap: var(--space-sm);
 padding: var(--space-lg);
 border: 0;
 border-radius: var(--radius-xl);
 corner-shape: squircle;
 background: var(--card-gradient);
 box-shadow: var(--stack-lift);
 color: var(--text);
 transition: box-shadow var(--dur-mid) var(--ease-out);
}
.stack-card:hover {
 box-shadow: var(--stack-lift-hover);
}
.stack-card-head {
 display: flex;
 align-items: center;
 gap: var(--gap-m);
}
.stack-ico {
 flex: 0 0 auto;
 display: grid;
 place-items: center;
 width: 44px;
 height: 44px;
 border-radius: var(--radius-m);
 corner-shape: squircle;
 background: var(--cta);
 box-shadow: var(--stack-pill-lift);
 color: var(--cta-text);
}
.stack-ico .icon {
 width: 22px;
 height: 22px;
}
.stack-card h3 {
 margin: 0;
 font-family: var(--font-display);
 font-size: var(--font-l);
 font-weight: 400;
 letter-spacing: -0.3px;
 line-height: 1.2;
}
.stack-card-note {
 margin: 0;
 font-size: var(--font-s);
 line-height: 1.5;
 color: var(--text);
 max-width: 44ch;
}
.stack-chips {
 display: flex;
 flex-wrap: wrap;
 gap: var(--gap-s);
 margin: 0;
 padding: 0;
 list-style: none;
}
.stack-chips li {
 padding: 7px var(--gap-m);
 border: 0;
 border-radius: var(--radius-btn);
 corner-shape: squircle;
 background: var(--button);
 box-shadow: var(--stack-pill-lift);
 font-size: var(--font-s);
 font-weight: 500;
 line-height: 1.35;
 color: var(--text);
 transition:
  background var(--dur-short) var(--ease-out),
  box-shadow var(--dur-short) var(--ease-out);
}
.stack-chips li:hover {
 background: var(--button-hover);
}
.stack-chips li.is-core {
 color: var(--cta-text);
}
@keyframes stackIn {
 from {
  opacity: 0;
  transform: translateY(18px);
}
 to {
  opacity: 1;
  transform: none;
}}
@supports (animation-timeline: view()) {
 .stack-card {
  animation: stackIn linear both;
  animation-timeline: view();
  animation-range: entry 4% cover 24%;
}}
@media (min-width: 1020px) {
 .stack-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
 .stack-card {
  padding: var(--space-xl);
}}
.oss-section {
 overflow: clip;
 /* Match gap above about (band-tail start): about pad-tight bottom only. */
 padding-top: 0;
}
.oss-doc {
 padding: var(--space-xl);
 border: 0;
 border-radius: var(--radius-xl);
 corner-shape: squircle;
 background: var(--card-gradient);
 box-shadow: var(--shadow-card);
 color: var(--text);
}
.oss-doc-head {
 margin-bottom: var(--space-lg);
}
.oss-doc-head h2 {
 font-family: var(--font-display);
 font-size: var(--font-h1);
 font-weight: 400;
 letter-spacing: -0.5px;
 line-height: 1.05;
 margin: 0 0 var(--space-xs);
}
.oss-doc-role {
 margin: 0 0 var(--gap-m);
 font-size: var(--font-l);
 font-weight: 500;
 color: var(--text);
}
.oss-doc-lede {
 margin: 0;
 max-width: 52ch;
 color: var(--secondary-text);
}
.oss-doc h3 {
 font-family: var(--font-display);
 font-size: var(--font-xl);
 font-weight: 400;
 letter-spacing: -0.3px;
 margin: 0 0 var(--space-md);
}
.oss-doc h3 + .oss-table-wrap,
.oss-doc h3 + .oss-code {
 margin-top: 0;
}
.oss-table-wrap {
 margin: 0 0 var(--space-xl);
 overflow-x: auto;
 border-radius: var(--radius-l);
 corner-shape: squircle;
 background: var(--muted-gradient);
 box-shadow: var(--shadow-cutout);
}
.oss-table {
 width: 100%;
 border-collapse: collapse;
 font-size: var(--font-s);
}
.oss-table th,
.oss-table td {
 padding: var(--gap-m) var(--gap-l);
 text-align: left;
 vertical-align: top;
}
.oss-table th {
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.4px;
 text-transform: uppercase;
 color: var(--text-muted);
}
.oss-table tbody tr + tr td {
 box-shadow: inset 0 1px 0 0 color-mix(in oklch, var(--text) 8%, transparent);
}
.oss-pkg {
 font-family: var(--font-mono);
 font-weight: 500;
 color: var(--cta-text);
 text-decoration: none;
}
.oss-pkg:hover {
 color: var(--text);
}
.oss-repo {
 display: inline-flex;
 align-items: center;
 gap: var(--gap-s);
 color: var(--secondary-text);
 text-decoration: none;
 white-space: nowrap;
}
.oss-repo:hover {
 color: var(--text);
}
.oss-repo .icon {
 width: 14px;
 height: 14px;
}
.oss-code {
 margin: 0 0 var(--space-md);
 padding: var(--space-md) var(--space-lg);
 overflow-x: auto;
 border: 0;
 border-radius: var(--radius-l);
 corner-shape: squircle;
 background: var(--base);
 box-shadow: var(--shadow-cutout);
 color: var(--button);
 font-family: var(--font-mono);
 font-size: 13px;
 line-height: 1.65;
 -webkit-overflow-scrolling: touch;
}
:root[data-theme="dark"] .oss-code {
 background: var(--base);
 color: var(--text);
}
.oss-code code {
 display: block;
 font: inherit;
 white-space: pre;
}
.oss-code .tok-kw {
 color: var(--cta);
}
.oss-code .tok-str {
 color: inherit;
 opacity: 0.65;
}
.oss-code .tok-tag,
.oss-code .tok-fn {
 color: var(--accent);
}
.oss-doc-foot {
 margin: 0;
 font-size: var(--font-s);
 line-height: 1.55;
 color: var(--secondary-text);
}
@media (max-width: 719px) {
 .oss-table thead {
  display: none;
}
 .oss-table,
 .oss-table tbody,
 .oss-table tr,
 .oss-table td {
  display: block;
  width: 100%;
}
 .oss-table tr {
  padding: var(--gap-l);
}
 .oss-table tbody tr + tr {
  box-shadow: inset 0 1px 0 0 color-mix(in oklch, var(--text) 8%, transparent);
}
 .oss-table tbody tr + tr td {
  box-shadow: none;
}
 .oss-table td {
  padding: var(--gap-xs) 0;
}
 .oss-table td:first-child {
  padding-top: 0;
}
 .oss-table td:last-child {
  padding-bottom: 0;
}
 .oss-table td:nth-child(2) {
  color: var(--secondary-text);
}
}
@media (min-width: 720px) {
 .oss-doc {
  padding: var(--space-2xl);
}
}
.about-grid {
 display: grid;
 gap: var(--space-xl);
 align-items: center;
}
.portrait {
 width: 192px;
 max-width: 100%;
 aspect-ratio: 1;
 justify-self: start;
 overflow: clip;
 border-radius: var(--radius-xxl);
 corner-shape: squircle;
 background: var(--muted);
 box-shadow: var(--shadow-card);
}
.portrait img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.about-copy {
 min-width: 0;
}
.about-copy h2 {
 font-family: var(--font-display);
 font-size: var(--font-h1);
 font-weight: 400;
 letter-spacing: -0.4px;
 line-height: 1.12;
 margin: 0 0 var(--space-md);
}
.about-copy p {
 margin: 0;
 color: var(--secondary-text);
 max-width: 608px;
}
@media (min-width: 720px) {
 .about-grid {
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-xl);
 }
 .portrait {
  margin-left: var(--gap-xl);
 }
}
.contact-page {
 background: var(--muted-gradient);
}
.contact-page main {
 padding-top: var(--header-h);
 min-height: 100dvh;
}
.contact-panel {
 display: grid;
 gap: var(--space-xl);
 padding: var(--space-xl);
 border-radius: var(--radius-panel);
 background: var(--card-gradient);
 box-shadow: var(--shadow-card);
 color: var(--text);
}
.contact-panel h1,
.contact-panel h2 {
 font-family: var(--font-display);
 font-size: var(--font-h1);
 font-weight: 400;
 letter-spacing: -0.4px;
 line-height: 1.12;
 margin: 0 0 var(--space-sm);
 color: var(--text);
}
.contact-copy p {
 margin: 0;
 color: var(--text-muted);
 max-width: 544px;
}
.contact-panel form {
 display: grid;
 gap: var(--space-sm);
}
.contact-panel label {
 display: grid;
 gap: var(--gap-s);
 font-size: var(--font-s);
 font-weight: 500;
}
.contact-panel input,
.contact-panel select,
.contact-panel textarea {
 border: 1px solid var(--border);
 border-radius: var(--radius-input);
 background: var(--card);
 box-shadow: var(--shadow-cutout);
 color: var(--text);
 padding: var(--gap-m) var(--gap-m);
 min-height: 44px;
}
.contact-panel textarea {
 min-height: 112px;
 resize: vertical;
}
.contact-panel input:focus,
.contact-panel select:focus,
.contact-panel textarea:focus {
 outline: 2px solid var(--accent);
 outline-offset: 1px;
}
.contact-panel .btn-primary {
 background: var(--cta);
 color: var(--cta-text);
 border-color: var(--cta-border);
 justify-self: start;
}
.form-row {
 display: grid;
 gap: var(--space-sm);
}
.form-note {
 margin: 0;
 font-size: var(--font-s);
 color: var(--text-muted);
}
.form-note[hidden] {
 display: none;
}
@media (min-width: 720px) {
 .contact-panel {
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-2xl);
  padding: var(--space-2xl);
}
 .form-row {
  grid-template-columns: 1fr 1fr;
}}
.site-footer {
 padding: var(--space-2xl) 0 var(--space-xl);
 background: linear-gradient(180deg, var(--button) 0%, var(--button) 35%, var(--cta) 400%);
 border-top: 1px solid var(--border);
}
.foot-statement {
 font-family: var(--font-display);
 font-size: clamp(29.6px, 3.5vw, 44px);
 font-weight: 400;
 letter-spacing: -0.5px;
 line-height: 1.1;
 margin: 0 0 var(--space-lg);
 max-width: 16ch;
 color: var(--text);
}
.foot-meta {
 display: flex;
 flex-wrap: wrap;
 gap: var(--gap-s) var(--gap-m);
 align-items: center;
 font-size: var(--font-s);
 color: var(--text-muted);
 margin: 0;
}
.foot-meta a {
 color: var(--secondary-text);
 text-decoration: none;
 white-space: nowrap;
}
.foot-meta a:hover {
 color: var(--text);
}
.foot-meta .sep {
 color: var(--border-hover);
}
.foot-ico {
 display: inline-flex;
 align-items: center;
 gap: var(--gap-s);
}
.foot-ico .icon {
 width: 16px;
 height: 16px;
}
.foot-place {
 display: inline-flex;
 align-items: center;
 gap: var(--gap-s);
}
.foot-canada {
 width: 18px;
 height: 14px;
 flex-shrink: 0;
}
@keyframes readProgress {
 from {
  transform: scaleX(0);
}
 to {
  transform: scaleX(1);
}}
.read-progress {
 position: fixed;
 left: 0;
 bottom: 0;
 z-index: 50;
 width: 100%;
 height: 2px;
 background: var(--cta);
 transform: scaleX(0);
 transform-origin: left center;
 pointer-events: none;
}
@supports (animation-timeline: scroll()) {
 .read-progress {
  animation-name: readProgress;
  animation-duration: 1ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: scroll(root);
}}
.article-hero {
 padding-top: calc(var(--header-h) + var(--space-xl));
 padding-bottom: 0;
}
.article-breadcrumbs {
 margin: 0 0 var(--gap-xl);
 font-size: var(--font-s);
 color: var(--text-muted);
 letter-spacing: 0.2px;
}
.article-breadcrumbs ol {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 0;
 margin: 0;
 padding: 0;
 list-style: none;
}
.article-breadcrumbs li {
 display: inline;
 min-width: 0;
}
.article-breadcrumbs li:not(:last-child)::after {
 content: "/";
 margin: 0 0.45em;
 color: var(--border-hover);
}
.article-breadcrumbs a {
 color: var(--secondary-text);
 text-decoration: none;
}
.article-breadcrumbs a:hover {
 color: var(--text);
}
.article-breadcrumbs [aria-current="page"] {
 color: var(--text);
}
.article-kicker {
 margin: 0 0 var(--space-xs);
 font-size: var(--font-s);
 color: var(--text-muted);
 letter-spacing: 0.3px;
}
.article-series {
 margin: 0 0 var(--space-lg);
 color: var(--secondary-text);
 max-width: 576px;
}
.article-cover {
 border-radius: var(--radius-panel);
 overflow: hidden;
 border: 1px solid var(--border);
}
.article-cover img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 1672 / 941;
 object-fit: cover;
}
.article-layout {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 grid-template-areas:
  "title"
  "subtitle"
  "byline"
  "cover"
  "summary"
  "aside"
  "prose";
 gap: var(--gap-xl);
 align-items: start;
 min-height: 70vh;
 padding-bottom: var(--space-3xl);
}
.article-cover {
 grid-area: cover;
 max-width: var(--measure);
 width: 100%;
 margin: 0;
}
.article-layout > h1 {
 grid-area: title;
 max-width: var(--measure);
 margin: 0;
 font-family: var(--font-display);
 font-size: var(--font-h3);
 font-weight: 400;
 letter-spacing: -0.5px;
 line-height: 1.15;
 overflow: visible;
 padding-bottom: 0.08em;
}
.article-subtitle {
 grid-area: subtitle;
 max-width: var(--measure);
 margin: 0;
 font-family: var(--font-body);
 font-size: var(--font-l);
 font-weight: 400;
 line-height: 1.4;
 color: var(--text-muted);
}
.article-byline {
 grid-area: byline;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--gap-m);
 max-width: var(--measure);
 width: 100%;
 margin-block: var(--gap-m) 0;
 padding-block: var(--gap-m);
 border-block: 1px solid var(--border);
 font-family: var(--font-body);
 font-size: var(--font-s);
 color: var(--text-muted);
}
.article-byline-avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 object-fit: cover;
 flex-shrink: 0;
}
.article-byline-name {
 font-weight: 600;
 color: var(--text);
}
.article-byline-cta {
 min-height: 32px;
 padding: 4px var(--gap-m);
 font-size: var(--font-s);
 white-space: nowrap;
 margin-left: auto;
}
.article-byline-meta {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--gap-s);
}
.article-byline-meta .sep {
 color: var(--border-hover);
}
.article-summary {
 grid-area: summary;
 max-width: var(--measure);
}
.article-summary::first-letter,
.article-body > p:first-of-type::first-letter {
 text-transform: uppercase;
}
.article-aside {
 grid-area: aside;
 display: none;
}
.article-body {
 grid-area: prose;
 max-width: var(--measure);
 font-family: var(--serif);
 font-size: var(--font-m);
 color: var(--article);
 overflow-wrap: break-word;
 text-rendering: optimizeLegibility;
 text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
 unicode-bidi: isolate;
 word-break: break-word;
 -webkit-font-smoothing: antialiased;
}
.article-series-rail {
 display: flex;
 flex-direction: column;
 gap: 0;
 margin: 0;
 padding: var(--gap-m);
 list-style: none;
 box-sizing: border-box;
}
.article-series-rail > li:not(:last-child) {
 border-bottom: 1px solid var(--border);
 padding-bottom: var(--gap-m);
 margin-bottom: var(--gap-m);
}
.article-series-card {
  display: block;
  width: 100%;
  padding: var(--pad-s) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--font-m);
  font-weight: 700;
  line-height: 1.4;
  box-sizing: border-box;
}
.article-series-card-subtitle[hidden],
.article-series-card-check[hidden] {
  display: none;
}
.article-series-card-copy {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}
.article-series-card-head {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  min-width: 0;
  vertical-align: top;
}
.article-series-card-title {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.article-series-card-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  margin-left: var(--gap-s);
  padding: 0;
  background: transparent;
  color: var(--cta);
  line-height: 1.4;
}
.article-series-card-check .icon {
  width: 1em;
  height: 1em;
  display: block;
  position: relative;
  top: 0.12em;
}
.article-series-card-subtitle {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.article-series-card-subtitle {
 font-size: var(--font-s);
 font-weight: 500;
 color: var(--text-muted);
}
.article-series-card.is-locked {
  cursor: not-allowed;
  color: var(--text-muted);
}
.article-book-mobile {
 display: block;
 margin: var(--space-lg) 0 0;
}
.article-book-mobile .btn {
 width: 100%;
 justify-content: center;
 min-height: 40px;
 padding: var(--gap-s) var(--gap-m);
 font-size: var(--font-s);
}
@media (min-width: 1020px) {
 .article-book-mobile {
  display: none;
 }
}
@media (min-width: 720px) {
 .article-layout > h1 {
  font-size: var(--font-h2);
}
 .article-body {
  font-size: var(--font-l);
}}
@media (min-width: 1020px) {
 .article-layout {
  grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  grid-template-areas:
      "title ."
      "subtitle ."
      "byline ."
      "cover aside"
      "summary aside"
      "prose aside";
  justify-content: stretch;
  column-gap: var(--space-xl);
  row-gap: var(--gap-xl);
  align-items: stretch;
}
 .article-layout > h1 {
  font-size: var(--font-h1);
}
 .article-aside {
  display: block;
  align-self: start;
  min-width: 0;
}}
.article-body code,
.article-summary code {
 font-family: var(--mono);
 font-size: var(--font-s);
 color: var(--accent-text);
 background: var(--card);
 padding: 2px 7px;
 border-radius: var(--radius-m);
 corner-shape: squircle;
}
@media (min-width: 720px) {
 .article-body code,
 .article-summary code {
  font-size: var(--font-m);
 }
}
.article-body h2 {
 font-family: var(--font-display);
 font-size: clamp(var(--font-xl), 2.4vw, 29.6px);
 font-weight: 400;
 letter-spacing: -0.3px;
 margin: var(--space-xl) 0 var(--space-sm);
}
.article-body p {
 margin: 0 0 var(--space-md);
 color: var(--article);
 line-height: 1.65;
}
.article-body ul {
 margin: 0 0 var(--space-md);
 padding-left: var(--gap-l);
 color: var(--article);
 display: grid;
 gap: var(--gap-s);
}
.article-body h3 {
 font-family: var(--font-display);
 font-size: clamp(var(--font-l), 2vw, var(--font-xl));
 font-weight: 400;
 letter-spacing: -0.2px;
 margin: var(--space-lg) 0 var(--space-sm);
}
.article-summary {
 margin: 0;
 padding: var(--space-md) var(--space-lg);
 border: 0;
 border-radius: var(--radius-l);
 corner-shape: squircle;
 background: var(--card-gradient);
 box-shadow: var(--shadow-card);
 font-size: var(--font-m);
 line-height: 1.6;
 max-width: none;
}
.article-meta-line {
 margin: 0;
 font-family: var(--font-body);
 font-size: var(--font-s);
 color: var(--text-muted);
}
.article-cta-end {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: var(--gap-m);
 margin: var(--space-lg) 0 var(--space-xl);
}
.article-cta-end p {
 margin: 0;
 font-family: var(--font-body);
 font-size: var(--font-m);
 line-height: 1.55;
 color: var(--text);
}
.article-inline-figure {
 margin: var(--space-xl) 0;
 border-radius: var(--radius-panel);
 overflow: hidden;
 border: 1px solid var(--border);
}
.article-inline-figure img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 1672 / 941;
 object-fit: cover;
}
.article-faq {
 margin: var(--space-xl) 0;
 padding: var(--space-lg) 0 var(--space-xl);
 border-top: 1px solid var(--border);
 background: transparent;
}
.faq-list {
 margin-top: var(--gap-xl);
 display: flex;
 flex-direction: column;
 gap: var(--gap-m);
}
.faq-item {
 border-radius: var(--radius-l);
 border: 1px solid var(--border-muted);
 background: var(--card-gradient);
 box-shadow: var(--shadow-button);
 overflow: hidden;
 transition: box-shadow 0.15s var(--ease-out);
 interpolate-size: allow-keywords;
}
.faq-item[open] {
 box-shadow: var(--shadow-hover);
}
.faq-item::details-content {
 height: 0;
 overflow: clip;
 transition:
  height 0.28s var(--ease-out),
  content-visibility 0.28s allow-discrete;
}
.faq-item[open]::details-content {
 height: auto;
}
.faq-question {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--gap-l);
 padding: 17px var(--gap-l);
 cursor: pointer;
 list-style: none;
 font-family: var(--font-display);
 font-weight: 600;
 font-size: var(--font-l);
 line-height: 1.4;
 color: var(--text);
}
.faq-question::-webkit-details-marker {
 display: none;
}
.faq-question::after {
 content: "+";
 flex-shrink: 0;
 font-family: var(--font-display);
 font-weight: 400;
 font-size: var(--font-h3);
 line-height: 1;
 color: var(--hero-text);
 transition: transform 0.28s var(--ease-out);
}
.faq-item[open] > .faq-question::after {
 transform: rotate(45deg);
}
.article-body .faq-answer {
 margin: 0;
 padding: 0 var(--gap-l) 18px;
 max-width: 64ch;
 font-family: var(--font-body);
 font-weight: 400;
 font-size: var(--font-m);
 line-height: 1.65;
 color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
 .faq-item {
  transition: none;
}
 .faq-item::details-content {
  transition: none;
}
 .faq-question::after {
  transition: none;
}}
.article-body a:not(.btn),
.article-summary a:not(.btn) {
  color: var(--link, var(--accent-text));
  text-underline-offset: 0.18em;
}
.article-body a.is-external,
.article-summary a.is-external {
  text-decoration: underline dashed;
  text-decoration-thickness: from-font;
}
.article-body a.article-link,
.article-summary a.article-link {
  display: inline;
}
.article-body a .article-link-ico,
.article-summary a .article-link-ico {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.12em;
  margin: 0 0.2em;
}
.article-body a.is-github .article-link-ico:first-child,
.article-summary a.is-github .article-link-ico:first-child {
  margin-left: 0;
  margin-right: 0.28em;
}
.article-body a.is-external .article-link-ico:last-child,
.article-summary a.is-external .article-link-ico:last-child {
  margin-left: 0.28em;
  margin-right: 0;
}
.article-body a .article-link-ico-external,
.article-summary a .article-link-ico-external {
  width: calc(0.95em - 2px);
  height: calc(0.95em - 2px);
}
.article-page {
 --article-chrome-h: 76px;
 background: var(--reading);
}
.article-page main {
 background: var(--reading);
}
.article-page .site-footer {
 padding-bottom: calc(var(--space-xl) + var(--article-chrome-h));
}
.article-chrome {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 50;
 background: color-mix(in oklch, var(--muted) 72%, transparent);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border-top: 1px solid var(--border);
 padding: var(--space-sm) 0;
}
.article-chrome .read-progress {
 position: absolute;
 left: 0;
 top: 0;
 bottom: auto;
 z-index: 1;
 width: 100%;
}
.article-chrome-inner {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: var(--gap-m);
 width: 100%;
 max-width: none;
 padding-left: var(--gap-xl);
 padding-right: var(--gap-xl);
}
.article-chrome-hint {
 margin: 0;
 min-width: 0;
 font-family: var(--font-body);
 font-size: var(--font-l);
 font-weight: 500;
 line-height: 1.3;
 color: var(--text-muted);
 opacity: 0.72;
}
.article-chrome-hint[hidden] {
 display: none;
}
.article-chrome-hint.is-unlocked {
 opacity: 0.9;
 color: var(--text);
}
#article-next {
 margin-left: auto;
 transform: scale(0.2);
 transform-origin: center center;
 transition: opacity 0.15s var(--ease-out);
}
.btn.is-locked,
.btn[aria-disabled="true"] {
 opacity: 0.15;
 cursor: not-allowed;
 filter: none;
 box-shadow: none;
 pointer-events: none;
}
.btn.is-locked:hover,
.btn[aria-disabled="true"]:hover {
 filter: none;
 box-shadow: none;
}
.hero-copy {
 animation: heroIn 520ms var(--ease-out) both;
}
@keyframes heroIn {
 from {
  opacity: 0;
  transform: translateY(10px);
}
 to {
  opacity: 1;
  transform: none;
}}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .hero-copy {
    opacity: 1;
    transform: none;
  }

  .hero-ambient {
    display: none;
  }

  .hero-tempo {
    display: none;
  }

  .read-progress {
    display: none;
  }
}