/*
 * Visual design system — "Liquid Glass" (spec 15).
 *
 * Why: the whole site wears one coherent visual language — sleek, minimal,
 * content-first — organized into exactly TWO layers whose distinction is the
 * backbone of the system:
 *
 *   1. Content layer (article text, listings, cards, TOC, CTA/companion): QUIET,
 *      OPAQUE/standard-material surfaces. Reading never competes with chrome.
 *   2. Functional layer (site header/nav, reading-progress bar, single floating
 *      "back to top"): FLOATS above content as translucent LIQUID GLASS that
 *      takes its tint from whatever scrolls beneath it.
 *
 * The single most important rule: **Liquid Glass lives ONLY in the functional
 * layer.** `backdrop-filter` therefore appears in this file only on the header,
 * the progress bar's functional context, and the back-to-top button — never on
 * a content-layer surface (spec 15 AC1). Diluting glass across content destroys
 * the very hierarchy it exists to create.
 *
 * Two platform constraints are inherited, not relaxed (spec 02):
 *   - Zero heavyweight client JS just to display text. Every effect here is
 *     static CSS: translucency, blur, gradients, and scroll-driven CSS animation.
 *   - Light and dark are equal first-class appearances via prefers-color-scheme.
 *
 * Everything is expressed through semantic design tokens (spec 15 Foundations)
 * so a component never hard-codes a raw value — this keeps contrast auditable
 * and the language internally consistent.
 */

:root {
  color-scheme: light; /* white/light appearance only */

  /* ── Spacing scale (4px base) — the single source of rhythm ────────── */
  --space-1: 0.25rem; /* 4px  */
  --space-2: 0.5rem;  /* 8px  */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-7: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */
  --space-9: 6rem;    /* 96px */

  /* ── Radius scale (continuous, soft) — by element size ─────────────── */
  --radius-chip: 8px;
  --radius-card: 14px;
  --radius-prominent: 20px;

  /* ── Layout measures ───────────────────────────────────────────────── */
  --measure: 70ch;          /* long-form reading measure (~66–72ch, spec 02) */
  --shell: min(72rem, 100%); /* header/footer band width */
  /*
   * Sticky-header offset — the vertical space the sticky `.site-header`
   * occupies, single-sourced from its own padding-block (2×--space-3) and one
   * line of nav text (--text-body × line-height 1.65), plus a --space-4 gap so
   * anchor targets clear the glass instead of hiding under it. Relative units
   * keep the offset correct at ≥200% zoom (spec 02 AC2 / gap G3).
   */
  --header-offset: calc(2 * var(--space-3) + var(--text-body) * 1.65 + var(--space-4));

  /* ── Type scale (relative units so text scales to ≥200%, spec 15) ──── */
  --text-caption: 0.8rem;
  --text-callout: 0.9rem;
  --text-body: 1rem;
  --text-h4: 1.15rem;
  --text-h3: 1.35rem;
  --text-h2: 1.7rem;
  --text-h1: 2.4rem;
  --text-display: clamp(2.6rem, 6vw, 3.4rem);

  /* ── Color tokens — LIGHT (softened near-black on near-white) ──────── */
  --bg: #ffffff;             /* page base */
  --bg-elevated: #f5f5f7;    /* grouped/secondary background */
  --surface: #ffffff;        /* content cards, code, TOC */
  --fg: #1d1d1f;             /* primary label / body text */
  --fg-secondary: #515154;   /* metadata, captions, taglines — ≥4.5:1 on base */
  --fg-tertiary: #6e6e73;    /* large / non-essential text only */
  --separator: rgba(0, 0, 0, 0.10); /* hairline dividers */
  --accent: #0066cc;         /* interactive / directional ONLY */
  --accent-contrast: #ffffff; /* text on accent-background surfaces */
  --accent-tint: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --code-bg: #f5f5f7;

  /* ── Liquid Glass tokens (functional layer only) ───────────────────── */
  --glass-bg: rgba(255, 255, 255, 0.60);          /* resting: most transparent — lets content bleed through */
  --glass-bg-scrolled: rgba(255, 255, 255, 0.80); /* scroll-edge: more opaque  */
  --glass-blur: 30px;
  --glass-saturate: 2;
  --glass-highlight: rgba(255, 255, 255, 0.65);   /* crisp top edge */
  --glass-separator: rgba(0, 0, 0, 0.10);         /* bottom edge */
  --glass-fallback: #ffffff;                       /* opaque fallback */
}

