/* ==========================================================================
   Base Variables & Resets
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

:root {
    --bg-color: #050505;
    --text-primary: #f5f5f5;
    --text-secondary: #8a8a8a;
    --border-color: rgba(255, 255, 255, 0.1);

    --bg-deep: #020202;
    --surface: #121214;
    --surface-raised: #1c1c1f;
    --paper: #f4f4f6;
    --ink: #050505;
    --ink-secondary: #555555;
    --border-strong: rgba(255, 255, 255, 0.2);

    --bg-rgb: 5, 5, 5;
    --text-rgb: 245, 245, 245;
    --font-mono: 'Courier New', Courier, monospace;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* Five sizes do all the visible work on the landing page */
    --fs-display: clamp(2.25rem, 8.4vw, 8.5rem);
    --fs-h2: clamp(2rem, 4.6vw, 4.25rem);
    --fs-lead: clamp(1.25rem, 2.3vw, 2.125rem);
    --fs-body: 1.125rem;
    --fs-small: 0.875rem;

    /* One pair of outer margins and one section rhythm, everywhere */
    --gutter: clamp(20px, 4vw, 64px);
    --section: clamp(4rem, 7vw, 7.5rem);
    --stack: clamp(2rem, 4vw, 4rem);

    --spacing-sm: 1rem;
    --spacing-md: 2.5rem;
    --spacing-lg: 5rem;
    --spacing-xl: 10rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.5;
}

/* Grain */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

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

ul,
ol {
    list-style: none;
}

img { display: block; }

/* ==========================================================================
   Typography & Utilities
   ========================================================================== */
.section-title {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: var(--stack);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Links that read as links: a real underline, never a drawn rule */
.project-link,
.expertise-proof,
.record-cta,
.resume-download,
.footer-email {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease, transform 0.12s var(--ease-out);
}

.section { padding: var(--section) var(--gutter); }

/* ==========================================================================
   Global Navigation
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999; /* Forces header to stay above the side menu */
}

.logo {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink);
    display: inline-block;
}

.header-brand {
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}

.header-nav {
    display: none;
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}

@media (min-width: 768px) {
    .header-nav {
        display: block;
    }
    .nav-list {
        display: flex;
        gap: 2.5rem;
    }
    .nav-item a {
        position: relative;
        display: inline-block;
        font-size: var(--fs-small);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--ink-secondary);
        padding: 0.75rem 0;
        transition: color 0.2s ease, transform 0.12s var(--ease-out);
    }

    .nav-item a:hover {
        color: var(--ink);
    }

    /* Underline grows from the left on hover, retracts to the right */
    .nav-item a::after {
        content: '';
        position: absolute;
        bottom: 0.5rem;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--ink);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s var(--ease-out);
    }

    .nav-item a:hover::after,
    .nav-item a:focus-visible::after {
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* Let's Talk slides up and the Menu button takes its place once scrolled */
.header-cta {
    position: relative;
    overflow: hidden;
    height: 44px;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}

.cta-pill-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    transition: transform 0.45s var(--ease-out);
}

.btn-contact,
.btn-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: 125px;
    padding: 0;
    border: none;
    border-radius: 0.4rem;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s var(--ease-out);
}

.btn-contact {
    background-color: var(--ink);
    color: var(--paper);
}
.btn-contact:hover { background-color: var(--ink-secondary); }

.btn-menu {
    background-color: var(--paper);
    color: var(--ink);
}
.btn-menu:hover { background-color: var(--text-secondary); }

.site-header.is-scrolled .cta-pill-wrapper { transform: translateY(-54px); }

.site-header.is-scrolled .header-brand,
.site-header.is-scrolled .header-nav {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* ==========================================================================
   Right-Side Menu Panel
   ========================================================================== */
.menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 800; /* Sits beneath the side menu */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.menu-backdrop.is-active {
    opacity: 1;
    visibility: visible;
}

.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100dvh;
    background-color: var(--surface);
    z-index: 9999; /* stacks inside the header context, above the backdrop */
    display: flex;
    align-items: center;
    padding: 4rem var(--gutter);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease-out);
    isolation: isolate;
}

.side-menu.is-active {
    transform: translateX(0);
}

.side-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* The terminal voice of the brand lives here and in the Model Lab figures */
.side-link {
    font-family: var(--font-mono);
    font-size: var(--fs-lead);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-primary);
    display: inline-block;
    padding: 0.5rem 0;
    transition: color 0.2s ease, transform 0.12s var(--ease-out);
}

.side-link:hover {
    color: var(--text-secondary);
}

.btn-close-menu {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.25s var(--ease-out);
}

.btn-close-menu:hover {
    color: var(--text-secondary);
    transform: rotate(90deg);
}

/* ==========================================================================
   Hero: pale paper, held in place while the dark curtain slides over it
   ========================================================================== */
.hero-section {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 100svh;
    padding: 8rem var(--gutter) var(--section);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--paper);
    color: var(--ink);
}

.hero-content { position: relative; z-index: 1; will-change: transform, opacity; }

