/* ==========================================================================
   components.css — every component in SPEC §5 (lane A1 "shell")
   Order: skip · header/nav · theme toggle · footer · eyebrow · buttons · hero ·
   stats · media · quote · callout · timeline · steps · tags · cards · diagram ·
   artefact · findings · keep/change/drop · meta grid · facts · toc + case layout ·
   tables · details · case-nav · reveal.
   Charts (.figure, .chart, .chart-tip) are styled by charts.css (lane A2).
   ========================================================================== */

/* ---- Skip link -------------------------------------------------------- */
.skip {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: calc(var(--z-header) + 10);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-5)));
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip:focus, .skip:focus-visible { transform: none; color: var(--paper); }

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-h);
  max-width: calc(var(--w-content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding-block: var(--space-2);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__mark { color: var(--accent); flex: none; transition: transform var(--dur-base) var(--ease-out); }
.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.01em;
  padding-top: 2px;
}
.wordmark:hover .wordmark__mark { transform: rotate(-8deg); }

/* Primary nav (desktop) */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}
.site-nav__item { position: relative; }
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--r-control);
  color: var(--ink-2);
  font-size: .9375rem;
  font-weight: var(--fw-medium);
  letter-spacing: -.005em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover, .site-nav__trigger[aria-expanded="true"] { color: var(--ink); background: var(--paper-2); }
.site-nav__link[aria-current="page"], .site-nav__link.is-current { color: var(--ink); }
.site-nav__link[aria-current="page"]::after, .site-nav__link.is-current::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
}
.site-nav__trigger.is-current::after { right: calc(var(--space-3) + 17px); }
.site-nav__chev { transition: transform var(--dur-base) var(--ease-out); color: var(--ink-3); }
.site-nav__trigger[aria-expanded="true"] .site-nav__chev { transform: rotate(180deg); }
.site-nav__group { display: none; }

.site-nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -8px;
  z-index: var(--z-menu);
  width: 340px;
  padding: var(--space-2);
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
/* C1 QA: from 768 to ~1216px the left-anchored 340px menu ran 8–18px past the viewport (horizontal scroll on
   every page, even while closed). Anchor it to the trigger's right edge until the header is wide enough. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .site-nav__menu { left: auto; right: -8px; }
}
.site-nav__trigger[aria-expanded="true"] ~ .site-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.site-nav__menu-link {
  display: grid;
  gap: 2px;
  padding: 10px 12px 11px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.site-nav__menu-link:hover { background: var(--paper-2); }
.site-nav__menu-link[aria-current="page"] { background: var(--accent-soft); }
.site-nav__menu-title { font-size: .9375rem; font-weight: var(--fw-medium); line-height: 1.35; }
.site-nav__menu-desc { font-size: .8125rem; line-height: 1.4; color: var(--ink-meta); }
.site-nav__menu-link[aria-current="page"] .site-nav__menu-desc { color: var(--accent-ink); }

/* Theme toggle */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin-left: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--ink); background: var(--paper-2); border-color: var(--line-strong); }
.theme-toggle__icon { grid-area: 1 / 1; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.theme-toggle__icon--sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle__icon--sun { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle__icon--moon { opacity: 0; }
  :root:not([data-theme]) .theme-toggle__icon--sun { opacity: 1; transform: none; }
}
.theme-toggle--labelled {
  grid-template-columns: 16px auto;
  column-gap: var(--space-2);
  width: auto;
  height: 32px;
  margin: 0;
  padding: 0 var(--space-3) 0 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}
.theme-toggle__text { grid-area: 1 / 2; line-height: 1; }

/* Mobile disclosure button */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.nav-toggle:hover { background: var(--paper-2); }
.nav-toggle__icon { position: relative; display: block; width: 16px; height: 10px; }
.nav-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out);
}
.nav-toggle__icon span:first-child { top: 1px; }
.nav-toggle__icon span:last-child { top: 7.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child { top: 4.25px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child { top: 4.25px; transform: rotate(-45deg); }

@media (max-width: 767.98px) {
  .nav-toggle { display: inline-flex; }
  .wordmark__name { font-size: 1.375rem; }
  .theme-toggle { margin-left: 0; }

  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-menu);
    padding: var(--space-5) var(--gutter) var(--space-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border-top: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .site-header.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .site-header.is-open { background: var(--paper); border-bottom-color: var(--line); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-bottom: 1px solid var(--line); }
  .site-nav__item--menu { padding-bottom: var(--space-3); }
  .site-nav__trigger { display: none; }
  .site-nav__group {
    display: block;
    padding-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--track-meta);
    text-transform: uppercase;
    color: var(--ink-meta);
  }
  .site-nav__menu {
    position: static;
    width: auto;
    padding: var(--space-2) 0 0;
    border: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .site-nav__menu-link { padding: var(--space-3) 0; border-radius: 0; }
  .site-nav__menu-link:hover, .site-nav__menu-link[aria-current="page"] { background: none; }
  .site-nav__menu-title { font-family: var(--font-display); font-size: 1.875rem; font-weight: var(--fw-regular); line-height: 1.1; letter-spacing: -.01em; }
  .site-nav__menu-link[aria-current="page"] .site-nav__menu-title { color: var(--accent-ink); }
  .site-nav__menu-desc { font-size: var(--fs-small); }
  .site-nav__link {
    height: auto;
    padding: var(--space-4) 0;
    border-radius: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: var(--fw-regular);
    line-height: 1.1;
    letter-spacing: -.01em;
  }
  .site-nav__link:hover { background: none; }
  .site-nav__link[aria-current="page"] { color: var(--accent-ink); }
  .site-nav__link[aria-current="page"]::after { display: none; }
  :root.nav-open, :root.nav-open body { overflow: hidden; }
}

/* ==========================================================================
   Site footer
   ========================================================================== */
.site-footer {
  margin-top: var(--space-7);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-small);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
  max-width: calc(var(--w-content) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-8) var(--gutter) var(--space-6);
}
.site-footer__lead { grid-column: 1 / -1; }
.site-footer__name {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -.012em;
  color: var(--ink);
}
.site-footer__role { margin-top: var(--space-3); line-height: 1.55; color: var(--ink-meta); }
.site-footer__heading {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-meta);
}
.site-footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.site-footer a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-base) var(--ease-out); }
.site-footer a:hover { background-size: 100% 1px; }
.site-footer__base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.site-footer__colophon {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--ink-meta);
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__lead { grid-column: auto; }
}

