/* Shared layout for phones, tablets, wide desktops and short viewports. */
html{scroll-padding-top:85px}
body{min-width:0;overflow-wrap:break-word}
header,main,footer{max-width:1800px;margin-inline:auto}
header{gap:16px;flex-wrap:wrap;padding-top:max(18px,env(safe-area-inset-top));padding-left:max(5%,env(safe-area-inset-left));padding-right:max(5%,env(safe-area-inset-right))}
header>a{min-height:44px;display:flex;align-items:center}
nav{flex-wrap:wrap;gap:4px 22px;align-items:center}
nav a{display:inline-flex;align-items:center;min-height:44px}
h1,h2,h3{overflow-wrap:anywhere}
h1{font-size:clamp(62px,10.6vw,168px)}
.intro,.watch,.related{flex-wrap:wrap}
.intro>*{min-width:0}
.status{white-space:normal}
.two{grid-template-columns:minmax(125px,1fr) minmax(0,2fr);gap:clamp(24px,5vw,85px)}
.text,.gallery figure,.journey article,.watch>div{min-width:0}
.gallery{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.hero img{height:auto;min-height:0;max-height:none;aspect-ratio:1.55;object-fit:contain;background:#120b18}
.gallery img{height:auto;aspect-ratio:1.35;object-fit:cover}
figure{min-width:0}figcaption{flex-wrap:wrap}
.facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.facts strong{font-size:clamp(25px,3vw,38px)}
.watch{padding:clamp(24px,4vw,55px)}
.button{white-space:normal;min-height:44px;text-align:center}
.related>a{align-self:center;min-height:44px;display:inline-flex;align-items:center}
footer{flex-wrap:wrap;padding-bottom:max(25px,env(safe-area-inset-bottom))}
.comic-intro h1{font-size:clamp(62px,10vw,120px)}
.reader-bar{flex-wrap:wrap;padding-block:8px}
.reader-bar a{display:inline-flex;align-items:center;min-height:44px}
.panel img{height:auto;aspect-ratio:1.25;object-fit:cover}
.panel.wide img{height:auto;max-height:none;aspect-ratio:auto}
.panel-caption{display:block}
.source{min-height:44px}
@media(min-width:1600px){body{font-size:19px}.hero{padding-top:75px}.gallery img{aspect-ratio:1.5}}
@media(max-width:1000px){.two{grid-template-columns:1fr;gap:22px}.journey{gap:24px}.journey h3{font-size:25px}.watch{align-items:flex-start}.watch .button{margin-top:8px}}
@media(max-width:700px){header{align-items:flex-start}nav{width:100%;justify-content:flex-start;gap:0 20px}h1{font-size:clamp(62px,14vw,98px)}.hero{padding-top:30px}.intro{gap:20px}.intro .status{margin-top:0}.gallery,.journey{grid-template-columns:1fr}.gallery img{height:auto;aspect-ratio:auto}.facts{gap:12px}.facts span{font-size:10px;letter-spacing:.04em}.watch,.related{display:flex;flex-direction:column;align-items:flex-start}.related>a{align-self:flex-start}.comic-intro{padding-inline:20px}.panels{grid-template-columns:1fr}.panel img{aspect-ratio:auto}.section{margin-top:55px}.reader-bar{font-size:11px}.chapter h2{font-size:32px}}
@media(max-width:380px){body{font-size:16px}header{font-size:10px}nav{gap:0 14px}.hero,.section{margin-inline:0}.section{margin-inline:5%}h2{font-size:34px}.facts{grid-template-columns:1fr}.facts>div{display:flex;align-items:center;gap:15px}.facts span{margin:0}.panel-caption{padding:13px;font-size:16px}}
@media(max-height:550px) and (orientation:landscape){.hero{padding-top:24px}h1{font-size:clamp(62px,9vw,115px);margin-block:12px 24px}.hero img{aspect-ratio:1.8}.section{margin-top:55px}.reader-bar{position:static}}
.site-header{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px 30px;background:#180f20;padding:14px 5%;border-bottom:2px solid var(--yellow)}
.site-header .site-name{text-decoration:none;letter-spacing:.13em;font-size:12px;min-height:44px;display:flex;align-items:center}
.site-header nav{display:flex;gap:6px 24px;flex-wrap:wrap}
.site-header nav a{text-decoration:none;font-size:12px;min-height:44px}
.site-header nav a[aria-current="page"]{color:var(--blue);text-decoration:underline;text-underline-offset:7px}
@media(max-width:700px){.site-header{gap:0;padding-block:10px}.site-header nav{width:100%;gap:0 24px}.site-header nav a{font-size:11px}.site-header .site-name{font-size:11px}}
.creators-title{font-size:clamp(54px,9.3vw,140px)}
@media(max-width:700px){.creators-title{font-size:clamp(48px,11.8vw,82px)}}
.site-header{max-width:none;gap:12px 24px}
.site-header nav{gap:4px 18px}
.site-header nav a{font-size:11px;letter-spacing:.08em}
.menu-toggle{display:none;background:transparent;border:1px solid #72535c;border-radius:3px;width:46px;height:44px;padding:10px;cursor:pointer;color:var(--yellow)}
.menu-toggle span{display:block;height:2px;margin:4px 0;background:currentColor}
.info-page{max-width:1120px;padding:60px 5%}
.info-page h1{font-size:clamp(52px,8vw,110px);overflow-wrap:normal}
.info-page section{margin-top:48px;max-width:800px}
.info-page h2{font-size:clamp(27px,4vw,42px)}
.info-page .lede{max-width:750px}
.notice{padding:22px;border:1px solid var(--line);border-left:4px solid var(--blue);margin:30px 0}
.metrics{margin:25px 0}.metrics>div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}.metrics dd{margin:0;color:var(--muted)}
.versions{padding:0;list-style:none;margin-top:50px}.versions li{border-top:1px solid var(--line);padding:22px 0}.versions h2{margin:10px 0;font-size:32px}
.social-list>a,.social-list>section{display:block;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;margin:0}.social-list h2{margin:0}.social-list p{margin-bottom:0}
@media(max-width:1200px){.site-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:12px 5%;position:relative}.site-header .site-name{font-size:11px;max-width:calc(100% - 70px)}.menu-toggle{display:block;flex:0 0 46px}.site-header nav{display:none;width:100%;flex-basis:100%;gap:0;padding-top:12px;border-top:1px solid var(--line)}.site-header nav.is-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.site-header nav a{font-size:12px;min-height:48px}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-6px) rotate(-45deg)}}
@media(max-width:540px){.info-page{padding-top:35px}.info-page h1{font-size:clamp(42px,10vw,60px)}.metrics>div{flex-direction:column;gap:4px}.info-page .facts{grid-template-columns:1fr}.info-page .facts strong{font-size:30px}}