/* Light appearance only: the site commits to a white background. The
   prefers-color-scheme: dark override was removed at the owner's request
   (a clean, ghuntley-style light reading experience). */

/* ── Reset & base ────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/*
 * Root font-size in % (not px) so the layout honors the reader's browser/OS
 * default text size; combined with rem/ch units everywhere, text scales to
 * ≥200% without truncation, overlap, or horizontal page scroll (spec 15).
 */
html {
  font-size: 106.25%; /* ≈17px at a 16px default — smaller, ghuntley-like body */
  scroll-behavior: smooth;
  /*
   * Offset anchor/TOC jumps by the sticky-header height so a followed
   * `#section` link lands the heading below the glass header, not hidden
   * beneath it (spec 02 AC2 / gap G3).
   */
  scroll-padding-top: var(--header-offset);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  font-size: var(--text-body);
  font-weight: 400; /* body is Regular; emphasis uses weight, not thin (spec 15) */
  line-height: 1.7;
  /* Honor safe-area insets on notched devices (spec 15). */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

a { color: var(--accent); }

/* Visible, non-color-only focus indicator on every interactive element. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  background: var(--surface);
  color: var(--fg);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--accent);
  border-radius: var(--radius-chip);
  z-index: 200;
}

/* ══════════════════════════════════════════════════════════════════════
 * FUNCTIONAL LAYER — Liquid Glass (the ONLY place blur/translucency appears)
 * ════════════════════════════════════════════════════════════════════ */

/*
 * Site header / navigation — a sticky bar that floats above scrolling content
 * as regular-variant Liquid Glass. It has no inherent color: it derives tint
 * from the content behind it. A hairline top-highlight + bottom separator give
 * it a crisp glass edge (spec 15).
 *
 * Fallback-first: the base rule is a SOLID opaque background. Glass is layered
 * on only inside `@supports (backdrop-filter)`, so browsers without blur — and
 * readers who request reduced transparency — get a legible opaque bar.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-fallback); /* opaque fallback */
  border-bottom: 1px solid var(--glass-separator);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--glass-bg); /* resting: most transparent, still legible */
    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
    /* A faint soft shadow reads the glass as a distinct floating plane even at
       rest over a plain background — depth through light, not a heavy border. */
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 1px 12px rgba(0, 0, 0, 0.06);
  }

  /*
   * Scroll-edge effect: as content approaches from below, the header grows
   * more opaque to keep the chrome/content boundary legible. At rest at the
   * top it is at its most transparent. Pure CSS scroll-driven animation — no
   * JS — and gated behind reduced-motion.
   */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .site-header {
        animation: header-scroll-edge linear both;
        animation-timeline: scroll(root);
        animation-range: 0 200px;
      }
      @keyframes header-scroll-edge {
        from { background: var(--glass-bg); }
        to   { background: var(--glass-bg-scrolled); }
      }
    }
  }
}

.site-header-inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-block: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-brand a {
  font-weight: 700;
  text-decoration: none;
  color: var(--fg);
}
.site-tagline {
  color: var(--fg-secondary);
  margin-inline-start: var(--space-2);
  font-size: var(--text-caption);
}

/*
 * Nav labels are the foreground label color — NOT the accent, and never a
 * colored pill on every item (monochromatic, sparing color; spec 15). Only
 * the current-page item gets emphasis, carried by WEIGHT + an underline
 * indicator (shape), so the signal is never hue alone.
 */
.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* ≥44px touch target (spec 15) */
  padding-inline: var(--space-2);
  color: var(--fg);
  text-decoration: none;
  font-size: var(--text-callout);
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] {
  font-weight: 700;
  color: var(--accent);
}
.site-nav a[aria-current="page"]::after {
  content: "";
  display: block;
  position: absolute;
  margin-top: 2.1rem;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/*
 * Reading-progress indicator (spec 12) — part of the same glass functional
 * layer: a slim accent fill riding the leading edge of the header. Pure CSS
 * scroll-driven animation, decorative + aria-hidden, zero JS.
 */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 101;
  animation: progress-grow linear;
  animation-timeline: scroll();
}
@keyframes progress-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/*
 * The single OPTIONAL floating affordance — "back to top" — on long article
 * pages. As the ONE primary floating action it is the only place a colored
 * (accent-background) glass treatment is permitted (spec 15). ≥44×44px,
 * respects safe-area insets, and fades in on scroll where supported (falling
 * back to always-visible).
 */
.back-to-top {
  position: fixed;
  right: max(var(--space-5), env(safe-area-inset-right));
  bottom: max(var(--space-5), env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
  font-size: 1.4rem; /* large glyph → ≥18pt icon, needs only ≥3:1 (spec 15 AC7) */
  font-weight: 700;
  line-height: 1;
  z-index: 90;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .back-to-top {
    background: color-mix(in srgb, var(--accent) 82%, transparent);
    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .back-to-top {
        animation: back-to-top-in linear both;
        animation-timeline: scroll(root);
        animation-range: 0 320px;
      }
      @keyframes back-to-top-in {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
    }
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * CONTENT LAYER — quiet, opaque/standard-material surfaces (NEVER glass)
 * ════════════════════════════════════════════════════════════════════ */

main {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-block: var(--space-6);
}

/* Type scale — steps far enough apart that hierarchy reads without color. */
h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.15; }
h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.2; }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.25; }
h4 { font-size: var(--text-h4); font-weight: 600; line-height: 1.25; }

.article-header h1,
.intro h1,
.listing h1 { margin-bottom: var(--space-2); }

.article-summary,
.intro-lede {
  color: var(--fg-secondary);
  font-size: 1.15rem;
  line-height: 1.4;
}

.article-meta,
.listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--fg-secondary);
  font-size: var(--text-callout);
  margin-block: var(--space-2) var(--space-4);
}

.article-hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--separator);
  margin-block: 0 var(--space-4);
}

/* Tags/chips — quiet by default: surface tint + accent text, ≥44px tall. */
.tag,
.tag-list a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-caption);
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: var(--radius-chip);
  text-decoration: none;
}
.tag:hover,
.tag-list a:hover { text-decoration: underline; }
.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-5);
}

/* ── Article body — the dominant element; nothing competes with it ────── */
.article-body { font-size: var(--text-body); }
/* Chunk the prose: paragraph/list gaps must exceed the 1.65 line-height so
   paragraphs read as distinct blocks, not one undifferentiated wall of text. */
