/* Figma PC / SP-1, SP-2, SP-3, updated 2026-10-06. */
:root{--hero-paper:#d5d5cc;--about-paper:#eeede7;--hero-veil:rgba(194,181,165,.85)}
body>header{position:fixed;inset:0 0 auto;height:82px;background:transparent;border:0;z-index:5}
.hero{display:block;position:relative;width:100%;max-width:none;height:100svh;min-height:0;max-height:none;margin:0;overflow:hidden;background:var(--hero-paper)}
.hero .section-inner{position:relative;width:100%;height:100%;max-width:1920px;margin-inline:auto;transform:translate3d(0,var(--hero-parallax,0px),0)}
.hero-art{position:absolute;left:0px;top:3%;width:68vw;height:98vmin;aspect-ratio:975/992;overflow:visible;background:transparent}
.hero-art>.key-visual{position:absolute;left:0px;top:-11.015%;width:89.119%;height:110.403%;max-width:none;object-fit:cover;mix-blend-mode:multiply}
.hero-art .words{position:absolute;left:2.872%;top:4.335%;width:79.077%;height:95.665%;z-index:1;pointer-events:none}
.hero-art .word-slot{position:absolute}.hero-art .word-slot img{display:block;width:100%;height:100%;max-width:none}
.hero-art>.catch-copy{position:absolute;left:calc(76% + 2vmax);top:1%;width:20.923%;height:89.919%;max-width:none;object-fit:contain;object-position:left top;z-index:2}
.hero-art>.art-credit{position:absolute;left:2.872%;bottom:2.016%;font:12px Georgia,serif;letter-spacing:.12em;z-index:3}
.hero-copy{position:absolute;left:64%;top:0;width:28.646%;height:100%;padding:4svh 0;gap:0;transform:none}
.hero-copy .eyebrow{font-size:clamp(18px,1.667vw,32px);line-height:1.8;letter-spacing:0;margin:0 0 2svh;white-space:nowrap}
.hero h1{height:40.2svh;max-height:402px;max-width:100%;margin:0 0 2svh}
.hero h1 img{height:100%;width:auto;max-width:100%;object-fit:contain}
.hero-date>span{font-size:18px}.hero-date strong{font-size:clamp(30px,2.188vw,42px);white-space:nowrap}
.hero-date p{font-size:20px;margin:10px 0 0}
.scroll-suggestion{margin-top:2.7svh}
.scroll-suggestion .scroll-indicator{display:block;position:relative;width:40px;height:80px;border:1px solid #46616a;border-radius:50px;padding:24px 0;overflow:hidden}
.scroll-suggestion .line{display:block;width:4px;height:30px;border-radius:50px;background:#46616a;margin:0 auto;animation:scroll 2.2s cubic-bezier(.15,.41,.69,.94) infinite}
@keyframes scroll{0%{opacity:0;transform:translateY(-15px)}10%{opacity:1;transform:translateY(-5px)}100%{opacity:0;transform:translateY(15px)}}
.hero-intro,.hero-copy-backdrop{display:none}
.about.section{display:block;position:relative;z-index:2;width:100%;max-width:none;padding:0;margin:0;background:var(--about-paper)}
.about-inner{position:relative;display:flex;align-items:center;min-height:100svh;max-width:1920px;margin-inline:auto;overflow:hidden}
.about-ruri{position:absolute;inset:0 auto 0 0;width:39.583%;overflow:hidden}
.about-ruri img{position:absolute;top:-18.328%;display:block;width:100%;height:118.328%;object-fit:cover;object-position:center}
.about-text-area{position:relative;isolation:isolate;display:grid;grid-template-columns:37% 63%;gap:0;width:58.646%;min-height:648px;margin:8.95% 0 8% 28.073%;padding:4.167% 3.125%}
.about-panel,.about-heading-bg{position:absolute;inset:0;background:rgba(255,255,255,.3);z-index:-1;pointer-events:none}
.about-heading-bg{display:none;background:rgba(255,255,255,.45)}
.about-heading{position:relative;padding:0;margin:0}
.about-heading h2{font-size:clamp(20px,1.667vw,32px);line-height:1.8;margin:18px 0 0}
.about-heading h2 span{display:block;margin-bottom:clamp(32px,3vw,57.6px);white-space:nowrap}
.about .statement{position:relative;width:auto;max-width:none;padding:48px 0 0 24px;font-size:clamp(14px,.938vw,18px);line-height:2.35}
.about .statement p{margin-bottom:25px}.about .signature{margin-top:25px}
#about{scroll-margin-top:-90px}
.stage-ready .hero-art>.key-visual,.stage-ready .hero-art>.words,.stage-ready .hero-art>.catch-copy,.stage-ready .hero-art>.art-credit,.stage-ready .hero-copy>*,.stage-ready .about-ruri,.stage-ready .about-heading>span,.stage-ready .about-heading>h2,.stage-ready .about .statement{opacity:0}
.stage-ready .about-ruri{clip-path:inset(0 100% 0 0)}
.stage-ready .about-panel,.stage-ready .about-heading-bg{clip-path:inset(0 0 100% 0)}
html.about-revealing,html.about-revealing body{overflow:hidden;overscroll-behavior:none}
@media(min-width:1441px){.hero .section-inner{margin-block:auto}}
@media(min-width:769px) and (max-width:1100px){.about-text-area{grid-template-columns:1fr;gap:24px;margin-left:33%;width:62%;padding:35px}.about-heading h2 span{margin-bottom:15px}.about .statement{padding:0}.hero-copy .eyebrow{font-size:16px}}
@media(max-width:768px){
 body>header{height:55px;padding:0 24px;justify-content:flex-end}body>header .brand{display:none}
 .hero .section-inner{max-width:none;padding:0;transform:none}
 .hero-art{left:0;top:.948%;width:100%;height:99.29%;aspect-ratio:auto}
 .hero-art>.key-visual{left:-5.399%;top:5.131%;width:auto;height:94.988%;aspect-ratio:631.531/796;object-fit:cover}
 .hero-art .words{left:0;top:12.172%;width:auto;height:85.322%;aspect-ratio:581/715}
 .hero-art>.catch-copy{display:none}
 .hero-art>.art-credit{left:8px;bottom:1.809%;font-size:12px}
 .hero-copy-backdrop{display:block;position:absolute;inset:0;background:var(--hero-veil);z-index:2}
 .hero-copy{inset:0;width:100%;height:100%;padding:8svh 24px 5svh;z-index:3;justify-content:center}
 .hero-copy .eyebrow{font-size:clamp(16px,5.128vw,20px);line-height:2;letter-spacing:1.6px;margin:0 0 4svh}
 .hero h1{height:38svh;max-height:none;margin:0 0 3.4svh}
 .hero-date>span{font-size:18px}.hero-date strong{font-size:clamp(32px,10.769vw,42px)}.hero-date small{font-size:14px}.hero-date p{font-size:20px}
 .scroll-suggestion{margin-top:3.2svh}.scroll-suggestion .scroll-indicator{height:min(80px,9.48svh)}.scroll-suggestion .line{height:min(30px,3.555svh)}
 .hero-intro{position:absolute;inset:0;margin:0;z-index:4;align-items:center;justify-content:center;font-family:var(--serif);color:#000;pointer-events:none}
 .stage-ready .hero-intro{display:flex}
 .hero-intro-text{writing-mode:vertical-rl;text-orientation:upright;font-size:min(24px,2.844svh);line-height:1.5;letter-spacing:.08em;white-space:nowrap}
 .hero-intro-text>span{opacity:0}
 .stage-ready .hero-art{opacity:0}
 .stage-ready .hero-art>.key-visual,.stage-ready .hero-art>.words,.stage-ready .hero-art>.art-credit{opacity:1}
 .stage-ready .hero-copy-backdrop{clip-path:inset(0 0 100% 0)}
 .stage-ready body>header .menu-toggle{opacity:0;visibility:hidden}
 .stage-ready:not(.hero-complete) .mobile-ticket{visibility:hidden}
 .about-inner{display:block;min-height:100svh}
 .about-ruri{position:relative;inset:auto;width:78%;height:127vw;max-height:850px}
 .about-ruri img{top:0;width:100%;height:100%;object-position:center}
 .about-text-area{display:contents}
 .about-panel{display:none}
 .about-heading{position:absolute;left:35.8%;right:0;top:17.5vw;padding:8vw 0 9vw 6.2vw;isolation:isolate}
 .about-heading-bg{display:block}
 .about-heading>span{font-size:13px}
 .about-heading h2{font-size:clamp(16px,4.615vw,28px);line-height:1.8;margin:7vw 0 0}
 .about-heading h2 span{margin-bottom:6vw}.about-heading h2 span:last-child{margin-bottom:0}
 .about .statement{font-size:16px;padding:48px 24px 45px;line-height:2.35}
}

@media (min-width:799px) and (max-width:1025px){
 .hero-art>.catch-copy{left:calc(76% + 0.5vmax)}
}
@media (min-width:769px) and (max-height:745px){
 .hero-art{height:98vmin}
}

/* Opacity belongs to the slot; its image floats independently of the entrance. */
.stage-ready .hero-art .word-slot{opacity:0}
.hero-art .words-drifting .word-slot img{animation:word-float var(--float-duration,12s) ease-in-out var(--float-phase,0s) infinite}
@keyframes word-float{
  0%,100%{transform:translate(0,0)}
  35%{transform:translate(var(--float-x),var(--float-y))}
  70%{transform:translate(calc(var(--float-x) * -0.6),calc(var(--float-y) * 0.35))}
}

.stage-ready .catch-copy-draw-stroke{stroke-dasharray:1;stroke-dashoffset:1}

.scroll-reveal{opacity:0;translate:-28px 0;transition:opacity .8s ease,translate .8s cubic-bezier(.22,.61,.36,1)}
.scroll-reveal.is-revealed{opacity:1;translate:0 0}
@media print{.scroll-reveal{opacity:1;translate:none}}

.hero-date .venue-logo{display:block;width:140px;max-width:100%;height:auto;margin:14px auto 0}
.organization-logos{display:flex;align-items:center;gap:clamp(18px,3vw,36px);margin-top:28px}
.organization-logos img{display:block;min-width:0;height:auto;object-fit:contain}
.organization-logos img:first-child{width:170px;flex:0 1 170px}
.organization-logos img:last-child{width:297px;flex:0 1 297px}

.site-loader{display:none}
.loading-ready{overflow:hidden}
.loading-ready .site-loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--paper);color:var(--blue)}
.loading-ready body>header,.loading-ready main,.loading-ready .mobile-ticket{visibility:hidden}
.loader-art{width:min(240px,60vw);text-align:center}
.loader-art svg{display:block;width:100%;height:auto;overflow:visible}
.loader-route{fill:none;stroke:#00c8b3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.loader-goal{fill:#00c8b3;opacity:0}
.loader-caption{display:block;margin-top:26px;font:12px Georgia,serif;letter-spacing:.28em}

.loader-label{display:block;margin-bottom:24px;font:13px Georgia,serif;letter-spacing:.16em;animation:loader-label-blink 1.4s ease-in-out infinite}
@keyframes loader-label-blink{0%,100%{opacity:1}50%{opacity:.25}}

#schedule{padding-bottom:90px}
#schedule + #access{padding-top:90px;border-top:1px solid var(--line)}
@media(max-width:768px){
 #schedule{padding-bottom:50px}
 #schedule + #access{padding-top:50px}
}

.section-label > span{text-decoration-line:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:6px}

.buy-links a{position:relative;border-radius:0;align-items:center;gap:12px;padding:17px 22px;transition:color .4s ease,background-color .4s ease}
.buy-links a:hover,.buy-links a:focus-visible{opacity:1}
.buy-links a.buy-border-drawing{border-radius:0;color:#fff;background-color:rgb(255 255 255 / 35%)}
.buy-link-border{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);opacity:0;overflow:visible;fill:none;stroke:#fff;stroke-width:2;pointer-events:none}
.buy-link-border path{stroke-dasharray:1;stroke-dashoffset:1}
.buy-links a.buy-border-drawing .buy-link-border{opacity:1}
@keyframes buy-border-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

#access .button{position:relative;border:0;background-color:var(--line);transition:background-color .4s ease}
#access .button:hover,#access .button:focus-visible{opacity:1}
#access .button.buy-border-drawing{background-color:#b9cdce}
#access .button .buy-link-border{stroke:var(--ink);stroke-width:1}
#access .button.buy-border-drawing .buy-link-border{opacity:1}

.buy-links a.scroll-reveal,#access .button.scroll-reveal{transition:opacity .8s ease,translate .8s cubic-bezier(.22,.61,.36,1),color .4s ease,background-color .4s ease}

.back-to-top{position:fixed;right:24px;bottom:24px;z-index:9;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:var(--blue);color:#fff;text-decoration:none;box-shadow:0 3px 16px #0002;transition:background-color .2s ease,transform .2s ease}
.back-to-top[hidden]{display:none}
.back-to-top svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.back-to-top:hover{opacity:1;background:#26546b;transform:translateY(-3px)}
.loading-ready .back-to-top{visibility:hidden}
@media(max-width:768px){
 .back-to-top{left:auto;right:15px;bottom:calc(15px + env(safe-area-inset-bottom,0px))}
 .mobile-ticket{left:15px;right:auto;bottom:calc(15px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:768px){.hero-art > .key-visual{mix-blend-mode:normal}}

@media(max-width:768px){
 .organization-logos{flex-direction:column;align-items:flex-start;gap:24px}
 .organization-logos img:first-child,.organization-logos img:last-child{width:300px;min-width:300px;flex:none;height:auto}
}

.organization-logos img:first-child{width:180px;min-width:150px;max-width:180px;flex:0 1 180px;height:auto}
@media(max-width:768px){.organization-logos img:first-child{flex:none}}

.organization-logos img:last-child{width:250px;min-width:180px;max-width:250px;flex:0 1 250px;height:auto}
@media(max-width:768px){.organization-logos img:last-child{flex:none}}

.about-panel{background:rgba(255,255,255,.6)}
@media(min-width:769px) and (max-width:1024px){.about-ruri{width:63.583%}}

@media (min-width:769px) and (orientation:portrait){
 .hero-copy{left:68%}
 .hero-art > .catch-copy{left:calc(82% + 0.5vmax)}
 .hero-art{top:15%}
}