/* ==========================================================================
   Geoleaper Design System
   ----------------------------------------------------
   Aesthetic direction: Editorial Computer Science.
   Stripe Press × Linear × an academic journal.
   The page reads like a typeset book; the components behave like software.

   All system surfaces are scoped under .ds so this file can coexist
   with the legacy theme.css without collisions.

     1. Tokens
     2. Reset & base
     3. Layout primitives
     4. Typography
     5. Buttons
     6. Forms
     7. Cards
     8. Lists
     9. Tables
    10. Code
    11. Callouts
    12. Badges
    13. Section patterns
    14. Pull quote
    15. Citation panel  (signature component)
    16. Marginalia & footnotes
    17. Step list
    18. Comparison
    19. Tabs
    20. Accordion
    21. Empty state
    22. Toast
    23. Hero variants
    24. Utilities
   ========================================================================== */


/* 1. Tokens -----------------------------------------------------------------
   Colors live as light-dark() pairs so the system flips with color-scheme.
   Hue 75 = warm paper. Hue 260 = slightly cool ink. Hue 28 = quince/oxblood.
   Chroma is held low at extremes (per OKLCH best practice).
--------------------------------------------------------------------------- */

.ds {
  color-scheme: light dark;

  /* Surfaces (paper) */
  --ds-paper:        light-dark(oklch(98.2% 0.006 75), oklch(16% 0.012 70));
  --ds-paper-2:      light-dark(oklch(96% 0.009 75),   oklch(20% 0.014 70));
  --ds-paper-3:      light-dark(oklch(93.5% 0.012 75), oklch(24% 0.014 70));
  --ds-paper-sunk:   light-dark(oklch(91% 0.014 75),   oklch(13% 0.011 70));

  /* Rules / borders */
  --ds-rule:         light-dark(oklch(86% 0.012 75),   oklch(31% 0.014 70));
  --ds-rule-strong:  light-dark(oklch(70% 0.014 75),   oklch(46% 0.018 70));
  --ds-rule-faint:   light-dark(oklch(91% 0.010 75),   oklch(24% 0.012 70));

  /* Ink */
  --ds-ink:          light-dark(oklch(20% 0.018 260),  oklch(95% 0.011 75));
  --ds-ink-2:        light-dark(oklch(38% 0.016 260),  oklch(74% 0.014 75));
  --ds-ink-3:        light-dark(oklch(54% 0.014 260),  oklch(56% 0.014 75));
  --ds-ink-inverse:  light-dark(oklch(98% 0.006 75),   oklch(16% 0.012 70));

  /* Accent (quince / oxblood) */
  --ds-accent:       light-dark(oklch(46% 0.16 28),    oklch(74% 0.135 28));
  --ds-accent-deep:  light-dark(oklch(36% 0.14 28),    oklch(64% 0.13 28));
  --ds-accent-tint:  light-dark(oklch(94% 0.04 28),    oklch(28% 0.075 28));
  --ds-accent-rule:  light-dark(oklch(72% 0.10 28),    oklch(48% 0.10 28));

  /* Highlight (used sparingly) */
  --ds-mark-bg:      light-dark(oklch(93% 0.115 95),   oklch(40% 0.13 95));
  --ds-mark-ink:     light-dark(oklch(28% 0.05 95),    oklch(96% 0.02 95));

  /* Status (used in callouts; full borders, never side stripes) */
  --ds-info-bg:      light-dark(oklch(96% 0.025 235),  oklch(26% 0.05 235));
  --ds-info-rule:    light-dark(oklch(76% 0.07 235),   oklch(54% 0.09 235));
  --ds-info-ink:     light-dark(oklch(34% 0.08 235),   oklch(90% 0.04 235));
  --ds-warn-bg:      light-dark(oklch(95% 0.06 75),    oklch(28% 0.07 75));
  --ds-warn-rule:    light-dark(oklch(72% 0.10 75),    oklch(56% 0.10 75));
  --ds-warn-ink:     light-dark(oklch(38% 0.09 75),    oklch(92% 0.05 75));
  --ds-danger-bg:    light-dark(oklch(95% 0.04 28),    oklch(28% 0.06 28));
  --ds-danger-rule:  light-dark(oklch(72% 0.11 28),    oklch(56% 0.10 28));
  --ds-danger-ink:   light-dark(oklch(38% 0.11 28),    oklch(92% 0.04 28));

  /* Code (kept neutral, with subtle hue lift in dark) */
  --ds-code-bg:      light-dark(oklch(96% 0.008 75),   oklch(20% 0.014 70));
  --ds-code-ink:     light-dark(oklch(28% 0.02 260),   oklch(92% 0.012 75));
  --ds-code-line:    light-dark(oklch(88% 0.012 75),   oklch(30% 0.014 70));
  --ds-syntax-key:   light-dark(oklch(46% 0.16 28),    oklch(74% 0.135 28));
  --ds-syntax-str:   light-dark(oklch(40% 0.10 150),   oklch(78% 0.10 150));
  --ds-syntax-num:   light-dark(oklch(44% 0.13 270),   oklch(78% 0.10 270));
  --ds-syntax-com:   light-dark(oklch(58% 0.014 260),  oklch(58% 0.014 75));

  /* Type families */
  --ds-font-display: 'Petrona', 'Iowan Old Style', 'Charter', 'Georgia', serif;
  --ds-font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ds-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale.
     Editorial pages: fluid clamp() on display / h1.
     Body/UI: fixed rem so layout is predictable. */
  --ds-text-3xs:  0.6875rem;     /* 11 - footnote dingbats   */
  --ds-text-2xs:  0.75rem;       /* 12 - kicker, caption     */
  --ds-text-xs:   0.8125rem;     /* 13 - small label         */
  --ds-text-sm:   0.9375rem;     /* 15 - small body / meta   */
  --ds-text-base: 1.0625rem;     /* 17 - body                */
  --ds-text-md:   1.1875rem;     /* 19 - lede                */
  --ds-text-lg:   1.375rem;      /* 22 - h4                  */
  --ds-text-xl:   clamp(1.625rem, 1.35rem + 0.85vw, 2rem);     /* h3 */
  --ds-text-2xl:  clamp(2rem,    1.55rem + 1.6vw,  2.625rem);  /* h2 */
  --ds-text-3xl:  clamp(2.625rem, 1.85rem + 2.7vw, 3.75rem);   /* h1 */
  --ds-text-display: clamp(3rem, 1.9rem + 4.4vw, 5.25rem);     /* hero */

  /* Leading. Body leading is tightened for serif body and loosened for grotesque. */
  --ds-leading-tight:   1.12;
  --ds-leading-snug:    1.28;
  --ds-leading-normal:  1.55;
  --ds-leading-relaxed: 1.7;

  /* Tracking. Editorial: kickers wide, displays tight. */
  --ds-track-tight:   -0.022em;
  --ds-track-snug:    -0.012em;
  --ds-track-normal:  0;
  --ds-track-wide:    0.02em;
  --ds-track-kicker:  0.14em;

  /* Spacing — 4pt scale, semantic names */
  --ds-space-3xs: 0.25rem;   /* 4  */
  --ds-space-2xs: 0.5rem;    /* 8  */
  --ds-space-xs:  0.75rem;   /* 12 */
  --ds-space-sm:  1rem;      /* 16 */
  --ds-space-md:  1.5rem;    /* 24 */
  --ds-space-lg:  2rem;      /* 32 */
  --ds-space-xl:  3rem;      /* 48 */
  --ds-space-2xl: 4rem;      /* 64 */
  --ds-space-3xl: 6rem;      /* 96 */
  --ds-space-4xl: 9rem;      /* 144*/

  /* Radii — minimal, editorial doesn't want pillowy rounds */
  --ds-radius-xs: 2px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 10px;
  --ds-radius-pill: 999px;

  /* Shadows — used sparingly. No generic SaaS drop shadow. */
  --ds-shadow-soft: 0 1px 2px oklch(20% 0.015 260 / 0.04),
                    0 4px 16px oklch(20% 0.015 260 / 0.05);
  --ds-shadow-pressed: inset 0 0 0 1px var(--ds-rule);

  /* Motion */
  --ds-ease-out:      cubic-bezier(0.25, 1, 0.5, 1);
  --ds-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-dur-instant: 80ms;
  --ds-dur-fast:    160ms;
  --ds-dur-base:    240ms;
  --ds-dur-slow:    420ms;

  /* Layout */
  --ds-measure: 68ch;          /* reading column */
  --ds-container: 1080px;
  --ds-container-wide: 1240px;
  --ds-gutter: clamp(1.25rem, 3vw, 2.5rem);

  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  font-feature-settings: 'ss01', 'ss02', 'liga', 'kern';
  font-variation-settings: 'wght' 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* 2. Reset & base ----------------------------------------------------------- */

.ds *,
.ds *::before,
.ds *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ds img,
.ds svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.ds :where(a) {
  color: var(--ds-ink);
  text-decoration: underline;
  text-decoration-color: var(--ds-accent-rule);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--ds-dur-fast) var(--ds-ease-out),
              color var(--ds-dur-fast) var(--ds-ease-out);
}

