@charset "UTF-8";

/* jorijn.com shared styles (mockup C). Tokens in :root; pages/*.css in @layer page; print rules in print.css. ≤ 60 KB. */

/* 00 Layer order */
@layer reset, base, layout, components, page, utilities;

/* 01 Fonts (outside layers) */
@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/roboto-serif/roboto-serif-400-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DC, U+2009-200A,
    U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2190-2193;
}

@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/roboto-serif/roboto-serif-700-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DC, U+2009-200A,
    U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2190-2193;
}

@font-face {
  font-family: "Roboto Serif Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Georgia");
  size-adjust: 115.66%;
  ascent-override: 64.84%;
  descent-override: 21.61%;
  line-gap-override: 4.32%;
}

@font-face {
  font-family: "Roboto Serif Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 104.79%;
  ascent-override: 71.57%;
  descent-override: 23.86%;
  line-gap-override: 4.77%;
}

/* 02 Reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

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

  /* The only !important */
  [hidden] { display: none !important; }

  :target { scroll-margin-block: 5ex; }

  @media (prefers-reduced-motion: reduce), (update: slow) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

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

/* 03 Tokens */
@layer base {
  :root {
    color-scheme: light;

    --paper: #ffffff;
    --surface: #f6f4f0;
    --ink: #1a1918;
    --ink-2: #4a4743;
    --ink-3: #6c6862;
    --line: #e2ded6; /* decorative only */
    --accent: #ff5500;
    --on-accent: #000000;
    --accent-ink: #b83d00; /* the only orange text */
    --accent-tint: #fff3ec;
    --todo-bg: #fdf1c7;
    --night: #1a1918;
    --night-text: #e9e6e0; /* 14.1:1 on night */
    --night-muted: #a9a49c; /* 7.1:1 on night */
    --night-line: #3d3a36;
    --ok: #1f7a3a;
    --error: #b91c1c;
    --focus: var(--ink);

    --font-sans: "Liberation Sans", "Helvetica Neue", Helvetica, Arial, Arimo, sans-serif; /* Arial metrics on Linux */
    --font-serif: "Roboto Serif", "Roboto Serif Fallback", Georgia, serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --text-display: clamp(2rem, 1.25rem + 3.2vw, 4rem); /* home h1 32 → 64 */
    --text-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); /* 32 → 52 (C) */
    --text-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
    --text-h2-prose: clamp(1.4375rem, 1.2rem + 1vw, 2rem); /* prose h2: 23 → 32 */
    --text-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
    --text-lede: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
    --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-ui: 1rem;
    --text-small: 0.875rem;
    --text-label: 0.8125rem; /* labels: mono, uppercase via CSS */
    --text-price: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);

    --leading-display: 1.05;
    --leading-heading: 1.1;
    --leading-h2: 1.15;
    --leading-h3: 1.25;
    --leading-lede: 1.5;
    --leading-prose: 1.65;
    --leading-ui: 1.45;

    --measure: 66ch; /* 665 px in serif 18 */
    --measure-lede: 52ch; /* ledes, band text */
    --measure-title: 22ch;
    --measure-h2: 28ch;
    --measure-display: 20ch;

    --space-1: 0.25rem; 
    --space-2: 0.5rem;
    --space-3: 0.75rem; 
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    --section-gap: max(2.5rem, calc(var(--section-y) * 0.6));  /* 40 → 58 */

    --wrap: 75rem;
    --gutter: clamp(1rem, 4vw, 2.5rem); /* C */
    --content-inset: max(var(--gutter), calc((100% - var(--wrap)) / 2));

    --radius: 0;
    --radius-round: 50%;
    --rule: 2px solid var(--ink);
    --hairline: 1px solid var(--line);
    --control-border: 1px solid var(--ink-3); /* 5.53:1 */

    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
    --duration-scene: 1200ms;
    --pause: 300ms;
    --stagger: 60ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in: cubic-bezier(0.3, 0, 1, 1);
    --ease-in-out: cubic-bezier(0.33, 0, 0.67, 1);
    --ease-standard: var(--ease-out);

    --z-raised: 1;
    --z-sticky: 10;
    --z-skip: 100;
  }

  @media (prefers-contrast: more) {
    :root { --ink-2: var(--ink); --ink-3: var(--ink); --line: var(--ink-3); --surface: var(--paper); }
  }
}

/* 04 Base */
@layer base {
  html { font-synthesis: weight; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--text-body) / var(--leading-prose) var(--font-serif); }

  h1, h2, h3 { margin: 0; font-family: var(--font-sans); color: var(--ink); hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }

  h1 { font-size: var(--text-h1); font-weight: 400; line-height: var(--leading-heading); letter-spacing: -0.015em; max-inline-size: var(--measure-title); }
  h2 { font-size: var(--text-h2); font-weight: 400; line-height: var(--leading-h2); letter-spacing: -0.01em; max-inline-size: var(--measure-h2); }
  h3 { font-size: var(--text-h3); font-weight: 700; line-height: var(--leading-h3); }

  p, li, dd, blockquote, td { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }

  nav li, .site-footer :is(li, p) { hyphens: manual; -webkit-hyphens: manual; }

  p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding-inline-start: 1.25em; }

  a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-skip-ink: auto; }
  a:hover { text-decoration-thickness: 2px; }

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

  strong, b { font-weight: 700; }
  em, i, cite { font-style: normal; }
  em { font-weight: 700; }
  small { font-size: var(--text-small); }

  img, picture, video { display: block; max-inline-size: 100%; block-size: auto; }

  code, pre { font-family: var(--font-mono); } /* C: 1em */
  pre { overflow-x: auto; padding: var(--space-4); background: var(--surface); }

  hr { margin-block: var(--space-6); border: 0; border-block-start: var(--hairline); }

  table { inline-size: 100%; border-collapse: collapse; font: 400 0.9375rem/1.45 var(--font-sans); font-variant-numeric: tabular-nums; }
  caption { padding-block-end: var(--space-3); text-align: start; } /* type: label recipe (09) */
  th, td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-block-end: var(--hairline); text-align: start; vertical-align: top; }
  :is(th, td):last-child { padding-inline-end: 0; }
  thead th { padding-block-end: var(--space-2); border-block-end: var(--rule); }
  th[scope="row"] { font-weight: 700; }

  @media (max-width: 22.49rem) {
    h1, h2 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; }
  }
}

/* 05 Layout */
@layer layout {
  /* main: the padding-free "content" container */
  .site-main { container: content / inline-size; }
  .site-main:focus { outline: none; }

  .site-main > :where(section, header):not(.invite),
  .doc { padding-inline: var(--content-inset); }

  .site-main > :where(section:not(.invite)) { padding-block: var(--section-gap); }
  .site-main > :where(section:not(.invite)) + :where(section:not(.invite)) { border-block-start: var(--hairline); }
  .section--ritual { padding-block-start: var(--space-5); }

  /* Section rhythm */
  :where(.site-main, .doc__main) > section > :where(* + *) { margin-block-start: var(--space-5); }
  :where(.site-main, .doc__main) > section > :where(h2 + *) { margin-block-start: var(--space-4); }
  :where(.site-main, .doc__main) > section > :where(* + h3) { margin-block-start: var(--space-6); }
  :where(.site-main, .doc__main) > section > :where(* + h2) { margin-block-start: var(--space-7); }
  :where(.site-main, .doc__main) > section > :where(p, ul, ol, dl, blockquote):not([class]) { max-inline-size: var(--measure); }
  :where(.site-main, .doc__main) > section :where(ul, ol):not([class]) > li + li { margin-block-start: var(--space-2); }
  .section__intro { margin-block-start: var(--space-4); max-inline-size: var(--measure); }
  .section__intro + * { margin-block-start: var(--space-6); }

  /* Page head (C 5.2): section gap and hairline; home 32 px */
  .page-head { padding: clamp(1.5rem, 0.5rem + 4vw, 3rem) var(--content-inset) var(--section-gap); }
  .page-head--home { padding-block-end: var(--space-6); }
  .site-main > .page-head:not(.page-head--home) + :is(section:not(.invite), .doc) { border-block-start: var(--hairline); }
  .page-head__main { min-inline-size: 0; }
  .page-head__kicker { margin-block-end: var(--space-3); }
  .page-head__title { max-inline-size: var(--measure-title); }
  .page-head--home .page-head__title { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: -0.02em; max-inline-size: var(--measure-display); }
  .page-head__lede { margin-block-start: var(--space-4); text-wrap: pretty; }
  .page-head__lede + .page-head__lede { margin-block-start: var(--space-3); }
  .page-head .cta { margin-block-start: var(--space-5); }
  .page-head__inner > .page-head__aside { margin-block-start: var(--space-6); }

  /* Document (C 5.15) */
  .doc { padding-block: var(--section-gap); }
  .doc__main > section { padding-block: var(--section-gap); }
  .doc__main > section:first-child { padding-block-start: 0; }
  .doc__main > section:last-child { padding-block-end: 0; }
  .doc__main > section + section { border-block-start: var(--hairline); }
  .doc__main > * + :not(section) { margin-block-start: var(--space-6); }
  .doc__rail { display: none; }

  @media (min-width: 72rem) {
    .doc--rail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
    .doc--rail > .doc__main { grid-column: 1 / 9; grid-row: 1; container: content / inline-size; }
    .doc--rail .toc--inline { display: none; }
    .doc--rail .toc--inline:first-child + * { margin-block-start: 0; }
    .doc__rail { position: sticky; inset-block-start: var(--space-6); z-index: var(--z-sticky); display: block; grid-column: 10 / 13; grid-row: 1; max-block-size: calc(100vh - var(--space-7)); overflow-y: auto; padding-block-end: var(--space-5); }
    .doc__rail > * + * { margin-block-start: var(--space-6); }
  }
}

/* 06 Header */
@layer components {
  .skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -4rem; z-index: var(--z-skip); padding: var(--space-3) var(--space-4); background: var(--paper); color: var(--ink); font: 700 1rem/1 var(--font-sans); border: var(--rule); }
  .skip-link:focus { inset-block-start: var(--space-4); }
  /* Shared notice of the eggs (§B.7): main.js makes it and puts it at the pointer or selection */
  .egg-note { position: fixed; z-index: var(--z-sticky); max-inline-size: min(22rem, 100% - 2rem); padding: var(--space-3) var(--space-4); background: var(--paper); color: var(--ink); font: 400 var(--text-ui)/var(--leading-ui) var(--font-serif); border: var(--rule); opacity: 0; pointer-events: none; }
  .egg-note.is-open { opacity: 1; }
  .egg-note .label { display: block; }
  @media (prefers-reduced-motion: no-preference) and (update: fast) {
    .egg-note { transition: opacity var(--duration-fast) var(--ease-in); }
    .egg-note.is-open { transition: opacity var(--duration-base) var(--ease-out); }
  }

  .site-header { background: var(--paper); border-block-end: var(--hairline); }
  .site-header__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-5); min-block-size: 3.5rem; padding-inline: var(--content-inset); }

  /* Brand. The mark rotates on its own block box, whose centre is the ring's;
     a wrapper's line box would drop the pivot below it (A53) */
  .brand { display: inline-flex; align-items: center; gap: 0.625rem; min-block-size: 2.75rem; color: var(--ink); text-decoration: none; }
  .brand__mark { display: block; inline-size: 28px; block-size: 28px; border-radius: var(--radius-round); }
  .brand__name { font: 400 0.9375rem/1 var(--font-mono); letter-spacing: 0.01em; white-space: nowrap; }
  @media (prefers-reduced-motion: no-preference) and (update: fast) {
    .brand__mark.is-spinning { animation: compass-swing var(--duration-scene) var(--ease-in-out); }
    .brand__mark.is-returning { animation-name: compass-back; }
  }
  @keyframes compass-swing { 16% { rotate: 30deg; } 37% { rotate: -15deg; } 58% { rotate: 7.5deg; } 79% { rotate: -3.5deg; } }
  @keyframes compass-back { to { rotate: -1turn; } }

  .menu-button { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; min-inline-size: 2.75rem; margin-inline-end: calc(-1 * var(--space-2)); padding: 0 var(--space-2); background: none; border: 0; color: var(--ink); font: 400 1rem/1 var(--font-sans); cursor: pointer; }
  .menu-button[aria-expanded="false"] .icon--close,
  .menu-button[aria-expanded="true"] .icon--menu { display: none; }

  /* No JS: links wrap under the brand */
  .site-nav { flex-basis: 100%; }
  .site-nav__list { display: flex; flex-wrap: wrap; column-gap: var(--space-5); margin: 0; padding: 0 0 var(--space-2); list-style: none; }
  .site-nav__list a:not([class]) { display: flex; align-items: center; min-block-size: 2.75rem; color: var(--ink); font: 400 var(--text-ui) / 1.2 var(--font-sans); text-decoration: none; }
  .site-nav__lang a { column-gap: 0.3em; }
  .site-nav__list a:not([class]):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
  .site-nav__list a:not([class])[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
  .site-nav__extra { display: none; }

  @media (max-width: 59.99rem) {
    .js .site-nav { display: none; }
    .js.nav-open .site-nav { display: block; position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: var(--z-sticky); padding: 0 var(--content-inset) var(--space-6); background: var(--paper); border-block-end: 1px solid var(--ink); }
    .js .site-nav__list { flex-direction: column; padding: 0; }
    .js .site-nav__list a:not([class]) { min-block-size: 3.25rem; font-size: 1.25rem; border-block-end: var(--hairline); }
    /* Header button: no JS a link, JS full width */
    :root:not(.js) .site-nav__cta .button { min-block-size: 2.75rem; padding: 0; background: none; border: 0; color: var(--ink); font-size: 1rem; text-decoration: underline; text-underline-offset: 0.25em; }
    .js .site-nav__cta { margin-block-start: var(--space-5); }
    .js .site-nav__cta .button { inline-size: 100%; min-block-size: 3rem; padding: 0.6rem 1.25rem; font-size: 1rem; }
    .js .site-nav__extra { display: block; margin-block-start: var(--space-4); }
    .site-nav__extra a { display: inline-flex; align-items: center; min-block-size: 2.75rem; text-decoration: none; }
  }

  @media (min-width: 60rem) {
    .site-header__bar { flex-wrap: nowrap; min-block-size: 4.5rem; }
    .menu-button { display: none; }
    .site-nav { flex-basis: auto; }
    .site-nav__list { align-items: center; column-gap: clamp(1rem, 2vw - 0.2rem, 1.75rem); padding: 0; }
    .site-nav__list a:not([class]) { font-size: 1rem; }
  }
}