.article-body p { margin: 0 0 var(--space-5); }
.article-body ol,
.article-body ul { margin: var(--space-5) 0; padding-left: var(--space-6); }
.article-body li { margin-block: var(--space-3); }
.article-body li p { margin-bottom: var(--space-3); }
.article-body h2 { margin-top: var(--space-7); }
.article-body h3 { margin-top: var(--space-6); }
.article-body h4 { margin-top: var(--space-5); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-card); }
.article-body figure { margin: var(--space-5) 0; }
.article-body figcaption {
  color: var(--fg-secondary);
  font-size: var(--text-callout);
  text-align: center;
  margin-top: var(--space-2);
}
.article-body blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--separator);
  color: var(--fg-secondary);
}
/* Tables scroll within their own container, never the page. */
.article-body table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-5) 0;
}
.article-body th,
.article-body td {
  border: 1px solid var(--separator);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

/* ── Step carousel — CSS-only (scroll-snap): content layer, no JS, no glass
   (spec 02: nothing heavyweight just to present content; spec 15: glass stays
   in the functional layer). Selectors are scoped under .article-body so they
   win over the generic p/ol/li/h3 spacing rules. ──────────────────────── */
.article-body .step-carousel { margin: var(--space-6) 0; }
.article-body .carousel-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-4);
  margin: 0;
  list-style: none;
  scrollbar-width: thin;
}
.article-body .carousel-slide {
  display: flex;
  flex: 0 0 min(88%, 32rem);
  scroll-snap-align: center;
  scroll-margin-top: var(--header-offset);
  margin: 0;
}
.article-body .carousel-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.article-body .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 700;
}
.article-body .carousel-card .step-title { margin: var(--space-3) 0; font-size: var(--text-h3); }
.article-body .carousel-card p:last-child { margin-bottom: 0; }
.article-body .step-photo-figure { margin: var(--space-4) auto var(--space-2); text-align: center; }
.article-body .step-photo { max-width: 200px; margin: 0 auto; }
.article-body .carousel-hint {
  margin: var(--space-3) 0 0;
  text-align: center;
  color: var(--fg-secondary);
  font-size: var(--text-caption);
}
.article-body .carousel-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}
.article-body .carousel-nav li { margin: 0; }
.article-body .carousel-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--radius-chip);
  background: var(--bg-elevated);
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}
.article-body .carousel-nav a:hover { color: var(--accent); }

/* Inline step diagrams — static SVG, themed via design tokens (no JS). */
.article-body .step-diagram {
  display: block;
  width: 100%;
  height: auto;
  max-width: 30rem;
  margin: var(--space-4) auto var(--space-2);
}
.step-diagram text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  fill: var(--fg);
}
.step-diagram .box { fill: var(--bg-elevated); stroke: var(--separator); stroke-width: 1.5; }
.step-diagram .box-accent { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.5; }
.step-diagram .bar { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.5; }
.step-diagram .bar-muted { fill: var(--bg-elevated); stroke: var(--separator); stroke-width: 1.5; }
.step-diagram .line { stroke: var(--fg-secondary); stroke-width: 1.5; fill: none; }
.step-diagram .arrow { fill: var(--fg-secondary); }
.step-diagram .muted { fill: var(--fg-secondary); }
.step-diagram .accent { fill: var(--accent); }

/* On narrow screens the carousel cards should claim more width and shed
   padding, so both the prose and the SVG diagrams render larger (less
   downscaling = legible diagram text on phones). */
@media (max-width: 34rem) {
  .article-body .carousel-slide { flex: 0 0 92%; }
  .article-body .carousel-card { padding: var(--space-4); }
  .article-body .carousel-track { gap: var(--space-3); scroll-padding-inline: 0; }
}

/* Code blocks — an elevated SOLID content surface (never glass); legibility
   of code is non-negotiable. Long lines scroll within the block (spec 02). */
.code-block {
  background: var(--code-bg);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--separator);
  overflow-x: auto;
}
.article-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.heading-anchor { text-decoration: none; opacity: 0; margin-left: 0.3em; }
:is(h2, h3, h4):hover .heading-anchor { opacity: 0.5; }

/* Table of contents — a quiet, collapsible content-layer panel (opaque),
   visually subordinate to the body. NOT glass. */
.article-toc {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-card);
  font-size: var(--text-callout);
}
.article-toc summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--fg-secondary);
}
.article-toc ol { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.article-toc li { margin-block: var(--space-1); }
.article-toc .toc-h3 { padding-left: var(--space-4); }
.article-toc .toc-h4 { padding-left: var(--space-6); }
.article-toc a { text-decoration: none; color: var(--fg); }
.article-toc a:hover { color: var(--accent); }

/* Shiki dual-theme code blocks (spec 02) — light colors are inline; dark
   overrides ride in --shiki-dark custom props, activated by system dark. */
@media (prefers-color-scheme: dark) {
  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
  }
}