.ds :where(a):hover {
  text-decoration-color: var(--ds-accent);
  color: var(--ds-accent-deep);
}

.ds :focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.ds ::selection {
  background: var(--ds-mark-bg);
  color: var(--ds-mark-ink);
}

.ds hr {
  border: 0;
  height: 1px;
  background: var(--ds-rule);
  margin: var(--ds-space-xl) 0;
}

.ds button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}


/* 3. Layout primitives ------------------------------------------------------ */

.ds-container {
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

.ds-container--wide  { max-width: var(--ds-container-wide); }
.ds-container--prose { max-width: var(--ds-measure); }

/* Vertical rhythm: every direct child gets the same gap. */
.ds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--flow, var(--ds-space-md));
}
.ds-stack--xs  { --flow: var(--ds-space-xs); }
.ds-stack--sm  { --flow: var(--ds-space-sm); }
.ds-stack--md  { --flow: var(--ds-space-md); }
.ds-stack--lg  { --flow: var(--ds-space-lg); }
.ds-stack--xl  { --flow: var(--ds-space-xl); }
.ds-stack--2xl { --flow: var(--ds-space-2xl); }

/* Horizontal cluster. */
.ds-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--ds-space-sm));
}

/* Self-adjusting card grid (no breakpoints needed). */
.ds-grid {
  display: grid;
  gap: var(--ds-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.ds-grid--tight { gap: var(--ds-space-sm); }
.ds-grid--airy  { gap: var(--ds-space-xl); }

/* 12-column grid for editorial layouts with marginalia. */
.ds-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--ds-space-md);
}

/* Sidebar layout — main column + intrinsic-width sidebar. */
.ds-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
  gap: var(--ds-space-2xl);
}
@media (max-width: 880px) {
  .ds-sidebar { grid-template-columns: 1fr; }
}