/* ==========================================================================
   Eyebrow
   ========================================================================== */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
  line-height: var(--lh-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-meta);
  text-wrap: balance;
}
.eyebrow--accent { color: var(--accent-ink); }
.eyebrow--dot::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .7em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: .08em;
}
.eyebrow--rule { display: flex; align-items: center; gap: var(--space-4); }
.eyebrow--rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-size: .9375rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn svg, .btn .btn__arrow { flex: none; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--primary { background: var(--accent-strong); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-strong-hover); color: var(--on-accent); }
.btn--primary:visited { color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--paper-2); border-color: var(--ink-3); color: var(--ink); }
.btn--ghost:visited { color: var(--ink); }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: var(--fs-small); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: var(--fw-medium);
  color: var(--accent-ink);
  text-decoration: none;
}
.link-arrow::after { content: "\2192" / ""; transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-top: clamp(var(--space-7), 9vw, 8.5rem); padding-bottom: clamp(var(--space-7), 6vw, var(--space-9)); }
.hero__eyebrow { margin-bottom: var(--space-5); }
.hero__title {
  max-width: 15.5em;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.hero__title--h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); max-width: 20em; }
.hero__dek { margin-top: var(--space-5); max-width: 36em; }
.hero__actions { margin-top: var(--space-6); }
.hero .hero__figure { margin-top: clamp(var(--space-7), 7vw, var(--space-9)); }
.hero__media {
  display: grid;
  gap: var(--space-5);
  align-items: end;
  margin-top: clamp(var(--space-7), 6vw, var(--space-8));
}
@media (min-width: 900px) {
  .hero__media { grid-template-columns: minmax(0, 1fr) clamp(180px, 22%, 260px); }
}

