@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2"); font-style: italic; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin.woff2") format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; }

:root { color-scheme: light; --ivory: #fffaf0; --ink: #fbfff7; --ink-soft: rgba(251,255,247,.78); --line: rgba(252,255,245,.5); --leaf: #77a462; --water: #4d948c; --pink: #f3a3b6; --deep-green: #164d37; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; background: #6d9a79; font-family: "Inter", Arial, sans-serif; }
button, a { font: inherit; }
button { color: inherit; }

.experience { position: relative; width: 100vw; height: 100vh; height: 100svh; overflow: hidden; background: #6d9a79; isolation: isolate; }
.media-stage, .station-still, .segment-video, .summer-light, .water-glint, .pollen { position: absolute; inset: 0; width: 100%; height: 100%; }
.media-stage { z-index: 0; overflow: hidden; }
.station-still, .segment-video { object-fit: cover; }
.station-still { z-index: 1; opacity: 1; transform: scale(1.002); transition: opacity .08s linear; }
.segment-video { z-index: 2; display: block; opacity: 0; pointer-events: none; }
.segment-video.is-active { opacity: 1; }
.segment-video.is-playing { z-index: 3; }
.experience.is-moving .station-still { opacity: 0; }
.summer-light { z-index: 3; pointer-events: none; background: rgba(255,247,214,.06); mix-blend-mode: screen; }
.water-glint { z-index: 4; pointer-events: none; opacity: .22; background: linear-gradient(112deg, transparent 20%, rgba(255,255,230,.22) 44%, transparent 58%); background-size: 230% 100%; mix-blend-mode: screen; animation: water-shift 12s ease-in-out infinite alternate; }
.pollen { z-index: 5; overflow: hidden; pointer-events: none; }
.pollen i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,251,215,.88); box-shadow: 0 0 7px rgba(255,249,201,.8); opacity: 0; animation: pollen-drift 9s linear infinite; }
.pollen i:nth-child(1) { left: 12%; top: 78%; animation-delay: -2s; }
.pollen i:nth-child(2) { left: 26%; top: 65%; animation-delay: -6s; animation-duration: 12s; }
.pollen i:nth-child(3) { left: 39%; top: 84%; animation-delay: -4s; }
.pollen i:nth-child(4) { left: 53%; top: 72%; animation-delay: -8s; animation-duration: 11s; }
.pollen i:nth-child(5) { left: 66%; top: 88%; animation-delay: -1s; }
.pollen i:nth-child(6) { left: 76%; top: 68%; animation-delay: -7s; animation-duration: 13s; }
.pollen i:nth-child(7) { left: 87%; top: 82%; animation-delay: -5s; }
.pollen i:nth-child(8) { left: 94%; top: 73%; animation-delay: -9s; animation-duration: 14s; }

.masthead, .caption, .rail, .scroll-cue { position: absolute; z-index: 10; color: var(--ink); }
.masthead { top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 78px; padding: 0 42px; border-bottom: 1px solid rgba(255,255,255,.26); opacity: 0; transform: translateY(-12px); transition: opacity .8s ease .35s, transform .8s ease .35s; }
.experience.is-active .masthead { opacity: 1; transform: none; }
.monogram { width: fit-content; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; text-decoration: none; text-shadow: 0 1px 14px rgba(20,65,44,.28); }
.study-mark { display: flex; align-items: center; gap: 13px; margin: 0; font-size: 9px; font-weight: 500; letter-spacing: .2em; text-shadow: 0 1px 12px rgba(20,65,44,.36); }
.study-mark i { width: 38px; height: 1px; background: rgba(255,255,255,.55); }
.sound-toggle { justify-self: end; display: flex; align-items: center; gap: 9px; padding: 10px 0; border: 0; background: transparent; font-size: 9px; letter-spacing: .16em; cursor: pointer; text-shadow: 0 1px 12px rgba(20,65,44,.36); }
.sound-bars { display: flex; align-items: center; gap: 2px; width: 12px; height: 12px; }
.sound-bars i { display: block; width: 1px; height: 4px; background: currentColor; transition: height .25s ease; }
.sound-bars i:nth-child(2) { height: 8px; }
.sound-bars i:nth-child(3) { height: 5px; }
.sound-toggle[aria-pressed="true"] .sound-bars i { animation: sound-bar .7s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.35s; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.15s; }

