/* Fullscreen scenes. All motion is derived from native scroll position. */
.experience-page { display: block; overscroll-behavior-y: none; overflow-anchor: none; }
.experience-header, .story-controls {
  position: fixed; left: 0; right: 0; height: 82px; z-index: 10;
  background: var(--paper); display: flex; align-items: center; gap: 24px; padding: 0 4%;
}
.experience-header { top: 0; }
.story-brand { font-size: 21px; font-weight: 500; letter-spacing: -.5px; }
.story-heading { font-size: 11px; letter-spacing: 1px; }
.experience-actions { margin-left: auto; display: flex; align-items: center; gap: 30px; font-size: 14px; }
.experience-actions a { min-height: 44px; display: inline-flex; align-items: center; }
.story-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip; perspective: 1800px; background: var(--paper); }
.story-track { position: relative; width: 100%; height: 100%; }
.story-panel {
  --scene-bg: var(--paper); --scene-ink: var(--ink); --scene-text: var(--body-text);
  --scene-accent: var(--accent); --scene-sheet: #d6c4af; --photo-bg: var(--surface);
  --enter: calc(1 - var(--arrival, 1)); --exit: var(--departure, 0);
  position: absolute; inset: 0; isolation: isolate; width: 100%; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: 8vw; padding: 128px 8vw; overflow: hidden;
  background: var(--scene-bg); color: var(--scene-ink);
  transform-origin: 50% 65%;
  transform: translate3d(0, calc(var(--enter) * 100vh - var(--exit) * 10vh), 0) rotate(calc(var(--enter) * -6deg)) scale(calc(.92 + var(--arrival, 1) * .08 - var(--exit) * .06));
  opacity: clamp(0, calc(var(--arrival, 1) * 3), calc(1 - var(--exit) * .22));
  will-change: transform, clip-path;
}
.story-panel[hidden] { display: none; }
/* The incoming scene sits above the outgoing scene, like a new page in an album. */
.scene-portrait {
  clip-path: inset(calc(var(--enter) * 50%) calc(var(--enter) * 50%) round calc(var(--enter) * 100px));
  transform: translateY(calc(var(--exit) * -8vh)) scale(calc(.88 + var(--arrival, 1) * .12 - var(--exit) * .05));
}
.scene-focus {
  clip-path: circle(calc(var(--arrival, 1) * 150%) at 65% 50%);
  transform: scale(calc(1.35 - var(--arrival, 1) * .35 - var(--exit) * .08));
}
.scene-ticket {
  transform: translate3d(calc(var(--enter) * 110vw), calc(var(--enter) * 24vh - var(--exit) * 10vh), 0) rotate(calc(var(--enter) * -8deg + var(--exit) * 3deg));
}
.scene-wide {
  clip-path: inset(calc(var(--enter) * 100%) 0 0 0);
  transform: translateY(calc(var(--exit) * -8vh)) scale(calc(1.08 - var(--arrival, 1) * .08 - var(--exit) * .05));
}
.story-panel[data-tone="clay"] { --scene-bg: #c77751; --scene-ink: #262117; --scene-text: #262117; --scene-accent: #262117; --scene-sheet: #edd8af; --photo-bg: #e5c7a0; }
.story-panel[data-tone="olive"] { --scene-bg: #c5c4a0; --scene-ink: #293a2e; --scene-text: #354432; --scene-accent: #6b3925; --scene-sheet: #8e9a72; --photo-bg: #d9d7b9; }
.story-panel[data-tone="teal"] { --scene-bg: #203e3c; --scene-ink: #f0dfb8; --scene-text: #e3dbc7; --scene-accent: #e6ac76; --scene-sheet: #a7784b; --photo-bg: #d2c7aa; }
.story-panel[data-tone="wine"] { --scene-bg: #572f3c; --scene-ink: #f5e5c6; --scene-text: #e8d4c7; --scene-accent: #e7b182; --scene-sheet: #b88257; --photo-bg: #e5cbb2; }
.chapter-copy { min-width: 0; z-index: 2; transform: translateY(calc(var(--enter) * 45px - var(--exit) * 30px)); }
.chapter-copy .eyebrow { color: var(--scene-text); font-size: 11px; letter-spacing: 1.1px; margin: 0 0 22px; }
.chapter-copy h1, .chapter-copy h2 {
  color: var(--scene-ink); font-size: clamp(35px, 4.6vw, 76px); font-weight: 400;
  letter-spacing: -.055em; line-height: 1.04; margin: 0 0 28px;
}
.title-word {
  --word-reveal: clamp(0, calc(var(--arrival, 1) * 1.8 - var(--word-index) * .06), 1);
  display: inline-block;
  clip-path: inset(calc((1 - var(--word-reveal)) * 100%) -10% -25%);
  transform: translateY(calc((1 - var(--word-reveal)) * 45px));
  opacity: var(--word-reveal);
}
.chapter-text { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; color: var(--scene-text); max-width: 510px; margin: 0; }
.chapter-copy .text-link { color: var(--scene-accent); margin-top: 10px; }
.chapter-copy a:focus-visible { outline-color: var(--scene-ink); }
.scene-visual { position: relative; min-width: 0; height: min(49vh, 430px); perspective: 1200px; }
.chapter-media {
  position: relative; z-index: 1; width: 100%; height: 100%; margin: 0;
  padding: 12px 12px 32px; background: var(--mat); color: #554633;
  box-shadow: 0 20px 40px #171b1a25;
  transform: translate3d(calc(var(--enter) * 50px + var(--pointer-x, 0) * 7px), calc((1 - var(--settle, 0)) * 24px + var(--pointer-y, 0) * 5px), 0) rotate(calc(-8deg + var(--settle, 0) * 5deg + var(--exit) * 9deg)) rotateY(calc(var(--enter) * -24deg)) scale(calc(.87 + var(--settle, 0) * .13));
}
.photo-window { width: 100%; height: 100%; overflow: hidden; clip-path: inset(calc((1 - var(--settle, 0)) * 12%) 0 0); }
.photo-window img { transform: scale(calc(1.14 - var(--settle, 0) * .14)); }
.chapter-media img, .chapter-media .photo-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.chapter-media .photo-placeholder { display: flex; background: var(--photo-bg); color: #3d372e; padding: 24px; }
.chapter-media .photo-placeholder > span { font-family: var(--display); font-size: 19px; font-weight: 500; max-width: 260px; }
.chapter-media .photo-placeholder > small { color: #3d372e; font-size: 11px; }
/* Approved illustrations, actual logos and the original news headline. */
.photo-window--logo { background: #fff; display: grid; place-items: center; }
.photo-window--logo img { width: 82%; height: 78%; object-fit: contain; transform: none; }
.photo-window--map { background: #f8f2e7; }
.photo-window--map img { object-fit: contain; transform: none; }
.photo-window--window img { object-position: left center; transform: scale(calc(1.39 - var(--settle, 0) * .14)); transform-origin: left center; }
.photo-window--brand { background: #131915; }
.brand-lockup { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 15px; padding: 20px; color: #eceee8; }
.brand-lockup img { width: clamp(30px, 4vw, 58px); height: auto; object-fit: contain; transform: none; }
.brand-lockup span { font: 600 clamp(34px, 4vw, 56px)/1 'Playfair Display', Georgia, serif; }
.news-clipping { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; height: 100%; padding: clamp(18px, 2.4vw, 36px); background: #fff; color: #393939; }
.news-clipping a { font-size: clamp(11px, 1vw, 14px); font-weight: 600; color: #1e4764; text-underline-offset: 3px; }
.news-clipping img { height: auto; object-fit: contain; transform: none; }
.news-clipping time { font-size: 12px; color: #666; }
.image-credit { position: absolute; left: 15px; bottom: 10px; font-size: 10px; line-height: 1.2; color: #62554a; }
.image-credit a { text-underline-offset: 2px; }
.scene-sheet {
  position: absolute; inset: -8px 10px 12px -6px; background: var(--scene-sheet);
  transform: translateX(calc((1 - var(--settle, 0)) * -30px)) rotate(calc(-10deg + var(--settle, 0) * 15deg));
}
.scene-portrait .scene-visual { width: min(78%, calc((51vh - 44px) * .8 + 24px)); max-width: 365px; justify-self: center; height: min(51vh, 470px); }
.scene-focus .chapter-media { transform: translateY(calc(var(--pointer-y, 0) * 7px)) rotate(calc(9deg - var(--settle, 0) * 6deg)) scale(calc(.78 + var(--settle, 0) * .22)); }
.scene-wide .scene-visual, .scene-ticket .scene-visual { height: min(39vh, 350px); }
.scene-ticket .chapter-media { border-radius: 3px; padding: 15px 15px 42px; transform: translateX(calc((1 - var(--settle, 0)) * 65px)) rotate(calc(-12deg + var(--settle, 0) * 7deg)); }
.story-controls { bottom: 0; justify-content: space-between; gap: 20px; }
.chapter-status { font-size: 13px; display: flex; gap: 8px; }
.chapter-slash, #chapter-total { color: var(--muted); }
.chapter-dots { display: flex; gap: 3px; }
.chapter-dots button { width: 33px; min-height: 44px; border: 0; padding: 0; background: transparent; font-size: 12px; color: var(--muted); }
.chapter-dots button[aria-current="step"] { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }
.story-navigation { display: flex; align-items: center; gap: 24px; }
.scroll-cue { font-size: 12px; color: var(--muted); }
.story-navigation button { min-height: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; font-size: 14px; }
.story-navigation button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 5px; }
.story-navigation button:disabled { opacity: .3; cursor: default; }
.no-script { position: fixed; inset: 20% 10%; background: var(--paper); z-index: 30; padding: 30px; font-size: 22px; }
.no-script a { display: block; text-decoration: underline; margin-top: 24px; }
@media (max-width: 1050px) {
  .story-panel { gap: 5vw; padding-left: 6vw; padding-right: 6vw; }
  .scroll-cue { display: none; }
  .chapter-dots button { width: 29px; }
}
@media (max-width: 720px) {
  .experience-header, .story-controls { height: 70px; padding: 0 6%; }
  .story-heading, .chapter-dots { display: none; }
  .experience-actions { gap: 22px; font-size: 13px; }
  .story-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 30px; padding: 92px 8vw 110px; }
  .chapter-copy h1, .chapter-copy h2 { font-size: clamp(30px, 8.6vw, 48px); margin-bottom: 17px; }
  .chapter-copy .eyebrow { font-size: 10px; letter-spacing: .6px; margin-bottom: 12px; }
  .chapter-text { font-size: 15px; line-height: 1.55; }
  .chapter-copy .text-link { font-size: 13px; margin-top: 6px; padding: 6px 0; }
  .scene-visual, .scene-portrait .scene-visual, .scene-wide .scene-visual, .scene-ticket .scene-visual { height: 100%; width: 88%; max-height: 340px; min-height: 0; justify-self: center; margin: 0; align-self: center; }
  .scene-portrait .scene-visual { width: 76%; }
  .chapter-media { padding: 9px 9px 27px; }
  .chapter-media .photo-placeholder { padding: 12px; gap: 7px; }
  .chapter-media .photo-placeholder > span { font-size: 15px; }
  .chapter-media .photo-placeholder > small { font-size: 10px; }
  .brand-lockup { gap: 11px; padding: 12px; }
  .news-clipping { gap: 16px; padding: 16px; }
  .news-clipping time { font-size: 10px; }
}
@media (max-height: 700px) {
  .story-panel { padding-top: 91px; padding-bottom: 105px; }
  .experience-header, .story-controls { height: 66px; }
  .chapter-copy h1, .chapter-copy h2 { font-size: clamp(28px, 5.7vh, 48px); margin-bottom: 14px; }
  .chapter-text { font-size: 14px; line-height: 1.45; }
  .chapter-copy .eyebrow { margin-bottom: 10px; }
}
@media (max-height: 700px) and (max-width: 720px) {
  .story-panel { gap: 21px; padding: 82px 8vw 100px; }
  .chapter-copy h1, .chapter-copy h2 { font-size: 29px; }
  .chapter-media .photo-placeholder > span { font-size: 12px; }
  .chapter-media .photo-placeholder { gap: 4px; padding: 7px; }
}
/* Event panoramas keep every person, the event banner and photo credit in frame. */
.story-panel .scene-visual--full { height: auto; align-self: center; }
.scene-visual--full .chapter-media { height: auto; padding: 12px; }
.scene-visual--full .photo-window { height: auto; clip-path: none; }
.scene-visual--full img { height: auto; object-fit: contain; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .story-panel { will-change: auto; }
  .story-panel, .chapter-copy, .title-word, .chapter-media, .photo-window img, .scene-sheet { transform: none !important; }
  .story-panel, .photo-window, .title-word { clip-path: none !important; }
  .story-panel, .title-word { opacity: 1; }
}