/* ==========================================================================
   Stat cards
   ========================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(var(--space-6), 4vw, var(--space-7)) var(--space-6);
  list-style: none;
  padding: 0;
}
.stat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-meta);
}
.stat-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3em .3em;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-regular);
  line-height: .92;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  white-space: nowrap;
}
.stat-unit, .stat-value small {
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: .02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  transform: translateY(-.15em);
}
.stat-claim {
  margin-top: var(--space-4);
  font-size: .975rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 28em;
}
.stat-claim strong { color: var(--ink); font-weight: var(--fw-medium); }
.stat-meta {
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink-meta);
  overflow-wrap: anywhere;
}
.stat-claim + .stat-meta { margin-top: auto; }
.stat-card > .stat-claim:last-child { margin-bottom: 0; }
.stat-card--boxed {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-2);
}
.stat-card--accent { border-top-color: var(--accent); }
.stat-card--accent .stat-value { color: var(--accent-ink); }
.stat-grid--compact .stat-value { font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); }
.stat-grid--compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-6) var(--space-5); }

/* ==========================================================================
   Media frames
   ========================================================================== */
.media { min-width: 0; }
.media img, .media video {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  background: var(--paper-2);
}
.media figcaption, .media-row > figcaption {
  margin-top: var(--space-3);
  max-width: var(--w-prose);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-meta);
}
.media figcaption strong { color: var(--ink-2); font-weight: var(--fw-medium); }

.media--plate {
  padding: clamp(var(--space-3), 7%, var(--space-7));
  border-radius: var(--r-card);
  background: var(--paper-2);
}
.media--plate figcaption { margin-top: var(--space-4); }

.media--phone { width: 100%; max-width: 390px; margin-inline: auto; }
.media--phone img, .media--phone video {
  border-radius: 26px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 5px var(--paper-2), 0 0 0 6px var(--line);
  margin: 6px;
  width: calc(100% - 12px);
}
.media--phone figcaption { text-align: center; margin-inline: auto; margin-top: var(--space-4); }

.media--browser { position: relative; }
.media--browser::before {
  content: "";
  display: block;
  height: 28px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-media) var(--r-media) 0 0;
  background:
    radial-gradient(circle at 16px 50%, var(--line-strong) 0 4px, transparent 4.5px),
    radial-gradient(circle at 32px 50%, var(--line-strong) 0 4px, transparent 4.5px),
    radial-gradient(circle at 48px 50%, var(--line-strong) 0 4px, transparent 4.5px),
    var(--paper-2);
}
.media--browser img, .media--browser video { border-radius: 0 0 var(--r-media) var(--r-media); }

.media-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-5);
  align-items: start;
}
.media-row--3 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.media-row > .media--phone { max-width: 320px; }
.media-row > figcaption { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 599.98px) {
  .media-row--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .media-row--phones .media--phone img { border-radius: 16px; box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 4px var(--line); margin: 4px; width: calc(100% - 8px); }
}

/* ==========================================================================
   Quote
   ========================================================================== */
.quote {
  position: relative;
  max-width: 40rem;
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent);
}
.quote blockquote, .quote > p, .quote blockquote p {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.quote blockquote > * + * { margin-top: var(--space-3); }
.quote cite, .quote figcaption {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink-meta);
  overflow-wrap: anywhere;
}
.quote figcaption cite { margin-top: 0; display: inline; }
.quote--plain { padding-left: 0; border-left: 0; }
.quote--plain blockquote::before {
  content: "\201C" / "";
  display: block;
  height: .5em;
  margin-bottom: .1em;
  font-family: var(--font-display);
  font-size: 3.5em;
  line-height: 1;
  color: var(--accent);
}
.quote--small blockquote, .quote--small blockquote p { font-size: 1.375rem; line-height: 1.25; }

/* ==========================================================================
   Callout
   ========================================================================== */
