/* Shared site chrome. Artwork and self-contained game scenes keep their palettes. */
:root { --theme-muted:#656761; --theme-raised:#eeede8; --theme-field:#fff; --theme-focus:#3457d5; }
html[data-theme="dark"] { color-scheme:dark; --paper:#151618; --ink:#f0efeb; --line:#3c3e44; --blue:#9faaff; --theme-muted:#b6b8c0; --theme-raised:#202226; --theme-field:#292c32; --theme-focus:#b3bdff; scrollbar-color:#6c707b var(--paper); }
.theme-toggle { appearance:none; display:inline-grid; place-items:center; position:relative; flex:none; width:44px; height:44px; padding:0; margin:0; border:0; border-radius:24px; background:transparent; color:inherit; cursor:pointer; touch-action:manipulation; }
.theme-toggle-icon { display:block; overflow:visible; pointer-events:none; }
.theme-toggle-cutout { transform:translate(-10px,-10px); transition:transform .4s cubic-bezier(.22,1,.36,1); }
.theme-toggle-rays { opacity:1; transform:rotate(0deg) scale(1); transform-origin:12px 12px; transition:opacity .25s ease-out,transform .4s cubic-bezier(.22,1,.36,1); }
.theme-toggle-disc { transform:scale(1); transform-origin:12px 12px; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.theme-toggle[aria-checked="true"] .theme-toggle-cutout { transform:translate(0,0); }
.theme-toggle[aria-checked="true"] .theme-toggle-rays { opacity:0; transform:rotate(-45deg) scale(.6); }
.theme-toggle[aria-checked="true"] .theme-toggle-disc { transform:scale(1.4); }
.theme-toggle:focus-visible { outline:2px solid var(--theme-focus); outline-offset:1px; }
.site-header.has-theme-toggle { display:grid; grid-template-columns:30px minmax(0,1fr) auto 44px; column-gap:clamp(12px,2vw,28px); }
.site-header.has-theme-toggle .monogram { grid-column:1; grid-row:1; }
.site-header.has-theme-toggle nav { grid-column:2; grid-row:1; justify-self:end; margin:0!important; gap:clamp(14px,2.5vw,36px); }
.site-header.has-theme-toggle .language-switch { grid-column:3; grid-row:1; font-size:11px; }
.site-header.has-theme-toggle .theme-toggle { grid-column:4; grid-row:1; }
.page-back-bar.has-theme-toggle { justify-content:space-between; }
html[data-theme="dark"] ::selection { background:#5064ff; color:#fff; }
html[data-theme="dark"] :focus-visible { outline-color:var(--theme-focus); }
html[data-theme="dark"] body:not(.ozon-editorial) { background:var(--paper); color:var(--ink); }
html[data-theme="dark"] .site-header .monogram-light { opacity:0!important; }
html[data-theme="dark"] .site-header .monogram-dark { opacity:1!important; }
html[data-theme="dark"] .site-header.is-compact { --paper:#202226; --ink:#f0efeb; --line:#3c3e44; border-color:var(--line); background:var(--paper)!important; }
html[data-theme="dark"] .language-switch a:not(.is-active) { opacity:.72; }
html[data-theme="dark"] .site-header nav a:focus-visible,
html[data-theme="dark"] .language-switch a:focus-visible { outline:2px solid var(--theme-focus); outline-offset:5px; }
@media (max-width:720px) {
  .site-header.has-theme-toggle { grid-template-columns:30px minmax(0,1fr) auto 44px 40px; grid-template-rows:1fr; column-gap:6px; }
  .site-header.has-theme-toggle nav { grid-column:1 / -1; grid-row:auto; }
  .site-header.has-theme-toggle .header-menu-toggle { grid-column:5; grid-row:1; color:inherit; }
  html[data-theme="dark"] .site-header.has-mobile-menu nav { --ink:#f0efeb; background:var(--theme-raised); color:var(--ink); border-color:var(--line); }
  html[data-theme="dark"] .site-header.has-mobile-menu nav a:is(:hover,:focus-visible,.is-active) { background:#343741; }
}
/* Homepage */
html[data-theme="dark"] .hero.home-hero { background:var(--paper); }
html[data-theme="dark"] :is(.home-position > p,.home-current-mobile,.home-section-heading > p,.home-case-copy,.home-case-role,.home-more-grid p,.home-experience .role,.home-experience .job-period) { color:var(--theme-muted); }
html[data-theme="dark"] .hero-intro-link { background:transparent; border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] .hero-intro-link.hero-cta--reveal { border-color:transparent; }
/* One animated shell owns both fill and stroke in BOTH themes. */
.hero-intro-link.hero-cta--reveal::before { box-sizing:border-box; }
.hero-intro-link.hero-cta--reveal:is(:hover,:focus-visible) { background:transparent; }
html[data-theme="dark"] .hero-intro-link.hero-cta--reveal::before { background:var(--theme-raised); border-color:#777b86; }
html[data-theme="dark"] .hero-intro-link:is(:hover,:focus-visible) { color:var(--paper); box-shadow:none; }
html[data-theme="dark"] .hero-intro-link.hero-cta--reveal:is(:hover,:focus-visible)::before { background:var(--ink); }
html[data-theme="dark"] .home-process-links { stroke:#c3c7d2; }
html[data-theme="dark"] :is(.home-case-image,.home-lab-image,.home-lab-image::before) { background:var(--theme-raised); }
html[data-theme="dark"] .home-lab-image { box-shadow:0 8px 20px #0006; }
html[data-theme="dark"] .home-footer,
html[data-theme="dark"] body.home-page>footer.home-footer { background:#101113; color:#f0efeb; }
html[data-theme="dark"] .home-footer-bottom { border-color:var(--line); }
html[data-theme="dark"] .hero-svg-ball { fill:#30333c; stroke:#b2b7c3; }
html[data-theme="dark"] .hero-svg-ball--outline { opacity:.55; }
html[data-theme="dark"] .hero-svg-ball--solid { fill:#99a4ff; stroke:#bbc3ff; opacity:.9; }
html[data-theme="dark"] .hero-svg-ball--soft { fill:#626875; stroke:#b2b7c3; opacity:.7; }
/* Case study reading surfaces; printed designs, PDFs, swatches remain original. */
.medelive-logo, html[data-theme="dark"] .medelive-logo .medelive-copy { background:#fff; color:#151515; }
.medelive-logo { --ink:#151515; }
.medelive-case .medelive-logo { box-sizing:border-box; width:100%; padding-inline:var(--page-gutter); }
.madeline-case :is(.madeline-lockups,.madeline-logo-details,.madeline-palette,.madeline-pattern) { --ink:#151515; background:#fff; color:#151515; }
html[data-theme="dark"] .madeline-application-copy { padding-top:clamp(72px,9vw,125px); }
html[data-theme="dark"] .case-page[data-case="ozon-bank"] .site-header .monogram-light { opacity:0!important; }
html[data-theme="dark"] .case-page[data-case="ozon-bank"] .site-header .monogram-dark { opacity:1!important; }
html[data-theme="dark"] .ozon-editorial .oz-case-footer, .ozon-editorial .oz-case-footer { display:flex; justify-content:space-between; gap:24px; padding:28px var(--page-gutter,5.5vw); background:var(--oz-stage); color:#f6f5f1; font-size:14px; font-weight:600; }
.oz-case-footer a { padding-block:12px; text-decoration:none; }
.oz-case-footer a:last-child { text-align:right; }
.oz-case-footer a:hover { text-decoration:underline; text-underline-offset:5px; }
@media(max-width:720px) { .ozon-editorial .oz-case-footer { font-size:12px; gap:16px; } }
html[data-theme="dark"] figure:has(>img[src$="quartier-logo-construction.png"]) { background:var(--paper); isolation:isolate; }
html[data-theme="dark"] img[src$="quartier-logo-construction.png"] { filter:invert(1); mix-blend-mode:screen; }
html[data-theme="dark"] :is(.case-story,.case-gallery,.case-facts,.csgroup-case,.madeline-case,.medelive-case,.medelive-copy,.case-pdf-head) { background:var(--paper); color:var(--ink); }
html[data-theme="dark"] :is(.case-type,.case-facts span,.case-story-cards p,.gpb-viewer figcaption,.logo-lightbox figcaption,.projects-page .eyebrow) { color:var(--theme-muted); }
html[data-theme="dark"] .project-row p { color:var(--theme-muted)!important; }
html[data-theme="dark"] .project-row:hover { background:var(--theme-raised); color:var(--ink); }
html[data-theme="dark"] .project-row:hover p { color:var(--ink)!important; }
html[data-theme="dark"] :is(.gpb-viewer,.logo-lightbox,.case-pdf-mobile-controls,.case-pdf-mobile-status) { background:var(--theme-raised); color:var(--ink); }
html[data-theme="dark"] :is(.gpb-viewer-nav,.logo-lightbox-nav):is(:hover,:focus-visible) { background:var(--ink); color:var(--paper); }
html[data-theme="dark"] .case-story-slider-dots button::after { background:#727782; }
html[data-theme="dark"] .case-story-slider-dots button.is-active::after { background:var(--ink); }
/* Experiment catalogue and tools. No filters on raster covers or canvases. */
/* Panama's cream game panels keep their own dark ink in either site theme. */
.panama-prix { --ink:#10191a; color:#10191a; }
.prix-dialog h1 { color:inherit; }
html[data-theme="dark"] .panama-prix-page .case-back-link { color:var(--ink); }
html[data-theme="dark"] .experiment-cover--placeholder { background:var(--theme-raised)!important; color:var(--theme-muted); }
html[data-theme="dark"] :is(.experiment-card-label span:last-child,.experiment-card--placeholder .experiment-card-label,.soon-copy span,.generator-surprise output,.liquid-sphere-note span) { color:var(--theme-muted); }
html[data-theme="dark"] :is(.generator-shell,.generator-text textarea) { background:var(--theme-field); color:var(--ink); }
html[data-theme="dark"] :is(.generator-presets button,.generator-actions button):is(:hover,:focus-visible),
html[data-theme="dark"] .generator-surprise button,
html[data-theme="dark"] .liquid-shape-presets button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
/* Metro controls follow the site theme, independent of the map's own clock. */
html[data-theme="dark"] .mt { --mt-ink:#f0efeb; --mt-paper:#202226; --mt-line:#4d515b; --mt-muted:#b6b8c0; --mt-edge:#4d515b; }
html[data-theme="dark"] :is(.mt-panel,.mt-time,.mt-views-toggle,.mt-reset,.mt-layers,.mt-credit) { background:#202226f5; color:var(--mt-ink); }
html[data-theme="dark"] :is(.mt-collapse,.mt-field input,.mt-suggest,.mt-swap,.mt-sheet-toggle) { background:var(--theme-field); color:var(--mt-ink); border-color:var(--mt-line); }
html[data-theme="dark"] :is(.mt-tabs,.mt-depthbar,.mt-tag--muted,.mt-time-now) { background:#343741; }
html[data-theme="dark"] :is(.mt-field label,.mt-game legend,.mt-card-line,.mt-card-depth span,.mt-route-meta,.mt-legs li span,.mt-bridges-head p,.mt-bridge span,.mt-notes small) { color:var(--theme-muted); }
html[data-theme="dark"] :is(.mt-collapse,.mt-sheet-toggle,.mt-time-play,.mt-time-now,.mt-layer,.mt-bridge):hover,
html[data-theme="dark"] .mt-suggest li:is(:hover,[aria-selected=true]) { background:#3d414b; }
html[data-theme="dark"] .mt-button--primary:hover { background:#d3d7e4; }
html[data-theme="dark"] .mt-card-note { background:#492c29; color:#ffcac1; }
html[data-theme="dark"] .mt-bridge.is-open small { color:#f0c46c; }
/* Map labels remain readable over daytime scenery; game HUD keeps dark ink. */
html[data-theme="dark"] .mt-label { color:#151515; }
html[data-theme="dark"] .mt-label i { color:#64635d; }
html[data-theme="dark"] .mt-hud { color:#f0efeb; }
html[data-theme="dark"] :is(.mt-pedal--throttle,.mt-hud-toast,.mt-hud-result .mt-button--primary) { color:#151515; }
@media print { .theme-toggle { display:none; } }
@media(max-width:360px) { .experiments-heading h1 { font-size:34px; } }
@media (prefers-reduced-motion:reduce) { .site-header.has-theme-toggle, .theme-toggle-cutout, .theme-toggle-rays, .theme-toggle-disc { transition:none!important; } }