@import url('./font-supplement.css');
/* Preserve the existing palette/type/motion. English-specific layout only.
   Fixed utilities share layer 1000 with sound; lightbox remains above them. */
.language-toggle{position:fixed;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;padding:4px;border:0;border-radius:50%;color:#111;background:#f6f6f6;box-shadow:0 8px 24px #0003;font:700 10px/1 Arial,sans-serif;cursor:pointer;opacity:.95;transition:opacity .2s ease,transform .2s ease}
.language-toggle,.language-status{font-family:MiSans,"Microsoft YaHei",sans-serif}
.language-toggle__icon{display:block;width:24px;height:24px;pointer-events:none}
.language-toggle:hover{opacity:1;transform:translateY(-2px)}
.language-toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.language-toggle[aria-disabled="true"]{cursor:wait;opacity:.6}
.language-status{position:fixed;left:20px;bottom:76px;z-index:1000;max-width:260px;font:14px/1.5 MiSans,"Microsoft YaHei",sans-serif;background:#222;color:#fff;border-radius:8px}
.language-status:not(:empty){padding:12px}
[hidden]{display:none!important}
.album-fallback{min-height:70vh;padding:160px 24px 80px}
.album-fallback h1{font-size:clamp(36px,6vw,72px)}
.album-fallback p{max-width:55ch;margin-top:24px;line-height:1.6}
.album-fallback button{margin-top:24px;min-height:44px;border:1px solid #777;border-radius:24px;padding:10px 24px;background:#eee;color:#111}
html:lang(en) .hero__title .headline-text{white-space:normal;text-wrap:balance;font-size:clamp(36px,8vw,144px);line-height:1.05;letter-spacing:-.04em;max-width:14ch}
html:lang(en) .hero__tagline{max-width:40ch;text-wrap:balance;line-height:1.5}
html:lang(en) .hero__nav a{white-space:nowrap}
html:lang(en) :is(.work__name,.work__name-link,.case-title,.section__title,.outro__title){text-wrap:balance;overflow-wrap:normal;word-break:normal;letter-spacing:-.025em}
html:lang(en) :is(.work__blurb,.about__copy p:not(.about__sign),.text p,.notes p){line-height:1.6}
html:lang(en) .section-dock__link{white-space:normal;line-height:1.4}
html:lang(en) .section-dock__label{white-space:normal;line-height:1.3}
html:lang(en) .section-dock__pill{max-width:calc(100vw - 32px)}
html:lang(en) .next strong{overflow-wrap:anywhere}
html:lang(en) [data-site-footer] .outro__title{max-width:13ch;margin-inline:0;line-height:1.12}
html:lang(en) [data-site-footer] .outro__title span{font-size:inherit;line-height:inherit;white-space:normal}
@media(max-width:1023px){
  body[data-story] .language-toggle{bottom:calc(max(48px,env(safe-area-inset-bottom)) + 54px + 12px)}
  body[data-story] .language-status{bottom:170px}
  html:lang(en) body[data-story] .hero__title .headline-text{font-size:clamp(32px,8.5vw,76px);max-width:14ch;line-height:1.08}
  html:lang(en) .hero__nav a{padding-inline:clamp(10px,2.6vw,15px)}
  html:lang(en) .hero__nav{max-width:calc(100vw - 24px)}
  html:lang(en) [data-site-footer] .outro__title{font-size:clamp(36px,10vw,54px);max-width:100%}
}
.language-toggle{bottom:max(20px,env(safe-area-inset-bottom),var(--language-video-lift,0px))}
@media(max-width:1023px){body[data-story] .language-toggle{bottom:calc(max(48px,env(safe-area-inset-bottom)) + 54px + 12px)}}
@media(max-width:1023px) and (max-height:440px){
  body[data-story]:not(.locale-utilities-inline) .sound-toggle{bottom:calc(max(48px,env(safe-area-inset-bottom)) + 54px + 12px)}
  body[data-story].locale-utilities-inline .language-toggle{bottom:max(48px,env(safe-area-inset-bottom))}
  html:lang(en) body[data-story] .hero__title .headline-text{font-size:32px;max-width:none;line-height:1.08}
}
@media(prefers-reduced-motion:reduce){.language-toggle{transition:none}}

/* Shared neutral glass: exactly the section-dock material, on every route.
   Specificity intentionally wins over the sound module's injected styles. */
body :is(.language-toggle,.sound-toggle),
body .sound-toggle[aria-pressed="false"] {
  color:#0b0b0b;
  background-color:rgba(244,244,244,.62);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 8px 28px #0000004d,0 0 0 1px #ffffff12;
  opacity:1;
}
@media(hover:hover) {
  body :is(.language-toggle,.sound-toggle):hover {background-color:#f6f6f6f5;box-shadow:0 12px 40px #00000073,0 0 0 1px #ffffff17;}
}
@media(max-width:1023px) {
  body[data-story].locale-utilities-inline :is(.language-toggle,.sound-toggle) {
    bottom:calc(max(48px,env(safe-area-inset-bottom)) + var(--utility-dock-offset,5px));
  }
  body[data-story].locale-utilities-inline .language-toggle {left:max(12px,env(safe-area-inset-left));}
  body[data-story].locale-utilities-inline .sound-toggle {right:max(12px,env(safe-area-inset-right));}
  body[data-story].locale-utilities-inline .hero__title {padding-bottom:calc(max(48px,env(safe-area-inset-bottom)) + 54px + 24px);}
  html:lang(en) .featured__title {font-size:clamp(28px,10.5vw,104px);}
  html:lang(en) :is(.focus__title,.listening__title) {font-size:min(var(--display-size),17vw);}
}
html:lang(en) .featured__title .focus__mask {flex-shrink:0;}
@media(max-width:768px) {
  body:not([data-story]) .language-toggle {bottom:max(20px,env(safe-area-inset-bottom),var(--language-video-lift,0px),var(--utility-section-lift,0px));}
  body:not([data-story]) .sound-toggle {bottom:max(20px,env(safe-area-inset-bottom),var(--utility-section-lift,0px));}
}