:root { --gate-gold: #d9b574; --gate-cream: #fff3df; }

.direct-section .reveal { opacity: 1; transform: none; transition: none; }

.js body.gate-locked { overflow: hidden; }
.ceremonial-gate { display: none; }
.js .ceremonial-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; min-height: 100svh; min-height: 100dvh; padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); overflow: hidden; background: transparent; color: var(--gate-cream); isolation: isolate; }
.js .ceremonial-gate[hidden] { display: none; }
.fireworks-canvas { position: fixed; inset: 0; z-index: 999; width: 100%; height: 100%; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .32s ease, visibility 0s linear .32s; }
.fireworks-canvas.is-active { visibility: visible; opacity: 1; transition-delay: 0s; }
.gate-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 47%, rgba(217,181,116,.2), transparent 28%), radial-gradient(circle at 50% 110%, rgba(166,31,43,.7), transparent 45%); opacity: .9; }
.gate-panel { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 1; overflow: hidden; background-color: var(--burgundy); background-image: linear-gradient(90deg, rgba(255,255,255,.025), transparent 18%, rgba(0,0,0,.09) 50%, transparent 82%), repeating-linear-gradient(90deg, transparent 0 48px, rgba(217,181,116,.055) 49px 50px); transition: transform 1.35s cubic-bezier(.77,0,.18,1); }
.gate-panel::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(217,181,116,.35); }
.gate-panel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #8a6128, #f0d49b 45%, #8a6128); box-shadow: 0 0 24px rgba(0,0,0,.45); }
.gate-panel-left { left: 0; }
.gate-panel-left::after { right: 0; }
.gate-panel-right { right: 0; }
.gate-panel-right::after { left: 0; }
.gate-filigree { position: absolute; width: min(48vw, 250px); height: 86%; top: 7%; stroke: rgba(217,181,116,.48); stroke-width: 1.15; }
.gate-panel-left .gate-filigree { right: -8px; }
.gate-panel-right .gate-filigree { left: -8px; transform: scaleX(-1); }
.gate-arch { position: absolute; z-index: 2; inset: max(18px, 3vw); max-width: 620px; margin: auto; border: 1px solid rgba(240,212,155,.7); border-radius: 48% 48% 4px 4px; pointer-events: none; box-shadow: inset 0 0 0 5px rgba(82,24,32,.7), inset 0 0 0 6px rgba(217,181,116,.22); transition: opacity .55s ease; }
.gate-arch::before, .gate-arch::after { content: "✦"; position: absolute; top: 49%; color: var(--gate-gold); font-size: 11px; }
.gate-arch::before { left: -6px; }.gate-arch::after { right: -6px; }
.gate-arch span { position: absolute; inset: 10px; border: 1px solid rgba(217,181,116,.25); border-radius: inherit; }
.gate-content { position: relative; z-index: 4; width: min(86vw, 520px); text-align: center; transition: opacity .38s ease, transform .5s ease; }
.gate-kicker { margin: 0 0 24px; color: #e3c58e; text-transform: uppercase; letter-spacing: .34em; font-size: 8px; font-weight: 600; }
.gate-medallion { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; width: 106px; height: 106px; margin: 0 auto 30px; border: 1px solid var(--gate-gold); border-radius: 50%; font-family: var(--serif); font-size: 27px; }
.gate-medallion::before { content: ""; position: absolute; inset: -11px; border: 1px dashed rgba(217,181,116,.48); border-radius: 50%; animation: medallionSpin 30s linear infinite; }
.gate-medallion::after { content: ""; position: absolute; inset: -25px; background: repeating-conic-gradient(from 0deg, transparent 0deg 11deg, rgba(217,181,116,.45) 12deg 13deg); border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 0 61%, #000 62% 65%, transparent 66%); mask: radial-gradient(circle, transparent 0 61%, #000 62% 65%, transparent 66%); }
.gate-medallion i { color: var(--gate-gold); font-size: 15px; }
.gate-content h1 { color: var(--gate-cream); font-size: clamp(49px, 15.5vw, 91px); line-height: .84; letter-spacing: -.055em; }
.gate-content h1 em { color: var(--gate-gold); font-weight: 400; }
.gate-date { display: flex; justify-content: center; align-items: center; width: fit-content; margin: 32px auto; padding: 10px 0; border-top: 1px solid rgba(217,181,116,.42); border-bottom: 1px solid rgba(217,181,116,.42); text-align: left; }
.gate-date > span { padding: 0 14px 0 6px; color: var(--gate-gold); font-family: var(--serif); font-size: 42px; line-height: 1; }
.gate-date p { margin: 0; padding-left: 14px; border-left: 1px solid rgba(217,181,116,.42); font-family: var(--serif); font-size: 14px; line-height: 1.45; }
.gate-date b { font-family: var(--sans); font-size: 7px; text-transform: uppercase; letter-spacing: .18em; }
.enter-button { position: relative; min-width: min(290px, 82vw); height: 58px; padding: 0 8px 0 24px; border: 1px solid var(--gate-gold); border-radius: 99px; background: var(--gate-gold); color: #351015; display: inline-flex; align-items: center; justify-content: space-between; text-transform: uppercase; letter-spacing: .2em; font-size: 8px; font-weight: 700; cursor: pointer; box-shadow: 0 17px 50px rgba(0,0,0,.34); transition: transform .25s ease, background .25s ease; }
.enter-button i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--burgundy); color: var(--gate-gold); font-style: normal; font-size: 12px; }
.enter-button:hover { transform: translateY(-3px); background: #efd09b; }
.enter-button:focus-visible, .skip-intro:focus-visible, .replay-opening:focus-visible { outline: 2px solid var(--gate-cream); outline-offset: 4px; }
.skip-intro { display: block; min-width: 44px; min-height: 44px; margin: 8px auto -4px; padding: 0 14px; border: 0; background: transparent; color: rgba(255,243,223,.72); text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase; letter-spacing: .17em; font-size: 7px; cursor: pointer; }
.gate-hint { margin: 15px 0 0; color: rgba(255,243,223,.55); font-family: var(--serif); font-size: 11px; font-style: italic; }
.floating-petals { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.floating-petals i { position: absolute; top: -8%; width: 9px; height: 16px; border-radius: 100% 0 100% 0; background: #c79a53; opacity: .55; animation: petalFall 9s linear infinite; }
.floating-petals i:nth-child(1) { left: 10%; animation-delay: -3s; }.floating-petals i:nth-child(2) { left: 26%; animation-delay: -7s; animation-duration: 12s; }.floating-petals i:nth-child(3) { left: 43%; animation-delay: -1s; }.floating-petals i:nth-child(4) { left: 62%; animation-delay: -5s; animation-duration: 11s; }.floating-petals i:nth-child(5) { left: 78%; animation-delay: -8s; }.floating-petals i:nth-child(6) { left: 91%; animation-delay: -4s; animation-duration: 13s; }
.ceremonial-gate.is-opening .gate-content { opacity: 0; transform: scale(.92); }
.ceremonial-gate.is-opening .gate-arch { opacity: 0; }
.ceremonial-gate.is-opening .gate-panel-left { transform: translateX(-102%); }
.ceremonial-gate.is-opening .gate-panel-right { transform: translateX(102%); }
.ceremonial-gate.is-opening .gate-glow, .ceremonial-gate.is-opening .floating-petals { opacity: 0; transition: opacity .8s ease .35s; }

@keyframes medallionSpin { to { transform: rotate(360deg); } }
@keyframes petalFall { 0% { transform: translate3d(0,-10vh,0) rotate(0); } 50% { transform: translate3d(28px,55vh,0) rotate(190deg); } 100% { transform: translate3d(-18px,112vh,0) rotate(370deg); } }

.dramatic-page .hero { position: relative; isolation: isolate; }
.dramatic-page #mainTitle:focus { outline: none; }
.dramatic-page .hero::before { content: "N&S"; position: absolute; left: 1vw; bottom: -2vw; z-index: -1; color: rgba(82,24,32,.045); font-family: var(--serif); font-size: 25vw; line-height: .7; letter-spacing: -.12em; white-space: nowrap; }
.hero-ornament { position: absolute; color: var(--gold); opacity: .48; }
.ornament-one { left: 2.5vw; top: 8%; font-size: 12px; }.ornament-two { left: 47%; bottom: 9%; font-size: 20px; }
.dramatic-page .photo-frame { border: 1px solid rgba(185,146,85,.45); box-shadow: 0 34px 80px rgba(74,30,23,.17); }
.dramatic-page .hero-visual::before { content: ""; position: absolute; inset: -16px 22px 14px -16px; border: 1px solid rgba(185,146,85,.42); border-radius: 48% 48% 3px 3px; pointer-events: none; }
.dramatic-page .closing-image img { object-position: 68% 50%; transform: translateX(-5%) scale(1.1); }
.section-flourish { display: grid; place-items: center; width: 75px; height: 75px; margin: -32px auto 55px; color: var(--red); border: 1px solid rgba(166,31,43,.25); border-radius: 50%; }
.section-flourish::before, .section-flourish::after { content: ""; position: absolute; width: min(31vw, 360px); height: 1px; background: linear-gradient(90deg, transparent, rgba(166,31,43,.28)); transform: translateX(-210px); }
.section-flourish::after { transform: translateX(210px) scaleX(-1); }
.dramatic-page .day-card { position: relative; overflow: hidden; isolation: isolate; }
.day-halo { position: absolute; width: 390px; height: 390px; border: 1px solid rgba(185,146,85,.28); border-radius: 50%; z-index: -1; }
.day-halo::before, .day-halo::after { content: ""; position: absolute; inset: 22px; border: 1px dashed rgba(166,31,43,.16); border-radius: 50%; }
.day-halo::after { inset: 48px; border-style: solid; }
.dramatic-page .venue .button-light { min-height: 46px; padding: 0 7px 0 18px; gap: 22px; border: 1px solid rgba(217,181,116,.72); border-radius: 99px; background: transparent; color: var(--gate-cream); }
.dramatic-page .venue .button-light > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gate-gold); color: var(--burgundy); font-size: 12px; transition: transform .25s ease; }
.dramatic-page .venue .button-light:hover { background: rgba(217,181,116,.1); }
.dramatic-page .venue .button-light:hover > span { transform: translate(2px, -2px); }
.dramatic-page .venue .button-light:focus-visible { outline: 2px solid var(--gate-cream); outline-offset: 4px; }
.replay-opening { min-height: 44px; padding: 0 4px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; text-transform: uppercase; letter-spacing: .17em; font-size: 9px; cursor: pointer; }

.programme { position: relative; overflow: hidden; background: #eee5d8; }
.programme::before { content: "7—11"; position: absolute; right: -2vw; top: 4vw; color: rgba(82,24,32,.035); font-family: var(--serif); font-size: 20vw; line-height: .8; letter-spacing: -.08em; pointer-events: none; }
.programme-heading { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr .6fr; gap: 8vw; align-items: end; margin-bottom: 75px; }
.programme-heading h2 { font-size: clamp(48px, 5.2vw, 82px); }
.programme-heading > p { max-width: 360px; margin: 0 0 5px; padding-left: 22px; border-left: 1px solid rgba(82,24,32,.28); color: #64645c; font-family: var(--serif); font-size: 15px; line-height: 1.7; }
.programme-card { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(245px, .34fr) 1fr; max-width: 1180px; margin: 0 auto; border: 1px solid rgba(82,24,32,.22); background: #faf6ef; box-shadow: 0 32px 80px rgba(72,42,28,.1); }
.programme-date { position: relative; min-height: 100%; padding: 62px 30px 50px; overflow: hidden; background: var(--burgundy); color: var(--gate-cream); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.programme-date::before { content: ""; position: absolute; width: 300px; height: 300px; border: 1px solid rgba(217,181,116,.26); border-radius: 50%; box-shadow: 0 0 0 22px rgba(217,181,116,.035), 0 0 0 44px rgba(217,181,116,.025); }
.programme-date::after { content: "✦"; position: absolute; top: 28px; color: var(--gate-gold); font-size: 12px; }
.programme-date span, .programme-date strong, .programme-date i { position: relative; z-index: 1; }
.programme-date > span { text-transform: uppercase; letter-spacing: .25em; font-size: 8px; font-weight: 600; }
.programme-date strong { margin: 30px 0 25px; color: var(--gate-gold); font-family: var(--serif); font-size: clamp(110px, 10vw, 160px); font-weight: 400; line-height: .65; letter-spacing: -.1em; transform: translateX(-.04em); }
.programme-date i { margin-top: 55px; color: rgba(255,243,223,.68); font-family: var(--serif); font-size: 12px; }
.programme-table-wrap { padding: 25px clamp(25px, 3.5vw, 54px) 34px; }
.programme-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.programme-table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.programme-table th { padding: 17px 0 20px; border-bottom: 1px solid rgba(82,24,32,.35); color: #8e6c4b; text-align: left; text-transform: uppercase; letter-spacing: .23em; font-size: 8px; }
.programme-table th:first-child, .programme-table td:first-child { width: clamp(135px, 16vw, 205px); }
.programme-table td { padding: 15px 0; border-bottom: 1px solid rgba(82,24,32,.12); vertical-align: middle; }
.programme-table td:first-child { color: var(--burgundy); font-family: var(--serif); font-size: clamp(15px, 1.3vw, 19px); font-variant-numeric: tabular-nums; }
.programme-event { position: relative; padding-right: 36px !important; color: #34362f; font-family: var(--serif); font-size: clamp(14px, 1.25vw, 18px); line-height: 1.4; }
.programme-table tbody { counter-reset: event; }
.programme-table tbody tr { counter-increment: event; transition: background .2s ease; }
.programme-table tbody tr:not(.farewell):hover { background: rgba(217,181,116,.075); }
.programme-event::after { content: counter(event, decimal-leading-zero); position: absolute; right: 3px; top: 50%; color: rgba(82,24,32,.2); font-family: var(--sans); font-size: 8px; letter-spacing: .12em; transform: translateY(-50%); }
.programme-table .milestone .programme-event { color: var(--burgundy); font-size: clamp(16px, 1.45vw, 21px); }
.programme-table .milestone .programme-event::before { content: "◆"; position: absolute; left: -20px; top: 50%; color: var(--gate-gold); font-size: 6px; transform: translateY(-50%); }
.programme-table .farewell td { padding-top: 23px; padding-bottom: 23px; border-bottom: 0; background: var(--burgundy); color: var(--gate-cream); }
.programme-table .farewell td:first-child { padding-left: 17px; color: var(--gate-gold); }
.programme-table .farewell .programme-event { padding-left: 17px; font-size: clamp(18px, 1.55vw, 22px); font-style: italic; }
.programme-table .farewell .programme-event::after { right: 15px; color: rgba(255,243,223,.35); }

.film { position: relative; overflow: hidden; background: #25110f; color: var(--gate-cream); display: grid; grid-template-columns: .72fr 1.28fr; gap: 7vw; align-items: center; }
.film::before { content: ""; position: absolute; width: 48vw; height: 48vw; left: -18vw; bottom: -30vw; border: 1px solid rgba(217,181,116,.18); border-radius: 50%; box-shadow: 0 0 0 35px rgba(217,181,116,.025), 0 0 0 70px rgba(217,181,116,.02); pointer-events: none; }
.film-heading { position: relative; z-index: 1; }
.film-heading h2 { font-size: clamp(54px, 5.6vw, 92px); }
.film-heading h2 i { color: var(--gate-gold); }
.film-heading > p:last-child { max-width: 350px; margin: 35px 0 0; color: rgba(255,243,223,.65); font-family: var(--serif); font-size: 17px; line-height: 1.65; }
.video-frame { position: relative; padding: 12px; border: 1px solid rgba(217,181,116,.46); box-shadow: 0 35px 90px rgba(0,0,0,.34); }
.video-frame::before, .video-frame::after { content: "✦"; position: absolute; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; background: #25110f; color: var(--gate-gold); font-size: 9px; }
.video-frame::before { left: -15px; top: -15px; }.video-frame::after { right: -15px; bottom: -15px; }
.video-facade, .video-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-facade { position: relative; padding: 0; overflow: hidden; background: #110907; color: white; cursor: pointer; }
.video-facade > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); filter: saturate(.72) contrast(1.02); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.video-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,5,8,.68), rgba(28,5,8,.08) 65%), linear-gradient(0deg, rgba(10,3,3,.35), transparent 55%); }
.play-mark { position: absolute; left: 9%; top: 50%; display: grid; place-items: center; width: clamp(66px, 7vw, 94px); height: clamp(66px, 7vw, 94px); border: 1px solid rgba(255,243,223,.72); border-radius: 50%; background: rgba(82,24,32,.78); transform: translateY(-50%); box-shadow: 0 12px 35px rgba(0,0,0,.28); transition: transform .3s ease, background .3s ease; }
.play-mark::before { content: ""; position: absolute; inset: -7px; border: 1px dashed rgba(217,181,116,.5); border-radius: 50%; }
.play-mark i { margin-left: 4px; color: var(--gate-gold); font-style: normal; font-size: 18px; }
.play-copy { position: absolute; left: 9%; bottom: 10%; display: grid; gap: 5px; text-align: left; }
.play-copy b { font-family: var(--serif); font-size: clamp(18px, 2vw, 28px); font-weight: 400; }
.play-copy small { color: var(--gate-gold); text-transform: uppercase; letter-spacing: .2em; font-size: 7px; }
.video-facade:hover > img { transform: scale(1.055); filter: saturate(.9) contrast(1.04); }
.video-facade:hover .play-mark { transform: translateY(-50%) scale(1.07); background: var(--burgundy); }
.video-facade:focus-visible { outline: 3px solid var(--gate-gold); outline-offset: 5px; }

@media (max-width: 760px) {
  .gate-arch { inset: 14px; border-radius: 48% 48% 2px 2px; }
  .gate-content { margin-top: -1vh; }
  .gate-medallion { width: 88px; height: 88px; margin-bottom: 27px; font-size: 24px; }
  .gate-kicker { margin-bottom: 21px; }
  .gate-content h1 { font-size: clamp(44px, 13.5vw, 61px); }
  .gate-date { margin: 27px auto; }
  .dramatic-page .hero { padding-top: 65px; }
  .dramatic-page .hero::before { font-size: 43vw; bottom: 38%; transform: rotate(-90deg); left: -21vw; }
  .ornament-one { display: none; }.ornament-two { left: auto; right: 17px; bottom: 44%; }
  .dramatic-page .hero-visual::before { inset: -10px 14px 12px -10px; }
  .section-flourish { margin-top: -42px; margin-bottom: 45px; }
  .section-flourish::before, .section-flourish::after { width: 105px; transform: translateX(-88px); }
  .section-flourish::after { transform: translateX(88px) scaleX(-1); }
  .day-halo { width: 315px; height: 315px; }
  .replay-opening { order: 2; }
  .programme { padding-left: 20px; padding-right: 20px; }
  .programme::before { top: 110px; right: -4vw; font-size: 34vw; }
  .programme-heading { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .programme-heading h2 { font-size: clamp(36px, 11.5vw, 54px); }
  .programme-heading > p { max-width: 320px; padding-left: 18px; font-size: 14px; }
  .programme-card { grid-template-columns: 1fr; }
  .programme-date { min-height: 285px; padding: 45px 20px 38px; }
  .programme-date::before { width: 230px; height: 230px; }
  .programme-date strong { margin: 25px 0 19px; font-size: 112px; }
  .programme-date i { margin-top: 32px; }
  .programme-table-wrap { padding: 18px 17px 24px; }
  .programme-table th { padding: 14px 0 17px; }
  .programme-table th:first-child, .programme-table td:first-child { width: 104px; }
  .programme-table td { padding: 16px 0; }
  .programme-table td:first-child { font-size: 14px; }
  .programme-event { padding-right: 23px !important; font-size: 14px; }
  .programme-table .milestone .programme-event { font-size: 15.5px; }
  .programme-table .milestone .programme-event::before { display: none; }
  .programme-event::after { right: 0; font-size: 7px; }
  .programme-table .farewell td:first-child { padding-left: 10px; }
  .programme-table .farewell .programme-event { padding-left: 10px; padding-right: 25px !important; font-size: 17px; }
  .film { grid-template-columns: 1fr; gap: 48px; padding-left: 20px; padding-right: 20px; }
  .film-heading h2 { font-size: clamp(50px, 15.5vw, 70px); }
  .film-heading > p:last-child { margin-top: 25px; }
  .video-frame { padding: 7px; }
  .video-frame::before, .video-frame::after { width: 24px; height: 24px; }
  .video-frame::before { left: -12px; top: -12px; }.video-frame::after { right: -12px; bottom: -12px; }
  .play-mark { left: 8%; width: 58px; height: 58px; }
  .play-copy { left: 8%; bottom: 8%; }
}

@media (max-height: 700px) {
  .gate-medallion { width: 72px; height: 72px; margin-bottom: 18px; }
  .gate-kicker { margin-bottom: 14px; }
  .gate-content h1 { font-size: clamp(44px, 13vh, 67px); }
  .gate-date { margin: 20px auto; }
  .gate-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fireworks-canvas { display: none; }
  .gate-medallion::before, .floating-petals i { animation: none; }
  .gate-panel { transition-duration: .01ms; }
  .gate-content, .gate-arch { transition-duration: .01ms; }
}
