/* ============================================================
   DILEX · Sunset Cruise · Efplia, Argostoli, Kefalonia
   Bow POV scene. The page IS the cruise: js/cruise.js writes a
   single normalised progress value --p (0 at the hero, 1 at the
   outro) onto #sky and everything below reads it. Every value
   here is authored so the scene already looks right standing
   still at any --p.
   Palette: night #100E1E · dusk #3B2450 · ember #E4572E
            gold #FFB84D · sand #F2E4CD · sea #0B2A3A
   ============================================================ */

:root {
  --night: #100E1E;
  --dusk: #3B2450;
  --ember: #E4572E;
  --ember-hover: #F2652F;
  --gold: #FFB84D;
  --sand: #F2E4CD;
  --sea: #0B2A3A;
  --sand-85: rgba(242, 228, 205, .85);
  --sand-65: rgba(242, 228, 205, .65);
  --sand-45: rgba(242, 228, 205, .45);
  --line: rgba(242, 228, 205, .22);
  --line-gold: rgba(255, 184, 77, .32);
  --ink: rgba(9, 7, 18, .88);
  --display: 'Anton', sans-serif;
  --body: 'Archivo', sans-serif;
  --serif: 'Cormorant Garamond', serif;
  /* The horizon. Every scene layer is hung off this one number. */
  --hz: 62%;
  --bar-h: 78px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--sand);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* the sticky bar must never sit on top of the last thing on the page */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
[hidden] { display: none !important; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--ember); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
img { max-width: 100%; }

/* ============================================================
   THE SCENE
   ============================================================ */

.sky {
  --p: 0;
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: var(--night);
  contain: layout paint;
}
.sky__dusk, .sky__night, .sky__stars, .sky__sun,
.sky__moon, .sky__coast, .sky__sea {
  position: absolute;
  pointer-events: none;
}

/* ---- the two skies, crossfaded on --p ---- */
#skyDusk, #skyNight { inset: 0; }
#skyDusk {
  z-index: 1;
  background:
    linear-gradient(180deg,
      #241640 0%,
      var(--dusk) 16%,
      #5B3358 32%,
      #8C4544 44%,
      #C05F33 52%,
      #E8842F 58%,
      var(--gold) 62%,
      #FFD9A0 63%,
      #E9873A 78%,
      #B65A34 100%);
}
#skyNight {
  z-index: 2;
  opacity: var(--p);
  background:
    radial-gradient(150% 34% at 50% var(--hz), rgba(228, 87, 46, .34) 0%, rgba(59, 36, 80, .22) 42%, rgba(16, 14, 30, 0) 78%),
    linear-gradient(180deg,
      #06050D 0%,
      #0B0918 26%,
      var(--night) 48%,
      #1A1533 60%,
      #241A38 62%,
      #14101F 74%,
      #0A0812 100%);
}

