/* Physical collage artwork, with real HTML navigation above it. */
.site-header{display:grid;grid-template-columns:minmax(150px,1fr) minmax(420px,610px) minmax(150px,1fr);gap:28px;height:auto;min-height:126px;padding:12px 5%;border-bottom:0;align-items:center}
.site-header .brand{justify-self:start;font-size:39px;gap:10px;white-space:nowrap;transform:rotate(-3deg)}
.site-header .brand span{font-size:26px;transform:rotate(12deg)}
.site-header nav{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:0;width:100%;padding:0 5.4%;aspect-ratio:6;font:400 22px/1 FilmTitle,BodyCN,sans-serif;letter-spacing:0;background:url('./assets/neon/navigation-index-strip.png') center/100% auto no-repeat;transform:rotate(-.6deg)}
.site-header nav a,.site-header nav a:nth-child(n+3){display:flex;align-items:center;justify-content:center;min-width:0;padding:6px 0;color:#14252a;isolation:isolate;white-space:nowrap;transition:transform .25s ease,color .25s ease}
.site-header nav a::after{content:none}
.site-header nav a:hover{color:#71394f;transform:translateY(-2px) rotate(-3deg)}
.site-header nav a:focus-visible{outline:2px solid #e38abb;outline-offset:-12px}
.site-header .quick-button{justify-self:end;display:flex;align-items:center;justify-content:center;width:158px;min-width:0;min-height:0;aspect-ratio:2.7;padding:0 15px;gap:17px;border:0;box-shadow:none;border-radius:0;background:url('./assets/neon/navigation-resume-tab.png') center/contain no-repeat;color:#1c2428;font:400 23px/1 FilmTitle,BodyCN,sans-serif;transform:rotate(2deg);transition:transform .25s ease,filter .25s ease}
.site-header .quick-button span{display:inline;font:24px/1 Arial,sans-serif;margin:0}
.site-header .quick-button:hover{background-color:transparent;color:#1c2428;transform:translateY(-3px) rotate(-1deg);filter:brightness(1.08)}
.site-header .quick-button:focus-visible{outline:2px solid #e6a3ce;outline-offset:3px}
@media(max-width:1100px){
 .site-header{grid-template-columns:1fr minmax(360px,1.7fr) 1fr;gap:16px;padding:12px 4%}
 .site-header .brand{font-size:31px;gap:5px}
 .site-header nav{font-size:20px}
 .site-header .quick-button{width:128px;font-size:21px;gap:13px}
}
@media(max-width:740px){
 .site-header{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px 18px;padding:16px 6% 8px;min-height:0}
 .site-header .brand{font-size:32px;gap:9px}
 .site-header .brand span{font-size:23px}
 .site-header nav{grid-column:1/-1;grid-row:2;font-size:17px;gap:0;min-height:58px;aspect-ratio:6}
 .site-header .quick-button{grid-column:2;grid-row:1;width:112px;min-width:0;min-height:42px;font-size:19px;padding:0 12px;gap:11px}
 .site-header .quick-button span{display:inline;font-size:20px}
 .site-header nav a:focus-visible{outline-offset:-6px}
}
@media(max-width:360px){
 .site-header{gap:6px 10px}
 .site-header .brand{font-size:28px}
 .site-header nav{font-size:15px;gap:0}
 .site-header .quick-button{width:104px;font-size:18px}
}
.site-header .brand .brand-name,footer .brand .brand-name{font:400 48px/1 TitleBrush,sans-serif;letter-spacing:0;color:#e9efed;transform:none}
.site-header .brand .brand-caption,footer .brand .brand-caption{font:400 17px/1.2 FilmTitle,BodyCN,sans-serif;letter-spacing:.06em;color:#f1a2d1;transform:none}
.hero h1{display:flex;align-items:baseline;gap:22px;white-space:nowrap}
.hero h1 .hero-name{font:400 clamp(62px,6vw,90px)/1 TitleBrush,sans-serif;letter-spacing:0;color:#e9efed;margin:0}
.hero h1 .hero-collection{font:400 clamp(42px,4.3vw,62px)/1.2 FilmTitle,BodyCN,sans-serif;color:#f1a2d1;margin:0;letter-spacing:.05em}
@media(max-width:740px){
 .site-header .brand .brand-name{font-size:42px}
 .site-header .brand .brand-caption{font-size:15px}
 .hero h1{gap:17px}
 .hero h1 .hero-name{font-size:62px}
 .hero h1 .hero-collection{font-size:39px}
}
@media(max-width:360px){
 .site-header .brand{gap:7px}
 .site-header .brand .brand-name{font-size:38px}
 .site-header .brand .brand-caption{font-size:14px}
 .hero h1{gap:13px}
 .hero h1 .hero-name{font-size:55px}
 .hero h1 .hero-collection{font-size:35px}
}