/* ==============================================================
   Case study styles (mindscape.html, greenside.html).
   ============================================================== */

/* ---------- Wordmark (matches the index variant D wordmark scale) ---------- */
hgroup > h1.case-mark{
    font-family:var(--font-sans);
    font-size:.78rem;
    font-weight:400;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    line-height:1.25;
}

.case-mark a{
    color:var(--off-black);
    transition:color .2s ease;
}

.case-mark a:hover{
    color:var(--blue);
}

/* Lock the case-study background to the v3 light/dark `--bg` so it always
   matches the home page (and other case studies) regardless of cascade. */
body.case-study{
    background:var(--bg);
}

/* ---------- Main + content column ---------- */
.case-study main{
    padding-inline:var(--space-page);
    padding-block:7rem 4rem;
    gap:0;
}

/* Hero is full-bleed within main; everything else is capped at a comfortable
   reading-and-figure width. Width:100% + same max-width ensures every block
   resolves to identical dimensions before margin:auto centers them, so their
   left edges line up exactly. */
.case-study main > #overview-main,
.case-study main > .about--main,
.case-study main > .case-header,
.case-study main > [data-section]{
    width:100%;
    max-width:55vw;
    margin-inline:auto;
    box-sizing:border-box;
}


/* ---------- Header ---------- */
.case-header{
    order:-1;
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
    padding-block:6rem 3rem;
    margin-block-end:2.5rem;
}

/* Case title — oversized display treatment. */
.case-study .case-title{
    font-family:var(--font-sans);
    font-size:4rem !important;
    font-weight:var(--weight-medium);
    font-variation-settings:'wght' 500;
    letter-spacing:-0.03em;
    line-height:.95;
}
/* Anchored case title (e.g. HYP3.dev) — inherit the display size that the
   universal * { font-size:1rem !important } lock would otherwise strip. */
.case-study .case-title a{
    font:inherit;
    font-size:4rem !important;
    color:inherit;
    letter-spacing:inherit;
    line-height:inherit;
    text-decoration:none;
    transition:color .2s ease;
    display:inline-flex;
    align-items:center;
    gap:.15em;
}
.case-study .case-title a:hover{
    color:var(--blue);
}
.case-study .case-title__arr{
    font-family:var(--font-sans);
    font-size:3.5rem !important;
    font-weight:600;
    font-variation-settings:'wght' 600;
    line-height:1;
    display:inline-block;
}

.case-meta{
    display:grid;
    grid-template-columns:1fr;
    justify-items:start;
    gap:1.25rem 1.5rem;
}

/* Meta labels = mono-meta. */
.case-study .case-meta-item dt{
    font-size:14px !important;
    font-weight:var(--weight-medium);
    font-variation-settings:'wght' 500;
    letter-spacing:var(--track-mono-meta);
    line-height:var(--leading-mono-meta);
    text-transform:uppercase;
    color:color-mix(in srgb, var(--off-black) 55%, transparent);
    margin-block-end:.35rem;
}

/* Meta values = small. */
.case-study .case-meta-item dd{
    font-size:14px !important;
    font-weight:500;
    font-variation-settings:'wght' 500;
    letter-spacing:var(--track-small);
    line-height:var(--leading-small);
    color:var(--off-black);
}

/* ---------- Section text ---------- */
.case-study [data-section]{
    min-height:auto;
    padding-block:4rem;
}

.case-study [data-section] h3{
    font-family:'Switzer';
    font-size:1.5rem !important;
    text-transform:none;
    font-weight:500;
    letter-spacing:.02em;
    color:var(--blue);
    margin-block-end:1.5rem;
}

.case-study [data-section] h4{
    font-family:'Switzer';
    font-size:1.25rem !important;
    font-weight:500;
    font-variation-settings:'wght' 500;
    letter-spacing:-.01em;
    margin-block:1.75rem .75rem;
    max-width:68ch;
}

.case-study [data-section] p,
.case-study .about--main{
    font-size:1rem;
    font-weight:400;
    font-variation-settings:'wght' 400;
    line-height:1.75;
    margin-block:1em;
    max-width:68ch;
    text-wrap:pretty;
    hyphens:none;
}

/* Disable auto-hyphenation across all case-study text. */
.case-study{
    hyphens:none;
}

/* Inline code-block callout — used to set off a quoted question or statement
   from surrounding prose. Renders in mono with a tinted background. */
.case-study .case-codeblock{
    display:block;
    max-width:68ch;
    margin-block:1em 1.5em;
    padding:1rem 1.25rem;
    font-family:var(--font-numerals);
    font-size:.95rem;
    line-height:1.5;
    color:var(--blue);
    background:color-mix(in srgb, var(--blue) 6%, transparent);
    border-left:2px solid var(--blue);
    border-radius:4px;
    white-space:pre-wrap;
    overflow-x:auto;
}

.case-study .case-codeblock code{
    font-family:inherit;
    font-size:inherit;
    color:inherit;
    background:transparent;
    padding:0;
}

/* Tighten the gap between the overview h3 and the about copy — main is a flex
   container, so margins don't collapse the way they do inside a section.
   Also zero the global about--main padding (set in global.css), which was
   adding ~40px of extra space between paragraphs. */
.case-study .about--main{
    margin-block:0 1em;
    padding-block:0;
}

/* Email / inline info link inside case-study CTA — underlined by default, then
   a brand-blue highlight sweeps in from the left on hover, flipping the text
   to white as it fills. */
.case-study .info-link{
    color:var(--off-black);
    text-decoration:underline;
    text-underline-offset:.15em;
    text-decoration-thickness:1px;
    padding:.05em 0;
    margin-inline:0;
    background-image:linear-gradient(var(--blue), var(--blue));
    background-repeat:no-repeat;
    background-position:left center;
    background-size:0% 100%;
    transition:color .35s ease, background-size .35s ease;
}
.case-study .info-link:hover{
    color:#fff;
    background-size:100% 100%;
    text-decoration-color:#fff;
}

/* ---------- Overview labels (sidebar / mobile main) ---------- */
#overview-side{
    display:none;
}

#overview-main{
    font-family:'Switzer';
    font-size:1.5rem !important;
    text-transform:none;
    font-weight:500;
    letter-spacing:.02em;
    color:var(--blue);
    margin-block:0 1.5rem;
    padding-block-start:4rem;
}

/* ---------- Figures ---------- */
.case-figure{
    margin:0;
    max-width:62ch;
    display:flex;
    justify-content:center;
    align-items:center;
    /* background:color-mix(in srgb, var(--off-black) 4%, transparent); */
    /* border:1px dashed color-mix(in srgb, var(--off-black) 15%, transparent); */
    /* border-radius:8px; */
    overflow:hidden;
}

.case-figure img{
    display:block;
    width:100%;
    height:auto;
}

/* Hero figure — capped to the same content width as the rest of the case. */
.case-figure--hero{
    position:relative;
    width:100%;
    max-width:55vw;
    margin-inline:auto;
    border:0;
    border-radius:0;
    background:transparent;
    margin-block:3rem 2rem;
}

/* Sound toggle button — overlays the hero video bottom-right so visitors
   can opt into audio after the muted autoplay starts. */
.sound-toggle{
    position:absolute;
    left:1rem;
    bottom:1rem;
    z-index:5;
    display:inline-flex;
    align-items:center;
    gap:.4em;
    padding:.5rem .75rem;
    font-family:var(--mono);
    font-size:.7rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
}

.sound-toggle:hover,
.sound-toggle:focus-visible{
    background:rgba(0,0,0,.78);
    border-color:rgba(255,255,255,.4);
    outline:none;
}

.sound-toggle::before{
    content:'';
    width:.55em;
    height:.55em;
    border-radius:50%;
    background:#ff453a;
    box-shadow:0 0 0 .15em rgba(255, 69, 58, .25);
}

.sound-toggle[data-muted="false"]::before{
    background:#34c759;
    box-shadow:0 0 0 .15em rgba(52, 199, 89, .3);
}

.case-figure--hero img,
.case-figure--hero video{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}

/* Hero figure wrapped in a link that opens the video in a lightbox. */
.case-figure-link{
    display:block;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}

/* Play cap overlay — sits over the hero video, matches the sandbox
   experiment-thumb__cap treatment from home.css. */