.hero-title {
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.hero-line { display: block; }

.hero-description {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--font-sans);
    font-size: var(--fs-lead);
    line-height: 1.35;
    font-weight: 400;
    color: var(--ink);
    max-width: 44ch;
}

/* Load sequence: the title is in the HTML and settled within 1.2s */
.hero-line,
.hero-description {
    animation: hero-in 0.6s var(--ease-out) both;
}
.hero-line:nth-child(2) { animation-delay: 0.08s; }
.hero-description { animation-delay: 0.16s; }

@keyframes hero-in {
    from { opacity: 0; transform: translateY(24px); }
}

.dark-overlay-wrapper {
    position: relative;
    z-index: 10;
    background-color: var(--bg-color);
    border-radius: 4rem 4rem 0 0;
    color: var(--text-primary);
}

/* ==========================================================================
   Currently
   ========================================================================== */
.now-intro {
    display: grid;
    gap: 1.5rem;
    margin-bottom: var(--stack);
}

@media (min-width: 900px) {
    .now-intro {
        grid-template-columns: 5fr 7fr;
        gap: 4vw;
        align-items: end;
    }
    .now-intro .section-title { margin-bottom: 0; }
}

.now-statement {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    line-height: 1.3;
    max-width: 28ch;
}

.now-list {
    display: grid;
    gap: 0.5rem;
}

.now-item {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    grid-template-areas: "dot name" ". meta";
    column-gap: 1rem;
    row-gap: 0.35rem;
    align-items: baseline;
    padding: 1.5rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--surface);
    transition: background-color 0.2s ease;
}
.now-item:hover { background: var(--surface-raised); }

@media (min-width: 768px) {
    .now-item { padding: 1.75rem 2rem; }
}

.now-dot {
    grid-area: dot;
    align-self: center;
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-primary);
}
/* Live pulse: a ring expanding out of the dot */
.now-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--text-primary);
    animation: now-pulse 2.4s var(--ease-out) infinite;
}
.now-item:nth-child(2) .now-dot::after { animation-delay: 0.6s; }
.now-item:nth-child(3) .now-dot::after { animation-delay: 1.2s; }
.now-item:nth-child(4) .now-dot::after { animation-delay: 1.8s; }
@keyframes now-pulse {
    from { transform: scale(1); opacity: 0.6; }
    to { transform: scale(3.5); opacity: 0; }
}

.now-name {
    grid-area: name;
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    line-height: 1.25;
}

.now-meta {
    grid-area: meta;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

/* ==========================================================================
   Selected case studies: one large row per project, alternating sides
   ========================================================================== */
.portfolio-gallery {
    display: grid;
    gap: clamp(4rem, 8vw, 8rem);
}

.project-card {
    position: relative;
    display: grid;
    gap: 1.75rem;
}

@media (min-width: 900px) {
    .project-card {
        grid-template-columns: 7fr 5fr;
        gap: 4vw;
        align-items: center;
    }
    .project-card:nth-child(even) { grid-template-columns: 5fr 7fr; }
    .project-card:nth-child(even) .project-media { order: 2; }
}

.project-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--surface);
    overflow: hidden;
    border-radius: 0.5rem;
    transition: transform 0.12s var(--ease-out);
}
.project-card:active .project-media { transform: scale(0.985); }

