/* ════════════════════════════════════════════════════════════════
   Split-Domain Cognition — site stylesheet (Koher-cousin)
   Brand v2.0 (26 April 2026).

   The visual system is a close cousin of Koher's UI system.
   Same typography family (Fraunces / Source Serif 4 / IBM Plex Sans /
   IBM Plex Mono). Same warm-dark page architecture with cream
   reading-surface cards. SDC's distinct identity: sepia accent
   (Koher uses terracotta), the two-stroke mark, the canon voice.

   Source of truth for tokens: ../../../brand/design-system.md
   Reference for components: koher-ui.css (in koher repo)
   ════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&display=swap");


/* ── Tokens — dark mode (default) ────────────────────────────────── */

:root,
[data-md-color-scheme="slate"] {
  /* Brand surfaces.
     Note on the bg shift: Koher uses #2D3436 (warm-grey, faint cool
     cast — G+B > R). SDC sits on #2A2725 — same value family but the
     RGB hierarchy flips to R > G > B, which gives a sepia-ink cast.
     Differentiates the canon from the practice; same paper-on-table
     character, slightly older / heavier register. */
  --bg:              #2A2725;   /* page background — sepia-ink */
  --surface:         #F7F3ED;   /* reading-card surface (cream) */
  --surface-inner:   #EFEBE4;   /* nested surface inside cards */
  --surface-border:  #e5e2df;
  --border-dark:     #463F3B;

  /* Sepia accent — SDC's distinct identity */
  --accent:          #B85F2D;   /* warmer sepia, reads on dark */
  --accent-deep:     #6B3F1C;   /* canonical sepia for ink-on-paper */
  --accent-hover:    #9F4D1F;
  --accent-bg:       rgba(184, 95, 45, 0.12);
  --accent-bg-strong:rgba(184, 95, 45, 0.18);

  /* Ink — text on light surfaces. Same warmth shift as --bg so the
     sepia-ink register is consistent across light and dark modes. */
  --ink:             #2A2725;
  --ink2:            #4A4540;
  --ink3:            #6B635C;

  /* Light — text on dark surfaces */
  --light:           #F7F3ED;
  --light2:          #9A8F85;
  --light3:          #6b6560;

  /* Typography stacks */
  --font-display:    "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:       "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --font-label:      "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:       "IBM Plex Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Layout — single masthead grid, single reading column.
     Header, nav, body content all share --container as outer max-width
     and --gutter as horizontal padding. The reading column (--measure)
     is left-aligned within the masthead grid. */
  --container:       1200px;
  --measure:         720px;
  --measure-narrow:  640px;
  --gutter:          24px;

  /* Material token overrides */
  --md-default-fg-color:          var(--light);
  --md-default-fg-color--light:   var(--light2);
  --md-default-fg-color--lighter: var(--light3);
  --md-default-fg-color--lightest:var(--border-dark);
  --md-default-bg-color:          var(--bg);
  --md-primary-fg-color:          var(--bg);
  --md-primary-bg-color:          var(--light);
  --md-accent-fg-color:           var(--accent);
  --md-accent-fg-color--transparent: var(--accent-bg);
  --md-typeset-color:             var(--light);
  --md-typeset-a-color:           var(--accent);
  --md-typeset-mark-color:        var(--accent-bg);
  --md-code-bg-color:             #211E1C;
  --md-code-fg-color:             var(--light);
  --md-footer-bg-color:           var(--bg);
  --md-footer-bg-color--dark:     var(--bg);
  --md-footer-fg-color:           var(--light2);
  --md-footer-fg-color--light:    var(--light3);
  --md-footer-fg-color--lighter:  var(--light3);
}


/* ── Tokens — light mode (toggle) ────────────────────────────────── */
/* The page-rim (--page-bg) flips to cream; the reading-card surface
   stays on white so the cards still read distinctly. The header,
   nav, hero, and footer hold the warm-dark band in BOTH modes —
   they are SDC's signature, not a mode-dependent decoration. */

[data-md-color-scheme="default"] {
  --page-bg:         #F7F3ED;   /* cream rim */
  --surface:         #FFFFFF;
  --surface-inner:   #FAF7F0;
  --accent-deep:     #6B3F1C;
  --accent-bg:       rgba(107, 63, 28, 0.08);
  --accent-bg-strong:rgba(107, 63, 28, 0.14);

  --md-default-fg-color:          var(--ink);
  --md-default-fg-color--light:   var(--ink2);
  --md-default-fg-color--lighter: var(--ink3);
  --md-default-bg-color:          var(--page-bg);
  --md-typeset-color:             var(--ink);
  --md-typeset-a-color:           var(--accent-deep);
  --md-code-bg-color:             #EEE9DC;
  --md-code-fg-color:             var(--ink2);
  --md-footer-bg-color:           var(--bg);
  --md-footer-bg-color--dark:     var(--bg);
  --md-footer-fg-color:           var(--light2);
}

/* Default scheme = dark, --page-bg same as --bg */
:root,
[data-md-color-scheme="slate"] {
  --page-bg: var(--bg);
}


/* ── Reset ───────────────────────────────────────────────────────── */

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

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, .md-typeset {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
}


/* ── Typography ──────────────────────────────────────────────────── */

.md-typeset h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 24px 0;
  padding: 0;
  border-bottom: none;
}

.md-typeset h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 48px 0 16px 0;
  padding: 0;
  border: none;
}

.md-typeset h2:first-child,
.md-typeset > h1 + h2 {
  margin-top: 16px;
}

/* When a markdown <hr> precedes an h2, tighten the gap so the rule
   is the section break, not a separate visual punctuation. */
.md-typeset hr + h2 {
  margin-top: 24px;
}

.md-typeset h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  margin: 36px 0 10px 0;
}

.md-typeset h4 {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 28px 0 8px 0;
}

.md-typeset p {
  margin: 0 0 18px 0;
  color: inherit;
}

.md-typeset strong {
  font-weight: 600;
  color: var(--ink);
}

.md-typeset em { font-style: italic; }

/* Links */
.md-typeset a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-deep) 35%, transparent);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Lists */
.md-typeset ul, .md-typeset ol {
  margin: 0 0 18px 22px;
  color: inherit;
}
.md-typeset li { margin-bottom: 6px; }
.md-typeset li > ul, .md-typeset li > ol { margin-top: 6px; margin-bottom: 6px; }