/* Prose: classical reading column with editorial defaults. */
.ds-prose {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-ink-2);
  max-width: var(--ds-measure);
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.ds-prose > * + * { margin-top: var(--ds-space-md); }
.ds-prose h2, .ds-prose h3, .ds-prose h4 { color: var(--ds-ink); }
.ds-prose h2 { margin-top: var(--ds-space-2xl); }
.ds-prose h3 { margin-top: var(--ds-space-xl); }
.ds-prose p { color: var(--ds-ink-2); }
.ds-prose strong { color: var(--ds-ink); font-weight: 600; }
.ds-prose em { font-style: italic; }
.ds-prose a {
  color: var(--ds-ink);
  text-decoration-color: var(--ds-accent-rule);
}


/* 4. Typography ------------------------------------------------------------- */

.ds-display,
.ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  font-family: var(--ds-font-display);
  color: var(--ds-ink);
  font-weight: 500;
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-track-tight);
  font-variant-numeric: lining-nums;
  font-feature-settings: 'kern', 'liga', 'calt';
}

.ds-display {
  font-size: var(--ds-text-display);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

.ds-h1 {
  font-size: var(--ds-text-3xl);
  font-weight: 500;
  text-wrap: balance;
}

.ds-h2 {
  font-size: var(--ds-text-2xl);
  font-weight: 500;
  text-wrap: balance;
  line-height: var(--ds-leading-snug);
}

.ds-h3 {
  font-size: var(--ds-text-xl);
  font-weight: 600;
  letter-spacing: var(--ds-track-snug);
  line-height: var(--ds-leading-snug);
}

.ds-h4 {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-lg);
  font-weight: 600;
  letter-spacing: var(--ds-track-snug);
  line-height: 1.32;
  color: var(--ds-ink);
}

/* Display italic — Petrona's italic is calligraphic. Use for editorial pull words. */
.ds-display em,
.ds-h1 em,
.ds-h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ds-accent-deep);
}

/* Body */
.ds-body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-ink-2);
}
.ds-body--lg { font-size: var(--ds-text-md); line-height: 1.6; }
.ds-body--sm { font-size: var(--ds-text-sm); }

/* Lede — opening paragraph. */
.ds-lede {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-md);
  line-height: 1.5;
  color: var(--ds-ink);
  font-weight: 400;
  letter-spacing: var(--ds-track-snug);
  max-width: var(--ds-measure);
  text-wrap: pretty;
}

/* Kicker — small caps with tracking; editorial label. */
.ds-kicker {
  display: inline-block;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-2xs);
  font-weight: 600;
  letter-spacing: var(--ds-track-kicker);
  text-transform: uppercase;
  color: var(--ds-accent-deep);
  font-feature-settings: 'lnum';
}

/* Caption */
.ds-caption {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-3);
  line-height: 1.5;
}

/* Section number — § 02.1 style monospace marker. */
.ds-section-no {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  color: var(--ds-ink-3);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Dropcap — first letter of opening paragraph. Used by toggling .ds-prose--dropcap on the prose container. */
.ds-prose--dropcap > p:first-of-type::first-letter {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  margin: 0.04em 0.08em -0.08em -0.04em;
  color: var(--ds-accent-deep);
  font-feature-settings: 'kern';
}

/* Mark / highlight (yellow-ish, sparing) */
.ds-mark {
  background: var(--ds-mark-bg);
  color: var(--ds-mark-ink);
  padding: 0.05em 0.18em;
  border-radius: 1px;
}

/* Inline code (separate token from <code> below) */
.ds code, .ds .ds-inline-code {
  font-family: var(--ds-font-mono);
  font-size: 0.9em;
  background: var(--ds-code-bg);
  color: var(--ds-code-ink);
  padding: 0.06em 0.36em;
  border: 1px solid var(--ds-code-line);
  border-radius: var(--ds-radius-xs);
}

/* Blockquote — restrained, rule on the left as a single 1px line (NOT a colored stripe). */
.ds-blockquote {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-md);
  font-style: italic;
  line-height: 1.5;
  color: var(--ds-ink);
  padding-left: var(--ds-space-md);
  border-left: 1px solid var(--ds-rule-strong);
  max-width: var(--ds-measure);
}
.ds-blockquote cite {
  display: block;
  margin-top: var(--ds-space-xs);
  font-family: var(--ds-font-body);
  font-style: normal;
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-3);
  letter-spacing: 0;
}
.ds-blockquote cite::before {
  content: '— ';
  color: var(--ds-ink-3);
}


/* 5. Buttons ---------------------------------------------------------------- */

.ds .ds-btn {
  --pad-x: var(--ds-space-md);
  --pad-y: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2xs);
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background var(--ds-dur-fast) var(--ds-ease-out),
    border-color var(--ds-dur-fast) var(--ds-ease-out),
    color var(--ds-dur-fast) var(--ds-ease-out),
    transform var(--ds-dur-fast) var(--ds-ease-out);
}
.ds .ds-btn:active { transform: translateY(1px); }

.ds .ds-btn--primary {
  background: var(--ds-ink);
  color: var(--ds-ink-inverse);
  border-color: var(--ds-ink);
}
.ds .ds-btn--primary:hover {
  background: var(--ds-accent-deep);
  border-color: var(--ds-accent-deep);
  color: light-dark(oklch(98.2% 0.006 75), oklch(16% 0.012 70));
}

.ds .ds-btn--accent {
  background: var(--ds-accent);
  color: light-dark(oklch(98.2% 0.006 75), oklch(16% 0.012 70));
  border-color: var(--ds-accent);
}
.ds .ds-btn--accent:hover {
  background: var(--ds-accent-deep);
  border-color: var(--ds-accent-deep);
  color: light-dark(oklch(98.2% 0.006 75), oklch(16% 0.012 70));
}

