@layer reset, base, layout, components, utilities;

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

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

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

  body { margin: 0; min-block-size: 100dvb; }

  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  button { background: none; border: 0; cursor: pointer; }

  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; margin: 0; }

  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; }

  ul, ol { padding-inline-start: 0; margin: 0; list-style: none; }

  a { color: inherit; text-decoration: none; }

  dialog { max-inline-size: min(100%, 38rem); max-block-size: 90dvb; border: 0; padding: 0; background: transparent; }

  dialog::backdrop { background: oklch(0.18 0.008 60 / 0.55); backdrop-filter: blur(10px) saturate(120%); }
}

@layer base {
  :root {
    /* Warm-cream surface palette — quiet confidence */
    --bg: oklch(0.97 0.008 80);
    --bg-elevated: oklch(0.94 0.012 75);
    --bg-card: oklch(0.96 0.01 78);
    --bg-deep: oklch(0.91 0.018 70);
    --bg-hero: oklch(0.95 0.014 75);

    /* Charcoal text scale, warm-toned */
    --fg: oklch(0.18 0.008 60);
    --fg-muted: oklch(0.42 0.012 60);
    --fg-subtle: oklch(0.62 0.01 60);
    --fg-faint: oklch(0.78 0.008 65);

    /* Subtle dividers */
    --line: oklch(0.86 0.012 75);
    --line-strong: oklch(0.72 0.014 70);
    --line-subtle: oklch(0.91 0.008 75);

    /* Primary CTA — warm near-black */
    --accent: oklch(0.22 0.018 60);
    --accent-hover: oklch(0.12 0.012 60);
    --accent-fg: oklch(0.97 0.008 80);

    /* Bold orange brand accent */
    --brand: oklch(0.68 0.21 47);
    --brand-soft: oklch(0.82 0.15 55);
    --brand-soft-fg: oklch(0.35 0.2 47);

    /* Dark surface system — used by nav + footer (inverse of body) */
    --bg-dark: oklch(0.18 0.008 70);
    --bg-dark-elevated: oklch(0.22 0.012 70);
    --fg-on-dark: oklch(0.92 0.018 75);
    --fg-on-dark-muted: oklch(0.66 0.025 70);
    --fg-on-dark-subtle: oklch(0.5 0.018 70);
    --line-on-dark: oklch(0.32 0.018 70);
    --line-on-dark-subtle: oklch(0.26 0.014 70);
    --brand-on-dark: oklch(0.72 0.19 50);

    /* Hero black surface */
    --bg-hero-dark: oklch(0.10 0.004 60);

    /* Type scale — editorial */
    --step--1: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
    --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
    --step-3: clamp(2rem, 1.7rem + 1.5vw, 2.875rem);
    --step-4: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --step-5: clamp(3.25rem, 2.5rem + 3.75vw, 5.75rem);
    --step-6: clamp(4rem, 3rem + 5vw, 8rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 12rem;

    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    --container: 76rem;
    --container-narrow: 60rem;
    --container-wide: 92rem;
    --inline-pad: clamp(1.25rem, 4vw, 3rem);

    --font-body: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-display: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-quart: cubic-bezier(0.77, 0, 0.175, 1);

    --shadow-sm: 0 1px 2px oklch(0.18 0.008 60 / 0.06);
    --shadow: 0 6px 28px oklch(0.18 0.008 60 / 0.08), 0 1px 2px oklch(0.18 0.008 60 / 0.04);
    --shadow-lg: 0 24px 64px oklch(0.18 0.008 60 / 0.16), 0 4px 12px oklch(0.18 0.008 60 / 0.06);

    --nav-h: 3.75rem;
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    font-feature-settings: "ss01", "ss02", "cv11";
    font-variation-settings: "wght" 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--accent); color: var(--accent-fg); }

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

  ::-webkit-scrollbar { inline-size: 12px; block-size: 12px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 3px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); }

  strong { font-weight: 600; color: var(--fg); }
  em { font-style: italic; }
}

@layer layout {
  .container {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--inline-pad);
  }

  .container-narrow {
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--inline-pad);
  }

  .container-wide {
    max-inline-size: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--inline-pad);
  }

  .stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-5)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-3)); align-items: center; }
  .between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }

  .grid { display: grid; gap: var(--gap, var(--space-5)); }
  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

  section { padding-block: var(--space-11); }

  @media (max-width: 48em) {
    section { padding-block: var(--space-9); }
  }
}