/* The picture sits above the card's hit area and carries its own link */
.project-media > a {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The one moving picture: each figure drifts slowly with the scroll */
@supports (animation-timeline: view()) {
    .project-media img {
        animation: media-drift linear both;
        animation-timeline: view();
        animation-range: cover;
    }
}
@keyframes media-drift {
    from { transform: scale(1.12) translateY(-4%); }
    to { transform: scale(1.12) translateY(4%); }
}

.project-category {
    display: block;
    font-size: var(--fs-small);
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.project-award {
    display: inline;
    margin-left: 0.5rem;
    color: var(--text-primary);
}
.project-award.is-muted { color: var(--text-secondary); }

.project-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    max-width: 22ch;
}

.project-summary {
    font-size: var(--fs-body);
    line-height: 1.6;
    max-width: 42ch;
    margin-bottom: 1.25rem;
}

.project-link {
    display: inline-block;
    padding: 0.75rem 0;
    font-size: var(--fs-small);
    font-weight: 500;
}
/* Whole card is the link's hit area */
.project-link::after {
    content: '';
    position: absolute;
    inset: 0;
}
.project-card:hover .project-link { color: var(--text-secondary); }

/* ==========================================================================
   Expertise: four short columns of text
   ========================================================================== */
.expertise-list {
    display: grid;
    gap: var(--stack) 4vw;
}

@media (min-width: 768px) {
    .expertise-list { grid-template-columns: 1fr 1fr; row-gap: 5rem; }
}

.expertise-item {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.expertise-name {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.2;
}

.expertise-detail {
    font-size: var(--fs-body);
    line-height: 1.6;
    max-width: 46ch;
}

.expertise-proof {
    display: block;
    width: fit-content;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    font-size: var(--fs-small);
    font-weight: 500;
}
.expertise-proof::after { content: '\00a0\2192'; }
.expertise-proof:hover { color: var(--text-secondary); }

/* ==========================================================================
   Model Lab: Okun's law on World Bank data
   ========================================================================== */
.model-section { background: var(--surface); }

.model-intro {
    display: grid;
    gap: 1.25rem;
    margin-bottom: var(--stack);
}
@media (min-width: 900px) {
    .model-intro {
        grid-template-columns: 5fr 7fr;
        grid-template-rows: auto auto;
        column-gap: 4vw;
    }
    .model-intro .section-title { grid-row: 1 / 3; margin-bottom: 0; }
}

.model-lede {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    line-height: 1.3;
    max-width: 30ch;
}

.model-note,
.model-caption {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    max-width: 62ch;
}

/* Controls: real radios, checkboxes and ranges, styled as chips */
.okun-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.75rem 3rem;
    margin-bottom: var(--stack);
}

.okun-group {
    border: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.okun-group legend {
    margin-bottom: 0.75rem;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}
.okun-group legend output {
    margin-left: 0.5rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.okun-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 0.4rem;
    background: var(--surface-raised);
    color: var(--text-primary);
    font-size: var(--fs-small);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s var(--ease-out);
}
.okun-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.okun-chip:has(input:checked) { background: var(--text-primary); color: var(--ink); }
.okun-chip:has(input:focus-visible) { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.okun-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    .okun-chip:hover:not(:has(input:checked)) { background: #26262a; }
}

.okun-years { gap: 0.25rem 1.5rem; }
.okun-range {
    display: grid;
    gap: 0.25rem;
    min-width: 9rem;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

/* Range slider: track and fill are drawn by the wrapper, no gradient */
.model-range {
    position: relative;
    display: block;
    --fill: 50%;
}
.model-range::before,
.model-range::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    pointer-events: none;
}
.model-range::before { width: 100%; background: var(--surface-raised); }
.model-range::after { width: var(--fill); background: var(--text-primary); }

.model-range input[type="range"] {
    position: relative;
    z-index: 1;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 44px; /* touch target */
    background: transparent;
    cursor: pointer;
}
.model-range input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.model-range input[type="range"]::-moz-range-track { height: 4px; background: transparent; }
.model-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    margin-top: -7px;
    border-radius: 50%;
    border: none;
    background: var(--text-primary);
    transition: transform 0.12s var(--ease-out);
}
.model-range input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--text-primary);
}
.model-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.model-range input[type="range"]:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.model-reset {
    min-height: 44px;
    padding: 0 1.25rem;
    background: transparent;
    border: none;
    border-radius: 0.4rem;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.35em;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.12s var(--ease-out);
}
.model-reset:hover { color: var(--text-secondary); }

/* Scatter and result */
.okun-grid {
    display: grid;
    gap: var(--stack) 4vw;
    margin-bottom: var(--section);
}
@media (min-width: 900px) {
    .okun-grid { grid-template-columns: 7fr 5fr; align-items: start; }
}

.okun-plot {
    position: relative;
    width: 100%;
    min-height: 300px;
    margin-bottom: 0.75rem;
}
.okun-svg { display: block; overflow: visible; }
.okun-tick {
    font-family: var(--font-sans);
    font-size: 14px;
    fill: var(--text-secondary);
}
.okun-gridline { stroke: rgba(var(--text-rgb), 0.08); stroke-width: 1; }
.okun-zero { stroke: rgba(var(--text-rgb), 0.35); stroke-width: 1; }
.okun-fit { stroke: var(--text-primary); stroke-width: 2.5; stroke-linecap: round; transition: opacity 0.15s ease; }
.okun-pt circle { fill: var(--text-primary); }
.okun-pt.is-out circle { fill: var(--surface); stroke: var(--text-secondary); stroke-width: 1.5; }
.okun-pt-label {
    font-family: var(--font-sans);
    font-size: 14px;
    fill: var(--text-primary);
    paint-order: stroke;
    stroke: var(--surface);
    stroke-width: 5px;
    stroke-linejoin: round;
}
.okun-pt.is-out .okun-pt-label { fill: var(--text-secondary); }
/* Only a change of economy moves the dots: the same year travels to that
   economy's position. Dragging the year sliders never animates. */
.okun-svg.is-moving .okun-pt { transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1); }

.okun-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    translate: -50% calc(-100% - 12px);
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    background: var(--paper);
    color: var(--ink);
    font-size: var(--fs-small);
    white-space: nowrap;
    pointer-events: none;
}
.okun-tooltip strong { font-weight: 500; margin-right: 0.35rem; }

.okun-result .model-ev {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 1.25rem;
}
.okun-sentence,
.okun-steady {
    font-size: var(--fs-body);
    line-height: 1.6;
    max-width: 44ch;
}
.okun-steady { margin-top: 0.75rem; color: var(--text-secondary); }

.okun-table-wrap { margin-top: 2rem; }
.okun-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}
.okun-table th,
.okun-table td {
    padding: 0.6rem 0.35rem;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}