/* Blockquotes — narrative-bar pattern from Koher */
.md-typeset blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  color: var(--ink2);
  font-style: italic;
  margin: 24px 0;
  padding: 14px 18px 14px 20px;
  border-radius: 0 4px 4px 0;
}

/* Horizontal rule */
.md-typeset hr {
  border: 0;
  border-top: 1px solid var(--surface-border);
  margin: 40px 0;
}

/* Code */
.md-typeset code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface-inner);
  color: var(--ink2);
  padding: 2px 6px;
  border-radius: 3px;
}

.md-typeset pre {
  background: var(--surface-inner);
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  padding: 18px 20px;
  margin: 18px 0;
}

.md-typeset pre > code {
  background: transparent;
  padding: 0;
  font-size: 0.92em;
  line-height: 1.65;
  color: inherit;
}

[data-md-color-scheme="slate"] .md-typeset pre,
[data-md-color-scheme="slate"] .md-typeset pre > code {
  background: #1E1B19;
  color: var(--light);
  border-color: var(--border-dark);
}

[data-md-color-scheme="default"] .md-typeset pre,
[data-md-color-scheme="default"] .md-typeset pre > code {
  background: var(--surface-inner);
  color: var(--ink2);
}

/* Tables */
.md-typeset table:not([class]) {
  font-size: 14.5px;
  border: none;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  background: transparent;
  margin: 20px 0;
}

.md-typeset table:not([class]) th {
  background: transparent;
  color: inherit;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding: 12px 12px;
  text-align: left;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--surface-border);
  padding: 11px 12px;
  vertical-align: top;
  color: inherit;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-top-color: var(--border-dark);
}

.md-typeset table:not([class]) tr:hover { background: var(--accent-bg); }


/* ── Page architecture: single-surface body ──────────────────────── */
/* The body is the surface — cream in light mode, dark in dark mode.
   Content centres at --measure. Header, hero, and footer hold the
   dark band as chrome; everything else uses body colour. No
   reading-card-on-rim, no wasted right column. Match Koher's
   single-surface marketing pages. */

[data-md-color-scheme="slate"] body,
[data-md-color-scheme="slate"] .md-main,
[data-md-color-scheme="slate"] .md-container {
  background: var(--bg);
  color: var(--light);
}

[data-md-color-scheme="default"] body,
[data-md-color-scheme="default"] .md-main,
[data-md-color-scheme="default"] .md-container {
  background: var(--surface);
  color: var(--ink);
}

.md-main__inner { margin-top: 0; }

/* Container width for .md-main__inner.md-grid consolidated above with
   header and nav into a single rule. Below: ensure .md-content fills
   its parent so the reading-column children align inside the masthead
   grid, not inside some narrower flex sub-area. */
.md-content {
  background: transparent;
  max-width: 100%;
  width: 100%;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Reading column (max-width: var(--measure)) is LEFT-aligned within the
   1200px masthead grid, so body H1/paragraphs share the same x-axis as
   the site title and the nav. Padding zeroed horizontally because the
   parent .md-main__inner.md-grid already supplies the 24px gutter. */
.md-content__inner,
.md-content > .md-content__inner,
[dir=ltr] .md-sidebar--primary:not([hidden])~.md-content>.md-content__inner,
[dir=ltr] .md-sidebar--secondary:not([hidden])~.md-content>.md-content__inner {
  max-width: var(--measure) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 56px 0 80px !important;
  background: transparent !important;
  border-radius: 0 !important;
  position: relative !important;
}

/* Material draws a 0.4rem spacer ::before .md-content__inner — kill it,
   it leaves a phantom gap above our hero/eyebrow region. */
.md-content__inner::before { display: none !important; content: none !important; }

@media (max-width: 600px) {
  .md-content__inner {
    padding: 40px 22px 64px;
  }
}

/* Body text colour follows the mode */
[data-md-color-scheme="slate"] .md-typeset { color: var(--light); }
[data-md-color-scheme="default"] .md-typeset { color: var(--ink); }

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 { color: var(--light); }

[data-md-color-scheme="slate"] .md-typeset strong { color: var(--light); }
[data-md-color-scheme="default"] .md-typeset strong { color: var(--ink); }

/* Hide heading edit/anchor link icons + Material prev/next chrome */
.md-content__button { display: none; }
.md-footer__inner { display: none; }


/* ── Header — dark Koher band ────────────────────────────────────── */

.md-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--light);
  box-shadow: none;
  border-bottom: 1px solid var(--border-dark);
  height: 56px;
}

.md-header[data-md-state="shadow"],
.md-header--shadow { box-shadow: none; }

/* Unified masthead grid — header, nav, main inner all use the same
   width (--container) and same gutter. The reading column inside
   main inner is left-aligned (--measure), so logo, "Home" nav, and
   the body H1 share an x-axis at the left edge of the masthead. The
   site title text sits one logo-width right of the logo (conventional
   pattern); the search box sits at the right edge of the masthead.

   IMPORTANT — Material's nav strip uses <nav class="md-tabs"><div class="md-grid">,
   NOT .md-tabs__inner. Target the .md-grid inside .md-tabs explicitly. */
.md-header__inner,
.md-tabs > .md-grid,
.md-tabs__inner.md-grid,
.md-main__inner.md-grid {
  max-width: var(--container) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 var(--gutter) !important;
  box-sizing: border-box !important;
}

.md-header__inner {
  height: 56px;
}

.md-header__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--light);
  margin-left: 4px;
  display: flex;
  align-items: center;
}

/* Material slides between two topics — the site name and the current
   page title — via a position:absolute + transform animation. With
   page titles like "Animal rights and veganism — SDC variant v1.0",
   the slide creates a "title floating mid-header" effect. We freeze
   the header to a single topic: always the site name. */
.md-header__title .md-header__ellipsis {
  position: relative;
  height: 2.4rem;
  line-height: 2.4rem;
  display: flex;
  align-items: center;
}

.md-header__title .md-header__topic {
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  font-weight: 600;
}