.caption { transition: opacity .2s ease, transform .42s cubic-bezier(.2,.74,.2,1); text-shadow: 0 2px 22px rgba(14,58,37,.42); }
.experience:not(.is-active) .caption { opacity: 0; }
.caption.is-exiting { opacity: 0; pointer-events: none; }
.caption.is-preparing { opacity: 0; }
.caption.enter-up.is-exiting, .caption.enter-up.is-preparing { transform: translateY(24px); }
.caption.enter-left.is-exiting, .caption.enter-left.is-preparing { transform: translateX(-28px); }
.caption.enter-right.is-exiting, .caption.enter-right.is-preparing { transform: translateX(28px); }
.caption-heading h1 { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; line-height: .78; letter-spacing: 0; }
.caption-kicker, .caption-detail span { margin: 0; font-family: "Inter", Arial, sans-serif; font-size: 9px; font-weight: 500; line-height: 1.4; letter-spacing: .2em; }
.caption-kicker { margin-bottom: 14px; color: rgba(255,255,245,.88); }
.caption-detail { display: flex; align-items: center; gap: 16px; }
.caption-detail p { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; font-style: italic; line-height: 1.25; }
.caption-detail span { color: var(--ink-soft); white-space: nowrap; }
.caption-rule { flex: 0 0 auto; display: block; width: 52px; height: 1px; background: var(--pink); box-shadow: 0 0 8px rgba(243,163,182,.3); }

.layout-wide-low { left: 8vw; right: 12vw; bottom: 8vh; display: grid; grid-template-columns: minmax(350px,.95fr) minmax(360px,1.05fr); align-items: end; gap: 6vw; }
.layout-wide-low .caption-heading h1 { font-size: clamp(76px,8.5vw,132px); }
.layout-wide-low .caption-detail { padding-bottom: 9px; }
.layout-top-right { top: 18vh; right: 8vw; width: min(460px,40vw); text-align: right; }
.layout-top-right .caption-heading h1 { font-size: clamp(64px,7.3vw,112px); }
.layout-top-right .caption-detail { justify-content: flex-end; margin-top: 23px; }
.layout-top-right .caption-detail p { max-width: 270px; }
.layout-top-right .caption-detail span { display: none; }
.layout-mid-left { top: 29vh; left: 6vw; width: min(410px,35vw); }
.layout-mid-left .caption-heading { padding-left: 24px; border-left: 1px solid var(--pink); }
.layout-mid-left .caption-heading h1 { max-width: 390px; font-size: clamp(68px,7.2vw,108px); line-height: .79; }
.layout-mid-left .caption-detail { align-items: flex-start; margin-top: 25px; padding-left: 25px; }
.layout-mid-left .caption-rule { width: 1px; height: 44px; background: rgba(255,255,255,.62); }
.layout-mid-left .caption-detail p { max-width: 240px; }
.layout-mid-left .caption-detail span { display: none; }
.layout-bottom-right { right: 8vw; bottom: 10vh; width: min(500px,43vw); text-align: right; }
.layout-bottom-right .caption-heading h1 { font-size: clamp(68px,7.5vw,116px); }
.layout-bottom-right .caption-detail { justify-content: flex-end; margin-top: 23px; }
.layout-bottom-right .caption-detail p { max-width: 320px; }
.layout-bottom-right .caption-detail span { display: none; }

.rail { top: 50%; right: 32px; display: grid; gap: 17px; transform: translateY(-50%); opacity: 0; transition: opacity .7s ease .7s; }
.experience.is-active .rail { opacity: 1; }
.rail-line { position: absolute; z-index: -1; top: 9px; bottom: 9px; right: 3px; width: 1px; background: rgba(255,255,255,.32); }
.rail-button { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 9px; width: 32px; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rail-button span { color: rgba(255,255,255,.6); font-size: 8px; letter-spacing: .08em; opacity: 0; transform: translateX(4px); transition: opacity .25s ease, transform .25s ease; }
.rail-button i { position: relative; display: block; width: 7px; height: 7px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(67,122,86,.22); transition: background .25s ease, box-shadow .25s ease, transform .25s ease; }
.rail-button:hover span, .rail-button:focus-visible span, .rail-button.is-active span { opacity: 1; transform: none; }
.rail-button.is-active i { border-color: var(--pink); background: var(--pink); box-shadow: 0 0 0 4px rgba(243,163,182,.16),0 0 11px rgba(255,207,216,.8); transform: scale(.75); }
.scroll-cue { right: 41px; bottom: 30px; display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.7); font-size: 8px; letter-spacing: .17em; writing-mode: vertical-rl; opacity: 0; transition: opacity .6s ease 1s; }
.experience.is-active .scroll-cue { opacity: 1; }
.scroll-cue i { display: block; width: 1px; height: 30px; background: rgba(255,255,255,.5); animation: cue 1.8s ease-in-out infinite; }

