.project-editorial .project-header{color:var(--ivory);background:var(--oxide);margin:0;padding:32px var(--gutter);max-width:none}
.project-editorial .project-header .brand img{filter:brightness(0) invert(1)}
.project-editorial .project-header a:focus-visible{outline-color:var(--ivory)}
.editorial-opening{background:linear-gradient(var(--oxide) 0 72%,var(--graphite) 72%);color:var(--ivory);padding:66px var(--gutter) 0}
.opening-topline{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.1em;opacity:.8}
.opening-title{display:grid;grid-template-columns:1fr 260px;align-items:end;gap:40px;position:relative;z-index:1;margin:46px 0 -20px}
.opening-title h1{font-size:clamp(76px,10.6vw,180px);font-weight:400;line-height:.92;letter-spacing:-.065em;margin:0}
.opening-title h1 span{white-space:nowrap}
.opening-intro{padding-bottom:64px}
.opening-intro>p{font-size:26px;line-height:1.3;letter-spacing:-.025em;margin:0 0 32px}
.opening-intro>a{display:flex;justify-content:space-between;align-items:center;min-height:44px;font-size:14px;border-bottom:1px solid rgb(255 255 255 / .4)}
.opening-intro>a span{font-size:24px}
.editorial-cover{margin:0}
.editorial-cover img{display:block;width:100%;height:clamp(380px,48vw,760px);object-fit:cover;object-position:center 60%;filter:saturate(.78);border-radius:2px}
.editorial-cover figcaption{display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-size:13px;color:var(--ivory);opacity:.65}
.editorial-story{background:var(--graphite);color:var(--ivory);padding:100px var(--gutter) 120px;display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;align-items:stretch;min-height:100svh}
.story-navigation{padding:35px 0;display:flex;flex-direction:column;align-items:stretch}
.story-navigation .chapter-label{color:var(--ivory);opacity:.6}
.story-navigation h2{font-size:clamp(42px,4.5vw,68px);line-height:1.07;max-width:15ch;margin:0 0 62px}
.story-tabs{display:grid}
.story-tabs button{display:grid;grid-template-columns:32px 1fr 22px;gap:20px;text-align:left;align-items:center;border:0;border-top:1px solid rgb(255 255 255 / .2);background:none;color:var(--ivory);padding:25px 0;font:inherit;font-size:25px;cursor:pointer;opacity:.55;transition:opacity 180ms}
.story-tabs button:last-child{border-bottom:1px solid rgb(255 255 255 / .2)}
.story-tabs button>span:first-child{font-size:13px}
.story-tabs button:hover,.story-tabs button[aria-selected=true]{opacity:1}
.story-tabs button[aria-selected=true]{box-shadow:inset 3px 0 var(--oxide);padding-left:16px}
.project-editorial .story-tabs button:focus-visible{outline:2px solid var(--ivory);outline-offset:4px}
.story-location{margin:48px 0 0;font-size:13px;line-height:1.8;opacity:.55}
.story-stage{background:var(--oxide);padding:clamp(30px,4.4vw,70px);display:grid;align-items:stretch}
.story-panel{grid-area:1/1;display:flex;flex-direction:column;gap:52px;min-height:620px}
.story-stage:not(.enhanced) .story-panel{grid-area:auto}
.story-panel[hidden]{display:none}
.story-folio{font-size:clamp(100px,10vw,160px);line-height:.85;letter-spacing:-.085em;opacity:.75}
.story-panel>div{margin-top:auto}
.story-panel h3{font-size:clamp(32px,3vw,46px);line-height:1.12;letter-spacing:-.04em;font-weight:400;margin:0 0 28px;max-width:17ch}
.story-panel p{font-size:18px;line-height:1.75;margin:0;max-width:42ch;color:var(--ivory);opacity:.85}
.story-panel p+p{margin-top:20px}
@media(max-width:1100px){.opening-title{grid-template-columns:1fr 190px;gap:28px}.opening-title h1{font-size:9.8vw}.opening-intro>p{font-size:22px}.editorial-story{gap:5vw}.story-stage{padding:35px}.story-panel{min-height:650px}}
@media(max-width:800px){.editorial-opening{padding-top:38px}.opening-topline{font-size:10px;letter-spacing:.05em}.opening-title{grid-template-columns:1fr;margin:38px 0 30px;gap:28px}.opening-title h1{font-size:12.5vw}.opening-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0}.opening-intro>p{font-size:20px;margin:0}.opening-intro>a{gap:22px;font-size:12px}.editorial-cover img{height:400px}.editorial-cover figcaption{font-size:11px;padding:20px 0}.editorial-story{grid-template-columns:1fr;gap:34px;padding-top:55px;padding-bottom:65px;min-height:0}.story-navigation{padding:0}.story-navigation h2{font-size:43px;margin-bottom:30px}.story-location{display:none}.story-tabs{grid-template-columns:repeat(3,1fr);gap:12px}.story-tabs button{display:flex;flex-direction:column;align-items:start;gap:12px;font-size:15px;line-height:1.3;padding:16px 0;border-bottom:0!important}.story-tabs button>span:last-child{display:none}.story-tabs button[aria-selected=true]{box-shadow:inset 0 3px var(--oxide);padding-left:0}.story-stage{padding:32px}.story-panel{min-height:610px;gap:40px}.story-folio{font-size:100px}.story-panel h3{font-size:34px}.story-panel p{font-size:17px}}
@media(max-width:400px){.story-stage{padding:25px}.story-panel{min-height:760px}.story-panel h3{font-size:30px}.opening-topline{font-size:9px}.opening-intro>p{font-size:18px}.opening-intro>a{gap:10px}.editorial-cover img{height:330px}}
@media(prefers-reduced-motion:reduce){.story-tabs button{transition:none}}

