/* Center the three portrait rows; overflowing copy does not size the scene. */
html{overflow-x:clip}
body{min-height:100svh;display:flex;align-items:center;overflow:clip;padding-bottom:clamp(64px,8svh,80px)}
/* Three rows of 4:5 tiles need roughly 1.25 × their combined grid width.
   Cap width by viewport height too, leaving room for booking below the heads. */
.poster{--scene-gap:clamp(.5rem,1.2vw,1rem);min-height:0;width:min(100%,56rem,calc(80svh - 5rem));padding:clamp(1rem,2vw,1.75rem)}
.boys{gap:var(--scene-gap)}
.portrait-tile{margin:0;min-width:0;position:relative}
.poster[data-loading=true] .portrait-tile{opacity:0;visibility:hidden}
.portrait-flip{perspective:1100px;cursor:pointer;touch-action:none;container-type:inline-size;user-select:none;-webkit-user-select:none}
.portrait-turn{position:relative;transform-style:preserve-3d;transition:transform 620ms cubic-bezier(.22,.7,.2,1)}
.portrait-flip[data-flipped=true] .portrait-turn{transform:rotateY(180deg)}
.portrait-front,.portrait-back{backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.portrait-back{position:absolute;inset:0;transform:rotateY(180deg);isolation:isolate}
.portrait-snapshot,.portrait-halo{position:absolute;inset:0;width:100%;height:100%}
.portrait-snapshot{transform:scaleX(-1)}
.portrait-halo{visibility:hidden;filter:blur(var(--halo-blur,3px));mask-size:100% 100%;mask-repeat:no-repeat;mask-mode:alpha;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.portrait-halo[data-ready=true]{visibility:visible}
.portrait-details{--detail-fit:1;position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6%;color:var(--detail-ink,var(--pink));font-family:"Fraunces",Georgia,serif;font-size:calc(clamp(13px,7cqi,27px) * var(--detail-scale,1) * var(--detail-fit));line-height:1.45;text-align:center}
.portrait-details>*{flex-shrink:0;white-space:nowrap}
.portrait-detail-spacer{height:1.45em}
.portrait-details strong{color:inherit;font-size:calc(clamp(17px,9cqi,34px) * var(--detail-scale,1) * var(--detail-fit));font-weight:800;line-height:1.1;margin-bottom:.3em}
.portrait-flip[data-held=true]::after{display:none}
.portrait-flip:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.portrait-turn{transition:none}}
.boy,.beibi{aspect-ratio:4/5;height:auto;cursor:crosshair;touch-action:none}
.composition{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--scene-gap);margin-top:var(--scene-gap)}
.brand-copy{grid-column:span 2}
.portrait-tile[data-held=true]::after{content:'HELD';position:absolute;right:6px;top:6px;background:var(--paper);color:var(--brown);padding:4px 6px;border-radius:3px;font:9px Arial,sans-serif;letter-spacing:1px;pointer-events:none}
canvas:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
@media print{.portrait-tile::after{display:none!important}}

/* Supplied wordmark artwork preserves its justified, vertically elongated
   lettering and the exact adjective/ampersand/letter overlap order. */
.brand-copy{display:block;position:relative;container-type:normal;min-width:0}
.wordmark-art{display:block;width:100%;height:auto}

.wordmark-art{aspect-ratio:960/1547;overflow:visible;pointer-events:none;user-select:none;-webkit-user-select:none}
.wordmark-art path{fill:var(--pink)!important}
.wordmark-art .wordmark-adjectives text{font-family:"Snell Local","Snell Roundhand",cursive!important;fill:var(--brown)!important}

/* Size the layout box around the two title lines; let the adjective stack
   extend beyond it, behind the portrait row above. */
.boys{position:relative;z-index:2}
.composition{position:relative;padding-bottom:0}
.composition>.portrait-tile{z-index:2}
.brand-copy{width:92%;justify-self:end;align-self:end;aspect-ratio:960/580;z-index:1}
/* Position the enlarged wordmark just above Live’s lower edge. */
.wordmark-art{position:absolute;inset:auto auto 0 0;transform:translate(-2%,35.6%)}

.booking{margin:0;text-align:left;color:var(--brown);font-family:"Fraunces",Georgia,serif;font-size:clamp(12px,1.15vw,15px);font-weight:500;line-height:1.35}
.booking{position:absolute;top:calc(100% + var(--scene-gap));left:0;width:calc((100% - var(--scene-gap)) * 2 / 3);z-index:2;overflow-wrap:anywhere}
.booking a{display:block;width:fit-content;max-width:100%;color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}.booking a:hover{color:var(--pink)}
.booking a:focus-visible{outline:2px solid var(--pink);outline-offset:4px}.booking>span{display:none}

/* Only the ball intercepts clicks; the cable and surrounding space pass through. */
.disco-rig{position:fixed;z-index:5;pointer-events:none;transform:translateY(calc(-100vh - 220px));transition:transform 900ms cubic-bezier(.45,0,.7,1),translate 160ms ease-out}
.disco-rig.is-lowered{transform:translateY(0);transition-duration:500ms;transition-timing-function:linear}
.disco-rig::before{content:'';position:absolute;left:calc(50% - .5px);bottom:92%;width:1px;height:150vh;background:linear-gradient(90deg,#80736a,#c3b6a7);opacity:.85}
.disco-rig::after{content:'';position:absolute;left:46%;top:5%;width:8%;height:5%;border-radius:2px 2px 0 0;background:#80736a}
.disco-rig canvas{display:block;width:100%;height:100%}
.disco-dismiss{position:absolute;inset:8%;border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:none;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.disco-rig.is-lowered .disco-dismiss{pointer-events:auto}
.disco-rig.is-dragging,.disco-rig.is-flying{transition:none}
.disco-lighting{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;background:radial-gradient(ellipse at 50% 35%,rgba(19,12,30,.4),rgba(10,6,18,.76));transition:opacity 450ms ease,visibility 0s 450ms}
.disco-lighting.is-on{opacity:1;visibility:visible;transition-delay:0s}
.disco-reflection{position:absolute;width:var(--spot-size);height:var(--spot-size);border-radius:35%;background:radial-gradient(ellipse,rgba(var(--light),.95) 0%,rgba(var(--light),.65) 16%,rgba(var(--light),.18) 38%,rgba(var(--light),0) 70%);mix-blend-mode:screen;opacity:.6;animation:disco-reflection-drift var(--duration) ease-in-out var(--phase) infinite alternate paused}
.disco-lighting[data-moving=true] .disco-reflection{animation-play-state:running}
@keyframes disco-reflection-drift{0%{transform:translate3d(calc(var(--travel-x) * -.5),calc(var(--travel-y) * -.5),0) rotate(-25deg) scaleX(var(--stretch));opacity:.25}50%{opacity:.85}100%{transform:translate3d(var(--travel-x),var(--travel-y),0) rotate(25deg) scaleX(var(--stretch));opacity:.4}}
@media(prefers-reduced-motion:reduce){.disco-rig,.disco-rig.is-lowered{transition:none}}
@media(prefers-reduced-motion:reduce){.disco-reflection{animation:none}.disco-lighting{transition:none}}
@media print{.disco-rig,.disco-lighting{display:none}}