/* Hide the page-topic (second topic). Only the site name shows. */
.md-header__title .md-header__topic[data-md-component="header-topic"] {
  display: none !important;
}

/* Wordmark anchor (overrides/partials/header.html) wraps the site name in a
   link to home on non-index pages. Inherit colour and weight from the
   surrounding topic; never underline. */
.md-header__title .md-header__home-link,
.md-header__title .md-header__home-link:visited {
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.md-header__title .md-header__home-link:hover,
.md-header__title .md-header__home-link:focus {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}

/* Drawer button hidden on ALL viewports — top nav handles navigation.
   Logo VISIBLE at the left edge of the masthead, anchoring the column.
   Title sits next to it. Body content (H1, paragraphs) aligns with
   the logo's left edge — and so the title text is offset rightward
   by the logo width + a small gap, which is the conventional pattern. */
.md-header__button[for="__drawer"],
label.md-header__button[for="__drawer"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.md-header__button.md-logo {
  display: inline-flex !important;
  align-items: center;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  height: 56px;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 22px !important;
  width: auto !important;
  fill: var(--light) !important;
  filter: none !important;
  display: block;
}

.md-header__title {
  margin-left: 0 !important;
}

/* Theme toggle + search icon as muted */
.md-header__button.md-icon {
  color: var(--light2);
}

.md-header__button.md-icon:hover {
  color: var(--light);
}

/* Hide the drawer trigger on desktop (we have top nav instead) */
@media screen and (min-width: 60em) {
  label.md-header__button[for="__drawer"] { display: none; }
}

/* Search box — discreet inside dark header */
.md-search__form {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  border-radius: 4px;
  height: 32px;
  transition: background 0.15s, border-color 0.15s;
}
.md-search__form:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--border-dark);
}
.md-search__form:focus-within {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent);
}
.md-search__input {
  color: var(--light);
  font-family: var(--font-label);
  font-size: 13px;
}
.md-search__input::placeholder {
  color: var(--light3);
  font-style: normal;
}
.md-search__icon { color: var(--light3); }


/* ── Top navigation strip — IBM Plex Sans labels ─────────────────── */

.md-tabs {
  background: var(--bg);
  color: var(--light2);
  border-bottom: 1px solid var(--border-dark);
  height: 44px;
  line-height: 44px;
  overflow: hidden;
}

/* .md-tabs__inner.md-grid sizing consolidated in the unified container
   rule above (with header and main inner). */

.md-tabs__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.md-tabs__list::-webkit-scrollbar { display: none; }

.md-tabs__item {
  height: 44px;
  padding: 0;
  margin: 0;
}

.md-tabs__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin: 0;
  padding: 0;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.005em;
  color: var(--light2);
  opacity: 1;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.md-tabs__link:hover {
  color: var(--light);
  border-bottom-color: var(--border-dark);
}

.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: var(--light);
  border-bottom-color: var(--accent);
}


/* ── Sidebars hidden on desktop ──────────────────────────────────── */

@media screen and (min-width: 60em) {
  .md-sidebar.md-sidebar--primary,
  .md-sidebar.md-sidebar--secondary {
    display: none;
  }
}

/* Mobile drawer styling, when shown */
.md-nav { font-size: 14px; font-family: var(--font-body); }

.md-nav__title {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light2);
  background: transparent;
  padding-top: 0;
}

.md-nav__item .md-nav__link {
  color: var(--light2);
  margin: 0.18em 0;
}
.md-nav__item .md-nav__link--active { color: var(--accent); font-weight: 600; }
.md-nav__item .md-nav__link:hover { color: var(--light); }


/* ── Footer ──────────────────────────────────────────────────────── */

.md-footer {
  background: var(--bg);
  color: var(--light2);
  border-top: 1px solid var(--border-dark);
}

.md-footer-meta {
  background: var(--bg);
  color: var(--light3);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
}

.md-footer-meta.md-typeset a {
  color: var(--light2);
  border-bottom-color: transparent;
}
.md-footer-meta.md-typeset a:hover {
  color: var(--light);
  border-bottom-color: var(--light2);
}

.md-footer-meta__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
}


/* ════════════════════════════════════════════════════════════════
   COMPONENTS
   ════════════════════════════════════════════════════════════════ */


/* ── Region eyebrow + title pattern (Koher signature) ────────────── */

.md-typeset .eyebrow,
.md-typeset .region-eyebrow,
.md-typeset .sdc-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}


/* ── Hero (home page) ────────────────────────────────────────────── */
/* Hero sits inside the body with bigger type and a CTA row. No
   inverted-band trick — the body bg already carries the page
   register, so the hero is just a section that opens larger. */

/* Hero fills the viewport on first paint so nothing else (paragraphs,
   figures, cards) appears above the fold. The hero figure now lives
   OUTSIDE this section in the markdown — it follows naturally below.
   On the homepage the masthead header is hidden (see body:has(.sdc-hero)
   rule above), so the math is: nav (~44px) + content top padding
   (~56px) = ~100px to subtract from 100vh. */
.md-typeset .sdc-hero {
  margin: 0 0 56px 0;
  padding: 8px 0 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - 100px);
}

@media (max-width: 600px) {
  .md-typeset .sdc-hero {
    min-height: calc(100vh - 80px);
  }
}

/* On the HOME PAGE (detected by the presence of .sdc-hero):
   1. The header band (site title + search) is HIDDEN. The hero block
      itself is the masthead — the title is the H1, no other chrome.
   2. The reading column (.md-content__inner) is centred in the
      masthead grid, so the page reads as a balanced, single-column
      landing.
   3. The hero (eyebrow, H1, lede paragraph, CTAs) is text-centred.
   Variant + documentation pages keep the header and the left-aligned
   reading column.
   Uses :has() — supported in all modern browsers. */

/* Hide ONLY the title + search row on the homepage. The nav strip
   (.md-tabs) is a sibling inside .md-header in Material's structure;
   collapsing the wrapper would have killed nav too. */
body:has(.sdc-hero) .md-header__inner {
  display: none;
}

/* Trim the now-empty header chrome so it doesn't leave a 56px gap or
   a stray border above the nav. The nav itself is preserved. */