.callout {
  --callout-color: var(--ink-3);
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 1px);
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  background: var(--paper-2);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
}
.callout::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  border-radius: var(--r-media) 0 0 var(--r-media);
  background: var(--callout-color);
}
.callout > * + * { margin-top: var(--space-2); }
.callout__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink);
}
.callout__title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--callout-color);
}
.callout--accent { --callout-color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.callout--good { --callout-color: var(--callout-good); }
.callout--warn { --callout-color: var(--callout-warn); }
.callout--bad  { --callout-color: var(--callout-bad); }
.callout code { background: var(--paper); }

/* ==========================================================================
   Timeline
   ========================================================================== */
.timeline { list-style: none; padding: 0; position: relative; container-type: inline-size; }
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: 0 0 var(--space-6) var(--space-6);
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: -2px;
  width: 1px;
  background: var(--line-strong);
}
.timeline__item:last-child::before { display: none; }
.timeline__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink-3);
}
.timeline__item.is-current::after, .timeline__item--accent::after { border-color: var(--accent); background: var(--accent); }
.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}
.timeline__title { font-size: 1.0625rem; line-height: 1.4; font-weight: var(--fw-semi); }
.timeline__text { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
@container (min-width: 480px) {
  .timeline__item {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: var(--space-6);
    padding-left: 0;
  }
  .timeline__item::before { left: calc(7.5rem + var(--space-6) / 2 - .5px); }
  .timeline__item::after { left: calc(7.5rem + var(--space-6) / 2 - 4.5px); }
  .timeline__date { text-align: right; padding-right: 0; }
  .timeline__body { padding-left: var(--space-5); }
  .timeline__date { grid-row: 1; }
}
.timeline__body > * + * { margin-top: var(--space-1); }

/* ==========================================================================
   Steps (numbered process ladder)
   ========================================================================== */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--space-6); }
.step { counter-increment: step; position: relative; padding-top: var(--space-4); border-top: 1px solid var(--line-strong); }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  color: var(--accent-ink);
}
.step__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: 1.05; letter-spacing: -.01em; }
.step__text { margin-top: var(--space-3); font-size: .975rem; line-height: 1.55; color: var(--ink-2); max-width: 30em; }
.step__meta { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-meta); letter-spacing: .02em; }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: var(--space-6); }
  .step:not(:last-child)::after {
    content: "\2192" / "";
    position: absolute;
    top: calc(var(--space-4) - 2px);
    right: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-3);
  }
}
.steps--vertical { grid-auto-flow: row; grid-template-columns: 1fr !important; gap: 0; }
.steps--vertical .step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); padding-block: var(--space-5); }
.steps--vertical .step::before { margin: .35em 0 0; }
.steps--vertical .step::after { display: none; }
.steps--vertical .step__title { font-family: var(--font-text); font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: var(--lh-h3); letter-spacing: -.012em; }
.steps--vertical .step > * { grid-column: 2; }

/* ==========================================================================
   Tags
   ========================================================================== */
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.tags > li { margin: 0 !important; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: .005em;
  color: var(--ink-2);
  white-space: nowrap;
}
.tag--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.tag--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tag--mono { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; font-weight: var(--fw-regular); }

/* ==========================================================================
   Cards / work cards (whole card is one link via a stretched title link)
   ========================================================================== */
.card, .work-card {
  position: relative;
  display: grid;
  align-content: start; /* C1 QA: when a grid stretches cards to equal height, keep titles aligned instead of padding the gap */
  gap: var(--space-5);
  min-width: 0;
  isolation: isolate;
}
.work-card__media, .card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--paper-2);
  aspect-ratio: 16 / 10;
}
.work-card__media img, .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 600ms var(--ease-out);
}
.work-card__media--plate { padding: clamp(var(--space-4), 3vw, var(--space-6)); padding-bottom: 0; }
.work-card__media--plate img {
  object-position: left top;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--paper);
}
.work-card__body, .card__body { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.work-card__title, .card__title {
  font-family: var(--font-text);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: 1.25;
  letter-spacing: -.012em;
}
.work-card__title a, .card__title a { color: var(--ink); text-decoration: none; }
.work-card__title a::after, .card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-card);
}
.work-card__title a:focus-visible { outline: none; }
.work-card:has(.work-card__title a:focus-visible), .card:has(.card__title a:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 6px;
  border-radius: var(--r-card);
}
.work-card__text, .card__text { font-size: .975rem; line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.work-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--accent-ink);
}
.work-card__cta::after { content: "\2192" / ""; transition: transform var(--dur-base) var(--ease-out); }
.work-card .tags { margin-top: var(--space-1); }
@media (hover: hover) {
  .work-card:hover .work-card__media img, .card:hover .card__media img { transform: scale(1.015); }
  .work-card:hover .work-card__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--line-strong); }
  .work-card:hover .work-card__cta::after { transform: translateX(4px); }
}