.ds .ds-btn--secondary {
  background: var(--ds-paper);
  color: var(--ds-ink);
  border-color: var(--ds-rule-strong);
}
.ds .ds-btn--secondary:hover {
  border-color: var(--ds-ink);
  color: var(--ds-ink);
}

.ds .ds-btn--ghost {
  background: transparent;
  color: var(--ds-ink-2);
  border-color: transparent;
  padding-inline: var(--ds-space-sm);
}
.ds .ds-btn--ghost:hover {
  color: var(--ds-ink);
  background: var(--ds-paper-2);
}

.ds .ds-btn--link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ds-ink);
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-color: var(--ds-accent-rule);
  text-underline-offset: 0.22em;
}
.ds .ds-btn--link:hover {
  color: var(--ds-accent-deep);
  text-decoration-color: var(--ds-accent);
}

.ds-btn--sm { --pad-x: var(--ds-space-sm); --pad-y: 0.45rem; font-size: var(--ds-text-xs); }
.ds-btn--lg { --pad-x: var(--ds-space-lg); --pad-y: 0.85rem; font-size: var(--ds-text-base); }

.ds-btn[disabled],
.ds-btn[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}


/* 6. Forms ------------------------------------------------------------------ */

.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2xs);
}

.ds-label {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  letter-spacing: var(--ds-track-wide);
  text-transform: uppercase;
  color: var(--ds-ink-2);
}

.ds-input,
.ds-textarea,
.ds-select {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  color: var(--ds-ink);
  background: var(--ds-paper);
  border: 1px solid var(--ds-rule-strong);
  border-radius: var(--ds-radius-sm);
  padding: 0.65rem var(--ds-space-sm);
  line-height: 1.4;
  width: 100%;
  transition: border-color var(--ds-dur-fast) var(--ds-ease-out),
              background var(--ds-dur-fast) var(--ds-ease-out);
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--ds-ink-3);
}

.ds-input:hover,
.ds-textarea:hover,
.ds-select:hover {
  border-color: var(--ds-ink-3);
}

.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
  outline: 0;
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-accent-tint);
}

.ds-textarea { min-height: 8rem; resize: vertical; }

.ds-input--invalid,
.ds-textarea--invalid {
  border-color: var(--ds-danger-rule);
}

.ds-help {
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-3);
}
.ds-error {
  font-size: var(--ds-text-xs);
  color: var(--ds-danger-ink);
}

/* Checkbox / radio */
.ds-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ds-space-2xs);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-2);
  cursor: pointer;
  line-height: 1.4;
}
.ds-check input[type='checkbox'],
.ds-check input[type='radio'] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--ds-rule-strong);
  background: var(--ds-paper);
  margin-top: 0.25em;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color var(--ds-dur-fast), background var(--ds-dur-fast);
}
.ds-check input[type='checkbox'] { border-radius: var(--ds-radius-xs); }
.ds-check input[type='radio'] { border-radius: 50%; }
.ds-check input[type='checkbox']:checked {
  background: var(--ds-ink);
  border-color: var(--ds-ink);
}
.ds-check input[type='checkbox']:checked::before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  background:
    linear-gradient(45deg, transparent 35%, var(--ds-paper) 35% 65%, transparent 65%) no-repeat center / 0.18em 0.6em,
    linear-gradient(-45deg, transparent 35%, var(--ds-paper) 35% 65%, transparent 65%) no-repeat center / 0.6em 0.18em;
  /* Render a tick using two diagonal segments — no SVG needed. */
}
.ds-check input[type='radio']:checked {
  border-color: var(--ds-ink);
  background:
    radial-gradient(circle, var(--ds-ink) 42%, transparent 45%);
}

/* Switch */
.ds-switch {
  --w: 2.4rem;
  --h: 1.35rem;
  display: inline-grid;
  align-items: center;
  position: relative;
  width: var(--w);
  height: var(--h);
}
.ds-switch input {
  appearance: none;
  width: 100%;
  height: 100%;
  border: 1px solid var(--ds-rule-strong);
  background: var(--ds-paper-2);
  border-radius: var(--ds-radius-pill);
  cursor: pointer;
  transition: background var(--ds-dur-fast), border-color var(--ds-dur-fast);
}
.ds-switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: calc(var(--h) - 0.5rem);
  height: calc(var(--h) - 0.5rem);
  background: var(--ds-ink);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left var(--ds-dur-base) var(--ds-ease-out-expo),
              background var(--ds-dur-fast);
  pointer-events: none;
}
.ds-switch input:checked { background: var(--ds-ink); border-color: var(--ds-ink); }
.ds-switch input:checked + ::after { /* fallback */ }
.ds-switch:has(input:checked)::after { left: calc(100% - var(--h) + 0.32rem); background: var(--ds-paper); }

/* Search */
.ds-search {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2xs);
  background: var(--ds-paper-2);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-sm);
  padding: 0.5rem var(--ds-space-sm);
  color: var(--ds-ink-3);
}
.ds-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--ds-ink);
}
.ds-search kbd {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  color: var(--ds-ink-3);
  background: var(--ds-paper);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-xs);
  padding: 0.05em 0.4em;
}


/* 7. Cards ------------------------------------------------------------------
   Editorial cards. No glassmorphism, no generic drop shadow, no border-left
   stripe. We use full 1px rules and typographic hierarchy.
--------------------------------------------------------------------------- */

