/* [2026-06-17] Added hybrid-home-hero classes (.hero-leads, .hero-leads-label, .hero-tagline)
   and set .landing-hero-grid to top-align. New component classes only; no token changes. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --page-bg: #EEF2F5;
    --surface: #FFFFFF;
    --text-primary: #1A1A1A;
    --text-secondary: #5A6470;
    --accent: #A03968;
    --border: #E5E9ED;
    --border-strong: #D5DAE0;

    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'JetBrains Mono', monospace;

    /* Content widths (per brief) */
    --w-reading: 720px;     /* body prose */
    --w-panels: 1080px;     /* metadata strips, metric callouts, figures, next-cta */
    --w-wide: 1080px;       /* nav, footer, hero card grid, breadth grid */
    --w-bleed: 1440px;      /* full-bleed imagery (case study covers, hero band) */
}

body {
    background-color: var(--page-bg);
    color: var(--text-primary);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Typography System */
h1 {
    font-family: var(--serif);
    font-size: clamp(48px, 6vw, 88px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 0.5em;
}

h2 {
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.1;
    margin: 1.5em 0 0.75em 0;
}

h3 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 400;
    line-height: 1.2;
    margin: 1.5em 0 0.5em 0;
}

h4 {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    margin: 1.25em 0 0.5em 0;
}

p {
    margin-bottom: 1.33em;
}

.eyebrow {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1.5em;
}

/* Note: eyebrow text supplies its own middle separator; no trailing one. */
.eyebrow-separator::after {
    content: "";
}

.lead {
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(26, 26, 26, 0.8);
    margin-bottom: 1.5em;
}

.caption {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-secondary);
}

.metadata-label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Navigation — outer is full-width sticky bar; inner aligns to main content. */
nav {
    border-bottom: 1px solid var(--border);
    background-color: var(--page-bg);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-inner {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 20px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 400;
    height: 24px;
    line-height: 24px;
}

.nav-links {
    display: flex;
    gap: 2em;
    list-style: none;
}

.nav-links a {
    font-family: var(--sans);
    font-size: 15px;
    color: var(--text-primary);
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    transition: all 150ms ease-out;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--accent);
    transition: width 150ms ease-out;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Layout
   Main is a 1080px (wide) content lane.
   Specific elements that need 720px (reading) or 1440px (bleed)
   apply those widths themselves. */
body > main {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 768px) {
    body > main {
        padding: 0 24px;
    }
    .nav-inner {
        padding: 16px 24px;
    }
    .nav-links {
        gap: 1em;
    }
    .nav-links a {
        font-size: 14px;
    }
}

.reading-column {
    max-width: var(--w-reading);
    margin: 0 auto;
}

.wide-column {
    max-width: var(--w-wide);
    margin: 0 auto;
}

/* Hero Section (Home) */
.hero {
    padding: 96px 0 64px 0;
    text-align: left;
    max-width: var(--w-reading);
    margin: 0 auto;
}

.hero h1 {
    margin-bottom: 0.25em;
    text-align: left;
}

.hero .lead {
    max-width: var(--w-reading);
    margin: 2em 0 2em 0;
    text-align: left;
}

.hero-cta {
    margin-top: 2em;
    text-align: left;
}

/* Buttons & Links */
.text-link {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    transition: all 150ms ease-out;
}

.text-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--accent);
    transition: width 150ms ease-out;
}

.text-link:hover::after {
    width: 100%;
}

.text-link .arrow {
    display: inline-block;
    margin-left: 0.25em;
    transition: transform 150ms ease-out;
}

.text-link:hover .arrow {
    transform: translateX(4px);
}

/* Tags */
.tag {
    display: inline-block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 4px 12px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.tags {
    margin-bottom: 2em;
}

/* Cards */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    padding: 32px;
    transition: all 150ms ease-out;
}

.card:hover {
    border-color: var(--accent);
}