/* ---- stars: two tile sizes, drawn not spawned ---- */
#stars {
  z-index: 3;
  inset: 0 0 calc(100% - var(--hz)) 0;
  opacity: clamp(0, calc((var(--p) - .34) * 2.1), 1);
  background-repeat: repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 24%, #FFF8E7 99%, transparent),
    radial-gradient(1.2px 1.2px at 63% 12%, #FFF8E7 99%, transparent),
    radial-gradient(1px 1px at 84% 41%, #E4E0FF 99%, transparent),
    radial-gradient(1.4px 1.4px at 37% 61%, #FFF8E7 99%, transparent),
    radial-gradient(1px 1px at 8% 70%, #CFE4FF 99%, transparent),
    radial-gradient(1.3px 1.3px at 72% 79%, #FFF8E7 99%, transparent),
    radial-gradient(1px 1px at 29% 43%, #FFF8E7 99%, transparent),
    radial-gradient(1.5px 1.5px at 92% 16%, #FFF3D6 99%, transparent);
  background-size:
    330px 250px, 330px 250px, 330px 250px, 330px 250px,
    510px 380px, 510px 380px, 510px 380px, 510px 380px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 94%);
}

/* ---- the sun: gold at the top of its travel, ember as it drops ---- */
#sun {
  z-index: 4;
  left: 50%;
  top: calc(18% + var(--p) * 48%);
  width: 128px; height: 128px; margin-left: -64px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6DE 0%, #FFE0A2 30%, var(--gold) 56%, rgba(255, 184, 77, .35) 74%, rgba(255, 184, 77, 0) 100%);
  box-shadow: 0 0 72px 26px rgba(255, 184, 77, .40), 0 0 190px 92px rgba(228, 87, 46, .22);
  will-change: transform, top;
}
#sun::after {
  content: ""; position: absolute; inset: -3%;
  border-radius: 50%;
  background: radial-gradient(circle, #FFCB78 0%, #F5813A 38%, var(--ember) 62%, rgba(228, 87, 46, .3) 78%, rgba(228, 87, 46, 0) 100%);
  opacity: var(--p);
}

/* ---- the moon: first quarter, so a half-lit disc with a straight
       terminator, not a full circle. High and left. Never sets. ---- */
#moon {
  z-index: 5;
  left: 15%;
  top: calc(14% - var(--p) * 5%);
  width: 54px; height: 54px;
  border-radius: 50%;
  opacity: calc(.34 + var(--p) * .66);
  background:
    radial-gradient(circle at 68% 36%, rgba(146, 138, 172, .5) 0 11%, transparent 15%),
    radial-gradient(circle at 79% 64%, rgba(146, 138, 172, .42) 0 8%, transparent 12%),
    radial-gradient(circle at 60% 78%, rgba(146, 138, 172, .34) 0 6%, transparent 10%),
    linear-gradient(90deg, rgba(242, 228, 205, .07) 0 50%, #FBF3E1 50%, #D6C7A4 100%);
  box-shadow: 0 0 24px 6px rgba(242, 228, 205, .20), 0 0 76px 26px rgba(242, 228, 205, .08);
}

/* ---- the coast: two bands on the horizon at very different speeds.
       That difference is the whole "you are moving" trick.
       Both silhouettes are drawn from the Argostoli Bay profile looking
       across to Lixouri: one long ridge that rises and falls twice in a
       whole tile, rounded tops, gentle saddles, and a dead flat inhabited
       shelf where the land meets the water. No facets, no mesas. ---- */
.sky__coast {
  left: -30%; width: 160%;
  bottom: calc(100% - var(--hz));
  background-repeat: repeat-x;
  will-change: background-position, transform;
}
/* the hazy mountain mass behind: low, long, almost sky coloured */
#coastFar, .sky__coast--far {
  z-index: 6;
  height: 46px;
  opacity: .5;
  filter: blur(.7px);
  background-size: 640px 46px;
  background-position: calc(var(--p) * -560px) bottom;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='46' viewBox='0 0 640 46' preserveAspectRatio='none'%3E%3Cpath fill='%233A2A4E' d='M0 35 C 52 34.6 100 23.6 170 22.8 C 236 22 272 32.8 330 33.6 C 396 34.4 428 26.6 492 26.2 C 556 25.8 592 34.4 640 35 L640 46 L0 46 Z'/%3E%3C/svg%3E");
}
/* the coastline in front: one dominant headland, a long descent off it,
   a low shoulder, then the town shelf */
#coastNear, .sky__coast--near {
  z-index: 7;
  height: 76px;
  opacity: .95;
  background-size: 480px 76px;
  background-position: calc(var(--p) * -2040px) bottom;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='76' viewBox='0 0 480 76' preserveAspectRatio='none'%3E%3Cpath fill='%2316101F' d='M0 62 C 26 62 44 61.4 62 55.4 C 88 46.6 106 26.6 150 25.2 C 196 23.9 214 37 246 45.6 C 274 51.4 288 51.4 312 51.4 C 340 51.4 350 43.4 378 43.2 C 410 43 424 57 448 61.4 C 462 62 470 62 480 62 L480 76 L0 76 Z'/%3E%3C/svg%3E");
}
/* the flat inhabited strip: the hills stop on a shelf, they do not plunge
   into the sea. Slightly lifted tone so the shelf reads against the ridge. */
#coastNear::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, #1D1529 0%, #16101F 55%, #120D1A 100%);
}
/* harbour lights: Argostoli on the far shore. Nothing while the sun is up,
   full strength by full dark. Same parallax rate and tile width as the
   coastline above, so the lights stay pinned to the shoreline. */
#coastNear::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: 6%; height: 3px;
  opacity: clamp(0, calc((var(--p) - .46) * 2.8), 1);
  box-shadow: 0 0 7px rgba(255, 190, 110, .18);
  background-repeat: repeat-x;
  background-size: 480px 100%;
  background-position: calc(var(--p) * -2040px) bottom;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 201, 124, .9) 0 .3%, rgba(255, 201, 124, 0) .3% 2.5%),
    repeating-linear-gradient(90deg, rgba(255, 238, 194, .85) 0 .25%, rgba(255, 238, 194, 0) .25% 10%);
}