.ds-card {
  background: var(--ds-paper);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  transition: border-color var(--ds-dur-base) var(--ds-ease-out);
}
.ds-card:hover { border-color: var(--ds-rule-strong); }
.ds-card--quiet { background: transparent; border-color: var(--ds-rule-faint); }
.ds-card--sunken { background: var(--ds-paper-sunk); }

/* Article card — kicker, headline, lede, byline. No icon-on-top template. */
.ds-article-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  padding-block: var(--ds-space-lg);
  border-top: 1px solid var(--ds-rule);
}
.ds-article-card__headline {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: var(--ds-track-tight);
  color: var(--ds-ink);
  text-decoration: none;
}
.ds-article-card__headline:hover {
  text-decoration: underline;
  text-decoration-color: var(--ds-accent);
  text-underline-offset: 0.18em;
}
.ds-article-card__lede {
  color: var(--ds-ink-2);
  font-size: var(--ds-text-base);
  line-height: 1.55;
  max-width: 56ch;
}
.ds-article-card__meta {
  display: flex;
  gap: var(--ds-space-md);
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-3);
  font-variant-numeric: tabular-nums;
}

/* Plan card — pricing without the SaaS template. Number set in display serif. */
.ds-plan {
  background: var(--ds-paper);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-md);
}
.ds-plan--featured {
  border-color: var(--ds-ink);
  background: var(--ds-paper-2);
}
.ds-plan__name {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-2xs);
  font-weight: 700;
  letter-spacing: var(--ds-track-kicker);
  text-transform: uppercase;
  color: var(--ds-ink-3);
}
.ds-plan--featured .ds-plan__name { color: var(--ds-accent-deep); }
.ds-plan__price {
  font-family: var(--ds-font-display);
  font-size: clamp(2.5rem, 1.9rem + 1.6vw, 3.25rem);
  line-height: 1;
  color: var(--ds-ink);
  font-weight: 500;
  letter-spacing: -0.025em;
  display: flex;
  align-items: baseline;
  gap: 0.18em;
}
.ds-plan__price small {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-3);
  font-weight: 500;
  letter-spacing: 0;
}
.ds-plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2xs);
  margin-block: var(--ds-space-xs);
  list-style: none;
}
.ds-plan__features li {
  display: flex;
  gap: var(--ds-space-xs);
  align-items: baseline;
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-2);
  padding-block: 0.35rem;
  border-bottom: 1px dashed var(--ds-rule-faint);
}
.ds-plan__features li::before {
  content: '+';
  font-family: var(--ds-font-mono);
  color: var(--ds-accent-deep);
  font-size: 0.85em;
}
.ds-plan__features li[data-excluded]::before {
  content: '−';
  color: var(--ds-ink-3);
}


/* 8. Lists ------------------------------------------------------------------ */

.ds-list-bare { list-style: none; padding: 0; }

.ds-list-rules {
  list-style: none;
  padding: 0;
}
.ds-list-rules > li {
  padding-block: var(--ds-space-sm);
  border-bottom: 1px solid var(--ds-rule);
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-md);
  align-items: baseline;
}
.ds-list-rules > li:first-child { border-top: 1px solid var(--ds-rule); }

/* Numbered list with kicker numerals (set in display serif, oxblood). */
.ds-list-numerals {
  list-style: none;
  padding: 0;
  counter-reset: numlist;
  display: grid;
  gap: var(--ds-space-md);
}
.ds-list-numerals > li {
  counter-increment: numlist;
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: var(--ds-space-sm);
  align-items: baseline;
}
.ds-list-numerals > li::before {
  content: counter(numlist, decimal-leading-zero);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  font-weight: 500;
  color: var(--ds-accent-deep);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  line-height: 1;
}

/* Definition list (dl) for spec / fact lists. */
.ds-defs {
  display: grid;
  grid-template-columns: minmax(140px, 22%) 1fr;
  column-gap: var(--ds-space-md);
  row-gap: 0;
}
.ds-defs > dt,
.ds-defs > dd {
  padding-block: var(--ds-space-sm);
  border-top: 1px solid var(--ds-rule);
}
.ds-defs > dt:last-of-type,
.ds-defs > dd:last-of-type {
  border-bottom: 1px solid var(--ds-rule);
}
.ds-defs > dt {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-2xs);
  font-weight: 700;
  letter-spacing: var(--ds-track-kicker);
  text-transform: uppercase;
  color: var(--ds-ink-3);
}
.ds-defs > dd {
  color: var(--ds-ink);
  font-size: var(--ds-text-sm);
}


/* 9. Tables ----------------------------------------------------------------- */

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-sm);
  font-variant-numeric: tabular-nums;
}
.ds-table thead th {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-2xs);
  font-weight: 700;
  letter-spacing: var(--ds-track-kicker);
  text-transform: uppercase;
  color: var(--ds-ink-3);
  text-align: left;
  padding: var(--ds-space-xs) var(--ds-space-sm);
  border-bottom: 1px solid var(--ds-rule-strong);
}
.ds-table tbody td {
  padding: var(--ds-space-sm);
  border-bottom: 1px solid var(--ds-rule);
  color: var(--ds-ink-2);
  vertical-align: top;
}
.ds-table tbody tr:hover td { background: var(--ds-paper-2); }

/* Comparison table — narrower, with strong 1st column. */
.ds-table--compare th:first-child,
.ds-table--compare td:first-child {
  color: var(--ds-ink);
  font-weight: 500;
}
.ds-table--compare td .ds-tick {
  color: var(--ds-accent-deep);
  font-weight: 700;
}
.ds-table--compare td .ds-dash {
  color: var(--ds-ink-3);
}