.card-cover {
    margin: -32px -32px 32px -32px;
    width: calc(100% + 64px);
    aspect-ratio: 16 / 9;
    min-height: 200px;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Wireframe-stage placeholder for card covers — same convention as
   .figure-placeholder. Renders as a full-fill light-gray block with a
   centered mono caps caption. Uses explicit width/aspect-ratio plus a
   min-height fallback for older WebKit renderers. */
.card-cover-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 220px;
    background-color: var(--page-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    box-sizing: border-box;
}

.card-cover-placeholder .figure-placeholder-inner {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 320px;
}

.card-cover-placeholder .figure-placeholder-inner::before {
    content: "Image · ";
    color: var(--accent);
    font-weight: 600;
}

.card h3 {
    margin-top: 0;
    margin-bottom: 0.75em;
}

.card-meta {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 1.5em;
}

.card-cta {
    margin-top: 2em;
}

/* Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin: 4em 0;
}

.breadth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin: 4em 0;
}

/* Metadata Strip — defined panel that anchors the case study header.
   Locked to the reading column width; flips to 2-col on narrow screens. */
.metadata-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin: 0 0 5em 0;
    background-color: var(--surface);
    border: 1px solid var(--border);
}

.metadata-item {
    padding: 24px 24px;
    border-right: 1px solid var(--border);
    text-align: left;
    min-width: 0;
}

.metadata-item:last-child {
    border-right: none;
}

.metadata-item .metadata-label {
    display: block;
    margin-bottom: 0.6em;
    font-size: 10px;
}

.metadata-item p {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    color: var(--text-primary);
}

@media (max-width: 760px) {
    .metadata-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .metadata-item {
        padding: 22px 22px;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }
    .metadata-item:nth-child(2n) {
        border-right: none;
    }
    /* Last row's bottom border removed — works for both 2n and 2n-1 last items */
    .metadata-item:last-child {
        border-bottom: none;
    }
    .metadata-item:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
    }
    .metadata-item p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .metadata-strip {
        grid-template-columns: 1fr;
    }
    .metadata-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .metadata-item:last-child {
        border-bottom: none;
    }
}

/* Section spacing */
section {
    margin: 6em 0;
}

section:first-of-type {
    margin-top: 0;
}

/* Consistent 88px gap below the nav across all main-level pages.
   Work's first section carries no wrapper class (others use
   .landing-hero / .editorial-page / .resume-page with an 88px top),
   so pin it here and neutralize the first heading's collapsing margin. */
body > main > section:first-of-type:not([class]) {
    padding-top: 88px;
}
body > main > section:first-of-type:not([class]) > h2:first-child {
    margin-top: 0;
}

/* Pull quotes — left rule, restrained scale */
.pull-quote {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 3em auto;
    padding: 0 0 0 32px;
    border-left: 2px solid var(--accent);
    max-width: var(--w-reading);
}

.pull-quote cite,
.pull-quote .pull-quote-attribution {
    display: block;
    margin-top: 1em;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color: var(--text-secondary);
}

/* Callout blocks — used for "What it became" and similar editorial callouts.
   Distinct visual unit on the page background per v5 spec. */
.callout {
    background-color: var(--surface);
    border: 1px solid var(--border);
    padding: 32px 36px;
    margin: 2.5em auto;
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout strong {
    color: var(--accent);
    font-weight: 600;
}

/* Metric callouts — structured panel with dividers.
   Default 3-up; .metric-callout-2 forces 2-up. Both panels keep the same
   outer width so they read as a consistent visual rhythm. */
.metric-callout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 3em 0;
    background-color: var(--surface);
    border: 1px solid var(--border);
}

.metric-callout-2 {
    grid-template-columns: repeat(2, 1fr);
}

.metric-callout-4 {
    grid-template-columns: repeat(4, 1fr);
}

.metric {
    padding: 32px 28px;
    border-right: 1px solid var(--border);
    min-width: 0;
}

.metric:last-child {
    border-right: none;
}