body:has(.sdc-hero) .md-header {
  height: auto;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Match the same sidebar-prefixed selector list used to LEFT-align the
   reading column elsewhere — otherwise that earlier !important rule
   wins on specificity and the column stays glued to the left of the
   masthead grid even with this :has() override in place. */
.md-content__inner:has(.sdc-hero),
.md-content > .md-content__inner:has(.sdc-hero),
[dir=ltr] .md-sidebar--primary:not([hidden])~.md-content>.md-content__inner:has(.sdc-hero),
[dir=ltr] .md-sidebar--secondary:not([hidden])~.md-content>.md-content__inner:has(.sdc-hero) {
  margin-left: auto !important;
  margin-right: auto !important;
}

.md-typeset .sdc-hero,
.md-typeset .sdc-hero .sdc-eyebrow,
.md-typeset .sdc-hero h1,
.md-typeset .sdc-hero p {
  text-align: center;
}

.md-typeset .sdc-hero .sdc-cta-row {
  justify-content: center;
}

.md-typeset .sdc-hero p {
  margin-left: auto;
  margin-right: auto;
}

[data-md-color-scheme="default"] .md-typeset .sdc-hero {
  border-bottom-color: var(--surface-border);
}

.md-typeset .sdc-hero .sdc-eyebrow {
  color: var(--accent);
  margin-bottom: 14px;
}

.md-typeset .sdc-hero h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 22px 0;
  padding: 0;
  border: none;
}

[data-md-color-scheme="slate"] .md-typeset .sdc-hero h1 { color: var(--light); }
[data-md-color-scheme="default"] .md-typeset .sdc-hero h1 { color: var(--ink); }

.md-typeset .sdc-hero p {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.55;
  max-width: 580px;
  margin: 0 0 30px 0;
  font-weight: 400;
}

[data-md-color-scheme="slate"] .md-typeset .sdc-hero p { color: var(--light); }
[data-md-color-scheme="default"] .md-typeset .sdc-hero p { color: var(--ink2); }

[data-md-color-scheme="slate"] .md-typeset .sdc-hero p strong { color: var(--accent); font-weight: 600; }
[data-md-color-scheme="default"] .md-typeset .sdc-hero p strong { color: var(--accent-deep); font-weight: 600; }

.sdc-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

@media (max-width: 600px) {
  .md-typeset .sdc-hero h1 { font-size: 36px; }
  .md-typeset .sdc-hero p { font-size: 17px; }
}


/* ── Buttons ─────────────────────────────────────────────────────── */
/* Specificity .md-typeset a.sdc-btn so we win against the .md-typeset a
   link styling inherited from the typography section. */

.md-typeset a.sdc-btn,
.md-typeset .sdc-btn,
a.sdc-btn,
.sdc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 12px 22px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
}

.md-typeset a.sdc-btn-primary,
.md-typeset .sdc-btn-primary,
a.sdc-btn-primary,
.sdc-btn-primary {
  background: var(--accent);
  color: #fff !important;
  border-color: var(--accent);
}
.md-typeset a.sdc-btn-primary:hover,
.md-typeset .sdc-btn-primary:hover,
a.sdc-btn-primary:hover,
.sdc-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff !important;
}

[data-md-color-scheme="slate"] .md-typeset a.sdc-btn-outline,
[data-md-color-scheme="slate"] .md-typeset .sdc-btn-outline,
[data-md-color-scheme="slate"] a.sdc-btn-outline,
[data-md-color-scheme="slate"] .sdc-btn-outline {
  background: transparent;
  color: var(--light) !important;
  border-color: var(--border-dark);
}

[data-md-color-scheme="default"] .md-typeset a.sdc-btn-outline,
[data-md-color-scheme="default"] .md-typeset .sdc-btn-outline,
[data-md-color-scheme="default"] a.sdc-btn-outline,
[data-md-color-scheme="default"] .sdc-btn-outline {
  background: transparent;
  color: var(--ink) !important;
  border-color: var(--surface-border);
}

.md-typeset a.sdc-btn-outline:hover,
.md-typeset .sdc-btn-outline:hover,
a.sdc-btn-outline:hover,
.sdc-btn-outline:hover {
  color: var(--accent) !important;
  border-color: var(--accent);
}

/* Link arrow */
.sdc-link-arrow {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: none !important;
}
.md-typeset a.sdc-link-arrow { border-bottom: none; }
.sdc-link-arrow::after { content: '→'; transition: transform 0.15s ease; }
.sdc-link-arrow:hover::after { transform: translateX(3px); }


/* ── Cards (mode-aware: elevated surface in dark, white in light) ── */

.md-typeset .sdc-card,
.sdc-card {
  border: 1px solid;
  border-radius: 6px;
  padding: 24px 26px;
  margin: 0;
}

[data-md-color-scheme="slate"] .md-typeset .sdc-card,
[data-md-color-scheme="slate"] .sdc-card {
  background: #211E1C;
  border-color: var(--border-dark);
  color: var(--light);
}

[data-md-color-scheme="default"] .md-typeset .sdc-card,
[data-md-color-scheme="default"] .sdc-card {
  background: #FFFFFF;
  border-color: var(--surface-border);
  color: var(--ink);
}

.sdc-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

[data-md-color-scheme="slate"] .sdc-card h3 { color: var(--light); }
[data-md-color-scheme="default"] .sdc-card h3 { color: var(--ink); }

.sdc-card p {
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 14px;
}

[data-md-color-scheme="slate"] .sdc-card p { color: var(--light2); }
[data-md-color-scheme="default"] .sdc-card p { color: var(--ink2); }

.sdc-card p:last-child { margin-bottom: 0; }

.sdc-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}


/* ── Card grid ───────────────────────────────────────────────────── */

.sdc-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 32px;
}

@media (max-width: 600px) {
  .sdc-card-grid { grid-template-columns: 1fr; }
}


/* ── Feature card (large, with eyebrow + body + link) ────────────── */

.md-typeset a.sdc-feature,
a.sdc-feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px;
  border: 1px solid;
  border-radius: 6px;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none !important;
}

[data-md-color-scheme="slate"] .md-typeset a.sdc-feature,
[data-md-color-scheme="slate"] a.sdc-feature {
  background: #211E1C;
  border-color: var(--border-dark) !important;
  color: var(--light) !important;
}

