/* Case study story: header with facts, narrow text sections and figures on a warm mat.
   Scoped to .story so the sidebar and the rest of each page's stylesheet are untouched. */
.story {
    --ink: #161615;
    --muted: #6b6b66;
    --soft: #6f6f6a;
    --faint: #8a8a85; /* large text only (3.3:1) */
    --line: rgba(0, 0, 0, 0.08);
    --mat: rgba(255, 255, 255, 0.66); /* light, so media separates from the page and the glow shows through */
    --accent: #8f2a1d;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px 32px 120px; /* top matches the side margin */
    min-width: 0;
    container-type: inline-size;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.014em;
    user-select: text;
}

.story :is(h1, h2, h3, p, li, dt, dd, figcaption) {
    pointer-events: auto;
    user-select: text;
    cursor: auto;
}

.story strong { font-weight: 400; color: var(--ink); }

/* Header: the title across the full width; overview and role side by side under it; facts below */
.story-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* Title and lead sit in their own rows of the header grid */
.story-intro { display: contents; }

.story-title {
    grid-column: 1 / -1;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: pretty;
}

.story-title span { color: var(--faint); font-weight: 400; }

/* A little more air between the title and the overview / role under it */
.story-title { margin-bottom: 12px; }
@container (min-width: 520px) { .story-title { margin-bottom: 18px; } }

.story-lead {
    max-width: 52ch;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

/* My role: beside the overview, top-aligned with it */
.story-role {
    max-width: 52ch;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

/* Facts: one row across the bottom of the header, label above value */
.story-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    font-size: 12px;
    line-height: 1.45;
}

.story-facts > div {
    display: grid;
    gap: 4px;
    align-content: start;
}

.story-facts dt { color: var(--soft); }

@container (min-width: 520px) {
    .story-header {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 56px;
        row-gap: 28px;
    }
    .story-lead { margin-top: 0; }
    /* Spread across the full content width: first flush left, last flush right, even gaps */
    .story-facts {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        gap: 24px;
        margin-top: 40px;
    }
    .story-facts > div { flex: 0 1 auto; max-width: 17rem; }
}

/* Text sections ------------------------------------------------------------- */
.story-section {
    max-width: 58ch;
    margin: 104px auto 0;
    color: var(--muted);
}

.story-section > * + * { margin-top: 8px; }

.story-section h2 {
    font-size: 15px;
    font-weight: 400;
    color: var(--ink);
}

.story-list { list-style: none; }
.story-list li + li { margin-top: 12px; }

/* Figures ------------------------------------------------------------------- */
.story-figure { margin-top: 40px; }
.story-header + .story-figure { margin-top: 72px; }
/* Text sits centered between the figure above and the one below */
.story-section + .story-figure { margin-top: 104px; }

.story-mat {
    border-radius: 20px;
    background-color: var(--mat);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 24px 48px -32px rgba(0, 0, 0, 0.14);
    padding: 6% 8%;
}

.story-figure.is-wide .story-mat { padding: 7% 10%; }
.story-figure.is-demo .story-mat { padding: 40px 5%; }

.story-mat :is(video, img) {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
    background-color: #fff;
}

.story-figure figcaption {
    margin-top: 12px;
    color: var(--soft);
    font-size: 12px;
}

/* Blocks between sections: stats, pairs, notes, steps, bars, quotes, flow, tiers ------------- */
.story-section + :is(.story-figure, .story-block, .story-stats) { margin-top: 104px; }
.story-block { margin-top: 40px; }
.story-figure + .story-block { margin-top: 28px; }

.story-facts a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.2s ease; }
.story-facts a:hover { border-color: var(--ink); }

/* Headline numbers under the hero, spread like the facts */
.story-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
    margin-top: 56px;
}

.story-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; max-width: 15rem; }
.story-stats dd { font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.story-stats dt { font-size: 12px; line-height: 1.45; color: var(--soft); }

@container (min-width: 520px) {
    .story-stats { display: flex; justify-content: space-between; gap: 24px; }
}

/* Finding → objective, problem → answer */
.story-pairs {
    list-style: none;
    max-width: 72ch;
    margin: 0 auto;
    border-top: 1px solid var(--line);
}

.story-pairs li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.55;
}