.okun-table th:first-child { text-align: left; padding-left: 0; }
.okun-table td:last-child { padding-right: 0; }
.okun-table thead th { font-weight: 400; color: var(--text-secondary); }
.okun-table tbody th { font-weight: 400; }
.okun-table td { font-family: var(--font-mono); }
.okun-table + .model-caption,
.okun-table-wrap + .model-caption { margin-top: 0.75rem; }

/* Comparison: one row per economy, slope and 95% interval on a shared scale */
.okun-lower {
    display: grid;
    gap: var(--stack) 4vw;
}
@media (min-width: 900px) {
    .okun-lower { grid-template-columns: 7fr 5fr; align-items: start; }
}

.okun-compare-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    line-height: 1.25;
    margin-bottom: 1.25rem;
}
.okun-compare { display: grid; gap: 0.25rem; margin-bottom: 0.75rem; --zero: 80%; }
.okun-compare-head,
.okun-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 4.25rem 6.5rem;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
}
.okun-compare-head { font-size: var(--fs-small); color: var(--text-secondary); }
.okun-compare-head span:nth-child(n + 3),
.okun-row-beta,
.okun-row-self { text-align: right; }

.okun-row {
    min-height: 44px;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.12s var(--ease-out);
}
.okun-row:active { transform: scale(0.985); }
.okun-row.is-active { background: var(--surface-raised); }
.okun-row.is-active .okun-row-name { font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
    .okun-row:hover { background: var(--surface-raised); }
}
.okun-row-beta { font-family: var(--font-mono); }
.okun-row-self { color: var(--text-secondary); }

.okun-row-track { position: relative; height: 24px; }
.okun-compare-axis { position: relative; height: 1.5rem; }
.okun-compare-axis span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.okun-row-track::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: var(--zero);
    width: 1px;
    background: rgba(var(--text-rgb), 0.35);
}
.okun-row-track i {
    position: absolute;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    left: var(--lo, 0%);
    width: calc(var(--hi, 0%) - var(--lo, 0%));
    border-radius: 2px;
    background: rgba(var(--text-rgb), 0.45);
}
.okun-row-track::after {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--b, 0%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-primary);
    transform: translate(-50%, -50%);
}
.okun-row.is-weak .okun-row-track::after { background: var(--surface); border: 2px solid var(--text-primary); box-sizing: border-box; }
.okun-row.is-active.is-weak .okun-row-track::after { background: var(--surface-raised); }
/* Without the script the intervals cannot be drawn; the slopes still read */
.model-section:not(.is-live) .okun-row-track { visibility: hidden; }

.okun-reading-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 1rem;
}
.okun-reading {
    font-size: var(--fs-body);
    line-height: 1.65;
    max-width: 50ch;
    margin-bottom: 1rem;
}
.okun-data { margin-top: 1.5rem; }
.okun-data summary {
    display: inline-block;
    padding: 0.75rem 0;
    font-size: var(--fs-small);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.35em;
    cursor: pointer;
}
.okun-data .okun-table-wrap { margin-top: 0.5rem; }
.okun-data-table tr.is-out td,
.okun-data-table tr.is-out th { color: var(--text-secondary); }

@media (max-width: 599px) {
    .okun-compare-head,
    .okun-row { grid-template-columns: 5.5rem minmax(0, 1fr) 3.5rem 3.5rem; gap: 0.5rem; padding: 0.5rem; }
    .okun-table th,
    .okun-table td { padding: 0.55rem 0.2rem; }
    .okun-table td:last-child { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .okun-svg.is-moving .okun-pt { transition: none; }
}

/* ==========================================================================
   Record (résumé highlights)
   ========================================================================== */
.record-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: var(--stack);
}
.record-header .section-title { margin-bottom: 0; }

.record-cta,
.resume-download {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}
.record-cta::after { content: '\00a0\2192'; }
.record-cta:hover,
.resume-download:hover { color: var(--text-secondary); }

.record-list {
    display: grid;
    gap: 2rem;
    margin-bottom: var(--stack);
}

.record-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
}
@media (min-width: 768px) {
    .record-item {
        grid-template-columns: 9rem 1.2fr 1fr;
        gap: 2rem;
        align-items: baseline;
    }
}

