/* Semantic page colors change. The physical glass recipe and photographs do not. */
:root { --brand-light:#f6f4f0; --brand-dark:#1a1a1a; --inverse-ink:246,244,240; }
::selection { color:var(--brand-dark); }
html[data-theme="dark"] { --light:#1a1a1a; --dark:#f6f4f0; --muted:#b7b3ad; --rule:rgba(246,244,240,.22); --orange-text:#df6f2a; --inverse-ink:246,244,240; color-scheme:dark; }
.brand-lockup { display:block; position:relative; width:100%; aspect-ratio:535 / 114; }
.brand-lockup img { position:absolute; inset:0; width:100%; height:100%; transition:opacity 180ms ease; }
.brand-lockup .logo-cream { opacity:0; }
.brand-lockup--inverse .logo-ink { opacity:0; }
.brand-lockup--inverse .logo-cream { opacity:1; }
html[data-theme="dark"] .brand-lockup .logo-ink { opacity:0; }
html[data-theme="dark"] .brand-lockup .logo-cream { opacity:1; }
html[data-theme="dark"] .brand-lockup--inverse .logo-ink { opacity:0; }
html[data-theme="dark"] .brand-lockup--inverse .logo-cream { opacity:1; }

/* Light mode keeps its editorial contrast. Dark mode keeps every page section dark. */
html[data-theme="dark"] :is(.detail-copy,.process,.footer) { background:var(--brand-dark); color:var(--brand-light); }
html[data-theme="dark"] .process-track { --dark:var(--brand-dark); }
html[data-theme="dark"] .footer-links a:is(:hover,[aria-current]) { color:var(--brand-light); }
.detail-copy>p:last-child,.process-intro>p { color:rgba(var(--inverse-ink),.68); }
.process .chapter,.process-step .eyebrow { color:rgba(var(--inverse-ink),.65); }
.process-track>span,.footer-contact>span,.footer-bottom { color:rgba(var(--inverse-ink),.64); }
.process-step p:last-child { color:rgba(var(--inverse-ink),.72); }
.process-track>div { background:rgba(var(--inverse-ink),.23); }
.process-step { border-bottom-color:rgba(var(--inverse-ink),.2); }
.motion-enhanced .process-step.draw-rule:not(:last-child)::after { border-bottom-color:rgba(var(--inverse-ink),.2); }
.footer-bottom { border-top-color:rgba(var(--inverse-ink),.16); }
.footer-links { color:rgba(var(--inverse-ink),.78); }
html[data-theme="dark"] :is(.process .chapter>span,.detail-copy .eyebrow,.step-index) { color:var(--orange); }
html[data-theme="dark"] .footer-contact>a:hover { color:var(--orange); }
html[data-theme="dark"] .field :is(input:not([type=file]),textarea) { border-bottom-color:rgba(246,244,240,.32); }
html[data-theme="dark"] .field :is(input,textarea):focus,html[data-theme="dark"] .field [aria-invalid] { border-bottom-color:var(--orange); }
html[data-theme="dark"] .drop-zone { border-color:rgba(246,244,240,.35); }
html[data-theme="dark"] .button { --glass-ink:246,244,240; }
.button__arrow { color:var(--brand-dark); }
.service-mark svg { width:30px; height:30px; color:var(--orange); }
.contact-label { display:flex; align-items:center; gap:10px; }
.contact-label svg { width:18px; height:18px; flex:none; color:var(--orange); }
.language-links { display:inline-flex; align-items:center; gap:9px; }
.language-links [aria-current] { color:var(--orange); }
html[lang="es-MX"] .hero-title { font-size:clamp(64px,9.1vw,160px); }
html[lang="es-MX"] .service-row h3 { font-size:clamp(30px,3vw,48px); }
html[lang="es-MX"] .process-track { gap:12px; }
html[lang="es-MX"] .process-track>span { font-size:9px; letter-spacing:.08em; }
@media(max-width:760px) { html[lang="es-MX"] .hero-title { font-size:clamp(48px,10.5vw,80px); } .service-mark svg { width:24px; height:24px; } .footer-links { flex-wrap:wrap; row-gap:12px; } }
.photo-topline,.photo-bottomline,.round-control { color:var(--brand-light); }
.photo-stage { background:var(--brand-dark); }
[data-glass-engine="solid"] [data-glass="photograph"] .glass-frost,[data-glass-engine="surface"] [data-glass="photograph"] .glass-frost { background:var(--brand-dark); }
.mobile-menu { color:var(--brand-dark); --rule:rgba(26,26,26,.18); --muted:#686661; --orange-text:#b0531a; }

/* The nav changes foreground, not frost. Its controls retain their satin layer. */
.nav-shell { --nav-ink:var(--brand-dark); --nav-halo:246,244,240; }
[data-nav-tone="light"] { --nav-ink:var(--brand-light); --nav-halo:26,26,26; }
[data-nav-tone="dark"] { --nav-ink:var(--brand-dark); --nav-halo:246,244,240; }
.site-header .desktop-nav a,.site-header.is-scrolled .desktop-nav a,.site-header .menu-toggle { color:var(--nav-ink); text-shadow:0 0 1px rgba(var(--nav-halo),1),0 0 2px rgba(var(--nav-halo),.95),0 1px 5px rgba(var(--nav-halo),.7); transition:color 180ms ease,text-shadow 180ms ease; }
.site-header .brand[data-nav-tone="light"] .logo-ink { opacity:0; }
.site-header .brand[data-nav-tone="light"] .logo-cream { opacity:1; }
.site-header .brand[data-nav-tone="dark"] .logo-ink { opacity:1; }
.site-header .brand[data-nav-tone="dark"] .logo-cream { opacity:0; }
.site-header.is-scrolled .brand img { filter:drop-shadow(0 0 2px rgba(var(--nav-halo),.7)); }
.site-header.is-scrolled .menu-toggle { filter:drop-shadow(0 0 1px rgba(var(--nav-halo),.9)); }
.site-header .nav-project { color:var(--nav-ink); }
.nav-project-short { display:none; }
.site-header .nav-project[data-nav-tone="light"],.site-header.is-scrolled .nav-project[data-nav-tone="light"] { background:rgba(26,26,26,.48); border-color:rgba(246,244,240,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.site-header .nav-project:is(:hover,[aria-current]),.site-header.is-scrolled .nav-project:is(:hover,[aria-current]) { background:rgba(26,26,26,.93); color:var(--brand-light); }
html[data-theme="dark"] .site-header:not(.is-scrolled) .nav-shell { --nav-ink:var(--brand-light); --nav-halo:26,26,26; }
html[data-theme="dark"] .site-header:not(.is-scrolled) .nav-project { border-color:rgba(246,244,240,.22); }

.theme-toggle { flex:none; position:relative; width:74px; height:40px; padding:0; border-radius:999px; color:var(--nav-ink); background:rgba(246,244,240,.48); border:1px solid rgba(26,26,26,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 1px 3px rgba(26,26,26,.035); transition:color 180ms,background 180ms,scale 180ms; }
.theme-toggle[data-nav-tone="light"] { background:rgba(26,26,26,.48); border-color:rgba(246,244,240,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.theme-toggle::after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(140deg,rgba(255,255,255,.8),transparent 40%,rgba(255,255,255,.2) 75%,rgba(255,255,255,.7)); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.theme-thumb { position:absolute; inset:3px auto 3px 3px; width:calc(50% - 4px); border-radius:999px; background:rgba(246,244,240,.7); box-shadow:inset 0 1px 1px #fffd,inset 0 -1px 1px #1a1a1a26,0 2px 5px #1a1a1a20; transform:translateX(0); transition:transform 520ms cubic-bezier(.22,1.18,.36,1); }
[data-theme="dark"] .theme-thumb { transform:translateX(calc(100% + 2px)); }
.theme-icon { position:absolute; top:0; bottom:0; width:50%; display:grid; place-items:center; opacity:.65; }
.theme-icon svg { width:18px; height:18px; }
.theme-icon--moon { right:0; }
.theme-icon--sun { left:0; color:var(--brand-dark); opacity:1; }
[data-theme="dark"] .theme-icon--sun { color:var(--nav-ink); opacity:.65; }
[data-theme="dark"] .theme-icon--moon { color:var(--brand-dark); opacity:1; }
.theme-toggle:active { scale:.92; }
.theme-toggle:focus-visible { outline-offset:4px; }
@media(max-width:1120px) { .nav-shell { gap:17px; } .desktop-nav { gap:18px; } }
@media(max-width:1000px) { .desktop-nav { display:none; } .menu-toggle { display:flex; min-width:24px; min-height:44px; justify-content:center; } .menu-toggle>span:first-child { display:none; } .nav-project { margin-left:auto; } }
@media(max-width:760px) { .nav-shell { gap:13px; } .theme-toggle { width:66px; height:36px; } .theme-icon svg { width:17px; height:17px; } }
@media(max-width:440px) { .nav-shell { gap:9px; } .brand { width:105px; } .site-header.is-scrolled .nav-shell { padding-inline:14px; } .site-header.is-scrolled .nav-project { padding-inline:9px; } .nav-project-label { display:none; } .nav-project-short { display:inline; } }
@media(max-width:380px) { .nav-shell { gap:7px; } .brand { width:88px; } .site-header.is-scrolled .nav-project { font-size:12px; padding-inline:6px; } .site-header.is-scrolled .nav-shell { padding-inline:10px; } .theme-toggle { width:58px; height:34px; } }
[data-glass-engine="solid"] .mobile-menu,[data-glass-engine="surface"] .mobile-menu { color:var(--dark); --rule:color-mix(in srgb,var(--dark) 22%,transparent); --muted:var(--dark); }
html[data-theme="dark"]:is([data-glass-engine="solid"],[data-glass-engine="surface"]) .mobile-menu { --orange-text:#df6f2a; }

/* A pulled leading edge reveals the real new colors and letters together. No
   inverse filter, image recoloring, cloned page, or named glass backdrop root. */
html[data-theme-changing="reveal"]::view-transition-group(root) { animation:none; z-index:0; }
html[data-theme-changing="reveal"]::view-transition-old(root),html[data-theme-changing="reveal"]::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
html[data-theme-changing="reveal"]::view-transition-new(root) { z-index:2; }
html[data-theme-changing="reveal"]::view-transition-old(root) { z-index:1; }
/* Only the small switch pieces leave the page snapshot. The nav and its optical
   material stay in the root. Keep the icons above the moving glass thumb. */
html[data-theme-changing="reveal"] .theme-thumb { view-transition-name:dohs-theme-thumb; transition:none; }
html[data-theme-changing="reveal"] .theme-icon--sun { view-transition-name:dohs-theme-sun; }
html[data-theme-changing="reveal"] .theme-icon--moon { view-transition-name:dohs-theme-moon; }
html[data-theme-changing="reveal"]::view-transition-group(dohs-theme-thumb) { z-index:1; animation-duration:520ms; animation-timing-function:cubic-bezier(.22,1.18,.36,1); }
html[data-theme-changing="reveal"]::view-transition-group(dohs-theme-sun),html[data-theme-changing="reveal"]::view-transition-group(dohs-theme-moon) { z-index:2; animation-duration:180ms; }
html[data-theme-changing="reveal"]::view-transition-old(dohs-theme-thumb) { display:none; }
html[data-theme-changing="reveal"]::view-transition-new(dohs-theme-thumb) { animation:none; }
html[data-theme-changing="reveal"]::view-transition-image-pair(dohs-theme-thumb) { transform-origin:center; animation:theme-thumb-liquid 520ms cubic-bezier(.22,.65,.3,1) both; }
@keyframes theme-thumb-liquid {
  0%,100% { scale:1 1; }
  28% { scale:1.16 .86; }
  72% { scale:.94 1.05; }
  88% { scale:1.02 .99; }
}
/* Freeze only theme-dependent colors and logo opacity. Slideshow dissolves,
   lens highlights, active-line travel and the switch keep their own motion. */
html[data-theme-changing] :is(.brand-lockup img,.site-header .desktop-nav a,.site-header .menu-toggle,.nav-project,.field input,.field textarea,.drop-zone,.closing-arrow) { transition:none!important; }
html[data-theme-changing] :is(.theme-toggle,.button) { transition-property:transform,scale!important; }
html[data-theme-changing="reveal"] .theme-toggle { scale:1; transition:none!important; }
html[data-theme-changing] .nav-shell { transition-property:padding!important; }
html[data-theme-changing] .cursor { visibility:hidden!important; }
@media(prefers-reduced-motion:reduce) { .theme-icon,.theme-toggle,.theme-thumb,.brand-lockup img,html[data-theme-changing] .theme-thumb { transition:none!important; } }
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) { .mobile-menu { color:var(--dark); --muted:var(--dark); } [data-glass="photograph"] .glass-frost { background:var(--brand-dark)!important; } }
@media(forced-colors:active) { .theme-toggle,.theme-toggle[data-nav-tone="light"] { background:ButtonFace; color:ButtonText; border:1px solid ButtonText; box-shadow:none; } .theme-toggle::after { display:none; } .site-header .desktop-nav a,.site-header.is-scrolled .desktop-nav a,.site-header .menu-toggle,.site-header .nav-project { color:LinkText; text-shadow:none; filter:none; } .site-header.is-scrolled :is(.brand img,.menu-toggle) { filter:none; } }
@media print {
  html[data-theme] { --light:#fff; --dark:#000; --muted:#333; --rule:#aaa; --inverse-ink:0,0,0; color-scheme:light; }
  body,.detail-copy,.process,.footer { background:white!important; color:black!important; }
  .site-header,.hero-photograph,.detail-photo,.project-aside figure,.brand-entry,.theme-toggle,.context-menu,.context-status,.process-track,.button__arrow,img,svg,canvas { display:none!important; }
  .detail-spread,.process-grid { display:block; }
  .detail-copy { padding:24px var(--gutter); }
  .process-intro { position:static; }
  .section-space { padding-block:32px; }
  .reveal { opacity:1!important; transform:none!important; clip-path:none!important; }
}