/* Photo, veil, caption and text move at separate depths. */
.story { cursor: pointer; touch-action: pan-y; outline: none; }
.story .fg { padding-bottom: calc(var(--safe-bottom) + 76px); }
.story .text { font-family: var(--display); font-weight: 300; font-size: clamp(30px, 8.6vw, 38px); line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; text-shadow: 0 2px 20px #15120c55; }
.story .text.small { font-size: clamp(24px, 6.8vw, 29px); }
.story .caption { top: calc(var(--safe-top) + 52px); }
.story .caption span { display: block; }
.story .tap { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 32px); z-index: 3; }
.story-veil { position: absolute; inset: -15px; z-index: 1; pointer-events: none; background: linear-gradient(180deg,#17140d20 15%,transparent 25%,#17140da3 48%,#17140dc7); }
.story .hint .chev { display: inline-block; margin-left: 8px; font-family: var(--display); font-style: normal; font-size: 15px; line-height: 1; vertical-align: -2px; will-change: transform; }


/* Save the venue imagery for the full curtain opening that follows this line. */
.story.curtain-lead { color:#60654f; background:#f3eee3; }
.story.curtain-lead .fg.bottom { position:absolute; inset:0; display:grid; place-items:center; padding:80px 32px; }
.story.curtain-lead .text { margin:0; max-width:370px; text-align:center; font-size:clamp(36px,10vw,48px); line-height:1.14; text-shadow:none; }
.story.curtain-lead .hint { color:#7b7e6b; }
.device:has(.curtain-lead) .vignette { opacity:.08; }
.device:has(.curtain-lead) #sound { color:#716c58; border-color:#716c5833; background:#f8f3e855; }