.metric-number {
    font-family: var(--serif);
    font-size: clamp(32px, 3.8vw, 44px);
    font-weight: 400;
    line-height: 1.05;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.metric-label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .metric-callout,
    .metric-callout-2,
    .metric-callout-4 {
        grid-template-columns: 1fr;
    }
    .metric {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .metric:last-child {
        border-bottom: none;
    }
}

/* Figures and placeholders (wireframe-stage convention per brief) */
figure {
    margin: 3.5em 0;
}

/* Real imagery inside a figure renders responsively and fills the figure's
   constrained max-width (set by .detail-main > figure → 1080px panel,
   or .figure-reading → 720px reading column). A 14px border-radius
   gracefully clips rounded-corner source images (e.g. exported boards
   from Figma/Sketch where transparent corners flatten to black in JPEGs). */
figure > img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid var(--border);
}

figcaption {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 12px;
    line-height: 1.5;
    text-align: center;
}

/* Wireframe-stage placeholder per brief spec:
   white surface with hairline border on the page bg */
.figure-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    position: relative;
}

.figure-placeholder-inner {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 480px;
}

.figure-placeholder-inner::before {
    content: "Image · ";
    color: var(--accent);
    font-weight: 600;
}

.figure-placeholder.figure-portrait {
    aspect-ratio: 4 / 3;
}

.figure-placeholder.figure-tall {
    aspect-ratio: 1 / 1;
}

figure.figure-wide {
    max-width: 100%;
}

figure.figure-reading {
    max-width: var(--w-reading);
    margin-left: auto;
    margin-right: auto;
}

/* Two-column image row */
.figure-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 3.5em 0;
}

.figure-row figure {
    margin: 0;
}

@media (max-width: 700px) {
    .figure-row {
        grid-template-columns: 1fr;
    }
}

/* Back link */
.back-link {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 3em;
    transition: color 150ms ease-out;
}

.back-link:hover {
    color: var(--text-primary);
}

/* Detail page layout — every panel, figure, and prose block sits inside the
   same 720px reading column so the page has one consistent edge.
   `position: relative` anchors the absolutely-positioned contents nav. */
.detail-page {
    padding: 2.5em 0 2em 0;
    position: relative;
}

/* Reading-column elements: 720px centered (per brief — body prose). */
.detail-page > .detail-header,
.detail-page > .detail-body,
.detail-page > .pull-quote,
.detail-page > .callout,
.detail-page > .next-cta {
    max-width: var(--w-reading);
    margin-left: auto;
    margin-right: auto;
}

/* Structural panels: 960px centered (per brief — wider content allowed for
   metadata strips, metric callouts, multi-column figures). */
.detail-page > .metadata-strip,
.detail-page > .metric-callout,
.detail-page > figure {
    max-width: var(--w-panels);
    margin-left: auto;
    margin-right: auto;
}

.detail-page > .back-link {
    max-width: var(--w-reading);
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.detail-header {
    margin-bottom: 2.5em;
}

.detail-header .eyebrow {
    margin-bottom: 20px;
}

.detail-header h1 {
    font-size: clamp(40px, 5vw, 64px);
    margin-bottom: 24px;
}

.detail-header .lead {
    color: rgba(26, 26, 26, 0.85);
    margin-bottom: 24px;
    font-size: 20px;
}

.detail-header .tags {
    margin-bottom: 0;
}

.detail-page > .back-link {
    margin-bottom: 2em;
}

.detail-page > .metadata-strip {
    margin-bottom: 3em;
}

.detail-body {
    max-width: var(--w-reading);
}

.detail-body h2 {
    margin-top: 1.2em;
    margin-bottom: 0.75em;
    position: relative;
    /* When the contents-nav anchors to this H2, leave room above for the
       sticky site header (~64px) plus comfortable breathing room. */
    scroll-margin-top: 96px;
}

.detail-body h2:first-child {
    margin-top: 0;
}

.detail-body h2::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background-color: var(--accent);
    margin-bottom: 18px;
}