.case-figure__cap{
    position:absolute;
    bottom:.7rem;
    left:.85rem;
    padding:.25rem .5rem;
    background:var(--bg);
    color:var(--fg);
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    z-index:2;
    pointer-events:none;
    display:inline-flex;
    align-items:center;
    gap:.35em;
    line-height:1;
}
.case-figure__cap-arr{
    font-family:var(--font-sans);
    display:inline-block;
    transform:translateY(-.05em);
}

.case-figure--phone{
    margin-block:1.5rem;
    aspect-ratio:9 / 16;
    max-width:280px;
    margin-inline:auto;
}

.case-figure--phone img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.case-figure--prototype{
    display:block;
    margin-block:1.5rem;
    margin-inline:0;
    width:100%;
    max-width:none;
    aspect-ratio:5 / 3;
    background:transparent;
    border:0;
    border-radius:0;
    overflow:hidden;
    position:relative;
}

/* Phone-shaped prototype (e.g. Mindscape) — narrower cap so the embedded
   iPhone artboard isn't oversized. Left-aligned (not centered) so it sits
   flush with the surrounding body copy. */
.case-figure--prototype--phone{
    max-width:640px;
    aspect-ratio:4 / 5;
    left:auto;
    transform:none;
    margin-inline:0;
}

/* Mindscape: center the phone-shaped prototype within the content column. */
[data-case="mindscape"] .case-figure--prototype--phone{
    margin-inline:auto;
}

/* Smaller diagram-style figures (Oryn brain model, resonate visualization) —
   sized to read as visual asides rather than full-width hero figures. */
.case-figure--decision{
    max-width:20rem;
    margin-block:2rem ;
}
.case-figure--resonate{
    max-width:40rem;
}

/* Resonate feature bullets — four-point star markers in brand blue. */
.resonate-list{
    list-style:none;
    padding-left:0;
    margin-block:1em;
}

.resonate-list > li{
    position:relative;
    padding-left:1.75em;
    margin-block:4rem;
}

.resonate-list > li:first-child{
    margin-block-start:0;
}

.resonate-list > li::before{
    content:'✦';
    position:absolute;
    left:.25em;
    top:.55em;
    font-size:.7em;
    line-height:1;
    color:currentColor;
}

.resonate-list > li > p{
    margin-block:0;
}

/* Tighten copy → video, lean on the li's margin-block for video → next copy. */
.resonate-list > li > .case-figure--full{
    margin-block:.25rem 0;
}

/* User case figures — sit a bit wider than diagram asides, still responsive. */
.case-figure--prototype-preview{
    width:100%;
    max-width:52rem;
}

.prototype-frame{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:transparent;
}

/* Desktop: hide the fallback link entirely — the iframe is fully interactive. */
.prototype-link{
    display:none;
}

.case-figure--phone-mock{
    /* tweak these to match your PNG's screen cutout */
    --mock-inset-top:3%;
    --mock-inset-bottom:3%;
    --mock-inset-x:4.5%;
    --mock-screen-radius:20px;

    position:relative;
    margin-block:1.5rem;
    margin-inline:auto;
    max-width:220px;
    background:transparent;
    border:0;
    border-radius:0;
    overflow:visible;
    aspect-ratio:auto;
}

.phone-mock-frame{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    z-index:2;
    pointer-events:none;
}

.phone-mock-screen{
    position:absolute;
    top:var(--mock-inset-top);
    left:var(--mock-inset-x);
    width:calc(100% - var(--mock-inset-x) * 2);
    height:calc(100% - var(--mock-inset-top) - var(--mock-inset-bottom));
    object-fit:cover;
    border:0;
    background:transparent;
    border-radius:var(--mock-screen-radius);
    clip-path:inset(0 round var(--mock-screen-radius));
    z-index:1;
}

.case-figure--phones{
    aspect-ratio:16 / 10;
    margin-block:1.5rem;
}

.case-figure--phones img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.case-figure--wide{
    margin-block:1.5rem;
}

.case-figure--full{
    max-width:none;
    width:100%;
    margin-block:1.5rem;
}

.case-figure--full img,
.case-figure--full video{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}

[data-case="hyp3"] #build .case-figure--wide{
    margin-bottom:3rem;
}