[data-md-color-scheme="default"] .md-typeset a.sdc-feature,
[data-md-color-scheme="default"] a.sdc-feature {
  background: #FFFFFF;
  border-color: var(--surface-border) !important;
  color: var(--ink) !important;
}

.md-typeset a.sdc-feature:hover,
a.sdc-feature:hover {
  border-color: var(--accent) !important;
}

.sdc-feature h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

[data-md-color-scheme="slate"] .sdc-feature h3 { color: var(--light); }
[data-md-color-scheme="default"] .sdc-feature h3 { color: var(--ink); }

.sdc-feature p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

[data-md-color-scheme="slate"] .sdc-feature p { color: var(--light2); }
[data-md-color-scheme="default"] .sdc-feature p { color: var(--ink2); }

.sdc-feature .sdc-link-arrow {
  margin-top: 4px;
}


/* ── Info / notice band — narrative-bar style ────────────────────── */

.md-typeset .sdc-notice,
.sdc-notice {
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 16px 20px;
  margin: 24px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink2);
  line-height: 1.6;
}

.sdc-notice strong { color: var(--accent-deep); }


/* ── Badge gallery — front and centre on adoption / adopt ───────── */

.sdc-badge-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 32px;
}

@media (max-width: 600px) {
  .sdc-badge-gallery { grid-template-columns: 1fr; }
}

.sdc-badge-card {
  border: 1px solid;
  border-radius: 6px;
  padding: 22px 22px 18px;
}

[data-md-color-scheme="slate"] .sdc-badge-card {
  background: #211E1C;
  border-color: var(--border-dark);
}

[data-md-color-scheme="default"] .sdc-badge-card {
  background: var(--surface-inner);
  border-color: var(--surface-border);
}

.sdc-badge-card__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.sdc-badge-card__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 14px 0;
}

[data-md-color-scheme="slate"] .sdc-badge-card__title { color: var(--light); }
[data-md-color-scheme="default"] .sdc-badge-card__title { color: var(--ink); }

.sdc-badge-card__pair {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sdc-badge-card__frame {
  padding: 14px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sdc-badge-card__frame--light { background: #ECE7DA; }
.sdc-badge-card__frame--dark  { background: #1E1C18; }

.sdc-badge-card__frame img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sdc-badge-card__hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  margin: 12px 0 0 0;
  line-height: 1.5;
}

[data-md-color-scheme="slate"] .sdc-badge-card__hint { color: var(--light3); }
[data-md-color-scheme="default"] .sdc-badge-card__hint { color: var(--ink3); }

/* Inline badge specimen — in body prose */
.md-typeset .badge-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
@media (max-width: 600px) {
  .md-typeset .badge-pair { grid-template-columns: 1fr; }
}

.md-typeset img.badge-frame {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  padding: 14px 16px;
  border-radius: 4px;
  margin: 0;
  box-shadow: none;
  vertical-align: top;
}

.md-typeset img.badge-frame.light { background: #ECE7DA; }
.md-typeset img.badge-frame.dark  { background: #1E1C18; }

.md-typeset img.badge {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  margin: 18px 0;
  padding: 14px 16px;
  background: #ECE7DA;
  border-radius: 4px;
}


/* ── Forms cards (the four forms of follow) ──────────────────────── */

.sdc-forms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 22px 0 32px;
}

@media (max-width: 600px) {
  .sdc-forms-grid { grid-template-columns: 1fr; }
}

.sdc-form-card {
  border: 1px solid;
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 18px 22px;
}

[data-md-color-scheme="slate"] .sdc-form-card {
  background: #211E1C;
  border-color: var(--border-dark);
  border-left-color: var(--accent);
}

[data-md-color-scheme="default"] .sdc-form-card {
  background: #FFFFFF;
  border-color: var(--surface-border);
  border-left-color: var(--accent);
}

.sdc-form-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

[data-md-color-scheme="slate"] .sdc-form-card__name { color: var(--light); }
[data-md-color-scheme="default"] .sdc-form-card__name { color: var(--ink); }

.sdc-form-card__weight {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}

.sdc-form-card__desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink2);
  margin: 0;
}


/* ── Declared-adoption card ──────────────────────────────────────── */

.sdc-declared {
  background: var(--surface-inner);
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  padding: 22px 24px;
  margin: 24px 0;
}

.sdc-declared__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.sdc-declared__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.sdc-declared__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink3);
}

.sdc-declared__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink3);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.sdc-declared__body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink2);
  margin-bottom: 10px;
}


/* ════════════════════════════════════════════════════════════════
   ADOPT PAGE — form
   ════════════════════════════════════════════════════════════════ */

.adopt-app { margin: 28px 0 0; }

.adopt-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.adopt-form .is-hidden { display: none !important; }

.adopt-step {
  border: 1px solid var(--surface-border);
  margin: 0;
  padding: 22px 24px;
  background: #fff;
  border-radius: 6px;
}

.adopt-step legend {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0;
  margin: 0 0 6px 0;
}

.adopt-step__hint {
  font-family: var(--font-body);
  color: var(--ink3);
  font-size: 14.5px;
  font-style: italic;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.adopt-step__hint--small { font-size: 13px; margin-top: 6px; }

.adopt-radio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 540px) {
  .adopt-radio-grid { grid-template-columns: 1fr; }
}

.adopt-radio {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface-inner);
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
}

.adopt-radio:hover { border-color: var(--ink3); }

.adopt-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.adopt-radio:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: inset 3px 0 0 var(--accent);
}

.adopt-radio--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: inline-flex;
  margin-right: 12px;
}

.adopt-radio__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

.adopt-radio__hint {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink3);
  font-size: 13.5px;
  line-height: 1.5;
}

.adopt-theme-toggle { display: flex; flex-wrap: wrap; gap: 0; }

.adopt-form select,
.adopt-form input[type="text"],
.adopt-form input[type="email"],
.adopt-form input[type="url"],
.adopt-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-inner);
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  padding: 10px 12px;
  box-sizing: border-box;
  line-height: 1.5;
}

.adopt-form textarea {
  font-family: var(--font-mono);
  font-size: 13.5px;
}

.adopt-form select:focus,
.adopt-form input:focus,
.adopt-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}