.record-years {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.record-org {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    line-height: 1.25;
}
.record-role {
    font-size: var(--fs-body);
    color: var(--text-primary);
}

.record-honors {
    display: grid;
    gap: 0.75rem 4vw;
    padding: 2rem;
    border-radius: 0.5rem;
    background: var(--surface);
    font-size: var(--fs-body);
}
@media (min-width: 768px) {
    .record-honors { grid-template-columns: 1fr 1fr; padding: 2.5rem; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .about-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 5vw;
        align-items: center;
    }
}

.about-bio {
    font-size: var(--fs-body);
    line-height: 1.65;
    max-width: 62ch;
}
.about-bio + .about-bio { margin-top: 1.25rem; }

.about-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.meta-label {
    display: block;
    font-size: var(--fs-small);
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.meta-value {
    font-size: var(--fs-body);
    color: var(--text-primary);
}

.about-image {
    width: 100%;
    max-width: 440px;
    aspect-ratio: 4 / 5;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 0 auto;
}
@media (min-width: 768px) { .about-image { margin-right: 0; } }

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.about-image:hover img { filter: grayscale(0%); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    padding: var(--section) var(--gutter) 2rem;
    background-color: var(--bg-deep);
}

.footer-cta { margin-bottom: var(--section); }

.footer-title {
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
    max-width: 14ch;
    margin-bottom: var(--stack);
}

.footer-email {
    display: inline-block;
    font-size: var(--fs-lead);
    text-decoration-thickness: 2px;
}
.footer-email:hover { color: var(--text-secondary); }

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.footer-socials {
    display: flex;
    gap: 2rem;
}

.footer-socials a {
    display: inline-block;
    padding: 0.75rem 0;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    transition: color 0.2s ease, transform 0.12s var(--ease-out);
}
.footer-socials a:hover { color: var(--text-secondary); }

.footer-legal {
    display: grid;
    gap: 0.35rem;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}
@media (min-width: 768px) { .footer-legal { text-align: right; } }
.footer-credit a { text-decoration: underline; text-underline-offset: 0.2em; }
.footer-credit a:hover { color: var(--text-primary); }

/* ==========================================================================
   Motion: entrances, press feedback, focus
   ========================================================================== */
/* Parts of each section rise in order: heading, then text, then picture.
   Only added from JS, so content is never hidden if the script fails. */
.will-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.is-revealed {
    opacity: 1;
    transform: none;
}

/* Press: feedback on press-in, on every control */
:is(.btn-contact, .btn-menu, .model-reset, .expertise-proof, .record-cta, .footer-email,
    .side-link, .nav-item a, .footer-socials a, .btn-close-menu, .case-nav a):active {
    transform: scale(0.97);
}

/* Skip link */
.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10001;
    padding: 0.75rem 1rem;
    background: var(--ink);
    color: var(--paper);
    font-size: var(--fs-small);
    transform: translateY(-200%);
    transition: transform 0.2s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Focus states */
:is(a, button):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}
.project-card:focus-within .project-link { color: var(--text-secondary); }

/* Reduced motion: content shows at once, nothing travels */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .will-reveal { opacity: 1; transform: none; }
    .project-media img { animation: none; transform: none; }
}

/* ==========================================================================
   Interactive cursor
   .cursor is the dot. The blend sits on the fixed element itself so it
   inverts against the page (dark on paper, light on dark). .cursor-tag is
   a separate, unblended label that slides out beside the dot.
   ========================================================================== */
.has-custom-cursor,
.has-custom-cursor * { cursor: none !important; }

.cursor,
.cursor-tag {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10002;
    pointer-events: none;
    will-change: transform;
}

.cursor {
    width: 0;
    height: 0;
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.cursor-visible .cursor { opacity: 1; }

.cursor-shape {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-primary);
    transition: transform 0.22s var(--ease-out);
}

/* Link: the dot swells into a soft inverted lens */
.cursor[data-state="link"] .cursor-shape { transform: scale(4); }
/* Labelled states: the dot tightens and lets the tag speak */
.cursor[data-state="view"] .cursor-shape,
.cursor[data-state="drag"] .cursor-shape { transform: scale(0.75); }
.cursor.is-pressed .cursor-shape { transform: scale(0.5); }
.cursor.is-pressed[data-state="link"] .cursor-shape { transform: scale(3.2); }

.cursor-tag { width: 0; height: 0; }

.cursor-tag span {
    position: absolute;
    left: 14px;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 2rem;
    background: var(--text-primary);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-6px, -50%);
    clip-path: inset(0 100% 0 0 round 2rem);
    transition: opacity 0.2s ease, transform 0.3s var(--ease-out), clip-path 0.3s var(--ease-out);
}

.cursor-tag[data-state="view"] span,
.cursor-tag[data-state="drag"] span {
    opacity: 1;
    transform: translate(0, -50%);
    clip-path: inset(0 0 0 0 round 2rem);
}

/* ==========================================================================
   Cross-document view transitions (landing <-> case study)
   The project title morphs from its card into the case-study headline.
   ========================================================================== */
@view-transition { navigation: auto; }

.portfolio-gallery .project-card:nth-child(1) .project-title,
.case-hero[data-case="cap"] .case-hero-title { view-transition-name: case-cap; }
.portfolio-gallery .project-card:nth-child(2) .project-title,
.case-hero[data-case="wage"] .case-hero-title { view-transition-name: case-wage; }
.portfolio-gallery .project-card:nth-child(3) .project-title,
.case-hero[data-case="water"] .case-hero-title { view-transition-name: case-water; }

::view-transition-old(root) { animation: vt-out 0.35s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 0.55s var(--ease-out) both; }
::view-transition-group(case-cap),
::view-transition-group(case-wage),
::view-transition-group(case-water) { animation-duration: 0.6s; animation-timing-function: var(--ease-out); }

@keyframes vt-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(32px); } }