.detail-body h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.detail-body h3:first-child {
    margin-top: 0;
}

.detail-body ul,
.detail-body ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

.detail-body li {
    margin-bottom: 0.6em;
}

/* Tighten the gap between adjacent structural elements inside detail-page.
   Margins use `auto` horizontally so blocks center within the page. */
.detail-page > figure {
    margin: 2.5em auto;
}

.detail-page > .metric-callout {
    margin: 2.5em auto;
}

.detail-page > .pull-quote {
    margin: 2.5em auto;
}

/* When a figure/metric immediately follows a detail-body, the body's
   paragraph margin-bottom already provides separation. Cut the figure's
   top margin in half so the rhythm doesn't compound. */
.detail-page > .detail-body + figure,
.detail-page > .detail-body + .metric-callout,
.detail-page > .detail-body + .pull-quote {
    margin-top: 1.25em;
}

/* Detail-body that follows a figure/metric should also tighten its top.
   Its first h2/h3 already has reset margin-top: 0 via :first-child, so
   no change needed here. */
.detail-page > figure + .detail-body,
.detail-page > .metric-callout + .detail-body,
.detail-page > .pull-quote + .detail-body {
    margin-top: 1em;
}

/* Next CTA */
.next-cta {
    margin-top: 4em;
    padding: 36px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    max-width: var(--w-reading);
}

.next-cta-label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
}

.next-cta h3 {
    margin: 0;
    font-size: 28px;
}

.next-cta h3 a {
    color: var(--text-primary);
    text-decoration: none;
}

.next-cta h3 a:hover .arrow {
    transform: translateX(4px);
}

/* Footer — outer is full-width surface; inner aligns to main content. */
footer {
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    padding: 72px 0 28px 0;
    margin-top: 6em;
}

.footer-content {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 0 32px 40px 32px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    border-bottom: 1px solid var(--border);
}

.footer-meta {
    max-width: var(--w-wide);
    margin: 20px auto 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--sans);
}

.footer-meta p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

footer p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

footer h4 {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer li {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
}

footer a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.6;
    transition: color 150ms ease-out;
}

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

.footer-brand-name {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 12px !important;
}

.footer-brand .footer-tagline {
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 320px;
}