.adopt-preview {
  background: var(--surface-inner);
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  padding: 22px 24px;
}

.adopt-preview h3,
.adopt-embed h3,
.adopt-selfcheck h3,
.adopt-submit h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px 0;
  border: none;
}

.adopt-preview__frame {
  display: inline-block;
  padding: 14px 18px;
  border-radius: 4px;
  margin: 0 0 12px 0;
}

.adopt-preview__frame--light { background: #ECE7DA; }
.adopt-preview__frame--dark  { background: #1E1C18; }

.adopt-preview__frame img {
  display: block;
  width: 280px;
  height: auto;
}

.adopt-preview__url {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink3);
  margin: 0;
  font-style: italic;
}

.adopt-preview__url code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-style: normal;
  background: #fff;
  padding: 2px 6px;
  word-break: break-all;
  border: 1px solid var(--surface-border);
  border-radius: 3px;
  color: var(--ink2);
}

.adopt-embed {
  background: #fff;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  padding: 22px 24px;
}

.adopt-code-block {
  position: relative;
  margin-bottom: 14px;
}

.adopt-code-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 6px;
}

.adopt-code-block textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-inner);
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  padding: 11px 13px;
  resize: vertical;
  color: var(--ink2);
  line-height: 1.55;
}

.adopt-copy {
  position: absolute;
  top: 24px;
  right: 8px;
  background: #fff;
  border: 1px solid var(--surface-border);
  color: var(--ink3);
  padding: 4px 10px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 3px;
  transition: border-color 0.15s, color 0.15s;
}

.adopt-copy:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.adopt-selfcheck {
  background: #fff;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  padding: 22px 24px;
}

.adopt-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px dotted var(--surface-border);
}

.adopt-checkbox:last-child { border-bottom: none; }

.adopt-checkbox input[type="checkbox"] {
  margin-top: 5px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.adopt-checkbox__text {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}

.adopt-submit {
  background: #fff;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  padding: 22px 24px;
}

.adopt-field {
  margin-bottom: 14px;
}

.adopt-field label {
  display: block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 5px;
}

.adopt-field__optional {
  font-weight: 400;
  font-style: italic;
  color: var(--ink3);
  font-size: 12.5px;
}

.adopt-field--review label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 8px;
}

.adopt-declaration-preview {
  background: var(--surface-inner);
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink2);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

.adopt-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin-top: 18px;
}

.adopt-btn {
  align-self: flex-start;
  padding: 12px 28px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s;
}

.adopt-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.adopt-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.adopt-status {
  font-family: var(--font-body);
  color: var(--ink3);
  font-style: italic;
  font-size: 14px;
  margin: 0;
  min-height: 1.3em;
}

.adopt-form--submitted .adopt-step,
.adopt-form--submitted .adopt-submit {
  opacity: 0.55;
  pointer-events: none;
}

.adopt-form--submitted .adopt-status {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}


/* ── Drop cap on the preamble (the one decorative move) ──────────── */

body[data-md-url$="/preamble/"] .md-content__inner > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.2em;
  line-height: 0.86;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
  font-optical-sizing: auto;
}


/* ════════════════════════════════════════════════════════════════
   FIGURES — SVG plates, glyphs, ornaments
   The site is text-heavy by intent; figures appear at section
   thresholds to break density and argue visually. They inherit
   colour via currentColor; sepia (#B85F2D) is hard-coded as the
   single accent so they read on both dark and light backgrounds.
   ════════════════════════════════════════════════════════════════ */

.md-typeset .sdc-figure {
  margin: 32px 0 28px;
  display: block;
}

.md-typeset .sdc-figure svg,
.md-typeset .sdc-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Plates — full-width editorial figures (split, collapse, protocol, forms).
   No background, no borders. The figure stands alone, the caption is a
   running gloss. Consistent treatment with the hero figure. */
.md-typeset .sdc-plate,
.md-typeset .sdc-hero-figure {
  margin: 36px 0 28px;
  padding: 0;
  background: transparent;
  border: none;
  position: relative;
}

[data-md-color-scheme="slate"] .md-typeset .sdc-plate,
[data-md-color-scheme="slate"] .md-typeset .sdc-hero-figure {
  color: var(--light);
}

[data-md-color-scheme="default"] .md-typeset .sdc-plate,
[data-md-color-scheme="default"] .md-typeset .sdc-hero-figure {
  color: var(--ink);
}

.md-typeset .sdc-plate svg {
  display: block;
  width: 100%;
  height: auto;
}

.md-typeset .sdc-plate-caption {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: inherit;
  opacity: 0.72;
  margin: 16px 0 0 0;
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.md-typeset .sdc-plate-caption strong {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-right: 8px;
}

/* Glyphs — small marks, used as variant-card decorations and inline spots */
.md-typeset .sdc-glyph {
  display: inline-block;
  width: 56px;
  height: 56px;
  vertical-align: middle;
  color: inherit;
}

.md-typeset .sdc-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Variant page header — glyph + title */
.md-typeset .sdc-variant-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: 0 0 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid;
}

[data-md-color-scheme="slate"] .md-typeset .sdc-variant-head { border-color: var(--border-dark); }
[data-md-color-scheme="default"] .md-typeset .sdc-variant-head { border-color: var(--surface-border); }

.md-typeset .sdc-variant-head__glyph {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  line-height: 0;
}

.md-typeset .sdc-variant-head__glyph svg,
.md-typeset .sdc-variant-head__glyph img {
  width: 100%;
  height: 100%;
  display: block;
}

.md-typeset .sdc-variant-head__title {
  flex: 1;
}

.md-typeset .sdc-variant-head__title h1 {
  margin: 4px 0 0 0;
  padding: 0;
  border: none;
}

.md-typeset .sdc-variant-head__title .sdc-eyebrow {
  margin: 0;
}

@media (max-width: 600px) {
  .md-typeset .sdc-variant-head { gap: 14px; }
  .md-typeset .sdc-variant-head__glyph { flex: 0 0 56px; width: 56px; height: 56px; }
}

/* Card glyph — appears in variant card top-left */
.sdc-feature__glyph {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 0 0 4px 0;
  color: inherit;
  line-height: 0;
}