/* ==========================================================================
   Case study pages (and the résumé, which shares the shell)
   Same five sizes, gutter and section rhythm as the landing page.
   Sections alternate between the ground and a --surface field.
   ========================================================================== */
.case-page { background: var(--bg-color); }

/* Reading progress: pure CSS, driven by the document scroll timeline */
.case-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: var(--text-primary);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 1000;
}
@supports (animation-timeline: scroll()) {
    .case-progress {
        animation: case-progress linear both;
        animation-timeline: scroll(root);
    }
}
@keyframes case-progress { to { transform: scaleX(1); } }

.case-nav {
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem var(--gutter);
    background: var(--bg-color);
}

.case-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    font-size: var(--fs-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    transition: color 0.2s ease, transform 0.12s var(--ease-out);
}
.case-nav a:hover { color: var(--text-secondary); }
.case-back svg { transition: transform 0.25s var(--ease-out); }
.case-back:hover svg,
.case-back:focus-visible svg { transform: translateX(-4px); }

/* Hero: the title fits two lines at every width. --chars on the element is
   its length; the size is the smaller of the scale step and what fits. */
.case-hero {
    padding: clamp(3rem, 6vw, 6rem) var(--gutter) var(--section);
    container-type: inline-size;
}
.case-hero-text { container-type: inline-size; }

.case-hero-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: min(clamp(2.25rem, 6vw, 5.5rem), calc(100cqi * 3.7 / var(--chars, 30)));
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.case-hero .project-category { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.case-lede {
    font-size: var(--fs-body);
    line-height: 1.65;
    max-width: 62ch;
}

.case-hero-title,
.case-hero .project-category,
.case-lede {
    animation: hero-in 0.6s var(--ease-out) both;
}
.case-hero .project-category { animation-delay: 0.08s; }
.case-lede { animation-delay: 0.16s; }

.case-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: var(--stack);
}
.case-meta .meta-value { line-height: 1.5; }

/* A hero with its own picture: text left, picture right */
@media (min-width: 900px) {
    .case-hero.has-media {
        display: grid;
        grid-template-columns: 5fr 7fr;
        column-gap: 4vw;
        align-items: end;
    }
}
.case-hero-media {
    margin-top: var(--stack);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--surface);
}
@media (min-width: 900px) {
    .case-hero.has-media .case-hero-media { margin-top: 0; }
}
.case-hero-media img {
    width: 100%;
    height: min(75vh, 720px);
    object-fit: cover;
}
.case-hero-media figcaption {
    padding: 0.75rem 1rem;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

/* Key numbers: one band on a field, no rules between the cells */
.case-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--stack) 4vw;
    padding: var(--section) var(--gutter);
    background: var(--surface);
}
@media (min-width: 900px) {
    .case-stats { grid-template-columns: repeat(4, 1fr); }
}
.case-stat-value {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.75rem;
}
.case-stat-value small { font-size: 0.5em; color: var(--text-secondary); }
.case-stat-label {
    display: block;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--text-primary);
    max-width: 30ch;
}

/* Sections with a sticky heading column */
.case-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: var(--section) var(--gutter);
}
.case-section:nth-of-type(odd) { background: var(--surface); }
@media (min-width: 900px) {
    .case-section { grid-template-columns: 220px minmax(0, 1fr); gap: 5vw; }
}

.case-section-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-primary);
}

.case-body > * + * { margin-top: 1.5rem; }
.case-body > p,
.case-body > ul,
.case-body > ol,
.case-body > h3 { max-width: 68ch; }
.case-body > h3 { margin-top: clamp(4.5rem, 6vw, 6rem); }
.case-body > h3:first-child { margin-top: 0; }
.case-body h3,
.case-statement {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--fs-lead);
    line-height: 1.3;
}
.case-body p,
.case-body li {
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text-primary);
}
.case-body .case-statement { font-size: var(--fs-lead); line-height: 1.3; }
.case-body strong { font-weight: 500; }
.case-body ul { display: grid; gap: 0.75rem; }
.case-body ul li { padding-left: 1.5rem; position: relative; }
.case-body ul li::before {
    content: '';
    position: absolute;
    left: 0.1rem; top: 0.7em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-secondary);
}

.case-callout {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 0.5rem;
    background: var(--surface-raised);
}
.case-body .case-callout p { font-family: var(--font-serif); font-size: var(--fs-lead); line-height: 1.35; }

/* Ordered steps: a real list, its numbers set in the text face */
.case-steps-list {
    counter-reset: step;
    display: grid;
    gap: 1.5rem;
}
.case-steps-list li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
}
.case-steps-list li::before {
    content: counter(step) '.';
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    line-height: 1.2;
    color: var(--text-secondary);
}
.case-steps-list li strong { display: block; margin-bottom: 0.25rem; }

/* Figures */
.case-figure { margin: var(--stack) 0 0; }
.case-figure img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    background: var(--surface);
}
.case-figure figcaption {
    margin-top: 0.9rem;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--text-secondary);
}
.case-figure-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.case-figure-grid .case-figure { margin-top: 0; }
@media (min-width: 700px) {
    .case-figure-grid { grid-template-columns: 1fr 1fr; }
}
.case-body > .case-figure-grid { margin-top: var(--stack); }

