:root {
  --ink: #14181d;
  --ink-2: #39424d;
  --muted: #66717e;
  --line: #e2e7ec;
  --line-2: #cfd6de;
  --bg: #ffffff;
  --soft: #f6f8fa;
  --soft-2: #eef2f6;
  --accent: #0a6a5f;
  --accent-soft: #e6f2f0;
  --accent-line: #7fb8b0;
  /* The hero leaf gradient, as variables so the mark can change state. */
  --leaf-1: #17907f;
  --leaf-2: #0a6a5f;
  --leaf-3: #064f47;
  --warn: #8a5a00;
  --warn-soft: #fdf4e3;
  --radius: 10px;
  --measure: 68ch;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Page to page. Same-origin navigations cross-fade instead of flashing white. Browsers without
   view transitions ignore all of this and navigate as they always did. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) {
    animation: fade-out 160ms cubic-bezier(0.4, 0, 1, 1) both;
  }
  ::view-transition-new(root) {
    animation: fade-in 260ms cubic-bezier(0, 0, 0.2, 1) both;
  }
}

@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); letter-spacing: -0.022em; }
h3 { font-size: 1.14rem; }
h4 { font-size: 0.95rem; }
p { margin: 0 0 1rem; max-width: var(--measure); }
ul, ol { max-width: var(--measure); }
strong { font-weight: 650; }

/* The opening line of each section carries the hero tagline's accent; later bold stays ink. */
main section.band > .wrap > p:first-of-type strong { color: var(--accent); }