.sdc-feature__glyph svg,
.sdc-feature__glyph img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Ornament rule — replaces some hr breaks for richer rhythm */
.md-typeset .sdc-ornament {
  display: block;
  width: 100%;
  max-width: 360px;
  height: 18px;
  margin: 40px auto;
  color: inherit;
  opacity: 0.85;
}

.md-typeset .sdc-ornament svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* ════════════════════════════════════════════════════════════════
   Hero — ensure dark-mode contrast and add visual layer behind
   ════════════════════════════════════════════════════════════════ */

/* Hero is the dark box on the homepage; in dark mode its text is
   already var(--light), but we re-assert it strongly here so it
   never flips to ink under any reset. The h1 and subtitle stay
   white-cream regardless. */

[data-md-color-scheme="slate"] .md-typeset .sdc-hero,
[data-md-color-scheme="slate"] .md-typeset .sdc-hero h1,
[data-md-color-scheme="slate"] .md-typeset .sdc-hero p,
[data-md-color-scheme="slate"] .md-typeset .sdc-hero .sdc-eyebrow ~ p {
  color: var(--light) !important;
}

[data-md-color-scheme="slate"] .md-typeset .sdc-hero p strong {
  color: var(--accent) !important;
}

/* Belt-and-braces: every H1/H2/H3 in dark mode is cream. No exceptions. */
html[data-md-color-scheme="slate"] .md-typeset h1,
html[data-md-color-scheme="slate"] .md-typeset h2,
html[data-md-color-scheme="slate"] .md-typeset h3,
body[data-md-color-scheme="slate"] .md-typeset h1,
body[data-md-color-scheme="slate"] .md-typeset h2,
body[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--light) !important;
}

html[data-md-color-scheme="slate"] .md-typeset strong,
body[data-md-color-scheme="slate"] .md-typeset strong {
  color: var(--light);
}

html[data-md-color-scheme="slate"] .md-typeset,
body[data-md-color-scheme="slate"] .md-typeset {
  color: var(--light);
}

/* Inline figures inherit text colour. Force the hero figure to use cream
   in dark mode so currentColor strokes/fills render readably regardless
   of any cascade weirdness. */
html[data-md-color-scheme="slate"] .sdc-hero-figure svg,
html[data-md-color-scheme="slate"] .sdc-figure svg,
html[data-md-color-scheme="slate"] .sdc-variant-head svg,
html[data-md-color-scheme="slate"] .sdc-feature__glyph svg,
html[data-md-color-scheme="slate"] .sdc-ornament svg,
body[data-md-color-scheme="slate"] .sdc-hero-figure svg,
body[data-md-color-scheme="slate"] .sdc-figure svg,
body[data-md-color-scheme="slate"] .sdc-variant-head svg,
body[data-md-color-scheme="slate"] .sdc-feature__glyph svg,
body[data-md-color-scheme="slate"] .sdc-ornament svg {
  color: var(--light);
}

html[data-md-color-scheme="default"] .sdc-hero-figure svg,
html[data-md-color-scheme="default"] .sdc-figure svg,
html[data-md-color-scheme="default"] .sdc-variant-head svg,
html[data-md-color-scheme="default"] .sdc-feature__glyph svg,
html[data-md-color-scheme="default"] .sdc-ornament svg,
body[data-md-color-scheme="default"] .sdc-hero-figure svg,
body[data-md-color-scheme="default"] .sdc-figure svg,
body[data-md-color-scheme="default"] .sdc-variant-head svg,
body[data-md-color-scheme="default"] .sdc-feature__glyph svg,
body[data-md-color-scheme="default"] .sdc-ornament svg {
  color: var(--ink);
}

/* Both figures (hero and plate) are pinned to identical sizing rules
   so their widths and left-edges match exactly. No flex, no special
   sizing — plain block, full width of the reading column, SVG fills
   the block. */
