/* Case surfaces are explicit: existing cases default to light; dark cases opt in.
   Future coloured cases can supply these same palette roles independently. */
html:has(body.case-page[data-case-theme="dark"]){background:#000;color-scheme:dark}
html body#top.case-page[data-case-theme="dark"]{
 --bg:#000;--fg:#fff;--muted:#6e6e73;--description-color:#6e6e73;
 --text-tertiary:#999;--secondary-surface:#191919;--line:rgba(255,255,255,.16);
 --control-surface:#242424;--control-hover:#f3f3f3;--button-ink:#fff;
 --link-hover:#999;--preview-keyline:rgba(255,255,255,.0768);
 color-scheme:dark;background:var(--bg);color:var(--fg);
}
html body#top.case-page[data-case-theme="dark"] #content :is(.case-subtitle>p,.case-subtitle>p *,.case-facts dd,.overview-copy,.overview-copy p,.chapter-description,.case-navigation a){color:var(--fg)!important}
html body#top.case-page[data-case-theme="dark"] :is(.case-facts dt,.result-description,.footer-bottom){color:var(--muted)!important}
html body#top.case-page[data-case-theme="dark"] .tags>span{background:#191919!important;color:#6e6e73!important}
html body#top.case-page[data-case-theme="dark"] #content .result-card{background:#191919!important}
html body#top.case-page[data-case-theme="dark"] #content .result-card :is(.result-value,.result-copy h3){color:#fff!important}
html body#top.case-page[data-case-theme="dark"] #content .result-card .result-description{color:#6e6e73!important}
html body#top.case-page[data-case-theme="dark"] #contact :is(.contact-heading,.contact-heading *){color:inherit}
html body#top.case-page[data-case-theme="dark"] #contact .contact-heading{color:#fff!important}
html body#top.case-page[data-case-theme="dark"] #contact .contact-heading:is(:hover,:focus-visible){opacity:.4!important}
html body#top.case-page[data-case-theme="dark"] #content>.light-closing-statement,
html body#top.case-page[data-case-theme="dark"] #content .light-closing-statement .home-closing-title{background:#000;color:#fff}
/* Dark controls reuse Home's flat charcoal fill and light hover. */
html body#top.case-page[data-case-theme="dark"] :is(.site-header .header-row .main-nav>a,.action-button,.back-top){
 --control-surface:#242424;--button-ink:#fff;--hover-base:#242424;--hover-fill:#f3f3f3;--hover-ink:#1a1a1a;
 background:#242424!important;color:#fff!important;mix-blend-mode:normal!important;
 box-shadow:none;
}
html body#top.case-page[data-case-theme="dark"] :is(.site-header .header-row .main-nav>a,.action-button,.back-top) .control-label{color:inherit!important;mix-blend-mode:normal!important}
html body#top.case-page[data-case-theme="dark"] :is(.site-header .header-row .main-nav>a,.action-button,.back-top).fill-control::before{background:#f3f3f3!important}
html body#top.case-page[data-case-theme="dark"] :is(.site-header .header-row .main-nav>a,.action-button,.back-top):is(:hover,:focus-visible){color:#1a1a1a!important}
html body#top.case-page[data-case-theme="dark"] :is(.site-header .header-row .main-nav>a,.action-button,.back-top):is(:hover,:focus-visible) .control-label{color:#1a1a1a!important}
html body#top.case-page[data-case-theme="dark"]>.bottom-section-nav{
 --segment-surface:#242424;--segment-hover:#2a2a2a;--segment-ink:#fff;
 --segment-active:#f3f3f3;--segment-active-ink:#1a1a1a;
 background:var(--segment-surface);color:var(--segment-ink);
}
html body#top.case-page[data-case-theme="dark"]>.header-glass-pill{background:rgba(36,36,36,.72)}
html body#top.case-page[data-case-theme="dark"].header-pill-glass-ready .site-header .header-row .main-nav>a{background:transparent!important;--hover-base:transparent}
html body#top.case-page[data-case-theme="dark"] ::selection{background:#fff;color:#000}
html body#top.case-page[data-case-theme="dark"] .page-transition{background:#000}
html body#top.case-page[data-case-theme="dark"] .hover-tooltip{background:#fff;color:#1a1a1a}
html body#top.case-page[data-case-theme="dark"] #content .case-navigation a:is(:hover,:focus-visible){color:#6e6e73!important}

/* Dark case navigation uses the same translucent backdrop as Home. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html body#top.case-page[data-case-theme="dark"]>.bottom-section-nav{
  --segment-surface:rgba(36,36,36,.72);background:var(--segment-surface);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
 }
}

/* Primary case details action contrasts with the dark page at rest. */
html body#top.case-page[data-case-theme="dark"] .details-trigger.action-button{
 background:#fff!important;color:#1a1a1a!important;
 --control-surface:#fff;--button-ink:#1a1a1a;--hover-base:#fff;--hover-fill:#242424;--hover-ink:#fff;
}
html body#top.case-page[data-case-theme="dark"] .details-trigger.action-button .control-label{color:inherit!important}
html body#top.case-page[data-case-theme="dark"] .details-trigger.action-button.fill-control::before{background:#242424!important}
html body#top.case-page[data-case-theme="dark"] .details-trigger.action-button:is(:hover,:focus-visible),
html body#top.case-page[data-case-theme="dark"] .details-trigger.action-button:is(:hover,:focus-visible) .control-label{color:#fff!important}

/* Every case rail samples the artwork behind its translucent outer plate. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html body#top.case-page>.bottom-section-nav{
  backdrop-filter:blur(18px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(120%)!important;
 }
 html body#top.case-page:not([data-case-theme="dark"])>.bottom-section-nav{
  --segment-surface:rgba(255,255,255,.72);background:var(--segment-surface)!important;
 }
 html body#top.case-page[data-case-theme="dark"]>.bottom-section-nav{
  --segment-surface:rgba(36,36,36,.72);background:var(--segment-surface)!important;
 }
}

/* Dark artwork previews use a white tooltip with dark, readable lettering. */
html body#top.case-page[data-case-theme="dark"] :is(.hover-tooltip,.site-cursor.is-view){background:#fff!important;color:#1a1a1a!important;mix-blend-mode:normal}
html body#top.case-page[data-case-theme="dark"] :is(.hover-tooltip,.site-cursor.is-view) span{color:#1a1a1a!important}
/* A divider marks the junction of two black surfaces. */
html body#top.case-page[data-case-theme="dark"] #content .case-navigation{border-bottom:1px solid rgba(255,255,255,.2)!important}
/* Previous and next destinations reuse the large dark action controls. */
html body#top.case-page[data-case-theme="dark"] #content .case-navigation>.case-navigation-button{color:#fff!important}
html body#top.case-page[data-case-theme="dark"] #content .case-navigation>.case-navigation-button:is(:hover,:focus-visible),
html body#top.case-page[data-case-theme="dark"] #content .case-navigation>.case-navigation-button:is(:hover,:focus-visible) *{color:#1a1a1a!important}

html body#top.case-page[data-case-theme="dark"] #content .case-navigation>.case-navigation-button{
 background:#242424!important;--hover-base:#242424;--hover-fill:#f3f3f3;--hover-ink:#1a1a1a;
}