/* ---- the sea: horizon to the bottom of the frame ---- */
.sky__sea { left: 0; right: 0; bottom: 0; }
#seaFar, .sky__sea--far {
  z-index: 8;
  top: var(--hz);
  background:
    linear-gradient(180deg, rgba(11, 42, 58, .55) 0%, var(--sea) 46%, #071E2B 100%);
}
/* warm horizon wash that dies away as the sun goes */
#seaFar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%;
  opacity: calc(1 - var(--p) * .88);
  background: linear-gradient(180deg, rgba(255, 184, 77, .38) 0%, rgba(228, 87, 46, .16) 34%, rgba(228, 87, 46, 0) 100%);
}
/* the light path on the water, directly under the sun */
#seaFar::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: 50%; width: 132px; margin-left: -66px;
  filter: blur(11px);
  opacity: calc(1 - var(--p) * .55);
  background: linear-gradient(180deg, rgba(255, 220, 152, .62) 0%, rgba(255, 184, 77, .22) 44%, rgba(255, 184, 77, 0) 92%);
}
#seaNear, .sky__sea--near {
  z-index: 9;
  top: calc(var(--hz) + 7%);
  background-image:
    repeating-linear-gradient(180deg, rgba(242, 228, 205, .055) 0 2px, rgba(242, 228, 205, 0) 2px 26px),
    linear-gradient(180deg, rgba(11, 42, 58, .3) 0%, #06192450 22%, #051520 68%, #030E16 100%);
  background-position: 0 0, 0 0;
  animation: seaRun 3.2s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
}
#seaNear::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: 50%; width: 210px; margin-left: -105px;
  filter: blur(16px);
  opacity: calc(.5 - var(--p) * .4);
  background: linear-gradient(180deg, rgba(255, 200, 120, .34) 0%, rgba(255, 184, 77, 0) 78%);
}

/* ============================================================
   CHROME
   ============================================================ */