.footer-location {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* Hero Visual Section (Home page only) */
.hero-visual {
    padding: 96px 64px;
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 6em -32px 0 -32px;
}

.hero-card-grid {
    max-width: var(--w-bleed);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

.hero-card {
    display: flex;
    flex-direction: column;
}

.hero-card-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 24px;
    background-color: var(--page-bg);
}

.hero-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-card h3 {
    font-family: var(--serif);
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 12px 0;
    color: var(--text-primary);
}

.hero-card .caption {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Editorial pages (About, How I Lead) — wider than 720 to feel intentional */
.editorial-page {
    max-width: 820px;
    margin: 0 auto 6em auto;
    /* The below-nav gap is set with padding, not margin: section:first-of-type
       zeroes a first section's top margin and wins on specificity, so a margin
       here would be inert. Padding is uncontested and deterministic — and
       matches how .landing-hero (Home) sets its 88px gap. */
    padding-top: 88px;
}

.editorial-page > h1:first-child,
.editorial-page > h2:first-child {
    margin-top: 0;
}

.editorial-page h2 {
    margin-top: 1.6em;
}

.editorial-page h3 {
    margin-top: 1.6em;
    margin-bottom: 0.5em;
    position: relative;
}

.editorial-page h3::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background-color: var(--accent);
    margin-bottom: 18px;
}

.editorial-page .editorial-section + .editorial-section {
    margin-top: 2em;
}

/* How I Lead — wide variant: container widens to panel width so diagram
   figures break out past the 820px prose column. about.html's editorial-page
   is untouched. Prose children stay at 820; figures center at 960. */
.editorial-page--wide {
    max-width: var(--w-wide);
}
.editorial-page--wide > .eyebrow,
.editorial-page--wide > h1,
.editorial-page--wide > h2,
.editorial-page--wide > h3,
.editorial-page--wide > p,
.editorial-page--wide > .testimonial {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.editorial-page--wide > figure {
    max-width: 960px;
    margin: 2.3em auto;
}
.editorial-page--wide > figure > figcaption {
    text-align: center;
}
.editorial-page--wide > .culture-voices {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Journey cards (About) — the six stops beneath the flight map.
   Lives at the 960 figure width; reflows 3 → 2 → 1 columns. */
.editorial-page--wide > .journey-cards {
    max-width: 960px;
    margin: 20px auto 2.3em auto;
}

/* Personal photo placeholders (About) — drop <img> into each .photo-slot */
.editorial-page--wide > .photo-strip {
    max-width: 960px;
    margin: 1.6em auto 2.3em auto;
}
.photo-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.photo-slot {
    aspect-ratio: 4 / 3;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.4);
}
.photo-strip-note {
    grid-column: 1 / -1;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin: 4px 0 0 0;
}
@media (max-width: 560px) {
    .photo-strip {
        grid-template-columns: 1fr;
    }
    .photo-slot {
        aspect-ratio: 16 / 10;
    }
}
.journey-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.journey-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 20px;
}
.journey-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    min-height: 30px;
}
.journey-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--text-primary);
    color: #fff;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.journey-num--origin {
    background: var(--accent);
}
.journey-logo-slot {
    width: 92px;
    height: 30px;
    border: 1px dashed var(--border-strong);
    border-radius: 3px;
}
.journey-card h4 {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 3px 0;
    line-height: 1.15;
}
.journey-card .co {
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.journey-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.journey-card li {
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: #3a3f47;
    padding-left: 15px;
    position: relative;
    margin-bottom: 7px;
}
.journey-card li:last-child {
    margin-bottom: 0;
}
.journey-card li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.7;
}
@media (max-width: 860px) {
    .journey-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .journey-cards {
        grid-template-columns: 1fr;
    }
}

/* Quiet "in their own words" culture strip */
.culture-voices {
    margin-top: 3.5em;
    padding-top: 2.25em;
    border-top: 1px solid var(--border);
}
.culture-voices-kicker {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 1.75em 0;
}
.culture-voices-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.culture-voices-row blockquote {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary);
    text-align: center;
}
@media (max-width: 700px) {
    .culture-voices-row { grid-template-columns: 1fr; gap: 20px; }
}

/* Testimonials */
.testimonial {
    padding: 28px 32px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.testimonial-quote {
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-primary);
    font-style: italic;
    margin: 0 0 16px 0;
}

.testimonial-attr {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.testimonial-attr strong {
    color: var(--text-primary);
    font-weight: 500;
    font-style: normal;
}

/* Résumé page */
.resume-page {
    max-width: var(--w-wide);
    margin: 0 auto 6em auto;
    padding-top: 88px;
}

.resume-frame {
    background-color: var(--surface);
    border: 1px solid var(--border);
    padding: 64px;
    margin-top: 48px;
    text-align: center;
}

.resume-frame p {
    margin-bottom: 32px;
    font-size: 16px;
    color: var(--text-secondary);
}

.btn-primary {
    display: inline-block;
    padding: 12px 28px;
    background-color: var(--text-primary);
    color: var(--surface);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    margin-right: 12px;
    transition: background-color 150ms ease-out;
}

.btn-primary:hover {
    background-color: #2A2A2A;
}

.btn-secondary {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    transition: all 150ms ease-out;
}

.btn-secondary:hover {
    background-color: var(--text-primary);
    color: var(--surface);
}

@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
}