/* 10. Code ------------------------------------------------------------------ */

.ds-code {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  background: var(--ds-code-bg);
  color: var(--ds-code-ink);
  border: 1px solid var(--ds-code-line);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-sm) var(--ds-space-md);
  line-height: 1.55;
  overflow-x: auto;
  tab-size: 2;
  position: relative;
}
.ds-code__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--ds-space-2xs);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-2xs);
  letter-spacing: var(--ds-track-wide);
  text-transform: uppercase;
  color: var(--ds-ink-3);
  font-weight: 600;
}
/* Syntax tokens — usable inside any code-bearing element under .ds */
.ds .tok-key  { color: var(--ds-syntax-key);  font-weight: 600; }
.ds .tok-str  { color: var(--ds-syntax-str); }
.ds .tok-num  { color: var(--ds-syntax-num); }
.ds .tok-com  { color: var(--ds-syntax-com);  font-style: italic; }
.ds .tok-pun  { color: var(--ds-ink-3); }
.ds .tok-attr { color: var(--ds-syntax-num); font-style: italic; }
.ds .tok-tag  { color: var(--ds-syntax-key);  font-weight: 600; }

/* Terminal */
.ds-term {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  background: var(--ds-paper-sunk);
  color: var(--ds-ink-2);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-md);
  line-height: 1.6;
  overflow-x: auto;
}
.ds-term .ds-term__prompt {
  color: var(--ds-accent-deep);
  user-select: none;
  margin-right: 0.5em;
}


/* 11. Callouts -------------------------------------------------------------
   Full borders + inline lead glyph. NEVER side-stripe accents.
--------------------------------------------------------------------------- */

.ds-callout {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md) var(--ds-space-md);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-paper-2);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  line-height: 1.55;
  align-items: baseline;
}
.ds-callout::before {
  content: '§';
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: 1.4em;
  color: var(--ds-ink-3);
  line-height: 0.9;
}
.ds-callout strong {
  color: var(--ds-ink);
  font-weight: 600;
  margin-right: 0.4em;
}

.ds-callout--note    { background: var(--ds-info-bg);  border-color: var(--ds-info-rule);  color: var(--ds-info-ink); }
.ds-callout--note::before { content: 'i'; font-style: italic; color: var(--ds-info-rule); }
.ds-callout--note strong  { color: var(--ds-info-ink); }

.ds-callout--warn    { background: var(--ds-warn-bg);  border-color: var(--ds-warn-rule);  color: var(--ds-warn-ink); }
.ds-callout--warn::before { content: '!'; font-weight: 700; color: var(--ds-warn-rule); }
.ds-callout--warn strong  { color: var(--ds-warn-ink); }

.ds-callout--danger  { background: var(--ds-danger-bg); border-color: var(--ds-danger-rule); color: var(--ds-danger-ink); }
.ds-callout--danger::before { content: '×'; font-weight: 700; color: var(--ds-danger-rule); }
.ds-callout--danger strong  { color: var(--ds-danger-ink); }


/* 12. Badges & tags --------------------------------------------------------- */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.18em 0.6em;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-2xs);
  font-weight: 600;
  letter-spacing: var(--ds-track-wide);
  text-transform: uppercase;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-paper-2);
  color: var(--ds-ink-2);
  border: 1px solid var(--ds-rule);
  font-variant-numeric: tabular-nums;
}
.ds-badge--accent { background: var(--ds-accent-tint); color: var(--ds-accent-deep); border-color: transparent; }
.ds-badge--solid  { background: var(--ds-ink); color: var(--ds-paper); border-color: transparent; }
.ds-badge--dot::before {
  content: '';
  width: 0.45em; height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* Tag (rectangular, used for taxonomies) */
.ds-tag {
  display: inline-block;
  padding: 0.18em 0.55em;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  color: var(--ds-ink-2);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-xs);
  letter-spacing: 0;
  text-transform: none;
}


/* 13. Section patterns ----------------------------------------------------- */

.ds-section {
  padding-block: var(--ds-space-2xl);
  border-top: 1px solid var(--ds-rule);
}
.ds-section--first { padding-top: var(--ds-space-xl); border-top: 0; }

/* Section header — §-marker on its own line, then the title. */
.ds-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2xs);
  margin-bottom: var(--ds-space-lg);
}
.ds-section-head__no {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  color: var(--ds-ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ds-section-head__title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-2xl);
  font-weight: 500;
  color: var(--ds-ink);
  letter-spacing: -0.02em;
  line-height: 1.16;
  text-wrap: balance;
  max-width: 28ch;
}
.ds-section-head__lede {
  margin-top: var(--ds-space-xs);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-md);
  line-height: 1.55;
  max-width: var(--ds-measure);
}


/* 14. Pull quote ----------------------------------------------------------- */

.ds-pullquote {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.25rem);
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--ds-ink);
  max-width: 28ch;
  text-wrap: balance;
  margin-block: var(--ds-space-xl);
}
.ds-pullquote::before { content: '“'; color: var(--ds-accent); margin-right: 0.05em; }
.ds-pullquote::after  { content: '”'; color: var(--ds-accent); margin-left: 0.05em; }
.ds-pullquote + .ds-pullquote-attr {
  display: block;
  margin-top: var(--ds-space-sm);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-2xs);
  letter-spacing: var(--ds-track-kicker);
  text-transform: uppercase;
  color: var(--ds-ink-3);
}