@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--accent);
    color: var(--accent-fg);
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform 0.2s var(--ease-soft);
    z-index: 200;
  }
  .skip-link:focus { transform: translateY(0); }

  .nav {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    block-size: var(--nav-h);
    background: oklch(1 0 0 / 0.94);
    backdrop-filter: blur(16px) saturate(140%);
    border-block-end: 1px solid var(--line-subtle);
    transition:
      background 0.35s var(--ease-soft),
      color 0.35s var(--ease-soft),
      border-color 0.35s var(--ease-soft);
  }
  .nav-links a,
  .nav .btn,
  .nav-toggle {
    transition:
      color 0.35s var(--ease-soft),
      background 0.35s var(--ease-soft),
      border-color 0.35s var(--ease-soft);
  }

  /* Transparent nav — applied while the hero is still behind it.
     Lets the hero's gradient + coat-of-arms layer show through behind
     the logo, links, and buttons. White-on-dark text and translucent
     button borders below stay legible against the gradient. */
  .nav.is-on-hero {
    background: transparent;
    backdrop-filter: none;
    border-block-end-color: transparent;
  }
  .nav.is-on-hero .nav-links a {
    color: oklch(0.99 0 0 / 0.78);
  }
  .nav.is-on-hero .nav-links a:hover { color: oklch(0.99 0 0); }
  .nav.is-on-hero .nav-toggle { color: oklch(0.99 0 0); }
  .nav.is-on-hero .btn-secondary {
    background: transparent;
    color: oklch(0.99 0 0);
    border-color: oklch(0.99 0 0 / 0.32);
  }
  .nav.is-on-hero .btn-secondary:hover {
    background: oklch(0.99 0 0);
    color: oklch(0.13 0.01 50);
    border-color: oklch(0.99 0 0);
  }
  .nav.is-on-hero .btn-primary {
    background: oklch(0.99 0 0);
    color: oklch(0.13 0.01 50);
  }
  .nav.is-on-hero .btn-primary:hover {
    background: var(--brand);
    color: oklch(0.13 0.01 50);
  }

  /* Logo swap — light variant only visible while nav is on the hero.
     Both <img> tags share the same source (img/logo.png, a white-on-
     transparent PNG). We invert the .logo-dark variant via CSS filter so
     the same asset renders black against the cream nav background once
     the user scrolls past the hero — no second image file required. */
  .nav-logo .logo-light { display: none; }
  .nav.is-on-hero .nav-logo .logo-dark { display: none; }
  .nav.is-on-hero .nav-logo .logo-light { display: block; }
  .nav-logo .logo-dark { filter: invert(1); }
  .nav-logo .logo-light { filter: none; }

  .nav-inner {
    max-inline-size: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--inline-pad);
    block-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .nav-logo {
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s var(--ease-soft);
  }
  .nav-logo:hover { opacity: 0.7; }
  .nav-logo img {
    block-size: 3.0rem;
    inline-size: auto;
    display: block;
    opacity: 1;
    transition: filter 0.3s var(--ease-soft);
  }

  .nav .btn {
    padding: 0.35rem 0.85rem;
    font-size: 0.8125rem;
  }

  .nav-links {
    display: flex;
    gap: var(--space-6);
    align-items: center;
  }
  .nav-links a {
    color: var(--fg-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: color 0.2s var(--ease-soft);
    position: relative;
  }
  .nav-links a:hover { color: var(--fg); }

  .nav-cta { display: flex; gap: var(--space-2); align-items: center; }

  .nav-toggle {
    display: none;
    padding: var(--space-2);
    color: var(--fg);
  }

  @media (max-width: 56em) {
    .nav-links { display: none; }
    .nav-toggle { display: block; }
    .nav-logo img { block-size: 1.375rem; }
    /* Mobile dropdown panel — always renders dark with bold white text
       regardless of whether the user is over the hero or scrolled past
       it. This guarantees readability in both nav states (the dropdown
       inheriting the cream surface would clash with the hero's white
       link color and become unreadable, which was the original bug). */
    .nav-mobile-open .nav-links {
      display: flex;
      flex-direction: column;
      position: absolute;
      inset-block-start: var(--nav-h);
      inset-inline: 0;
      background: oklch(0.10 0.004 60);
      padding: var(--space-6) var(--inline-pad);
      border-block-end: 1px solid oklch(0.99 0 0 / 0.12);
      gap: var(--space-4);
      box-shadow: var(--shadow-lg);
    }
    /* Force bold white links inside the open dropdown — overrides both
       the default .nav-links a (charcoal) and the .nav.is-on-hero
       .nav-links a (translucent white). The higher specificity here
       (.nav-mobile-open .nav-links a) wins regardless of nav state. */
    .nav-mobile-open .nav-links a,
    .nav.is-on-hero.nav-mobile-open .nav-links a {
      color: oklch(0.99 0 0);
      font-weight: 700;
    }
    .nav-mobile-open .nav-links a:hover,
    .nav.is-on-hero.nav-mobile-open .nav-links a:hover {
      color: var(--brand);
    }
    .nav-cta .btn-text { display: none; }
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
    line-height: 1.1;
    transition: background 0.25s var(--ease-soft), color 0.25s var(--ease-soft), border-color 0.25s var(--ease-soft), transform 0.25s var(--ease-soft);
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
  }

  .btn-primary {
    background: var(--accent);
    color: var(--accent-fg);
  }
  .btn-primary:hover { background: var(--accent-hover); }

  .btn-secondary {
    background: transparent;
    color: var(--fg);
    border-color: var(--line-strong);
  }
  .btn-secondary:hover {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
  }

  .btn-ghost {
    color: var(--fg-muted);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
  }
  .btn-ghost:hover { color: var(--fg); background: var(--bg-elevated); }

  .btn-large { padding: 0.95rem 1.75rem; font-size: 1rem; }

  .btn-arrow::after {
    content: "→";
    transition: transform 0.25s var(--ease-soft);
    display: inline-block;
  }
  .btn-arrow:hover::after { transform: translateX(4px); }

  .hero {
    position: relative;
    min-block-size: clamp(40rem, 96svh, 60rem);
    /* Pull the hero up so it extends full-bleed to the top of the page,
       behind the sticky nav. Compensate by adding the nav height back
       into padding-block-start so the visible hero content doesn't shift. */
    margin-block-start: calc(-1 * var(--nav-h));
    padding-block: calc(var(--space-7) + var(--nav-h)) var(--space-11);
    isolation: isolate;
    overflow: hidden;
    background: var(--bg-hero-dark);
    color: var(--fg-on-dark);
  }

  .hero-fallback {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(ellipse 90% 70% at 80% 15%, oklch(from var(--brand) calc(l + 0.05) c h / 0.28), transparent 72%),
      radial-gradient(ellipse 70% 60% at 10% 90%, oklch(from var(--brand) calc(l - 0.1) c h / 0.16), transparent 70%),
      var(--bg-hero-dark);
  }
  .hero-fallback::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/nickerson_coat_of_arms.jpg");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.22;
    mix-blend-mode: multiply;
    pointer-events: none;
    filter: saturate(0.55) brightness(0.95);
  }
  @media (max-width: 56em) {
    .hero-fallback::after { opacity: 0.18; }
  }

  .hero-canvas { display: none; }

  .hero-content {
    max-inline-size: 60rem;
    display: grid;
    gap: var(--space-5);
    align-content: start;
    padding-block-start: calc(clamp(2.5rem, 8vh, 5rem) + 40px);
    min-block-size: clamp(32rem, 80svh, 50rem);
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.45rem 0.95rem;
    border: 1px solid oklch(0.98 0 0 / 0.18);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    color: oklch(0.98 0 0 / 0.78);
    width: max-content;
    background: oklch(0 0 0 / 0.4);
    backdrop-filter: blur(8px);
    letter-spacing: -0.005em;
  }
  .hero-eyebrow::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px oklch(from var(--brand) l c h / 0.25);
  }

  .hero-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-5);
    line-height: 1.0;
    letter-spacing: -0.04em;
    color: oklch(0.99 0 0);
  }
  .hero-name em {
    font-weight: 400;
    color: var(--brand);
    font-style: normal;
  }

  .hero-tagline {
    font-size: var(--step-1);
    line-height: 1.4;
    color: oklch(0.99 0 0 / 0.78);
    max-inline-size: 36rem;
    font-weight: 400;
    letter-spacing: -0.005em;
  }

  .hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-3); }

  .hero-meta {
    display: flex;
    gap: var(--space-7);
    flex-wrap: wrap;
    margin-block-start: var(--space-9);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid oklch(0.98 0 0 / 0.15);
    color: oklch(0.98 0 0 / 0.55);
    font-size: 0.875rem;
    letter-spacing: -0.005em;
  }
  .hero-meta strong { color: oklch(0.99 0 0); font-weight: 600; }

  /* Hero CTA overrides — invert for the black surface */
  .hero .btn-primary {
    background: var(--brand);
    color: oklch(0.13 0.01 50);
    border-color: var(--brand);
  }
  .hero .btn-primary:hover {
    background: oklch(from var(--brand) calc(l + 0.06) c h);
    color: oklch(0.13 0.01 50);
  }
  .hero .btn-secondary {
    background: transparent;
    color: oklch(0.99 0 0);
    border-color: oklch(0.99 0 0 / 0.3);
  }
  .hero .btn-secondary:hover {
    background: oklch(0.99 0 0);
    color: oklch(0.13 0.01 50);
    border-color: oklch(0.99 0 0);
  }

  .section-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand);
    margin-block-end: var(--space-5);
  }

  .section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-4);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-block-end: var(--space-6);
    max-inline-size: 36rem;
    color: var(--fg);
  }

  .section-lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--fg-muted);
    max-inline-size: 44rem;
    margin-block-end: var(--space-8);
    letter-spacing: -0.005em;
  }

  .about {
    background: var(--bg-elevated);
    border-block: 1px solid var(--line-subtle);
  }

  .about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-9);
    align-items: start;
  }
  @media (max-width: 56em) {
    .about-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  }

  .about-portrait {
    position: sticky;
    inset-block-start: calc(var(--nav-h) + var(--space-5));
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-deep);
  }
  .about-portrait img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-cinema);
  }
  .about-portrait:hover img { transform: scale(1.03); }

  /* Tablet / mobile: disable sticky so the portrait doesn't overlap bio text */
  @media (max-width: 56em) {
    .about-portrait {
      position: static;
      inset-block-start: auto;
      max-inline-size: 22rem;
      margin-inline: auto;
    }
  }

  .about-bio { font-size: var(--step-1); line-height: 1.65; color: var(--fg-muted); }
  .about-bio p { margin-block-end: var(--space-5); }
  .about-bio p:last-child { margin-block-end: 0; }
  .about-bio strong { color: var(--fg); font-weight: 600; }

  .timeline {
    margin-block-start: var(--space-8);
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--space-7);
  }

  .timeline-list { display: grid; gap: 0; }
  .timeline-item {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--space-5);
    padding-block: var(--space-5);
    border-block-end: 1px solid var(--line-subtle);
    transition: padding-inline-start 0.3s var(--ease-soft);
  }
  .timeline-item:hover { padding-inline-start: var(--space-3); }
  .timeline-item:last-child { border-block-end: 0; }
  .timeline-year {
    color: var(--fg-subtle);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    padding-block-start: 0.15rem;
    font-weight: 500;
  }
  .timeline-role { font-weight: 600; color: var(--fg); font-size: 1.0625rem; letter-spacing: -0.01em; }
  .timeline-co { color: var(--fg-muted); font-size: 0.9375rem; margin-block-start: var(--space-1); }

  .tierso {
    position: relative;
    overflow: hidden;
    background: var(--bg);
  }

  .tierso-card {
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 5vw, 4.5rem);
    display: grid;
    gap: var(--space-7);
    position: relative;
    overflow: hidden;
  }
  .tierso-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 100% 0%, oklch(0.55 0.06 55 / 0.18), transparent 60%),
      radial-gradient(ellipse 50% 50% at 0% 100%, oklch(0.55 0.06 55 / 0.12), transparent 60%);
    pointer-events: none;
  }
  .tierso-card > * { position: relative; z-index: 1; }

  .tierso-mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brand-soft);
  }

  .tierso-card .section-lede {
    color: oklch(from var(--accent-fg) l c h / 0.78);
    margin-block-end: 0;
  }

  .tierso-statement {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-3);
    line-height: 1.05;
    letter-spacing: -0.035em;
    max-inline-size: 40rem;
    color: var(--accent-fg);
  }
  .tierso-statement em {
    font-style: normal;
    color: var(--brand-soft);
    font-weight: 400;
  }

  .tierso-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    padding-block: var(--space-6);
    border-block: 1px solid oklch(from var(--accent-fg) l c h / 0.14);
  }
  @media (max-width: 56em) { .tierso-pillars { grid-template-columns: 1fr; gap: var(--space-5); } }

  .pillar-label {
    font-size: 0.75rem;
    color: oklch(from var(--accent-fg) l c h / 0.55);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-block-end: var(--space-2);
    font-weight: 600;
  }
  .pillar-title { font-weight: 600; color: var(--accent-fg); margin-block-end: var(--space-2); font-size: 1.125rem; letter-spacing: -0.01em; }
  .pillar-desc { color: oklch(from var(--accent-fg) l c h / 0.72); font-size: 0.9375rem; line-height: 1.5; }

  .metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-5);
  }
  .metric { display: grid; gap: var(--space-1); }
  .metric-value {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    color: var(--accent-fg);
    letter-spacing: -0.035em;
    line-height: 1;
  }
  .tierso-card .metric-value { color: var(--accent-fg); }
  .metric-label {
    font-size: 0.8125rem;
    color: oklch(from var(--accent-fg) l c h / 0.65);
    line-height: 1.4;
    letter-spacing: -0.005em;
  }

  /* When metrics appear OUTSIDE the dark Tierso card, recolor */
  section:not(.tierso):not(:has(.tierso-card)) .metric-value { color: var(--fg); }
  section:not(.tierso):not(:has(.tierso-card)) .metric-label { color: var(--fg-subtle); }
  .resume-page .metric-value { color: var(--fg); }
  .resume-page .metric-label { color: var(--fg-subtle); }

  .work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-5);
  }

  .case-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-4);
    padding: var(--space-7);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    transition: background 0.35s var(--ease-cinema), transform 0.45s var(--ease-cinema), border-color 0.3s var(--ease-soft), box-shadow 0.45s var(--ease-cinema);
    color: inherit;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-block-size: 19rem;
  }
  .case-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(140deg, oklch(0.93 0.022 70 / 0.55) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s var(--ease-cinema);
  }
  .case-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }
  .case-card:hover::before { opacity: 1; }

  .case-card .case-meta { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
  .case-card .case-co { font-size: 0.8125rem; color: var(--fg-subtle); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
  .case-card .case-year { font-size: 0.8125rem; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }

  .case-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-2);
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: var(--fg);
  }

  .case-outcome {
    color: var(--fg-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .case-outcome strong { color: var(--brand); font-weight: 600; }

  .case-foot { display: flex; justify-content: space-between; align-items: end; gap: var(--space-3); }

  .role-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .role-tag {
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    color: var(--fg-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
  }

  .case-link { color: var(--accent); font-size: 0.875rem; font-weight: 600; transition: gap 0.2s var(--ease-soft); }
  .case-link::after { content: ""; }
  .case-card:hover .case-link::after { content: ""; }

  .filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-7); }
  .filter-chip {
    padding: 0.5rem 1.05rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg-muted);
    transition: all 0.25s var(--ease-soft);
    background: transparent;
    cursor: pointer;
  }
  .filter-chip:hover { border-color: var(--accent); color: var(--fg); }
  .filter-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

  .essay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-5);
  }

  .essay-card {
    padding: var(--space-7);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    transition: border-color 0.3s var(--ease-soft), transform 0.45s var(--ease-cinema), box-shadow 0.45s var(--ease-cinema);
    display: grid;
    gap: var(--space-3);
    color: inherit;
    min-block-size: 15rem;
  }
  .essay-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }
  .essay-eyebrow {
    font-size: 0.75rem;
    color: var(--fg-subtle);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .essay-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-2);
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: var(--fg);
  }
  .essay-dek { color: var(--fg-muted); line-height: 1.55; font-size: 0.9375rem; }
  .essay-foot {
    margin-block-start: auto;
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--fg-subtle);
    align-items: center;
    font-weight: 500;
  }

  .trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }
  @media (max-width: 56em) { .trust-grid { grid-template-columns: 1fr; gap: var(--space-7); } }

  .trust-block h3 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.028em;
    margin-block-end: var(--space-5);
    color: var(--fg);
  }
  .trust-block p { color: var(--fg-muted); margin-block-end: var(--space-3); }
  .trust-block p:last-child { margin-block-end: 0; }
  .trust-block ul { display: grid; gap: var(--space-3); }
  .trust-block li { color: var(--fg-muted); padding-inline-start: 1.5rem; position: relative; line-height: 1.6; }
  .trust-block li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; inline-size: 0.75rem; block-size: 1px; background: var(--brand); }

  .contact-cta {
    text-align: center;
    background: var(--bg-elevated);
    border-block-start: 1px solid var(--line-subtle);
  }
  .contact-cta .section-title {
    margin-inline: auto;
    max-inline-size: none;
    font-size: var(--step-5);
  }
  .contact-cta .section-lede { margin-inline: auto; }

  /* Closing CTA over background image */
  .cta-future {
    position: relative;
    isolation: isolate;
    background-color: #000000;
    background-image: url("../img/portfolio_section_bg1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    padding-block: calc(var(--space-11) + 200px);
    overflow: hidden;
    border: 0;
  }
  .cta-future::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, oklch(0 0 0 / 0.55) 0%, oklch(0 0 0 / 0.45) 100%);
  }
  .cta-future .section-eyebrow {
    color: var(--brand);
  }
  .cta-future .section-title {
    color: oklch(0.99 0 0);
    margin-inline: auto;
    max-inline-size: 30rem;
    font-size: var(--step-5);
  }
  .cta-future .section-lede {
    color: oklch(0.99 0 0 / 0.85);
    margin-inline: auto;
    max-inline-size: 38rem;
    margin-block-end: 0;
  }

  .site-footer {
    background: #000000;
    color: var(--fg-on-dark-muted);
    padding-block: 0;
    margin-block-start: 0;
  }
  .site-footer .container-wide {
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }

  .footer-top {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
    gap: var(--space-8);
    align-items: stretch;
    padding-block: var(--space-10) var(--space-9);
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 64em) {
    .footer-top { grid-template-columns: 1fr; gap: var(--space-9); padding-block: var(--space-9) var(--space-8); }
  }

  .footer-mark {
    position: relative;
    inline-size: 100%;
    max-inline-size: 36rem;
    pointer-events: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-inline-start: var(--space-2);
  }
  .footer-mark img {
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    zoom: 1.1;
    display: block;
  }
  @media (max-width: 64em) {
    .footer-mark {
      max-inline-size: 24rem;
      padding-inline-start: 0;
    }
  }

  .footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7) var(--space-6);
    align-content: start;
  }
  @media (max-width: 56em) {
    .footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); }
  }
  @media (max-width: 36em) {
    .footer-cols { grid-template-columns: 1fr; gap: var(--space-6); }
  }

  .footer-col h4 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--fg-on-dark);
    margin-block-end: var(--space-4);
  }
  .footer-col ul { display: grid; gap: var(--space-3); }
  .footer-col a,
  .footer-col button {
    color: var(--fg-on-dark-muted);
    transition: color 0.2s var(--ease-soft);
    font-size: 0.9375rem;
    font-weight: 500;
    background: none;
    border: 0;
    padding: 0;
    text-align: start;
    cursor: pointer;
  }
  .footer-col a:hover,
  .footer-col button:hover { color: var(--fg-on-dark); }

  .footer-col-contact p {
    color: var(--fg-on-dark-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-block-end: var(--space-2);
  }
  .footer-col-contact p:last-of-type { margin-block-end: var(--space-4); }
  .footer-col-contact a { color: inherit; }
  .footer-col-contact a:hover { color: var(--fg-on-dark); }

  .footer-icons {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-block-start: var(--space-2);
  }

  .footer-icon-btn {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 1px solid var(--line-on-dark);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--fg-on-dark-muted);
    transition: border-color 0.2s var(--ease-soft), color 0.2s var(--ease-soft), background 0.2s var(--ease-soft);
    background: transparent;
    padding: 0;
  }
  .footer-icon-btn:hover {
    border-color: var(--fg-on-dark);
    color: var(--fg-on-dark);
    background: oklch(from var(--fg-on-dark) l c h / 0.05);
  }
  .footer-icon-btn svg { inline-size: 1rem; block-size: 1rem; }

  .footer-icon-divider {
    inline-size: 0.75rem;
    block-size: 1px;
    background: var(--line-on-dark);
    margin-inline: var(--space-2);
  }

  .footer-trust {
    border-block-start: 1px solid var(--line-on-dark);
    border-block-end: 1px solid var(--line-on-dark);
    padding-block: var(--space-5);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  @media (max-width: 56em) {
    .footer-trust { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); padding-block: var(--space-6); }
  }
  @media (max-width: 36em) {
    .footer-trust { grid-template-columns: 1fr; gap: var(--space-4); }
  }

  .trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.875rem;
    color: var(--fg-on-dark-muted);
    line-height: 1.4;
  }

  .trust-item-icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 1px solid var(--line-on-dark);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--fg-on-dark-muted);
    flex-shrink: 0;
  }
  .trust-item-icon svg { inline-size: 1rem; block-size: 1rem; }

  .footer-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-5);
    font-size: 0.8125rem;
    color: var(--fg-on-dark-subtle);
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .footer-legal-links {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    flex-wrap: wrap;
  }
  .footer-legal-links a,
  .footer-legal-links button {
    color: var(--fg-on-dark-subtle);
    transition: color 0.2s var(--ease-soft);
    font-size: 0.8125rem;
    font-weight: 500;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .footer-legal-links a:hover,
  .footer-legal-links button:hover { color: var(--fg-on-dark); }
  .footer-legal-credit { color: var(--fg-on-dark-subtle); }

  .modal {
    margin-block-start: 4rem;
    margin-inline: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    inline-size: min(100%, 36rem);
    max-block-size: calc(100dvh - 5rem);
    overflow: hidden;
    color: var(--fg);
  }
  /* Only render the flex layout (and entry animation) when the dialog is
     actually open — otherwise the modal would override the UA's
     display: none on closed <dialog> and spill onto the page. The flex
     column lets the body scroll internally while head + foot stay visible
     so the Send button remains reachable on small viewports. */
  .modal[open] {
    display: flex;
    flex-direction: column;
    animation: modal-in 0.45s var(--ease-cinema);
  }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .modal-head {
    padding: var(--space-5) var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-block-end: 1px solid var(--line-subtle);
    flex: 0 0 auto;
  }
  .modal-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.025em;
  }
  .modal-close { color: var(--fg-subtle); padding: var(--space-2); border-radius: var(--radius); transition: color 0.2s, background 0.2s; }
  .modal-close:hover { color: var(--fg); background: var(--bg-elevated); }

  .modal-body {
    padding: var(--space-6);
    display: grid;
    gap: var(--space-5);
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
  }
  .modal-body > p { color: var(--fg-muted); margin: 0; }
  .modal-body .small-print { font-size: 0.8125rem; color: var(--fg-subtle); line-height: 1.5; }

  .modal-foot {
    padding: var(--space-4) var(--space-6);
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--bg-elevated);
    border-block-start: 1px solid var(--line-subtle);
    flex: 0 0 auto;
  }

  .modal-screen { display: none; }
  .modal-screen.is-active { display: contents; }

  /* Tablet / mobile: tighten internal spacing so the form fits more comfortably */
  @media (max-width: 48em) {
    .modal { margin-block-start: 2rem; max-block-size: calc(100dvh - 2.5rem); }
    .modal-head { padding: var(--space-4) var(--space-5); }
    .modal-body { padding: var(--space-4) var(--space-5); gap: var(--space-3); }
    .modal-foot { padding: var(--space-3) var(--space-5); }
    .field { gap: var(--space-1); }
    .field input, .field select, .field textarea { padding: 0.6rem 0.75rem; }
    .field textarea { min-block-size: 4.5rem; }
  }

  .field { display: grid; gap: var(--space-2); }
  .field label { font-size: 0.8125rem; font-weight: 600; color: var(--fg); letter-spacing: -0.005em; }
  .field input, .field select, .field textarea {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.75rem 0.95rem;
    font-size: 0.9375rem;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    font-family: inherit;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: 0;
    border-color: var(--accent);
    background: var(--bg);
    box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.12);
  }
  .field textarea { resize: vertical; min-block-size: 6.5rem; line-height: 1.5; }

  .honeypot {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .turnstile-wrap { display: flex; justify-content: center; padding-block: var(--space-3); }
  .turnstile-fallback {
    color: var(--fg-subtle);
    font-size: 0.8125rem;
    padding: var(--space-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    text-align: center;
    background: var(--bg-elevated);
  }

  /* Dev-mode "I'm not a robot" checkbox */
  .dev-captcha {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.85rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.25s var(--ease-soft), background 0.25s var(--ease-soft);
    user-select: none;
    min-inline-size: 16rem;
  }
  .dev-captcha:hover { border-color: var(--accent); }
  .dev-captcha.is-checking { pointer-events: none; }
  .dev-captcha.is-verified {
    border-color: var(--brand);
    background: oklch(from var(--brand) l c h / 0.06);
  }

  .dev-captcha-control {
    position: relative;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex-shrink: 0;
  }
  .dev-captcha-control input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    border: 2px solid var(--line-strong);
    border-radius: 0.25rem;
    background: var(--bg);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  .dev-captcha-control input[type="checkbox"]:hover { border-color: var(--accent); }
  .dev-captcha.is-verified .dev-captcha-control input[type="checkbox"] {
    background: var(--brand);
    border-color: var(--brand);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
  }
  .dev-captcha.is-checking .dev-captcha-control input[type="checkbox"] { opacity: 0; }
  .dev-captcha-spinner {
    position: absolute;
    inset: 0;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 2px solid var(--line);
    border-block-start-color: var(--brand);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }
  .dev-captcha.is-checking .dev-captcha-spinner {
    opacity: 1;
    animation: dev-captcha-spin 0.7s linear infinite;
  }
  @keyframes dev-captcha-spin {
    to { transform: rotate(360deg); }
  }
  .dev-captcha-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--fg);
  }

  .confirm-icon {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    margin-inline: auto;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-fg);
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    font-weight: 700;
  }

  .alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-size: 0.875rem;
    background: oklch(0.94 0.05 30);
    color: oklch(0.32 0.13 30);
    border: 1px solid oklch(0.78 0.1 30);
  }
  .alert[hidden] { display: none; }

  .case-page { padding-block-start: var(--space-8); }
  .case-page .container-narrow { display: grid; gap: var(--space-7); }
  .case-page .case-back,
  .essay-page .case-back {
    color: var(--fg-subtle);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
  }
  .case-page .case-back:hover,
  .essay-page .case-back:hover { color: var(--fg); }

  /* Inline single-page case studies — new layout: title-row + logo, then 2-col body.
     Border uses a translucent white instead of var(--line-subtle) (a near-white
     cream) because every card now has a dark image background — the cream line
     would punch through as a hard white slash. 12% white reads as a soft hairline
     on dark imagery; same divider language as the outcome/nav hairlines inside
     each card (which use 20% white). */
  .case-detail {
    padding-block: var(--space-9);
    border-block-start: 1px solid oklch(0.99 0 0 / 0.12);
    background: var(--bg);
    content-visibility: auto;
    contain-intrinsic-size: 0 60rem;
  }
  .case-detail:nth-of-type(2n) { background: var(--bg-elevated); }
  .case-detail .container { display: grid; gap: var(--space-5); }

  /* Tablet and wider: case rows extend nearly edge-to-edge with comfortable side margins */
  @media (min-width: 48em) {
    .case-detail .container {
      max-inline-size: 124rem;
      padding-inline: clamp(1.5rem, 2.5vw, 3rem);
    }
  }
  /* Very wide desktops: let the row breathe across the full viewport */
  @media (min-width: 120em) {
    .case-detail .container {
      max-inline-size: min(96vw, 140rem);
      padding-inline: clamp(2rem, 3vw, 4rem);
    }
  }

  /* New 3-col top row: title block (with logo) | Challenge | Approach.
     All three columns start at the same Y (row top) — no offsets — so the
     Challenge / Approach H3s sit flush with the top of the title block. */
  .case-detail-row-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }

  /* Zero out the global section { padding-block: var(--space-11); } rule
     for inline case-section elements nested inside case-detail articles —
     the .case-detail wrapper already supplies vertical breathing room, and
     the global padding was leaking in to push Challenge/Approach down by
     12rem. Outcome sections explicitly re-set their own top padding below. */
  .case-detail .case-section { padding-block: 0; }
  @media (max-width: 64em) {
    .case-detail-row-top {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-6);
    }
    .case-detail-row-top .case-detail-meta {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 40em) {
    .case-detail-row-top { grid-template-columns: 1fr; gap: var(--space-5); }
  }

  .case-detail-meta {
    display: grid;
    gap: var(--space-4);
    align-content: start;
  }

  .case-detail-mark {
    background: oklch(0.99 0 0);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 2.5vw, 2rem);
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    max-inline-size: 17rem;
    overflow: hidden;
    margin-block-start: var(--space-3);
  }
  .case-detail-mark img {
    max-inline-size: 75%;
    max-block-size: 75%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
  }
  .case-detail-mark.case-detail-mark-text span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: -0.028em;
    color: var(--fg);
    text-align: center;
    line-height: 1.1;
    display: block;
  }
  @media (max-width: 64em) {
    .case-detail-mark { max-inline-size: 14rem; }
  }
  @media (max-width: 40em) {
    .case-detail-mark { max-inline-size: 12rem; margin-inline: 0; }
  }

  .case-detail .case-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-4);
    line-height: 1.0;
    letter-spacing: -0.045em;
    max-inline-size: 36rem;
    color: var(--fg);
    margin: 0;
    /* Lazy reveal — initial state: hidden, lifted 30px below resting position */
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 1.2s var(--ease-cinema),
      transform 8.6s var(--ease-cinema);
    will-change: opacity, transform;
  }
  .case-detail .case-title.is-in-view {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .case-detail .case-title {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  .case-detail .case-eyebrow-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    color: var(--fg-subtle);
    font-size: 0.875rem;
    font-weight: 500;
  }
  .case-detail .case-eyebrow-row strong { color: var(--fg); font-weight: 600; }

  /* Per-case background images — every case-detail article uses the same
     full-bleed dark-image treatment with white text overlay (the original
     BluePoint pattern). File naming convention: img/work_bg_{slug}.jpg
     (2400×1600 recommended). If a file is missing, the dark fallback
     color (oklch(0.18 0.008 60)) shows through and white text remains
     readable. Per-card focal-point tuning can be added below. */
  #case-tierso-platform        { background-image: url("../img/work_bg_tierso.jpg"); }
  #case-walmart-data-portal    { background-image: url("../img/work_bg_walmart.jpg"); }
  #case-landtech-title-transfer { background-image: url("../img/work_bg_landtech.jpg"); }
  #case-avanquest-monetization { background-image: url("../img/work_bg_avanquest.jpg"); }
  #case-preask-findlivebait    { background-image: url("../img/work_bg_preask.jpg"); }
  #case-kitara-aristotle       { background-image: url("../img/work_bg_kitara.jpg"); }
  #case-dayjet-eclipse-500     { background-image: url("../img/work_bg_dayjet.jpg"); }
  #case-skyview-bluepoint      { background-image: url("../img/work_bg_bluepoint.jpg"); }
  #case-tbc-email-campaign     { background-image: url("../img/work_bg_tbc.jpg"); }

  /* Shared image-card chrome — cover at 100% opacity, dark fallback. */
  :is(
    #case-tierso-platform,
    #case-walmart-data-portal,
    #case-landtech-title-transfer,
    #case-avanquest-monetization,
    #case-preask-findlivebait,
    #case-kitara-aristotle,
    #case-dayjet-eclipse-500,
    #case-skyview-bluepoint,
    #case-tbc-email-campaign
  ) {
    position: relative;
    isolation: isolate;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: oklch(0.18 0.008 60);
  }

  /* Override the alternating .case-detail:nth-of-type(2n) cream stripe
     so the dark fallback wins regardless of source-order position. */
  :is(
    #case-tierso-platform,
    #case-walmart-data-portal,
    #case-landtech-title-transfer,
    #case-avanquest-monetization,
    #case-preask-findlivebait,
    #case-kitara-aristotle,
    #case-dayjet-eclipse-500,
    #case-skyview-bluepoint,
    #case-tbc-email-campaign
  ):nth-of-type(2n) {
    background-color: oklch(0.18 0.008 60);
  }

  /* High-emphasis text rendered fully white over the image */
  :is(
    #case-tierso-platform,
    #case-walmart-data-portal,
    #case-landtech-title-transfer,
    #case-avanquest-monetization,
    #case-preask-findlivebait,
    #case-kitara-aristotle,
    #case-dayjet-eclipse-500,
    #case-skyview-bluepoint,
    #case-tbc-email-campaign
  ) :is(.case-title, .case-eyebrow-row strong, .case-section h3) {
    color: oklch(0.99 0 0);
  }

  /* Body / supporting text rendered white at 85% for hierarchy */
  :is(
    #case-tierso-platform,
    #case-walmart-data-portal,
    #case-landtech-title-transfer,
    #case-avanquest-monetization,
    #case-preask-findlivebait,
    #case-kitara-aristotle,
    #case-dayjet-eclipse-500,
    #case-skyview-bluepoint,
    #case-tbc-email-campaign
  ) :is(.case-eyebrow-row, .case-section p, .case-section li, .case-nav a) {
    color: oklch(0.99 0 0 / 0.85);
  }

  /* Inline strong inside body copy snaps back to full white */
  :is(
    #case-tierso-platform,
    #case-walmart-data-portal,
    #case-landtech-title-transfer,
    #case-avanquest-monetization,
    #case-preask-findlivebait,
    #case-kitara-aristotle,
    #case-dayjet-eclipse-500,
    #case-skyview-bluepoint,
    #case-tbc-email-campaign
  ) :is(.case-section li strong, .case-section p strong) {
    color: oklch(0.99 0 0);
  }

  /* Role-tag pills — translucent white border + 90% white label */
  :is(
    #case-tierso-platform,
    #case-walmart-data-portal,
    #case-landtech-title-transfer,
    #case-avanquest-monetization,
    #case-preask-findlivebait,
    #case-kitara-aristotle,
    #case-dayjet-eclipse-500,
    #case-skyview-bluepoint,
    #case-tbc-email-campaign
  ) .role-tag {
    border-color: oklch(0.99 0 0 / 0.4);
    color: oklch(0.99 0 0 / 0.9);
  }

  /* Hairline dividers above outcome + nav rows — translucent white */
  :is(
    #case-tierso-platform,
    #case-walmart-data-portal,
    #case-landtech-title-transfer,
    #case-avanquest-monetization,
    #case-preask-findlivebait,
    #case-kitara-aristotle,
    #case-dayjet-eclipse-500,
    #case-skyview-bluepoint,
    #case-tbc-email-campaign
  ) :is(.case-section-outcome, .case-nav) {
    border-block-start-color: oklch(0.99 0 0 / 0.2);
  }

  /* Nav prev/next link hover snaps to full white */
  :is(
    #case-tierso-platform,
    #case-walmart-data-portal,
    #case-landtech-title-transfer,
    #case-avanquest-monetization,
    #case-preask-findlivebait,
    #case-kitara-aristotle,
    #case-dayjet-eclipse-500,
    #case-skyview-bluepoint,
    #case-tbc-email-campaign
  ) .case-nav a:hover {
    color: oklch(0.99 0 0);
  }

  /* Nav "Prev →" / "Next →" labels muted to 55% white */
  :is(
    #case-tierso-platform,
    #case-walmart-data-portal,
    #case-landtech-title-transfer,
    #case-avanquest-monetization,
    #case-preask-findlivebait,
    #case-kitara-aristotle,
    #case-dayjet-eclipse-500,
    #case-skyview-bluepoint,
    #case-tbc-email-campaign
  ) .case-nav .label {
    color: oklch(0.99 0 0 / 0.55);
  }

  /* Per-card focal-point tuning for narrow viewports.
     Add additional entries below as you learn each image's composition. */
  @media (max-width: 56em) {
    #case-skyview-bluepoint { background-position: 70% center; }
  }

  .case-detail .case-section h3 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.1;
    margin-block-end: var(--space-4);
    color: var(--fg);
  }
  .case-detail .case-section p {
    color: var(--fg-muted);
    margin-block-end: var(--space-4);
    font-size: var(--step-0);
    line-height: 1.65;
  }
  .case-detail .case-section p:last-child { margin-block-end: 0; }
  .case-detail .case-section ul { display: grid; gap: var(--space-3); margin-block: var(--space-4) 0; }
  .case-detail .case-section li {
    color: var(--fg-muted);
    padding-inline-start: 1.5rem;
    position: relative;
    line-height: 1.6;
    font-size: 0.9375rem;
  }
  .case-detail .case-section li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.7em;
    inline-size: 0.875rem;
    block-size: 1px;
    background: var(--brand);
  }

  .case-detail .case-section-outcome {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--line);
  }

  .case-detail .case-nav {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .case-detail .case-nav a {
    color: var(--fg-muted);
    font-weight: 600;
    transition: color 0.2s;
    font-size: 1rem;
    letter-spacing: -0.01em;
  }
  .case-detail .case-nav a:hover { color: var(--fg); }
  .case-detail .case-nav .label {
    display: block;
    font-size: 0.75rem;
    color: var(--fg-subtle);
    margin-block-end: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
  }

  /* Inline single-page essays */
  .essay-detail {
    padding-block: var(--space-9);
    border-block-start: 1px solid var(--line-subtle);
    background: var(--bg);
    content-visibility: auto;
    contain-intrinsic-size: 0 50rem;
  }
  .essay-detail:nth-of-type(2n) { background: var(--bg-elevated); }
  .essay-detail .container-narrow { display: block; }
  .essay-detail article { display: grid; gap: var(--space-5); }
  .essay-detail h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-4);
    line-height: 1.0;
    letter-spacing: -0.045em;
    max-inline-size: 36rem;
    color: var(--fg);
  }
  .essay-detail .essay-meta {
    color: var(--fg-subtle);
    font-size: 0.75rem;
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .essay-detail p {
    color: var(--fg-muted);
    font-size: var(--step-1);
    line-height: 1.7;
    margin-block-end: var(--space-5);
  }
  .essay-detail h2 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.028em;
    margin-block-start: var(--space-7);
    margin-block-end: var(--space-3);
    color: var(--fg);
  }
  .essay-detail blockquote {
    border-inline-start: 3px solid var(--brand);
    padding-inline-start: var(--space-5);
    margin-block: var(--space-6);
    font-size: var(--step-2);
    color: var(--fg);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .essay-detail .case-nav {
    margin-block-start: var(--space-7);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .essay-detail .case-nav a {
    color: var(--fg-muted);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    transition: color 0.2s;
  }
  .essay-detail .case-nav a:hover { color: var(--fg); }
  .essay-detail .case-nav .label {
    display: block;
    font-size: 0.75rem;
    color: var(--fg-subtle);
    margin-block-end: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
  }

  /* Inline resume on single page */
  .resume-section-inline {
    padding-block: var(--space-10);
    background: var(--bg);
    border-block-start: 1px solid var(--line-subtle);
    content-visibility: auto;
    contain-intrinsic-size: 0 80rem;
  }
  .resume-section-inline .resume-grid {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--space-9);
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--inline-pad);
  }
  @media (max-width: 56em) {
    .resume-section-inline .resume-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  }

  .case-page .case-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-5);
    line-height: 1.0;
    letter-spacing: -0.045em;
    max-inline-size: 36rem;
    color: var(--fg);
  }
  .case-page .case-eyebrow-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    color: var(--fg-subtle);
    font-size: 0.875rem;
    font-weight: 500;
  }
  .case-page .case-eyebrow-row strong { color: var(--fg); font-weight: 600; }

  .outcome-banner {
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: grid;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
  }
  .outcome-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 100% 0%, oklch(0.55 0.06 55 / 0.18), transparent 60%);
    pointer-events: none;
  }
  .outcome-banner > * { position: relative; }
  .outcome-banner .outcome-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--brand-soft);
    font-weight: 700;
  }
  .outcome-banner .outcome-value {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--accent-fg);
  }
  .outcome-banner .outcome-context {
    color: oklch(from var(--accent-fg) l c h / 0.78);
    line-height: 1.5;
  }

  .case-section h2 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin-block-end: var(--space-5);
    color: var(--fg);
  }
  .case-section p {
    color: var(--fg-muted);
    margin-block-end: var(--space-4);
    font-size: var(--step-1);
    line-height: 1.65;
  }
  .case-section ul { display: grid; gap: var(--space-3); margin-block: var(--space-4); }
  .case-section li {
    color: var(--fg-muted);
    padding-inline-start: 1.75rem;
    position: relative;
    line-height: 1.65;
    font-size: var(--step-0);
  }
  .case-section li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.7em;
    inline-size: 1rem;
    block-size: 1px;
    background: var(--brand);
  }

  .case-nav {
    margin-block-start: var(--space-9);
    padding-block-start: var(--space-7);
    border-block-start: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .case-nav a {
    color: var(--fg-muted);
    font-weight: 600;
    transition: color 0.2s;
    font-size: 1rem;
    letter-spacing: -0.01em;
  }
  .case-nav a:hover { color: var(--fg); }
  .case-nav .label {
    display: block;
    font-size: 0.75rem;
    color: var(--fg-subtle);
    margin-block-end: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
  }

  .essay-page article { display: grid; gap: var(--space-5); padding-block: var(--space-8); }
  .essay-page .essay-meta {
    color: var(--fg-subtle);
    font-size: 0.8125rem;
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .essay-page h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-5);
    line-height: 1.0;
    letter-spacing: -0.045em;
    max-inline-size: 36rem;
    color: var(--fg);
  }
  .essay-page p {
    color: var(--fg-muted);
    font-size: var(--step-1);
    line-height: 1.7;
    margin-block-end: var(--space-5);
  }
  .essay-page p:last-of-type { margin-block-end: 0; }
  .essay-page h2 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.028em;
    margin-block-start: var(--space-7);
    margin-block-end: var(--space-3);
    color: var(--fg);
  }
  .essay-page blockquote {
    border-inline-start: 3px solid var(--brand);
    padding-inline-start: var(--space-5);
    margin-block: var(--space-6);
    font-size: var(--step-2);
    color: var(--fg);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.015em;
  }

  .resume-page { padding-block: var(--space-8); }
  .resume-grid { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-9); }
  @media (max-width: 56em) { .resume-grid { grid-template-columns: 1fr; gap: var(--space-7); } }
  .resume-side {
    position: sticky;
    inset-block-start: calc(var(--nav-h) + var(--space-5));
    align-self: start;
    display: grid;
    gap: var(--space-5);
  }
  /* Mobile: the resume-grid collapses to one column, so .resume-side
     and the resume-section content are stacked vertically in the same
     column. Sticky positioning would pin .resume-side to the top of the
     viewport and overlay the resume content scrolling beneath it. Reset
     to static flow positioning so the panel scrolls naturally with the
     rest of the page. */
  @media (max-width: 56em) {
    .resume-side {
      position: static;
      inset-block-start: auto;
    }
  }
  .resume-side h2 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
  }
  .resume-side .stat-strip {
    display: grid;
    gap: var(--space-2);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--line);
  }
  .resume-side .stat-strip span { font-size: 0.875rem; color: var(--fg-muted); }
  .resume-side .stat-strip strong { color: var(--fg); font-weight: 600; }

  .resume-section { margin-block-end: var(--space-8); }
  .resume-section h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--brand);
    margin-block-end: var(--space-5);
    font-weight: 700;
  }
  .resume-section h4 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.018em;
  }
  .resume-job { padding-block: var(--space-5); border-block-end: 1px solid var(--line-subtle); }
  .resume-job:last-child { border-block-end: 0; }
  .resume-job-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: baseline;
    margin-block-end: var(--space-2);
  }
  .resume-job-co { color: var(--fg-muted); font-weight: 500; }
  .resume-job-date { font-size: 0.8125rem; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
  .resume-job ul { display: grid; gap: var(--space-2); margin-block-start: var(--space-3); }
  .resume-job li {
    color: var(--fg-muted);
    padding-inline-start: 1.5rem;
    position: relative;
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  .resume-job li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.7em;
    inline-size: 0.75rem;
    block-size: 1px;
    background: var(--brand);
  }

  .skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-5);
    margin-block-start: var(--space-3);
  }
  .skill-block h5 {
    font-size: 0.9375rem;
    color: var(--fg);
    font-weight: 600;
    margin-block-end: var(--space-2);
    letter-spacing: -0.005em;
  }
  .skill-block p { color: var(--fg-muted); font-size: 0.875rem; line-height: 1.55; }

  @media print {
    .nav, footer, .resume-side, .skip-link { display: none !important; }
    body { background: white; color: black; }
    .resume-grid { grid-template-columns: 1fr; }
    a { color: black; text-decoration: underline; }
    .resume-section h3 { color: black; }
  }

  .nf-page { min-block-size: 60svh; display: grid; place-items: center; padding-block: var(--space-10); text-align: center; }
  .nf-code {
    font-family: var(--font-display);
    font-size: var(--step-6);
    color: var(--brand);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.05em;
  }
  .nf-page h1 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    margin-block: var(--space-4);
    letter-spacing: -0.035em;
  }
  .nf-page p { color: var(--fg-muted); margin-block-end: var(--space-6); }

  /* Reveal-on-scroll animation */
  @media (prefers-reduced-motion: no-preference) {
    .case-card, .essay-card, .timeline-item, .pillar-title, .metric, .trust-block {
      animation: reveal 0.7s var(--ease-cinema) backwards;
    }
    .work-grid > :nth-child(1) { animation-delay: 0.05s; }
    .work-grid > :nth-child(2) { animation-delay: 0.1s; }
    .work-grid > :nth-child(3) { animation-delay: 0.15s; }
    .work-grid > :nth-child(4) { animation-delay: 0.2s; }
    .work-grid > :nth-child(5) { animation-delay: 0.25s; }
    .work-grid > :nth-child(6) { animation-delay: 0.3s; }
    .work-grid > :nth-child(7) { animation-delay: 0.35s; }
    .work-grid > :nth-child(8) { animation-delay: 0.4s; }
    @keyframes reveal {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

@layer utilities {
  .sr-only {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .text-balance { text-wrap: balance; }
  .text-pretty { text-wrap: pretty; }
  .center { display: grid; place-items: center; }
  [hidden] { display: none !important; }
}