*{box-sizing:border-box}body{margin:0;background:#101920;color:#f8f6ef;font:16px/1.55 system-ui,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #ffd16c;outline-offset:5px}
.scene{min-height:94svh;display:flex;flex-direction:column;background:linear-gradient(90deg,rgba(8,15,23,.79),transparent 80%),url('assets/moonlit-street.png') 60% center/cover}
header,.intro,footer{padding-inline:clamp(20px,7vw,120px)}header,nav,.brand,footer{display:flex;align-items:center}header{min-height:76px;justify-content:space-between;border-bottom:1px solid #ffffff38;background:#101b2438}nav{gap:clamp(16px,3vw,48px)}nav a{padding-block:12px}.brand{gap:10px;font-weight:800;letter-spacing:.09em}.brand img{width:38px}nav a:hover,footer a:hover{color:#ffd16c}
.intro{margin-block:auto;padding-block:72px}.label{font:700 .75rem/1.6 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#ffd16c}.label:before{content:'';display:inline-block;width:32px;height:2px;background:currentColor;margin-right:10px;vertical-align:middle}
h1{margin:0;letter-spacing:-.055em;line-height:.96}h1{font-size:clamp(3.1rem,8vw,8rem)}.intro p:not(.label){font-size:clamp(1rem,2vw,1.35rem);max-width:35ch}.cta{display:inline-block;margin-top:12px;padding:14px 23px;background:#f7c453;color:#18202a;font-weight:750}.cta:hover{background:#ffda85}
footer{padding-block:24px;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:700px){.scene{background-position:76% center;background-image:linear-gradient(0deg,#08121ce8,transparent 78%),url('assets/moonlit-street.png')}.intro{margin-top:auto;margin-bottom:0}header{min-height:64px}.brand{font-size:.82rem}.brand img{width:29px}}
nav a[aria-current]{color:#ffd16c;text-decoration:underline;text-underline-offset:7px}
.guide{min-height:100vh;display:flex;flex-direction:column}.guide main{flex:1}
.mast{background:linear-gradient(90deg,#08121cea,#08121c38),var(--art) center 54%/cover}
.about{--art:url('assets/rooftops.png')}.wiki{--art:url('assets/moonlit-street.png')}
.mast .intro{padding-block:clamp(44px,7vw,100px)}.mast h1{font-size:clamp(2.5rem,6vw,6rem);overflow-wrap:anywhere}.mast .intro p:not(.label){max-width:54ch}
.reading{margin:0 auto;padding:clamp(30px,5vw,72px) clamp(20px,7vw,120px);max-width:1100px}.reading h2{font-size:clamp(1.45rem,3vw,2.1rem);letter-spacing:-.035em;margin:0}.reading p{color:#d4dee3;max-width:65ch;margin:.5em 0 0}.reading section{border-left:2px solid #c69d4c;padding-left:clamp(16px,2vw,30px)}.reading section+section{margin-top:32px}.reading figure{margin:40px 0 0}.reading figure img{width:min(100%,510px);display:block}.reading figcaption{font-size:.85rem;color:#c1cbd3;margin-top:7px}.guide footer{border-top:1px solid #ffffff28}

.brand .wordmark{display:block;width:auto;height:clamp(34px,3vw,42px);object-fit:contain;flex:none}
footer{padding-inline-start:clamp(16px,2vw,32px)}
.studio-credit{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px);max-width:100%}
.studio-credit img{display:block;width:clamp(42px,4vw,64px);height:auto;flex:none}
.hero-title{display:block;width:clamp(210px,27vw,348px);max-width:100%;height:auto}