/* 15. Citation panel  (signature) ------------------------------------------
   Source paragraph (serif) → AI citation rendering (mono). Connected by
   a thin horizontal rule with a thin → glyph. The visual idea is
   "machine-readable signal becomes machine-rendered citation".
   This is the component someone remembers from the site.
--------------------------------------------------------------------------- */

.ds-citation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--ds-space-md);
  align-items: stretch;
  padding: var(--ds-space-lg);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-md);
  background: var(--ds-paper);
}
.ds-citation__source,
.ds-citation__rendered {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}
.ds-citation__label {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-2xs);
  font-weight: 700;
  letter-spacing: var(--ds-track-kicker);
  text-transform: uppercase;
  color: var(--ds-ink-3);
}
.ds-citation__source p {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-base);
  line-height: 1.5;
  color: var(--ds-ink);
}
.ds-citation__rendered pre {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  line-height: 1.55;
  background: var(--ds-code-bg);
  color: var(--ds-code-ink);
  border: 1px solid var(--ds-code-line);
  padding: var(--ds-space-sm);
  border-radius: var(--ds-radius-sm);
  white-space: pre-wrap;
  margin: 0;
}
.ds-citation__arrow {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  font-family: var(--ds-font-mono);
}
.ds-citation__arrow::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--ds-rule);
}
.ds-citation__arrow::after {
  content: '→';
  position: relative;
  z-index: 1;
  background: var(--ds-paper);
  padding: 0.3em 0.5em;
  color: var(--ds-accent);
  font-size: 1.2rem;
}
.ds-citation__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  color: var(--ds-accent-deep);
}
.ds-citation__verified::before {
  content: '✓';
  font-weight: 700;
}

@container (max-width: 720px) { /* if placed in a container with container-type */
  .ds-citation { grid-template-columns: 1fr; }
  .ds-citation__arrow { display: none; }
}
@media (max-width: 720px) {
  .ds-citation { grid-template-columns: 1fr; }
  .ds-citation__arrow {
    min-width: auto;
    height: 2.5rem;
    margin-block: var(--ds-space-2xs);
  }
  .ds-citation__arrow::before {
    top: 50%;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .ds-citation__arrow::after { transform: rotate(90deg); }
}


/* 16. Marginalia & footnotes ----------------------------------------------
   On wide screens, marginalia floats in the left margin. On narrow,
   it collapses inline as a small block.
--------------------------------------------------------------------------- */

.ds-margin {
  position: relative;
}
.ds-margin__note {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-xs);
  line-height: 1.45;
  color: var(--ds-ink-3);
  border-left: 1px solid var(--ds-rule);
  padding-left: var(--ds-space-sm);
  margin-block: var(--ds-space-sm);
}
@media (min-width: 1080px) {
  .ds-margin__note {
    position: absolute;
    left: -260px;
    width: 220px;
    margin: 0;
    border-left: 0;
    padding-left: 0;
    text-align: right;
    border-right: 1px solid var(--ds-rule);
    padding-right: var(--ds-space-sm);
  }
}

/* Footnote — referenced inline by a small superscript number. */
.ds-fnref {
  font-family: var(--ds-font-mono);
  font-size: 0.65em;
  vertical-align: super;
  color: var(--ds-accent-deep);
  text-decoration: none;
  margin-left: 0.05em;
}
.ds-footnotes {
  margin-top: var(--ds-space-2xl);
  padding-top: var(--ds-space-md);
  border-top: 1px solid var(--ds-rule);
  list-style: none;
  counter-reset: fn;
  display: grid;
  gap: var(--ds-space-sm);
}
.ds-footnotes > li {
  counter-increment: fn;
  display: grid;
  grid-template-columns: 1.5em 1fr;
  gap: var(--ds-space-xs);
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-3);
  line-height: 1.55;
}
.ds-footnotes > li::before {
  content: counter(fn);
  font-family: var(--ds-font-mono);
  font-size: 0.85em;
  color: var(--ds-accent-deep);
  font-variant-numeric: tabular-nums;
}


/* 17. Step list ------------------------------------------------------------ */

.ds-steps {
  display: grid;
  gap: var(--ds-space-lg);
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.ds-steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4em 1fr;
  gap: var(--ds-space-md);
  padding-block: var(--ds-space-md);
  border-top: 1px solid var(--ds-rule);
}
.ds-steps > li:last-child { border-bottom: 1px solid var(--ds-rule); }
.ds-steps > li::before {
  content: '§ ' counter(step, decimal-leading-zero);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  color: var(--ds-accent-deep);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 0.35em;
}
.ds-steps__title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-lg);
  font-weight: 500;
  color: var(--ds-ink);
  letter-spacing: var(--ds-track-tight);
  margin-bottom: var(--ds-space-xs);
  line-height: 1.22;
}
.ds-steps__body { color: var(--ds-ink-2); font-size: var(--ds-text-sm); line-height: 1.55; }


/* 18. Comparison ----------------------------------------------------------- */

.ds-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}
.ds-compare__col {
  padding: var(--ds-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
}
.ds-compare__col + .ds-compare__col {
  border-left: 1px solid var(--ds-rule);
}
.ds-compare__head {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-2xs);
  font-weight: 700;
  letter-spacing: var(--ds-track-kicker);
  text-transform: uppercase;
  color: var(--ds-ink-3);
}
.ds-compare__col--right .ds-compare__head { color: var(--ds-accent-deep); }
.ds-compare__col h4 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-lg);
  color: var(--ds-ink);
  font-weight: 500;
  line-height: 1.22;
}
.ds-compare__col p {
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-2);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .ds-compare { grid-template-columns: 1fr; }
  .ds-compare__col + .ds-compare__col { border-left: 0; border-top: 1px solid var(--ds-rule); }
}