/* The inset card surface sits on the same graphite canvas as the story. */
.case-study.project-editorial{background:var(--graphite)}
.project-editorial .handover-story{color:var(--ivory)}
.project-editorial .handover-story>p,.project-editorial .handover-story .chapter-label,.project-editorial .project-detail figcaption{color:var(--ivory);opacity:.75}

@keyframes editorial-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
 .project-editorial .project-header>a,.opening-topline,.opening-title h1,.opening-intro,.editorial-cover{animation:editorial-arrive 900ms cubic-bezier(.22,1,.36,1) both}
 .project-editorial .project-header>a{animation-delay:180ms}
 .opening-topline{animation-delay:320ms}
 .opening-title h1{animation-delay:460ms}
 .opening-intro{animation-delay:620ms}
 .editorial-cover{animation-delay:780ms}
 .project-editorial .reveal-pending{opacity:0}
 .project-editorial :is(.project-header>a,.opening-intro,.editorial-cover):focus-within{animation:none;opacity:1;transform:none}
 .project-editorial .reveal-pending:focus-within{opacity:1}
}
@media print{.project-editorial .reveal-pending{opacity:1}.project-editorial *{animation:none!important}}

/* Let the deck share the page canvas; retain separation on the dark face. */
.project-editorial .stack-demo{background:transparent;color:var(--ivory)}
.project-editorial .stack-summary,.project-editorial .stack-hint,.project-editorial #stack-count span{color:color-mix(in oklch,var(--ivory) 72%,var(--graphite))}
.project-editorial .stack-controls button{border-color:color-mix(in oklch,var(--ivory) 45%,var(--graphite))}
.project-editorial .stack-controls button:hover{background:var(--ivory);color:var(--graphite)}
.project-editorial .stack-dots button::after{background:color-mix(in oklch,var(--ivory) 35%,var(--graphite))}
.project-editorial .stack-dots button[aria-pressed=true]::after{background:var(--ivory)}
.project-editorial .stack-demo :is(button,.stat-deck):focus-visible{outline-color:var(--ivory)}
.project-editorial .stat-card{box-shadow:0 24px 40px -20px rgb(0 0 0 / .55)}
.project-editorial .card-graphite{background:oklch(30% .01 60);box-shadow:inset 0 0 0 1px rgb(246 241 233 / .28),0 24px 40px -20px rgb(0 0 0 / .55)}

/* Continue the dark canvas through the company totals. */
.project-editorial .company-facts{background:transparent;color:var(--ivory)}
.project-editorial .company-facts-heading .chapter-label{color:var(--ivory);opacity:.65}
.project-editorial .company-fact:first-child{color:var(--graphite)}
.project-editorial .company-fact:nth-child(3){background:oklch(30% .01 60);box-shadow:inset 0 0 0 1px rgb(246 241 233 / .28)}