main { position: relative; z-index: 1; }

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(9, 7, 18, .6), rgba(9, 7, 18, 0));
}
.nav__logo { font-family: var(--display); font-size: 20px; letter-spacing: 4px; color: var(--sand); }
.nav__logo:hover { color: var(--gold); }
.nav__langs {
  display: flex; gap: 2px; padding: 3px;
  border: 1px solid rgba(242, 228, 205, .3); border-radius: 999px;
  background: rgba(9, 7, 18, .3);
  backdrop-filter: blur(8px);
}
.lang {
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  padding: 5px 12px; border-radius: 999px;
  color: var(--sand-65);
}
.lang:hover { color: var(--sand); }
.lang.is-active { background: var(--sand); color: var(--night); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  cursor: pointer;
  font-family: var(--body); font-size: 16px; font-weight: 700; letter-spacing: .4px;
  padding: 17px 26px; border-radius: 999px; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  transition: background .2s, color .2s, transform .1s, box-shadow .2s;
}
.btn:active { transform: scale(.98); }
.btn--primary {
  background: var(--ember); color: #FFF6E8;
  box-shadow: 0 10px 30px rgba(228, 87, 46, .28);
}
.btn--primary:hover { background: var(--ember-hover); color: #FFF6E8; }
.btn--block { width: 100%; }
.btn--wa { background: #1DAB61; color: #FFF; font-size: 15px; padding: 15px 24px; box-shadow: none; }
.btn--wa:hover { background: #22C06E; color: #FFF; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
}
.hero__inner {
  position: relative;
  width: 100%; max-width: 620px; margin: 0 auto;
  padding: calc(96px + env(safe-area-inset-top)) 24px 36px;
}
/* soft scrim, not a box: holds contrast over the gold horizon */
.hero__inner::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0 -20px -60px;
  background: radial-gradient(115% 74% at 40% 62%, rgba(9, 7, 18, .82) 0%, rgba(9, 7, 18, .6) 44%, rgba(9, 7, 18, 0) 100%);
}
.hero__kicker {
  margin: 0 0 20px;
  font-size: 12px; font-weight: 700; letter-spacing: 3.4px; color: var(--gold);
  text-shadow: 0 1px 12px rgba(9, 7, 18, .8);
}
.hero__title {
  margin: 0;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  line-height: .88; font-size: clamp(62px, 19vw, 128px);
  letter-spacing: -.5px;
  text-shadow: 0 3px 30px rgba(9, 7, 18, .55);
}
.hero__sub {
  margin: 22px 0 28px;
  max-width: 22em;
  font-size: 17px; line-height: 1.55; color: #FFF3E2;
  text-shadow: 0 1px 14px rgba(9, 7, 18, .85);
  text-wrap: pretty;
}
.hero__ctas { display: flex; flex-direction: column; gap: 10px; }
.hero__photo {
  position: relative;
  margin: 34px 0 0;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(242, 228, 205, .16);
  box-shadow: 0 26px 64px rgba(4, 3, 10, .6);
}
.hero__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
}
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 14, 30, 0) 52%, rgba(16, 14, 30, .5) 100%);
}
.hero__cue { display: flex; justify-content: center; margin-top: 28px; }
.hero__cue span {
  width: 22px; height: 36px;
  border: 1.5px solid rgba(242, 228, 205, .5); border-radius: 999px;
  display: flex; justify-content: center; padding-top: 7px;
  animation: cueBob 2s ease-in-out infinite;
}
.hero__cue span::after { content: ""; width: 3px; height: 8px; border-radius: 3px; background: var(--gold); }

/* ============================================================
   SECTION RHYTHM
   ============================================================ */

.section {
  position: relative;
  max-width: 620px; margin: 0 auto;
  padding: 92px 24px 0;
}
.section::before {
  content: ""; position: absolute; z-index: -1;
  inset: 24px 4px 20px;
  background: radial-gradient(112% 74% at 50% 50%, rgba(9, 7, 18, .86) 0%, rgba(9, 7, 18, .66) 48%, rgba(9, 7, 18, 0) 100%);
}
.kicker {
  margin: 0 0 20px;
  font-family: var(--display); font-size: 14px; font-weight: 400;
  letter-spacing: 4px; color: var(--gold);
}
.flourish {
  margin: 0;
  font-family: var(--serif); font-style: italic; font-size: 21px;
  color: var(--sand-85);
}
.section__sub { margin: -12px 0 30px; }
.section__text {
  margin: 0 0 20px;
  font-size: 15.5px; line-height: 1.7; color: var(--sand-85);
  text-wrap: pretty;
}
.lede { padding-top: 68px; }
.lede__text {
  margin: 0;
  font-size: 16px; line-height: 1.72; color: var(--sand-85);
  text-wrap: pretty;
}
.lede__text strong { color: var(--sand); font-weight: 700; }

/* ============================================================
   THE ROUTE  ·  the spine of the page
   ============================================================ */

.route__track {
  position: relative;
  margin: 6px 0 0; padding: 4px 0 0 36px;
  list-style: none;
}
.route__track::before {
  content: ""; position: absolute;
  left: 11px; top: 14px; bottom: 26px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(242, 228, 205, .1) 0%,
    rgba(242, 228, 205, .28) 16%,
    rgba(255, 184, 77, .6) 46%,
    rgba(255, 184, 77, .35) 62%,
    rgba(242, 228, 205, .18) 100%);
}
.leg {
  position: relative;
  padding: 0 0 34px;
  opacity: .62;
  transition: opacity .5s ease, transform .5s ease;
}
.leg::before {
  content: ""; position: absolute;
  left: -30px; top: 11px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #0B0916;
  border: 2px solid rgba(242, 228, 205, .42);
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
.leg:last-child { padding-bottom: 6px; }
.leg.is-active { opacity: 1; }
.leg.is-active::before {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.2);
  box-shadow: 0 0 0 5px rgba(255, 184, 77, .12), 0 0 20px 5px rgba(255, 184, 77, .55);
}
.leg__time {
  display: block;
  font-family: var(--display); font-weight: 400; font-size: 32px;
  line-height: 1; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--sand);
  transition: color .45s ease, text-shadow .45s ease;
}
.leg.is-active .leg__time { color: var(--gold); text-shadow: 0 0 24px rgba(255, 184, 77, .45); }
.leg__title {
  margin: 8px 0 0;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 19px; letter-spacing: 2.4px;
  color: var(--sand-85);
}
.leg__body {
  margin: 8px 0 0;
  font-size: 14.5px; line-height: 1.62; color: var(--sand-65);
  text-wrap: pretty;
}
.leg.is-active .leg__title { color: var(--sand); }
.leg.is-active .leg__body { color: var(--sand-85); }

/* 20:27 is the destination. It should read that way. */
.leg[data-time="20:27"] { padding-bottom: 42px; opacity: .78; }
.leg[data-time="20:27"] .leg__time {
  font-size: 46px; color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 184, 77, .4);
}
.leg[data-time="20:27"] .leg__title { font-size: 26px; letter-spacing: 3px; color: var(--sand); }
.leg[data-time="20:27"] .leg__body { font-size: 15.5px; color: var(--sand-85); }
.leg[data-time="20:27"]::before {
  left: -32px; top: 14px;
  width: 16px; height: 16px;
  background: rgba(255, 184, 77, .28);
  border-color: rgba(255, 184, 77, .7);
  box-shadow: 0 0 18px 4px rgba(255, 184, 77, .3);
}
.leg[data-time="20:27"].is-active { opacity: 1; }
.leg[data-time="20:27"].is-active::before {
  background: var(--gold);
  animation: waypoint 3s ease-in-out infinite;
}

.moon-note {
  position: relative;
  margin: 26px 0 0; padding-left: 34px;
  font-family: var(--serif); font-style: italic;
  font-size: 18px; line-height: 1.5; color: var(--sand-65);
  text-wrap: pretty;
}
.moon-note::before {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: linear-gradient(90deg, rgba(242, 228, 205, .12) 0 50%, #EFE6D2 50%);
  box-shadow: 0 0 12px 3px rgba(242, 228, 205, .18);
}

/* ============================================================
   WHAT €50 GETS YOU  ·  THE PRICE  ·  WHY 22
   ============================================================ */

.includes .kicker { margin-bottom: 14px; }
.includes__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
}
.includes__list li {
  position: relative;
  padding: 14px 0 14px 26px;
  font-size: 16px; color: var(--sand-85);
  border-bottom: 1px solid rgba(242, 228, 205, .13);
}
.includes__list li:first-child { border-top: 1px solid rgba(242, 228, 205, .13); }
.includes__list li::before {
  content: ""; position: absolute; left: 3px; top: 22px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px 2px rgba(255, 184, 77, .4);
}

.anchor__quote {
  margin: 0; padding: 4px 0 0 22px;
  border-left: 2px solid var(--line-gold);
}
.anchor__quote p {
  margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: 23px; line-height: 1.42; color: var(--sand);
  text-wrap: pretty;
}

/* ============================================================
   THE DJ  ·  the one loud room on the page
   Everything else here is calm and wide because it is a sunset.
   This is the doorway with the bass coming out of it: full
   bleed, dark, hard edges, poster type.
   ============================================================ */

.dj {
  margin-top: 32px;
  padding: 86px 24px 74px;
}
.dj::before {
  inset: 0 calc(50% - 50vw);
  border-top: 2px solid var(--ember);
  border-bottom: 2px solid var(--ember);
  background:
    radial-gradient(78% 62% at 50% 0%, rgba(228, 87, 46, .26) 0%, rgba(228, 87, 46, 0) 100%),
    linear-gradient(180deg, rgba(9, 7, 18, .96) 0%, rgba(18, 10, 28, .97) 54%, rgba(6, 5, 13, .97) 100%);
}
/* the bass, coming up off the floor */
.dj::after {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: 0;
  width: 130%; height: 42%; margin-left: -65%;
  background: radial-gradient(58% 100% at 50% 100%, rgba(228, 87, 46, .34) 0%, rgba(228, 87, 46, .1) 44%, rgba(228, 87, 46, 0) 100%);
  animation: djThump 3.6s ease-in-out infinite;
}
.dj .kicker {
  display: inline-block;
  margin-bottom: 22px; padding: 7px 13px 6px;
  background: var(--gold); color: #14101F;
  font-size: 12px; letter-spacing: 3.4px;
}
/* the biggest type on the page, and it should sound like it */
.dj__name {
  margin: 0;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(58px, 20vw, 136px); line-height: .82; letter-spacing: -1px;
  color: #FFF6E8;
  text-shadow: .04em .04em 0 var(--ember), 0 0 60px rgba(228, 87, 46, .45);
}
.dj .section__sub { margin: 18px 0 0; font-size: 20px; color: var(--sand); }
/* credits the way a lineup card lists them */
.dj__billing {
  margin: 20px 0 30px; padding: 13px 0;
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
  font-size: 11.5px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold);
  text-wrap: balance;
}
/* The portrait ships black and white in a green palm border, which is
   nobody's palette. Flatten it, tint the frame gold to ember so the
   leaves land in our colours too, and offset it onto a hard slab. */