/* 07 Footer */
@layer components {
  .site-footer { padding: var(--space-8) var(--content-inset) var(--space-6); }
  .site-footer a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .site-footer a:hover { text-decoration-thickness: 2px; }
  /* design.footer: accent | night */
  .site-footer--accent { background: var(--accent); color: var(--on-accent); }
  .site-footer--accent a { color: var(--on-accent); }
  .site-footer--night { background: var(--night); color: var(--night-text); }
  .site-footer--night a { color: var(--night-text); }
  .site-footer--night a:hover { color: var(--accent); }
  .site-footer--night :focus-visible { outline-color: var(--accent); }
  .site-footer--night :is(.site-footer__title, .site-footer__legal) { color: var(--night-muted); }
  .site-footer__brand { display: inline-flex; align-items: center; gap: 0.625rem; min-block-size: 2.75rem; vertical-align: top; font: 400 0.9375rem/1 var(--font-mono); text-decoration: none; }
  .site-footer__brand img { inline-size: 28px; block-size: 28px; }
  .site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); margin-block-start: var(--space-6); font: 400 0.9375rem/1.4 var(--font-sans); }
  @media (max-width: 22.49rem) {
    .site-footer__nav { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  }
  .site-footer__title { margin: 0 0 var(--space-3); }
  .site-footer ul { margin: 0; padding: 0; list-style: none; }
  /* 44 px rows on phones */
  .site-footer__nav a { display: inline-block; padding-block: calc((2.75rem - 1.4em) / 2); }
  .site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-block-start: var(--space-7); padding-block-start: var(--space-4); border-block-start: 1px solid var(--night-line); font: 400 var(--text-label)/1.5 var(--font-mono); }
  .site-footer__legal ul { display: flex; gap: var(--space-4); }
  .site-footer__legal [aria-current] { text-decoration-thickness: 2px; }
  .site-footer__wordmark { position: relative; container-type: inline-size; max-inline-size: 64rem; margin-block-start: var(--space-8); --dot: var(--paper); }
  .site-footer--night .site-footer__wordmark { max-inline-size: 48rem; margin-block-start: var(--space-6); --dot: var(--accent); }
  /* Footer C: a mask cuts the ij dots out, ::before/::after jump in their place */
  @media (prefers-reduced-motion: no-preference) and (update: fast) and (forced-colors: none) {
    .site-footer__wordmark::before, .site-footer__wordmark::after { position: absolute; inset: 0 auto auto 26.22%; padding: 0.7cqi; border-radius: 50%; background: var(--dot); box-shadow: 8.34cqi 0 var(--dot); animation: var(--duration-slow) var(--ease-out); }
    .site-footer__wordmark::after { inset: 53.54% auto auto 34%; animation-delay: var(--stagger); }
    .site-footer__wordmark:is(:hover, :has(:focus-visible) + *) img { mask: radial-gradient(0.79% 3.02% at 26.92% 2.61%, #0000 100%, #000 0), radial-gradient(0.79% 3.02% at 35.26% 2.61%, #0000 100%, #000 0), radial-gradient(0.79% 3.02% at 34.71% 56.22%, #0000 100%, #000 0), radial-gradient(0.79% 3.02% at 43.04% 56.22%, #0000 100%, #000 0); mask-composite: intersect; }
    .site-footer__wordmark:is(:hover, :has(:focus-visible) + *)::before, .site-footer__wordmark:is(:hover, :has(:focus-visible) + *)::after { content: ""; animation-name: dot-hop; }
    @keyframes dot-hop { 62.5% { translate: 0 -100%; animation-timing-function: var(--ease-in); } }
  }

  @media (min-width: 60rem) {
    .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .site-footer__nav a { padding-block: 0.3rem; }
  }
}

/* 08 Actions */
@layer components {
  :is(.button, form button[type="submit"], [data-analytics-toggle]) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 3rem; padding: 0.6rem 1.25rem; color: var(--button-fg); background: var(--button-bg); border: 2px solid var(--button-border, transparent); border-radius: var(--radius); font: 700 1rem/1.2 var(--font-sans); text-align: center; text-decoration: none; cursor: pointer; }
  @media (prefers-reduced-motion: no-preference) {
    :is(.button, form button[type="submit"], [data-analytics-toggle]) { transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast); }
  }
  :is(.button, form button[type="submit"], [data-analytics-toggle]):is(:hover, :active) { color: var(--button-fg-hover); background: var(--button-bg-hover); border-color: var(--button-border-hover, var(--button-border, transparent)); }
  .button--primary,
  form button[type="submit"] { --button-bg: var(--accent); --button-fg: var(--on-accent); --button-bg-hover: var(--ink); --button-fg-hover: var(--accent); }
  .button--secondary,
  [data-analytics-toggle] { --button-bg: transparent; --button-fg: var(--ink); --button-border: var(--ink); --button-bg-hover: var(--ink); --button-fg-hover: var(--paper); }
  .invite--accent .button--primary { --button-bg: var(--ink); --button-fg: var(--paper); --button-border: var(--ink); --button-bg-hover: var(--paper); --button-fg-hover: var(--ink); --button-border-hover: var(--ink); }
  .button.button--small { min-block-size: 2.5rem; padding: 0.45rem 1rem; font-size: 0.9375rem; white-space: nowrap; }
  :is(.button, button)[aria-disabled="true"] { --button-bg: var(--surface); --button-fg: var(--ink-3); --button-border: var(--ink-3); cursor: progress; }

  .link-arrow { color: inherit; font: 700 1rem/1.4 var(--font-sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .link-arrow:hover { text-decoration-thickness: 2px; }
  .link-arrow__icon { display: inline-block; margin-inline-start: 0.35em; }
  @media (prefers-reduced-motion: no-preference) {
    .link-arrow__icon { transition: translate var(--duration-fast) var(--ease-standard); }
    .link-arrow:hover .link-arrow__icon { translate: 3px 0; }
    .link-arrow--down:hover .link-arrow__icon { translate: 0 3px; }
  }

  /* WhatsApp link, never green */
  .link-whatsapp { display: inline-flex; align-items: center; gap: 0.4em; min-block-size: 2.75rem; color: inherit; font: 700 1rem/1.3 var(--font-sans); text-decoration: none; }
  .link-whatsapp > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .link-whatsapp:hover > span { text-decoration-thickness: 2px; }

  .cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
  .cta__note,
  .cta__more { flex-basis: 100%; }
  .cta > .link-arrow { line-height: 1.45; }
  .cta__note { margin-block-start: calc(-1 * var(--space-1)); color: var(--ink-3); font: 400 var(--text-small)/1.45 var(--font-sans); }
  @container content (max-width: 29.99rem) {
    .cta .button { inline-size: 100%; }
    .cta__note { order: 1; }
    .cta__alt { order: 2; }
    .cta__more { order: 3; }
  }

  p:not(.callout > p):has(> .link-arrow:only-child) { font: 400 1rem/1.45 var(--font-sans); }
  /* Arrow links; touch: invisible 44 px hit areas */
  :is(.callout, .link-list) .link-arrow { display: inline-block; padding-block: var(--space-2); line-height: inherit; }
  @media (pointer: coarse) {
    :is(p:not(.callout > p) > .link-arrow:only-child, .cta > .link-arrow, .invite__call a, .review__site, .site-footer__legal a, .readout a, .checklist li > a, .card :is(h2, h3) > a) { display: inline-block; padding-block: calc((2.75rem - 1lh) / 2); margin-block: calc((2.75rem - 1lh) / -2); }
    :is(.callout, .link-list) .link-arrow { padding-block: calc((2.75rem - 1lh) / 2); margin-block: calc(var(--space-2) - (2.75rem - 1lh) / 2); }
  }
}

/* 09 Components A–Z */
@layer components {
  /* Avatar */
  .avatar { position: relative; display: block; flex: none; overflow: hidden; inline-size: var(--avatar-size, 3rem); aspect-ratio: 1; border-radius: var(--radius-round); background: var(--surface); }
  .avatar > img { position: absolute; inset-block-start: 9%; inset-inline-start: 50%; inline-size: 94%; block-size: auto; max-inline-size: none; translate: -50% 0; } /* block-size: else height="173" wins */
  .avatar__photo { block-size: auto; object-fit: cover; }
  .avatar__eyes { pointer-events: none; transform: translate(0, 0); transition: transform var(--eye-duration, 0.2s) var(--eye-easing, var(--ease-standard)); }
  .avatar--chip,
  .avatar--hero { --avatar-size: 3rem; }
  .avatar--block { --avatar-size: 6rem; }
  .avatar--byline { --avatar-size: 2rem; }
  .avatar--invite { --avatar-size: 4rem; }
  @container content (min-width: 48rem) { .avatar--block { --avatar-size: 8rem; } }
  @container content (min-width: 56rem) { .avatar--hero { --avatar-size: 7rem; } }

  /* Breadcrumbs: 44 px links, label line box */
  .breadcrumbs { margin-block: calc((1.4em - 44px) / 2) calc((1.4em - 44px) / 2 + var(--space-3)); }
  .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
  .breadcrumbs li + li::before { content: "/" / ""; color: var(--ink-3); }
  .breadcrumbs a { display: inline-block; padding-block: calc((44px - 1.4em) / 2); color: var(--ink-2); text-underline-offset: 0.25em; }

  /* Callouts, In het kort (C 5.15) */
  :is(.callout, .in-short) { padding: var(--space-4) var(--space-5); background: var(--surface); border-inline-start: 3px solid var(--ink); font: 400 1rem/1.55 var(--font-sans); }
  .in-short { line-height: 1.5; }
  .callout > * + * { margin-block-start: var(--space-2); }
  .in-short > * + * { margin-block-start: var(--space-3); }
  :is(.callout, .in-short) :is(ul, ol) { padding-inline-start: 1.25em; }
  :is(.callout, .in-short) li + li { margin-block-start: var(--space-2); }
  .callout--mechanism { border-inline-start: 0; border-block-start: var(--rule); }
  .callout .callout__steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 0; padding: 0; list-style: none; font: 400 var(--text-small)/1.5 var(--font-mono); }
  .callout .callout__steps li { margin: 0; }
  .callout__steps span { margin-inline-end: 0.6em; color: var(--ink-3); }
  .callout__steps .is-conditional > span:first-child { border-block-end: 1px dashed var(--ink-3); }
  .callout__steps .callout__detail { display: block; margin: 0 0 0 calc(2ch + 0.6em); color: var(--ink-2); font: 400 var(--text-small)/1.4 var(--font-sans); }
  @media (min-width: 72rem) {
    .doc:has(.doc__rail .callout--mechanism) .doc__main .callout--mechanism { display: none; }
  }

  /* A section without a visible h2 starts on its padding (C) */
  .site-main > section > :is(:first-child, .visually-hidden:first-child + *) { margin-block-start: 0; }

  /* Card grid */
  .card-grid { display: grid; gap: var(--space-7); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
  @container content (min-width: 48rem) {
    .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-7); }
  }
  @container content (min-width: 60rem) {
    .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
  }
  .card { display: flex; flex-direction: column; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: var(--rule); }
  .card__title { max-inline-size: none; font: 700 var(--text-h3)/var(--leading-h3) var(--font-sans); letter-spacing: 0; }
  .card > .readout { margin-block-start: var(--space-2); } /* C .card .readout: 16 with the gap; home pillars: home.css */
  .card__title .link-arrow { font: inherit; }
  .card__text { max-inline-size: 60ch; font: 400 var(--text-body)/var(--leading-prose) var(--font-serif); }
  .card__text--large { font-size: 1.25rem; line-height: 1.4; }
  .card__label { margin-block-start: var(--space-2); }
  .card__answer { font: 400 1rem/1.5 var(--font-sans); }
  .card__icon { inline-size: 3rem; block-size: 3rem; }
  .card__more { margin-block-start: auto; padding-block-start: var(--space-2); font: 400 1rem/1.45 var(--font-sans); }
  .card > .readout + .card__more { margin-block-start: 0; } /* 16 under the panel, not at the card's foot */
  .card > .checklist { margin-block-start: var(--space-1); }

  /* Boxed cards: the title link covers the card */
  .card-grid--boxed { gap: var(--space-4); }
  @container content (min-width: 48rem) {
    .card-grid--boxed:is(.card-grid--2, .card-grid--3) { gap: var(--space-5); }
    .card-grid--boxed.card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* C .teams__cards: 2-up from 48rem, 3-up from 60rem */
  }
  @container content (min-width: 60rem) { .card-grid--boxed.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* C .teams__cards--3 */
  .card-grid--boxed .card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-2) var(--space-4); padding: var(--space-5); border: var(--control-border); }
  .card-grid--boxed .card:has(> .card__icon) { grid-template-columns: 3rem minmax(0, 1fr); }
  .card-grid--boxed .card > .card__icon { grid-row: 1 / span 2; }
  .card-grid--boxed .card:has(> .card__icon) > :not(.card__icon) { grid-column: 2; }
  .card-grid--boxed .card:hover { padding: calc(var(--space-5) - 1px); border: 2px solid var(--ink); }
  .card-grid--boxed .card__title a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .card-grid--boxed .card__title a::after { content: ""; position: absolute; inset: 0; }
  .card-grid--boxed .card__title a:focus-visible { outline: 0; }
  .card-grid--boxed .card:has(.card__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
  .card-grid--boxed .card__text { color: var(--ink-2); font: 400 0.9375rem/1.45 var(--font-sans); }

  /* Channels (C 5.16) */
  .channels { display: grid; gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
  @container content (min-width: 56rem) {
    .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  }
  .channel { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; grid-template-areas: "icon name arrow" ". value value" ". note note"; align-items: center; align-content: start; gap: var(--space-1) var(--space-3); block-size: 100%; min-block-size: 5.5rem; padding: var(--space-4) var(--space-5); border: var(--control-border); color: var(--ink); font: 400 1rem/1.45 var(--font-sans); text-decoration: none; }
  .channel::after { content: "\2192"; content: "\2192" / ""; grid-area: arrow; }
  .channel .icon { grid-area: icon; inline-size: 1.5rem; block-size: 1.5rem; }
  .channel__name { grid-area: name; font: 700 1.0625rem/1.45 var(--font-sans); text-decoration: underline 1px; text-underline-offset: 0.2em; }
  .channel__value { grid-area: value; overflow-wrap: anywhere; font: 400 0.9375rem/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
  .channel__note { grid-area: note; align-self: start; }
  .channel:hover { padding: calc(var(--space-4) - 1px) calc(var(--space-5) - 1px); border: 2px solid var(--ink); }

  /* Check list (C 5.20) */
  .checklist { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; font: 400 1rem/1.45 var(--font-sans); }
  .checklist li { position: relative; padding-inline-start: 1.5em; }
  .checklist li::before { position: absolute; inset-inline-start: 0; }

  /* Facts row */
  .facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; color: var(--ink-2); font: 400 0.9375rem/1.45 var(--font-sans); }
  :is(.facts, .checklist) li::before { content: "\2713"; content: "\2713" / ""; margin-inline-end: 0.4em; color: var(--ink); font-weight: 700; }
  .page-head .facts { margin-block-start: var(--space-4); }

  /* FAQ (C 5.14): + turns into × */
  .faq { max-inline-size: 50rem; margin-block-start: var(--space-6); border-block-start: var(--rule); }
  .faq__item { border-block-end: var(--hairline); }
  .faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); min-block-size: 3rem; padding-block: var(--space-3); list-style: none; font: 700 1.0625rem/1.4 var(--font-sans); cursor: pointer; }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q:hover .faq__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .faq__marker, .toc__summary::after { flex: none; inline-size: 1.5rem; text-align: center; font: 400 1.5rem/1 var(--font-sans); }
  .faq__item[open] .faq__marker, .toc--inline[open] .toc__summary::after { rotate: 45deg; }
  @media (prefers-reduced-motion: no-preference) {
    .faq__marker, .toc__summary::after { transition: rotate var(--duration-fast) var(--ease-standard); }
  }
  /* FAQ A; own gate: the kill-switch misses ::details-content */
  @media (prefers-reduced-motion: no-preference) and (update: fast) {
    .faq__item:not([open])::details-content { opacity: 0; }
    .faq__item[open]:not(:target)::details-content { transition: opacity var(--duration-base) var(--ease-out); }
  }
  .faq__a { max-inline-size: var(--measure); padding-block-end: var(--space-5); font: 400 1.0625rem/1.65 var(--font-serif); }
  .faq__a > * + * { margin-block-start: var(--space-3); }
  :is(.faq__more, .section__more) { margin-block-start: var(--space-5); font: 400 1rem/1.45 var(--font-sans); }

  /* Contact form (main.js adds status, errors) */
  .contact-form { max-inline-size: 36rem; }
  .form-status:not(:empty),
  .input-row { margin-block-end: var(--space-5); }
  .hidden-inputs { display: none; }
  .input-row label { display: block; margin-block-end: var(--space-2); font: 700 1rem/1.3 var(--font-sans); }
  .input-row__optional { color: var(--ink-2); font-weight: 400; }
  .input-row :is(input, textarea, select) { display: block; inline-size: 100%; min-block-size: 3rem; padding: 0.65rem 0.875rem; color: var(--ink); background: var(--paper); border: var(--control-border); border-radius: var(--radius); font: 400 1rem/1.4 var(--font-sans); }
  .input-row textarea { min-block-size: 9rem; }
  .input-row :is(input, textarea, select):focus { padding: calc(0.65rem - 1px) calc(0.875rem - 1px); border: 2px solid var(--ink); }
  .input-row [aria-invalid="true"] { padding: calc(0.65rem - 1px) calc(0.875rem - 1px); border: 2px solid var(--error); }
  .form-status { font: 400 1rem/1.5 var(--font-sans); }
  .form-status:not(:empty) { padding: var(--space-4); background: var(--surface); border-inline-start: 4px solid var(--ink); }
  .form-status:has(.success-message) { border-inline-start-color: var(--ok); }
  .form-status:has(.error-message) { border-inline-start-color: var(--error); }
  .form-status > * + * { margin-block-start: var(--space-2); }
  .form-status p[id^="error-"] { color: var(--error); }
  .error-message { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 700; }
  .error-message::before { content: "!"; display: grid; flex: none; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.1em; border: 1.5px solid var(--error); border-radius: var(--radius-round); color: var(--error); font: 700 0.8125rem/1 var(--font-sans); }
  @container content (max-width: 29.99rem) {
    form button[type="submit"] { inline-size: 100%; }
  }

  .icon { flex: none; inline-size: 1.25em; block-size: 1.25em; vertical-align: -0.25em; }

  /* Closing band: .invite--<design.invite> */
  .invite { padding: var(--section-y) var(--content-inset) var(--space-7); }
  .invite__title { max-inline-size: none; }
  .invite--accent .invite__title { max-inline-size: 22ch; }
  .invite__text { max-inline-size: var(--measure-lede); margin-block-start: var(--space-4); font: 400 var(--text-lede)/var(--leading-lede) var(--font-serif); text-wrap: pretty; }
  .invite--accent .cta { margin-block-start: var(--space-6); }
  .invite--accent { background: var(--accent); color: var(--on-accent); }
  .invite--accent :is(.invite__title, .cta__note, a:not(.button)) { color: var(--on-accent); }
  .invite--surface { padding-block-end: var(--section-y); background: var(--surface); color: var(--ink); }
  .invite--surface .invite__inner { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--space-4); align-items: center; }
  .invite--surface :is(.invite__text, .cta) { grid-column: 1 / -1; }
  .invite--surface .avatar { background: var(--paper); outline: 1px solid var(--line); outline-offset: -1px; }
  .invite--surface .button--primary { --button-border: var(--ink); } /* fill 2.92:1: ink edge */
  .invite--surface .cta { margin-block-start: var(--space-5); }
  .invite--surface .cta .button,
  .invite__call { flex-basis: 100%; }
  .invite__call { font: 400 1rem/1.45 var(--font-sans); }
  .invite__call a { font-weight: 700; white-space: nowrap; text-underline-offset: 0.2em; }
  @container content (min-width: 48rem) {
    .invite--surface .invite__inner { grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--space-6); align-items: start; }
    .invite--surface .avatar { --avatar-size: 6rem; grid-row: 1 / span 3; }
    .invite--surface :is(.invite__title, .invite__text, .cta) { grid-column: 2; }
    .invite--surface .cta .button,
    .invite__call { flex-basis: auto; }
  }

  /* Notes in sans 14 */
  :is(.channel__note, .link-list__note, .package__period, .price-terms, .table-hint) { color: var(--ink-2); font: 400 var(--text-small)/1.45 var(--font-sans); }
  .price-terms { margin-block-start: var(--space-4); }

  /* Micro-labels (C .label): never on h1-h3, buttons, nav, sentences */
  :where(.label, .breadcrumbs, caption, .card__label, .logo-row__caption,
         .package__label, .package__meta, .readout__caption,
         .ritual__title, .site-footer__title, .toc--rail .toc__title,
         thead th) { color: var(--ink-3); /* ≥ 5.04:1 */ font: 400 var(--text-label)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; hyphens: manual; -webkit-hyphens: manual; }
  :is(.package__meta, .readout__caption, .receipt > .label) { color: var(--ink-2); }
  thead th { color: var(--ink-2); }
  .package__label { color: var(--ink); }
  .site-footer--accent .site-footer__title { color: var(--on-accent); }
  @container content (min-width: 48rem) { .ritual__title { padding-block-start: 0.15rem; } }
  .lede { max-inline-size: var(--measure-lede); font: 400 var(--text-lede)/var(--leading-lede) var(--font-serif); }

  /* Link list (C) */
  .link-list { max-inline-size: var(--measure); margin: var(--space-5) 0 0; padding: 0; list-style: none; border-block-start: var(--rule); font: 400 1rem/1.45 var(--font-sans); }
  .link-list > li { padding-block: var(--space-1); border-block-end: var(--hairline); }
  .link-list__note { padding-block-end: var(--space-2); }
  .guide__end .link-list { margin-block-start: var(--space-3); }

  /* Logo row */
  .logo-row { margin-block-start: var(--space-7); }
  .logo-row__caption { max-inline-size: none; }
  .logo-row__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) 2.5rem; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
  .logo-row__list li { font: 400 1rem/1.45 var(--font-sans); }
  .customer-logo { display: inline; vertical-align: baseline; inline-size: auto; max-inline-size: none; block-size: 28px; filter: grayscale(1); }
  @container content (max-width: 29.99rem) {
    .customer-logo { block-size: 24px; }
    .logo-row__list { gap: var(--space-5) var(--space-6); }
  }

  /* Packages */
  .packages { display: grid; gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
  @container content (min-width: 48rem) {
    .packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .package { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--control-border); }
  .package--labelled { padding: calc(var(--space-5) - 1px); border: var(--rule); }
  .package__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-3); }
  .package__name { font-size: var(--text-h3); }
  .package__price { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
  .package__amount { font-size: var(--text-price); font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
  .package__meta { margin: 0; }
  .package__features { margin: 0; padding: 0; list-style: none; font: 400 0.9375rem/1.45 var(--font-sans); }
  .package__features li { padding-block: var(--space-2); }
  .package__features li + li { border-block-start: var(--hairline); }

  /* Person: chip, card, byline, block */
  .person--hero { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
  .person__line { font: 400 0.9375rem/1.4 var(--font-sans); }
  .person__name, .person__role { display: none; }
  @container content (min-width: 56rem) {
    .person--hero { display: block; padding: var(--space-5); border: 1px solid var(--line); }
    .person--hero :is(.person__name, .person__role) { display: block; }
    .person__name { margin-block-start: var(--space-4); font: 700 1rem/1.45 var(--font-sans); }
    .person__role { margin-block-start: var(--space-1); color: var(--ink-3); font: 400 var(--text-label)/1.4 var(--font-mono); }
    .person--hero .person__line { margin-block-start: var(--space-3); font: 400 1rem/1.5 var(--font-serif); }
  }
  .person__links { margin-block-start: var(--space-4); }
  .byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block-start: var(--space-5); color: var(--ink-2); font: 400 var(--text-label)/1.4 var(--font-mono); }
  .byline__sep { color: var(--ink-3); }
  .person--block { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-4); align-items: center; }
  .person--block > :not(.avatar) { grid-column: 1 / -1; }
  .person--block > h2:not(.avatar) { grid-column: 2; }
  .person__text { max-inline-size: var(--measure); font: 400 var(--text-body)/1.65 var(--font-serif); }
  .person__text > * + * { margin-block-start: var(--space-3); }
  .person--block .person__links { display: flex; margin: 0; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-5); font: 400 1rem/1.45 var(--font-sans); }
  .person--block .person__links .link-arrow { display: inline-block; padding-block: var(--space-3); line-height: 1.45; }
  @container content (min-width: 48rem) {
    .person--block { grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--space-6); align-items: start; }
    .person--block > .avatar { grid-row: 1 / span 4; }
    .person--block > :not(.avatar) { grid-column: 2; }
  }

  /* Prose (C 5.15) */
  .prose { max-inline-size: var(--measure); font: 400 var(--text-body)/1.7 var(--font-serif); }
  .prose > * + * { margin-block-start: var(--space-4); }
  .prose > :first-child { margin-block-start: 0; }
  /* Prose after a component: the component gap; under an intro 16 (C [D: P2]) */
  .site-main > section > :not(h2, .section__intro, .prose, .label, .visually-hidden) + .prose { margin-block-start: var(--space-6); }
  .section__intro + .prose { margin-block-start: var(--space-4); }
  .prose h2 { max-inline-size: none; margin-block: var(--space-7) 0; font-size: var(--text-h2-prose); line-height: 1.2; }
  .prose h3 { margin-block: var(--space-6) 0; }
  .prose :is(h2, h3) + * { margin-block-start: var(--space-4); }
  .prose h3 + * { margin-block-start: var(--space-2); }
  .prose :is(ul, ol):not([class]) { padding-inline-start: 1.25em; }
  .prose ul:not([class]) { list-style-type: disc; } /* nested too, as C */
  .prose ol:not([class]) { padding-inline-start: 1.5em; }
  .prose :is(ul, ol):not([class]) > li + li { margin-block-start: var(--space-2); }
  .prose li::marker { color: var(--ink-2); }
  .prose blockquote { padding-inline-start: 1.25rem; border-inline-start: 3px solid var(--ink); color: var(--ink-2); }
  .prose cite { font: 400 var(--text-small)/1.45 var(--font-sans); }

  /* Readout: no orange on surface */
  .readout { margin-block-start: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface); }
  .readout__caption { margin-block-end: var(--space-3); }
  .readout__list { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
  .readout dt { padding-block-start: 0.1rem; color: var(--ink-2); font: 400 var(--text-label)/1.5 var(--font-mono); hyphens: manual; -webkit-hyphens: manual; }
  .readout--specs dt { text-transform: uppercase; letter-spacing: 0.06em; }
  .readout dd { margin: 0; font: 400 0.9375rem/1.45 var(--font-sans); }
  .readout.measure { font: 400 1rem/1.45 var(--font-sans); }
  .prose .readout { margin-block-start: var(--space-4); }
  /* Receipt (C 5.6) */
  .receipt { margin-block-start: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface); border-block: 1px dashed var(--ink-3); font: 400 var(--text-small)/1.5 var(--font-mono); }
  .receipt > figcaption { margin-block-end: var(--space-3); }
  .receipt__source { margin-block-start: var(--space-3); }
  .receipt__link { display: block; cursor: zoom-in; }
  @container content (max-width: 29.99rem) {
    :is(.readout, .receipt) { padding-inline: var(--space-4); }
  }
  .page-head__aside { display: grid; gap: var(--space-4); align-content: start; }
  .page-head__aside > .readout { margin-block-start: 0; }
  /* Page head aside: 12 columns from 60rem */
  :is(.page-head--home .page-head__aside, .page-head__art) { display: none; }
  @container content (min-width: 60rem) {
    .page-head__inner:has(> .page-head__aside) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
    .page-head__main { grid-column: 1 / 9; }
    .page-head__inner > .page-head__aside { display: grid; grid-column: 9 / 13; grid-row: 1; margin-block-start: 2.6rem; }
    .page-head--home .page-head__aside { grid-column: 10 / 13; }
    .page-head__art { justify-self: end; }
    .page-head__art img { inline-size: 10rem; }
  }

  /* Split (C 3.3) */
  .split { display: grid; gap: var(--space-7); margin-block-start: var(--space-6); }
  .split > * { min-inline-size: 0; }
  .split > :is(.readout, .receipt) { margin-block-start: 0; }
  .split > :first-child > * + * { margin-block-start: var(--space-4); }
  @container content (min-width: 60rem) {
    .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
    .split > :first-child { grid-column: 1 / 8; }
    .split > :last-child { grid-column: 9 / 13; }
  }

  /* Reviews */
  .reviews { display: grid; gap: var(--space-7); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
  .reviews--one { font: 400 1rem/1.45 var(--font-sans); }
  @container content (min-width: 60rem) {
    .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
    .reviews--one { grid-template-columns: minmax(0, 1fr); max-inline-size: var(--measure); }
  }
  .section--recognition .card-grid { gap: var(--space-6); }
  .section--recognition .card { gap: 0; }
  .section--recognition .card__label { margin-block-start: var(--space-4); }
  .section--recognition .card__answer { margin-block-start: var(--space-1); }
  @container content (min-width: 60rem) { .section--recognition .card-grid { gap: var(--space-6) var(--space-5); } }
  .reviews > li { display: flex; }
  .review { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); margin: 0; padding-block-start: var(--space-4); border-block-start: var(--rule); }
  .review__quote p { font: 400 1.0625rem/1.6 var(--font-serif); text-wrap: pretty; }
  .review__by { display: grid; justify-items: start; gap: var(--space-1); margin-block-start: auto; padding-block-start: var(--space-2); font-family: var(--font-sans); }
  .review__logo { inline-size: auto; block-size: 24px; margin-block-end: var(--space-2); }
  .review__logo--square { block-size: 32px; }
  .review__name { font: 700 0.9375rem/1.45 var(--font-sans); }
  .review__org { color: var(--ink-3); font: 400 0.9375rem/1.45 var(--font-sans); }
  .review__site { color: var(--ink-2); font: 400 0.8125rem/1.4 var(--font-mono); }

  /* Update strip */
  .ritual { padding-block-start: var(--space-4); border-block-start: var(--rule); }
  .ritual--compact { margin-block-start: var(--space-6); }
  .ritual__title { max-inline-size: none; }
  .ritual__pre { max-inline-size: 62ch; margin-block-start: var(--space-2); color: var(--ink-2); font: 400 var(--text-small)/1.5 var(--font-sans); }
  .ritual__pre strong { color: var(--ink); }
  .ritual__steps { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
  .ritual__step { position: relative; display: grid; grid-template-columns: 2.25rem 7rem minmax(0, 1fr); column-gap: var(--space-3); padding-block-end: var(--space-4); hyphens: manual; -webkit-hyphens: manual; }
  .ritual__num { position: relative; z-index: var(--z-raised); display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1.5px solid var(--ink); border-radius: var(--radius-round); background: var(--paper); color: var(--ink); font: 400 0.8125rem/1 var(--font-mono); }
  .ritual__label { padding-block-start: 0.5rem; font: 700 var(--text-ui)/1.3 var(--font-sans); }
  .ritual__tag { color: var(--ink-2); font-size: var(--text-small); font-weight: 400; }
  .ritual__detail { padding-block-start: 0.55rem; color: var(--ink-2); font: 400 var(--text-small)/1.4 var(--font-sans); }
  .ritual__step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: calc(1.125rem - 1px); inset-block: 2.25rem 0; inline-size: 2px; background: var(--ink); }
  .ritual__step:first-child::before { background: var(--accent); }
  .ritual__step:is(:nth-child(4), .ritual__step--shop)::before { background: repeating-linear-gradient(to bottom, var(--ink) 0 4px, transparent 4px 8px); }
  .ritual__step--shop .ritual__num { border-style: dashed; }
  .ritual__bracket,
  .ritual__riser { display: none; }
  .ritual__loop { display: flex; align-items: flex-start; gap: var(--space-3); margin-block-start: var(--space-2); padding: var(--space-4); background: var(--accent-tint); border-inline-start: 3px solid var(--accent-ink); font: 400 var(--text-ui)/1.45 var(--font-sans); }
  .ritual__loop .icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--accent-ink); }
  .ritual__loop-text { font-weight: 700; line-height: 1.4; }
  .ritual__loop-sub { display: block; margin-block-start: var(--space-1); color: var(--ink-2); font-size: var(--text-small); font-weight: 400; }
  .ritual__more { margin-block-start: var(--space-4); }

  @container content (min-width: 48rem) {
    .ritual { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; column-gap: var(--space-5); }
    .ritual__title { grid-column: 1 / 3; }
    .ritual__pre { grid-column: 3 / 7; margin: 0; }
    .ritual__steps { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-5); }
    .ritual__step { display: flex; flex-direction: column; gap: var(--space-1); padding: 0; }
    .ritual__label { padding-block-start: var(--space-3); }
    .ritual__detail { padding: 0; }
    .ritual__step:not(:last-child)::before { inset-inline: calc(2.25rem + 6px) calc(-1 * var(--space-5) + 6px); inset-block: calc(1.125rem - 1px) auto; inline-size: auto; block-size: 2px; }
    .ritual__step:is(:nth-child(4), .ritual__step--shop)::before { background: repeating-linear-gradient(to right, var(--ink) 0 5px, transparent 5px 10px); }
    .ritual__bracket { position: relative; display: block; grid-column: 1 / 5; grid-row: 3; block-size: 1.25rem; margin-block-start: var(--space-4); margin-inline: calc(1.125rem - 1px) calc((100% - 3 * var(--space-5)) / 4 - 1.125rem - 1px); border: 2px solid var(--accent); border-block-start: 0; }
    .ritual__bracket::before { content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: -10px; border-inline: 6px solid transparent; border-block-end: 10px solid var(--accent); }
    .ritual__riser { display: block; grid-column: 2; grid-row: 3; inline-size: 2px; block-size: 1.25rem; margin-block-start: var(--space-4); margin-inline-start: calc(1.125rem - 1px); background: var(--accent); }
    .ritual__loop { grid-column: 1 / 5; grid-row: 4; margin-block-start: var(--space-3); padding: 0 0 0 var(--space-3); background: none; border-inline-start: 0; }
    .ritual__more { grid-column: 5 / 7; grid-row: 4; align-self: end; justify-self: end; margin: 0; }
  }

  /* Schedule (C 5.5; the table is in how-it-works.css) */
  .schedule { margin-block-start: var(--space-6); font-family: var(--font-sans); }
  .schedule__legend { max-inline-size: var(--measure); margin-block-start: var(--space-4); color: var(--ink-2); font: 400 var(--text-small)/1.5 var(--font-sans); }

  /* Steps (C 5.11): a row from 48rem unless --vertical */
  .steps { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
  .steps__item { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-3); padding-block-end: var(--space-5); }
  .steps__item:last-child { padding-block-end: 0; }
  .steps__num { grid-row: 1 / span 2; padding-block-start: 0.3rem; font: 400 var(--text-label)/1 var(--font-mono); }
  .steps__title { font: 700 var(--text-h3)/var(--leading-h3) var(--font-sans); }
  .steps__item p { grid-column: 2; max-inline-size: 44ch; margin-block-start: var(--space-1); font: 400 1rem/1.6 var(--font-serif); overflow-wrap: anywhere; }
  .steps__item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 0.5rem; inset-block: 1.75rem 0.5rem; border-inline-start: 1px solid var(--ink-3); }
  @container content (min-width: 48rem) {
    .steps:not(.steps--vertical) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--space-5); }
    .steps:not(.steps--vertical) .steps__item { display: block; padding-block-end: 0; }
    .steps:not(.steps--vertical) .steps__num { display: block; padding-block-start: 0; }
    .steps:not(.steps--vertical) .steps__title { margin-block-start: var(--space-3); }
    .steps:not(.steps--vertical) .steps__item p { margin-block-start: var(--space-2); }
    .steps:not(.steps--vertical) .steps__item:not(:last-child)::before { inset-inline: 2rem calc(var(--space-3) - var(--space-5)); inset-block: 0.4rem auto; border-inline-start: 0; border-block-start: 1px solid var(--ink-3); }
  }

  /* Tables (C 5.15) */
  .table-wrap { overflow-x: auto; }
  .table-wrap caption { position: sticky; inset-inline-start: 0; max-inline-size: calc(100cqi - 2 * var(--gutter)); }
  .prose > .table-hint + .table-wrap { margin-block-start: var(--space-2); }
  @container content (min-width: 48rem) {
    .table-hint { display: none; }
    .prose > .table-hint + .table-wrap { margin-block-start: var(--space-4); }
  }

  /* Table of contents (C 5.15) */
  .toc { font: 400 0.9375rem/1.4 var(--font-sans); }
  .toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
  .toc__list li { counter-increment: toc; }
  .toc__list a { position: relative; display: block; padding: var(--space-3) 0 var(--space-3) 1.75rem; color: var(--ink); text-decoration: none; }
  .toc__list a::before { content: counter(toc) / ""; position: absolute; inset-inline-start: 0; inset-block-start: var(--space-3); color: var(--ink-3); font: 400 var(--text-label)/1.6 var(--font-mono); }
  .toc__list a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .toc--rail .toc__list { margin-block-start: var(--space-2); border-block-start: var(--hairline); }
  .toc--rail li { border-block-end: var(--hairline); }
  .toc--rail a { padding-block: var(--space-2); }
  .toc--rail a::before { inset-block-start: var(--space-2); }
  .toc--inline { margin-block-start: var(--space-5); border-block-start: var(--rule); border-block-end: var(--hairline); }
  .doc__main > .toc--inline:first-child { margin-block-start: 0; }
  .toc__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 3rem; font: 700 1rem/1.45 var(--font-sans); cursor: pointer; list-style: none; }
  .toc__summary::-webkit-details-marker { display: none; }
  .toc__summary::after { content: "+" / ""; }
  .toc--inline .toc__list { padding-block-end: var(--space-3); }
}

