/* Typography pass — neo-grotesk system after the approved reference:
   display = large, regular weight, tight negative tracking, near-white;
   labels = small caps-style uppercase, wide tracking; body = plain sentence case, no tracking, warm grey;
   index numerals in muted red. Loaded last so it overrides section styles. */
:root{--lw-grotesk:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;--lw-display:#ece8df;--lw-body:#a9a398;--lw-num:#9b2e2a}
body{font-family:var(--lw-grotesk)}

/* Display headings */
.section h1,.section h2,.company h2,.sn-copy h2,
.z-name,.z-silence h2,.z-mutation h2,.z-head h2,.z-cta h2,.z-ch h2,.z-method h2,
.ab-hero h1,.ab-cta h2,#detail-title{font-family:var(--lw-grotesk)!important;font-weight:400!important;letter-spacing:-.045em!important;line-height:.98!important;color:var(--lw-display)}
.section h1,.section h2,.sn-copy h2,.company h2{font-size:clamp(40px,5.4vw,84px)}
.z-name{letter-spacing:-.055em!important;line-height:.86!important}
.z-silence h2,.z-mutation h2{letter-spacing:-.05em!important;line-height:.9!important}

/* Mid-size uppercase titles (list items, principles, collaborators) */
.sn-services strong,.z-principles strong,.z-collabs strong,.tg-cap strong,.co-social span,.ab-collabs strong{font-family:var(--lw-grotesk)!important;font-weight:400!important;letter-spacing:-.02em!important;color:var(--lw-display)}
.sn-services strong{font-size:20px}
.z-principles strong{letter-spacing:-.035em!important}

/* Small labels — wide tracking uppercase */
.eyebrow,.z-kicker,.caption,nav a,.menu-label,.tg-cap small,.tg-status,.co-row dt,.z-facts dt,.co-social em{font-family:var(--lw-grotesk);letter-spacing:.22em}
.z-kicker{color:#a9a398}

/* Body copy — sentence case, no tracking */
.copy,.sn-copy .copy,.sn-services p,.co-row dd,.z-story-body p,.z-profile-lede,.z-timeline p,.z-awards dd,.z-ch p:last-child,.z-method p:last-child,.ab-bio-text p,.ab-timeline p,.ab-awards li,#detail-description,.z-cta>p:not(.z-note){font-family:var(--lw-grotesk);letter-spacing:0!important;color:var(--lw-body);font-weight:400}
.copy,.sn-copy .copy{font-size:clamp(16px,1.3vw,20px);line-height:1.6}
.z-story-body .z-em,.z-story-body .z-lines{font-family:var(--lw-grotesk)!important;font-weight:400!important;letter-spacing:-.01em!important;line-height:1.55!important;color:var(--lw-display)!important}

/* Index numerals in muted red */
.z-ch-no,.z-kicker span,.sn-services span,.tg-era-label b{color:var(--lw-num)!important;font-family:var(--lw-grotesk)!important;letter-spacing:.14em}
.z-ch-no{font-size:14px!important;padding-top:6px}
.z-timeline span,.z-awards dt,.ab-timeline span,.ab-awards dt{font-family:var(--lw-grotesk)!important;font-weight:400;letter-spacing:-.03em!important;color:var(--lw-display)!important}

/* Press / practice lists */
.z-press li,.ab-press li,.z-practice li{font-family:var(--lw-grotesk)!important;letter-spacing:.06em!important}

/* CJK: never tighten tracking on Chinese / Japanese headings */
html:is([data-lang=ja],[data-lang=zh],[lang=zh-CN],[lang=ja]) :is(.section h1,.section h2,.company h2,.sn-copy h2,.z-head h2,.z-cta h2,.z-ch h2,.z-method h2,#detail-title){letter-spacing:.02em!important;line-height:1.3!important}
html:is([lang=zh-CN],[lang=ja]) .z-title{font-family:var(--lw-grotesk),"Noto Sans SC","Noto Sans JP",sans-serif!important;font-weight:300;letter-spacing:.02em!important}

/* Category names (plinths, menu, detail title, filters) — live text in the grotesk */
.lw-type{font-family:var(--lw-grotesk);font-weight:400;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:inherit}
.hotspot .lw-type.plinth-label{font-size:clamp(9px,.85vw,13px);letter-spacing:.22em;color:#d9d3c7;text-shadow:0 1px 6px #000}
#detail-title .lw-type{font-size:clamp(34px,4vw,60px);letter-spacing:-.045em;line-height:1;color:var(--lw-display);white-space:normal}
.hero-bottom,.hero-bottom a,.hero-bottom button,#menu-panel a,#menu-panel .menu-field,#lang-btn,#lang-menu button{font-family:var(--lw-grotesk)!important}
#menu-panel a,#menu-panel .menu-field{letter-spacing:.16em}

/* Concept copy pass — hero lede, interval, principles */
.zh2 .z-title{max-width:22em;text-wrap:pretty}
.zh2 .z-hero-lede{margin-top:clamp(20px,2vw,30px)!important;max-width:32em;font-family:var(--lw-grotesk),"Noto Sans SC","Noto Sans JP",sans-serif;font-size:clamp(15px,1.1vw,18px);line-height:1.9;letter-spacing:0;color:var(--lw-body);text-wrap:pretty}
.zh2 .z-story-body p{text-wrap:pretty}
.zh2 .z-story-body p+p{margin-top:.2em}
.zh2 .z-title{text-wrap:balance}
.zh2 .z-interval .z-story-body{max-width:44em}
.zh2 .z-principles li span{display:block;margin-top:12px;font-family:var(--lw-grotesk),"Noto Sans SC","Noto Sans JP",sans-serif;font-size:clamp(14px,1vw,16px);line-height:1.8;letter-spacing:0;color:var(--lw-body);text-wrap:pretty}
html:is([lang=zh-CN],[lang=ja]) .z-principles strong{letter-spacing:.04em!important;line-height:1.4}
html:is([lang=zh-CN],[lang=ja]) .zh2 .z-hero-lede,html:is([lang=zh-CN],[lang=ja]) .zh2 .z-story-body p{letter-spacing:.03em}
@media(max-width:700px){.zh2 .z-title{font-size:20px!important;line-height:1.7}.zh2 .z-hero-lede{font-size:15px}}

.zh2 .z-timeline p,.zh2 .z-profile-lede{text-wrap:pretty}
/* CJK title no-balance */
html:is([lang=zh-CN],[lang=ja]) .zh2 .z-title{text-wrap:wrap;word-break:keep-all}

/* Layout audit 2026-10-01: keep navigation and text within the available width. */
html[data-lang=ja],html[lang=ja]{--lw-grotesk:"Helvetica Neue",Arial,"Noto Sans JP","Yu Gothic","Meiryo",sans-serif}
html[data-lang=zh],html[lang=zh-CN]{--lw-grotesk:"Helvetica Neue",Arial,"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif}
header nav>a{white-space:nowrap}
.co-row dd,.co-social a,.z-cta a{overflow-wrap:anywhere;min-width:0}
@media(min-width:801px) and (max-width:1100px){
 header{flex-wrap:wrap;gap:16px;padding-top:22px;padding-bottom:18px}
 header nav,.about-page header nav{width:100%;justify-content:flex-end;gap:clamp(12px,2.5vw,26px)}
 .about-page .z-hero{padding-top:160px}
}
@media(max-width:1100px){
 .tg-rail{grid-auto-columns:minmax(90px,1fr);overflow-x:auto;max-width:100%;padding-bottom:8px}
}
@media(max-width:800px){
 header{gap:8px;padding:18px 5%}
 header .brand-mark{width:min(160px,calc(100vw - 205px))}
 header nav,.about-page header nav{flex:0 0 auto;gap:2px}
 .about-page header nav>a[aria-current=page]{display:none}
 header #menu{margin:0;flex-shrink:0}
 header .moon-switch{margin:0}
 header #sound-btn{margin:0;padding:10px 6px}
 header #sound-btn .st{display:none}
 #lang-menu{right:0}
}
@media(max-width:700px){
 .section-head{align-items:flex-start;flex-direction:column;gap:8px}
 .section-head h1{margin-bottom:8px}
 .section-head .caption{max-width:32em;margin-bottom:18px;line-height:1.7;letter-spacing:.12em}
 .co-social a{gap:12px;flex-wrap:wrap}
 .z-name{line-height:.98!important}
 .z-silence h2,.z-mutation h2{line-height:1.08!important}
}

/* Company information: natural title wrapping and readable mobile details. */
.section.information #studio h2{max-width:18em;margin-bottom:32px}
.co-col{min-width:0}
@media(max-width:520px){
 .section.information{padding-top:60px;padding-bottom:64px}
 .section.information #studio h2{margin:14px 0 28px;font-size:30px!important;line-height:1.3!important}
 .co-grid{gap:40px;margin-top:0}
 .co-row{grid-template-columns:minmax(0,1fr);gap:7px;padding:18px 0}
 .section.information #studio .co-row dt{padding:0;letter-spacing:.1em!important;font-family:var(--lw-grotesk)!important}
 .co-row dd{font-size:14px;line-height:1.75}
 .co-social a{align-items:flex-start;flex-direction:column;gap:8px;padding:17px 0}
 .co-social em{letter-spacing:.08em;font-size:10px}
}


/* Copyright closes the studio information section. */
#studio .studio-copyright{margin:56px 0 0;padding-top:24px;border-top:1px solid #ffffff18;font-size:10px;line-height:1.8;letter-spacing:.12em;color:#9e978b}
@media(max-width:520px){#studio .studio-copyright{margin-top:40px;padding-top:20px}}

.mobile-profile-link,.touch-light-hint{display:none}
@media(max-width:800px){
 .mobile-profile-link{display:flex;position:absolute;right:5%;bottom:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;min-height:58px;font-size:10px;letter-spacing:.12em;color:#d9d3c7;text-align:left}
 .mobile-profile-link .founder-label{font-size:9px;letter-spacing:.06em;color:#aaa397}
 .mobile-profile-link:focus-visible{outline:1px solid #b9aa8a;outline-offset:2px}
 .touch-light-hint{display:block;margin:0 6% 8px;font-size:10px;line-height:1.7;letter-spacing:.06em;color:#aaa397}
 .hotspot.is-lit{color:#fff0cf!important;box-shadow:inset 0 -1px #d7bd8b}
}

@media(max-width:520px){.hero #hotspots .mobile-profile-link{position:static;order:1;min-width:0;width:100%;height:58px;border-bottom:1px solid #ffffff24}}

/* Field detail: "exhibition room coming soon" line (hero plinths only). */
#detail-soon{display:flex;align-items:center;gap:12px;margin:22px 0 26px;font-family:var(--lw-grotesk);font-size:11px;line-height:1.6;letter-spacing:.22em;text-transform:uppercase;color:#c9b894}
#detail-soon:before{content:'';flex:none;width:22px;height:1px;background:#c9b894}
#detail-soon[hidden]{display:none}
#detail-soon:lang(ja),#detail-soon:lang(zh){font-size:12px;letter-spacing:.08em;text-transform:none}
/* Touch: pressing a plinth lights its beam at once — no long-press callout, selection or tap delay. */
@media(hover:none),(pointer:coarse){.hotspot{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}}

/* Audit 2026-10-02: declare the page as dark (stops forced/auto dark modes in WeChat, Samsung Internet and Chrome from recolouring it); no iOS landscape text inflation. */
:root{color-scheme:dark}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Print / Save as PDF: dark-on-white, no canvases or controls (2026-10-02). */
@media print{
 html,body{background:#fff!important;color:#111!important}
 *,*::before,*::after{color:#111!important;text-shadow:none!important;box-shadow:none!important;background-color:transparent!important;border-color:#cfcfcf!important;animation:none!important;transition:none!important}
 canvas,video,dialog,#sound-btn,#menu,#menu-panel,.lang,.skip,#motion,.hero-bottom,.sn-svg,.tg-stage,.tg-prev,.tg-next,.mobile-profile-link,.touch-light-hint,.eclipse-crown,.eclipse-emission,.exhibit-light{display:none!important}
 .brand-mark img,img[src*="press/vogue"],img[src*="press/vice"],img[src*="press/wwdjapan"]{filter:invert(1)!important}
 img[src*="press/dazed"],img[src*="press/schon"],img[src*="press/showstudio"],img[src*="press/japantimes"]{filter:none!important}
 img{max-width:100%!important;break-inside:avoid}
 h1,h2,h3{break-after:avoid}
 a{text-decoration:underline}
}