.case-zoom { overflow: hidden; border-radius: 0.5rem; }
.case-zoom img { transition: transform 0.5s var(--ease-out); }
.case-zoom:hover img { transform: scale(1.03); }

/* Data tables: real tables keep their row lines */
.case-table-wrap { overflow-x: auto; }
.case-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}
.case-table caption {
    text-align: left;
    font-size: var(--fs-small);
    color: var(--text-secondary);
    padding-bottom: 1rem;
}
.case-table th,
.case-table td {
    padding: 0.9rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}
.case-table th:first-child,
.case-table td:first-child { text-align: left; }
.case-table thead th {
    font-weight: 400;
    color: var(--text-secondary);
}
.case-table td { color: var(--text-primary); }
.case-table tbody tr { transition: background-color 0.2s ease; }
.case-table tbody tr:hover { background: rgba(var(--text-rgb), 0.04); }
.case-table tr.is-key td { font-weight: 500; }
.case-table tr.is-key td:first-child::after {
    content: ' (key result)';
    font-weight: 400;
    color: var(--text-secondary);
}
.case-body .case-table-note { font-size: var(--fs-small); color: var(--text-secondary); }
/* On a phone the regression table stacks: one variable per block */
@media (max-width: 699px) {
    .case-table { min-width: 0; }
    .case-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .case-table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border-color); }
    .case-table td { display: block; padding: 0.15rem 0; border: none; text-align: left; }
    .case-table td:first-child { grid-column: 1 / -1; font-weight: 500; }
    .case-table td[data-label]::before { content: attr(data-label) ' '; color: var(--text-secondary); }
}

/* Horizontal bar list (per-class F1): single series, monochrome magnitude */
.bar-list { display: grid; gap: 0.25rem; }
.bar-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr 3rem;
    align-items: center;
    gap: 1rem;
    font-size: var(--fs-small);
}
.bar-row .bar-name { color: var(--text-secondary); }
.bar-row .bar-value { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bar-track { height: 1.75rem; display: flex; align-items: center; }
.bar-fill {
    height: 8px;
    width: calc(var(--v) * 100%);
    border-radius: 4px;
    background: rgba(var(--text-rgb), 0.45);
    transform-origin: left;
    transition: background-color 0.2s ease;
}
.bar-row.is-high .bar-fill,
.bar-row:hover .bar-fill { background: var(--text-primary); }
.bar-row.is-low .bar-name,
.bar-row.is-high .bar-name { color: var(--text-primary); }
@supports (animation-timeline: view()) {
    .bar-fill {
        animation: bar-grow linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 35%;
    }
}
@keyframes bar-grow { from { transform: scaleX(0); } }

/* Field test: a real table, one sample per row. On a phone each row
   becomes picture + facts, labels taken from data-label. */
.sample-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}
.sample-table th,
.sample-table td {
    padding: 1rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}
.sample-table thead th { font-weight: 400; color: var(--text-secondary); }
.sample-table td:first-child { width: 112px; padding-left: 0; }
.sample-table img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 0.4rem;
}
.sample-table .is-miss td { color: var(--text-secondary); }
.sample-verdict { font-weight: 500; }
@media (max-width: 699px) {
    .sample-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .sample-table tr {
        display: grid;
        grid-template-columns: 96px 1fr;
        column-gap: 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-color);
    }
    .sample-table td { display: block; padding: 0.15rem 0; border: none; }
    .sample-table td:first-child { grid-row: span 3; width: auto; }
    .sample-table td[data-label]::before {
        content: attr(data-label) ': ';
        color: var(--text-secondary);
    }
}

/* Next project */
.case-next {
    display: block;
    container-type: inline-size;
    padding: var(--section) var(--gutter);
    background: var(--surface);
    transition: background-color 0.3s var(--ease-out);
}
.case-next:hover,
.case-next:focus-visible { background: var(--surface-raised); }
.case-next-title {
    display: block;
    font-family: var(--font-serif);
    font-size: min(var(--fs-h2), calc(100cqi * 3.7 / var(--chars, 30)));
    line-height: 1.1;
    margin-bottom: 1rem;
}
.case-next .meta-label::after {
    content: '\00a0\2192';
    display: inline-block;
    transition: transform 0.25s var(--ease-out);
}
.case-next:hover .meta-label::after { transform: translateX(6px); }

.case-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 2rem var(--gutter);
    font-size: var(--fs-small);
    color: var(--text-secondary);
}
.case-footer a { display: inline-block; padding: 0.75rem 0; color: var(--text-primary); }
.case-footer a:hover { color: var(--text-secondary); }
.case-credits { flex-basis: 100%; max-width: 68ch; }
.case-credits a { padding: 0; text-decoration: underline; text-underline-offset: 0.2em; color: inherit; }

/* Reduced motion for the case pieces */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .bar-fill { animation: none; }
    .case-progress { display: none; }
}

/* ==========================================================================
   Résumé page
   ========================================================================== */