.story-pairs p { color: var(--muted); }
.story-pairs p:last-child { color: var(--ink); }
.story-pairs span { display: block; margin-bottom: 2px; font-size: 12px; color: var(--soft); }

@container (min-width: 520px) {
    .story-pairs li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}

/* Version notes under a recording: as wide as the figures, the title on top, then two
   balanced columns of numbered rows (what testing found in grey, what came next in black) */
.story-notes { font-size: 14px; line-height: 1.5; }
.story-notes-title { font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.story-notes-cols { display: grid; gap: 32px; margin-top: 28px; }
.story-notes h3 { padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 400; color: var(--soft); }
.story-notes-list { list-style: none; }
.story-notes-list li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--line); }
.story-notes-list span { font-size: 12px; line-height: 1.75; color: var(--soft); font-variant-numeric: tabular-nums; }
.story-notes-list p { color: var(--muted); }
.story-notes-cols > div:last-child .story-notes-list p { color: var(--ink); }

@container (min-width: 520px) {
    /* Rows line up across the two columns, so each finding sits level with its answer */
    .story-notes-cols { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto); gap: 0 48px; }
    .story-notes-cols > div { display: grid; grid-row: 1 / span 7; grid-template-rows: subgrid; }
    .story-notes-list { display: contents; }
}

/* Steps: numbered rows */
.story-steps { list-style: none; max-width: 72ch; margin: 0 auto; border-top: 1px solid var(--line); }
.story-steps li { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.55; }
.story-steps h3 { font-size: 13px; font-weight: 400; color: var(--ink); }
.story-steps p { color: var(--muted); }
.story-steps .story-steps-more { font-size: 12px; color: var(--soft); }

@container (min-width: 520px) {
    .story-steps li { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 32px; }
    .story-steps .story-steps-more { grid-column: 2; }
}

/* Content blocks on the mat */
.story-mat-plain { padding: 40px 6%; }
.story-mat-plain h3 { font-size: 13px; font-weight: 400; color: var(--ink); }

.story-bars-group + .story-bars-group { margin-top: 36px; }
.story-bars { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.story-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.story-bars .bar-track { grid-column: 1 / -1; grid-row: 2; }

@container (min-width: 520px) {
    .story-bars li { grid-template-columns: 9.5rem minmax(0, 1fr) 5.5rem; }
    .story-bars .bar-track { grid-column: auto; grid-row: auto; }
}
.story-bars .bar-track { height: 8px; border-radius: 999px; background-color: rgba(0, 0, 0, 0.06); overflow: hidden; }
.story-bars .bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background-color: var(--ink); }
.story-bars .bar-value { font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }

/* Testimonials (js/case.js): a quiet top row, one large quote, the attribution. Every quote shares
   one grid cell, so the card keeps the height of the longest and never jumps between them */
.story-voice { padding: 32px 24px; border-radius: 24px; background-color: var(--mat); }
.story-voice-top { display: flex; align-items: center; gap: 16px; }
.story-voice-nav { display: flex; gap: 6px; }
.story-voice-nav button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 1px var(--line);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.story-voice-nav button:hover { background-color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16); }
.story-voice-nav button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.story-voice-nav .icon { width: 16px; height: 16px; }
.story-voice-label { display: flex; gap: 12px; font-size: 12px; color: var(--soft); }
.story-voice-label span { color: var(--ink); font-variant-numeric: tabular-nums; }
.story-voice-stage { display: grid; margin-top: 40px; }
.story-voice-quote { grid-area: 1 / 1; max-width: 30ch; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.25; letter-spacing: -0.03em; color: var(--ink); text-wrap: pretty; }
.story-voice-quote[hidden] { display: block; visibility: hidden; }
.story-voice-by { margin-top: 32px; font-size: 13px; color: var(--soft); }

@container (min-width: 520px) {
    .story-voice { padding: 44px 48px 48px; }
    .story-voice-stage { margin-top: 56px; }
}

.story-flow { list-style: none; display: grid; gap: 12px; }
.story-flow li { padding: 18px; border-radius: 12px; background-color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); font-size: 12px; color: var(--muted); }
.story-flow p { margin-top: 4px; }

@container (min-width: 520px) {
    .story-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .story-flow li { position: relative; }
    .story-flow li + li::before { content: "→"; position: absolute; left: -10px; top: 50%; transform: translate(-50%, -50%); color: var(--soft); }
}