@media (max-width: 768px) {
    footer {
        padding: 56px 0 24px 0;
    }
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2em;
        padding: 0 24px 32px 24px;
    }
    .footer-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 0 24px;
    }
    body {
        font-size: 16px;
    }
    .hero-visual {
        padding: 64px 24px;
        margin: 4em -24px 0 -24px;
    }
    .hero-card-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .resume-frame {
        padding: 32px;
    }
    .btn-primary,
    .btn-secondary {
        display: block;
        margin: 0 0 12px 0;
        text-align: center;
    }
    .editorial-page {
        margin: 2em auto 4em auto;
    }
    .detail-page {
        padding: 1.5em 0;
    }
    .detail-header {
        margin-bottom: 2.5em;
    }
    .next-cta {
        padding: 28px;
    }
}

/* ============================================================
   In-page contents nav (case study pages)
   Sticky left-rail navigation that scroll-spies the H2 sections.
   Sits in the left gutter outside the 1080px content column,
   so it does not affect the existing centered reading layout.
   ============================================================ */

/* Contents nav: anchored to the RIGHT outer gutter (the space between the
   page edge and the 1080px centered panel column). Sits outside the panel
   frame, parallel to the body — same pattern Bauer uses. Sticky inner
   element scrolls with the page until it parks at top:96px.
   Uses 100vw (not 100%) because the parent <main> is constrained to 1080px;
   the gutter we want lives outside that parent, in the viewport. */
.contents-nav {
    position: absolute;
    top: 0;
    /* Position the right edge of this container at the right edge of the
       viewport. Since the parent <main> is centered at 1080px max-width,
       offsetting by negative half-gutter pushes us into the right gutter. */
    right: calc(-1 * ((100vw - var(--w-panels)) / 2));
    height: 100%;
    /* Width = right gutter width, with a small inset from the viewport edge. */
    width: calc((100vw - var(--w-panels)) / 2 - 32px);
    min-width: 0;
    pointer-events: none;  /* only inner sticky element captures clicks */
}

.contents-nav-sticky {
    position: sticky;
    top: 96px;
    pointer-events: auto;
    width: 160px;
    /* Center the sticky element within the right gutter (the space between
       the panel column right edge and the viewport right edge). This gives
       breathing room on both sides: the panel doesn't touch the nav, and
       the nav doesn't crash into the viewport edge. */
    margin-left: auto;
    margin-right: auto;
}

.contents-nav-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.contents-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contents-nav-list li {
    margin: 0;
}

.contents-nav-list a {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.contents-nav-list a:hover {
    color: var(--text-primary);
}

.contents-nav-list .contents-num {
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.contents-nav-list .contents-text {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
}

/* Active section — mulberry accent on number and text */
.contents-nav-list a.is-active {
    color: var(--text-primary);
}

.contents-nav-list a.is-active .contents-num {
    color: var(--accent);
    font-weight: 600;
}

/* Hide contents nav when there isn't enough room. The math:
   1080px panel + 32px gutter + 160px nav + 32px outer gutter ≈ 1304px on one side,
   doubled for symmetry ≈ 1432px minimum viewport. We round up to 1440px so
   the nav only appears when there's clean clearance from the panel edge. */
@media (max-width: 1440px) {
    .contents-nav {
        display: none;
    }
}

/* ============================================================
   Landing hero — direction B (rev33)
   Two-column: copy left, portrait right, mono proof strip,
   gated case-study CTA. Sits at the 1080px panel width.
   ============================================================ */
.landing-hero {
    max-width: var(--w-panels);
    margin: 0 auto;
    padding: 88px 0 72px 0;
}
.landing-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: 64px;
    align-items: start; /* [2026-06-17] top-align: portrait anchors to the top with the proof strip beneath it; headline moved to full-width head, foot carries tagline+CTA */
}
.landing-hero h1 {
    margin-bottom: 0.45em;
}
.landing-hero .lead {
    max-width: 34ch;
    margin: 0 0 1.6em 0;
}
.hero-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    margin-bottom: 32px;
}
.hero-proof span {
    padding: 0 14px;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.hero-proof span:first-child { padding-left: 0; }
.hero-proof span:last-child { border-right: 0; padding-right: 0; }

/* [2026-06-17] Hybrid-hero additions: "As a leader, I:" capability list + demoted
   positioning tagline. Reuse existing tokens only; no new colors/fonts/widths. */
.hero-leads-label {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 0.9em 0;
}
.hero-leads {
    list-style: none;
    margin: 0 0 1.6em 0;
    padding: 0;
    max-width: 42ch;
}
.hero-leads li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 0.6em;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
}
.hero-leads li:last-child { margin-bottom: 0; }
.hero-leads li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
/* Demoted slogan: quiet Inter positioning line, distinct from the mono proof strip below it. */
.hero-tagline {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 1.6em 0 18px 0;
}