[data-case="hyp3"] #build p strong{
    font-weight:600;
    font-variation-settings:'wght' 600;
}

.case-figure--wide img,
.case-figure--wide video{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}

.case-figure.case-figure--onboarding-system{
    width:70%;
    background:transparent;
    border:none;
    margin: 2rem 1rem;
}

@media (max-width:1000px){
    .case-figure.case-figure--onboarding-system{
        width:100%;
        margin: 2rem 1rem;
    }
}

/* ---------- Figure label ---------- */
.figure-label{
    font-family:'Switzer';
    max-width:15rem;
    font-size:.8rem;
    font-style: italic;
    text-align: left;
    text-wrap:pretty;
    font-weight:400;
    padding-block:.15rem .2rem;
    padding-inline: 0 .25rem;
    margin-block:2.5rem 1rem;
    border-radius:6.7px;
    color:var(--gray-blue);
}

/* ---------- Two-up users layout ---------- */
.users{
    display:flex;
    flex-direction: row;
    gap:1rem;
    max-width:62ch;
}

.users figure{
    background:transparent;
    border:none;
    max-width:none;
}

/* ---------- Persona grid ---------- */
.persona-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows:1fr;
    gap:1rem;
    margin-block:1.5rem;
    align-items:stretch;
}

.persona-grid > li{
    display:flex;
    min-height:0;
}

.persona-grid img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    min-height:0;
}

/* ---------- Decision blocks ---------- */
.decision{
    margin-block:2.5rem;
}

.decision:first-of-type{
    margin-block-start:1.5rem;
}

.decision h4{
    margin-block-start:0 !important;
}

/* Decision blocks with a figure beside the body copy (e.g. Oryn brain). */
.decision--media{
    display:grid;
    grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
    align-items:center;
    gap:2rem;
}

.decision--media .decision-body p{
    margin-block:.5em 0;
}

.decision--media .case-figure{
    margin:0;
    max-width:16rem;
    justify-self:start;
}

@media (max-width:767.98px){
    .decision--media{
        grid-template-columns:1fr;
    }
    .decision--media .case-figure{
        justify-self:center;
    }
}

/* ---------- CTA ---------- */
.case-cta{
    text-align:start;
}

/* Tighten the gap between "I'd love to chat..." and the email link. */
.case-cta p{
    margin-block:0;
}

/* ---------- Back-home link (matches the index topbar-nav scale) ---------- */
.back-home{
    display:inline-flex;
    align-items:center;
    gap:.4em;
    color:var(--off-black);
    transition:color .2s ease;
    font-family:var(--font-sans);
    font-size:.78rem;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:var(--ls-mono);
    line-height:1.25;
}

.back-home:hover{
    color:var(--blue);
}

.back-home-arrow{
    width:.7em;
    height:auto;
    transform:scaleX(-1);
}

.back-home:hover .back-home-arrow{
    content:url('../icons/blue-arrow.svg');
}

/* ---------- Back-to-top arrow + sidebar foot ---------- */
.back-top-arrow{
    width:.7em;
    height:auto;
    rotate:-90deg;
    transition:rotate .2s ease;
}

.case-toc-foot{
    margin-block-start:1rem;
    font-size:.85rem;
}

.case-toc-foot a{
    display:inline-flex;
    align-items:center;
    gap:.4em;
    color:var(--off-black);
    transition:color .2s ease;
    font-size:16px;
}

.case-toc-foot a:hover{
    color:var(--blue);
}

.case-toc-foot a:hover .back-top-arrow{
    content:url('../icons/blue-arrow.svg');
}

/* Bottom-of-case "Back to Top" — only shown on mobile (see media query below) */
.case-back-top{
    display:none;
    margin-block:2rem 3rem;
    font-size:16px;
    text-align:center;
    list-style:none;
    padding:0;
}

.case-back-top a{
    display:inline-flex;
    align-items:center;
    gap:.4em;
    color:var(--off-black);
    transition:color .2s ease;
}

.case-back-top a:hover{
    color:var(--blue);
}

.case-back-top a:hover .back-top-arrow{
    content:url('../icons/blue-arrow.svg');
}

/* ---------- Case-study footer (static, not sticky) ---------- */
.case-footer{
    margin-block:3rem 1.5rem;
    font-family:var(--font-mono);
    font-size:var(--t-mono, .75rem);
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:color-mix(in srgb, var(--off-black) 55%, transparent);
    text-align:center;
}

@media (min-width:768px){
    .case-footer{
        width:100%;
        max-width:55vw;
        margin-inline:auto;
        box-sizing:border-box;
        text-align:left;
    }
}

.case-footer .star{
    margin-inline:.35em;
}

/* ---------- Figure lightbox (click any figure to view full-screen) ---------- */
.case-figure:not(.case-figure--hero) img:not(.phone-mock-frame):not(.no-lightbox){
    cursor:zoom-in;
    touch-action:manipulation;
    transition:opacity .15s ease;
}

.case-figure:not(.case-figure--hero) img:not(.phone-mock-frame):not(.no-lightbox):active{
    opacity:.8;
}

.figure-lightbox{
    position:fixed;
    inset:0;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:2rem;
    background:rgba(0, 0, 0, .92);
    cursor:zoom-out;
}

.figure-lightbox img{
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

body.lightbox-open{
    overflow:hidden;
}

body.lightbox-open .figure-lightbox{
    display:flex;
    animation:lightbox-fade .2s ease;
}

@keyframes lightbox-fade{
    from{ opacity:0; }
    to{ opacity:1; }
}

/* ---------- Mobile overrides ---------- */
@media (max-width:767.98px){
    /* Move "Back to Top" out of the menu and into a button at the bottom of the case */
    .case-study .case-toc-foot{
        display:none;
    }
    .case-back-top{
        display:block;
    }

    .figure-lightbox{
        padding:1rem;
    }

    /* Content fills the available width on mobile, inside the page gutters. */
    .case-study main > #overview-main,
    .case-study main > .about--main,
    .case-study main > .case-header,
    .case-study main > [data-section],
    .case-study .case-figure--hero{
        max-width:none;
    }

    /* Oryn: prototype spans the full viewport on mobile via a centered
       breakout. The figure becomes a tap target that opens the prototype
       in Figma (iframe is too small to interact with on a phone). */
    [data-case="oryn"] .case-figure--prototype{
        width:100vw;
        max-width:100vw;
        position:relative;
        left:50%;
        transform:translateX(-50%);
    }
    [data-case="oryn"] .case-figure--prototype .prototype-frame{
        pointer-events:none;
    }
    [data-case="oryn"] .case-figure--prototype .prototype-link{
        display:flex;
        align-items:flex-end;
        justify-content:center;
        position:absolute;
        inset:0;
        z-index:5;
        padding:.75rem;
        font-family:var(--font-mono, ui-monospace, monospace);
        font-size:.7rem;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:#fff;
        background:linear-gradient(to top, rgba(0, 51, 255, .9), rgba(0, 51, 255, 0) 35%);
        text-decoration:none;
    }

    /* Mindscape: keep the phone interactive (no tap-out overlay) and
       centered as a phone-shaped frame — no full-viewport breakout. */
    [data-case="mindscape"] .case-figure--prototype--phone{
        width:100%;
        max-width:min(420px, 80vw);
        margin-inline:auto;
        left:auto;
        transform:none;
    }
    [data-case="mindscape"] .case-figure--prototype .prototype-frame{
        pointer-events:auto;
    }
    [data-case="mindscape"] .case-figure--prototype .prototype-link{
        display:none;
    }

    /* v3/home.css's .js-reveal rule sets transform on every section figure,
       which would clobber Oryn's breakout translateX(-50%). Re-apply the
       reveal here with translateX baked in so the figure fades up from
       below without losing its centered position. Mindscape uses margin
       auto centering so it doesn't need an override — the default reveal
       works as-is. */
    .js-reveal [data-case="oryn"] .case-figure--prototype{
        transform:translateX(-50%) translateY(28px);
    }
    .js-reveal [data-case="oryn"] .case-figure--prototype.is-in{
        transform:translateX(-50%);
    }

    /* Mobile case-header — 2-col grid:
       row 1 = title (spans both cols)
       row 2 = year
       row 3 = time frame | role
       row 4 = team       | tools
       case-meta uses display:contents so its items participate directly
       in case-header's grid. */
    .case-header{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1.25rem 1rem;
        align-items:start;
        padding-block:5rem 2rem;
    }
    .case-title{
        grid-column:1 / -1;
        grid-row:1;
    }
    .case-meta{
        display:contents;
    }
    .case-meta-item dt,
    .case-meta-item dd{
        font-size:12px;
    }
    /* year */
    .case-meta-item:nth-child(1){
        grid-column:1;
        grid-row:2;
        justify-self:start;
        margin-block-start:3rem;
    }
    /* time frame */
    .case-meta-item:nth-child(2){ grid-column:1; grid-row:3; justify-self:start; }
    /* role */
    .case-meta-item:nth-child(3){ grid-column:2; grid-row:3; justify-self:start; }
    /* team */
    .case-meta-item:nth-child(4){ grid-column:1; grid-row:4; justify-self:start; }
    /* tools */
    .case-meta-item:nth-child(5){ grid-column:2; grid-row:4; justify-self:start; }

}

/* ---------- Desktop overrides ---------- */
@media (min-width:768px){
    body.case-study{
        display:block;
    }

    .case-study .case-layout{
        display:block;
    }

    .case-study [data-section]{
        min-height:auto;
    }

    .case-header{
        grid-template-columns:1fr;
        gap:2rem;
    }

    .case-meta{
        grid-template-columns:repeat(5, auto);
        justify-content:start;
        gap:0 3rem;
        margin-block-start:4rem;
    }

    #overview-side{
        display:block;
        font-family:'Switzer';
        font-size:1rem;
        text-transform:uppercase;
        font-weight:500;
        letter-spacing:0;
        color:var(--off-black);
        margin-block:1.5rem 0;
    }
}

@media (min-width:1024px){
    .case-figure--phone img{
        max-width:340px;
    }
}

/* ---------- In-page case TOC ----------
   Hidden by default; the desktop sidebar layout below switches it on.
   Items are stacked with the same gap as the main topbar-nav so the
   sidebar rhythm is consistent. */
.case-toc{ display:none; }
.case-toc ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.85rem;
}
.case-toc li{ margin:0; }
.case-toc a{
    color:var(--fg);
    font-weight:500;
    font-variation-settings:'wght' 500;
    white-space:nowrap;
    transition:color var(--dur) var(--ease);
}
.case-toc a:hover,
.case-toc a.is-active{ color:var(--accent); }

/* ---------- Vertical-nav sidebar layout (desktop) ----------
   Mirrors the thoughts-page layout at ≥900px: the variant-D topbar
   stops being a fixed top strip and becomes a fixed left column with
   wordmark on top, nav + case TOC below, and the timestamp pinned to
   the bottom. The case content flows to the right of the rail.
   No styles yet — structural layout only. */
@media (min-width:900px){
    .case-study[data-variant="d"] .topbar{
        position:fixed;
        inset:0 auto 0 0;
        right:auto;
        width:14rem;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:1.75rem;
        padding:var(--space-page);
        background:var(--bg);
        z-index:50;
    }

    .case-study[data-variant="d"] .wordmark{
        position:static;
        transform:none;
        top:auto;
        left:auto;
    }

    .case-study[data-variant="d"] .topbar-time{
        position:static;
        transform:none;
        top:auto;
        right:auto;
        text-align:left;
        order:3;
        margin-top:auto;
    }

    /* Main nav (Works/Sandbox/Thoughts/Info) lives in the top strip on
       mobile; on the desktop side rail only the case TOC is shown. */
    .case-study[data-variant="d"] .topbar-nav{
        display:none;
    }

    /* Lock the desktop side rail to its initial state — the global
       `.is-scrolled` topbar compress (set by site.js on scroll) is meant
       for the horizontal top strip, not the vertical sidebar. */
    .case-study[data-variant="d"] .topbar.is-scrolled{
        row-gap:1.75rem;
        padding-top:var(--space-page);
        padding-bottom:var(--space-page);
    }

    .case-study .case-toc{
        display:block;
    }

    .case-study main{
        margin-inline-start:clamp(18rem, 24vw, 24rem);
        padding-block:1rem 4rem;
    }
}