/* Explicit themes: appearance no longer depends on the device's dark mode. */
:root[data-theme]{color-scheme:dark;--paper:#141414;--ink:#f3f3ef;--muted:#b9b9b1;--line:#ffffff26;--glass-fill:linear-gradient(125deg,#39393791,#1c1c1b73);--glass-border:#ffffff29;--glass-highlight:#ffffff38;--surface:#222221c9}
:root[data-theme=copper]{--paper:#6a2d19;--ink:#fff4e6;--muted:#fff0df;--line:#ffd9b436;--glass-fill:linear-gradient(125deg,#ffd9b326,#7a301d38);--glass-border:#ffdeba50;--glass-highlight:#ffe3b780;--surface:#482113ae}
html[data-theme],html[data-theme] body{background:var(--paper);color:var(--ink)}
html[data-theme=copper] body{background:radial-gradient(ellipse at 72% 16%,#b55a2c 0,transparent 56%),radial-gradient(ellipse at 12% 88%,#a34224 0,transparent 55%),linear-gradient(145deg,#422015,#843b21 48%,#4b2117);background-attachment:fixed}
html[data-theme] .logo,html[data-theme] .brand img{filter:invert(1)}
html[data-theme] .ambient{background:radial-gradient(ellipse at 70% 28%,#242422 0,transparent 48%),radial-gradient(ellipse at 18% 72%,#30302b30 0,transparent 45%)}
html[data-theme=copper] .ambient{background:radial-gradient(ellipse at 75% 28%,#f3a45a2a,transparent 55%),radial-gradient(ellipse at 18% 75%,#cf602432,transparent 55%);animation:copper-drift 24s ease-in-out infinite alternate;transform-origin:center}
@keyframes copper-drift{from{transform:scale(1.02) translate(-1%,0)}to{transform:scale(1.12) translate(2%,-2%)}}
html[data-theme] .glass,html[data-theme] .theme-switch,html[data-theme] .collection-card{background:var(--glass-fill);border:1px solid var(--glass-border);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);box-shadow:0 10px 35px #00000026,inset 0 1px 0 #ffffff20,inset 0 -1px 0 #00000014;color:var(--ink)}
html[data-theme] .glass::before{background:radial-gradient(110px circle at var(--light-x,50%) var(--light-y,50%),var(--glass-highlight),transparent 75%)}
html[data-theme] dialog{background:var(--surface);border-color:var(--glass-border);color:var(--ink);backdrop-filter:blur(30px) saturate(145%);-webkit-backdrop-filter:blur(30px) saturate(145%);box-shadow:0 30px 100px #0006,inset 0 1px 0 #ffffff18}
html[data-theme] dialog::backdrop{background:#07070780;backdrop-filter:blur(16px)}
html[data-theme=copper] dialog::backdrop{background:#2a100e70}
html[data-theme] .collection-header{background:var(--surface);border-color:var(--line)}
html[data-theme] .photo-viewer,html[data-theme] .music-viewer{background:#151515ed;color:#fff}
html[data-theme] #panel-content p,html[data-theme] .collection-content .story-description,html[data-theme] .collection-label>span,html[data-theme] .header-note,html[data-theme] .focus-guide,html[data-theme] .metadata,html[data-theme] .sheet-top,html[data-theme] .collection-count,html[data-theme] .reel-note,html[data-theme] .reel-status,html[data-theme] .music-color{color:var(--muted)}
html[data-theme] .eyebrow,html[data-theme] .service-discovery a{color:var(--ink)}
html[data-theme] .language button{color:var(--muted)}html[data-theme] .language button[aria-pressed=true]{color:var(--ink)}html[data-theme] .language>span{color:var(--muted)}
html[data-theme] .dock .active{background:var(--ink);color:var(--paper)}html[data-theme] .dock button:not(.active):hover{background:#ffffff15}
html[data-theme] .collection-card:hover{background:var(--glass-fill);border-color:var(--glass-highlight);box-shadow:0 20px 45px #0004,inset 0 1px 0 #ffffff30}
html[data-theme] #panel-content .service-bubble{border-color:var(--glass-border);box-shadow:0 6px 22px #0003,inset 0 1px 0 #ffffff20}
html[data-theme] #panel-content .service-bubble:hover,html[data-theme] #panel-content .service-bubble:focus-visible{border-color:var(--glass-highlight);box-shadow:0 10px 30px #0004,0 0 22px #ffffff0c,inset 0 0 14px #ffffff15}
html[data-theme] #panel-content a,html[data-theme] .content-group,html[data-theme] .panel-cta,html[data-theme] .portfolio-story+.portfolio-story,html[data-theme] .music-credits{border-color:var(--line)}
html[data-theme] .fan-photo{border-color:#4a4842}html[data-theme=copper] .fan-photo{border-color:#754932}
html[data-theme] .skip{background:var(--paper);color:var(--ink)}
html[data-theme] .header-controls{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.theme-switch{position:relative;isolation:isolate;display:flex;gap:3px;padding:5px;border-radius:999px}
.theme-switch button{font:inherit;font-size:10px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:999px;min-height:34px;padding:0 12px}
.theme-switch button[aria-pressed=true]{background:#ffffff18;color:var(--ink);box-shadow:inset 0 0 0 1px #ffffff24}
.theme-switch button[data-theme-choice=copper]::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:#d87b41;box-shadow:0 0 8px #d87b4140}
.theme-switch button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
html[data-theme] .photo-rights,html[data-theme] .work-entry-index{color:var(--muted)}
/* Service pages share the selected palette and glass treatment. */
html[data-theme] .cta{background:var(--glass-fill);border:1px solid var(--glass-border);color:var(--ink);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 12px 35px #0003,inset 0 1px 0 #ffffff25}
html[data-theme=copper] .intro,html[data-theme=copper] .services,html[data-theme=copper] .territory,html[data-theme=copper] .portfolio,html[data-theme=copper] .faq,html[data-theme=copper] .closing{background:var(--glass-fill);border:1px solid var(--glass-border);border-radius:26px;backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);padding:clamp(24px,4vw,55px);margin-bottom:24px;box-shadow:0 15px 45px #0002,inset 0 1px 0 #ffffff20}
@media(max-width:600px){html[data-theme] .header-controls{gap:6px}.theme-switch button{padding:0 9px;font-size:9px;min-height:32px}.theme-switch{padding:4px}.header-controls .language{padding:6px 8px;gap:5px}html[data-theme] header{padding-inline:20px}.theme-switch button[data-theme-choice=copper]::before{margin-right:4px;width:5px;height:5px}}
@media(max-width:360px){html[data-theme] .header-controls{gap:4px}.theme-switch button{padding:0 7px;font-size:8px}.header-controls .language{padding:5px 6px}.wordmark{font-size:11px}}
@media(prefers-reduced-motion:reduce){html[data-theme=copper] .ambient{animation:none;transform:none}}