/* [2026-06-17] Recomposed hero: full-width head (headline) + two-col split + full-width foot.
   Layout only; reuses existing tokens. */
.landing-hero-head {
    margin-bottom: 44px;
}
.landing-hero-head .eyebrow {
    margin-bottom: 1.2em;
}
.landing-hero-head h1 {
    margin-bottom: 0;
}
/* Credentials strip now sits beneath the portrait in the right column. */
.landing-hero-portrait-col .hero-proof {
    margin: 20px 0 0 0;
}
/* [2026-06-17] CTAs moved into the copy column under the leader list, roughly level with the
   credentials strip beneath the portrait; the full-width foot band and its hairline were
   removed to close the vertical gaps. */
.landing-hero-copy-col .landing-cta-row {
    margin-top: 36px;
}

/* [2026-06-17] Removed the availability-line and impact-band styles (.hero-availability,
   .avail-dot, .home-impact, .impact-*) along with their markup, by request. The original
   .metric-callout component is untouched. Contact treatment to be reworked with the footer. */

.hero-portrait {
    width: 100%;
    border-radius: 14px;
    display: block;
}

.landing-cta-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
/* Gated CTA = existing dark button + a small inline padlock */
.btn-lock {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn-lock svg {
    width: 13px;
    height: 13px;
    display: block;
    opacity: 0.9;
}

@media (max-width: 860px) {
    .landing-hero { padding: 56px 0 48px 0; }
    /* keep the below-nav gap consistent with Home (56px) on narrow screens */
    .editorial-page,
    .resume-page { padding-top: 56px; }
    body > main > section:first-of-type:not([class]) { padding-top: 56px; }
    .landing-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    /* [2026-06-17] Mobile order: intro → portrait group → leader list + CTAs.
       Dissolve the copy column (no box styling of its own) so its two groups
       reorder around the portrait. Desktop layout is unaffected. */
    .landing-hero-copy-col { display: contents; }
    .lh-intro { order: 1; }
    .landing-hero-portrait-col { order: 2; max-width: 360px; }
    .lh-leads { order: 3; }
    .landing-hero .lead { max-width: none; margin-bottom: 0; }
    .landing-hero-head { margin-bottom: 28px; }
    .landing-hero-copy-col .landing-cta-row { margin-top: 28px; }
}

/* ============================================================
   Case-study soft gate (rev33)
   Client-side overlay over work.html + the six case studies.
   NOTE: this is a SOFT gate — it deters casual visitors but is
   not real security (page source is viewable). For true
   protection when hosted on Vercel, enable Vercel Password
   Protection (Project → Settings → Deployment Protection) or
   Cloudflare Access, and the password word below can be removed.
   ============================================================ */
.gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--page-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.gate-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    max-width: 420px;
    width: 100%;
    padding: 44px 40px 40px 40px;
}
.gate-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 18px;
}
.gate-eyebrow::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    background: var(--accent);
    vertical-align: middle;
    margin-right: 12px;
}
.gate-panel h2 {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 12px 0;
}
.gate-note {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
}
.gate-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gate-input {
    font-family: var(--sans);
    font-size: 16px;
    color: var(--text-primary);
    background: var(--page-bg);
    border: 1px solid var(--border-strong);
    border-radius: 0;
    padding: 13px 14px;
    width: 100%;
    outline: none;
    transition: border-color 150ms ease-out;
}
.gate-input:focus { border-color: var(--accent); }
.gate-submit {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--surface);
    background: var(--text-primary);
    border: none;
    padding: 13px 22px;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 150ms ease-out;
}
.gate-submit:hover { background: #2A2A2A; }
.gate-error {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    min-height: 14px;
    margin-top: 4px;
    visibility: hidden;
}
.gate-error.show { visibility: visible; }
body.gate-locked { overflow: hidden; }

/* ============================================================
   Selected work strip — homepage (rev34, direction B)
   Labeled curated preview of all six covers; the only work an
   un-gated visitor sees before the case-study gate.
   ============================================================ */
.selected-work {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 8px 0 96px 0;
}
.sw-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    border-top: 1px solid var(--border);
    padding-top: 22px;
    margin-bottom: 38px;
}
.sw-eyebrow::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    background: var(--accent);
    vertical-align: middle;
    margin-right: 12px;
}
.sw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
}
.sw-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.sw-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--surface);
}
.sw-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease-out;
}
.sw-card:hover .sw-cover-image { transform: scale(1.03); }
.sw-card .eyebrow { margin: 14px 0 4px 0; }
.sw-title {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 400;
    margin: 0;
    transition: color 150ms ease-out;
}
.sw-card:hover .sw-title { color: var(--accent); }