/* Duo: desktop capture with the phone capture overlapping, on a plate */
.work-card__media--duo img { position: absolute; height: auto; object-fit: initial; }
.work-card__shot {
  left: 7%;
  top: 9%;
  width: 78% !important;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.work-card__phone {
  right: 7%;
  top: 30%;
  width: 21% !important;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 0 0 4px var(--paper-2);
  background: var(--paper);
}
@media (hover: hover) {
  .work-card:hover .work-card__media--duo img { transform: none; }
  .work-card:hover .work-card__phone { transform: translateY(-6px); }
}
.work-card__media--duo .work-card__phone { transition: transform 600ms var(--ease-out); }

/* Logo plate: for projects without screenshots */
.work-card__media--logo { display: grid; place-items: center; }
.work-card__media--logo img { width: 72px; height: 72px; object-fit: contain; border-radius: 16px; }
.work-card__cta--ext::after { content: "\2197" / ""; }

.more-work { margin-top: var(--space-8); }
.more-work__title { margin-bottom: var(--space-6); }
.section-foot { margin-top: var(--space-7); }
.about-teaser__text { color: var(--ink-2); max-width: 32em; }

/* Feature: large, media-led, used for Selected work */
.work-list { display: grid; gap: 0; }
.work-card--feature { padding-block: var(--space-7); border-top: 1px solid var(--line); }
.work-card--feature:first-child { padding-top: 0; border-top: 0; }
.work-card--feature .work-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: 1.08;
  letter-spacing: -.012em;
}
.work-card--feature .work-card__text { font-size: var(--fs-body); }
@media (min-width: 900px) {
  .work-card--feature {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: center;
    padding-block: var(--space-8);
  }
  .work-card--feature:first-child { padding-top: 0; }
  .work-card--feature:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .work-card--feature:nth-child(even) .work-card__media { order: 2; }
  .work-card--feature .work-card__media { aspect-ratio: 4 / 3; }
}

/* Compact: "More work" */
.work-grid { display: grid; gap: var(--space-7) var(--space-6); }
@media (min-width: 768px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work-card--compact { gap: var(--space-4); }
.work-card--compact .work-card__media { aspect-ratio: 16 / 9; }
.work-card--compact .work-card__title { font-size: 1.0625rem; }

/* Plain bordered card (generic) */
.card--boxed { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
.card--boxed:hover { border-color: var(--line-strong); }

/* ==========================================================================
   Diagram (inline SVG; colour comes from tokens via currentColor + classes)
   ========================================================================== */
.diagram {
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-2);
  color: var(--ink-2);
}
.diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram figcaption { margin-top: var(--space-4); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-meta); max-width: var(--w-prose); }
.diagram text, .diagram .d-label { font-family: var(--font-text); font-size: 13px; fill: var(--ink); }
.diagram .d-label--muted, .diagram .d-meta { fill: var(--ink-meta); }
.diagram .d-mono, .diagram .d-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.diagram .d-node { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1; }
.diagram .d-node--accent { fill: var(--accent-soft); stroke: var(--accent); }
.diagram .d-node--ink { fill: var(--ink); stroke: var(--ink); }
.diagram .d-node--ink + text, .diagram .d-label--on-ink { fill: var(--paper); }
.diagram .d-edge { fill: none; stroke: var(--ink-3); stroke-width: 1.25; }
.diagram .d-edge--accent { stroke: var(--accent); stroke-width: 1.5; }
.diagram .d-arrow { fill: var(--ink-3); }
.diagram .d-arrow--accent { fill: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .diagram .d-edge--flow { stroke-dasharray: 3 5; animation: d-flow 1.4s linear infinite; }
  @keyframes d-flow { to { stroke-dashoffset: -16; } }
}

/* ==========================================================================
   Artefact — an excerpt of a real file (prompt, hand-off, register row)
   ========================================================================== */
