:root{--bg:#111724;--ink:#f4f0f4;--muted:#b2b6c7;--pink:#e3b9d7;--line:#ffffff26;--serif:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;--sans:'Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.9 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}header{height:88px;padding:0 5%;display:flex;align-items:center;gap:45px;position:relative;z-index:3;border-bottom:1px solid var(--line)}.brand{font:21px var(--serif);letter-spacing:.15em;white-space:nowrap}.sigil{font:32px Georgia;color:var(--pink);vertical-align:middle;margin-right:12px}nav{display:flex;gap:30px;margin-left:auto;font-size:14px;letter-spacing:.12em}nav a:hover{color:var(--pink)}.header-note{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:30px}.hero{position:relative;min-height:710px;height:calc(100svh - 88px);max-height:1000px;isolation:isolate;overflow:hidden}.hero-art{position:absolute;inset:0 0 0 29%;overflow:hidden;z-index:-1}.hero-art>img{width:114%;height:116%;object-fit:cover;object-position:58% center;position:absolute;top:-8%;left:-6%}.art-shade{position:absolute;inset:0;background:linear-gradient(90deg,#111724 0%,#1117249c 20%,transparent 58%),linear-gradient(0deg,#111724 0%,transparent 32%)}.art-label{position:absolute;right:4%;bottom:90px;font-size:12px;letter-spacing:.12em;writing-mode:vertical-rl;text-shadow:0 1px 5px #000}.hero-copy{padding:clamp(100px,14vh,165px) 0 0 7%;max-width:690px}.eyebrow{font-size:12px;letter-spacing:.28em;color:var(--pink)}h1{font:clamp(48px,6.2vw,90px)/1.5 var(--serif);letter-spacing:.1em;margin:18px 0 22px;text-shadow:0 2px 25px #11172460}.hero-lines{font:clamp(24px,2.5vw,34px)/1.9 var(--serif);letter-spacing:.1em;margin:0 0 25px}.intro{font-size:14px;line-height:2.2;color:#d4d3df;max-width:470px}.text-link{display:flex;align-items:center;justify-content:space-between;width:205px;padding:13px 0;border-bottom:1px solid var(--pink);margin-top:35px;font-size:14px}.text-link span{font-size:24px;color:var(--pink)}.hero-foot{position:absolute;bottom:30px;left:7%;right:5%;display:flex;justify-content:space-between;color:var(--muted);font-size:12px;letter-spacing:.14em}.section{padding:115px 8%}.section-title{display:grid;grid-template-columns:1fr 1fr;align-items:start;column-gap:60px;margin-bottom:65px}.section-title>.eyebrow{grid-column:1/-1;margin-bottom:15px}.section-title h2{font:clamp(32px,4vw,50px)/1.6 var(--serif);letter-spacing:.1em;margin:0}.section-title p{margin:8px 0 0;color:var(--muted);line-height:2.2}.characters{background:#1b2232}.character-grid{display:grid;grid-template-columns:1fr 1fr;gap:7%}.character{min-width:0}.styren{padding-top:95px}.portrait{position:relative;aspect-ratio:1.2;overflow:hidden;background:#30324a}.portrait img{position:absolute;max-width:none;width:255%;height:auto;left:-30%;top:-52%}.styren .portrait img{width:235%;left:-118%;top:-16%}.portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#11172488,transparent 55%);pointer-events:none}.portrait-id{position:absolute;bottom:12px;right:25px;font:55px var(--serif);z-index:1;color:#fff9}.character-copy{border-left:1px solid var(--pink);padding-left:24px;margin-top:28px}.role{font-size:12px;letter-spacing:.18em;color:var(--pink)}h3{font:34px/1.5 var(--serif);letter-spacing:.13em;margin:8px 0 18px}.character p{color:var(--muted);margin:0;line-height:2.1}.image-note{font-size:12px;color:var(--muted);margin-top:40px}.world{background:#edeaf1;color:#252d43}.world .eyebrow{color:#745571}.world .section-title p{color:#646678}.world-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;align-items:center}.map-wrap{text-align:center}.map-caption,.map-instruction{font-size:12px;letter-spacing:.1em;color:#646678;display:block}.map-caption{margin-bottom:25px}.map-instruction{margin-top:25px}.map{position:relative;aspect-ratio:1;max-width:470px;margin:auto}.ring{position:absolute;border-radius:50%;display:flex;justify-content:center;align-items:flex-start;border:1px solid #69748b;color:#343c53;cursor:pointer;transition:background .2s,box-shadow .2s}.ring span{font-size:14px;letter-spacing:.12em;padding-top:6%}.outer{inset:0;background:#dddce6}.middle{inset:17%;background:#ced2e0}.inner{inset:34%;background:#b5bfd3;align-items:center}.inner span{padding:0;font-family:var(--serif);font-size:22px}.inner small{display:block;font:12px var(--sans);margin-top:4px}.ring:hover{box-shadow:0 0 0 3px #74557140}.ring.active{background:#303d59;color:white;border-color:#303d59}.zone-tabs{display:flex;gap:25px;border-bottom:1px solid #252d4340;margin-bottom:35px}.zone-tabs button{padding:12px 0;border:0;border-bottom:2px solid transparent;background:none;color:#646678;font-size:14px;cursor:pointer}.zone-tabs button[aria-pressed=true]{color:#303d59;border-color:#303d59}.zone-content{min-height:270px}.zone-content h3{font-size:38px;margin:15px 0 20px}.zone-content p{color:#555e72}.zone-note{font-size:14px;border-top:1px solid #252d4325;padding-top:22px;margin-top:25px}footer{padding:45px 8%;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}footer>div{display:flex;gap:30px;align-items:center}.footer-name{font:24px var(--serif);color:var(--ink)}:focus-visible{outline:3px solid #b684b1;outline-offset:5px}@media(min-width:1550px){.hero-copy{padding-left:10%}.hero-art{left:35%}}@media(max-width:800px){header{height:74px;padding:0 6%;gap:15px}.brand{font-size:17px}.sigil{font-size:26px;margin-right:5px}nav{gap:17px;font-size:12px}.header-note{display:none}.hero{min-height:860px;height:auto}.hero-art{inset:0 0 auto 0;height:570px}.hero-art>img{width:114%;height:116%;object-position:center}.art-shade{background:linear-gradient(0deg,#111724 0%,#11172455 25%,transparent 60%)}.art-label{bottom:auto;top:30px;right:20px}.hero-copy{padding:410px 7% 100px;max-width:none}h1{font-size:clamp(44px,9vw,65px);margin-top:8px}.hero-lines{font-size:25px}.intro{font-size:14px}.hero-foot{bottom:24px;left:7%;right:7%;font-size:12px}.hero-foot>span{display:none}.hero-foot>a{margin-left:auto}.section{padding:75px 7%}.section-title{grid-template-columns:1fr;margin-bottom:40px}.section-title p{margin-top:18px}.character-grid{gap:25px}.portrait{aspect-ratio:.72}.portrait img{width:330%;left:-56%;top:-8%}.styren .portrait img{width:340%;left:-193%;top:0}.styren{padding-top:55px}.portrait-id{font-size:34px;right:12px}.character-copy{padding-left:12px;margin-top:20px}h3{font-size:25px;letter-spacing:.04em}.character p{font-size:14px}.role{letter-spacing:0;font-size:12px}.world-grid{grid-template-columns:1fr;gap:40px}.map{max-width:400px}.zone-content{min-height:230px}footer{padding:30px 7%;gap:20px}footer>div{display:block}footer>div span{display:block;font-size:12px;margin-top:8px}.footer-name{font-size:20px}}@media(max-width:380px){nav{gap:10px}.brand{font-size:15px}.character-grid{grid-template-columns:1fr}.styren{padding-top:25px}.portrait{aspect-ratio:1.1}.portrait img{width:255%;left:-30%;top:-42%}.styren .portrait img{width:235%;left:-118%;top:-12%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Portrait artwork layout */
:root{--pink:#ddc78e}
.hero{min-height:790px;max-height:1100px}
.hero-art{left:46%;background:#dedac7}
.hero-art>img{width:100%;height:100%;left:0;top:0;object-fit:contain;object-position:center}
.art-shade{background:linear-gradient(90deg,#111724 0%,#11172433 12%,transparent 26%),linear-gradient(0deg,#111724a0,transparent 18%)}
.hero-copy{max-width:49%;padding-left:6%;padding-top:125px}
h1{font-size:clamp(40px,5vw,76px)}
.intro{max-width:400px}.intro br{display:none}
.art-label{writing-mode:horizontal-tb;bottom:55px;right:25px;color:white}
.portrait img{width:190%;left:-20%;top:-82%}
.styren .portrait img{width:200%;left:-55%;top:-28%}
@media(max-width:800px){
.hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column}
.hero-art{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1344/1885;order:0;background:#dedac7}
.hero-art>img{position:absolute;width:100%;height:100%;object-fit:contain;left:0;top:0}
.art-shade{background:linear-gradient(0deg,#111724,transparent 18%)}
.art-label{top:auto;bottom:40px;right:7%;font-size:12px}
.hero-copy{max-width:none;padding:15px 7% 75px;order:1}
h1{font-size:clamp(44px,9vw,65px)}
.hero-foot{position:relative;inset:auto;padding:0 7% 25px;order:2}
.portrait img{width:260%;left:-45%;top:-31%}
.styren .portrait img{width:260%;left:-88%;top:-10%}
}
@media(max-width:380px){.portrait img{width:190%;left:-20%;top:-70%}.styren .portrait img{width:200%;left:-55%;top:-24%}}

/* Navigation for the character-pair page. */
header nav a{white-space:nowrap}header .header-note{white-space:nowrap}.pair-link{width:min(100%,290px)}
@media(max-width:1100px){header .header-note{display:none}header{gap:24px}header nav{gap:20px}}
@media(max-width:800px){header{height:auto;min-height:74px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;gap:10px}header nav{flex-basis:100%;margin-left:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;letter-spacing:.04em}header nav a{padding:6px 0}}