@media (max-width: 860px) {
    .selected-work { padding-bottom: 64px; }
    .sw-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}
@media (max-width: 540px) {
    .sw-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Homepage section heading (rev36) — serif, smaller than the
   work-page H2 so it doesn't compete with the hero.
   ============================================================ */
.sw-heading {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
    margin: 0;
}

/* ============================================================
   Additional work — work page (rev36, Treatment C)
   Borderless editorial rows: mono ORG kicker + serif title +
   one-line description. Distinct from the interactive case-study
   cards above; signals a lighter reference tier.
   ============================================================ */
.aw-heading {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    margin: 5em 0 1.5em 0;
}
.aw-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 56px;
}
.aw-row {
    border-top: 1px solid var(--border);
    padding: 20px 0;
}
.aw-kicker {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.aw-kicker b {
    color: var(--accent);
    font-weight: 500;
}
.aw-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.25;
    margin: 0 0 6px 0;
}
.aw-desc {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}
@media (max-width: 700px) {
    .aw-grid { grid-template-columns: 1fr; gap: 0; }
    .aw-heading { margin-top: 3.5em; }
}

/* ============================================================
   Featured work — work page (rev39)
   3-up framed cards: hairline outline (no fill) like the figure
   imagery, aligned content (title 2 lines, desc 2 lines, tags
   1 line), headline metric, CTA right-aligned and bottom-pinned.
   ============================================================ */
.fwork-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.fcard {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: border-color 150ms ease-out;
}
.fcard:hover { border-color: var(--text-secondary); }
.fcard .fcover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 16px;
}
.fcard .fcover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease-out;
}
.fcard:hover .fcover-image { transform: scale(1.03); }
.fcard .eyebrow { margin: 0 0 6px 0; }
.fcard h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 9px 0;
    /* reserve two lines so descriptions start at the same height across a row */
    min-height: 2.4em;
}
.fcard .fdesc {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    min-height: 2.9em;
}
.fcard .fmetric {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-bottom: 14px;
}
.fcard .fnum {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 6px;
    white-space: nowrap;
}
.fcard .flabel {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.fcard .ftags {
    display: flex;
    gap: 7px;
    flex-wrap: nowrap;
    overflow: hidden;
    margin-bottom: 18px;
}
.fcard .ftag {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 3px 10px;
    white-space: nowrap;
}
.fcard .fcta {
    margin-top: auto;
    align-self: flex-end;
}
@media (max-width: 900px) { .fwork-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fwork-grid { grid-template-columns: 1fr; } }