.opening { position: absolute; z-index: 30; inset: 0; overflow: hidden; color: var(--deep-green); transition: visibility 0s linear 1.25s; }
.opening:focus-visible { outline: 1px solid rgba(22,77,55,.7); outline-offset: -8px; }
.experience.is-ready .opening { cursor: pointer; }
.opening-veil { position: absolute; inset: 0; background: rgba(255,250,230,.83); backdrop-filter: saturate(.72) brightness(1.17); transform: translateY(0); transition: transform 1.25s cubic-bezier(.7,0,.2,1); }
.opening-copy { position: relative; z-index: 1; display: grid; grid-template-rows: 1fr auto 1fr; width: 100%; height: 100%; padding: 42px 7vw 38px; transition: opacity .7s ease, transform .8s ease; }
.opening-kicker { align-self: start; margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .24em; }
.opening h2 { align-self: center; margin: 0; color: #245b42; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(90px,13.5vw,208px); font-weight: 500; line-height: .62; letter-spacing: 0; }
.opening h2 span, .opening h2 em { display: block; }
.opening h2 em { margin-left: 28vw; color: #b96d7e; font-weight: 400; }
.opening-footer { align-self: end; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.opening-footer > p { margin: 0; font-size: 9px; font-weight: 500; line-height: 1.7; letter-spacing: .18em; }
.entry-cue { display: flex; align-items: center; gap: 18px; margin: 0; padding: 13px 0 10px; border-bottom: 1px solid currentColor; color: #285c43; font-size: 10px; font-weight: 600; letter-spacing: .19em; opacity: .52; }
.entry-cue::after { content: ""; display: block; width: 36px; height: 1px; background: currentColor; transition: width .3s ease; }
.experience.is-ready .entry-cue { opacity: 1; }
.experience.is-ready .opening:hover .entry-cue::after { width: 52px; }
.load-status { justify-self: end; display: grid; grid-template-columns: auto 72px; align-items: center; gap: 10px; min-width: 110px; font-size: 9px; letter-spacing: .14em; }
.load-status > i { display: block; height: 1px; background: rgba(22,77,55,.22); }
.load-status b { display: block; width: 0; height: 1px; background: #b96d7e; transition: width .25s ease; }
.experience.is-entering .opening-copy { opacity: 0; transform: translateY(-18px); }
.experience.is-entering .opening-veil { transform: translateY(100%); }
.experience.is-active .opening { visibility: hidden; pointer-events: none; }

.load-error { position: absolute; z-index: 40; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; background: rgba(255,250,230,.94); color: var(--deep-green); }
.load-error[hidden] { display: none; }
.load-error p { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; }
.load-error button { padding: 10px 18px; border: 1px solid currentColor; background: transparent; font-size: 9px; letter-spacing: .18em; cursor: pointer; }

@keyframes water-shift { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes pollen-drift { 0% { opacity: 0; transform: translate3d(0,0,0); } 15% { opacity: .65; } 75% { opacity: .28; } 100% { opacity: 0; transform: translate3d(24px,-150px,0); } }
@keyframes sound-bar { from { height: 3px; } to { height: 10px; } }
@keyframes cue { 0%,100% { transform: scaleY(.35); transform-origin: top; opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 700px) {
  .masthead { min-height: 60px; padding: 0 18px; grid-template-columns: 1fr 1fr; }
  .study-mark { display: none; }
  .monogram { font-size: 19px; }
  .sound-toggle { font-size: 8px; }
  .caption, .layout-wide-low, .layout-top-right, .layout-mid-left, .layout-bottom-right { top: auto; left: 18px; right: 48px; bottom: 24px; display: block; width: auto; max-width: none; text-align: left; }
  .caption-heading, .layout-mid-left .caption-heading { padding: 0; border: 0; }
  .caption-heading h1, .layout-wide-low .caption-heading h1, .layout-top-right .caption-heading h1, .layout-mid-left .caption-heading h1, .layout-bottom-right .caption-heading h1 { max-width: none; font-size: 54px; line-height: .82; }
  .caption-kicker { margin-bottom: 10px; font-size: 8px; }
  .caption-detail, .layout-wide-low .caption-detail, .layout-top-right .caption-detail, .layout-mid-left .caption-detail, .layout-bottom-right .caption-detail { justify-content: flex-start; align-items: center; gap: 11px; margin-top: 16px; padding: 0; }
  .caption-detail p { max-width: 250px; font-size: 17px; }
  .caption-rule, .layout-mid-left .caption-rule { width: 28px; height: 1px; }
  .caption-detail span { display: none; }
  .rail { top: 50%; right: 12px; gap: 11px; }
  .rail-button { width: 22px; }
  .rail-button span { display: none; }
  .scroll-cue { display: none; }
  .opening-copy { padding: 26px 20px 22px; }
  .opening h2 { font-size: clamp(62px,20vw,80px); line-height: .7; }
  .opening h2 em { margin-left: 8vw; }
  .opening-footer { grid-template-columns: 1fr auto; gap: 20px; }
  .opening-footer > p { display: none; }
  .entry-cue { font-size: 9px; }
  .load-status { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; grid-template-columns: auto 1fr; }
}

@media (max-height: 650px) and (min-width: 701px) {
  .masthead { min-height: 62px; }
  .layout-wide-low { bottom: 6vh; }
  .layout-top-right { top: 16vh; }
  .layout-mid-left { top: 25vh; }
  .layout-bottom-right { bottom: 7vh; }
  .opening-copy { padding-top: 28px; padding-bottom: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .water-glint, .pollen i, .scroll-cue i, .sound-toggle[aria-pressed="true"] .sound-bars i { animation: none; }
  .caption, .opening-copy, .opening-veil { transition-duration: .01ms; }
}