@font-face {
  font-family: "Cormorant Garamond";
  src: url("./brand/CormorantGaramond.ttf?v=b38f795fd1060f70") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --petrol: #15535a;
  --petrol-deep: #103f45;
  --petrol-ticket: #103e44; /* Petrol with 25% black. */
  --gold: #e9e1b2;
  --goldDark: #c1b883;
  --goldLight: #f4edc9;
  --ink: var(--gold);
  --muted: #c3c9b3;
  --border: #e9e1b247;
  --surface: #144a51;
  --white: #f4edc9;
  --black: #103f45;
  --wine: var(--gold);
  --wine-hover: #fff5cc;
  --font-display: "Cormorant Garamond";
  --frame: clamp(10px, 2vw, 24px);
  --panel-radius: 0px;
  --poster-header-offset-y: 0px;
  --poster-height: calc(100svh - 2 * var(--frame));
  --motion-state: paused;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--gold);
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  min-width: 280px;
  color: var(--ink);
  background: var(--petrol);
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.campaign-page {
  background: var(--gold);
}
/* Four opaque edge boxes, without a transparent full-viewport layer above them.
   WebKit ignores primary colors on boxes <= 10px thick. Extend the horizontal
   boxes 2px outward so they qualify even with zero safe-area insets, without
   changing the visible frame width. */
.viewport-edge {
  position: fixed;
  z-index: 90;
  background: var(--gold);
  pointer-events: none;
}
.viewport-edge--top,
.viewport-edge--bottom {
  left: 0;
  right: 0;
}
.viewport-edge--top {
  top: calc(-1 * (env(safe-area-inset-top, 0px) + 2px));
  height: calc(var(--frame) + env(safe-area-inset-top, 0px) + 2px);
}
.viewport-edge--bottom {
  bottom: calc(-1 * (env(safe-area-inset-bottom, 0px) + 2px));
  height: calc(var(--frame) + env(safe-area-inset-bottom, 0px) + 2px);
}
.viewport-edge--left,
.viewport-edge--right {
  top: 0;
  bottom: 0;
  width: var(--frame);
}
.viewport-edge--left {
  left: 0;
}
.viewport-edge--right {
  right: 0;
}
/* Round the viewport opening even while a panel scrolls past its edges.
   Keep these small cutouts attached to the opaque bars, so no transparent
   full-screen layer interferes with Safari's edge-color sampling. */
.viewport-edge--top::before,
.viewport-edge--top::after,
.viewport-edge--bottom::before,
.viewport-edge--bottom::after {
  content: "";
  position: absolute;
  width: var(--panel-radius);
  height: var(--panel-radius);
  background: radial-gradient(circle at var(--corner-origin), transparent calc(var(--panel-radius) - 0.5px), var(--gold) var(--panel-radius));
}
.viewport-edge--top::before,
.viewport-edge--top::after {
  top: 100%;
}
.viewport-edge--bottom::before,
.viewport-edge--bottom::after {
  bottom: 100%;
}
.viewport-edge--top::before,
.viewport-edge--bottom::before {
  left: var(--frame);
}
.viewport-edge--top::after,
.viewport-edge--bottom::after {
  right: var(--frame);
}
.viewport-edge--top::before {
  --corner-origin: 100% 100%;
}
.viewport-edge--top::after {
  --corner-origin: 0% 100%;
}
.viewport-edge--bottom::before {
  --corner-origin: 100% 0%;
}
.viewport-edge--bottom::after {
  --corner-origin: 0% 0%;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--goldLight);
  outline-offset: 5px;
}
button {
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--gold);
  color: var(--petrol);
}
.link-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.page-frame {
  position: relative;
  z-index: 1;
  padding: var(--frame);
}
.ambient-pattern {
  position: fixed;
  inset: var(--frame);
  overflow: hidden;
  pointer-events: none;
  opacity: 0.115;
}
/* 299.6px × cos(45°): one complete tile along the diagonal, without a jump.
   Only transform animates; the oversized SVG extends beyond every edge. */
