/* Palette changes only: preserve the original editorial type and composition. */
:root{--surface:#fff;--text:#000;--rule:#000;--render-surface:#f4f4f4;color-scheme:light}
:root[data-theme=dark]{--surface:#111;--text:#f5f5f2;--rule:#888;--render-surface:#202020;color-scheme:dark;--white:#111;--black:#f5f5f2;--paper:#111;--ink:#f5f5f2}
body,.site-header,.intro-stage,main,.studio{background:var(--surface);color:var(--text)}
.site-header,.intro-meta,.section-topline,.studio,.studio-body,.studio-topics span,.intro-rule,.meta-grid,.chapter,.case-notes,.intro-upper,.project-rule,.chapter-heading,.people,.case-end,.back-projects,.teaser-label{border-color:var(--rule)}
.design-render{background:var(--render-surface)}
.site-tools{display:flex;align-items:center;gap:12px}
.site-tools button{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-size:10px;font-weight:800;letter-spacing:.06em;cursor:pointer;padding:6px 0;min-height:32px;min-width:24px;transition:opacity .2s}
.site-tools button:hover{opacity:.5}.site-tools button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.theme-toggle svg{display:block;width:16px;height:16px}.theme-toggle{display:grid;place-items:center}
#work,#studio,#contact{scroll-margin-top:68px}
.work{display:flow-root}.feature-project{margin-top:24px}
/* Keep black editorial panels and original asset colours in both modes. */
.work,.index-section,.contact,.motion,.campaign,.dark-gallery,.next{color:#fff}
.feature-project .project-image>img{object-position:center 48%}
.project--240 .project-image>img,.project--einsplus .project-image>img,.project--doctors .project-image>img,.project-tile .project-hover-still,.project-tile .project-motion{object-fit:contain}
.project--carwash .project-image>img{object-position:center 62%}
.index-preview img{object-fit:contain;background:#111}
/* Natural image proportions inside the existing staggered columns. */
.pair figure .frame,.pair figure:nth-child(2) .frame,.context-gallery .frame,.context-gallery figure:nth-child(2) .frame,.wide-close .frame{height:auto}
.frame img{height:auto;object-fit:contain}
.hero-artwork{min-height:0;margin-bottom:0}.hero-artwork img{height:auto;max-height:1050px;object-fit:contain}
.hero-artwork+.caption{margin-bottom:80px}
.motion-frame video{height:auto;max-height:880px;object-fit:contain}
html[data-project=carwash] .motion-frame video{width:min(100%,495px);margin:auto;aspect-ratio:9/16}
html[data-project=carwash] .hero-media img{object-position:center}
/* KVOD: same four chapters, full artwork and complete photographic frames. */
.logo-visual img{object-fit:contain}
.teaser-reel video{height:auto;max-height:1000px;min-height:0;aspect-ratio:9/16;object-fit:contain;align-self:center}
.motion-primary{min-height:0}.motion-primary video{height:auto;min-height:0;max-height:900px;aspect-ratio:9/16;object-fit:contain}
.original-phone{overflow:visible}.original-phone img{will-change:transform}
.space-photos .image-frame,.space-photos figure:nth-child(2) .image-frame,.people-grid figure:first-child .image-frame,.people-grid figure:nth-child(2) .image-frame,.dark-gallery-grid figure:first-child .image-frame,.dark-gallery-grid figure:last-child .image-frame{height:auto}
.image-frame img{height:auto}.logo-visual img{height:100%}
.site-motion video{height:auto;max-height:970px;object-fit:contain;aspect-ratio:9/16}
.closing-frame img{height:auto;object-fit:contain}
.recorded-sets{padding-top:80px}.sets-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:0 3.2% 135px}
.set-player{aspect-ratio:16/9;background:#090909;overflow:hidden}.set-player iframe{width:100%;height:100%;border:0;display:block}
.set-load{width:100%;height:100%;position:relative;border:0;padding:0;background:#090909;color:#fff;cursor:pointer}
.set-load>img{width:100%;height:100%;object-fit:cover;object-position:center 65%;opacity:.6;transition:opacity .35s}
.set-load:hover>img,.set-load:focus-visible>img{opacity:.8}
.set-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;border:1px solid #fff;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;padding-left:3px}
.set-label{position:absolute;left:20px;bottom:18px}.sets-grid .caption a{text-decoration:underline;text-underline-offset:3px}
/* A small shift and opacity change, with no hidden content or scroll hijacking. */
.index-row .row-number{transition:transform .25s}.index-row:hover .row-number{transform:translateX(3px)}
@media(prefers-reduced-motion:no-preference){
 body{transition:background-color .25s,color .25s}
 .site-header{transition:background-color .25s,color .25s}
 @supports(animation-timeline:view()){
  .pair figure,.context-gallery figure,.identity-top figure,.space-photos figure,.people-grid figure{animation:editorial-entry linear both;animation-timeline:view();animation-range:entry 0% entry 22%}
 }
 @keyframes editorial-entry{from{opacity:.82;translate:0 10px}to{opacity:1;translate:0 0}}
}
@media(max-width:900px){.header-nav,.header-links{gap:18px}.site-tools{gap:10px}}
@media(max-width:620px){
 .header-nav,.header-links{gap:11px}.header-nav a,.header-links a{font-size:8px;letter-spacing:.04em}
 .site-tools{gap:7px}.site-tools button{font-size:9px;min-width:20px}
 .header-brand,.header-logo{width:72px}
 .feature-project{margin-top:20px}
 #work,#studio,#contact{scroll-margin-top:58px}
 .pair figure .frame,.pair figure:nth-child(2) .frame,.context-gallery .frame,.context-gallery figure:nth-child(2) .frame,.wide-close .frame{height:auto}
 .hero-artwork img{height:auto}.hero-artwork+.caption{margin-bottom:45px}
 .sets-grid{grid-template-columns:1fr;padding:0 5% 90px;gap:38px}.recorded-sets{padding-top:40px}
 .teaser-reel video{height:auto;min-height:0;max-height:85svh}
 .site-motion video{height:auto;max-height:85svh}
 .project-tile .project-image>img,.project-tile .project-hover-still{transform:none}
}
@media(max-width:374px){.header-brand,.header-logo{width:58px}.header-nav,.header-links{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:620px){
 .section-meta{min-width:0;max-width:32%;overflow-wrap:anywhere}
}
.chapter-heading h2,.chapter h2{scroll-margin-top:90px}
.project--fastlane .project-image>img{object-fit:contain}
.chapter,.chapter-heading{grid-template-columns:24% minmax(0,1fr)}
.chapter h2,.chapter-heading h2,.motion-text h3,.motion-description h3,.next strong,.back-projects strong,.project-overlay strong{min-width:0;max-width:100%}
@media(min-width:621px) and (max-width:900px){.chapter{grid-template-columns:20% minmax(0,1fr)}}
.sets-grid .caption{flex-wrap:wrap}
h1[id],h2[id],h3[id]{scroll-margin-top:90px}
/* A single editorial line for CARWASH. The viewport scale also fits without JS;
   the existing heading-fit routine handles font and scrollbar differences. */
html[data-project=carwash] .intro h1{font-size:min(17.5vw,340px);white-space:nowrap;overflow-wrap:normal}

/* Keyboard bypass stays outside the visual composition until focused. */
.skip-to-content{position:fixed;left:3.2%;top:10px;transform:translateY(calc(-100% - 14px));z-index:10000;padding:12px 18px;background:var(--surface,#fff);color:var(--text,#000);border:1px solid currentColor;font:600 12px/1.4 var(--sans,Arial,sans-serif);text-decoration:none}
.skip-to-content:focus{transform:none;outline:2px solid currentColor;outline-offset:3px}
main[tabindex="-1"]{scroll-margin-top:86px}