/* =========================================================
       Design tokens — extracted from the Skill Builder for Amazon Quick.
       Same posture as the source: semantic HTML, CSS custom properties,
       system font stack, no build pipeline.
       ========================================================= */

    /* Skip link — visually hidden until keyboard focus */
    .skip-link {
      position: absolute;
      left: 0;
      top: -100px;
      z-index: 1000;
      padding: 10px 16px;
      background: var(--accent);
      color: #ffffff;
      font: 600 14px var(--font-sans);
      text-decoration: none;
      border-radius: 0 0 6px 0;
    }
    .skip-link:focus {
      top: 0;
      outline: 2px solid var(--text-primary);
      outline-offset: 2px;
    }

    /* Visually hidden — accessible-name-only utility */
    .visually-hidden {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0);
      white-space: nowrap; border: 0;
    }

    :root {
      --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
      --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", monospace;

      /* Spacing scale (4px base) */
      --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
      --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
      --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

      /* Type scale */
      --text-xs: 12px;  --text-sm: 13px; --text-base: 15px; --text-md: 16px;
      --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px;
      --text-4xl: 48px; --text-5xl: 64px;

      /* Radius */
      --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;

      /* Status colors — same hue family across both themes */
      --green: #10b981; --green-bg: rgba(16,185,129,.12);
      --amber: #eab308; --amber-bg: rgba(234,179,8,.12);
      --rose: #f43f5e;  --rose-bg:  rgba(244,63,94,.12);

      /* Transitions */
      --tx-fast: 120ms ease;
      --tx-base: 200ms cubic-bezier(.2,.8,.2,1);
    }

    /* Dark theme (default) — matches the Skill Builder content area */
    [data-theme="dark"] {
      --bg-base:      #0e0e10;
      --bg-surface:   #16161a;
      --bg-elevated:  #1d1d22;
      --bg-hover:     #25252c;
      --border:       #2a2a31;
      --border-strong:#3a3a42;
      --text-primary: #e8e8ea;
      --text-secondary:#a0a0a8;
      --text-muted:   #6a6a72;
      --accent:       #3b82f6;
      --accent-hover: #60a5fa;
      --accent-soft:  rgba(59,130,246,.14);
      --shadow:       0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.4);
    }

    /* Light theme — keeps the same architecture, lighter surfaces */
    [data-theme="light"] {
      --bg-base:      #fafaf9;
      --bg-surface:   #ffffff;
      --bg-elevated:  #ffffff;
      --bg-hover:     #f4f4f2;
      --border:       #e7e7e4;
      --border-strong:#d4d4d1;
      --text-primary: #18181b;
      --text-secondary:#52525b;
      --text-muted:   #71717a;
      --accent:       #2563eb;
      --accent-hover: #1d4ed8;
      --accent-soft:  rgba(37,99,235,.10);
      --shadow:       0 1px 2px rgba(24,24,27,.04), 0 8px 24px rgba(24,24,27,.06);
    }

    /* =========================================================
       Reset + base
       ========================================================= */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    body {
      margin: 0;
      font-family: var(--font-sans);
      font-size: var(--text-base);
      line-height: 1.55;
      color: var(--text-primary);
      background: var(--bg-base);
      transition: background var(--tx-base), color var(--tx-base);
    }
    a { color: inherit; text-decoration: none; }
    a:focus-visible, button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
    button { font-family: inherit; cursor: pointer; }

    /* =========================================================
       Top bar
       ========================================================= */
    .topbar {
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: blur(12px);
      background: color-mix(in srgb, var(--bg-base) 80%, transparent);
      border-bottom: 1px solid var(--border);
    }
    .topbar-inner {
      max-width: 1080px; margin: 0 auto; padding: var(--space-4) var(--space-6);
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    }
    .brand {
      display: flex; align-items: center; gap: var(--space-3);
      font-weight: 600; font-size: var(--text-md);
    }
    /* The existing wordmark logo. PNG ships dark-on-light;
       in dark mode we invert so the navy becomes off-white and the gray
       selection-box rule becomes a darker rule that reads on the dark surface. */
    .brand-logo {
      height: 30px; width: auto; display: block;
      transition: filter var(--tx-base);
    }
    [data-theme="dark"] .brand-logo {
      filter: invert(1) hue-rotate(180deg) brightness(1.05);
    }
    .brand-text { color: var(--text-primary); }
    .brand-sub  { color: var(--text-muted); font-weight: 400; font-size: var(--text-sm); }
    .visually-hidden {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    .nav { display: flex; align-items: center; gap: var(--space-2); }
    .nav a {
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-sm);
      color: var(--text-secondary);
      font-size: var(--text-sm);
      transition: color var(--tx-fast), background var(--tx-fast);
    }
    .nav a:hover { color: var(--text-primary); background: var(--bg-hover); }
    /* Active page: lit nav link with a thin accent underline. The
       underline is rendered with the link's bottom border so it stays
       aligned even as text reflows on small screens. */
    .nav a[aria-current="page"] {
      color: var(--text-primary);
      font-weight: 500;
      position: relative;
    }
    .nav a[aria-current="page"]::after {
      content: "";
      position: absolute;
      left: var(--space-3);
      right: var(--space-3);
      bottom: 2px;
      height: 2px;
      background: var(--accent);
      border-radius: 1px;
    }
    .nav-divider { width: 1px; height: 18px; background: var(--border); margin: 0 var(--space-2); }
    .icon-btn {
      width: 32px; height: 32px; border-radius: var(--radius-sm);
      background: transparent; border: 1px solid var(--border);
      color: var(--text-secondary);
      display: grid; place-items: center;
      transition: background var(--tx-fast), color var(--tx-fast), border-color var(--tx-fast);
    }
    .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }

    /* =========================================================
       Layout
       ========================================================= */
    .page { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-6); }
    section { padding: var(--space-20) 0; border-bottom: 1px solid var(--border); }
    section:last-of-type { border-bottom: none; }

    /* Section eyebrow — matches the Skill Builder section labels */
    .eyebrow {
      display: inline-flex; align-items: center; gap: var(--space-2);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: var(--space-4);
    }
    .eyebrow::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
    }

    /* =========================================================
       Hero
       ========================================================= */
    .hero { padding: var(--space-20) 0 var(--space-16); border-bottom: 1px solid var(--border); }
    .hero-grid {
      display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-16); align-items: center;
    }
    @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-10); } }

    .hero h1 {
      font-size: clamp(36px, 5vw, var(--text-5xl));
      line-height: 1.05; letter-spacing: -.02em; font-weight: 600;
      margin: 0 0 var(--space-5);
    }
    .hero h1 .accent { color: var(--accent); }
    .hero p {
      font-size: var(--text-lg); line-height: 1.55; color: var(--text-secondary);
      margin: 0 0 var(--space-8); max-width: 56ch;
    }

    /* Status pill — "currently shipping" with green dot, matches the Skill Builder status pattern */
    .status-pill {
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding: 6px var(--space-3);
      border: 1px solid var(--border); border-radius: var(--radius-pill);
      background: var(--bg-surface);
      font-size: var(--text-sm); color: var(--text-secondary);
      margin-bottom: var(--space-6);
    }
    .status-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 4px var(--green-bg);
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 4px var(--green-bg); }
      50%      { box-shadow: 0 0 0 7px transparent; }
    }

    .role-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
    .chip {
      padding: 6px var(--space-3); font-size: var(--text-sm);
      border: 1px solid var(--border); border-radius: var(--radius-pill);
      color: var(--text-secondary); background: var(--bg-surface);
      display: inline-flex; align-items: center; gap: var(--space-2);
    }
    .chip [data-lucide] { width: 14px; height: 14px; }

    .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
    .btn {
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-md);
      font-size: var(--text-sm); font-weight: 500;
      transition: background var(--tx-fast), transform var(--tx-fast), border-color var(--tx-fast);
    }
    .btn-primary {
      background: var(--accent); color: white; border: 1px solid var(--accent);
    }
    .btn-primary:hover { background: var(--accent-hover); }
    .btn-secondary {
      background: var(--bg-surface); color: var(--text-primary);
      border: 1px solid var(--border);
    }
    .btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }
    .btn [data-lucide] { width: 16px; height: 16px; }

    /* Hero right rail — photo on top, agent diagram below.
       Photo says "human designer", diagram says "designs AI systems".
       Together: the positioning made literal. */
    .hero-rail { display: flex; flex-direction: column; gap: var(--space-4); max-width: 380px; margin-left: auto; }

    /* Tablet (~721–1024px): photo + loop diagram sit side-by-side. On phone (≤720px)
       the .hero-rail rule below in the 720px media query flips it back to a stack. */
    @media (min-width: 721px) and (max-width: 1024px) {
      .hero-rail {
        flex-direction: row;
        max-width: none;
        margin-left: 0;
        align-items: stretch;
      }
      .hero-rail > .hero-photo-card,
      .hero-rail > .hero-diagram { flex: 1 1 0; min-width: 0; }
    }

    /* Both cards (photo + diagram) share the same chrome:
       same padding, border, radius, shadow, label-strip placement.
       They read as a pair. */
    .hero-photo-card,
    .hero-diagram {
      position: relative; margin: 0;
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      background: var(--bg-surface); padding: var(--space-4);
      box-shadow: var(--shadow);
    }

    /* Top label strip — shared by both cards. Lives ABOVE the content. */
    .hero-photo-meta,
    .hero-rail .diagram-label-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--space-3);
      margin-bottom: var(--space-3);
      min-height: 18px;
    }
    .hero-photo-meta .label,
    .hero-rail .diagram-label {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase;
      margin: 0;
    }
    .hero-photo-meta .pill,
    .hero-rail .diagram-pill {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--accent); background: var(--accent-soft);
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      padding: 2px 6px; border-radius: var(--radius-sm); letter-spacing: .04em;
    }

    /* Photo content */
    .hero-photo-card img {
      display: block; width: 100%; height: auto;
      border-radius: var(--radius-md);
      aspect-ratio: 4 / 3; object-fit: cover;
    }

    /* Diagram content */
    .diagram-svg { width: 100%; height: 180px; display: block; }
    .diagram-node {
      fill: var(--bg-elevated);
      stroke: var(--border-strong); stroke-width: 1;
    }
    .diagram-node-accent { fill: var(--accent-soft); stroke: var(--accent); }
    .diagram-text { fill: var(--text-primary); font: 500 11px var(--font-sans); }
    .diagram-text-muted { fill: var(--text-muted); font: 500 10px var(--font-mono); letter-spacing: .05em; }
    .diagram-arrow { stroke: var(--text-muted); stroke-width: 1.2; fill: none; marker-end: url(#arrow); }

    /* =========================================================
       "Now" strip
       ========================================================= */
    .now-strip {
      padding: var(--space-5) var(--space-6);
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-md);
      display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5);
      align-items: center;
      margin-top: var(--space-12);
    }
    .now-strip [data-lucide] { width: 18px; height: 18px; color: var(--accent); }
    .now-strip-text { font-size: var(--text-sm); color: var(--text-secondary); }
    .now-strip-text strong { color: var(--text-primary); font-weight: 500; }
    .now-strip-meta {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--text-muted); letter-spacing: .05em;
    }

    /* =========================================================
       Section heading row
       ========================================================= */
    .section-head {
      display: flex; align-items: end; justify-content: space-between;
      gap: var(--space-6); margin-bottom: var(--space-10);
    }
    .section-head h2 {
      font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -.02em;
      font-weight: 600; margin: 0;
    }
    .section-head p {
      color: var(--text-secondary); font-size: var(--text-md); max-width: 50ch;
      margin: var(--space-3) 0 0;
    }
    .section-link {
      color: var(--text-secondary); font-size: var(--text-sm);
      display: inline-flex; align-items: center; gap: var(--space-2);
      transition: color var(--tx-fast); white-space: nowrap;
    }
    .section-link:hover { color: var(--text-primary); }
    .section-link [data-lucide] { width: 16px; height: 16px; transition: transform var(--tx-fast); }
    .section-link:hover [data-lucide] { transform: translateX(2px); }

    /* =========================================================
       Featured Work — card grid (Skill Builder card style)
       ========================================================= */
    .work-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
    }
    @media (max-width: 720px) { .work-grid { grid-template-columns: 1fr; } }

    .work-card {
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      display: flex; flex-direction: column;
      min-height: 280px;
      transition: border-color var(--tx-base), background var(--tx-base), transform var(--tx-base);
      position: relative; overflow: hidden;
    }
    .work-card:hover {
      border-color: var(--border-strong);
      background: var(--bg-elevated);
      transform: translateY(-2px);
    }
    .work-card[data-featured="true"] {
      grid-column: span 2;
      min-height: 340px;
    }
    @media (max-width: 720px) { .work-card[data-featured="true"] { grid-column: span 1; } }

    .work-card-tags {
      display: flex; gap: var(--space-2); margin-bottom: var(--space-5);
    }
    .tag {
      padding: 3px var(--space-2); font-size: 11px;
      font-family: var(--font-mono); letter-spacing: .04em;
      color: var(--text-secondary); background: var(--bg-base);
      border: 1px solid var(--border); border-radius: var(--radius-sm);
    }
    .tag-accent {
      color: var(--accent); background: var(--accent-soft);
      border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    }

    .work-card h3 {
      font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em;
      margin: 0 0 var(--space-3); line-height: 1.25;
    }
    .work-card p {
      color: var(--text-secondary); font-size: var(--text-base);
      margin: 0; flex: 1;
    }
    .work-card-foot {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: var(--space-6); padding-top: var(--space-4);
      border-top: 1px dashed var(--border);
    }
    .work-card-stats {
      display: flex; gap: var(--space-4); font-size: var(--text-xs);
      color: var(--text-muted); font-family: var(--font-mono); letter-spacing: .04em;
    }
    .work-card-stats span strong { color: var(--text-primary); font-weight: 500; }
    .work-card-arrow {
      color: var(--text-muted); transition: color var(--tx-fast), transform var(--tx-fast);
    }
    .work-card:hover .work-card-arrow { color: var(--accent); transform: translateX(3px); }

    /* Featured card gets a tiny architecture vignette in the background */
    .work-card-vignette {
      position: absolute; right: -40px; bottom: -40px;
      width: 220px; height: 220px;
      opacity: .5; pointer-events: none;
    }
    .work-card-vignette circle, .work-card-vignette rect {
      fill: none; stroke: var(--border-strong); stroke-width: 1;
    }

    /* =========================================================
       Writing list
       ========================================================= */
    .writing { display: flex; flex-direction: column; gap: var(--space-2); }
    .writing-item {
      display: grid; grid-template-columns: 80px 1fr auto;
      gap: var(--space-6); align-items: center;
      padding: var(--space-5);
      border: 1px solid transparent; border-radius: var(--radius-md);
      transition: background var(--tx-fast), border-color var(--tx-fast);
    }
    .writing-item:hover {
      background: var(--bg-surface); border-color: var(--border);
    }
    .writing-date {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase;
    }
    .writing-title { font-size: var(--text-md); font-weight: 500; color: var(--text-primary); margin: 0 0 4px; }
    .writing-sub   { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
    .writing-meta {
      display: flex; align-items: center; gap: var(--space-3);
      font-size: var(--text-xs); color: var(--text-muted);
      font-family: var(--font-mono); letter-spacing: .04em;
    }
    .writing-meta [data-lucide] { width: 14px; height: 14px; }
    @media (max-width: 720px) {
      .writing-item { grid-template-columns: 1fr; gap: var(--space-2); }
      .writing-meta { display: none; }
    }

    /* =========================================================
       Principles strip
       ========================================================= */
    .principles {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: var(--space-4);
    }
    @media (max-width: 880px) { .principles { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .principles { grid-template-columns: 1fr; } }
    .principle {
      padding: var(--space-5);
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    .principle-num {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--accent); letter-spacing: .08em; margin-bottom: var(--space-3);
    }
    .principle h4 {
      font-size: var(--text-md); font-weight: 600; margin: 0 0 var(--space-2);
    }
    .principle p {
      font-size: var(--text-sm); color: var(--text-secondary); margin: 0; line-height: 1.55;
    }

    /* =========================================================
       Highlights — career reel: photo collage + bulleted list
       ========================================================= */
    .highlights {
      display: grid; grid-template-columns: minmax(280px, 5fr) 7fr;
      gap: var(--space-10); align-items: start;
    }
    @media (max-width: 880px) { .highlights { grid-template-columns: 1fr; gap: var(--space-8); } }

    .highlights-collage {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: var(--space-3);
      aspect-ratio: 1 / 1;
    }
    .highlights-collage figure {
      margin: 0; position: relative;
      border: 1px solid var(--border); border-radius: var(--radius-md);
      overflow: hidden; background: var(--bg-surface);
    }
    .highlights-collage img {
      width: 100%; height: 100%;
      object-fit: contain; display: block;
      padding: var(--space-2);
      box-sizing: border-box;
      filter: grayscale(.3) contrast(.97) brightness(.93);
      transition: filter var(--tx-base);
    }
    [data-theme="light"] .highlights-collage img {
      filter: grayscale(.18) contrast(1) brightness(1);
    }
    .highlights-collage figure:hover img { filter: grayscale(0) contrast(1) brightness(1); }
    .highlights-collage .h-main { grid-row: 1 / -1; grid-column: 1; }
    .highlights-collage .h-a    { grid-row: 1; grid-column: 2; }
    .highlights-collage .h-b    { grid-row: 2; grid-column: 2; }
    .highlights-collage figcaption {
      position: absolute; left: 8px; bottom: 8px;
      font-family: var(--font-mono); font-size: 10px;
      color: var(--text-secondary);
      background: color-mix(in srgb, var(--bg-base) 75%, transparent);
      padding: 2px 6px; border-radius: 4px;
      letter-spacing: .04em;
    }

    .highlights-list {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column;
      gap: var(--space-5);
    }
    .highlights-item {
      display: grid; grid-template-columns: auto 1fr;
      gap: var(--space-4); align-items: start;
      padding: var(--space-5) 0;
      border-top: 1px solid var(--border);
    }
    .highlights-item:first-child { border-top: none; padding-top: 0; }
    .highlights-num {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--accent); letter-spacing: .08em;
      padding-top: 4px; min-width: 36px;
    }
    .highlights-body h4 {
      font-size: var(--text-md); font-weight: 600;
      margin: 0 0 var(--space-2); color: var(--text-primary);
      line-height: 1.35;
    }
    .highlights-body h4 .h-org {
      color: var(--text-muted); font-weight: 400;
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: .04em; margin-left: var(--space-2);
      text-transform: uppercase;
    }
    .highlights-body p {
      margin: 0; font-size: var(--text-sm);
      color: var(--text-secondary); line-height: 1.6;
    }
    .highlights-body p strong {
      color: var(--text-primary); font-weight: 500;
    }

    /* =========================================================
       Career arc — text-only timeline used on the home page.
       Four chapter cards in a row; collapses to 2 then 1 column on
       narrow viewports. No photos — the photo collage version lives
       only at higher fidelity on /about.
       ========================================================= */
    .career-timeline {
      list-style: none; margin: 0; padding: 0;
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: var(--space-3);
    }
    @media (max-width: 880px) { .career-timeline { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .career-timeline { grid-template-columns: 1fr; } }
    .career-timeline > li {
      padding: var(--space-5);
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-md);
      display: flex; flex-direction: column; gap: var(--space-2);
    }
    .career-timeline .ch-num {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--accent); letter-spacing: .08em;
    }
    .career-timeline h4 {
      font-size: var(--text-md); font-weight: 600;
      margin: 0; color: var(--text-primary); line-height: 1.3;
    }
    .career-timeline .ch-org {
      display: block; margin-top: 4px;
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: .04em; text-transform: uppercase;
      color: var(--text-muted); font-weight: 400;
    }
    .career-timeline p {
      font-size: var(--text-sm); color: var(--text-secondary);
      margin: 0; line-height: 1.5;
    }

    /* =========================================================
       Article list (mini) — date + title only, no subtitles or
       icons. Used on the home page as a "taste" of recent writing.
       Full archive lives on /writing.html.
       ========================================================= */
    .article-list-mini {
      list-style: none; margin: 0; padding: 0;
      border-top: 1px dashed var(--border);
    }
    .article-list-mini > li { border-bottom: 1px dashed var(--border); }
    .article-list-mini a {
      display: grid;
      grid-template-columns: 110px 1fr auto;
      gap: var(--space-4); align-items: baseline;
      padding: var(--space-4) 0;
      color: var(--text-primary);
      transition: color var(--tx-fast);
    }
    .article-list-mini a:hover { color: var(--accent); }
    .article-list-mini .date {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--text-muted); letter-spacing: .04em;
      text-transform: uppercase; white-space: nowrap;
    }
    .article-list-mini .title {
      font-size: var(--text-md); font-weight: 500; line-height: 1.4;
    }
    .article-list-mini .icon {
      width: 14px; height: 14px;
      color: var(--text-muted);
      transition: color var(--tx-fast), transform var(--tx-fast);
    }
    .article-list-mini a:hover .icon {
      color: var(--accent);
      transform: translate(2px, -2px);
    }
    @media (max-width: 480px) {
      .article-list-mini a { grid-template-columns: 1fr auto; gap: var(--space-2); }
      .article-list-mini .date { grid-column: 1 / -1; }
    }

    /* =========================================================
       Testimonials — quiet, single-column list, not a slider
       ========================================================= */
    .quotes { display: grid; gap: var(--space-5); grid-template-columns: 1fr 1fr; }
    @media (max-width: 720px) { .quotes { grid-template-columns: 1fr; } }
    .quote {
      padding: var(--space-6);
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    .quote blockquote {
      margin: 0 0 var(--space-4); font-size: var(--text-md);
      color: var(--text-primary); line-height: 1.55;
    }
    .quote blockquote::before {
      content: "\201C"; color: var(--accent); font-size: 28px; line-height: 1;
      margin-right: 4px; font-family: Georgia, serif;
    }
    .quote-author { display: flex; align-items: center; gap: var(--space-3); }
    .quote-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--bg-hover); border: 1px solid var(--border);
      display: grid; place-items: center;
      font-size: var(--text-xs); color: var(--text-secondary);
      font-weight: 600; overflow: hidden;
    }
    .quote-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .quote-meta { font-size: var(--text-sm); }
    .quote-meta strong { color: var(--text-primary); display: block; font-weight: 500; }
    .quote-meta span  { color: var(--text-muted); }

    /* =========================================================
       Footer
       ========================================================= */
    footer {
      padding: var(--space-16) 0 var(--space-12);
      border-top: 1px solid var(--border);
    }
    .footer-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: var(--space-10); margin-bottom: var(--space-10);
    }
    @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
    .footer-col h5 {
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--text-muted); margin: 0 0 var(--space-4);
    }
    .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
    .footer-col a { color: var(--text-secondary); font-size: var(--text-sm); transition: color var(--tx-fast); }
    .footer-col a:hover { color: var(--text-primary); }
    .footer-bottom {
      padding-top: var(--space-6); border-top: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      font-size: var(--text-sm); color: var(--text-muted);
    }
    .footer-bottom-mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em; }

    /* =========================================================
       Reduced motion
       ========================================================= */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }

    /* =========================================================
       Case study layout — appended for /work/*.html pages
       ========================================================= */

    .cs-back {
      display: flex; width: fit-content;
      align-items: center; gap: var(--space-2);
      font-size: var(--text-sm); color: var(--text-muted);
      margin-bottom: var(--space-6); transition: color var(--tx-fast);
    }
    .cs-back:hover { color: var(--text-primary); }
    .cs-back .icon { width: 14px; height: 14px; transition: transform var(--tx-fast); }
    .cs-back:hover .icon { transform: translateX(-3px); }

    .cs-hero { padding: var(--space-12) 0 var(--space-10); border-bottom: 1px solid var(--border); }
    .cs-hero h1 {
      font-size: clamp(32px, 4.5vw, 52px); line-height: 1.1;
      letter-spacing: -.02em; font-weight: 600; margin: 0 0 var(--space-5);
      max-width: 18ch;
    }
    .cs-hero h1 .accent { color: var(--accent); }
    .cs-hero-lede {
      font-size: var(--text-lg); color: var(--text-secondary);
      max-width: 60ch; margin: 0 0 var(--space-8); line-height: 1.55;
    }

    /* Metadata strip under hero — role / year / stack / status */
    .cs-meta {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
      padding: var(--space-5) 0; border-top: 1px dashed var(--border);
    }
    @media (max-width: 720px) { .cs-meta { grid-template-columns: 1fr 1fr; } }
    .cs-meta-item {}
    .cs-meta-label {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase;
      margin-bottom: var(--space-2);
    }
    .cs-meta-value { font-size: var(--text-sm); color: var(--text-primary); }

    /* Body — wide editorial container that aligns with the hero (both
       at 1080). Vertical padding only; horizontal stays inherited from
       .page so articles using class="cs-body page" keep the same
       left/right gutter as the hero section above them. */
    .cs-body {
      max-width: 1080px; margin: 0 auto;
      padding-top: var(--space-16); padding-bottom: var(--space-16);
    }
    /* Constrain prose paragraphs and lists to a comfortable reading
       measure inside the wider 1080 container — keeps line length
       readable while letting images, diagrams, and structured blocks
       span the full column. */
    .cs-body > p,
    .cs-body > ul,
    .cs-body > ol,
    .cs-body > blockquote {
      max-width: 70ch;
    }
    .cs-body p, .cs-body ul, .cs-body ol {
      font-size: var(--text-md); line-height: 1.7; color: var(--text-secondary);
      margin: 0 0 var(--space-5);
    }
    .cs-body p strong, .cs-body li strong { color: var(--text-primary); font-weight: 500; }
    .cs-body h2 {
      font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.01em;
      color: var(--text-primary); margin: var(--space-12) 0 var(--space-4);
      max-width: 22ch;
    }
    .cs-body h2:first-child { margin-top: 0; }
    .cs-body h3 {
      font-size: var(--text-lg); font-weight: 600;
      color: var(--text-primary); margin: var(--space-8) 0 var(--space-3);
    }
    .cs-body code {
      font-family: var(--font-mono); font-size: 0.92em;
      background: var(--bg-surface); border: 1px solid var(--border);
      padding: 1px 6px; border-radius: 4px; color: var(--text-primary);
    }
    .cs-body ul li, .cs-body ol li { margin-bottom: var(--space-2); }
    .cs-body blockquote {
      margin: var(--space-8) 0; padding: var(--space-5) var(--space-6);
      border-left: 3px solid var(--accent); background: var(--bg-surface);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      font-size: var(--text-lg); color: var(--text-primary); line-height: 1.6;
    }
    .cs-body hr {
      border: 0; border-top: 1px dashed var(--border);
      margin: var(--space-12) 0;
    }

    /* TL;DR card */
    .cs-tldr {
      padding: var(--space-5) var(--space-6);
      background: var(--accent-soft);
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      border-radius: var(--radius-md);
      margin: 0 0 var(--space-10);
    }
    .cs-tldr-label {
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--accent); margin-bottom: var(--space-2);
    }
    .cs-tldr p { margin: 0; color: var(--text-primary); font-size: var(--text-md); line-height: 1.6; }

    /* Stat callouts — outcomes */
    .cs-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
      margin: var(--space-8) 0;
    }
    @media (max-width: 720px) { .cs-stats { grid-template-columns: 1fr; } }
    .cs-stat {
      padding: var(--space-5);
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    .cs-stat-num {
      font-size: 32px; font-weight: 600; letter-spacing: -.02em;
      color: var(--text-primary); line-height: 1; margin-bottom: var(--space-2);
    }
    .cs-stat-num .accent { color: var(--accent); }
    .cs-stat-label {
      font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.4;
    }

    /* Comparison cards — Good Trigger / Bad Trigger */
    .cs-compare {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
      margin: var(--space-6) 0;
    }
    @media (max-width: 720px) { .cs-compare { grid-template-columns: 1fr; } }
    .cs-compare-card {
      padding: var(--space-5);
      border: 1px solid var(--border);
      border-radius: var(--radius-md); background: var(--bg-surface);
    }
    .cs-compare-card[data-tone="bad"] {
      border-color: color-mix(in srgb, var(--rose) 40%, var(--border));
      background: var(--rose-bg);
    }
    .cs-compare-card[data-tone="good"] {
      border-color: color-mix(in srgb, var(--green) 40%, var(--border));
      background: var(--green-bg);
    }
    .cs-compare-head {
      display: flex; align-items: center; gap: var(--space-2);
      font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3);
    }
    .cs-compare-card[data-tone="bad"]  .cs-compare-head { color: var(--rose); }
    .cs-compare-card[data-tone="good"] .cs-compare-head { color: var(--green); }
    .cs-compare-head [data-lucide] { width: 16px; height: 16px; }
    .cs-compare-card pre {
      font-family: var(--font-mono); font-size: var(--text-sm);
      color: var(--text-primary);
      background: var(--bg-base); border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: var(--space-3); margin: 0;
      overflow-x: auto;
    }

    /* Inline figure — for re-illustrated diagrams */
    .cs-figure {
      margin: var(--space-10) 0; padding: var(--space-8);
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg); position: relative;
    }
    .cs-figure-label {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase;
      margin-bottom: var(--space-5);
    }
    .cs-figure svg { width: 100%; height: auto; display: block; }
    .cs-figure-caption {
      font-size: var(--text-sm); color: var(--text-muted);
      text-align: center; margin-top: var(--space-4); font-style: italic;
    }

    /* Spec block — code-like rules */
    .cs-spec {
      margin: var(--space-6) 0; padding: var(--space-5);
      background: var(--bg-base); border: 1px solid var(--border);
      border-radius: var(--radius-md);
      font-family: var(--font-mono); font-size: var(--text-sm);
      color: var(--text-primary); line-height: 1.7;
      overflow-x: auto;
    }
    .cs-spec .key   { color: var(--accent); }
    .cs-spec .str   { color: var(--green); }
    .cs-spec .com   { color: var(--text-muted); }

    /* Pipeline diagram — 3-phase boxes for Meeting Agent */
    .cs-pipeline {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
      margin: var(--space-6) 0;
    }
    @media (max-width: 720px) { .cs-pipeline { grid-template-columns: 1fr; } }
    .cs-pipeline-step {
      padding: var(--space-5); position: relative;
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    .cs-pipeline-step::after {
      content: "→"; position: absolute;
      right: -18px; top: 50%; transform: translateY(-50%);
      color: var(--text-muted); font-size: 18px;
    }
    .cs-pipeline-step:last-child::after { content: none; }
    @media (max-width: 720px) { .cs-pipeline-step::after { content: none; } }
    .cs-pipeline-num {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--accent); letter-spacing: .08em; margin-bottom: var(--space-2);
    }
    .cs-pipeline-step h4 {
      font-size: var(--text-md); font-weight: 600; margin: 0 0 var(--space-2);
    }
    .cs-pipeline-step p {
      font-size: var(--text-sm); color: var(--text-secondary);
      margin: 0; line-height: 1.5;
    }

    /* Footer pagination — prev/next case study */
    .cs-pagination {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
      margin-top: var(--space-12); padding-top: var(--space-8);
      border-top: 1px solid var(--border);
    }
    @media (max-width: 720px) { .cs-pagination { grid-template-columns: 1fr; } }
    .cs-pag {
      padding: var(--space-5);
      border: 1px solid var(--border); border-radius: var(--radius-md);
      background: var(--bg-surface);
      transition: background var(--tx-fast), border-color var(--tx-fast);
    }
    .cs-pag:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
    .cs-pag-label {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase;
      margin-bottom: var(--space-2);
    }
    .cs-pag-title {
      font-size: var(--text-md); color: var(--text-primary); font-weight: 500;
    }
    .cs-pag[data-dir="next"] { text-align: right; }

    /* =========================================================
       Inline SVG icon system — replaces Lucide CDN runtime.
       Sprite lives at top of each page; use via <svg class="icon"><use href="#i-NAME"/></svg>
       ========================================================= */
    .icon {
      width: 1em; height: 1em;
      stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round;
      fill: none;
      vertical-align: -0.15em; flex-shrink: 0;
    }
    .icon-sm { width: 14px; height: 14px; }
    .icon-md { width: 16px; height: 16px; }
    .icon-lg { width: 18px; height: 18px; }

    /* =========================================================
       Wireframe placeholders — for case study screens, holds to
       principles-only posture (no real product UI)
       ========================================================= */
    .cs-wire {
      position: relative; margin: var(--space-10) 0;
      border-radius: var(--radius-lg);
      background: var(--bg-base); border: 1px solid var(--border);
      padding: var(--space-3); overflow: hidden;
    }
    .cs-wire-label {
      position: absolute; top: var(--space-3); left: var(--space-4);
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--text-muted); z-index: 2;
      background: var(--bg-base); padding: 2px 6px;
    }
    .cs-wire-frame {
      width: 100%; height: auto; display: block;
      border-radius: var(--radius-md);
    }
    .cs-wire-caption {
      font-size: var(--text-sm); color: var(--text-muted);
      text-align: center; margin-top: var(--space-3);
      font-style: italic;
    }
    /* Wireframe SVG primitives — used inside the .cs-wire-frame SVGs */
    .wf-bg     { fill: var(--bg-surface); stroke: var(--border-strong); stroke-width: 1; }
    .wf-pane   { fill: var(--bg-elevated); stroke: var(--border); stroke-width: 1; }
    .wf-card   { fill: var(--bg-base); stroke: var(--border); stroke-width: 1; }
    .wf-accent { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; opacity: .8; }
    .wf-line   { stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; opacity: .55; }
    .wf-line-strong { stroke: var(--text-muted); stroke-width: 3; stroke-linecap: round; opacity: .65; }
    .wf-dot    { fill: var(--text-muted); opacity: .5; }
    .wf-dot-a  { fill: var(--accent); }
    .wf-text   { fill: var(--text-muted); font: 500 9px var(--font-mono); letter-spacing: .04em; opacity: .75; }

    /* =========================================================
       Editorial overline above hero H1 — replaces the SaaS-pill cliché.
       Reads like a magazine deck, not a status indicator.
       ========================================================= */
    .hero-overline {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: var(--space-5);
      padding-bottom: var(--space-3);
      border-bottom: 1px solid var(--border);
      display: inline-block;
    }

    /* Now-strip — tag-led instead of icon-led */
    .now-strip-tag {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--accent); background: var(--accent-soft);
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      padding: 4px 8px; border-radius: var(--radius-sm);
      letter-spacing: .12em; text-transform: uppercase;
      align-self: center;
    }

    /* =========================================================
       Case study extras — for richer content (research artifacts,
       personas, two-up research grids, journey strips)
       ========================================================= */

    /* Supporting image card — research / journey / workshop shots.
       Sized as a "minor" content element rather than a full-bleed
       banner: capped width, centered in the column, breathes within
       the prose. Used to be width:100% (banner-sized) — too dominant. */
    .cs-image {
      margin: var(--space-10) auto;
      max-width: 520px;
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      background: var(--bg-surface); overflow: hidden;
    }
    /* Case study detail pages — figures span the full editorial width. */
    .cs-body-detail .cs-image,
    .cs-body-detail .cs-wire,
    .cs-body-detail .cs-figure {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .cs-image img {
      display: block; width: 100%; height: auto;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .cs-image figcaption, .cs-image-caption {
      padding: var(--space-3) var(--space-5);
      font-size: var(--text-sm); color: var(--text-muted);
      font-style: italic; border-top: 1px solid var(--border);
    }

    /* FLAT modifier — strips the container chrome so figures read as
       editorial illustrations, not card-wrapped screenshots. No border,
       no background, no rounded box; caption sits below as a plain
       italic line with no border-top divider. Also widens the figure to
       100% of its parent (the default .cs-image caps at 520px which is
       fine for /process but cramps everything on detail pages). */
    .cs-image-flat {
      border: 0;
      background: transparent;
      border-radius: 0;
      overflow: visible;
      max-width: 100%;
    }
    .cs-image-flat img {
      border-radius: 0;
    }
    .cs-image-flat figcaption,
    .cs-image-flat .cs-image-caption {
      padding: var(--space-3) 0 0;
      border-top: 0;
      text-align: left;
    }

    /* HERO modifier — breaks out of the .page width cap so the asset
       can be big and impressive. Capped at 1600px so giant monitors
       don't render it absurdly large, but uses 92vw otherwise. */
    .cs-image-hero {
      max-width: min(1600px, 92vw);
      margin-top: var(--space-10);
      margin-bottom: 0;
    }
    .cs-image-hero img {
      width: 100%;
      height: auto;
    }

    /* Soft inversion in dark mode for light-background research images */
    [data-theme="dark"] .cs-image-photo img {
      /* leave photos alone; they read fine on dark */
    }
    [data-theme="dark"] .cs-image-flat img {
      filter: brightness(.92) contrast(.95);
    }

    /* Two-column research grid (Quantitative / Qualitative, etc.) */
    .cs-cols {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
      margin: var(--space-6) 0;
    }
    @media (max-width: 720px) { .cs-cols { grid-template-columns: 1fr; } }
    .cs-col {
      padding: var(--space-5);
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    .cs-col h4 {
      font-size: var(--text-md); font-weight: 600;
      margin: 0 0 var(--space-3); color: var(--text-primary);
    }
    .cs-col h4 .mono {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--text-muted); letter-spacing: .08em;
      text-transform: uppercase; margin-left: var(--space-2);
    }
    .cs-col ul { font-size: var(--text-sm); line-height: 1.65; margin: 0; padding-left: 18px; }
    .cs-col li { margin-bottom: var(--space-2); color: var(--text-secondary); }

    /* Persona block — primary persona with quote */
    .cs-persona {
      display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6);
      align-items: start; margin: var(--space-6) 0;
    }
    @media (max-width: 720px) { .cs-persona { grid-template-columns: 1fr; } }
    .cs-persona-text {}
    .cs-persona-text h4 {
      font-size: var(--text-md); font-weight: 600; margin: 0 0 var(--space-3);
      color: var(--text-primary);
    }
    .cs-persona-text .role-tag {
      display: inline-block; font-family: var(--font-mono); font-size: 10px;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--accent); background: var(--accent-soft);
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      padding: 2px 8px; border-radius: var(--radius-sm); margin-bottom: var(--space-3);
    }
    .cs-persona-quote {
      padding: var(--space-5);
      border-left: 3px solid var(--accent); background: var(--bg-surface);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      font-size: var(--text-md); color: var(--text-primary); line-height: 1.6;
      font-style: italic;
    }

    /* Journey strip — 6 phases as a stacked editorial list with phase tags */
    .cs-journey { margin: var(--space-6) 0; }
    .cs-journey-row {
      display: grid; grid-template-columns: 110px 1fr; gap: var(--space-5);
      padding: var(--space-4) 0;
      border-bottom: 1px dashed var(--border);
    }
    .cs-journey-row:last-child { border-bottom: none; }
    .cs-journey-stage {
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--accent);
      padding-top: 2px;
    }
    .cs-journey-body h5 {
      font-size: var(--text-md); font-weight: 600; margin: 0 0 6px;
      color: var(--text-primary);
    }
    .cs-journey-body p {
      font-size: var(--text-sm); color: var(--text-secondary);
      margin: 0; line-height: 1.55;
    }

    /* =========================================================
       Agent cards — used on /process for the four agents that
       automate UX friction. Each card pairs prose with a
       wireframe-style SVG artifact illustrating what the agent
       produces. The aesthetic mirrors the rest of the spec/wireframe
       visual language already in use across the site.
       ========================================================= */
    .cs-agents {
      display: flex; flex-direction: column;
      gap: var(--space-6);
      margin: var(--space-8) 0;
    }
    .cs-agent {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
    }
    .cs-agent-head {
      margin-bottom: var(--space-5);
      padding-bottom: var(--space-4);
      border-bottom: 1px dashed var(--border);
    }
    .cs-agent-stage {
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--accent);
    }
    .cs-agent-head h5 {
      font-size: var(--text-lg); font-weight: 600;
      margin: var(--space-2) 0 0;
      color: var(--text-primary); line-height: 1.35;
    }
    .cs-agent-body {
      max-width: 70ch;
      margin: 0 0 var(--space-5);
    }
    .cs-agent-body p {
      font-size: var(--text-md); color: var(--text-secondary);
      margin: 0 0 var(--space-3); line-height: 1.6;
    }
    .cs-agent-body p:last-child { margin-bottom: 0; }
    .cs-agent-body p strong { color: var(--text-primary); font-weight: 500; }

    /* Two-up artifact row: wireframe schematic on the left,
       real product screenshot on the right. Stacks on narrow. */
    .cs-agent-artifacts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
      align-items: start;
    }
    @media (max-width: 720px) {
      .cs-agent-artifacts { grid-template-columns: 1fr; }
    }

    /* Image-pair variants. Each agent card pairs the OLD way (a human
       photo of the work as it was — workshops, sketching, presenting,
       reviewing) with the NEW way (a screenshot of the AFX UX Research
       App doing the same job). Both lift to full color on card hover.
         .cs-agent-then  — the human / "before" photo (a touch warmer)
         .cs-agent-real  — the AI / "now" screenshot
    */
    .cs-agent-then,
    .cs-agent-real { padding: var(--space-3); }
    .cs-agent-then img,
    .cs-agent-real img {
      width: 100%; height: auto; display: block;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      transition: filter var(--tx-base);
    }
    /* "Then" — slightly warmer, slightly more grayscale to signal the
       older / human side of the pair. */
    .cs-agent-then img {
      filter: grayscale(.32) contrast(.95) brightness(.92) sepia(.06);
    }
    [data-theme="light"] .cs-agent-then img {
      filter: grayscale(.20) contrast(1) brightness(1) sepia(.04);
    }
    /* "Now" — closer to true color since these are crisp UI screenshots. */
    .cs-agent-real img {
      filter: grayscale(.18) contrast(.97) brightness(.95);
    }
    [data-theme="light"] .cs-agent-real img {
      filter: grayscale(.08) contrast(1) brightness(1);
    }
    /* Hover lifts both to full color so the "before/after" comparison
       reads as a single connected moment. */
    .cs-agent:hover .cs-agent-then img,
    .cs-agent:hover .cs-agent-real img {
      filter: grayscale(0) contrast(1) brightness(1);
    }

    .cs-agent-artifact {
      margin: 0; padding: var(--space-3) var(--space-4);
      background: var(--bg-base);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      position: relative;
    }
    .cs-agent-artifact .cs-wire-label {
      position: static; margin: 0 0 var(--space-2);
      display: block; padding: 0;
      background: transparent;
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .cs-agent-artifact svg {
      width: 100%; height: auto; display: block;
      border-radius: var(--radius-sm);
    }
    .cs-agent-artifact figcaption {
      margin-top: var(--space-3);
      font-size: var(--text-xs); color: var(--text-muted);
      font-style: italic; line-height: 1.5;
      text-align: center;
    }

    /* Research-photo grid — small 4-up of in-person research moments,
       used only inside the User Research block. Photos are intentionally
       small: research is the human part, not the artifact. */
    .cs-research-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-3);
    }
    @media (max-width: 720px) {
      .cs-research-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .cs-research-photo {
      margin: 0; padding: var(--space-2);
      background: var(--bg-base);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    .cs-research-photo img {
      width: 100%; aspect-ratio: 4/3; object-fit: cover;
      display: block;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      filter: grayscale(.32) contrast(.95) brightness(.92) sepia(.06);
      transition: filter var(--tx-base);
    }
    [data-theme="light"] .cs-research-photo img {
      filter: grayscale(.20) contrast(1) brightness(1) sepia(.04);
    }
    .cs-agent:hover .cs-research-photo img {
      filter: grayscale(0) contrast(1) brightness(1);
    }
    .cs-research-photo figcaption {
      margin-top: var(--space-2);
      font-family: var(--font-mono);
      font-size: 10px; color: var(--text-muted);
      letter-spacing: .04em;
      text-align: center;
    }

    /* Process-style wireframe frame — used inside an agent block instead
       of paired before/after images. Inherits .cs-wire chrome but sits
       flush in the agent body grid. */
    .cs-wire-process { margin: 0; }

    /* "What the agent does in this phase" — a compact, mono-led list
       that sits inside an agent body to spell out the automated steps.
       Reads like a tasks list in a build log. */
    .cs-agent-does {
      list-style: none; padding: 0;
      margin: var(--space-4) 0 0;
      border-top: 1px solid var(--border);
      padding-top: var(--space-4);
    }
    .cs-agent-does li {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      line-height: 1.6;
      padding: var(--space-1) 0;
      display: flex; align-items: baseline; gap: var(--space-2);
    }
    .cs-agent-does li::before {
      content: "→";
      font-family: var(--font-mono);
      color: var(--accent);
      font-size: 11px;
      flex: 0 0 auto;
    }
    .cs-agent-does .mono {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      color: var(--text-primary);
      letter-spacing: .02em;
    }

    /* Two-column lessons (What worked / What I'd do differently) */
    .cs-lessons {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
      margin: var(--space-6) 0;
    }
    @media (max-width: 720px) { .cs-lessons { grid-template-columns: 1fr; } }
    .cs-lesson-card {
      padding: var(--space-5);
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    .cs-lesson-card[data-tone="worked"] {
      border-left: 3px solid var(--green);
    }
    .cs-lesson-card[data-tone="next"] {
      border-left: 3px solid var(--accent);
    }
    .cs-lesson-card h4 {
      font-size: var(--text-md); font-weight: 600; margin: 0 0 var(--space-3);
    }
    .cs-lesson-card p {
      font-size: var(--text-sm); line-height: 1.6;
      color: var(--text-secondary); margin: 0 0 var(--space-3);
    }
    .cs-lesson-card p:last-child { margin-bottom: 0; }
    .cs-lesson-card p strong { color: var(--text-primary); }

    /* =========================================================
       Then/Now grid — for case studies that draw a line from
       legacy work to modern AI patterns
       ========================================================= */
    .cs-thennow {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
      margin: var(--space-6) 0;
    }
    @media (max-width: 720px) { .cs-thennow { grid-template-columns: 1fr; } }
    .cs-thennow-row {
      display: contents;
    }
    .cs-then, .cs-now {
      padding: var(--space-5);
      border: 1px solid var(--border); border-radius: var(--radius-md);
      background: var(--bg-surface);
    }
    .cs-then {
      border-left: 3px solid var(--text-muted);
    }
    .cs-now {
      border-left: 3px solid var(--accent);
      background: color-mix(in srgb, var(--bg-surface) 96%, var(--accent));
    }
    .cs-then-tag, .cs-now-tag {
      display: inline-block;
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: .12em; text-transform: uppercase;
      padding: 2px 6px; border-radius: var(--radius-sm);
      margin-bottom: var(--space-3);
    }
    .cs-then-tag {
      color: var(--text-muted); background: var(--bg-base);
      border: 1px solid var(--border);
    }
    .cs-now-tag {
      color: var(--accent); background: var(--accent-soft);
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    }
    .cs-then h5, .cs-now h5 {
      font-size: var(--text-md); font-weight: 600; margin: 0 0 var(--space-2);
      color: var(--text-primary);
    }
    .cs-then p, .cs-now p {
      font-size: var(--text-sm); color: var(--text-secondary);
      margin: 0; line-height: 1.55;
    }
    .cs-now p a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
    .cs-now p a:hover { border-bottom-color: var(--accent); }

    /* =========================================================
       Brand tool chips — for the Process page toolkit
       ========================================================= */
    .tool-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: var(--space-2);
      margin: var(--space-4) 0 0;
    }
    .tool-chip {
      display: flex; align-items: center; gap: var(--space-3);
      padding: 10px var(--space-3);
      background: var(--bg-base);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      transition: border-color var(--tx-fast), background var(--tx-fast), transform var(--tx-fast);
    }
    .tool-chip:hover {
      border-color: var(--border-strong);
      background: var(--bg-elevated);
      transform: translateY(-1px);
    }
    .tool-icon {
      width: 22px; height: 22px; flex-shrink: 0;
      color: var(--text-primary);
    }
    .tool-icon-accent { color: var(--accent); }
    .tool-name {
      font-size: var(--text-sm); font-weight: 500;
      color: var(--text-primary); line-height: 1.2;
    }

    /* =========================================================
       Project thumbnail inside work cards. Used in two flavors:
         .work-card-thumb  — SVG wireframe (principles-only)
         .work-card-image  — real product/artifact screenshot
       Both share the same compact 16/5 ratio so the work-grid
       reads as a consistent row of thumbnails on the home page.
       ========================================================= */
    .work-card-thumb,
    .work-card-image {
      width: 100%; aspect-ratio: 16 / 5;
      border-radius: var(--radius-sm);
      background: var(--bg-base);
      border: 1px solid var(--border);
      margin-bottom: var(--space-3);
      overflow: hidden; position: relative;
    }
    .work-card-thumb { opacity: .55; transition: opacity var(--tx-base); }
    .work-card:hover .work-card-thumb,
    a.work-card:hover .work-card-thumb { opacity: .85; }
    .work-card-thumb svg { width: 100%; height: 100%; display: block; }

    /* Real-image thumb treatment — soft grayscale that lifts on
       card hover. Uses object-fit: cover so wide product mockups
       fill the compact 16/5 frame defined above. */
    .work-card-image img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center top;
      display: block;
      filter: grayscale(.18) contrast(.98) brightness(.94);
      transition: filter var(--tx-base);
    }
    [data-theme="light"] .work-card-image img {
      filter: grayscale(.1) contrast(1) brightness(1);
    }
    .work-card:hover .work-card-image img,
    a.work-card:hover .work-card-image img {
      filter: grayscale(0) contrast(1) brightness(1);
    }

    /* =========================================================
       Writing page — banner + article cards
       ========================================================= */
    .wcai-banner {
      width: 100%; height: auto; display: block;
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      margin-top: var(--space-8);
    }
    [data-theme="dark"] .wcai-banner {
      filter: brightness(.92) contrast(1.02);
    }

    .pub-header {
      display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-10);
      align-items: end;
      padding: var(--space-12) 0 var(--space-8);
    }
    @media (max-width: 860px) { .pub-header { grid-template-columns: 1fr; } }
    .pub-meta {
      display: flex; flex-direction: column; gap: var(--space-3);
      font-size: var(--text-sm); color: var(--text-secondary);
    }
    .pub-meta-row {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: var(--space-4);
      padding: var(--space-3) 0;
      border-top: 1px dashed var(--border);
    }
    .pub-meta-row:last-child { border-bottom: 1px dashed var(--border); }
    .pub-meta-row .label {
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
    }
    .pub-meta-row .value { color: var(--text-primary); }

    /* Featured article hero card */
    .article-featured {
      display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8);
      padding: var(--space-8); align-items: center;
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      margin: var(--space-12) 0;
      transition: border-color var(--tx-fast), background var(--tx-fast);
    }
    .article-featured:hover {
      border-color: var(--border-strong); background: var(--bg-elevated);
    }
    @media (max-width: 860px) { .article-featured { grid-template-columns: 1fr; padding: var(--space-5); } }
    .article-featured-img {
      width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover;
      display: block; border-radius: var(--radius-md); border: 1px solid var(--border);
    }
    .article-featured h3 {
      font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.01em;
      line-height: 1.2; margin: var(--space-3) 0 var(--space-3);
    }
    .article-featured p {
      font-size: var(--text-md); color: var(--text-secondary);
      margin: 0 0 var(--space-5); line-height: 1.55;
    }
    .article-featured-meta {
      display: flex; align-items: center; gap: var(--space-3);
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: .04em; color: var(--text-muted);
      margin-bottom: var(--space-2);
    }
    .article-featured-cta {
      display: inline-flex; align-items: center; gap: var(--space-2);
      color: var(--accent); font-size: var(--text-sm); font-weight: 500;
    }
    .article-featured-cta::after { content: "→"; transition: transform var(--tx-fast); }
    .article-featured:hover .article-featured-cta::after { transform: translateX(4px); }

    /* Article grid for the rest */
    .article-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
      margin: var(--space-8) 0;
    }
    @media (max-width: 720px) { .article-grid { grid-template-columns: 1fr; } }

    .article-card {
      display: flex; flex-direction: column;
      background: var(--bg-surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg); overflow: hidden;
      transition: border-color var(--tx-base), transform var(--tx-base);
    }
    .article-card:hover {
      border-color: var(--border-strong);
      transform: translateY(-2px);
    }
    .article-card-img {
      width: 100%; aspect-ratio: 16/9; object-fit: cover;
      display: block; border-bottom: 1px solid var(--border);
    }
    .article-card-body {
      padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1;
    }
    .article-card-meta {
      display: flex; align-items: center; gap: var(--space-3);
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: .04em; color: var(--text-muted);
    }
    .article-card h4 {
      font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em;
      line-height: 1.25; margin: 0; color: var(--text-primary);
    }
    .article-card p {
      font-size: var(--text-sm); color: var(--text-secondary);
      margin: 0; line-height: 1.55; flex: 1;
    }
    .article-card-cta {
      display: inline-flex; align-items: center; gap: var(--space-2);
      color: var(--accent); font-size: var(--text-sm); font-weight: 500;
      margin-top: auto;
    }
    .article-card-cta::after { content: "→"; transition: transform var(--tx-fast); }
    .article-card:hover .article-card-cta::after { transform: translateX(3px); }

    /* External-link badge */
    .article-medium-tag {
      display: inline-flex; align-items: center; gap: 4px;
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .article-medium-tag::before {
      content: ""; width: 4px; height: 4px; border-radius: 50%;
      background: var(--text-muted);
    }

    /* Subscribe CTA */
    .pub-cta {
      margin-top: var(--space-12);
      padding: var(--space-8);
      background: var(--bg-surface);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      display: grid; grid-template-columns: 1fr auto; gap: var(--space-6);
      align-items: center;
    }
    @media (max-width: 720px) { .pub-cta { grid-template-columns: 1fr; } }
    .pub-cta h3 {
      font-size: var(--text-xl); font-weight: 600; margin: 0 0 var(--space-2);
      letter-spacing: -.01em;
    }
    .pub-cta p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }

    /* =========================================================
       New brand: monogram + wordmark (replaces the wireframe-box logo PNG)
       ========================================================= */
    .brand-mark {
      width: 28px; height: 28px;
      border-radius: 7px;
      background: var(--accent);
      display: grid; place-items: center;
      color: #fff;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 16px;
      line-height: 1;
      letter-spacing: -.04em;
      flex-shrink: 0;
      box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent);
    }
    .brand-wordmark {
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 15px;
      color: var(--text-primary);
      letter-spacing: -.005em;
      white-space: nowrap;
    }
    /* Slightly tighter footer variant */
    .footer-grid .brand .brand-mark { width: 24px; height: 24px; font-size: 14px; border-radius: 6px; }
    .footer-grid .brand .brand-wordmark { font-size: 14px; }

    /* =========================================================
       Brand v2 — bigger uppercase wordmark + agent-loop icon
       (overrides earlier .brand-mark / .brand-wordmark rules)
       ========================================================= */
    .brand-mark {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: var(--accent);
      display: grid; place-items: center;
      color: #fff;
      flex-shrink: 0;
      box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent);
      /* font-based "j" no longer needed — icon SVG fills the box */
      font-size: 0;
    }
    .brand-mark svg {
      width: 18px; height: 18px;
      display: block;
      stroke: #fff; fill: none;
      stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .brand-wordmark {
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 16px;
      color: var(--text-primary);
      letter-spacing: .09em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .footer-grid .brand .brand-mark { width: 28px; height: 28px; border-radius: 7px; }
    .footer-grid .brand .brand-mark svg { width: 16px; height: 16px; }
    .footer-grid .brand .brand-wordmark { font-size: 14px; }

    /* =========================================================
       Brand v5 — image logo (PNG with transparent background).
       Two variants: logo-white.png for dark theme, logo-black.png
       for light theme. CSS swaps via background-image, so no HTML
       edits are needed across the 8 pages — the existing .brand-mark
       and .brand-wordmark spans are simply hidden.
       ========================================================= */
    .brand {
      display: block;
      width: 130px;
      height: 32px;
      flex-shrink: 0;
      background-image: url('assets/brand/logo-white.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: left center;
      transition: filter var(--tx-fast), opacity var(--tx-fast);
    }
    [data-theme="light"] .brand {
      background-image: url('assets/brand/logo-black.png');
    }
    .brand:hover { opacity: .85; }
    .brand > * { display: none; }

    /* Footer logo — slightly smaller */
    .footer-grid .brand { width: 110px; height: 28px; }

    /* =========================================================
       Responsive system — proportional gutters + graceful reflow.
       The page gutter, section spacing, hero typography, topbar nav,
       and the now-strip all step down at narrower viewports so the
       body never pushes wider than the screen.
       ========================================================= */

    /* Safety net — any single full-bleed element (wide SVG, long URL,
       decorative offset) is clipped instead of forcing horizontal
       scroll. Applied to both html and body so neither scrolls.
       Sticky topbar is unaffected because clip doesn't create a
       scrolling container. */
    html, body { overflow-x: hidden; overflow-x: clip; }

    /* Tablet portrait + large phones — 720px and below */
    @media (max-width: 720px) {
      .page { padding: 0 var(--space-5); }
      section { padding: var(--space-16) 0; }
      .hero { padding: var(--space-16) 0 var(--space-12); }

      /* Topbar tightens but keeps brand visible */
      .topbar-inner { padding: var(--space-3) var(--space-5); gap: var(--space-3); }
      .nav { gap: 2px; }
      .nav a { padding: 6px var(--space-2); font-size: var(--text-xs); }
      .nav-divider { display: none; }
      .icon-btn { width: 30px; height: 30px; }

      /* Hero rail aligns with the column instead of floating right */
      .hero-rail { max-width: none; margin-left: 0; }

      /* Section heading row wraps; "see all" drops below the title */
      .section-head { flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }

      /* Now-strip: stack from 3 cols to 1 */
      .now-strip {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-4);
        margin-top: var(--space-8);
      }
      .now-strip-meta { font-size: 10px; opacity: .7; }

      /* Footer bottom row stacks */
      .footer-bottom {
        flex-direction: column;
        gap: var(--space-2);
        align-items: flex-start;
      }
    }

    /* Phones — 480px and below */
    @media (max-width: 480px) {
      .page { padding: 0 var(--space-4); }
      .topbar-inner { padding: var(--space-3) var(--space-4); gap: var(--space-2); }

      /* Logo scales down at narrow widths so it still fits beside the nav */
      .brand { width: 100px; height: 24px; }
      .footer-grid .brand { width: 95px; height: 24px; }

      /* Nav further compresses */
      .nav { gap: 0; }
      .nav a { padding: 6px 6px; font-size: 12px; letter-spacing: 0; }

      section { padding: var(--space-12) 0; }
      .hero { padding: var(--space-12) 0 var(--space-10); }

      /* Headline type scales down further on tiny screens */
      .hero h1 { font-size: clamp(28px, 8vw, 40px); }
      .cs-hero h1 { font-size: clamp(28px, 8vw, 40px); }
      .section-head h2 { font-size: var(--text-2xl); }
      .cs-body h2 { font-size: var(--text-xl); }

      /* Footer collapses to single column */
      .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }

      /* Override inline grid-template-columns on .principles
         (some pages set repeat(2,1fr) or repeat(3,1fr) inline,
         which beats class-based media queries without !important) */
      .principles[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
      }
    }

    /* Mid-narrow band — between 481px and 880px, principle grids
       with inline column overrides should collapse to 2 columns. */
    @media (min-width: 481px) and (max-width: 880px) {
      .principles[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }