/* Baito case-study editorial system (25 Sep 2026).
   The POKKA 24 Sep 2026 design (assets/case-studies-20260924/pokka/pokka.css, live in deploy 6ab49e58) re-scoped from
   main.pokka-case to main.editorial-case so every case study can share it. Load AFTER baito-tokens.css: rules are
   wrapped in :where() so the scope adds no specificity and the cascade order decides, exactly as on 24 Sep.
   Colours come from the site tokens (--t-bright, --t-muted, --st-muted, --base, --accent); only the three light
   greys POKKA used for the results rules/track and dialog buttons stay literal in light mode and switch to the
   hairline token in dark mode. Block order and markup: see the template handoff in the POKKA page. */

.editorial-case{--ink:var(--t-bright);--muted:var(--t-muted);--hairline:var(--st-muted);--paper:var(--base);--panel:color-mix(in srgb,var(--base) 55%,var(--base-shade));--rule:#ceccca;--track:#d5d3d2;--control-line:#c4c2c0;background:var(--paper);color:var(--ink)}
[color-scheme=dark] .editorial-case{--rule:var(--hairline);--track:var(--hairline);--control-line:var(--hairline)}
html:has(.editorial-case){scroll-padding-top:100px}
html:has(.editorial-case .photo-dialog[open]){overflow:hidden!important}
:where(.editorial-case) [tabindex="-1"]:focus{outline:0}
:where(.editorial-case) .photo-credit{font-size:1.2rem;color:var(--muted);padding:0 0 6rem}

/* Base */
:where(.editorial-case) *,:where(.editorial-case) *::before,:where(.editorial-case) *::after{box-sizing:border-box}
.editorial-case section{min-width:0}
:where(.editorial-case) h1,:where(.editorial-case) h2,:where(.editorial-case) p,:where(.editorial-case) figure{margin:0}
:where(.editorial-case) a{text-decoration:none}
:where(.editorial-case) button,:where(.editorial-case) a{-webkit-tap-highlight-color:transparent}
:where(.editorial-case) a,:where(.editorial-case) button{touch-action:manipulation}
:where(.editorial-case) a:focus-visible,:where(.editorial-case) button:focus-visible,:where(.editorial-case) video:focus-visible{outline:3px solid var(--accent)!important;outline-offset:6px}
:where(.editorial-case) button{font:inherit;cursor:pointer}
:where(.editorial-case) img{max-width:100%}
:where(.editorial-case) p{color:inherit}
:where(.editorial-case) h1,:where(.editorial-case) h2{font-family:var(--_font-accent);text-wrap:balance}
:where(.editorial-case) h2{font-size:clamp(3.6rem,4.2vw,6.4rem);font-weight:500;line-height:1.08;letter-spacing:-.04em}
:where(.editorial-case) a{color:inherit}
:where(.editorial-case) a:hover{color:var(--accent)}
.editorial-case .mxd-container{max-width:1680px}
.editorial-case .btn{display:inline-flex;gap:2rem;justify-content:center;align-items:center;font-weight:500;white-space:nowrap}
.editorial-case .btn-outline{border-color:var(--ink)}
.editorial-case .btn:hover{transform:translateY(-2px)}
.editorial-case .btn:active{transform:translateY(0) scale(.98)}
.editorial-case .btn-accent{background:var(--accent);color:var(--t-opp-bright);border:1px solid var(--accent)}

/* Hero: rail + two-line H1 (second line in <span>, accent) + summary + facts strip */
:where(.editorial-case) .project-hero{padding:7rem 0 3rem;display:grid;grid-template-columns:1fr 4fr;gap:3rem}
:where(.editorial-case) .hero-rail{display:flex;flex-direction:column;justify-content:space-between;padding:1rem 0;font-size:1.5rem}
:where(.editorial-case) .hero-rail>span{color:var(--muted);line-height:1.5}
:where(.editorial-case) .hero-main{min-width:0}
:where(.editorial-case) .project-kicker{display:flex;align-items:center;gap:1rem;font-size:1.5rem;margin-bottom:2.2rem}
:where(.editorial-case) .blue-dot{height:.8rem;width:.8rem;background:var(--accent);border-radius:50%}
:where(.editorial-case) .project-hero h1{font-size:clamp(7rem,10.5vw,15rem);font-weight:500;line-height:.92;letter-spacing:-.065em;margin:0}
:where(.editorial-case) .project-hero h1>span{color:var(--accent)}
/* Longer titles (more than ~12 characters per line), e.g. MR.DIY: the 24 Sep MR.DIY article's H1 scale. */
:where(.editorial-case) .project-hero.is-long-title h1{font-size:clamp(5.4rem,8.2vw,12.4rem)}
:where(.editorial-case) .hero-summary{display:flex;align-items:center;justify-content:space-between;gap:3rem;padding-top:3.4rem;max-width:85rem}
:where(.editorial-case) .hero-summary p{font-size:clamp(2rem,2.2vw,3rem);line-height:1.25;letter-spacing:-.025em}
:where(.editorial-case) .round-link{display:grid;place-items:center;width:6.8rem;height:6.8rem;flex:0 0 auto;border:1px solid var(--ink);border-radius:50%;font-size:3.2rem;transition:background .2s,color .2s,transform .2s}
:where(.editorial-case) .round-link:hover{background:var(--ink);color:var(--paper);transform:translateY(4px)}
:where(.editorial-case) .project-facts.mxd-data-list{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.4fr 1.1fr 1.3fr;margin-top:3.6rem;padding-top:2.8rem;border-top:1px solid var(--hairline);gap:2rem}
:where(.editorial-case) .project-facts>div{display:flex;flex-direction:column;gap:.6rem}
:where(.editorial-case) .project-facts span{color:var(--muted);font-size:1.3rem}
:where(.editorial-case) .project-facts strong{font-size:1.6rem;font-weight:500}

/* Photos: every enlargeable photo is figure.story-photo > a.photo-link[data-gallery] > img + span.photo-enlarge, then figcaption */
:where(.editorial-case) .hero-photo,:where(.editorial-case) .story-photo{margin:0}
:where(.editorial-case) .photo-link{position:relative;display:block;border-radius:var(--_radius-m);overflow:hidden;background:var(--panel)}
:where(.editorial-case) .photo-link img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.6,.3,1)}
:where(.editorial-case) .photo-link:hover img{transform:scale(1.025)}
:where(.editorial-case) .photo-enlarge{position:absolute;bottom:2rem;right:2rem;width:4.8rem;height:4.8rem;display:grid;place-items:center;border-radius:50%;background:var(--paper);color:var(--ink);font-size:2.5rem;transition:background .2s,color .2s}
:where(.editorial-case) .photo-link:hover .photo-enlarge{background:var(--accent);color:var(--t-opp-bright)}
:where(.editorial-case) figcaption{padding-top:1.5rem;max-width:80rem;font-size:1.3rem;line-height:1.5;color:var(--muted)}

/* "The project" split intro */
:where(.editorial-case) .project-overview{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:10rem 0 6rem}
:where(.editorial-case) .chapter-label{font-size:1.5rem;display:flex;align-items:center;gap:1.6rem;margin:0 0 2rem}
:where(.editorial-case) .chapter-label>span{color:var(--accent);font-variant-numeric:tabular-nums}
:where(.editorial-case) .overview-title h2{font-size:clamp(3.5rem,3.7vw,5.3rem)}
:where(.editorial-case) .project-tags{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:3rem}
:where(.editorial-case) .project-tags .tag{font-size:1.3rem;height:auto;padding:.8rem 1.3rem;border:1px solid var(--hairline)}
:where(.editorial-case) .overview-copy p,:where(.editorial-case) .story-copy p{font-size:1.8rem;line-height:1.6;margin:0 0 1.8rem;max-width:64ch}
:where(.editorial-case) .overview-copy p:first-child{font-size:2.3rem;line-height:1.4;letter-spacing:-.025em}
:where(.editorial-case) .overview-copy p:last-child,:where(.editorial-case) .story-copy p:last-child{margin-bottom:0}

/* Big reported stats row + measurement note */
:where(.editorial-case) .results-snapshot{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem;padding:4rem 0 3rem;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
:where(.editorial-case) .snapshot-stat strong.mxd-stats-number{display:block;font-size:clamp(4.4rem,6vw,8rem);font-weight:500;line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
:where(.editorial-case) .snapshot-stat>span{display:block;font-size:1.5rem;margin-top:1rem}
:where(.editorial-case) .measurement-note{font-size:1.2rem;color:var(--muted);padding-top:1.6rem;max-width:90rem}

/* Sticky chapter nav: the track stops short of the site's fixed menu button */
:where(.editorial-case) .chapter-nav{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--hairline);margin-top:7rem}
:where(.editorial-case) .chapter-track{display:flex;justify-content:space-between;gap:.8rem;padding:1.6rem 0;margin-right:7.6rem;overflow-x:auto;scrollbar-width:thin}
:where(.editorial-case) .chapter-nav a:focus-visible{outline-offset:-3px}
:where(.editorial-case) .chapter-nav a{font-size:1.35rem;white-space:nowrap;border-radius:100px;padding:1rem 1.25rem;transition:background .2s,color .2s}
:where(.editorial-case) .chapter-nav a span{font-size:1.1rem;margin-right:.45rem}
:where(.editorial-case) .chapter-nav a:hover{background:var(--panel)}
:where(.editorial-case) .chapter-nav a[aria-current=true]{background:var(--ink);color:var(--paper)}

/* Chapters. Default: heading left, copy right, then full-width blocks (.story-image, .paired-photos, .route-list, ...).
   .is-split: with a direct .story-image the photo sits under the heading and the copy centres against both (POKKA 04, 05);
   without one (POKKA 02) it only tightens the column gap. */
:where(.editorial-case) .story-section.mxd-project__block{display:grid;grid-template-columns:1fr 1fr;gap:4rem 8%;margin:0;padding:8rem 0;border-bottom:1px solid var(--hairline);scroll-margin-top:1rem}
:where(.editorial-case) .story-section .mxd-project__subtitle{margin:0}
:where(.editorial-case) .story-section .mxd-project__paragraph{margin:0;gap:2.4rem}
:where(.editorial-case) .story-section .mxd-project__paragraph p{margin:0}
:where(.editorial-case) .story-image{grid-column:1/-1}
:where(.editorial-case) .story-section.is-split{column-gap:6%}
:where(.editorial-case) .is-split>.story-heading{grid-column:1}
:where(.editorial-case) .is-split>.story-heading h2{max-width:11em}
:where(.editorial-case) .is-split>.story-copy{grid-column:2;align-self:start}
:where(.editorial-case) .is-split:has(>.story-image)>.story-image{grid-column:1;grid-row:2}
:where(.editorial-case) .is-split:has(>.story-image)>.story-copy{grid-row:1/3;align-self:center}

/* Results panel */
:where(.editorial-case) .results-section{margin:5rem 0 0;padding:6rem;background:var(--panel);border-radius:var(--_radius-l);display:grid;grid-template-columns:1.15fr 1fr;gap:5rem 8%}
:where(.editorial-case) .results-heading h2{font-size:clamp(3.4rem,4vw,5.6rem)}
:where(.editorial-case) .completion-stat{align-self:center}
:where(.editorial-case) .completion-stat>strong{font-family:var(--_font-accent);font-weight:500;font-size:clamp(7rem,9vw,12rem);line-height:1;letter-spacing:-.075em;color:var(--accent);font-variant-numeric:tabular-nums}
:where(.editorial-case) .completion-stat>strong span{font-size:.5em;letter-spacing:-.04em}
:where(.editorial-case) .completion-stat p{font-size:1.9rem;line-height:1.4;padding-top:1.5rem}
:where(.editorial-case) .completion-stat p span{font-size:1.3rem;color:var(--muted)}
:where(.editorial-case) .completion-track{height:4px;width:100%;background:var(--track);margin-top:2rem;overflow:hidden;border-radius:100px}
:where(.editorial-case) .completion-track span{display:block;height:100%;background:var(--accent)}
:where(.editorial-case) .result-breakdown{display:grid;grid-template-columns:1fr auto;align-self:start;gap:2.2rem 1rem}
:where(.editorial-case) .result-breakdown>div{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:end;border-bottom:1px solid var(--rule);padding-bottom:1.8rem;gap:.4rem 1rem}
:where(.editorial-case) .result-breakdown span{font-size:1.55rem}
:where(.editorial-case) .result-breakdown strong{font-size:3rem;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
:where(.editorial-case) .result-breakdown small{grid-column:2;font-size:1.2rem;color:var(--muted)}
:where(.editorial-case) .results-prose p{font-size:1.6rem}

/* CTA + related links + more case studies */
:where(.editorial-case) .project-cta{padding:10rem 0 8rem}
:where(.editorial-case) .project-cta h2{font-size:clamp(4.6rem,7.5vw,10.5rem);line-height:1.02;font-weight:500;letter-spacing:-.055em;max-width:13em}
:where(.editorial-case) .project-cta h2 em{font-style:normal;color:var(--accent)}
:where(.editorial-case) .cta-bottom{display:flex;justify-content:space-between;align-items:end;gap:5rem;margin-top:4rem}
:where(.editorial-case) .cta-bottom p{font-size:1.8rem;max-width:62rem;line-height:1.55}
:where(.editorial-case) .related-links{display:flex;flex-wrap:wrap;gap:1.5rem 3.5rem;margin-top:3rem;font-size:1.4rem}
:where(.editorial-case) .related-links a{border-bottom:1px solid var(--hairline);padding-bottom:.5rem;display:flex;align-items:flex-end;gap:.3em;min-height:3.2rem}
:where(.editorial-case) .hero-rail>a{display:flex;align-items:center;gap:.3em;min-height:3.2rem}
:where(.editorial-case) .more-cases{margin-top:4.5rem}
:where(.editorial-case) .more-cases .related-links{margin-top:0}

/* Photo dialog */
:where(.editorial-case) .photo-dialog{position:fixed;inset:0;margin:auto;width:min(1320px,calc(100% - 3.2rem));max-height:calc(100dvh - 3.2rem);padding:2rem 3rem;border:0;border-radius:2rem;background:var(--paper);color:var(--ink);overflow:auto}
:where(.editorial-case) .photo-dialog::backdrop{background:rgba(15,15,15,.85)}
:where(.editorial-case) .photo-dialog[open]{display:flex;flex-direction:column}
:where(.editorial-case) .dialog-toolbar,:where(.editorial-case) .dialog-bottom{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-shrink:0}
:where(.editorial-case) .dialog-toolbar{margin-bottom:1.6rem}
:where(.editorial-case) .photo-dialog button{background:none;border:1px solid var(--control-line);border-radius:50px;padding:.8rem 1.6rem;font-size:1.4rem;color:var(--ink);white-space:nowrap}
:where(.editorial-case) .photo-dialog button:hover{background:var(--ink);color:var(--paper)}
:where(.editorial-case) .photo-dialog figure{margin:0;min-height:0;overflow:auto}
:where(.editorial-case) .photo-dialog figure img{width:100%;height:auto;max-height:68dvh;object-fit:contain}
:where(.editorial-case) .photo-dialog figcaption{font-size:1.3rem}
:where(.editorial-case) .dialog-bottom{margin-top:1.8rem}
:where(.editorial-case) .dialog-bottom p,:where(.editorial-case) .photo-count{font-size:1.3rem}

@media(max-width:1100px){
:where(.editorial-case) .project-hero{grid-template-columns:1fr 4fr}
:where(.editorial-case) .chapter-track{justify-content:flex-start}
:where(.editorial-case) .chapter-nav a{padding:1rem}
:where(.editorial-case) .project-overview{gap:6%}
:where(.editorial-case) .results-section{padding:4rem;gap:4rem 6%}
:where(.editorial-case) .story-section.mxd-project__block{gap:3.5rem 6%}
:where(.editorial-case) .story-copy p{font-size:1.7rem}
}

@media(max-width:767px){
.editorial-case .mxd-container{padding-left:2rem;padding-right:2rem}
.editorial-case .btn{font-size:1.4rem;height:4.8rem;padding:0 2rem}
:where(.editorial-case) .project-hero{display:block;padding-top:3rem}
:where(.editorial-case) .hero-rail{flex-direction:row;padding:0 0 2.8rem;font-size:1.3rem}
:where(.editorial-case) .hero-rail>span{text-align:right;font-size:1.2rem}
:where(.editorial-case) .project-kicker{font-size:1.3rem;margin-bottom:1.8rem}
:where(.editorial-case) .project-hero h1{font-size:clamp(5.2rem,16vw,11.8rem)}
:where(.editorial-case) .project-hero.is-long-title h1{font-size:clamp(4.2rem,12vw,8.8rem)}
:where(.editorial-case) .hero-summary{padding-top:2.5rem;gap:1rem}
:where(.editorial-case) .hero-summary p{font-size:2rem}
:where(.editorial-case) .round-link{width:5.2rem;height:5.2rem;font-size:2.5rem}
:where(.editorial-case) .project-facts.mxd-data-list{grid-template-columns:1fr 1fr;gap:2rem 1.3rem;margin-top:3rem;padding-top:2.2rem}
:where(.editorial-case) .project-facts span{font-size:1.2rem}
:where(.editorial-case) .project-facts strong{font-size:1.4rem}
:where(.editorial-case) .photo-enlarge{bottom:1.2rem;right:1.2rem;width:3.7rem;height:3.7rem;font-size:2rem}
:where(.editorial-case) figcaption{font-size:1.1rem;padding-top:1rem}
:where(.editorial-case) .project-overview{display:block;padding:5.5rem 0 3.5rem}
:where(.editorial-case) .overview-title h2{font-size:3.7rem}
:where(.editorial-case) .chapter-label{font-size:1.3rem;margin-bottom:1.5rem}
:where(.editorial-case) .project-tags{margin-top:2rem;gap:.6rem}
:where(.editorial-case) .project-tags .tag{font-size:1.15rem;padding:.6rem 1rem}
:where(.editorial-case) .overview-copy{margin-top:3rem}
:where(.editorial-case) .overview-copy p:first-child{font-size:2.1rem}
:where(.editorial-case) .overview-copy p,:where(.editorial-case) .story-copy p{font-size:1.65rem}
:where(.editorial-case) .results-snapshot{gap:1rem;padding:2.7rem 0}
:where(.editorial-case) .snapshot-stat strong.mxd-stats-number{font-size:clamp(3.5rem,9.6vw,6rem)}
:where(.editorial-case) .snapshot-stat>span{font-size:1.15rem;line-height:1.3;max-width:10rem}
:where(.editorial-case) .measurement-note{font-size:1.1rem;line-height:1.5}
:where(.editorial-case) .chapter-nav{margin-top:4rem}
:where(.editorial-case) .chapter-track{padding:1rem 0;gap:.3rem;margin-right:7rem}
:where(.editorial-case) .chapter-nav a{font-size:1.25rem;padding:1.2rem 1rem;min-height:4.4rem}
:where(.editorial-case) .hero-rail>a,:where(.editorial-case) .related-links a{min-height:4.4rem}
:where(.editorial-case) .story-section.mxd-project__block{display:flex;flex-direction:column;padding:5rem 0;gap:2.5rem}
:where(.editorial-case) .story-heading h2{font-size:3.8rem;max-width:12em}
:where(.editorial-case) .story-image{width:100%}
:where(.editorial-case) .is-split:has(>.story-image)>.story-copy{order:1}
:where(.editorial-case) .results-section{display:flex;flex-direction:column;margin-top:3rem;padding:3rem 2.2rem;gap:3rem;border-radius:2.5rem}
:where(.editorial-case) .results-heading h2{font-size:3.6rem}
:where(.editorial-case) .completion-stat{width:100%}
:where(.editorial-case) .completion-stat>strong{font-size:min(9rem,23.1vw)}
:where(.editorial-case) .completion-stat p{font-size:1.7rem}
:where(.editorial-case) .result-breakdown{width:100%;gap:1.8rem}
:where(.editorial-case) .result-breakdown span{font-size:1.4rem}
:where(.editorial-case) .results-prose p{font-size:1.6rem}
:where(.editorial-case) .project-cta{padding:6rem 0 5rem}
:where(.editorial-case) .project-cta h2{font-size:clamp(4.4rem,10.6vw,7rem)}
:where(.editorial-case) .cta-bottom{display:block;margin-top:2.7rem}
:where(.editorial-case) .cta-bottom p{font-size:1.65rem}
:where(.editorial-case) .cta-bottom .btn{margin-top:2.5rem;gap:1.2rem;padding:0 1.6rem;max-width:100%;white-space:normal}
:where(.editorial-case) .related-links{display:grid;font-size:1.3rem;gap:1.5rem}
:where(.editorial-case) .related-links a{width:fit-content}
:where(.editorial-case) .photo-dialog{width:calc(100% - 2rem);padding:1.5rem;border-radius:1.5rem}
:where(.editorial-case) .dialog-bottom p{display:none}
:where(.editorial-case) .photo-dialog figure img{max-height:65dvh}
:where(.editorial-case) .photo-dialog button{padding:.8rem 1.2rem;font-size:1.25rem;min-height:4.4rem}
:where(.editorial-case) .photo-count{font-size:1.2rem}
}

@media(prefers-reduced-motion:reduce){:where(.editorial-case) *,:where(.editorial-case) *::before,:where(.editorial-case) *::after{animation:none!important;transition:none!important}}

@media print{
:where(.editorial-case) .chapter-nav,:where(.editorial-case) .round-link,:where(.editorial-case) .photo-enlarge,:where(.editorial-case) .related-links,:where(.editorial-case) .photo-dialog{display:none!important}
:where(.editorial-case) .story-section,:where(.editorial-case) .project-overview,:where(.editorial-case) .results-section{break-inside:avoid}
:where(.editorial-case) .project-hero{padding-top:0}
:where(.editorial-case) .story-section.mxd-project__block{padding:3rem 0}
:where(.editorial-case) .project-cta{padding:3rem 0}
}

/* Optional: concept map (numbered links to chapters, POKKA 01) */
:where(.editorial-case) .concept-map{grid-column:1/-1;margin-top:1rem;padding:3.6rem 0 0}
:where(.editorial-case) .concept-map-heading{display:flex;justify-content:space-between;align-items:end;gap:3rem;margin-bottom:2.8rem}
:where(.editorial-case) .concept-map h3,:where(.editorial-case) .supporting-game h3{font-family:var(--_font-accent);font-size:3.2rem;font-weight:500;letter-spacing:-.03em;line-height:1.15;margin:0}
:where(.editorial-case) .concept-map-heading>p{font-size:1.5rem;color:var(--muted)}
:where(.editorial-case) .concept-stops{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;border-top:1px solid var(--hairline)}
:where(.editorial-case) .concept-stops>a{padding-top:2rem;display:block}
:where(.editorial-case) .concept-stop-number{font-size:1.2rem;color:var(--accent);font-variant-numeric:tabular-nums}
:where(.editorial-case) .concept-stops h4{font-family:var(--_font-accent);font-size:2.5rem;line-height:1.2;letter-spacing:-.03em;font-weight:500;margin:1.2rem 0}
:where(.editorial-case) .concept-stops h4>span{font-size:1.8rem;margin-left:.6rem}
:where(.editorial-case) .concept-stops p{font-size:1.5rem;line-height:1.5;color:var(--muted)}
:where(.editorial-case) .concept-stops a:hover h4{color:var(--accent)}

/* Optional: two photos side by side (POKKA 02) */
:where(.editorial-case) .paired-photos{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:3rem}

/* Optional: portrait photo (figure.story-photo.is-portrait) in a chapter, or a 9:16 in a gallery. Capped at 80vh tall and centred in
   its column, so it never renders taller than the screen on desktop; phones keep full width. --ar is the photo's width/height:
   3/4 by default, set inline for other ratios (style="--ar:9/16"). Width, not max-height, so the box is right before the image loads. */
:where(.editorial-case) .story-photo.is-portrait{width:min(100%,calc(80vh*var(--ar,3/4)));margin-inline:auto}

/* Optional: feature cards (POKKA games). .game-body bounds the sticky photo so it never slides over .game-purpose. */
:where(.editorial-case) .game-features{grid-column:1/-1;display:grid;gap:5rem}
:where(.editorial-case) .game-feature{padding:4rem;border:1px solid var(--hairline);border-radius:var(--_radius-m);display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;min-width:0;scroll-margin-top:10rem}
:where(.editorial-case) .game-body{display:grid;grid-template-columns:1fr 1fr;gap:4rem;min-width:0}
:where(.editorial-case) .game-feature-title{grid-column:1/-1}
:where(.editorial-case) .game-feature-title h3{font-size:clamp(3.6rem,4vw,5.6rem);font-family:var(--_font-accent);font-weight:500;line-height:1.05;letter-spacing:-.045em;margin:0}
:where(.editorial-case) .game-feature-title .chapter-label{color:var(--accent);font-size:1.3rem}
:where(.editorial-case) .game-hook{font-size:2rem;margin-top:1.2rem;line-height:1.35}
:where(.editorial-case) .game-photo{align-self:start;position:sticky;top:10rem}
:where(.editorial-case) .game-photo .photo-link{border-radius:1.6rem}
:where(.editorial-case) .game-copy{min-width:0}
:where(.editorial-case) .game-copy .story-copy p{font-size:1.65rem;line-height:1.6}
:where(.editorial-case) .game-copy .story-copy p:not(:last-child){margin-bottom:1.6rem}
:where(.editorial-case) .game-flow{display:grid;grid-template-columns:1fr 1fr;list-style:none;gap:1.4rem;padding:2.4rem 0 0;margin:2rem 0 0;border-top:1px solid var(--hairline)}
:where(.editorial-case) .game-flow li{font-size:1.35rem;display:flex;align-items:center;gap:.8rem;line-height:1.35}
:where(.editorial-case) .game-flow li span{border:1px solid var(--hairline);width:2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:1.1rem}
:where(.editorial-case) .game-purpose{grid-column:1/-1;padding-top:2.7rem;border-top:1px solid var(--hairline);display:grid;grid-template-columns:1.7fr 1fr;align-items:center;gap:4rem}
:where(.editorial-case) .game-purpose>p{font-size:1.75rem;line-height:1.4;max-width:65rem}
:where(.editorial-case) .game-purpose>p>span{display:block;font-size:1.2rem;color:var(--muted);margin-bottom:1rem}
:where(.editorial-case) .game-purpose>div{justify-self:end}
:where(.editorial-case) .game-purpose strong{display:block;font-family:var(--_font-accent);font-size:5.5rem;line-height:1;letter-spacing:-.055em;font-weight:500;font-variant-numeric:tabular-nums;color:var(--accent)}
:where(.editorial-case) .game-purpose>div>span{font-size:1.2rem}
:where(.editorial-case) .supporting-game{display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:1rem 0}
:where(.editorial-case) .supporting-game h3{font-size:3rem;max-width:17em}
:where(.editorial-case) .supporting-game p{font-size:1.7rem;line-height:1.6}
:where(.editorial-case) .game-feature:not(:has(.game-photo)) .game-copy{grid-column:1/-1;max-width:76rem}
:where(.editorial-case) .game-feature:not(:has(.game-photo)){background:var(--panel)}

/* Optional: detail pairs (POKKA 02 "Inside the ... cabin") */
:where(.editorial-case) .experience-details{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:1rem}
:where(.editorial-case) .experience-detail{min-width:0;display:flex;flex-direction:column;gap:2.4rem;padding-top:3rem;border-top:1px solid var(--hairline);scroll-margin-top:10rem}
:where(.editorial-case) .experience-detail h3{font-family:var(--_font-accent);font-size:clamp(2.8rem,3vw,4rem);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:0}
:where(.editorial-case) .experience-detail .chapter-label{color:var(--accent);font-size:1.3rem;margin-bottom:1.3rem}
:where(.editorial-case) .experience-detail .detail-copy p{font-size:1.65rem;line-height:1.6;margin-bottom:1.6rem}
:where(.editorial-case) .experience-detail .detail-copy p:last-child{margin-bottom:0}

/* Optional: route / stops list (MR.DIY city legs; any roadshow or roving route). Columns follow the item count. */
:where(.editorial-case) .route-list{grid-column:1/-1;list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:3rem 4rem}
:where(.editorial-case) .route-list>li{min-width:0;border-top:1px solid var(--hairline);padding-top:2rem}
:where(.editorial-case) .route-label{display:block;font-size:1.3rem;color:var(--accent);margin-bottom:1.2rem;font-variant-numeric:tabular-nums}
:where(.editorial-case) .route-list h3{font-family:var(--_font-accent);font-size:clamp(2.4rem,2.4vw,3.2rem);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:0 0 1.4rem}
:where(.editorial-case) .route-list p{font-size:1.6rem;line-height:1.55;color:var(--muted);margin:0}

/* Optional: campaign film. Landscape by default (16:9, full width); .is-vertical sizes a 9:16 clip to fit the viewport. */
:where(.editorial-case) .story-video{margin:0}
:where(.editorial-case) .story-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--_radius-m);background:var(--panel)}
:where(.editorial-case) .story-video.is-vertical video{width:min(100%,42rem,calc((100svh - 16rem)*9/16));aspect-ratio:9/16}

/* Optional: photo gallery (2 columns; an odd last photo is centred at 70%) */
:where(.editorial-case) .gallery-section{padding:8rem 0;border-bottom:1px solid var(--hairline);scroll-margin-top:1rem}
:where(.editorial-case) .gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:3rem;margin-bottom:4rem}
:where(.editorial-case) .gallery-heading>p{font-size:1.5rem;line-height:1.5;color:var(--muted);max-width:40rem}
:where(.editorial-case) .photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem 3rem;align-items:start}
:where(.editorial-case) .photo-grid>figure{min-width:0}
:where(.editorial-case) .photo-grid>figure:last-child:nth-child(odd){grid-column:1/-1;width:70%;justify-self:center}

@media(max-width:1100px){
:where(.editorial-case) .game-feature{padding:3rem;gap:3rem}
:where(.editorial-case) .game-body{gap:3rem}
:where(.editorial-case) .game-copy .story-copy p{font-size:1.6rem}
:where(.editorial-case) .game-flow{grid-template-columns:1fr}
:where(.editorial-case) .game-purpose{grid-template-columns:1.4fr 1fr}
:where(.editorial-case) .concept-stops{gap:2rem}
:where(.editorial-case) .concept-stops h4{font-size:2.2rem}
:where(.editorial-case) .photo-grid{gap:3rem 2rem}
}

@media(max-width:767px){
:where(.editorial-case) .concept-map{padding-top:1rem}
:where(.editorial-case) .concept-map-heading{display:block;margin-bottom:2rem}
:where(.editorial-case) .concept-map h3{font-size:2.8rem}
:where(.editorial-case) .concept-map-heading>p{margin-top:1rem;font-size:1.4rem}
:where(.editorial-case) .concept-stops{grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem}
:where(.editorial-case) .concept-stops h4{font-size:2.2rem}
:where(.editorial-case) .concept-stops p{font-size:1.35rem}
:where(.editorial-case) .paired-photos{grid-template-columns:1fr;gap:2.5rem;width:100%}
:where(.editorial-case) .game-features{gap:3rem}
:where(.editorial-case) .game-feature{display:flex;flex-direction:column;padding:2rem 1.6rem;gap:2.4rem;border-radius:2rem;scroll-margin-top:8rem}
:where(.editorial-case) .game-body{display:flex;flex-direction:column;gap:2.4rem}
:where(.editorial-case) .game-feature-title h3{font-size:3.4rem}
:where(.editorial-case) .game-feature-title .chapter-label{font-size:1.1rem;line-height:1.4;display:block}
:where(.editorial-case) .game-hook{font-size:1.8rem}
:where(.editorial-case) .game-photo{position:static}
:where(.editorial-case) .game-copy .story-copy p{font-size:1.6rem}
:where(.editorial-case) .game-flow{grid-template-columns:1fr 1fr;gap:1.4rem 1rem;margin-top:2rem;padding-top:2rem}
:where(.editorial-case) .game-flow li{font-size:1.2rem}
:where(.editorial-case) .game-purpose{display:flex;flex-direction:column;align-items:start;gap:2rem;padding-top:2rem}
:where(.editorial-case) .game-purpose>p{font-size:1.6rem}
:where(.editorial-case) .game-purpose strong{font-size:5rem}
:where(.editorial-case) .supporting-game{display:block}
:where(.editorial-case) .supporting-game h3{font-size:2.8rem;margin-bottom:1.8rem}
:where(.editorial-case) .supporting-game p{font-size:1.6rem}
:where(.editorial-case) .experience-details{grid-template-columns:1fr;gap:3rem}
:where(.editorial-case) .experience-detail{gap:2rem;padding-top:2.5rem;scroll-margin-top:8rem}
:where(.editorial-case) .experience-detail h3{font-size:3.1rem}
:where(.editorial-case) .experience-detail .detail-copy p{font-size:1.6rem}
:where(.editorial-case) .route-list{gap:2.5rem}
:where(.editorial-case) .route-list p{font-size:1.5rem}
:where(.editorial-case) .gallery-section{padding:5rem 0}
:where(.editorial-case) .gallery-heading{display:block;margin-bottom:2.5rem}
:where(.editorial-case) .gallery-heading>p{margin-top:1.5rem;font-size:1.4rem}
:where(.editorial-case) .photo-grid{grid-template-columns:1fr;gap:2.5rem}
:where(.editorial-case) .photo-grid>figure:last-child:nth-child(odd){width:100%}
}