.story-tiers { list-style: none; display: grid; gap: 12px; }
.story-tiers li { padding: 18px; border-radius: 12px; background-color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
.story-tiers h3 { font-weight: 400; font-size: 12px; color: var(--soft); }
.story-tier-price { margin-top: 6px; font-size: 24px; font-weight: 400; letter-spacing: -0.03em; color: var(--ink); }
.story-included { list-style: none; margin-top: 20px; display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.story-included li::before { content: "✓"; margin-right: 8px; color: var(--ink); }

@container (min-width: 520px) {
    .story-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phone recordings sit narrow and centered on the mat */
.story-figure.is-phone .story-mat { display: grid; place-items: center; padding: 40px 16px; }
.story-figure.is-phone .story-mat video { width: min(280px, 64%); border-radius: 13% / 6.2%; }

/* Intro, desktop: hidden before first paint (js/boot.js) until GSAP plays it (js/case.js).
   If GSAP never runs, the fallback shows everything after 2.5s. */
@media (min-width: 781px) {
    .intro:not(.intro-ready) .story :is(.story-title, .story-lead, .story-role, .story-facts > div, .story-header + .story-figure) {
        opacity: 0;
        animation: intro-fallback 0s 2.5s forwards;
    }
}

/* Intro, phones: a short rise as soon as the page paints, so the first screen never waits on
   scripts. Title, then the text, the facts and the hero, a beat apart. */
@media (max-width: 780px) and (prefers-reduced-motion: no-preference) {
    .story :is(.story-title, .story-lead, .story-role, .story-facts, .story-header + .story-figure) { animation: phone-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .story .story-lead { animation-delay: 0.06s; }
    .story .story-role { animation-delay: 0.12s; }
    .story .story-facts { animation-delay: 0.18s; }
    .story .story-header + .story-figure { animation-delay: 0.24s; }
}
@keyframes phone-rise { from { opacity: 0; transform: translateY(14px); } }

@keyframes intro-fallback {
    to { opacity: 1; }
}

/* Keep descenders visible inside SplitText's line masks */
.story [class*="mask"] {
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

/* Phones ------------------------------------------------------------------- */
@media (max-width: 780px) {
    .story { padding: 64px 16px 64px; } /* under the fixed bar, then the side margin */
    .story-section { margin-top: 64px; }
    .story-section + .story-figure { margin-top: 64px; }
    .story-mat, .story-figure.is-wide .story-mat { padding: 5% 4%; border-radius: 14px; }
    .story-figure.is-demo .story-mat { padding: 24px 12px; }
}

/* Cinnamon: everyone in orbit around you -------------------------------------------- */
.orbit {
    display: grid;
    gap: 24px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
}

@media (min-width: 900px) {
    .orbit { grid-template-columns: 1fr 1.1fr; align-items: center; padding: 32px; }
}

.orbit-copy {
    padding: 24px;
    border-radius: 8px;
    background-color: #efece6;
}

.orbit-copy p:first-child { font-size: 20px; line-height: 1.2; color: var(--ink); }
.orbit-copy p + p { margin-top: 12px; font-size: 13px; color: var(--muted); }
.orbit-copy .orbit-status { margin-top: 20px; color: var(--accent); }

.orbit-stage {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1;
    margin: 0 auto;
}

.orbit-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.orbit-line { transition: opacity 0.4s ease; }

.orbit-person,
.orbit-you {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}

.orbit-person {
    width: 36px;
    height: 36px;
    border: 0;
    background-color: #2b2b2b;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.18);
    font: 10px/1 'Inter', sans-serif;
    cursor: pointer;
    transition: background-color 0.25s ease, scale 0.25s var(--ease-out);
}

.orbit-person:hover { scale: 1.12; }
.orbit-person:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.orbit-person.is-picked { background-color: var(--accent); }

.orbit-you {
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    background-color: var(--accent);
    box-shadow: 0 0 0 4px #fff;
    font-size: 12px;
}

/* One or two numbers sit together instead of being pushed to opposite edges */
@container (min-width: 520px) {
    .story-stats:not(:has(> div:nth-child(3))) { justify-content: flex-start; gap: 72px; }
}

/* Mid-width columns: five facts in one row get too narrow, so they sit three to a row */
@container (min-width: 520px) and (max-width: 760px) {
    .story-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
    .story-facts > div { max-width: none; }
}

/* The case study's colors wash across the whole window, behind the content and through the
   frosted sidebar, so the screen takes on the project's light. It stays put while the story
   scrolls. Phones scroll the window, so there it's pinned behind the story instead. */
:root:has(.story[data-case]) {
    --glow:
        radial-gradient(70% 80% at 0% 0%, var(--tint-a), transparent 70%),
        radial-gradient(60% 75% at 100% 0%, var(--tint-b), transparent 70%),
        radial-gradient(90% 60% at 40% 110%, var(--tint-b), transparent 75%);
}
@media (min-width: 781px) {
    :root:has(.story[data-case]) body {
        background-image: var(--glow);
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
}
@media (max-width: 780px) {
    .content-wrapper:has(> .story[data-case])::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: var(--glow);
        background-repeat: no-repeat;
        pointer-events: none;
    }
    .story[data-case] { position: relative; z-index: 1; }
}

:root:has(.story[data-case="smartstop"]) { --tint-a: rgba(64, 110, 246, 0.16); --tint-b: rgba(255, 166, 77, 0.14); }
:root:has(.story[data-case="rays"])      { --tint-a: rgba(255, 154, 60, 0.18); --tint-b: rgba(255, 209, 102, 0.20); }
:root:has(.story[data-case="halftone"])  { --tint-a: rgba(255, 111, 174, 0.14); --tint-b: rgba(90, 200, 250, 0.16); }
:root:has(.story[data-case="leadhack"])  { --tint-a: rgba(123, 97, 255, 0.14); --tint-b: rgba(72, 187, 255, 0.12); }
:root:has(.story[data-case="one"])       { --tint-a: rgba(63, 182, 139, 0.15); --tint-b: rgba(106, 169, 255, 0.13); }
:root:has(.story[data-case="cinnamon"])  { --tint-a: rgba(210, 105, 30, 0.14); --tint-b: rgba(244, 162, 97, 0.16); }
:root:has(.story[data-case="gostr"])     { --tint-a: rgba(255, 122, 217, 0.15); --tint-b: rgba(122, 231, 255, 0.17); }
:root:has(.story[data-case="ave"])       { --tint-a: rgba(201, 184, 169, 0.42); --tint-b: rgba(134, 113, 96, 0.16); } /* the deck’s Patient Chart and Graft */

/* About: a small portrait above the title, and the contact links as underlined text */
.story-avatar {
    grid-column: 1 / -1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.story-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.story-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.2s ease; }
.story-link:hover { border-color: var(--ink); }

:root:has(.story[data-case="about"]) { --tint-a: rgba(120, 120, 140, 0.10); --tint-b: rgba(160, 170, 190, 0.12); }

/* Page outline (js/case.js), after Notion: a dash per section in the left gutter, the current
   one darker and longer. Hover or keyboard focus opens it into a card listing the sections; a mouse click doesn't hold it open. */
.story-outline { display: none; }
@media (min-width: 781px) {
    .story-outline {
        position: fixed;
        top: 50%;
        left: 2px;
        z-index: 50;
        display: block;
        padding: 8px 2px; /* at rest the dashes stay inside the 38px gutter, clear of the text */
        border-radius: 14px;
        transform: translateY(-50%);
        transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        animation: outline-in 0.8s 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .story-outline ol { list-style: none; display: grid; gap: 0; }
    .story-outline button {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 6px;
        padding: 2px 4px 2px 6px;
        transition: padding 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        border: 0;
        border-radius: 6px;
        background: none;
        color: #2f2f2c;
        font: inherit;
        font-size: 13px;
        letter-spacing: -0.2px;
        text-align: left;
        cursor: pointer;
    }
    .story-outline-dash {
        flex-shrink: 0;
        width: 12px;
        height: 2px;
        border-radius: 2px;
        background-color: rgba(0, 0, 0, 0.16);
        transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
    }
    .story-outline-text {
        max-width: 0;
        max-height: 0; /* folded at rest, so the dashes sit close together */
        line-height: 1.4;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        opacity: 0;
        transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, margin 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .story-outline li.is-active .story-outline-dash { width: 18px; background-color: #161615; }
    .story-outline li.is-active button { color: #000; font-weight: 400; }

    .story-outline:hover, .story-outline:has(:focus-visible) {
        padding: 8px;
        transform: translate(6px, -50%); /* the open card sits 8px in from the window edge */
        /* Frosted: 60% white with a strong blur. Labels use #2f2f2c, which keeps 4.7:1 even
           with pure black behind the glass (the dark video demos), and 13.4:1 over white. */
        background-color: rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(32px) saturate(1.4);
        backdrop-filter: blur(32px) saturate(1.4);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 18px 40px -16px rgba(0, 0, 0, 0.18);
    }
    .story-outline:is(:hover, :has(:focus-visible)) button { padding-top: 5px; padding-bottom: 5px; }
    .story-outline:is(:hover, :has(:focus-visible)) .story-outline-text { max-width: 220px; max-height: 20px; margin-left: 10px; opacity: 1; }
    .story-outline:is(:hover, :has(:focus-visible)) button:hover { background-color: rgba(0, 0, 0, 0.04); color: #161615; }
    .story-outline button:focus-visible { outline: 2px solid #161615; outline-offset: 1px; }
}
@keyframes outline-in { from { opacity: 0; transform: translate(-6px, -50%); } }
@media (prefers-reduced-motion: reduce) {
    .story-outline, .story-outline * { animation: none !important; transition: none !important; }
}
:root:has(.story[data-case="ulogic"]) { --tint-a: rgba(232, 56, 64, 0.11); --tint-b: rgba(91, 168, 222, 0.13); }
:root:has(.story[data-case="shift"])  { --tint-a: rgba(126, 211, 167, 0.16); --tint-b: rgba(120, 156, 230, 0.13); }

/* Source-of-truth line under the intro, the usability-testing label, and visible
   placeholders for facts Ryan still has to supply */
.story-source { max-width: 52ch; margin-top: 14px; font-size: 12.5px; font-style: italic; color: var(--soft); }
.story-stats-label { margin-top: 48px; font-size: 12px; color: var(--soft); text-align: center; }
.story-stats-label + .story-stats { margin-top: 14px; }
.story-todo { padding: 1px 6px; border-radius: 4px; background-color: #fff2b8; color: #6b5300; font-style: normal; font-size: 0.92em; }

/* Header: the overview and role sit closer together instead of spanning the full width */
@container (min-width: 520px) {
    /* A third, flexible track takes up the rest of the width, so rows that span the header (the
       facts) span the whole content column and centre on it */
    .story-header { grid-template-columns: minmax(0, 27rem) minmax(0, 27rem) minmax(0, 1fr); column-gap: 48px; }
}

/* Stats: centred on the content column, spread evenly, each number centred */
.story-stats > div { text-align: center; justify-items: center; align-items: center; }
@container (min-width: 520px) {
    .story-stats, .story-stats:not(:has(> div:nth-child(3))) { justify-content: space-around; gap: 24px; }
}

/* Facts (Role, Built With…): the row sits centred on the content column as one group, and each
   fact reads from its left edge, label over value */
.story-facts > div { text-align: left; justify-items: start; }
@container (min-width: 761px) {
    .story-facts { justify-content: center; gap: 24px 48px; }
}

/* End of a case study (.claude/build_menu.py): the previous and next projects as two quiet cards,
   then a short sign-off. Light buttons: a hairline pill that fills in on hover, and a text link */
.story-end { margin-top: 120px; }
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 20px;
    background-color: var(--mat);
    box-shadow: 0 0 0 1px var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-sign { display: grid; justify-items: start; gap: 16px; }
.story-sign-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.story-sign-text { display: grid; gap: 6px; }
.story-sign h2 { max-width: 30ch; font-size: clamp(20px, 2.2vw, 24px); font-weight: 400; line-height: 1.3; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.story-sign p { max-width: 44ch; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.story-sign-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
/* The site's soft button, as the menu's Learn more and the contact form's Send */
.story-sign-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    color: #4a4a46;
    font-size: 15px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.story-sign-button .icon { width: 14px; height: 14px; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.story-sign-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.story-sign-button:hover { background-color: rgba(0, 0, 0, 0.08); color: var(--ink); }
.story-sign-button:hover .icon { transform: translateX(3px); }


/* While js/case.js checks a locked case study is still open, nothing of it shows */
html.access-check .story { visibility: hidden; }