.md-typeset .sdc-hero-figure,
.md-typeset .sdc-plate,
.md-typeset .sdc-figure {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 36px 0 28px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.md-typeset .sdc-hero-figure > svg,
.md-typeset .sdc-hero-figure > img,
.md-typeset .sdc-plate > svg,
.md-typeset .sdc-plate > img,
.md-typeset .sdc-figure > svg,
.md-typeset .sdc-figure > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

/* SVG text legibility — browsers default SVG text to font-weight: 400.
   For Fraunces / Source Serif 4 at small sizes on a dark background,
   that is too thin and reads pale. Boost weight site-wide. We apply
   to the text element directly so inline font-weight attributes (none
   set, in our SVGs) cannot override. */
.md-typeset .sdc-plate svg text,
.md-typeset .sdc-hero-figure svg text,
.md-typeset .sdc-figure svg text {
  font-weight: 500;
  paint-order: stroke fill;
}

/* Italic descriptive lines inside the SVGs use Fraunces italic; on
   small renders italic Fraunces gets even thinner. Preserve italic
   but at weight 500, not 400. */
.md-typeset .sdc-plate svg text[font-style="italic"],
.md-typeset .sdc-hero-figure svg text[font-style="italic"],
.md-typeset .sdc-figure svg text[font-style="italic"],
.md-typeset .sdc-plate svg text tspan[font-style="italic"],
.md-typeset .sdc-hero-figure svg text tspan[font-style="italic"],
.md-typeset .sdc-figure svg text tspan[font-style="italic"] {
  font-weight: 500;
}


/* ════════════════════════════════════════════════════════════════
   Dark-mode richness — fill in surfaces so nothing reads bare
   ════════════════════════════════════════════════════════════════ */

/* Body in dark mode gets a subtle warm-grain wash so the cream cards
   feel like reading-cards on warm paper rather than plates on a flat
   void. Negligible cost; high register. */

[data-md-color-scheme="slate"] body {
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(184,95,45,0.05), transparent 60%),
    radial-gradient(900px 500px at 105% 20%, rgba(184,95,45,0.04), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

/* Tables — give every row a tiny hover sepia in dark mode too */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  color: var(--light2);
}

/* Inline code — give it a touch more presence in dark */
[data-md-color-scheme="slate"] .md-typeset code {
  background: rgba(247, 243, 237, 0.08);
  color: var(--light);
  border: 1px solid rgba(247, 243, 237, 0.06);
}

/* Notice / blockquote — re-set against dark page */
[data-md-color-scheme="slate"] .md-typeset .sdc-notice,
[data-md-color-scheme="slate"] .md-typeset blockquote {
  background: rgba(184, 95, 45, 0.08);
  color: var(--light);
}

[data-md-color-scheme="slate"] .md-typeset .sdc-notice strong {
  color: var(--accent);
}

/* Declared adoption card — dark surface */
[data-md-color-scheme="slate"] .sdc-declared {
  background: #211E1C;
  border-color: var(--border-dark);
}

[data-md-color-scheme="slate"] .sdc-declared__name { color: var(--light); }
[data-md-color-scheme="slate"] .sdc-declared__date,
[data-md-color-scheme="slate"] .sdc-declared__meta { color: var(--light3); }
[data-md-color-scheme="slate"] .sdc-declared__body p { color: var(--light2); }

/* Form-card description — dark-mode body colour */
[data-md-color-scheme="slate"] .sdc-form-card__desc {
  color: var(--light2);
}

/* Adopt form — full dark-mode pass so the page is consistent */
[data-md-color-scheme="slate"] .adopt-step,
[data-md-color-scheme="slate"] .adopt-preview,
[data-md-color-scheme="slate"] .adopt-embed,
[data-md-color-scheme="slate"] .adopt-selfcheck,
[data-md-color-scheme="slate"] .adopt-submit {
  background: #211E1C;
  border-color: var(--border-dark);
  color: var(--light);
}

[data-md-color-scheme="slate"] .adopt-step__hint,
[data-md-color-scheme="slate"] .adopt-radio__hint,
[data-md-color-scheme="slate"] .adopt-status,
[data-md-color-scheme="slate"] .adopt-preview__url {
  color: var(--light3);
}

[data-md-color-scheme="slate"] .adopt-radio {
  background: #2D3436;
  border-color: var(--border-dark);
}

[data-md-color-scheme="slate"] .adopt-radio:hover {
  border-color: var(--light3);
}

[data-md-color-scheme="slate"] .adopt-radio:has(input[type="radio"]:checked) {
  background: rgba(184, 95, 45, 0.12);
  border-color: var(--accent);
}

[data-md-color-scheme="slate"] .adopt-radio__label {
  color: var(--light);
}

[data-md-color-scheme="slate"] .adopt-form select,
[data-md-color-scheme="slate"] .adopt-form input[type="text"],
[data-md-color-scheme="slate"] .adopt-form input[type="email"],
[data-md-color-scheme="slate"] .adopt-form input[type="url"],
[data-md-color-scheme="slate"] .adopt-form textarea,
[data-md-color-scheme="slate"] .adopt-declaration-preview,
[data-md-color-scheme="slate"] .adopt-code-block textarea {
  background: #1E1B19 !important;
  color: var(--light) !important;
  border-color: var(--border-dark) !important;
  caret-color: var(--accent);
}

/* Hard guarantee for the embed-code textareas — the JS populates these
   with markdown / html embed code; the text must read against the dark
   surface in dark mode without any cascade ambiguity. */
[data-md-color-scheme="slate"] #adopt-embed-md,
[data-md-color-scheme="slate"] #adopt-embed-html {
  background: #1E1B19 !important;
  color: var(--light) !important;
  -webkit-text-fill-color: var(--light) !important;
}

/* Self-check checkboxes — explicit accent + size so the tickbox is
   unmissable. */
.adopt-checkbox input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 18px;
  height: 18px;
  margin: 4px 0 0 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

[data-md-color-scheme="slate"] .adopt-form select:focus,
[data-md-color-scheme="slate"] .adopt-form input:focus,
[data-md-color-scheme="slate"] .adopt-form textarea:focus {
  background: #15120F;
  border-color: var(--accent);
}

[data-md-color-scheme="slate"] .adopt-field label {
  color: var(--light);
}

[data-md-color-scheme="slate"] .adopt-checkbox {
  border-bottom-color: var(--border-dark);
}

[data-md-color-scheme="slate"] .adopt-checkbox__text {
  color: var(--light);
}

[data-md-color-scheme="slate"] .adopt-copy {
  background: #1E1B19;
  border-color: var(--border-dark);
  color: var(--light2);
}

[data-md-color-scheme="slate"] .adopt-copy:hover {
  border-color: var(--accent);
  color: var(--accent);
}

[data-md-color-scheme="slate"] .adopt-preview__url code {
  background: #1E1B19;
  border-color: var(--border-dark);
  color: var(--light2);
}

/* Badge gallery: dark-mode hint text */
[data-md-color-scheme="slate"] .sdc-badge-card__hint { color: var(--light3); }

/* Drop cap on preamble — reads in both modes already (uses --accent),
   but re-tune size on dark so it doesn't dominate a single column. */

/* Selection — sepia wash, tuned for both modes */
::selection {
  background: var(--accent-bg-strong);
  color: var(--ink);
}

[data-md-color-scheme="slate"] ::selection {
  background: rgba(184, 95, 45, 0.35);
  color: var(--light);
}


/* ── Home variant: extra breathing room around the card grid ─────── */
/* Only the index uses .sdc-card-grid--home. The lone framing
   paragraph above and the cards below each get more vertical space
   so the page reads sparse rather than dense. */

.md-typeset .sdc-card-grid--home {
  margin-top: 96px;
  margin-bottom: 96px;
}

/* Push the lone framing paragraph that sits between the hero and the
   home card grid further down, so it lands well after the hero and
   well before the cards. */
.md-typeset .sdc-hero + p {
  margin-top: 48px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .md-typeset .sdc-card-grid--home { margin-top: 56px; margin-bottom: 56px; }
  .md-typeset .sdc-hero + p { margin-top: 28px; }
}


/* ── Responsive — final touches ──────────────────────────────────── */

@media (max-width: 600px) {
  body, .md-typeset { font-size: 16px; }
  .md-typeset h1 { font-size: 30px; }
  .md-typeset h2 { font-size: 22px; }
  .md-typeset h3 { font-size: 18px; }
  .sdc-cta-row { flex-direction: column; align-items: stretch; }
  .sdc-cta-row .sdc-btn { justify-content: center; }
}