/* 19. Tabs ----------------------------------------------------------------- */

.ds-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-md);
}
.ds-tabs__list {
  display: flex;
  gap: var(--ds-space-md);
  border-bottom: 1px solid var(--ds-rule);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ds-tab {
  background: transparent;
  border: 0;
  padding: var(--ds-space-xs) 0;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-3);
  letter-spacing: var(--ds-track-wide);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-weight: 600;
  transition: color var(--ds-dur-fast), border-color var(--ds-dur-fast);
}
.ds-tab:hover { color: var(--ds-ink); }
.ds-tab[aria-selected='true'] {
  color: var(--ds-ink);
  border-bottom-color: var(--ds-accent);
}


/* 20. Accordion ----------------------------------------------------------- */

.ds-accordion {
  border-top: 1px solid var(--ds-rule);
}
.ds-accordion details {
  border-bottom: 1px solid var(--ds-rule);
}
.ds-accordion summary {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-sm);
  padding-block: var(--ds-space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-lg);
  font-weight: 500;
  color: var(--ds-ink);
  letter-spacing: var(--ds-track-tight);
}
.ds-accordion summary::-webkit-details-marker { display: none; }
.ds-accordion summary::before {
  content: '+';
  font-family: var(--ds-font-mono);
  color: var(--ds-accent-deep);
  font-weight: 400;
  width: 1em;
  transition: transform var(--ds-dur-base) var(--ds-ease-out);
  display: inline-block;
}
.ds-accordion details[open] > summary::before {
  content: '−';
}
.ds-accordion__body {
  padding-bottom: var(--ds-space-md);
  padding-left: calc(1em + var(--ds-space-sm));
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  line-height: 1.6;
  max-width: var(--ds-measure);
}


/* 21. Empty state --------------------------------------------------------- */

.ds-empty {
  text-align: center;
  padding: var(--ds-space-2xl);
  border: 1px dashed var(--ds-rule-strong);
  border-radius: var(--ds-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  align-items: center;
  color: var(--ds-ink-3);
}
.ds-empty__title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-lg);
  color: var(--ds-ink);
  font-weight: 500;
  letter-spacing: var(--ds-track-tight);
}
.ds-empty__sigil {
  font-family: var(--ds-font-mono);
  color: var(--ds-ink-3);
  font-size: var(--ds-text-2xs);
  letter-spacing: 0.1em;
}


/* 22. Toast --------------------------------------------------------------- */

.ds-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  background: var(--ds-ink);
  color: var(--ds-paper);
  padding: var(--ds-space-xs) var(--ds-space-md);
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-sm);
  letter-spacing: var(--ds-track-snug);
  box-shadow: var(--ds-shadow-soft);
}
.ds-toast::before {
  content: '✓';
  color: var(--ds-mark-bg);
  font-weight: 700;
}


/* 23. Hero variants ------------------------------------------------------- */

/* Editorial hero — type-driven, no orbs/glows. */
.ds-hero {
  padding-block: var(--ds-space-4xl) var(--ds-space-3xl);
  display: grid;
  gap: var(--ds-space-xl);
  position: relative;
}
.ds-hero__kicker {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
}
.ds-hero__kicker::after {
  content: '';
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: var(--ds-rule);
}
.ds-hero__title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ds-ink);
  text-wrap: balance;
  max-width: 22ch;
}
.ds-hero__title em {
  font-style: italic;
  color: var(--ds-accent-deep);
  font-weight: 400;
}

.ds-hero__alt {
  display: block;
  font-family: var(--ds-font-display);
  font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.25rem);
  font-weight: 400;
  font-style: italic;
  color: var(--ds-ink-3);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: var(--ds-space-xs);
}

/* Typewriter — rotating brand name in the hero headline. */
.ds-typewriter {
  font-style: italic;
  color: var(--ds-accent-deep);
  font-weight: 400;
  white-space: nowrap;
  display: inline-block;
}
.ds-typewriter__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.85em;
  background: var(--ds-accent);
  margin-left: 0.08em;
  vertical-align: -0.05em;
  animation: ds-caret-blink 1s steps(1) infinite;
}
@keyframes ds-caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-typewriter__caret { animation: none; opacity: 0.6; }
}
.ds-hero__lede {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-md);
  color: var(--ds-ink-2);
  line-height: 1.5;
  max-width: 58ch;
  text-wrap: pretty;
}
.ds-hero__actions {
  display: flex;
  gap: var(--ds-space-sm);
  flex-wrap: wrap;
  align-items: center;
}
.ds-hero__meta {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-3);
  display: flex;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  align-items: center;
}
.ds-hero__meta strong { color: var(--ds-ink); font-weight: 600; font-variant-numeric: tabular-nums; }


/* 24. Utilities ----------------------------------------------------------- */

.ds-rule { height: 1px; background: var(--ds-rule); border: 0; }
.ds-rule--strong { background: var(--ds-rule-strong); }

.ds-mt-xs { margin-top: var(--ds-space-xs); }
.ds-mt-sm { margin-top: var(--ds-space-sm); }
.ds-mt-md { margin-top: var(--ds-space-md); }
.ds-mt-lg { margin-top: var(--ds-space-lg); }
.ds-mt-xl { margin-top: var(--ds-space-xl); }

.ds-text-center { text-align: center; }
.ds-text-right  { text-align: right; }

.ds-mono { font-family: var(--ds-font-mono); }
.ds-tabular { font-variant-numeric: tabular-nums; }

.ds-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ds, .ds * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}