/* Source links sit below the argument, so they stay quieter than the prose. */
main section.band > .wrap > p.evidence-link {
  font-size: 0.95rem; color: var(--muted); margin-top: 1.4rem;
}
.evidence-link a { color: var(--ink-2); text-decoration-color: var(--line-2); }
.evidence-link a:hover { color: var(--accent); text-decoration-color: currentColor; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

code, .mono { font-family: var(--mono); font-size: 0.88em; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 0.7rem 1rem; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */

.wrap { width: min(1120px, 100%); margin-inline: auto; padding-inline: var(--pad); }
.narrow { width: min(760px, 100%); margin-inline: auto; padding-inline: var(--pad); }

section[id] { scroll-margin-top: 5rem; }
.kv[id], .wrong[id] { scroll-margin-top: 6rem; }

.band { padding-block: clamp(3rem, 7vw, 5rem); }

.lede { font-size: 1.12rem; color: var(--ink-2); }
.note { font-size: 0.92rem; color: var(--muted); }

/* Section prose sits at the hero's scale on every page, so a heading is not twice the size of the
   text under it. Only prose directly inside a section: cards, panels and columns keep their density.
   The floor is 1.12rem rather than the hero's 1.05rem, which is below the 17px body size and would
   have made narrow screens smaller instead of larger. `main.narrow` rather than `main` so this beats
   `.lede`, which would otherwise leave a lede smaller than the paragraphs under it. */
main section.band > .wrap > p,
main section.band > .wrap > .scale-dimensions > div > p,
main.narrow > p { font-size: clamp(1.12rem, 2.2vw, 1.28rem); }

/* A section-level h3 has to clear the prose under it, which is now the hero size. Scoped, because
   every other h3 on the site sits inside a card or a tab panel and keeps its own smaller size. */
main section.band > .wrap > h3,
main.narrow > h3 { font-size: clamp(1.35rem, 2.6vw, 1.6rem); }

/* ---------- author page ---------- */

.author-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.author-head h1 { margin-top: 0; }
@media (max-width: 560px) { .author-head { grid-template-columns: 1fr; gap: 0.9rem; } }

/* The peacock feather belongs to the author, not to Clover. It appears only on this page. */
.feather { display: block; width: auto; }
.feather--lg { height: 118px; }
.feather--sm { height: 76px; margin: 0 auto 1rem; }

.verse { margin: 2.6rem 0 0; padding: 0; border: 0; text-align: center; }
.verse p[lang="sa"] {
  font-family: "Nirmala UI", "Noto Sans Devanagari", "Mangal", serif;
  font-size: 1.16rem; line-height: 1.9; color: var(--ink); margin: 0 0 0.8rem;
}
.verse__meaning {
  font-size: 0.95rem; color: var(--ink-2); margin: 0 auto;
  max-width: 46ch;
}
/* Carries the hero tagline's weight and accent colour, centred as a closing line.
   Selector is scoped to outrank the band paragraph rule above. */
main section.band > .wrap > p.verse__line {
  margin: 2.6rem auto 0; max-width: 44ch;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 600;
  line-height: 1.3; letter-spacing: -0.015em; color: var(--accent);
}

/* The page ends where it began: the same cycle, whole, in new green, with the line beneath it. */
.closing .wrap { text-align: center; }
.closing { padding-block: clamp(3.5rem, 9vw, 7rem); }
/* Hiding is delayed to the end of the fade so the leaf links leave the tab order once invisible;
   coming back is immediate, so the mark is visible while it fades in. */
:root.is-closing .pinned__mark {
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 600ms ease, visibility 0s 600ms;
}
.pinned__mark { transition: opacity 600ms ease, visibility 0s; }

/* ---------- the clover mark ---------- */
/* One <path id="clover-leaf"> lives in a hidden sprite at the top of the page. Every mark is that
   one leaf <use>d and rotated around (50, 44). No JS, no external assets. */

.clover-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.clover {
  display: block; flex: none;
  width: clamp(72px, 12vw, 112px); height: auto;
}
.clover__leaf { fill: none; stroke: var(--accent-line); stroke-width: 3; stroke-linejoin: round; }
.clover__leaf.is-filled { fill: var(--accent); stroke: var(--accent); stroke-width: 2; }
.clover__stem { fill: none; stroke: var(--accent-line); stroke-width: 3.5; stroke-linecap: round; }

/* Wider than the other marks because the hero clover carries a label on every leaf. */
.clover--hero { width: clamp(260px, 36vw, 400px); justify-self: center; margin-inline: auto; }

/* The closing mark keeps its own gradient, so the grey palette on :root cannot reach it. */
.clover--close { display: block; width: clamp(150px, 24vw, 240px); margin-inline: auto; }
.clover--close .clover__leaf.is-filled { fill: url(#leaf-revive); stroke: none; }
.clover--close .clover__vein { stroke: #d9ece8; }
.clover--brand { width: 26px; }

/* The three narrative marks: three leaves, then four, then five. */
.clover--mark { width: clamp(200px, 40vw, 420px); }

/* A leaf that is already part of the ordinary way of working. */
.clover__leaf.is-soft { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 2.5; }
/* The leaf that just arrived. */
.clover__leaf.is-new { fill: var(--accent); stroke: var(--accent); stroke-width: 2.5; }
/* Growth: dotted, because it has not arrived yet. */
.clover__leaf.is-next {
  fill: none; stroke: var(--accent-line); stroke-width: 2.5;
  stroke-dasharray: 5 4.5; stroke-linecap: round;
}

.clover__label {
  font-family: var(--font); font-size: 6px; font-weight: 650; letter-spacing: 0.02em;
  fill: var(--ink-2);
}

/* Each leaf carries its own stage description, so it is hoverable and reachable by keyboard. */
.clover__leaf-hit { cursor: pointer; outline: none; }
.clover__leaf-hit .clover__leaf,
.clover__leaf-hit .clover__label { transition: fill 160ms ease, stroke 160ms ease; }
/* The leaves already change colour with the reading position, so pointer and keyboard states outline
   the leaf instead of recolouring it. A fill change here would read as the active stage. */
.clover__leaf-hit:focus-visible .clover__label { fill: var(--ink); font-weight: 800; }

/* Only the hero mark is shaded and veined. The smaller marks stay flat. */
.clover--hero .clover__leaf.is-filled { fill: url(#leaf-fade); stroke: none; }

/* The cycle has two states and no shape change between them: healthy green while the framework is
   explained, and a restrained grey once the page turns to what the real world did with it. The
   answer section carries its own whole mark instead, so the pinned one fades rather than recovers. */
:root.is-real-world {
  --leaf-1: #777465;
  --leaf-2: #625d52;
  --leaf-3: #4c4741;
}
#leaf-fade stop { transition: stop-color 700ms ease; }
#leaf-fade stop:nth-of-type(1) { stop-color: var(--leaf-1); }
#leaf-fade stop:nth-of-type(2) { stop-color: var(--leaf-2); }
#leaf-fade stop:nth-of-type(3) { stop-color: var(--leaf-3); }
.clover__vein { fill: none; stroke: #ffffff; stroke-opacity: 0.5; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.clover__label--now { fill: var(--accent); font-weight: 700; }
.clover__label--next { fill: var(--muted); }

/* Closing question. The mark is black here and carries no labels. */
.clover--ink .clover__leaf { fill: var(--ink); stroke: var(--ink); stroke-width: 2; }
.clover--ink .clover__stem { stroke: var(--ink); }

.ask__q {
  margin-top: 2rem; font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.45;
  font-weight: 600; color: var(--ink); max-width: 44rem; text-wrap: balance;
}

/* ---------- the narrative arc ---------- */

.arc {
  display: grid; gap: 1.5rem 2.4rem; align-items: center; margin-top: 1.7rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .arc { grid-template-columns: minmax(0, 1fr); } }

.arc__mark { margin: 0; display: grid; justify-items: center; gap: 0.7rem; }
.arc__mark figcaption {
  font-size: 0.9rem; color: var(--muted); text-align: center; max-width: 34ch;
}
.arc__body > :last-child { margin-bottom: 0; }
.arc__body h3 { margin-bottom: 0.5rem; }
.arc__body ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.arc__body li { margin-bottom: 0.2rem; }

/* ---------- leaf sections ---------- */

.holds dt { flex: 0 0 5.5rem; }
.holds dd { padding-top: 0.1rem; }

.wrong { margin-top: 1.8rem; padding: 0.1rem 0 0.1rem 1.1rem; border-left: 3px solid var(--line-2); }
.wrong h3 {
  font-size: 0.83rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 0.6rem 0 0.5rem;
}
.wrong p { font-size: 0.97rem; color: var(--ink-2); }
.wrong p:last-child { margin-bottom: 0.6rem; }

/* Full-measure variants. The heading stays outside the columns so it cannot flow into one. */
.wrong__flow, .wrong__cols p { max-width: none; }
@media (min-width: 900px) {
  .wrong__flow, .wrong__cols { columns: 2; column-gap: 3rem; }
  .wrong__cols p { break-inside: avoid; }
  .wrong__cols p:last-child { margin-bottom: 0.6rem; }
}

/* Heading and lead on the left, the detail on the right. */
.split { display: grid; gap: 1.1rem 2.8rem; align-items: start; }
.split h3 { margin-top: 0; }
.split__lead > :last-child, .split__body > :last-child { margin-bottom: 0; }
.split > .split__body { margin-top: 0; }
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* ---------- header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.6rem; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 680; letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
  margin-right: auto; font-size: 1.0625rem;
}
.brand span { color: var(--accent); font-weight: 600; }
.site-nav { display: flex; gap: 0.35rem 1.15rem; flex-wrap: wrap; align-items: center; }
.site-nav a {
  color: var(--ink); text-decoration: none; font-size: 1.0625rem; font-weight: 600;
  padding: 0.3rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent-line); }

/* Menu toggle. Wide screens never see it; without JS it stays hidden and the nav stays open. */
.nav-toggle {
  display: none; align-items: center; gap: 0.55rem;
  background: none; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 0.42rem 0.7rem; font: inherit; font-size: 0.88rem; font-weight: 620;
  color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent-line); color: var(--accent); }
.nav-toggle__box { position: relative; display: block; width: 17px; height: 11px; }
.nav-toggle__box span,
.nav-toggle__box::before,
.nav-toggle__box::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-toggle__box::before { top: 0; }
.nav-toggle__box span { top: 4.5px; }
.nav-toggle__box::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::before { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::after { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 1023px) {
  .site-head .wrap { min-height: 3.2rem; gap: 0.6rem; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0; margin-top: 0.1rem; padding-bottom: 0.5rem; align-items: stretch; }
  .site-nav.is-open { display: flex; max-height: calc(100dvh - 4rem); overflow-y: auto; }
  .site-nav > a {
    font-size: 1rem; padding: 0.78rem 0.15rem;
    border-bottom: 1px solid var(--line); border-top: 0;
  }
  .site-nav > a:last-child { border-bottom: 0; }
  .site-nav > a:hover { border-bottom-color: var(--line); }
}

.no-js .nav-toggle { display: none; }
.no-js .site-nav { display: flex; }

/* ---------- hero ---------- */

.hero { padding-block: clamp(3rem, 9vw, 6rem) clamp(2.5rem, 6vw, 4rem); }
.hero h1 { max-width: 22ch; margin-bottom: 0.25em; }
.hero__tagline { max-width: 44ch; margin: 0 0 0.9rem; font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--accent); }
.hero .lede { max-width: 68ch; font-size: clamp(1.12rem, 2.2vw, 1.28rem); }

/* ---------- the five stages ---------- */
/* One section per stage. The pinned mark carries the highlight; these two rules are what app.js
   toggles on it, and they are kept here beside the sections that drive them. */
.story__leaf { transition: fill 0.25s ease; }
.story__label { transition: fill 0.25s ease, font-weight 0.25s ease; }

/* The unknown clover: the whole mark goes to ink on the closing stage. */
.pinned.is-ink .story__leaf { fill: var(--ink); }
.pinned.is-ink .story__label { fill: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .story__leaf, .story__label { transition: none; }
}
/* ---------- buttons ---------- */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.8rem; margin-top: 1.6rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.72rem 1.15rem; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--ink);
  font-size: 0.95rem; font-weight: 620; line-height: 1.2; text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { border-color: var(--accent-line); color: var(--accent); }
.btn--primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn--primary:hover { background: #085349; border-color: #085349; color: #fff; }
.btn--plain {
  border-color: transparent; background: none; color: var(--accent);
  padding-inline: 0.35rem;
}
.btn--plain:hover { border-color: transparent; color: #085349; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
  .actions { gap: 0.6rem; }
  .actions .btn { width: 100%; }
  .actions .btn--plain { width: auto; }
}

.hero__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem 2rem; align-items: center; }
@media (max-width: 620px) { .hero__top { grid-template-columns: 1fr; } }

/* One mark for the whole page. The sections stay full-bleed so their tint and rule still reach the
   edges; the mark rides above them in a zero-height sticky rail, and the text column is narrowed on
   the right by exactly the space the mark occupies. */
.pinned { position: relative; --mark-w: clamp(260px, 36vw, 400px); --mark-gap: 3rem; }
.pinned .wrap { padding-right: calc(var(--pad) + var(--mark-w) + var(--mark-gap)); }
/* Sticky at the vertical middle: 50vh rather than 50%, because a percentage inset on a sticky box
   resolves against the containing block, and .pinned is the whole page tall. The rail has no height,
   so the mark is pulled up by half its own to sit centred on that line. */
.pinned__mark {
  position: sticky; top: 50vh; z-index: 2; height: 0;
  width: min(1120px, 100%); margin-inline: auto; padding-inline: var(--pad);
  display: flex; justify-content: flex-end; align-items: flex-start;
}
/* .clover centres itself with auto margins, which in a flex row beats justify-content. */
.pinned__mark > svg { margin-inline: 0; width: var(--mark-w); transform: translateY(-50%); }
/* The turn happens inside the viewBox, around the leaves' own pivot at 50,44. Rotating the element
   instead would grow its box to the diagonal and push the page sideways. */
.clover__spin { will-change: transform; }

/* The one mark also serves the story: its leaf goes to ink as that step scrolls into view. */
.pinned__mark .story__leaf { transition: fill 0.25s ease; }
.pinned__mark .story__leaf.is-active { fill: var(--ink); }
.pinned__mark .story__label.is-active { fill: var(--ink); font-weight: 800; }

/* Pointer and keyboard states, last so they outline whichever leaf is under them in any season. */
:root .clover--hero .clover__leaf-hit:hover .clover__leaf {
  stroke: var(--ink-2);
  stroke-width: 2.25;
  stroke-dasharray: none;
}
:root .clover--hero .clover__leaf-hit:focus-visible .clover__leaf {
  stroke: var(--ink);
  stroke-width: 3.25;
  stroke-dasharray: none;
}

@media (max-width: 860px) {
  /* Above the text and pinned to the top bar, small enough to leave the page readable behind it.
     The header is 3.2rem here, so the band starts a little under it: at 3.6rem the page scrolled
     through the sliver between the two. Both are white, so the overlap is invisible, and it holds
     if the header grows. */
  .pinned .wrap { padding-right: var(--pad); }
  .pinned { --mark-w: clamp(110px, 30vw, 160px); }
  .pinned__mark {
    height: auto; top: 3rem; z-index: 5; justify-content: center;
    padding-block: 0.9rem 0.7rem;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .pinned__mark > svg { transform: none; }
  section.responsibility-band { scroll-margin-top: 12rem; }
}

.no-js .pinned__mark { position: static; height: auto; justify-content: center; }
.no-js .pinned__mark > svg { transform: none; }
.no-js .pinned .wrap { padding-right: var(--pad); }

/* ---------- grids & cards ---------- */

.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.3rem;
}
.card h3 { margin-bottom: 0.35rem; }
.card p { font-size: 0.95rem; color: var(--ink-2); margin-bottom: 0; max-width: none; }

.kv { margin: 0; }
.kv div { display: flex; gap: 0.6rem; padding: 0.42rem 0; border-top: 1px solid var(--line); font-size: 0.93rem; }
.kv div:first-child { border-top: 0; }
.kv dt { flex: 0 0 8.5rem; font-weight: 620; color: var(--ink); }
.kv dd { margin: 0; color: var(--ink-2); }
.kv--wide dt { flex-basis: 13.5rem; }

.diagram { margin: 1.6rem 0 0; }
.diagram img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.diagram figcaption { margin-top: 0.5rem; font-size: 0.86rem; color: var(--muted); }
.diagram + .diagram { margin-top: 1.2rem; }

@media (max-width: 620px) {
  .kv div { flex-direction: column; gap: 0.1rem; }
  .kv dt { flex: none; }
}

/* ---------- tabs (shared) ---------- */

.tabs { margin-top: 1.6rem; }

.tablist { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1.3rem; }

.tab {
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 100px;
  padding: 0.45rem 0.95rem;
}
.tab:hover { border-color: var(--accent-line); color: var(--accent); }
.tab[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.45rem; background: #fff;
}
.panel > :last-child { margin-bottom: 0; }
.panel h3 { margin-bottom: 0.4rem; }
.panel__sub { font-size: 0.83rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 1.2rem 0 0.4rem; }
.panel ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.panel li { margin-bottom: 0.25rem; font-size: 0.95rem; color: var(--ink-2); }

.js .panel[data-panel]:not(.is-active) { display: none; }
.no-js .tablist { display: none; }
.no-js .panel { margin-bottom: 0.9rem; }

/* two-column panel body */
.panel__cols { display: grid; gap: 0.6rem 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.panel__cols p { max-width: none; }
.panel__cols > div > :last-child { margin-bottom: 0; }

.owner {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 650; letter-spacing: 0.03em;
  border-radius: 100px; padding: 0.18rem 0.6rem; border: 1px solid var(--line-2);
  color: var(--ink-2); background: var(--soft);
}
.owner--human { border-color: #c9b8d8; background: #f6f1fa; color: #5b3f75; }
.owner--ai { border-color: var(--accent-line); background: var(--accent-soft); color: #05564c; }

/* ---------- stacked definition lists ---------- */
/* Plain stacked list: one item per row, no card chrome. */
.stack { margin: 1.3rem 0 0; }
.stack div { padding: 0.85rem 0; border-top: 1px solid var(--line); }
.stack div:first-child { border-top: 0; padding-top: 0; }
.stack dt { font-weight: 650; color: var(--ink); margin-bottom: 0.25rem; }
.stack dd { margin: 0; color: var(--ink-2); max-width: var(--measure); }

@media (min-width: 760px) {
  .stack--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.4rem; }
  .stack--2 div:nth-child(2) { border-top: 0; padding-top: 0; }
}

/* ---------- chips ---------- */

.chip {
  display: inline-block;
  font-size: 0.78rem; font-weight: 620; border-radius: 100px; padding: 0.2rem 0.65rem;
  background: var(--soft-2); color: var(--ink-2); border: 1px solid var(--line);
}

/* ---------- evidence / case studies ---------- */

.case__status {
  font-size: 0.82rem; color: var(--warn); background: var(--warn-soft);
  border: 1px solid #e2c88a; border-radius: 6px; padding: 0.4rem 0.6rem;
}

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem; margin-top: 0;
  font-size: 0.9rem; color: var(--muted);
}
.site-foot .wrap { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-foot h4 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }
.site-foot__end { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.2rem; }

/* ---------- glossary page ---------- */

.filter {
  font: inherit; width: min(28rem, 100%); padding: 0.6rem 0.85rem;
  border: 1px solid var(--line-2); border-radius: 8px; margin-bottom: 1.6rem;
}
.terms { display: grid; gap: 0; margin: 0; }
.terms > div { padding: 0.95rem 0; border-top: 1px solid var(--line); }
.terms dt { font-weight: 650; margin-bottom: 0.15rem; }
.terms dd { margin: 0; color: var(--ink-2); font-size: 0.95rem; max-width: var(--measure); }
.terms > div[hidden] { display: none; }

/* ---------- touch targets ---------- */
/* Last in the file so these win over the base control padding. */
@media (max-width: 800px) {
  .tab { padding-block: 0.62rem; }
}