/* Direct correspondence to 09-layer-proof/desktop.css + responsive.css.
   All text sizes come from the approved TOP scale; --tu uses the same desktop scaling. */
:root{
 --tu:min(calc(100vw / 1440),calc(100svh / 800));
 --font-hero:calc(60*var(--tu));--font-section:calc(var(--type-section)*var(--tu));
 --font-message:calc(var(--type-message)*var(--tu));--font-card:calc(var(--type-card)*var(--tu));
 --font-statement:calc(var(--type-statement)*var(--tu));--font-lead:calc(var(--type-lead)*var(--tu));
 --font-body:calc(var(--type-body)*var(--tu));--font-meta:calc(var(--type-meta)*var(--tu));--font-note:calc(var(--type-note)*var(--tu));
 --font-jobs:calc(168*var(--tu));--font-marquee:calc(250*var(--tu))
}
.hero-copy .hero-catch{font-size:var(--font-hero);font-weight:700;letter-spacing:0}
.hero-role{font-size:var(--font-meta)}
.hero-lead{font-size:var(--font-lead)}
.entry-message h2,.concept-content h2{font-size:var(--font-message)}
.concept-copy{font-size:var(--font-body)}
.role-name,.role-copy h3{font-size:var(--font-card)}
.roles-heading h2,.paper-title,.recruit h2{font-size:var(--font-section)}
.jobs-word{font-size:var(--font-jobs)}
.marquee-track{font-size:var(--font-marquee);font-weight:400;letter-spacing:.07em;-webkit-text-stroke-width:1.2px}
.role-detail>summary,.role-options span{font-size:var(--font-meta)}
.role-copy>p:last-child,.detail-inner,.reader .interview-answer p{font-size:var(--font-body)}
.duty-list h4,.experience h4,.recruit-detail>summary,.reader .interview-answer h4,.selection-flow strong{font-size:var(--font-statement)}
.person-paper blockquote{font-size:var(--font-card);line-height:1.5}
.person-meta strong{font-size:var(--font-statement)}
.person-meta small,.entry-choice legend,.entry-choice>p,.selection-flow p,.selection-flow li:before{font-size:var(--font-note)}
.people-controls p{font-size:var(--font-meta)}
.reader-title{font-size:var(--font-card)}
.reader-quote{font-size:var(--font-card)}
.reader-title small{font-size:var(--font-note)}
.entry-cta span[lang]{font-size:var(--font-statement)}
.entry-cta span:last-child,.reader-close{font-size:var(--font-card)}
@media(max-width:1023px){
 :root{--font-hero:clamp(31px,8.4vw,44px);--font-section:30px;--font-message:clamp(26px,6.9vw,34px);--font-card:26px;--font-statement:20px;--font-lead:16px;--font-body:16px;--font-meta:14px;--font-note:12px;--font-jobs:112px;--font-marquee:112px}
 .roles-heading h2{font-size:28px}
 .hero-role{font-size:14px}
 .role-detail>summary{font-size:15px}
 .person-paper blockquote{font-size:20px}
 .person-meta strong{font-size:18px}
 .person-meta small{font-size:12px}
 .people-controls p{font-size:13px}
 .entry-cta span[lang]{font-size:21px}
 .entry-choice>p{font-size:14px}
 .facts>div,.experience ul{font-size:16px}
 .reader-title{font-size:20px}
 .reader-quote{font-size:20px}
 .reader-title small{font-size:14px}
 .reader .interview-answer h4,.selection-flow strong{font-size:20px}
 .selection-flow p{font-size:14px}
 .marquee-track{-webkit-text-stroke-width:1px}
}



.detail-lead h4{font-size:var(--font-message)}
.detail-sheet-heading{font-size:var(--font-statement)}
.detail-lead p{font-size:var(--font-body)}
.experience li,.detail-close{font-size:var(--font-meta)}

@media(max-width:1023px){.detail-lead p,.experience li{font-size:var(--font-body)}}

/* Recruitment keeps the established TOP hierarchy. */
.recruit-heading p{font-size:var(--font-lead)}
.recruit-summary-copy strong{font-size:var(--font-card)}
.facts dt,.role-requirements dt,.role-tag,.recruit-common-heading,.recruit-assessment,.recruit-assessment h3,.recruit-note,.selection-cta{font-size:var(--font-meta)}
.role-requirement{font-size:var(--font-body)}
.selection-flow li:before{font-size:var(--font-meta)}
@media(max-width:1023px){.recruit-summary-copy strong{font-size:var(--font-statement)}.recruit-note{font-size:var(--font-meta)}.role-requirements dt,.recruit-common-heading{font-size:var(--font-body)}}
/* The narrowest phones keep each role's heading on its two written lines. */
@media(max-width:359px){.role-copy h3{font-size:24px}}