.resume-hero .case-hero-title { margin-bottom: 0.5rem; }
.resume-hero .project-category {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    color: var(--text-primary);
}
@media (min-width: 900px) {
    .case-hero.resume-hero.has-media { grid-template-columns: 7fr 5fr; }
}
.resume-hero .case-hero-media { max-width: 440px; justify-self: end; width: 100%; }
.resume-hero .case-hero-media img { height: auto; aspect-ratio: 4 / 5; object-position: center top; filter: grayscale(100%); }

.resume-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.resume-block { padding: var(--section) var(--gutter); }
.resume-block:nth-of-type(odd) { background: var(--surface); }
@media (min-width: 900px) {
    .resume-block { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 5vw; }
}
.resume-block .case-section-title { margin-bottom: 1.5rem; }

.resume-entry {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
}
.resume-entry + .resume-entry { margin-top: 2.5rem; }
/* Two short entries sit side by side instead of leaving the row half empty */
@media (min-width: 700px) {
    .resume-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 4vw; }
    .resume-pair .resume-entry + .resume-entry { margin-top: 0; }
}
.resume-what {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    line-height: 1.25;
}
.resume-where {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}
.resume-when {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.resume-where a { text-decoration: underline; text-underline-offset: 0.2em; transition: color 0.2s ease; }
.resume-where a:hover { color: var(--text-primary); }

.resume-desc {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
    max-width: 68ch;
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text-primary);
}

.resume-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    font-size: var(--fs-body);
}

/* Selected case studies: three pictures that open each study, full width */
@media (min-width: 900px) {
    .resume-block.resume-work { display: block; }
}
.resume-work-grid {
    display: grid;
    gap: var(--stack) 4vw;
}
@media (min-width: 1000px) {
    .resume-work-grid { grid-template-columns: repeat(3, 1fr); }
}
.resume-work-item { display: grid; gap: 1rem; align-content: start; }
.resume-work-item img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0.5rem;
    transition: transform 0.12s var(--ease-out);
}
.resume-work-item:active img { transform: scale(0.985); }
.resume-work-item span {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    line-height: 1.25;
    transition: color 0.2s ease;
}
.resume-work-item:hover span { color: var(--text-secondary); }
.resume-work .record-cta { margin-top: var(--stack); }

/* ==========================================================================
   Print: the résumé page prints (and exports to PDF) as a clean light sheet
   ========================================================================== */
@media print {
    @page { margin: 11mm 13mm; }
    :root {
        --bg-color: #ffffff;
        --text-primary: #111111;
        --text-secondary: #555555;
        --border-color: rgba(0, 0, 0, 0.12);
        --border-strong: rgba(0, 0, 0, 0.25);
    }
    body::before,
    .case-nav,
    .case-progress,
    .skip-link,
    .resume-actions [download],
    .case-hero-media,
    .resume-work,
    .case-next,
    .case-footer,
    .cursor,
    .cursor-tag { display: none !important; }
    body { background: var(--bg-color); color: var(--text-primary); }
    .case-hero { display: block; padding: 0 0 4mm; }
    .case-hero-title,
    .case-hero .project-category,
    .case-lede { animation: none; }
    .resume-hero .case-hero-title { font-size: 26pt; margin: 0 0 1mm; max-width: none; }
    .resume-hero .project-category { font-family: var(--font-sans); font-size: 8.5pt; margin-bottom: 2mm; color: var(--text-secondary); }
    .case-lede { font-size: 10pt; max-width: none; color: var(--text-secondary); }
    .resume-actions { margin-top: 3mm; }
    .resume-actions a { min-height: 0; font-size: 8.5pt; text-decoration: none; }
    .resume-block,
    .resume-block:nth-of-type(odd) { background: none; display: grid; grid-template-columns: 34mm minmax(0, 1fr); gap: 8mm; padding: 2.8mm 0; border-top: 0.5pt solid var(--border-color); }
    .resume-block .case-section-title { position: static; margin: 0; break-after: avoid; font-family: var(--font-sans); font-size: 8pt; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); }
    .resume-entry { break-inside: avoid; padding: 1.3mm 0; gap: 0.4mm; grid-template-columns: minmax(0, 1fr) auto; }
    .resume-entry + .resume-entry { margin-top: 0; border-top: 0.5pt solid var(--border-color); }
    .resume-entry .resume-when { grid-column: 2; grid-row: 1; text-align: right; }
    .resume-what, .resume-where { grid-column: 1; }
    .resume-pair { display: block; }
    .resume-pair .resume-entry + .resume-entry { margin-top: 0; }
    .resume-what { font-size: 10.5pt; }
    .resume-where, .resume-when, .resume-tags { font-size: 8.5pt; }
    .resume-desc { font-size: 8pt; line-height: 1.45; margin-top: 0.3mm; max-width: none; color: var(--text-secondary); }
    .resume-tags { gap: 1.5mm 5mm; }
    .will-reveal { opacity: 1 !important; transform: none !important; }
    a { text-decoration: none; }
}
html:not(.cursor-visible) .cursor-tag span { opacity: 0; }