.artefact {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  background: var(--paper);
}
.artefact__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .02em;
  color: var(--ink-meta);
}
.artefact__path { min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.artefact__head > :not(.artefact__path) { flex: none; white-space: nowrap; }
.artefact__body, .artefact pre {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: 0;
  background: none;
  font-size: .8125rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.artefact mark { background: var(--accent-soft); color: var(--accent-ink); padding: 0 .15em; border-radius: 2px; }
.artefact figcaption:not(.artefact__head) { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-meta); }

/* ==========================================================================
   Findings — numbered insights with a source path
   ========================================================================== */
.findings { list-style: none; padding: 0; counter-reset: finding; display: grid; gap: 0; }
.finding {
  counter-increment: finding;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}
.finding::before {
  content: counter(finding, decimal-leading-zero);
  grid-row: 1 / span 3;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 2.1;
  color: var(--accent-ink);
}
.finding__title { font-size: 1.0625rem; line-height: 1.4; font-weight: var(--fw-semi); }
.finding__text { font-size: .975rem; line-height: 1.55; color: var(--ink-2); }
.finding__source { font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-meta); overflow-wrap: anywhere; }

/* ==========================================================================
   Keep / change / drop (retro ledger)
   ========================================================================== */
.kcd { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .kcd { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kcd__col { padding-top: var(--space-4); border-top: 2px solid var(--kcd-color, var(--ink-3)); }
.kcd__col--keep   { --kcd-color: var(--good); }
.kcd__col--change { --kcd-color: var(--warn); }
.kcd__col--drop   { --kcd-color: var(--bad); }
.kcd__label {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink);
}
.kcd__label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--kcd-color); }
.kcd__col ul { list-style: none; padding: 0; margin-top: var(--space-4); display: grid; gap: var(--space-4); }
.kcd__col li { font-size: .975rem; line-height: 1.5; color: var(--ink-2); }
.kcd__col li strong { display: block; color: var(--ink); font-weight: var(--fw-semi); margin-bottom: 2px; }

/* ==========================================================================
   Meta grid (case-study facts row) and facts list
   ========================================================================== */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--space-5) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.meta-grid dt, .facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-meta);
}
.meta-grid dd { margin: var(--space-2) 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); }
.facts { display: grid; gap: 0; container-type: inline-size; }
.facts > div { display: grid; gap: var(--space-1) var(--space-5); padding-block: var(--space-4); border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dd { margin: 0; color: var(--ink); line-height: 1.5; }
@container (min-width: 440px) { .facts > div { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; } }

/* ==========================================================================
   TOC + case layout
   Desktop ≥1024: sticky left rail. Below: sticky horizontal chip strip.
   ========================================================================== */
.case-layout { display: block; }
.toc {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  margin-inline: calc(-1 * var(--gutter));
  margin-bottom: var(--space-7);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.toc__title { display: none; }
.toc__list {
  display: flex;
  gap: var(--space-2);
  padding: 10px var(--gutter);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}
.toc__list::-webkit-scrollbar { display: none; }
.toc__list li { flex: none; scroll-snap-align: start; }
.toc__link {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.toc__link:hover { color: var(--ink); border-color: var(--line-strong); }
.toc__link[aria-current="true"], .toc__link.is-current { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* C1 QA: was `color: inherit; opacity: .6`, which put --ink-meta at 2.4:1 on paper. Muted via the AA-safe token instead. */
.toc__num { margin-right: .5em; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-meta); }
.toc__link:is([aria-current="true"], .is-current) .toc__num { color: inherit; opacity: .75; }

@media (min-width: 1024px) {
  .case-layout {
    display: grid;
    grid-template-columns: var(--toc-w) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
  .toc {
    top: calc(var(--header-h) + var(--space-6));
    max-height: calc(100vh - var(--header-h) - var(--space-8));
    margin: 0;
    overflow-y: auto;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    scrollbar-width: thin;
  }
  .toc__title {
    display: block;
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--track-meta);
    text-transform: uppercase;
    color: var(--ink-meta);
  }
  .toc__list {
    display: grid;
    gap: 0;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    border-left: 1px solid var(--line);
  }
  .toc__link {
    display: flex;
    align-items: baseline;
    height: auto;
    margin-left: -1px;
    padding: 7px 0 7px var(--space-4);
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    font-size: .8125rem;
    line-height: 1.4;
    white-space: normal;
    color: var(--ink-meta);
  }
  .toc__link:hover { color: var(--ink); background: none; }
  .toc__link[aria-current="true"], .toc__link.is-current { background: none; color: var(--ink); border-left-color: var(--accent); }
}

/* ==========================================================================
   Tables (data tables). Low specificity so charts.css can refine.
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--ink);
}
.table-wrap > table { min-width: 100%; }
:where(.table, .prose table, .table-wrap table) {
  width: 100%;
  font-size: var(--fs-small);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
:where(.table, .prose table, .table-wrap table) caption {
  caption-side: bottom;
  padding-top: var(--space-3);
  text-align: left;
  font-size: var(--fs-small);
  color: var(--ink-meta);
}
:where(.table, .prose table, .table-wrap table) th {
  padding: 10px var(--space-4) 9px 0;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  color: var(--ink-meta);
  white-space: nowrap;
}
:where(.table, .prose table, .table-wrap table) td {
  padding: 11px var(--space-4) 11px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
:where(.table, .prose table, .table-wrap table) :is(th, td):last-child { padding-right: 0; }
:where(.table, .prose table, .table-wrap table) tbody th { font-family: var(--font-text); font-size: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: var(--fw-medium); vertical-align: top; white-space: normal; border-bottom-color: var(--line); }
:where(.table, .prose table, .table-wrap table) tbody tr:hover td,
:where(.table, .prose table, .table-wrap table) tbody tr:hover th { background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
:where(.table, .prose table, .table-wrap table) td.num,
:where(.table, .prose table, .table-wrap table) td[data-num] { text-align: right; font-family: var(--font-mono); font-size: .8125rem; color: var(--ink); white-space: nowrap; }
:where(.table, .prose table, .table-wrap table) th.num { text-align: right; }
:where(.table, .prose table, .table-wrap table) td.mono { font-family: var(--font-mono); font-size: .8125rem; white-space: nowrap; color: var(--ink); }
:where(.table, .prose table, .table-wrap table) code { font-size: .8em; }
.table--mono td { font-family: var(--font-mono); font-size: .8125rem; }
.table--compact td, .table--compact th { padding-block: 7px; }

/* Status chips inside tables */
.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--status-color, var(--ink-3)); }
.status--good { --status-color: var(--good); }
.status--warn { --status-color: var(--warn); }
.status--bad  { --status-color: var(--bad); }

/* ==========================================================================
   Details / disclosure (collapsible code, long lists)
   ========================================================================== */
.disclosure { border: 1px solid var(--line); border-radius: var(--r-media); background: var(--paper); }
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "+" / ""; font-family: var(--font-mono); color: var(--ink-3); transition: transform var(--dur-base) var(--ease-out); }
.disclosure[open] > summary::after { transform: rotate(45deg); }
.disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.disclosure > :not(summary) { margin: 0; }
.disclosure > pre { border: 0; border-radius: 0 0 var(--r-media) var(--r-media); }
.disclosure__body { padding: var(--space-4); }