/* ── Listing entries — scannable rows grouped by whitespace + a hairline,
   NOT boxed cards. Subtle surface-tint response on hover/focus. A hero
   thumbnail (when set) stays a small fixed-size accent beside the text,
   not a dominant card image, so rows stay scannable at a glance. ─────── */
.listing-list { list-style: none; padding: 0; margin: 0; }
.listing-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  margin-inline: calc(var(--space-4) * -1);
  border-bottom: 1px solid var(--separator);
  border-radius: var(--radius-card);
  transition: background-color 0.15s ease;
}
.listing-entry:hover,
.listing-entry:focus-within { background: var(--bg-elevated); }
.listing-content { flex: 1; min-width: 0; }
.listing-thumb-link { flex: none; }
.listing-thumb {
  display: block;
  width: 8rem;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--separator);
  background: var(--bg-elevated);
}
.listing-title { margin: 0 0 var(--space-1); font-size: var(--text-h3); }
.listing-title a { text-decoration: none; color: var(--fg); }
.listing-entry:hover .listing-title a { color: var(--accent); }
.listing-summary { margin: var(--space-2) 0 0; color: var(--fg-secondary); }

@media (max-width: 34rem) {
  .listing-entry { flex-direction: column; }
  .listing-thumb { width: 100%; }
}

/* ── Footer — a quiet, low-contrast close with a hairline top separator ── */
.site-footer {
  border-top: 1px solid var(--separator);
  color: var(--fg-secondary);
  font-size: var(--text-callout);
}
.site-footer-inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-block: var(--space-6);
}
.footer-disclaimer {
  margin: var(--space-3) 0 0;
  font-size: var(--text-caption-1, 0.8rem);
  opacity: 0.85;
  max-width: 60ch;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-2) 0 0;
}

/* ── Home hero / intro — confident display name, clear primary + secondary
   action group (primary "Start reading" carries the accent). ──────────── */
.intro { padding-block: var(--space-4) var(--space-6); }
.intro h1 { font-size: var(--text-display); font-weight: 700; }
.intro-role { color: var(--fg-secondary); margin: 0; font-size: 1.2rem; }
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.intro-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
/* Primary action: accent-tinted, prominent (the one directional action). */
.intro-start {
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-prominent);
}
/* Secondary actions: quiet links. */
.intro-linkedin,
.intro-about {
  color: var(--fg-secondary);
  padding: var(--space-2) var(--space-3);
}
.intro-linkedin:hover,
.intro-about:hover { color: var(--accent); }
.listing h2 { margin-top: var(--space-7); }

/* Article byline LinkedIn attribution (spec 04). */
.byline-linkedin { margin-inline-start: var(--space-2); font-size: var(--text-caption); }

/* ── About page (spec 04) — identity mark uses the accent TASTEFULLY as a
   soft tint (not a bold accent fill), so it never competes with the primary
   action for accent-background emphasis (spec 15 AC6). ─────────────────── */
.about-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.about-header h1 { margin: 0; }
.about-role { color: var(--fg-secondary); margin: var(--space-1) 0 0; }
.identity-photo {
  flex: none;
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-prominent);
  object-fit: cover;
  border: 1px solid var(--separator);
}
.identity-mark {
  flex: none;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-prominent);
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--separator);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.05em;
}
.about-bio, .about-expertise, .about-contact { margin-top: var(--space-6); }
.expertise-list { padding-left: var(--space-5); }
.contact-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.contact-link { font-weight: 600; }
.about-cv { margin-top: var(--space-5); }
.cv-link { font-weight: 600; }

/* ── CV page (spec 11) — clean structured record, chips consistent with tags,
   prominent-but-tasteful download action. ─────────────────────────────── */
