.case-reader{--reader-sidebar:250px}
/* Project identities follow the supplied case-study artwork. */
.case-reader:has(.project-hero img[src*="assets/jam/"]){--bg:#060e24;--paper:#0d1936;--ink:#f5f7ff;--muted:#bfcae5;--line:#2a3b60;--accent:#37d6f3;--accent2:#37d6f3;--dark:#09132c;--reader-active:#14354e;--reader-button:#36d5f3;--reader-button-ink:#061024;--serif:var(--sans);background:radial-gradient(ellipse at 85% 8%,#172052 0,transparent 38%),var(--bg)}
.case-reader:has(.project-hero img[src*="assets/roadwatch/"]){--bg:#0e1511;--paper:#18221c;--ink:#f3f6ee;--muted:#b6c2b8;--line:#344238;--accent:#f8de3d;--accent2:#f8de3d;--dark:#121c16;--reader-active:#30351b;--reader-button:#f8de3d;--reader-button-ink:#10170f;--serif:var(--sans)}
.case-reader:has(.project-hero img[src*="09bdb65f774f9d196277"]){--bg:#f8f5f1;--paper:#fffdfa;--ink:#201a30;--muted:#655c70;--line:#ded5e9;--accent:#60449b;--accent2:#af4b32;--dark:#29203d;--reader-active:#ece4f6;--reader-button:#60449b;--reader-button-ink:#fff; background:radial-gradient(ellipse at 95% 5%,#eae2f3 0,transparent 35%),var(--bg)}
.case-reader .lead,.case-reader .video-caption,.case-reader .case-intro{color:var(--muted)}
.case-reader .case-contents li a:hover,.case-reader .case-contents li a[aria-current]{background:var(--reader-active);color:var(--ink)}
.case-reader .case-section-number{color:var(--accent)}
.case-reader .case-reading-progress span{background:var(--accent)}
.case-reader main .btn.primary{background:var(--reader-button);border-color:var(--reader-button);color:var(--reader-button-ink)}
.case-reader .hero-tertiary{margin:14px 0 0;color:var(--muted);font-size:.9rem}
.case-reader .hero-tertiary a{text-decoration:underline;text-underline-offset:3px}
.case-reader .hero-tertiary a:hover{color:var(--accent)}
.case-reader .section.dark{background:var(--dark);color:#f5f3fa}
.case-reader .section.dark .eyebrow{color:var(--reader-button)}
.case-reader .section.dark .section-head p{color:#c9c6d0}
.case-reader .process-card{border-color:var(--line)}
.case-reader .video-shell video{object-fit:contain}
.case-reader .case-contents a:focus-visible,.case-reader .case-contents summary:focus-visible{outline-color:var(--accent)}
/* Keep the portfolio masthead neutral so its original black logo stays legible. */
.case-reader .site-header{--ink:#171716;background:#f2f0ed;color:#171716}
.case-reader .footer-brand img{background:#f2f0ed;border-radius:6px;padding:4px}
.case-reader:has(.project-hero img[src*="assets/jam/"]) :is(.page-title,.section-title),.case-reader:has(.project-hero img[src*="assets/roadwatch/"]) :is(.page-title,.section-title){font-weight:600;letter-spacing:-.04em}
.case-reader:has(.project-hero img[src*="assets/jam/"]) .accent,.case-reader:has(.project-hero img[src*="assets/roadwatch/"]) .accent{font-style:normal}
.case-reader main,.case-reader>.footer{margin-left:var(--reader-sidebar)}
.case-reader main>.section,.case-reader main>.project-hero{scroll-margin-top:108px}
.case-reader main .container{width:calc(100% - 72px);max-width:1160px}
.case-reader main .narrow{width:calc(100% - 72px);max-width:850px}
.case-reader .project-hero{padding-top:54px}
.case-reader .project-hero-grid{gap:36px;grid-template-columns:1fr 1fr}
.case-reader .project-hero .page-title{font-size:clamp(2.6rem,3.8vw,4.4rem)}
.case-reader .section{padding-top:76px;padding-bottom:76px}
.case-reader .section.compact{padding-top:46px;padding-bottom:46px}
.case-reader .section-title{font-size:clamp(2rem,3.4vw,3.5rem)}
.case-reader .section-head{align-items:start;gap:28px}
.case-reader .section-head>div,.case-reader .section-head>p{flex:1;min-width:0}
.case-reader .section-head>p{font-size:16px;line-height:1.7}
.case-reader .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-reader .process-copy p{font-size:16px;line-height:1.65}
.case-reader .case-contents{position:fixed;top:110px;bottom:24px;left:20px;width:210px;z-index:40;overflow:auto;padding:20px 12px;background:var(--paper,#fbfaf8);border:1px solid var(--line,#d8d3ce);border-radius:14px}
.case-reader .case-contents>summary{display:none}
.case-contents-title{font:600 11px/1.5 var(--sans,Arial);letter-spacing:.13em;color:var(--muted);margin:0 10px 18px}
.case-contents ol{list-style:none;padding:0;margin:0}
.case-contents li{margin:3px 0}
.case-contents li a{display:flex;gap:10px;align-items:baseline;padding:11px 10px;border-radius:7px;font:400 14px/1.45 var(--sans,Arial);color:var(--muted);text-decoration:none}
.case-contents li a:hover{background:#ede8e3;color:var(--ink)}
.case-contents li a[aria-current]{background:#e9e1db;color:#302823;font-weight:600}
.case-section-number{font-size:11px;color:#8b6861;font-variant-numeric:tabular-nums}
.case-reading-progress{height:3px;margin:25px 10px 16px;background:var(--line);border-radius:4px;overflow:hidden}
.case-reading-progress span{display:block;height:100%;background:#8b6861;width:0}
.case-back{display:block;margin:0 10px;font-size:13px;color:var(--muted);padding:8px 0}
.case-contents a:focus-visible,.case-contents summary:focus-visible{outline:2px solid #8b6861;outline-offset:2px}
@media(min-width:1051px){.case-reader .case-contents:not([open])>nav{display:block}}
@media(max-width:1200px) and (min-width:1051px){.case-reader .project-hero-grid{grid-template-columns:1fr}.case-reader .project-hero-media{max-width:680px}.case-reader .section-head{display:block}.case-reader .section-head>p{margin-top:16px}}
@media(max-width:1050px){
 .case-reader main,.case-reader>.footer{margin-left:0}
 .case-reader .case-contents{position:sticky;top:82px;bottom:auto;left:auto;width:auto;margin:0;padding:0;border-radius:0;border-width:0 0 1px;max-height:calc(100dvh - 100px);overflow:auto;z-index:45;background:var(--paper)}
 .case-reader .case-contents>summary{display:list-item;cursor:pointer;padding:15px 28px;font-size:14px;font-weight:600;list-style-position:inside}
 .case-reader .case-contents>nav{padding:4px 18px 18px}
 .case-contents-title{display:none}
 .case-reader main>.section,.case-reader main>.project-hero{scroll-margin-top:155px}
 .case-reader .project-hero-grid{grid-template-columns:1fr;gap:32px}
 .case-reader .project-hero-media{max-width:760px}
}
@media(max-width:760px){
 .case-reader .case-contents{top:72px}
 .case-reader main .container,.case-reader main .narrow{width:calc(100% - 32px)}
 .case-reader .section{padding:52px 0}
 .case-reader .section-head{display:block}
 .case-reader .section-head>p{margin-top:16px}
 .case-reader .process-grid{grid-template-columns:1fr}
 .case-reader .project-hero{padding:32px 0 48px}
 .case-reader .project-hero .page-title{font-size:clamp(2.6rem,10vw,4rem)}
 .case-reader .case-contents>summary{padding-left:16px}
}