.dj__photo {
  position: relative; isolation: isolate;
  margin: 0 0 32px;
  border: 1px solid rgba(242, 228, 205, .18);
  box-shadow: 13px 13px 0 rgba(228, 87, 46, .85);
}
.dj__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(.82);
}
.dj__photo::after {
  content: ""; position: absolute; inset: 0;
  opacity: .86; mix-blend-mode: color;
  background: linear-gradient(158deg, var(--gold) 0%, var(--ember) 52%, #7A2F55 100%);
}
/* loud is not the same as illegible */
.dj .section__text { font-size: 16px; }
.dj__links {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 28px 0 0; padding: 0; list-style: none;
}
.dj__links a {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 14px 20px; border-radius: 999px;
  border: 1px solid var(--line-gold);
  background: rgba(255, 184, 77, .07);
  font-size: 13px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--gold);
  transition: background .2s, color .2s, border-color .2s;
}
.dj__links a::after { content: "↗"; font-size: 12px; }
.dj__links a:hover { background: var(--gold); border-color: var(--gold); color: #14101F; }

/* ============================================================
   GALLERY
   ============================================================ */

.gallery {
  display: flex; gap: 14px;
  margin: 0 -24px; padding: 0 24px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery__item {
  flex: 0 0 78%; max-width: 420px; margin: 0;
  scroll-snap-align: center;
}
.gallery__item img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(242, 228, 205, .14);
}
.gallery__cap {
  margin-top: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 2px;
  color: var(--sand-65);
}

/* ============================================================
   RESERVE
   ============================================================ */

.reserve { padding-bottom: 8px; }
.count { display: flex; gap: 10px; margin: 0 0 30px; }
.count > div {
  flex: 1; text-align: center; padding: 15px 4px;
  border: 1px solid var(--line-gold); border-radius: 14px;
  background: rgba(9, 7, 18, .5);
}
.count b {
  display: block;
  font-family: var(--display); font-weight: 400; font-size: 33px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.count__sec { color: var(--gold); }
.count span {
  display: block; margin-top: 6px;
  font-size: 10.5px; letter-spacing: 2px; color: var(--sand-65);
}
.seats {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px;
  font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sand-65);
}
.seats b {
  font-family: var(--display); font-weight: 400; font-size: 40px;
  line-height: .9; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(255, 184, 77, .35);
}
.soldout {
  margin: 20px 0 0; padding: 16px 18px;
  border: 1px solid rgba(228, 87, 46, .5); border-radius: 14px;
  background: rgba(228, 87, 46, .12);
  font-size: 14.5px; line-height: 1.6; color: #FFD9C4;
  text-wrap: pretty;
}
/* sold out: the page stops selling */
.is-soldout .bar .btn--primary,
.is-soldout .reserve .btn--primary { background: rgba(242, 228, 205, .16); color: var(--sand-65); box-shadow: none; pointer-events: none; }

/* ============================================================
   FAQ
   ============================================================ */

.faq { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid rgba(242, 228, 205, .15); }
.faq__item:first-child { border-top: 1px solid rgba(242, 228, 205, .15); }
.faq__item > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0; cursor: pointer; list-style: none;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary h3 {
  flex: 1; margin: 0;
  font-family: var(--body); font-size: 15px; font-weight: 600;
  line-height: 1.45; color: var(--sand);
  text-wrap: pretty;
}
.faq__item > summary::after {
  content: ""; flex: none;
  width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.faq__item[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__item > summary:hover h3 { color: var(--gold); }
.faq__item > p {
  margin: -4px 0 18px; padding-right: 22px;
  font-size: 14.5px; line-height: 1.65; color: var(--sand-85);
  text-wrap: pretty;
}

/* ============================================================
   OUTRO + FOOTER
   ============================================================ */

.outro {
  min-height: 54svh;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 60px 24px 0;
}
.outro__line {
  font-size: 26px; color: rgba(242, 228, 205, .92);
  text-align: center;
  text-shadow: 0 1px 20px rgba(9, 7, 18, .85);
}
.footer {
  position: relative;
  max-width: 620px; margin: 0 auto; text-align: center;
  padding: 88px 24px 56px;
}
.footer::before {
  content: ""; position: absolute; z-index: -1; inset: 30px 4px 0;
  background: radial-gradient(110% 70% at 50% 60%, rgba(9, 7, 18, .86) 0%, rgba(9, 7, 18, 0) 100%);
}
.footer__logo { font-family: var(--display); font-size: 24px; letter-spacing: 5px; margin-bottom: 14px; }
.footer__links {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 20px;
  font-size: 14px;
}
.footer__meta { margin-top: 18px; font-size: 12px; line-height: 1.6; color: var(--sand-45); }

/* ============================================================
   STICKY CONVERSION BAR
   ============================================================ */

.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--ink);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-gold);
}
.bar__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bar__info > b {
  font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: 2px;
  color: var(--sand-65);
  white-space: nowrap;
}
.bar__info span {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: 2px;
  color: var(--sand-65);
  white-space: nowrap;
}
.bar__info span b {
  font-family: var(--display); font-weight: 400; font-size: 22px;
  line-height: 1; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.bar__price {
  margin-left: auto;
  font-family: var(--display); font-weight: 400; font-size: 26px;
  line-height: 1; color: var(--gold);
}
.bar .btn { flex: none; padding: 13px 20px; font-size: 14.5px; box-shadow: none; }

/* ============================================================
   MOTION
   ============================================================ */

@keyframes cueBob { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(8px); opacity: .4; } }
@keyframes seaRun { to { background-position: 0 26px, 0 0; } }
@keyframes djThump { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes waypoint {
  0%, 100% { box-shadow: 0 0 0 5px rgba(255, 184, 77, .12), 0 0 20px 5px rgba(255, 184, 77, .5); }
  50% { box-shadow: 0 0 0 9px rgba(255, 184, 77, .06), 0 0 30px 9px rgba(255, 184, 77, .75); }
}

/* Pin the scene to a good-looking dusk and stop everything moving. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sky { --p: .18; }
  #skyNight { opacity: .16; }
  #stars { opacity: 0; }
  #sun { top: 27%; }
  #moon { top: 13%; opacity: .5; }
  #coastFar, #coastNear, #coastNear::after { background-position-x: 0; }
  #seaNear, .hero__cue span, .dj::after, .leg[data-time="20:27"].is-active::before { animation: none; }
  .dj::after { opacity: .7; }
  .leg, .leg::before, .leg__time, .btn, .faq__item > summary::after { transition: none; }
  .leg { opacity: 1; }
  .sky__coast, .sky__sea, .sky__sun { will-change: auto; }
}

/* ============================================================
   WIDER SCREENS
   ============================================================ */

@media (min-width: 480px) {
  .bar { padding-left: 22px; padding-right: 22px; gap: 18px; }
  .bar__info > b { font-size: 17px; }
  .bar__info span b { font-size: 25px; }
  .bar__price { font-size: 30px; }
}

@media (min-width: 760px) {
  :root { --bar-h: 84px; }
  #sun { width: 172px; height: 172px; margin-left: -86px; }
  #moon { width: 70px; height: 70px; }
  #coastFar { height: 60px; background-size: 840px 60px; }
  #coastNear { height: 104px; background-size: 660px 104px; }
  #coastNear::after { background-size: 660px 100%; }
  .hero__inner { padding-bottom: 56px; }
  .hero .hero__ctas { flex-direction: row; align-items: center; }
  .hero__sub { font-size: 19px; }
  .hero__photo img { aspect-ratio: 21 / 9; }
  .section { padding-top: 124px; }
  .lede { padding-top: 96px; }
  .lede__text { font-size: 18px; }
  .kicker { font-size: 15px; }
  .flourish { font-size: 24px; }
  .section__text { font-size: 16.5px; }
  .route__track { padding-left: 44px; }
  .route__track::before { left: 13px; }
  .leg::before { left: -36px; }
  .leg[data-time="20:27"]::before { left: -38px; }
  .leg__time { font-size: 38px; }
  .leg[data-time="20:27"] .leg__time { font-size: 58px; }
  .leg__title { font-size: 22px; }
  .leg[data-time="20:27"] .leg__title { font-size: 30px; }
  .leg__body { font-size: 15.5px; max-width: 46em; }
  .anchor__quote p { font-size: 27px; }
  /* wider than anything else, portrait alongside the billing */
  .dj {
    max-width: 860px; padding: 108px 24px 92px;
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 44px;
  }
  .dj > :not(.dj__photo) { grid-column: 1; }
  .dj__photo { grid-column: 2; grid-row: 1 / span 8; align-self: center; margin: 0; }
  .dj .kicker { justify-self: start; }
  .dj .section__sub { font-size: 23px; }
  .dj__billing { font-size: 12.5px; }
  .dj .section__text { font-size: 16.5px; }
  .gallery__item { flex: 0 0 46%; }
  .count b { font-size: 40px; }
  .seats b { font-size: 50px; }
  .outro__line { font-size: 32px; }
  .footer { padding-bottom: 72px; }
}