.cv-role { color: var(--fg-secondary); font-size: 1.2rem; margin: var(--space-1) 0; }
.cv-summary { color: var(--fg-secondary); margin: var(--space-4) 0; }
.cv-updated { color: var(--fg-tertiary); font-size: var(--text-caption); }
.cv-download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-prominent);
  text-decoration: none;
  margin-block: var(--space-3);
}
.cv-section { margin-top: var(--space-7); }
.cv-section h2 { padding-bottom: var(--space-2); border-bottom: 1px solid var(--separator); }
.cv-experience-item, .cv-education-item, .cv-engagement-item { margin-top: var(--space-5); }
.cv-org, .cv-institution { color: var(--fg); font-weight: 600; }
.cv-dates { color: var(--fg-secondary); font-size: var(--text-callout); }
.cv-skills {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cv-skills li {
  font-size: var(--text-caption);
  color: var(--accent);
  background: var(--accent-tint);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-chip);
}

/* ── CTA blocks (spec 13) — the more prominent, action-oriented surface:
   accent-TINTED (not a full accent-background), a clear directional label.
   Distinct from body AND companions without relying on color alone (a
   framed surface + a directional arrow in the label). NOT glass. ───────── */
.cta-block {
  border: 1px solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-5);
  margin: var(--space-6) 0;
  background: var(--accent-tint);
}
.cta-label { margin: 0; font-size: var(--text-h4); font-weight: 600; }
.cta-link { text-decoration: none; color: var(--accent); }
.cta-link:hover { text-decoration: underline; }
.cta-description { margin: var(--space-2) 0 0; color: var(--fg-secondary); font-size: var(--text-callout); }
.article-ctas { margin-top: var(--space-6); }
/* Top CTA (after the TOC): the CTA box's own margin plus the first heading's
   top margin stacked into a big gap. Control the spacing from the wrapper and
   let the opening section hug the body top so the gap is tight, not doubled. */
.article-ctas-top { margin: var(--space-4) 0 var(--space-5); }
.article-ctas-top .cta-block { margin: 0; }
.article-body > :first-child { margin-top: 0; }

/* ── Companion content (spec 06) — a QUIETER aside than the CTA: a labeled
   heading + kind tags, hairline-led, so it is distinct from the CTA by
   prominence and label, not color alone. NOT glass. ───────────────────── */
.companion-block {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--separator);
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
}
.companion-heading { margin: 0 0 var(--space-2); font-weight: 600; font-size: var(--text-callout); color: var(--fg-secondary); }
.companion-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.companion-item { font-size: var(--text-callout); }
.companion-link { color: var(--accent); }
.companion-kind { color: var(--fg-secondary); font-size: var(--text-caption); margin-inline-start: var(--space-1); }

/* ── Onward path (spec 12) — a calm end-of-article handoff after a hairline,
   with one clear forward link so no article dead-ends. ────────────────── */
.onward-path {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--separator);
}
.onward-heading {
  margin: 0 0 var(--space-1);
  font-size: var(--text-callout);
  color: var(--fg-secondary);
  font-weight: 600;
}
.onward-link {
  font-size: var(--text-h4);
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
}
.onward-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
 * ACCESSIBILITY & MOTION — glass is an enhancement, never a dependency
 * ════════════════════════════════════════════════════════════════════ */

/*
 * Reduced transparency (or no backdrop-filter support — handled by the
 * fallback-first base rules above): Liquid Glass surfaces render as SOLID,
 * opaque backgrounds of equivalent tint with unchanged legibility.
 */
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--glass-fallback) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
  }
  .back-to-top {
    background: var(--accent) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/*
 * Reduced motion: suppress the progress-bar animation and all transition/
 * hover motion; no scaling, sliding, or parallax remains. Pages stay fully
 * usable and static.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reading-progress { display: none; }
  .site-header,
  .back-to-top { animation: none !important; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}