/* 10 Utilities */
@layer utilities {
  .visually-hidden:not(:focus, :active) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nowrap { white-space: nowrap; }

  .measure { max-inline-size: var(--measure); }

  /* [TODO: …] marks */
  .todo { padding: 0.1em 0.35em; background: var(--todo-bg); color: var(--ink); font: 400 var(--text-label)/1.5 var(--font-mono); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  mark.todo { outline: 1px dashed var(--ink-2); outline-offset: 1px; }
  .todo--block { display: block; padding: var(--space-3) var(--space-4); outline-offset: -1px; }

  @media (prefers-contrast: more) {
    .card, .package, .callout, .in-short, .channel, .review, .readout { outline: 1px solid var(--ink); outline-offset: -1px; }
  }

  @media (forced-colors: active) {
    .button, form button[type="submit"], [data-analytics-toggle] { border-color: ButtonText; }
    .ritual__step::before,
    .ritual__riser { forced-color-adjust: none; background: CanvasText; }
    .ritual__bracket { border-color: CanvasText; }
    .todo { forced-color-adjust: none; background: Mark; color: MarkText; }
    .ritual__bracket::before { forced-color-adjust: none; border-block-end-color: CanvasText; }
    .callout, .in-short, .ritual__loop { border-inline-start-color: CanvasText; }
    .readout { border: 1px solid CanvasText; }
    .brand__mark, .avatar { forced-color-adjust: none; background: var(--paper); }
    .avatar { background: var(--surface); }
  }

}