/* ==========================================================================
   Case nav (prev / next)
   ========================================================================== */
.case-nav {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) { .case-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-nav__link {
  display: grid;
  align-content: start; /* C1 QA: stretched to its neighbour's height, the rows spread and the title floated */
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.case-nav__link:hover { border-color: var(--line-strong); background: var(--paper-2); }
.case-nav__link--next { text-align: right; }
.case-nav__link--next:only-child { grid-column: 1 / -1; }
@media (min-width: 768px) { .case-nav__link--next:only-child { grid-column: 2; } }
.case-nav__dir { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-meta); }
.case-nav__link--prev .case-nav__dir::before { content: "\2190\00a0\00a0" / ""; }
.case-nav__link--next .case-nav__dir::after { content: "\00a0\00a0\2192" / ""; }
.case-nav__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
.case-nav__desc { font-size: var(--fs-small); color: var(--ink-meta); }

/* ==========================================================================
   Contact block
   ========================================================================== */
.contact-list { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); container-type: inline-size; }
.contact-list li { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.contact-list__label { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-meta); }
.contact-list a { justify-self: start; max-width: 100%; font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--ink); text-decoration: none; overflow-wrap: break-word; }
.contact-list a:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.contact-list__value { color: var(--ink); }
@container (min-width: 400px) {
  .contact-list li { grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; gap: var(--space-5); }
}

/* ==========================================================================
   Reveal-on-scroll (only when JS is running; content is visible without JS)
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--dur-reveal) var(--ease-out) calc(var(--reveal-i, 0) * var(--stagger)),
    transform var(--dur-reveal) var(--ease-out) calc(var(--reveal-i, 0) * var(--stagger));
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}