/* Landing design, with the archive kept as a separate interactive section. */
html{scroll-padding-top:28px}
main{margin:0}
.site-header{width:auto;margin:0;padding:30px 5.9%;gap:14px;background:#fff}
.home-view .site-header{position:absolute;inset:0 0 auto;color:#fff;background:transparent}
.header-logo img{width:78px}
.home-view .header-logo img{filter:invert(1);mix-blend-mode:screen}
.site-header .search{margin-left:8px;width:180px;background:#ffffffb8;border-radius:2px;color:#444;padding:5px 9px}
.site-header .search input{font-size:11px}
.site-header nav{gap:12px}
.site-header .pill{padding:6px 20px;font-size:10px;letter-spacing:.5px}
.home-view .site-header .pill{color:#fff;border-color:#ffffff9c;background:transparent}
.home-view .site-header .pill.active,.home-view .site-header .pill:hover{color:#222;background:#fff}
.site-header .icon svg{width:22px;height:22px}
.site-header #saved svg{fill:currentColor}
/* Keep the hero stable while mobile browser toolbars expand and collapse. */
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:max(560px,100svh);aspect-ratio:auto;background:url('assets/landing.jpg?v=10') center/cover no-repeat;color:white}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0005,transparent 34%,#0001);z-index:-1}
.hero-copy{position:absolute;left:5.9%;top:41.5%}
.hero h1{font-size:clamp(52px,4.9vw,92px);font-weight:700;letter-spacing:-.055em;line-height:.95;margin:0 0 24px}
.explore-button{display:inline-block;border:1px solid #fffc;border-radius:3px;padding:6px 17px;font-size:12px;transition:background .2s}
.explore-button:hover{background:#fff;color:#222}
.hero-note,.hero-curious{position:absolute;font-size:clamp(10px,1vw,15px);letter-spacing:1.4px;line-height:1.5;margin:0;font-weight:400}
.hero-note{right:10.5%;top:15.7%;text-align:right}
.hero-note span,.hero-curious span{display:inline-block;width:30px;border-top:1px solid currentColor;vertical-align:middle;margin-left:7px}
.hero-curious{left:6.1%;bottom:6.7%}
.hero-curious span{width:46px;margin:0 9px 0 0}
.hero-emblem{position:absolute;right:5.3%;bottom:6.5%;width:12%;height:auto;filter:grayscale(1) invert(1) contrast(8);mix-blend-mode:screen;pointer-events:none}
.introduction{position:relative;text-align:center;padding:clamp(100px,14.7vw,220px) 24px clamp(170px,17.8vw,280px);overflow:hidden}
.introduction h2{font-weight:400;font-size:clamp(24px,2.85vw,48px);line-height:1.18;letter-spacing:1.2px;margin:0 auto 30px;max-width:1100px;color:#080808}
.introduction mark{background:#080808;color:#fff;padding:0 .13em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.introduction>p{font-size:14px;line-height:1.25;color:#626262;max-width:360px;margin:0 auto 28px}
.intro-account{border:0;border-radius:3px;font-size:10px;font-weight:400;padding:8px 14px;background:#080808}
.topic-scatter{position:absolute;bottom:8vw;height:170px;width:245px;color:#999;pointer-events:none}
.scatter-left{left:6%}.scatter-right{right:6%;width:200px;height:100px}
.topic-scatter span{position:absolute;display:grid;place-items:center;border:1px solid #aaa;border-radius:40px;font-size:14px;letter-spacing:.6px;height:40px;width:135px}
.topic-world{left:-27px;top:27px;transform:rotate(-69deg)}
.topic-manga{left:71px;top:24px;transform:rotate(-10deg)}
.topic-scatter .topic-tech{left:47px;top:70px;width:88px}
.topic-anime{left:122px;top:90px;transform:rotate(43deg)}
.topic-japan{left:0;top:116px}.topic-artbook{left:0;bottom:0;transform:rotate(-8deg)}
.topic-scatter .topic-expo{right:-10px;top:28px;width:87px;transform:rotate(78deg)}
.landing{margin:0;overflow:hidden;user-select:none;-webkit-user-select:none;pointer-events:none}
.landing .track-group{display:flex;gap:14px;padding-right:14px}
.landing .ticket.card{width:clamp(150px,13.6vw,250px);min-height:0;flex:none;cursor:default;transition:none}
.landing .ticket.card:hover{transform:none;filter:none}
.landing .track{animation:drift 85s linear infinite;animation-play-state:running}
.landing .marquee:nth-child(2) .track{animation-duration:95s}
.landing .marquee{margin-bottom:14px}
/* IntersectionObserver pauses decorative motion without resetting its position. */
.motion-managed:not(.motion-visible)>.track{animation-play-state:paused}
.marquee:focus-within>.track{animation-play-state:paused}
@media(hover:hover){.marquee:hover>.track{animation-play-state:paused}}
.archive{margin:80px 5.9% 0}
.archive h2{font-size:30px;letter-spacing:-1.2px;margin:0}
.archive h2 span{font-size:43px;font-weight:300;vertical-align:-4px;margin-left:10px}
body:not(.home-view) .archive{margin-top:35px}
img,.ticket,[data-protected-image]{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
img{pointer-events:none}
.hero a{pointer-events:auto}
.home-view .site-header :focus-visible,.hero :focus-visible{outline-color:#fff}
@media(max-width:1250px) and (min-width:901px){
 .site-header{flex-wrap:nowrap;padding-left:4%;padding-right:4%;gap:10px}
 .site-header nav{order:initial;width:auto;margin-top:0;gap:8px}
 .site-header .search{width:160px;margin-right:0}
 .site-header .pill{padding:5px 15px;font-size:9px}
 .header-logo img{width:68px}
}
@media(max-width:900px){
 .site-header{padding:22px 24px;flex-wrap:wrap;gap:12px}
 .site-header .search{margin-left:0;margin-right:auto;width:min(230px,38vw)}
 .site-header nav{order:5;width:100%;margin:8px 0 0;overflow:auto;scrollbar-width:none;gap:9px;padding:4px 0}
 .site-header nav::-webkit-scrollbar{display:none}
 .site-header .pill{font-size:9px;padding:7px 16px}
 header #home{display:block}
 .hero{background-position:52% center}
 .hero h1{font-size:64px}
 .hero-copy{left:6%;top:42%}
 .hero-note{top:25%;right:6%}
 .hero-emblem{width:19%;right:5%;bottom:6%}
 .introduction{padding:115px 28px 215px}
 .introduction h2{font-size:clamp(24px,3.2vw,32px);letter-spacing:.5px}
 .desktop-break{display:none}
 .topic-scatter{bottom:35px;transform:scale(.75);transform-origin:left bottom}
 .scatter-right{transform-origin:right bottom}
}
@media(max-width:520px){
 .site-header{padding:20px 18px;gap:10px}
 .header-logo img{width:67px}
 .site-header .search{width:calc(100% - 192px);min-width:92px;padding:6px}
 .site-header .icon svg{width:20px;height:20px}
 .site-header #home{padding:5px 8px;letter-spacing:0}
 .site-header nav{gap:8px}
 .site-header nav .pill{flex:1;padding:7px 11px;font-size:8px}
 .hero{background-position:51% center}
 .hero-copy{top:43%;left:6%}
 .hero h1{font-size:56px;margin-bottom:22px}
 .hero-note{top:24%;font-size:9px}
 .hero-curious{font-size:9px;bottom:6%}
 .hero-emblem{width:26%;right:4%;bottom:4.6%}
 .introduction{padding:100px 24px 220px}
 .introduction h2{font-size:24px;line-height:1.22;letter-spacing:.4px;margin-bottom:25px}
 .introduction>p{font-size:13px;max-width:295px;line-height:1.4}
 .topic-scatter{transform:scale(.65);bottom:40px}
 .scatter-left{left:5%}.scatter-right{right:5%}
 .landing .track-group{gap:9px;padding-right:9px}
 .landing .ticket.card{width:155px;min-height:0}
 .landing .marquee{margin-bottom:9px}
 .archive{margin:55px 16px 0}
}
@media(max-width:760px){
 /* Keep the heading available to assistive technology without covering the artwork. */
 .hero h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .hero-copy{top:auto;bottom:calc(6% + 48px);left:6%}
 .hero .explore-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 20px;font-size:16px;line-height:1.2}
}
@media(prefers-reduced-motion:reduce){.landing .track{animation:none}.landing .marquee{overflow:hidden}.landing .track-group:last-child{display:none}}

.header-logo .wordmark{display:block;width:78px;height:27px;background:url('assets/ruma-wordmark-white.png') center/122% auto no-repeat;filter:brightness(0)}
.home-view .header-logo .wordmark{filter:none}
@media(max-width:520px){
 .site-header{display:grid;grid-template-columns:67px minmax(0,1fr) 34px 24px 24px;column-gap:8px}
 .header-logo .wordmark{width:67px;height:23px}
 .site-header .search{width:100%;min-width:0;margin:0}
 .site-header nav{grid-column:1/-1;grid-row:2;display:flex}
 .site-header #home{grid-column:3;grid-row:1;padding:5px 6px}
 .site-header #saved{grid-column:4;grid-row:1}
 .site-header #account{grid-column:5;grid-row:1}
}

/* Monochrome bookmark and circular count, on both header backgrounds. */
.site-header #saved{color:#000;background:transparent;align-items:center;justify-content:center;flex-shrink:0}
.home-view .site-header #saved{color:#fff}
.site-header #saved svg{width:20px;height:24px;fill:currentColor;stroke:none}
.site-header #saved-count{position:absolute;right:-6px;top:-17px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 3px;border-radius:50%;background:#000;color:#fff;font-size:13px;line-height:1;font-weight:400;letter-spacing:0;pointer-events:none}
.home-view .site-header #saved-count{background:#fff;color:#000}
.site-header #saved-count:empty{display:none}
@media(max-width:520px){
 .site-header #saved svg{width:18px;height:22px}
 .site-header #saved-count{min-width:16px;height:16px;right:-5px;top:-15px;font-size:11px}
}