.pattern-field {
  position: absolute;
  left: -212px;
  top: 0;
  width: calc(100% + 424px);
  height: calc(100% + 424px);
  animation: pattern-drift 150s linear infinite;
  animation-play-state: var(--motion-state);
}
@keyframes pattern-drift {
  to {
    transform: translate3d(211.8491916435px, -211.8491916435px, 0);
  }
}
.poster {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--poster-height);
  overflow: hidden;
  border-radius: var(--panel-radius);
}
/* One painted surface for the poster and pattern. Any fractional rounding
   outside it reveals gold, matching the viewport frame instead of a seam. */
.campaign-page .poster {
  background: var(--petrol);
}
.poster > .ambient-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.poster-logos {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.poster-logos img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  object-fit: contain;
}
.poster-artist {
  top: max(2.8%, env(safe-area-inset-top));
  width: min(46%, 44svh);
  height: auto;
  max-height: 6%;
}
.poster-collab {
  top: calc(10% + var(--poster-header-offset-y));
  height: 2.8%;
  width: auto;
}
.poster-hotel {
  top: calc(13% + var(--poster-header-offset-y));
  height: 10%;
  width: auto;
}
.poster-brand {
  position: absolute;
  top: max(3%, env(safe-area-inset-top));
  right: max(3.5%, env(safe-area-inset-right));
  z-index: 6;
  width: min(14%, 12svh);
  display: block;
  text-decoration: none;
}
.poster-brand-home {
  display: block;
  text-decoration: none;
}
.poster-brand-mobile {
  display: none;
}
.poster-brand img {
  display: block;
  width: 100%;
  height: auto;
}
.poster-wordmark {
  margin-top: 7%;
  padding-top: 5%;
  border-top: 1px solid var(--gold);
}
.poster-qr {
  transition: transform 0.3s ease;
}
@media (hover: hover) {
  .poster-brand:hover .poster-qr {
    transform: rotate(-3deg);
  }
}
.poster-art,
.poster-foreground {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.poster-art {
  --line-height: calc(var(--poster-height) * 0.19);
  --word-width: calc(var(--line-height) * 2048 / 634);
}
.poster-portrait {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 70%;
  width: auto;
  max-width: none;
}
.soiree-row {
  position: absolute;
  z-index: 1;
  left: calc(-1 * var(--word-width));
  right: calc(-1 * var(--word-width));
  height: var(--line-height);
  background: url("./campaign/poster/soiree-gold.webp?v=b38f795fd1060f70") center top / var(--word-width) 100% repeat-x;
  animation: soiree-drift var(--duration) linear infinite;
  animation-play-state: var(--poster-motion-state, var(--motion-state));
}
.soiree-row--one {
  top: 31%;
  --duration: 160s;
}
.soiree-row--two {
  top: 49%;
  --duration: 205s;
  animation-direction: reverse;
}
.soiree-row--three {
  top: 67%;
  --duration: 180s;
}
@keyframes soiree-drift {
  to {
    transform: translate3d(calc(-1 * var(--word-width)), 0, 0);
  }
}
/* Mask and portrait share the full stage coordinate system and 70% height.
   Both copies of the third row share their exact animation and starting phase. */
.poster-foreground {
  z-index: 3;
  -webkit-mask: url("./campaign/poster/sarah-mask.webp?v=b38f795fd1060f70") center bottom / auto 70% no-repeat;
  mask: url("./campaign/poster/sarah-mask.webp?v=b38f795fd1060f70") center bottom / auto 70% no-repeat;
}
.poster-foreground .soiree-row {
  background-image: url("./campaign/poster/soiree-petrol.webp?v=b38f795fd1060f70");
}
.poster-info {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: max(1.5%, calc(env(safe-area-inset-bottom) - var(--frame)));
  transform: translateX(-50%);
  width: min(84%, 79svh);
  height: auto;
}
.timer {
  display: flex;
  align-items: center;
  padding: 0;
  min-width: 0;
  color: var(--gold);
  background: transparent;
  border: 0;
}
.poster-countdown {
  --countdown-scale: 1.2;
  --countdown-offset-y: 0px;
  position: absolute;
  z-index: 1;
  top: calc(23% + 4px + var(--poster-header-offset-y) + var(--countdown-offset-y));
  left: 50%;
  transform: translateX(-50%) scale(var(--countdown-scale));
  transform-origin: center top;
  width: max-content;
  max-width: 100%;
}
.poster-countdown .label {
  color: var(--gold);
  opacity: 0.8;
}
.countdown {
  display: grid;
  grid-template-columns: minmax(26px, 1fr) 5px minmax(26px, 1fr) 5px minmax(26px, 1fr) 5px minmax(26px, 1fr);
  align-items: start;
  gap: 3px;
}
.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.number {
  font:
    500 24px/1 var(--font-display),
    serif;
  font-variant-numeric: tabular-nums;
}
.number[data-wide] {
  font-size: 20px;
}
.separator {
  font:
    300 18px/1 var(--font-display),
    serif;
}
.label {
  margin-top: 3px;
  color: var(--muted);
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arrival,
.fallback {
  margin: 0;
  font-size: 12px;
}
.primary-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  min-height: 48px;
  padding: 14px 24px;
  background: var(--gold);
  color: var(--petrol-deep);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.2s;
}
.primary-link:hover {
  background: var(--goldLight);
}
.primary-link .link-arrow {
  width: 18px;
  height: 18px;
}
.poster-brand .poster-ticket {
  display: flex;
  width: 100%;
  min-height: 40px;
  margin-top: 14%;
  padding: 8px 4px;
  border: 0;
  font:
    500 clamp(12px, 1.3vw, 14px)/1.1 var(--font-display),
    serif;
  font-weight: 900;
  text-align: center;
}
.motion-toggle {
  position: absolute;
  z-index: 6;
  top: max(2%, env(safe-area-inset-top));
  left: 2%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 13px;
  border: 0;
  background: transparent;
  color: var(--gold);
  opacity: 0.7;
}
.motion-toggle:hover,
.motion-toggle:focus-visible {
  opacity: 1;
}
.motion-toggle svg {
  width: 18px;
  height: 18px;
}
.motion-play,
.motion-toggle[aria-pressed="true"] .motion-pause {
  display: none;
}
.motion-toggle[aria-pressed="true"] .motion-play {
  display: block;
}
.after-poster {
  --ink: var(--petrol-deep);
  --muted: #3b6060;
  --border: #15535a38;
  --goldDark: #456964;
  --goldLight: var(--petrol);
  color-scheme: light;
  color: var(--ink);
  background: var(--gold);
}
.after-poster :is(h2, h3) {
  color: var(--ink);
}
.after-poster .primary-link {
  background: var(--petrol);
  color: var(--gold);
}
.after-poster .primary-link:hover {
  background: var(--petrol-deep);
}
.after-poster .story-pagination i.is-current {
  background: var(--petrol);
}
.after-poster .story-toggle:hover {
  color: var(--petrol);
}
.event-section {
  margin: 0;
  padding: clamp(56px, 6vw, 96px) clamp(20px, 4vw, 64px);
  text-align: center;
}
.booking-section {
  padding-top: var(--frame);
  background: var(--gold);
}
.booking-introduction {
  max-width: 740px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding-inline: 24px;
  text-align: center;
}
.booking-introduction .story {
  margin-bottom: 0;
}
.event-facts.event-facts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  max-width: 1400px;
  margin: auto;
}
.event-facts.event-facts-grid > div {
  min-width: 0;
  border-bottom: 0;
}
.event-facts.event-facts-grid dt {
  margin-bottom: 16px;
  color: var(--ink);
  font:
    400 clamp(28px, 3vw, 38px)/1.1 var(--font-display),
    serif;
  letter-spacing: 0;
  text-transform: none;
}
.site-footer.landing-footer {
  width: 100%;
  margin: 0;
  padding: 40px clamp(20px, 4vw, 64px) max(32px, env(safe-area-inset-bottom));
}
.landing-footer .footer-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  max-width: 1400px;
  margin: auto;
}
@media (min-width: 960px) {
  .event-facts.event-facts-grid,
  .landing-footer .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
  }
  .landing-footer .footer-grid {
    --footer-gap: clamp(24px, 3vw, 48px);
    gap: var(--footer-gap);
  }
  .landing-footer .footer-grid > * + * {
    position: relative;
  }
  .landing-footer .footer-grid > * + *::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: calc(var(--footer-gap) / -2);
    border-left: 1px solid var(--border);
  }
}
.eyebrow {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
}
h1,
h2 {
  font-family: var(--font-display), serif;
  font-weight: 400;
}
h2 {
  margin: 0 0 32px;
  color: var(--gold);
  font-size: clamp(46px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
h2 em {
  font-style: italic;
  font-weight: 300;
}
.story {
  max-width: 430px;
  margin: 0 auto 38px;
}
.story-slide {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}
.story[data-ready] .story-slides {
  display: grid;
  align-items: center;
  min-height: 5.6em;
}
.story[data-ready] .story-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  pointer-events: none;
}
.story[data-ready] .story-slide.is-current {
  opacity: 1;
  transform: none;
}
.story-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
.story-pagination {
  display: flex;
  gap: 6px;
}
.story-pagination i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #91a296;
}
.story-pagination i.is-current {
  background: var(--gold);
}
.story-toggle {
  min-height: 32px;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 11px;
}
.story-toggle:hover {
  color: var(--gold);
}
.event-facts {
  margin: 0 0 38px;
  border-top: 1px solid var(--border);
}
.event-facts > div {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.event-facts dt {
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--goldDark);
}
.event-facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}
.event-facts strong {
  display: block;
  font-weight: 400;
}
.event-facts span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.event-facts a {
  overflow-wrap: anywhere;
}
.edition {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.025em;
}
.legal-page {
  padding: var(--frame);
}
.legal-header,
.legal-main,
.legal-page .site-footer {
  position: relative;
  z-index: 1;
}
.legal-main {
  background: #15535aeb;
}
@media (max-width: 959px) {
  :root {
    --panel-radius: 10px;
    --poster-header-offset-y: -10px;
  }
  .poster-countdown {
    --countdown-scale: 1.5;
    --countdown-offset-y: -10px;
  }
  .poster-brand {
    display: none;
  }
  .poster-brand-mobile {
    --brand-length: clamp(120px, 24svh, 150px);
    position: absolute;
    top: max(3.5%, env(safe-area-inset-top));
    right: max(0%, env(safe-area-inset-right));
    z-index: 6;
    display: block;
    width: 44px;
    height: var(--brand-length);
  }
  .poster-brand-mobile img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: var(--brand-length);
    height: auto;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
}
@media (max-width: 480px) {
  .countdown {
    grid-template-columns: minmax(22px, 1fr) 3px minmax(22px, 1fr) 3px minmax(22px, 1fr) 3px minmax(22px, 1fr);
    gap: 2px;
  }
  .number {
    font-size: 22px;
  }
  .event-section {
    padding-inline: 18px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .poster-artist {
    top: max(2%, env(safe-area-inset-top));
    max-height: 4%;
  }
  .poster-collab {
    top: calc(7% + var(--poster-header-offset-y));
    height: 2%;
  }
  .poster-hotel {
    top: calc(10% + var(--poster-header-offset-y));
    height: 8%;
  }
  .poster-countdown {
    top: calc(18% + 4px + var(--poster-header-offset-y) + var(--countdown-offset-y));
  }
  .number {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}