/* TOP (FV) from handoff/fv-scroll: 1440 × 808 proportions; side elements stick to the viewport edges. */
:root{
 --fv-unit:min(.069444444vw,.123762376svh);
 --fv-x:calc((100vw - 1440 * var(--fv-unit))/2);
 --fv-y:calc((100svh - 808 * var(--fv-unit))/2);
 --fv-green:#3fc43b;
}
.birth-pin{background:linear-gradient(105deg,#e3e3e3 0%,#fff 92%)!important}
.hero-composition .hero-title-ja,.hero-composition .hero-venue,.hero-composition .hero-dates{filter:none}
.hero-composition .hero-wordmark{filter:brightness(0)}

@media(min-width:701px){
 
 .birth-pin .hero-art .hero-brush{left:calc(var(--fv-x) + 72 * var(--fv-unit));top:calc(var(--fv-y) - 274 * var(--fv-unit));width:calc(1392 * var(--fv-unit));height:calc(1392 * var(--fv-unit));object-fit:contain;transform:none;filter:none}
 .hero-composition .hero-title-ja{left:calc(16 * var(--fv-unit));top:calc(16 * var(--fv-unit));width:calc(616 * var(--fv-unit));height:auto;object-fit:contain;visibility:visible}
 .hero-composition .hero-venue{left:calc(35 * var(--fv-unit));top:calc(var(--fv-y) + 420 * var(--fv-unit));bottom:auto;width:calc(390 * var(--fv-unit));height:auto}
 .hero-composition .hero-dates{left:auto;right:calc(16 * var(--fv-unit));top:calc(var(--fv-y) + 418 * var(--fv-unit));bottom:auto;width:calc(250 * var(--fv-unit));height:auto}
 .hero-composition .hero-wordmark{left:auto;right:calc(16 * var(--fv-unit));top:auto;bottom:calc(16 * var(--fv-unit));width:calc(830 * var(--fv-unit));height:auto}
 .hero-composition .hero-ticket{left:calc(14 * var(--fv-unit));top:auto;bottom:calc(7 * var(--fv-unit));width:calc(190 * var(--fv-unit));height:auto;filter:drop-shadow(0 calc(1 * var(--fv-unit)) calc(2 * var(--fv-unit)) rgba(0,0,0,.10))}

 /* Navigation scattered over the artboard, each label led by a green dot. */
 .top-header .brand{display:none}
 .top-header:not(.is-menu-open){position:absolute;inset:0 0 auto;width:100%;height:100svh;padding:0;background:transparent;border:0;pointer-events:none}
 .top-header:not(.is-menu-open) nav{position:absolute;inset:0;display:block;width:auto;padding:0;pointer-events:none}
 .top-header:not(.is-menu-open) nav a:nth-child(n){position:absolute;display:block;width:max-content;height:auto;min-height:0;padding:5px;margin-left:-24px;pointer-events:auto;transform:none}
 .top-header:not(.is-menu-open) nav img{width:auto;max-width:none;height:clamp(11px,calc(10 * var(--fv-unit)),16px);filter:brightness(0)}
 .top-header:not(.is-menu-open) nav a::before{content:'';position:absolute;left:0;top:50%;width:clamp(5px,calc(5.5 * var(--fv-unit)),8px);height:clamp(5px,calc(5.5 * var(--fv-unit)),8px);border-radius:50%;background:var(--fv-green);transform:translate(-100%,-50%)}
 .top-header:not(.is-menu-open) nav a:nth-child(1){left:calc(100% - 302 * var(--fv-unit));top:calc(18 * var(--fv-unit))}
 .top-header:not(.is-menu-open) nav a:nth-child(2){left:calc(100% - 239 * var(--fv-unit));top:calc(41 * var(--fv-unit))}
 .top-header:not(.is-menu-open) nav a:nth-child(3){left:calc(100% - 177 * var(--fv-unit));top:calc(50 * var(--fv-unit) + 16px)}
 .top-header:not(.is-menu-open) nav a:nth-child(4){left:calc(100% - 87 * var(--fv-unit));top:calc(73 * var(--fv-unit) + 16px)}
 .top-header:not(.is-menu-open) nav a:nth-child(5){left:calc(100% - 134 * var(--fv-unit));top:calc(96 * var(--fv-unit) + 16px)}
 .top-header:not(.is-menu-open) nav a:nth-child(6){left:calc(100% - 203 * var(--fv-unit));top:calc(119 * var(--fv-unit) + 16px)}
 .top-header:not(.is-menu-open) nav a:hover{opacity:.62;transform:none}
 .top-header:not(.is-menu-open) nav a:focus-visible{outline:1px solid var(--fv-green);outline-offset:3px}
}

/* Phones keep the stacked mockup layout, using the same handoff lettering and ticket. */
@media(max-width:700px){
 .hero-composition .hero-title-ja{display:block;visibility:visible;left:4vw;top:8vw;bottom:auto;width:79vw;height:auto}
 .hero-composition .hero-dates{opacity:1}
 .hero-composition .hero-ticket{right:1vw;bottom:3.8svh;left:auto;top:auto;width:50.6vw;height:auto}
}

/* Venue list as live text (JA/EN), replacing the outlined venue SVG on every screen size. */
.hero-composition .hero-venue{display:none}
.hero-venue-list li{padding-left:.9em}
.hero-venue-floor{display:inline-block;min-width:2.3em;margin-right:.5em}
@media(min-width:701px){
 .hero-venue-list{position:absolute;left:calc(35 * var(--fv-unit));top:calc(var(--fv-y) + 420 * var(--fv-unit));z-index:4;display:block;color:#000;font:400 calc(21 * var(--fv-unit))/1.55 'Zen Kaku Gothic Antique',sans-serif;letter-spacing:.02em;pointer-events:none}
 .hero-venue-list>div+div{margin-top:calc(14 * var(--fv-unit))}
 .hero-venue-building{margin:0;font-size:1.08em;font-weight:700;line-height:1.5}
 .hero-venue-list ul{margin:0;padding:0;list-style:none}
 .hero-venue-list li{display:flex;align-items:baseline;white-space:nowrap}
}