/* v44: a legible film introduction, a continuous story, and controllable browsing. */
:root{--section-space:clamp(64px,7.5vw,112px)}
html{scroll-padding-top:90px}
header{border-bottom:1px solid #e8cd5426}
header nav{gap:24px}
header nav a{font:700 12px/1.4 var(--font-body);letter-spacing:.04em}
header .official-link{background:transparent;border:0;color:#f2d45c;padding:10px 4px;font-size:12px;box-shadow:none}
@media(min-width:1101px){header .menu-button{display:none}}
.hero .mission-hud{max-width:560px;bottom:86px}
@media(min-width:721px){.hero{min-height:800px}.hero .mission-hud>p{max-width:44ch}}
html[lang] .hero .mission-hud h2{font:800 clamp(32px,3.8vw,58px)/1.2 var(--font-body);letter-spacing:-.035em;text-shadow:0 2px 22px #0008;-webkit-text-stroke:0;margin-bottom:18px}
.hero .mission-hud>p{font-size:16px;font-weight:400;line-height:1.7;margin:0 0 24px}
.hero .mission-hud .cta{font:800 16px/1.4 var(--font-body);min-height:56px;padding:14px 25px}
.hero .mission-hud>a{display:block;width:fit-content;margin-top:18px;font:600 12px/1.5 var(--font-body);letter-spacing:.05em}
.hero .hero-note{max-width:36%;font-size:clamp(20px,2.5vw,36px);bottom:145px}
.hero-motion,.rail-motion{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid #c8b76b80;border-radius:4px;background:#080d08e8;color:#fff1bd;font:600 12px/1.5 var(--font-body);cursor:pointer}
.hero-motion{position:absolute;z-index:5;right:max(86px,7%);bottom:30px}
.hero-motion:hover,.rail-motion:hover{background:#f5d642;color:#080d08}
.rail-motion[hidden]{display:none}
.rail-motion:disabled{opacity:.6;cursor:default}
.collection-label{align-items:center}
.collection-label>span{margin-left:auto}
.collection-label .rail-motion{flex:none}
#scenes,#collections,#classics,#history,#highlights{padding-top:var(--section-space);padding-bottom:var(--section-space)}
html[lang] .section-title h2:not(.loadout-quote){font-size:clamp(36px,4.8vw,68px);line-height:1.15;margin-bottom:20px}
.section-title>p{font:400 16px/1.9 var(--font-body);max-width:65ch;color:#c8cbbb}
html[lang] .gallery-heading h2{font-size:clamp(28px,3.5vw,48px)!important;line-height:1.35!important;letter-spacing:-.02em!important}
.gallery-heading .gallery-explainer{font-size:15px;max-width:58ch}
.category-entry>button .category-copy small{letter-spacing:.14em}
html[lang] .category-entry>button .category-copy strong{font:800 clamp(16px,1.7vw,24px)/1.5 var(--font-body);letter-spacing:.02em;text-shadow:0 2px 8px #000;-webkit-text-stroke:0}
html[lang=en] .category-entry>button .category-copy small{display:none}
.mission-board .mission-tile div{padding:30px}
.mission-board .mission-tile p{font-size:16px;line-height:1.75;max-width:35ch}
.mission-board .mission-tile:focus-visible{outline:3px solid #fff3ab;outline-offset:5px}
.road-interlude.mission-change{border-top:1px solid #b99a3750;border-bottom:1px solid #b99a3750}
#scenes{border-top:1px solid #b99a3750}
@media(max-width:1100px){
 header{gap:14px}
 header nav{display:none}
 header .official-link{margin-left:auto}
 header .menu-button{display:flex}
}
@media(max-width:720px){
 html{scroll-padding-top:80px}
 header{height:72px!important;min-height:72px!important;padding:10px 16px!important;display:flex!important;flex-wrap:nowrap!important;gap:12px}
 header .brand{margin:0!important;flex:none}
 header .brand b{font-size:23px}
 header .brand span{font-size:7px;letter-spacing:2px}
 header .official-link{display:none!important}
 header .language{margin-left:auto!important;gap:4px}
 header .language button{min-height:40px;padding:8px 10px;font-size:11px}
 header .menu-button{order:3;margin:0;width:38px;height:40px;flex:none}
 #mobile-menu{top:72px;max-height:calc(100svh - 72px);overflow-y:auto}
 .hero{height:max(740px,100svh);min-height:740px;max-height:none;padding:112px 22px 100px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:54px}
 .hero .hero-content{position:relative;inset:auto;margin:0;max-width:calc(100% - 32px)}
 .hero .hero-content:after{display:none}
 .hero .unofficial{font-size:8px;letter-spacing:1px;line-height:1.6;margin:0 0 24px}
 .hero .logo strong{font-size:66px}
 .hero .logo-ribbon{font-size:32px}
 .hero .mission-hud{position:relative;inset:auto;margin:auto 0 0;max-width:100%;width:100%}
 html[lang] .hero .mission-hud h2{font-size:clamp(29px,7.5vw,42px);line-height:1.25;margin-bottom:16px}
 .hero .mission-hud>p{font-size:14px;max-width:30ch;margin-bottom:22px}
 .hero .mission-hud .cta{font-size:14px;min-height:52px}
 .hero .mission-hud>a{font-size:11px;margin-top:18px}
 .hero .hero-note{display:none}
 .hero-motion{bottom:23px;right:82px;font-size:11px}
 .hero-game-icon{top:110px;right:20px}
 .collection-label{gap:14px}
 .collection-label h3{flex:1 1 100%;margin-bottom:0}
 .collection-label>span{margin:0;flex:1;min-width:150px;font-size:11px}
 .collection-label .rail-motion{font-size:11px;padding-inline:12px}
 html[lang] .section-title h2:not(.loadout-quote){font-size:34px}
 .section-title>p{font-size:14px}
 .mission-board .mission-tile div{padding:24px}
 .mission-board .mission-tile p{font-size:14px}
 #scenes,#collections,#classics,#history,#highlights{padding-top:56px;padding-bottom:56px}
}