/* The portraits stay on stage as the shutters open into the introduction's space. */
.friends-showcase{--friend-duration:620ms;--friend-ease:cubic-bezier(.16,1,.3,1);--friends-height:clamp(660px,46vw,710px);--friends-intro-width:30vw;display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);background:#151515;color:var(--color-text,#f4e8d4);font-family:var(--font-body,'Inter',sans-serif);isolation:isolate;scroll-margin-top:0;overflow-anchor:none;overflow:hidden;transition:grid-template-columns var(--friend-duration) var(--friend-ease)}
.friends-showcase *{box-sizing:border-box}
.friends-introduction{align-self:center;min-width:0;padding:48px clamp(24px,3vw,48px) 48px var(--page-gutter,6vw);transition:opacity 220ms ease,transform var(--friend-duration) var(--friend-ease)}
.friends-kicker{font-size:14px;font-weight:600;line-height:1.5;color:var(--color-accent,#f4e8d4);margin:0 0 22px}
.friends-introduction h2{font:600 clamp(48px,4.8vw,72px)/1.02 var(--font-heading,'Source Serif 4',sans-serif);letter-spacing:-.02em;margin:0 0 24px;color:var(--color-text,#f4e8d4)}
.friends-introduction h2 span{display:block}
.friends-introduction>p:not(.friends-kicker){font-size:18px;line-height:1.65;max-width:30ch;color:var(--color-muted,#b9ad9c);margin:0 0 18px}
.friends-introduction>p.friends-invitation{font-weight:600;color:var(--color-text,#f4e8d4);margin-bottom:20px}
.friends-introduction>p.friends-hint{font-size:15px;line-height:1.6;margin-bottom:12px}
.friends-touch-hint{display:none}
.friends-shows-link,.friend-book{display:inline-flex;align-items:center;gap:24px;min-height:44px;font-size:16px;font-weight:600;color:var(--color-accent,#f4e8d4);text-decoration:underline;text-underline-offset:5px}
.friends-shows-link span,.friend-book span{font-size:22px;text-decoration:none}
.friends-panels{display:flex;min-width:0;min-height:var(--friends-height);perspective:1600px;background:#151515;position:relative}
.friend-panel{position:relative;min-width:0;flex:1 1 0;overflow:hidden;background:#24211e;box-shadow:-12px 0 24px -12px #0009;transition:flex-grow var(--friend-duration) var(--friend-ease),flex-basis var(--friend-duration) var(--friend-ease);isolation:isolate}
.friend-panel+.friend-panel{border-left:1px solid #f4e8d426}
.friend-cover{position:absolute;inset:0 auto 0 0;width:100%;transform-origin:left center;transition:width var(--friend-duration) var(--friend-ease),background-color 300ms ease;backface-visibility:hidden;pointer-events:none;overflow:hidden}
.friend-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#151515c7,transparent 40%,#15151566),linear-gradient(0deg,#151515 5%,#15151522 78%)}
.friend-cover img{display:block;position:absolute;left:50%;top:var(--portrait-top,0%);width:calc(var(--friends-height) * var(--portrait-width,1));max-width:none;height:auto;transform:translateX(var(--portrait-shift,-50%));filter:saturate(.65) brightness(.68);transition:width var(--friend-duration) var(--friend-ease),top var(--friend-duration) var(--friend-ease),filter 400ms ease}
/* Position faces, not source-image borders, on a shared eye line. */
[data-friend="chris"]{--portrait-top:-3%;--portrait-width:1.036;--portrait-shift:-53%;--compact-width:220%}
[data-friend="chris"] .friend-cover{background:#302b26}
[data-friend="cash-robins"] .friend-cover{background:#151515}
[data-friend="cash-robins"] .friend-cover img{width:270%;max-width:760px;height:auto;top:3%;mask-image:linear-gradient(#000 75%,transparent 100%)}
[data-friend="jaicee"]{--portrait-top:-14%;--portrait-width:.999;--compact-width:180%}
[data-friend="terral"]{--portrait-top:-19%;--portrait-width:.785;--portrait-shift:-52%;--compact-width:190%;--compact-top:-4%}
.friend-trigger{position:absolute;inset:0;z-index:3;width:100%;padding:0;border:0;border-radius:0;background:transparent;color:var(--color-text,#f4e8d4);text-align:left;cursor:pointer}
.friend-trigger-label{position:absolute;bottom:76px;left:50%;display:flex;flex-direction:column;gap:9px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);white-space:nowrap;text-shadow:0 2px 6px #000,0 3px 14px #000}
.friend-trigger-name{font:600 clamp(38px,3.2vw,46px)/1.12 var(--font-heading,'Source Serif 4',sans-serif);letter-spacing:0}
.friend-trigger-note{font-size:16px;font-weight:600;line-height:1.4;color:#f4e8d4;letter-spacing:.01em}
.friend-toggle{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:44px;height:44px;display:grid;place-items:center;font:300 30px/1 var(--font-body);color:var(--color-accent,#f4e8d4);transition:transform 300ms ease}
.friend-trigger:focus-visible{outline:3px solid var(--color-accent,#f4e8d4);outline-offset:-5px}
.friend-content{position:relative;z-index:1;padding:40px 32px 32px;min-width:0;transform-origin:left center;color:var(--color-text,#f4e8d4);background:#24211e}
.friend-format{font-size:15px;font-weight:500;line-height:1.6;color:var(--color-accent,#f4e8d4);margin:0 44px 10px 0}
.friend-content h3{font:600 clamp(34px,3.2vw,46px)/1.06 var(--font-heading,'Source Serif 4',sans-serif);letter-spacing:-.015em;margin:0 0 15px;color:var(--color-text,#f4e8d4)}
.friend-content>p:not(.friend-format){font-size:17px;line-height:1.6;color:var(--color-muted,#b9ad9c);margin:0 0 20px;max-width:52ch}
.friend-media{margin:0 0 14px;max-width:560px}
.friend-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#151515;color-scheme:dark}
.friend-media figcaption{font-size:14px;line-height:1.55;margin-top:10px;color:var(--color-muted,#b9ad9c)}
.friend-media figcaption span{display:block;color:var(--color-text,#f4e8d4)}
.friend-book{margin-top:4px}
/* The readable, non-JavaScript version also keeps every act reachable. */
.friends-showcase:not(.is-enhanced){display:block}
.friends-showcase:not(.is-enhanced) .friends-introduction{max-width:700px}
.friends-showcase:not(.is-enhanced) .friends-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.friends-showcase:not(.is-enhanced) .friend-trigger,.friends-showcase:not(.is-enhanced) .friend-cover{display:none}
.friends-showcase.is-enhanced .friends-panels{height:var(--friends-height)}
.friends-showcase.is-enhanced .friend-content{position:absolute;inset:0 0 0 32%;overflow:auto;opacity:0;visibility:hidden;transform:perspective(1400px) rotateY(85deg);transition:transform var(--friend-duration) var(--friend-ease),opacity 260ms ease,visibility 0s 620ms;pointer-events:none}
.friends-showcase.is-enhanced .has-active .friend-panel{flex:0 0 clamp(76px,9vw,160px)}
.friends-showcase.is-enhanced .has-active .friend-panel.is-active{flex:1 1 0}
.friends-showcase.is-enhanced .friend-panel.is-active .friend-cover{width:32%}
.friend-panel.is-active .friend-cover img{filter:saturate(.9) brightness(.9);mask-image:linear-gradient(#000 70%,transparent 100%)}
.friend-panel.is-active .friend-cover::after{background:linear-gradient(90deg,#15151522,transparent 60%,#24211e55),linear-gradient(0deg,#15151577,transparent 50%)}
.friends-showcase.is-enhanced .friend-panel.is-active .friend-content{opacity:1;visibility:visible;transform:perspective(1400px) rotateY(0deg);transition-delay:100ms,140ms,0s;pointer-events:auto}
.friends-showcase.is-enhanced .friend-panel.is-active .friend-trigger{inset:14px 12px auto auto;width:44px;height:44px;background:#151515}
.friend-panel.is-active .friend-trigger-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;writing-mode:horizontal-tb;transform:none}
.friend-panel.is-active .friend-toggle{inset:0;transform:rotate(45deg)}
.friends-showcase :is(.friends-shows-link,.friend-book,.friend-video):focus-visible{outline:3px solid var(--color-accent,#f4e8d4);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.friend-panel:hover .friend-cover img{filter:saturate(.9) brightness(.86)}.friend-book:hover,.friends-shows-link:hover{color:#f4e8d4}}
@media(max-width:1180px){.friends-showcase{--friends-intro-width:29vw;grid-template-columns:minmax(0,29%) minmax(0,1fr)}.friends-introduction{padding-left:32px;padding-right:28px}.friend-content{padding:38px 24px 24px}.friend-trigger-name{font-size:38px}}
@media(min-width:981px){.friends-showcase.is-enhanced .friends-introduction{width:var(--friends-intro-width)}.friends-showcase.is-enhanced.has-active{grid-template-columns:minmax(0,0%) minmax(0,1fr)}.friends-showcase.is-enhanced.has-active .friends-introduction{opacity:0;transform:translateX(-40px);pointer-events:none}}
@media(max-width:980px){.friends-showcase{--friends-height:600px;grid-template-columns:1fr}.friends-introduction{padding:44px var(--page-gutter);display:grid;grid-template-columns:1fr 1.2fr;column-gap:40px;align-items:start}.friends-kicker{grid-column:1;margin-bottom:14px}.friends-introduction h2{grid-column:1;grid-row:2/5;font-size:56px;margin:0}.friends-introduction>p:not(.friends-kicker){grid-column:2;max-width:43ch}.friends-introduction>p:not(.friends-kicker):not(.friends-hint):not(.friends-invitation){grid-row:1/3;margin-bottom:10px}.friends-introduction>p.friends-invitation{margin-bottom:8px}.friends-introduction>p.friends-hint{margin-bottom:0}.friends-shows-link{grid-column:2}.friend-content{padding:32px 22px 24px}.friend-trigger-name{font-size:42px}}
@media(max-width:640px){.friends-introduction{display:block;padding:40px 24px 30px}.friends-introduction h2{font-size:52px;margin-bottom:22px}.friends-introduction h2 span{display:inline}.friends-introduction>p:not(.friends-kicker){max-width:42ch;font-size:17px}.friends-introduction>p.friends-hint{font-size:15px;margin:18px 0 4px}.friends-pointer-hint{display:none}.friends-touch-hint{display:inline}.friends-panels,.friends-showcase.is-enhanced .friends-panels{display:block;height:auto;min-height:0}.friend-panel{height:92px;transition:none}.friend-panel+.friend-panel{border-left:0;border-top:1px solid #f4e8d426}.friend-cover img{object-position:50% 40%}.friend-cover::after{background:linear-gradient(90deg,#151515d9 20%,#15151555 100%)}.friend-trigger-label{writing-mode:horizontal-tb;transform:none;left:24px;bottom:16px;gap:5px;max-width:calc(100% - 90px)}.friend-trigger-name{font-size:32px;line-height:1.1;white-space:normal}.friend-trigger-note{font-size:15px}.friend-toggle{inset:auto 17px 24px auto;transform:none}.friends-showcase.is-enhanced .friend-panel.is-active{height:auto}.friends-showcase.is-enhanced .friend-content{inset:0;transform:perspective(1100px) rotateX(-65deg);transform-origin:center top;padding:28px 24px 24px;overflow:visible}.friends-showcase.is-enhanced .friend-panel.is-active .friend-cover{width:100%;height:220px}.friends-showcase.is-enhanced .friend-panel.is-active .friend-content{position:relative;inset:auto;margin-top:220px;transform:perspective(1100px) rotateX(0)}.friend-content h3{font-size:40px}.friend-content>p:not(.friend-format){font-size:17px}.friend-format{font-size:15px;margin-right:0}.friends-showcase:not(.is-enhanced) .friends-panels{grid-template-columns:1fr}.friends-showcase:not(.is-enhanced) .friend-panel{height:auto}}
@media(hover:none),(pointer:coarse){.friends-pointer-hint{display:none}.friends-touch-hint{display:inline}}
/* All resting shutters use the same small portrait above a black name strip. */
@media(min-width:641px){.has-active .friend-panel:not(.is-active) .friend-trigger-name{font-size:34px}.has-active .friend-panel:not(.is-active) .friend-cover{background:#151515}.has-active .friend-panel:not(.is-active) .friend-cover img{width:var(--compact-width,270%);max-width:none;top:var(--compact-top,0%);mask-image:linear-gradient(#000 60%,transparent 100%);filter:saturate(.8) brightness(.82)}.has-active .friend-panel:not(.is-active) .friend-cover::after{background:linear-gradient(90deg,#15151555,transparent 40%,#15151555),linear-gradient(transparent 140px,#151515 340px)}}
@media(max-width:640px){.has-active .friend-panel:not(.is-active) .friend-trigger-note{display:block}}
/* Short phone rows use their own close crops beside the performer names. */
@media(max-width:640px){.friend-cover img{left:calc(100% - 116px);width:auto;height:170px;top:0;transform:translateX(-50%)}[data-friend="chris"] .friend-cover img{height:300px;top:-10px;transform:translateX(-53%)}[data-friend="cash-robins"] .friend-cover img{width:300px;max-width:none;height:auto;top:-5px}[data-friend="jaicee"] .friend-cover img{height:180px;top:-27px;mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}[data-friend="terral"] .friend-cover img{height:230px;top:-26px}.friend-panel.is-active .friend-cover img{width:100%;height:100%;top:0;left:0;transform:none;object-fit:cover;object-position:50% var(--mobile-portrait-position,25%);mask-image:none}.friend-panel.is-active[data-friend="chris"]{--mobile-portrait-position:4%}.friend-panel.is-active[data-friend="cash-robins"]{--mobile-portrait-position:35%}.friend-panel.is-active[data-friend="terral"]{--mobile-portrait-position:15%}}
/* Anchor phone scrolling to the stable panel edges, never the rotating contents. */
@media(max-width:640px){.friends-showcase,.friends-panels,.friend-panel{overflow-anchor:auto}.friend-cover,.friend-trigger,.friend-content{overflow-anchor:none}}
@media(prefers-reduced-motion:reduce){.friends-showcase,.friends-introduction,.friend-panel,.friend-cover,.friend-cover img,.friend-toggle,.friends-showcase.is-enhanced .friend-content{transition:none!important}.friends-showcase.is-enhanced .friend-content,.friends-showcase.is-enhanced .friend-panel.is-active .friend-cover,.friends-showcase.is-enhanced .friend-panel.is-active .friend-content{transform:none}}