/* ==========================================================================
   Noor Halloran · Club DJ one page website
   Plain CSS, no build step. Edit the :root block first: colors, fonts,
   sizes of the menu bar and the animations all live there.
   Layout: phones first, desktop from 1280 px wide (see README.md).
   ========================================================================== */

/* ---------- Fonts (self hosted, SIL Open Font License, see fonts/licenses) */
@font-face {
  font-family: "Krona One";
  src: url("../../fonts/krona-one-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../../fonts/sora-latin-var.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Colors */
  --ink: #0d0b26;          /* text on light backgrounds, dark buttons */
  --cream: #fff3dc;        /* text on dark backgrounds, cards */
  --butter: #fbe3a0;       /* light yellow: buttons, headline set */
  --amber: #f7b267;        /* small headings in the dark sections */
  --coral: #f27a5b;        /* ticket buttons, accents */
  --rose: #c7467f;         /* decoration: dots, strips, sky */
  --rose-text: #b23a62;    /* rose text on light backgrounds (passes WCAG AA) */
  --rose-light: #ec78a9;   /* rose text on dark backgrounds (passes WCAG AA) */
  --stamp: #bf3342;        /* SOLD OUT stamp */
  --night: #14123a;        /* line-up, player and cards in the dark */
  --deep: #121032;         /* tickets background */
  --indigo: #2a2373;       /* timetable panel, current track */
  --violet: #5b3a9e;
  --footer: #0d0b26;

  /* Sky bands, from the top of the night to the sunrise (hero) */
  --sky-1: #17134a; --sky-2: #1f1a63; --sky-3: #2a2373; --sky-4: #372990;
  --sky-5: #4a3190; --sky-6: #633a9c; --sky-7: #85409a; --sky-8: #a8449a;
  --sky-9: #c7467f; --sky-10: #de5873; --sky-11: #ec6a68; --sky-12: #f27a5b;

  /* Sun rings around the photos */
  --ring-outer: #f08b60;
  --ring-mid: #f7b267;
  --ring-inner: #fbe3a0;

  /* Photo slot placeholders (hidden once a photo is added) */
  --slot: linear-gradient(170deg, #cfc8bd 0%, #7a756d 83.333%);
  /* EDIT: text color of the "replace with photo" hint. Each one reaches the
     WCAG AA contrast (4.5:1) on its own spot of the gray placeholder. The hint
     disappears once a photo is added. */
  --hint-dark: #120f33;    /* large slots, where the gray is still light */
  --hint-light: #ffffff;   /* small slots, where the gray is darker */

  /* ---------- Fonts */
  --font-display: "Krona One", "Arial Black", sans-serif;
  --font-body: "Sora", system-ui, sans-serif;
  --font-hint: "Inter", system-ui, sans-serif;

  /* ---------- Layout */
  --gutter: 20px;          /* side padding on phones */
  --column: 560px;         /* widest phone column (tablets keep the phone layout centered) */

  /* ---------- Menu bar (fixed on top while scrolling)
     --nav-h is the height at the top of the page, --nav-h-compact after
     scrolling. The night clock docks --dock-gap below the bar. */
  --nav-h: 76px;
  --nav-h-compact: 76px;
  --nav-dur: .25s;
  --nav-bg: rgb(20 18 58 / .92);
  --nav-shadow: 0 1px 0 rgb(255 243 220 / .1);
  --clock-h: 56px;
  --dock-gap: 8px;
  --clock-bottom: 12px;   /* phones: space between the clock and the foot of the screen */
  /* sections reached from the menu stop below the bar and the docked clock */
  --anchor-gap: calc(var(--nav-h-compact) + var(--dock-gap) + var(--clock-h) + 12px);

  /* ---------- Animations (see "Animations" in README.md)
     EDIT: slower or faster, longer or shorter moves. */
  --motion-ease: cubic-bezier(.22, 1, .36, 1);  /* gentle ease out */
  --motion-sun-dur: 1.6s;     /* the sun rising behind the city on load */
  --motion-sun-dist: 60px;    /* how far it rises */
  --motion-clock-dur: .45s;   /* the yellow marker sliding in the night clock */
  --motion-reveal-dur: .6s;   /* cards rising into view while scrolling */
  --motion-reveal-dist: 18px;
  --motion-reveal-step: .08s; /* delay between cards of the same group */
  --motion-stamp-dur: .5s;    /* the SOLD OUT stamp pressing down */
}

@media (min-width: 768px) {
  :root { --column: 640px; }   /* tablets: the phone layout in a wider centered column */
}

@media (min-width: 1280px) {
  :root {
    /* side padding: 80 px at 1440 wide, down to 40 px at 1280 */
    --gutter: clamp(40px, calc((100cqi - 1280px) / 2), 80px);   /* 100cqi = width without the scrollbar */
    --nav-h: 92px;
    --nav-h-compact: 68px;
    --clock-h: 64px;
    /* --k scales the brand art with the page width, 1 at 1440 px wide
       (100cqi = body width without the scrollbar) */
    --k: calc(min(100cqi, 1440px) / 1440);
  }
}

/* ---------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--cream);
  font-family: var(--font-body); font-size: 16px; line-height: 1.25;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
header, main, footer, .topbar { container-type: inline-size; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
main, section[id], header[id] { scroll-margin-top: var(--anchor-gap); }

/* Keyboard focus: a butter ring on dark, an ink ring on light */
:focus-visible { outline: 3px solid var(--focus, var(--butter)); outline-offset: 3px; border-radius: 6px; }
.dates .window, .tickets, .mixes .mix, .about, .booking { --focus: var(--ink); }
.tickets .ticket__btn, .booking .note__send { --focus: var(--rose-text); }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50; padding: 12px 18px;
  background: var(--butter); color: var(--ink); font-weight: 700; border-radius: 24px;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%; max-width: calc(var(--column) + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter);
}
.d-only { display: none; }

/* ---------- Shared text */
.title { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.25; }
.title--ink { color: var(--ink); }
.intro { margin-top: 12px; font-size: 17px; line-height: 26px; color: rgb(255 243 220 / .85); }

/* ---------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 20px; border-radius: 30px;
  font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: transform .2s var(--motion-ease), background-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--sun { background: var(--butter); color: var(--ink); }
.btn--coral { background: var(--coral); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--line { border: 2.5px solid var(--cream); color: var(--cream); }
.btn--ink-line { border: 2px solid var(--ink); color: var(--ink); }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 26px; font-weight: 700; white-space: nowrap;
}
.pill--line { border: 2px solid var(--cream); color: var(--cream); }
.pill--butter { border: 2px solid var(--butter); color: var(--butter); }
.pill--faint { border: 1.5px solid rgb(255 243 220 / .4); color: var(--cream); font-weight: 600; font-size: 14px; }

/* ---------- Photo slots
   Every photo space is a .slot with a commented <img>. Remove the comment
   marks around the <img> and the hint below it disappears. */
.slot { position: relative; overflow: hidden; background: var(--slot); color: var(--hint, var(--hint-dark)); }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.slot__hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-hint); font-weight: 500; font-size: 11px; white-space: nowrap;
}
.slot__icon { width: 56px; height: 56px; opacity: .7; }
.slot:has(img) .slot__hint { display: none; }
.slot--round { border-radius: 50%; }

/* Sun: three rings around a round photo */
.sun { position: relative; }
.sun__ring { position: absolute; border-radius: 50%; }
.sun__ring--outer { background: var(--ring-outer); }
.sun__ring--mid { background: var(--ring-mid); }
.sun__ring--inner { background: var(--ring-inner); }
.sun__photo { position: absolute; }

/* Small stars over the dark sections */
.stars { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 390px; max-width: none; pointer-events: none; }
.stars--d { display: none; }

/* Mobile carousels: card width from the design, 16 px apart, a part of the next one showing */
.carousel {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: max(var(--gutter), (100% - var(--column)) / 2);
  scroll-padding-inline: max(var(--gutter), (100% - var(--column)) / 2);
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > li { flex: none; scroll-snap-align: start; }

/* ==========================================================================
   MENU BAR
   ========================================================================== */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--nav-h);
  transition: background-color var(--nav-dur), box-shadow var(--nav-dur), height var(--nav-dur);
}
.topbar.is-scrolled { background: var(--nav-bg); box-shadow: var(--nav-shadow); height: var(--nav-h-compact); }
@supports (backdrop-filter: blur(8px)) { .topbar.is-scrolled { backdrop-filter: blur(8px); } }
.topbar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.topbar__logo {
  font-family: var(--font-display); font-size: 16px; line-height: 1.25;
  padding-block: 12px; margin-block: -12px;   /* 44 px touch area */
}
.topbar__book { position: relative; width: 120px; height: 40px; font-size: 14px; border-radius: 20px; }
.topbar__book::after { content: ""; position: absolute; inset: -2px; }
.static-nav .topbar { position: absolute; }
.static-nav .topbar.is-scrolled { background: none; box-shadow: none; height: var(--nav-h); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  /* z-index: the docked night clock lives inside the hero and must stay above the next sections */
  position: relative; z-index: 20; overflow: hidden; isolation: isolate;
  /* sky bands from the design, then the last band color below them */
  background:
    linear-gradient(var(--sky-1) 0 79.9px, var(--sky-2) 0 159.81px, var(--sky-3) 0 239.71px,
      var(--sky-4) 0 319.61px, var(--sky-5) 0 399.51px, var(--sky-6) 0 479.42px,
      var(--sky-7) 0 559.32px, var(--sky-8) 0 639.22px, var(--sky-9) 0 719.12px,
      var(--sky-10) 0 799.03px, var(--sky-11) 0 878.93px, var(--sky-12) 0) top / 100% 961px no-repeat,
    var(--sky-12);
  padding-bottom: 48px;
}
.hero__sky { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero__stars { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 390px; max-width: none; }
.hero__city {
  position: absolute; left: 0; bottom: 0; z-index: -1; pointer-events: none;
}
.hero__city img { width: 1526px; height: 1060px; max-width: none; }
/* Phones: only the front row of buildings (with windows), lifted --city-lift so the
   windows show above the "Next night" card, which never covers them. The ground below keeps the building color. */
@media (max-width: 1279px) {
  .hero__city { --city-lift: 71px; padding-bottom: var(--city-lift); background: linear-gradient(transparent calc(100% - var(--city-lift) - 110px), #120f33 0); }   /* no sky between the buildings behind the card */
  /* --city-shift picks the stretch of the skyline with the most windows */
  .hero__city img { display: block; margin-left: calc(-1 * var(--city-shift, 520px)); }
}
.hero__inner { position: relative; padding-top: 96px; display: flex; flex-direction: column; }
.hero__title {
  font-family: var(--font-display); font-weight: 400; color: var(--cream);
  font-size: min(48px, calc((100vw - 2 * var(--gutter)) / 7.3)); line-height: 54px;
}
.hero__title span { display: block; }
.hero__intro { margin-top: 12px; font-size: 16px; line-height: 24px; max-width: 350px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero__actions .btn:first-child { min-width: 176px; }
.hero__actions .btn:last-child { min-width: 150px; }

.hero__sun { width: min(280px, 100vw - 24px); aspect-ratio: 1; margin: 12px auto 0; z-index: -1; }   /* behind the city, like the design */
.hero__sun .sun__ring--outer { inset: 0; }
.hero__sun .sun__ring--mid { inset: 5.882%; }
.hero__sun .sun__ring--inner { inset: 11.176%; }
.hero__sun .sun__photo { inset: 15.882%; }

.nextnight {
  position: relative; display: flex; margin-top: -42px;   /* over the lower ring of the sun */ overflow: hidden;
  min-height: 146px; padding-bottom: 4px; border-radius: 20px; background: var(--cream); color: var(--ink);
  box-shadow: 0 14px 28px rgb(13 10 38 / .45);
  border-top: 9px solid var(--coral);
}
.nextnight__main { flex: 1; padding: 15px 0 0 22px; }
.nextnight__label { font-weight: 600; font-size: 14px; color: var(--rose-text); }
.nextnight__date { margin-top: 3.5px; font-family: var(--font-display); font-size: 28px; line-height: 1.25; }
.nextnight__place { margin-top: 17px; font-size: 14px; line-height: 20px; color: rgb(13 11 38 / .75); max-width: 210px; }
.nextnight__stub {
  position: relative; width: 112px; padding: 0 14px; display: flex; flex-direction: column; align-items: center; padding-top: 31px;
}
/* perforation between the stub and the card */
.nextnight__stub::before {
  content: ""; position: absolute; left: 0; top: 13px; bottom: 16px; width: 2px;
  background: repeating-linear-gradient(rgb(13 11 38 / .3) 0 8px, transparent 0 14px);
}
.nextnight__btn { width: 84px; height: 48px; padding: 0; font-size: 14px; border-radius: 24px; }
.nextnight__price { margin-top: 12px; font-weight: 600; font-size: 13px; }

/* Night clock (section menu) */
.clock-slot { position: relative; height: var(--clock-h); margin: 18px auto 0; width: calc(100% - 2 * var(--gutter)); max-width: 350px; }
.clock {
  position: absolute; inset: 0; z-index: 25;
  background: rgb(20 18 58 / .94); border: 1.5px solid rgb(255 243 220 / .3);
  border-radius: 28px; box-shadow: 0 8px 20px rgb(5 5 20 / .5);
}
.clock.is-docked { position: fixed; top: calc(var(--nav-h-compact) + var(--dock-gap)); left: 50%; right: auto; width: min(350px, calc(100vw - 2 * var(--gutter))); height: var(--clock-h); transform: translateX(-50%); }
/* Phones and tablets: the clock sits at the foot of the screen from the start,
   always in reach of the thumb (--clock-bottom). With static-nav it stays in the hero. */
@media (max-width: 1279px) {
  body:not(.static-nav) .clock-slot { height: 0; margin: 0; }
  /* the top section fills the screen: the "Next night" card sits just above the clock,
     so the next section never starts behind it */
  body:not(.static-nav) .hero { min-height: 100svh; display: flex; flex-direction: column; padding-bottom: calc(var(--clock-h) + var(--clock-bottom) + 12px); }
  body:not(.static-nav) .hero__inner { flex: 1 0 auto; }
  body:not(.static-nav) .hero__sun { margin-bottom: auto; }   /* the card goes down, the sun stays */
  body:not(.static-nav) .clock {
    position: fixed; inset: auto auto calc(var(--clock-bottom) + env(safe-area-inset-bottom, 0px)) 50%;
    width: min(350px, calc(100vw - 2 * var(--gutter))); height: var(--clock-h); transform: translateX(-50%);
  }
  body:not(.static-nav) .footer { padding-bottom: calc(48px + var(--clock-h) + var(--clock-bottom)); }
}
.clock__list { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); height: 100%; padding: 3px; }
.clock__list::before {            /* the yellow marker of the current section */
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 5); border-radius: 22px; background: var(--butter);
  transform: translateX(calc(var(--active, 0) * 100%));
  transition: transform var(--motion-clock-dur) var(--motion-ease);
}
.clock__link {
  position: relative; height: 100%; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; color: var(--cream); border-radius: 22px; transition: color .2s;
}
.clock__link.is-active { color: var(--ink); }
.clock__time, .clock__link::before { display: none; }

/* ==========================================================================
   LINE-UP
   ========================================================================== */
.lineup { position: relative; background: var(--night); padding: 56px 0 45px; overflow: hidden; }
.lineup__grid { position: relative; }
.lineup__head .intro { margin-top: 12px; }
.lineup__request { margin-top: 22px; width: 170px; height: 48px; font-size: 15px; border-radius: 24px; }

.timetable {
  position: relative; margin-top: 28px; padding: 4.5px 0 32.5px;
  background: var(--indigo); border: 1.5px solid rgb(255 243 220 / .18); border-radius: 24px;
  box-shadow: 0 16px 32px rgb(8 5 26 / .5);
}
.timetable::before {             /* the night line */
  content: ""; position: absolute; left: 100.5px; top: 48.5px; bottom: 28.5px; width: 3px;
  background: rgb(255 243 220 / .25);
}
.set {
  --t: var(--c);
  position: relative; display: grid; min-height: 124px; grid-template-rows: auto 1fr auto;
  grid-template-columns: 58px 16px 1fr; column-gap: 17px; padding: 0 0 0 18.5px;
}
.set__time { grid-row: 1 / 4; padding-top: 25.3px; font-family: var(--font-display); font-size: 14px; line-height: 1.25; color: var(--t); }
.set__dot {
  grid-row: 1 / 4; grid-column: 2; position: relative; margin-top: 26px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--c);
}
.set__dot::before {               /* soft halo */
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--c); opacity: .25;
}
.set__body { grid-column: 3; padding-top: 20px; padding-right: 16px; max-width: 220px; }
.set__name { font-weight: 700; font-size: 20px; line-height: 1.25; }
.set__note { margin-top: 7px; font-size: 14px; line-height: 20px; color: rgb(255 243 220 / .8); }
.tag {
  grid-column: 3; grid-row: 3; align-self: end; justify-self: start; margin: 2px 0 0.7px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 104px; height: 28px; border-radius: 14px; border: 1.5px solid rgb(255 243 220 / .5);
  font-weight: 600; font-size: 13px;
}
.set--headline { color: var(--ink); }
.set--headline::before {
  content: ""; position: absolute; inset: 10px 9.5px -6px 5px; border-radius: 18px;
  background: var(--butter); z-index: 0;
}
.set--headline > * { position: relative; z-index: 1; }
.set--headline .set__time { color: var(--ink); }
.set--headline .set__dot::before { display: none; }
.set--headline .set__note { color: rgb(13 11 38 / .8); }
.set--headline .tag { border-color: rgb(13 11 38 / .5); }

.lineup__photos { position: relative; margin-top: 32px; height: 376px; }
.lineup__booth { position: absolute; left: 0; top: 0; width: 100%; height: 230px; border-radius: 24px; }
.lineup__crowd {
  position: absolute; right: 10px; top: 176px; width: calc(100% - 100px); max-width: 250px; height: 200px;
  outline: 8px solid var(--night); border-radius: 24px; filter: drop-shadow(0 16px 16px rgb(8 5 26 / .5));   /* the frame is drawn outside the photo, like the design */
}

/* ==========================================================================
   DATES
   ========================================================================== */
.dates { position: relative; background: linear-gradient(#2a2373, #5b3a9e); padding: 56px 0 59px; overflow: hidden; }
.dates .intro { color: rgb(255 243 220 / .9); }
.window {
  margin-top: 44px; overflow: hidden; border-radius: 22px; background: var(--cream); color: var(--ink);
  box-shadow: 0 16px 32px rgb(8 5 26 / .5);
}
.window__bar {
  height: 52px; padding: 0 14px 0 18px; display: flex; align-items: center; justify-content: space-between;
  /* EDIT: header colors. The darker start keeps the cream title readable (WCAG AA). */
  background: linear-gradient(90deg, #a3336a 0%, var(--rose-text) 55%, var(--coral) 100%);
}
.window__title { font-weight: 700; font-size: 18px; color: var(--cream); }
.window__dots { display: flex; gap: 6px; }
.window__dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--cream); opacity: .9; }
.window__dots i:nth-child(2) { opacity: .65; }
.window__dots i:nth-child(3) { opacity: .4; }
.show {
  position: relative; display: grid; grid-template-columns: 54px 1fr auto; align-items: start;
  column-gap: 14px; height: 98px; padding: 18px 14px 0;
}
.show:nth-child(odd) { background: rgb(251 227 160 / .35); }
.show__date {
  display: flex; flex-direction: column; align-items: center; width: 54px; height: 62px; border-radius: 12px;
  background: var(--ink); color: var(--cream); font-weight: 600; font-size: 13px; line-height: 1.25; padding-top: 8px;
}
.show__date b { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.25; color: var(--butter); margin-bottom: 4.25px; }
.show__where { padding-top: 4px; max-width: 150px; }
.show__city { font-weight: 700; font-size: 18px; }
.show__venue { margin-top: 3.5px; font-size: 13px; line-height: 18px; color: rgb(13 11 38 / .7); }
.show__btn { margin-top: 11px; width: min(98px, 25.2vw); height: 40px; padding: 0; font-size: 14px; border-radius: 20px; }
.stamp {
  margin: 13px 1px 0 0; width: 96px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--stamp); border-radius: 8px; color: var(--stamp);
  font-family: var(--font-display); font-size: 12px; transform: rotate(6deg);
}
.venue {
  margin-top: 33px; padding: 14.5px 14.5px 0; height: 480px; border-radius: 22px;
  background: var(--night); border: 1.5px solid rgb(255 243 220 / .2);
}
.venue__photo { height: 210px; border-radius: 14px; }
.venue__text { padding: 21.5px 8px 0; }
.venue__label { font-weight: 600; font-size: 15px; color: var(--amber); }
.venue__date { margin-top: 7px; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.25; }
.venue__note { margin-top: 10.5px; font-size: 16px; line-height: 24px; color: rgb(255 243 220 / .85); }
.venue__btn { margin-top: 28px; width: 100%; height: 56px; font-size: 16px; border-radius: 28px; }

/* ==========================================================================
   TICKETS
   ========================================================================== */
.tickets { position: relative; background: var(--deep); padding: 56px 0 70px; overflow: hidden; }
.tickets .title { color: var(--cream); }
.tickets__list { margin-top: 34px; padding-bottom: 20px; }
.ticket {
  position: relative; width: 310px; height: 540px; padding: 26px 28px 0;
  border-radius: 22px; background: var(--cream); color: var(--ink); overflow: hidden;
  border-top: 18px solid var(--accent); box-shadow: 0 18px 34px rgb(5 5 20 / .55);
}
.ticket__top { display: flex; justify-content: space-between; align-items: flex-start; }
.ticket__code { margin-top: 6px; height: 52px; width: auto; max-width: none; }
.ticket__name { margin-top: 32px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 32px; }
.ticket__price { margin-top: 12px; font-family: var(--font-display); font-size: 48px; line-height: 1.25; }
.ticket__note { margin-top: 14px; min-height: 48px; font-size: 16px; line-height: 24px; color: rgb(13 11 38 / .8); }
.ticket__perk { margin-top: 20px; font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--rose-text); }
/* perforated tear line with the two notches */
.ticket__when { position: relative; margin-top: 58.9px; font-weight: 600; font-size: 15px; line-height: 1.25; }
.ticket__when::before {
  content: ""; position: absolute; left: 4px; right: 0; top: -22px; height: 2px;
  background: repeating-linear-gradient(90deg, rgb(13 11 38 / .3) 0 12px, transparent 0 24px);
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; top: 352px; width: 28px; height: 28px; border-radius: 50%; background: var(--deep);
}
.ticket::before { left: -16px; }
.ticket::after { right: -16px; }
.ticket__btn { position: absolute; left: 28px; right: 28px; top: 434px; height: 52px; font-size: 16px; border-radius: 26px; }

/* ==========================================================================
   MIXES
   ========================================================================== */
.mixes {
  position: relative; padding: 56px 0 30px; overflow: hidden;
  background:
    linear-gradient(#1f1b5e 0 162.5px, #2a2373 0 325px, #3a2a8a 0 487.5px, #5b3a9e 0 650px,
      #8a3f94 0 812.5px, #b5428a 0 975px, #c7467f 0 1137.5px, #e0607a 0) top / 100% 1301px no-repeat, #e0607a;
}
.mixes .intro { color: rgb(255 243 220 / .9); }
.player {
  position: relative; margin-top: 40px; height: 760px; border-radius: 24px;
  background: var(--night); border: 1.5px solid rgb(255 243 220 / .25); box-shadow: 0 16px 32px rgb(8 5 26 / .5);
}
.player > * { position: absolute; }
.player__cover { left: 18.5px; top: 18.5px; right: 18.5px; height: 190px; border-radius: 18px; }
.player__info { left: 22.5px; right: 22.5px; top: 229.9px; }
.player__label { font-weight: 600; font-size: 15px; color: var(--amber); }
.player__title { margin-top: 6.4px; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 30px; }
.player__note { margin-top: 6.5px; font-size: 15px; line-height: 22px; color: rgb(255 243 220 / .8); }
.player__wave { left: 22.5px; top: 352.49px; }
.wave rect { fill: rgb(255 243 220 / .28); transition: fill .3s; }
.wave rect.on { fill: var(--coral); }
.wave--d { display: none; }
.player__controls { left: 22.5px; right: 22.5px; top: 432.5px; height: 56px; display: flex; align-items: center; }
.player__play {
  position: relative; flex: none; width: 56px; height: 56px; border: 0; padding: 0; border-radius: 50%;
  background: var(--butter); cursor: pointer;
}
.player__play img { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-42%, -50%); }   /* a touch right of center, so the triangle looks centered */
.player__play .icon-pause { transform: translate(-50%, -50%); }
.icon-pause, .is-playing .icon-play { display: none; }
.is-playing .icon-pause { display: block; }
.player__skip {
  width: 38px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.player__skip:first-of-type { margin-left: 15px; }  /* previous */
.player__skip img { width: 19.62px; height: 19.62px; }
.player__volume {
  margin-left: auto; padding-bottom: 4px; display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: rgb(255 243 220 / .8);
}
.player__volume input {
  -webkit-appearance: none; appearance: none; width: 74px; height: 18px; margin: 0; background: none; cursor: pointer;
  --fill: 59%;
}
.player__volume input::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--butter) 0 var(--fill), rgb(255 243 220 / .25) 0);
}
.player__volume input::-moz-range-track { height: 6px; border-radius: 3px; background: rgb(255 243 220 / .25); }
.player__volume input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--butter); }
.player__volume input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--butter); border: 0; }
.player__volume input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--butter); border: 0; }
.tracks { left: 22.5px; right: 22.5px; top: 514.5px; border-top: 2px solid rgb(255 243 220 / .15); padding-top: 14px; }
.track button {
  position: relative; width: calc(100% + 24px); margin-left: -12px; height: 48px; margin-bottom: 6px;
  display: flex; align-items: center; padding: 0 16px; border: 0; border-radius: 14px;
  background: none; text-align: left; cursor: pointer;
}
.track.is-current button { background: var(--indigo); }
.track__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgb(255 243 220 / .2); }
.track.is-current .track__dot { background: var(--coral); }
.track__name { margin-left: 14px; font-weight: 600; font-size: 16px; }
.track__artist { display: none; }
.track__state { margin-right: 7px; margin-left: auto; font-weight: 700; font-size: 14px; color: var(--amber); visibility: hidden; }
.track.is-current .track__state { visibility: visible; }

.moresets { margin-top: 26px; }
.moresets__title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.25; }
.moresets__list { margin: 22.5px calc(-1 * var(--gutter)) 0; }
.mix {
  position: relative; width: 310px; height: 196px; padding: 20px 18px; display: grid;
  grid-template-columns: 104px 1fr; column-gap: 16px; grid-template-rows: auto 1fr;
  border-radius: 22px; background: var(--cream); color: var(--ink);
}
.mix__cover {
  grid-row: 1 / 3; height: 156px; border-radius: 14px;
  background: linear-gradient(var(--b1) 0 40px, var(--b2) 0 79px, var(--b3) 0 118px, var(--b4) 0);
}
.mix__text { padding-top: 6px; }
.mix__name { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 26px; min-height: 52px; }
.mix__note { margin-top: 4px; font-size: 14px; line-height: 20px; color: rgb(13 11 38 / .75); }
.mix__listen { position: absolute; left: 138px; top: 128px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.mix__play { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); }
.mix__label { position: relative; top: -1.3px; }
.mix__play img { position: absolute; left: 16.28px; top: 12.27px; width: 19.46px; height: 19.46px; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about {
  position: relative; overflow: hidden; padding: 60px 0 80px; color: var(--ink);
  background:
    linear-gradient(#c7467f 0 167.5px, #d95a77 0 335px, #e66a6c 0 502.5px, #f27a5b 0 670px,
      #f48d58 0 837.5px, #f7b267 0 1005px, #f9c97f 0 1172.5px, #fbe3a0 0) top / 100% 1341px no-repeat, #fbe3a0;
}
.about__sun { width: 300px; height: 300px; margin: 0 auto; --ring-outer: #f27a5b; }
.about__sun .sun__ring--outer { inset: 0; }
.about__sun .sun__ring--mid { inset: 18px; }
.about__sun .sun__ring--inner { inset: 34px; }
.about__sun .sun__photo { inset: 50px; }
.about__grid { position: relative; z-index: 1; }
.about__text { margin-top: 40px; }
.about__text .title { font-size: 36px; }
.about__text p { margin-top: 15px; font-size: 17px; line-height: 26px; }
.about__text p + p { margin-top: 24px; }
.about__photos { margin: 12px calc(-1 * var(--gutter)) 0; }
.frame { width: 196px; height: 260px; padding: 8px; border-radius: 26px; background: var(--cream); }
.frame__slot { height: 100%; border-radius: 18px; }
.rules { margin-top: 40px; height: 230px; padding: 24px; border-radius: 22px; background: var(--cream); }
.rules__title { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.25; }
.rules__list { margin-top: 27.5px; display: grid; gap: 24px; }
.rules__list li { position: relative; padding-left: 26px; font-weight: 600; font-size: 16px; line-height: 1.25; }
.rules__list li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); }
.about__hills { position: absolute; inset: auto 0 0; height: 50px; pointer-events: none; }
.hill { position: absolute; border-radius: 50%; }
.hill--far, .hill--front { display: none; }
.hill--mid { left: calc(50% - 315px); top: 0; width: 560px; height: 200px; background: #5b3a9e; }
.hill--near { left: calc(50% - 75px); top: 10px; width: 520px; height: 200px; background: #2a2373; }

/* ==========================================================================
   BOOKING
   ========================================================================== */
.booking {
  position: relative; overflow: hidden; padding: 57px 0 61px; color: var(--ink);
  background: linear-gradient(rgb(251 227 160 / .7) 0 236px, transparent 0), var(--cream);
}
.booking__sun { display: none; }
.booking__text .title { font-size: 30px; }
.booking__intro { margin-top: 16px; font-size: 17px; line-height: 26px; }
.booking__email {
  display: inline-block; margin-top: 30px; font-family: var(--font-display); font-size: min(15px, 3.85vw); line-height: 1.25; color: var(--rose-text);
  padding-block: 12.5px; margin-block: 18.4px -12.5px;   /* 44 px touch area */
}
.booking__press { margin-top: 13px; font-weight: 600; font-size: 15px; line-height: 1.25; max-width: 260px; }
.booking__press a { display: inline-block; }
.chips { margin-top: 11.3px; display: flex; flex-wrap: wrap; gap: 12px 10px; max-width: 260px; }
.chips li {
  height: 40px; padding: 0 14px; display: flex; align-items: center; border: 2px solid var(--ink); border-radius: 20px;
  font-weight: 600; font-size: 15px;
}
.chips li { justify-content: center; }
/* EDIT: minimum widths from the design (the browser draws the text a little narrower) */
.chips li:nth-child(1) { min-width: 104px; } .chips li:nth-child(2) { min-width: 126px; }
.chips li:nth-child(3) { min-width: 149px; } .chips li:nth-child(4) { min-width: 82px; }
.booking__photo { margin-top: 21.3px; height: 220px; border: 4px solid var(--ink); border-radius: 22px; }
.note {
  margin-top: 32.5px; padding: 23.5px 20px 0; height: 570px; border: 4px solid var(--ink); border-radius: 28px;
  background: var(--cream); display: flex; flex-direction: column;
}
.note__title { text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.25; }
.field { display: block; margin-top: 31.8px; }
.field + .field { margin-top: 8px; }
.field span { display: block; font-weight: 700; font-size: 14px; line-height: 1.25; }
.field input, .field textarea {
  display: block; width: 100%; margin-top: 8.5px; height: 46px; padding: 0 14px;
  border: 1.5px solid var(--ink); border-radius: 12px; background: #fff9ec; color: var(--ink);
}
.field textarea { height: 100px; padding: 12px 14px; resize: vertical; }
.note__send { margin-top: 28px; width: 230px; height: 50px; font-size: 15px; color: var(--butter); border-radius: 25px; border: 0; cursor: pointer; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; overflow: hidden; background: var(--footer); border-top: 3px solid var(--coral); padding: 53px 0 48px; }
.footer__logo { font-family: var(--font-display); font-size: 26px; line-height: 1.25; }
.footer__line { margin-top: 14.5px; font-size: 16px; line-height: 24px; color: rgb(255 243 220 / .75); }
.contact { margin-top: 56px; }
.contact + .contact { margin-top: 18px; }
.contact__title { font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--amber); }
.contact__mail { margin-top: 9px; font-size: 14px; line-height: 1.25; }
.contact__btn { margin-top: 14px; width: 122px; height: 40px; border-radius: 20px; }
.contact__btn--kit { width: 141px; }
.footer__bottom { margin-top: 28px; padding-top: 21px; border-top: 1px solid rgb(255 243 220 / .15); position: relative; }
.social { display: grid; grid-template-columns: 170px 1fr; row-gap: 17px; }
.social a { font-weight: 600; font-size: 15px; line-height: 1.25; display: inline-block; padding-block: 8.5px; margin-block: -8.5px; }
.footer__top { display: none; }
.footer__copy { margin-top: 41px; font-size: 13px; line-height: 1.25; color: rgb(255 243 220 / .6); }


/* Touch areas of at least 44 px on phones, without changing how things look */
@media (max-width: 1279px) {
  .show__btn, .contact__btn, .lineup__request, .nextnight__btn { position: relative; }
  .show__btn::after, .contact__btn::after, .nextnight__btn::after { content: ""; position: absolute; inset: -2px; }
  .player__volume input { height: 44px; margin-block: -13px; }
  .booking__press a { padding-block: 12.5px; margin-block: -12.5px; }
}

/* ==========================================================================
   DESKTOP (1280 px and wider)
   ========================================================================== */
@media (min-width: 1280px) {
  .wrap { max-width: 1440px; }
  .d-only { display: inline; }
  .m-only { display: none; }
  .title { font-size: 56px; }
  .intro { margin-top: 10px; font-size: 20px; line-height: 30px; }
  .stars { display: none; }
  .stars--d { display: block; width: 1440px; }

  .topbar__logo { font-size: 18px; }
  .topbar__book { width: 200px; height: 52px; font-size: 16px; border-radius: 26px; }

  /* Hero: the sky, the sun and the city scale with the page (--k) */
  /* The hero is the screen height, between 760 and 900 px (the design), so the night
     clock at its foot is always on the first screen. --squeeze is how much shorter
     than the design it is; the spaces between the texts take part of it. */
  .hero {
    --hero-h: clamp(760px, 100svh, 900px);
    --squeeze: calc(900px - var(--hero-h));
    height: var(--hero-h); padding-bottom: 0;
    background:
      linear-gradient(var(--sky-1) 0 calc(68.33 * var(--k)), var(--sky-2) 0 calc(136.67 * var(--k)),
        var(--sky-3) 0 calc(205 * var(--k)), var(--sky-4) 0 calc(273.33 * var(--k)),
        var(--sky-5) 0 calc(341.67 * var(--k)), var(--sky-6) 0 calc(410 * var(--k)),
        var(--sky-7) 0 calc(478.33 * var(--k)), var(--sky-8) 0 calc(546.67 * var(--k)),
        var(--sky-9) 0 calc(615 * var(--k)), var(--sky-10) 0 calc(683.33 * var(--k)),
        var(--sky-11) 0 calc(751.67 * var(--k)), var(--sky-12) 0) bottom / 100% calc(900 * var(--k)) no-repeat,
      var(--sky-1);
  }
  .hero__stars { width: calc(1440 * var(--k)); top: auto; bottom: 0; }
  .hero__city { left: 0; right: 0; height: calc(900 * var(--k)); overflow: hidden; }
  .hero__city img { width: calc(1526 * var(--k)); height: 100%; }
  .hero__inner { position: static; padding-top: calc(130px - var(--squeeze) * .15); }
  .hero__title { font-size: max(56px, calc(84 * var(--k))); line-height: 1.0952; }
  .hero__intro { margin-top: calc(38px - var(--squeeze) * .1); font-size: 20px; line-height: 32px; max-width: min(520px, calc(720 * var(--k) - 120px)); }
  .hero__actions { margin-top: calc(52px - var(--squeeze) * .2); gap: 20px; }
  .hero__actions .btn { height: 60px; font-size: 17px; }
  .hero__actions .btn:first-child { min-width: 210px; }
  .hero__actions .btn:last-child { min-width: 190px; }
  .hero__sun {
    position: absolute; margin: 0; left: 50%; bottom: calc(50 * var(--k));
    width: calc(660 * var(--k)); height: calc(660 * var(--k)); z-index: -1;
  }
  .hero__sun .sun__ring--mid { inset: calc(40 * var(--k)); }
  .hero__sun .sun__ring--inner { inset: calc(75 * var(--k)); }
  .hero__sun .sun__photo { inset: calc(100 * var(--k)); }

  .nextnight { margin-top: calc(36px - var(--squeeze) * .1); width: 560px; min-height: 0; height: 158px; padding-bottom: 0; border-radius: 22px; border-top-width: 10px; box-shadow: 0 16px 32px rgb(13 10 38 / .45); }
  .nextnight__main { padding: 18.8px 0 0 32px; }
  .nextnight__label { font-size: 15px; }
  .nextnight__date { margin-top: 7.25px; font-size: 38px; }
  .nextnight__place { margin-top: 10.25px; font-size: 16px; line-height: 1.25; max-width: none; }
  .nextnight__stub { width: 169px; padding: 38px 14px 0 9px; }
  .nextnight__stub::before { top: 16px; bottom: 10px; }
  .nextnight__btn { width: 120px; height: 52px; font-size: 16px; border-radius: 26px; }
  .nextnight__price { margin-top: 12px; font-size: 15px; }

  /* no transform here: it would make the docked (fixed) clock scroll with the hero */
  .clock-slot { position: absolute; left: calc(50% - 380px); top: calc(var(--hero-h) - 92px); width: 760px; max-width: none; margin: 0; }
  .clock { border-radius: 32px; box-shadow: 0 10px 24px rgb(5 5 20 / .5); }
  .clock.is-docked { width: 760px; }
  .clock__list { grid-template-columns: repeat(5, 148px); padding: 5px 0 5px 7px; }
  .clock__list::before { top: 5px; bottom: 5px; left: 7px; width: 150px; border-radius: 24px; transform: translateX(calc(var(--active, 0) * 148px)); }
  .clock__link { justify-content: flex-start; padding-left: 16px; font-size: 14px; border-radius: 24px; }
  .clock__link::before { content: ""; display: block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); margin-right: 8px; }
  .clock__time { display: inline; font-weight: 700; margin-right: 8px; color: var(--time, var(--ink)); }
  .clock__link.is-active .clock__time { color: var(--ink); }

  /* Line-up */
  .lineup { height: 960px; padding: 72px 0 0; }
  .lineup__grid { display: grid; grid-template-columns: minmax(0, 800fr) minmax(0, 440fr); column-gap: 40px; align-items: start; }
  .lineup__head { grid-column: 1 / 3; position: relative; }
  .lineup__head .intro { max-width: 640px; margin-top: 8.5px; }
  .lineup__request { position: absolute; right: 0; top: 12px; margin: 0; width: 180px; height: 52px; font-size: 16px; border-radius: 26px; }
  .timetable { margin-top: 39.5px; height: 640px; padding: 19px 0 0; border-radius: 28px; box-shadow: 0 20px 40px rgb(8 5 26 / .5); }
  .timetable::before { left: 144.5px; top: 58.5px; bottom: 2.5px; }
  .set { min-height: 120px; grid-template-columns: 109px 18px 1fr 150px; column-gap: 0; padding: 0 38.5px 0 28.5px; }
  .set__time { padding-top: 47.4px; font-size: 19px; }
  .set__dot { margin-top: 51px; width: 18px; height: 18px; }
  .set__dot::before { inset: -5px; }
  .set__body { grid-row: 1 / 4; padding: 22px 0 0 13px; max-width: none; }
  .set__name { font-size: 28px; }
  .set__note { margin-top: 5px; font-size: 17px; line-height: 1.25; }
  .tag { grid-column: 4; grid-row: 1 / 4; align-self: start; margin: 43.3px 0 0; width: 150px; height: 36px; border-radius: 18px; font-size: 15px; }
  .set--headline::before { inset: 4px 14.5px 4px 14.5px; border-radius: 20px; }
  .lineup__photos { margin-top: 38px; height: 590px; }
  .lineup__booth { height: 330px; border-radius: 28px; }
  .lineup__crowd { right: 0; top: 290px; width: calc(100% * 320 / 440); max-width: none; height: 300px; border-radius: 28px; filter: drop-shadow(0 14px 15px rgb(8 5 26 / .5)); }

  /* Dates */
  .dates { height: 920px; padding: 72px 0 0; }
  .dates__grid { display: grid; grid-template-columns: minmax(0, 820fr) minmax(0, 420fr); column-gap: 40px; }
  .dates__head { grid-column: 1 / 3; }
  .dates .intro { max-width: 780px; }
  .window { margin-top: 54px; height: 630px; border-radius: 24px; box-shadow: 0 20px 40px rgb(13 8 51 / .5); }
  .window__bar { height: 56px; padding: 0 30px 0 28px; }
  .window__title { font-size: 20px; }
  .window__dots i { width: 16px; height: 16px; }
  .show { height: 95px; grid-template-columns: 70px 1fr 152px; column-gap: 24px; padding: 14px 28px 0; }
  .show__date { width: 70px; height: 67px; border-radius: 14px; font-size: 15px; padding-top: 8.8px; }
  .show__date b { font-size: 26px; margin-bottom: 1.5px; }
  .show__where { padding-top: 6px; max-width: none; }
  .show__city { font-size: 24px; }
  .show__venue { margin-top: 4px; font-size: 16px; line-height: 1.25; }
  .show__btn { margin-top: 8px; width: 152px; height: 52px; font-size: 16px; border-radius: 26px; }
  .stamp { margin: 10px 0 0 6.7px; width: 140px; height: 48px; font-size: 16px; }
  .venue { margin-top: 54px; height: 630px; padding: 14.5px; border-radius: 24px; }
  .venue__photo { height: 300px; border-radius: 16px; }
  .venue__text { padding: 24px 16px 0; }
  .venue__label { font-size: 16px; }
  .venue__date { margin-top: 8px; font-size: 36px; }
  .venue__note { margin-top: 15px; font-size: 17px; line-height: 26px; }
  .venue__btn { margin-top: 40px; height: 60px; font-size: 17px; border-radius: 30px; }

  /* Tickets */
  .tickets { height: 860px; padding: 72px 0 0; }
  .tickets__intro { max-width: 760px; }
  .tickets__list {
    display: grid; grid-template-columns: repeat(4, minmax(0, 290px)); justify-content: space-between;
    max-width: 1440px; margin: 24px auto 0; padding: 0 var(--gutter); overflow: visible; gap: 40px;
  }
  .ticket { width: auto; }
  .ticket::after { right: -16px; }

  /* Mixes */
  .mixes {
    height: 940px; padding: 72px 0 0;
    background:
      linear-gradient(#241f75 0 115px, #2f2584 0 230px, #3d2a92 0 345px, #4f3099 0 460px,
        #693a9c 0 575px, #8a4098 0 690px, #a84497 0 805px, #c7467f 0) top / 100% 981px no-repeat, #c7467f;
  }
  .mixes__grid { display: grid; grid-template-columns: minmax(0, 800fr) minmax(0, 440fr); column-gap: 40px; }
  .mixes__head { grid-column: 1 / 3; }
  .mixes .intro { max-width: 760px; }
  .player { margin-top: 38px; height: 620px; border-radius: 28px; box-shadow: 0 20px 40px rgb(8 5 31 / .5); }
  .player__cover { left: 30.5px; top: 30.5px; right: auto; width: 200px; height: 260px; border-radius: 24px; }
  .player__info { left: 262.5px; right: 34px; top: 39.5px; }
  .player__label { font-size: 16px; }
  .player__title { margin-top: 9px; font-size: 30px; line-height: 40px; }
  .player__note { margin-top: 4px; font-size: 17px; line-height: 26px; }
  .player__wave { left: 262.5px; top: 178.38px; }
  .wave--d { display: block; }
  .wave--m { display: none; }
  .player__controls { left: 262.5px; right: auto; top: 266.5px; height: 60px; width: 440px; }
  .player__play { width: 60px; height: 60px; }
  .player__play img { width: 26px; height: 26px; }
  .player__skip { width: 56px; }
  .player__skip:first-of-type { margin-left: 5px; }
  .player__skip img { width: 19.62px; height: 19.62px; }
  .player__volume { margin-left: 24.5px; padding: 7.5px 0 0; gap: 15.5px; font-size: 15px; }
  .player__volume input { width: 170px; }
  .tracks { left: 30.5px; right: 30.5px; top: 353.5px; padding-top: 16px; }
  .track button { width: calc(100% + 16px); margin-left: -8px; height: 52px; padding: 0 20px; margin-bottom: 6px; }
  .track__name { margin-left: 20px; font-size: 18px; width: 416px; }
  .track__artist { display: block; font-size: 16px; color: rgb(255 243 220 / .65); }
  .track__state { font-size: 15px; margin-right: 8px; }
  .moresets { margin-top: 38px; }
  .moresets__title { display: none; }
  .moresets__list { display: grid; gap: 16px; margin: 0; padding: 0; overflow: visible; }
  .mix { width: auto; height: 196px; padding: 20px; grid-template-columns: 120px 1fr; column-gap: 20px; border-radius: 24px; box-shadow: 0 12px 28px rgb(8 5 31 / .4); }
  .mix__text { padding-top: 10px; }
  .mix__name { font-size: 20px; line-height: 28px; min-height: 0; }
  .mix__note { margin-top: 12px; font-size: 16px; line-height: 24px; max-width: 250px; }
  .mix__listen { left: 160px; top: 126px; gap: 14px; font-size: 16px; }
  .mix__label { position: relative; top: -2.5px; }
  .mix__play { width: 50px; height: 50px; }
  .mix__play img { left: 16.5px; top: 14.19px; width: 21.62px; height: 21.62px; }

  /* About */
  .about {
    height: 1040px; padding: 0;
    background:
      linear-gradient(#c7467f 0 130px, #d85575 0 260px, #e66a69 0 390px, #f27a5b 0 520px,
        #f58f5a 0 650px, #f7b267 0 780px, #f9cc83 0 910px, #fbe3a0 0) top / 100% 1041px no-repeat, #fbe3a0;
  }
  .about__sun {
    position: absolute; left: max(0px, calc(50% - 660px)); top: 130px; width: 680px; height: 680px; margin: 0;
    --ring-outer: #f9a066;
  }
  .about__sun .sun__ring--mid { inset: 40px; }
  .about__sun .sun__ring--inner { inset: 75px; }
  .about__sun .sun__photo { inset: 100px; }
  .about__grid { display: grid; grid-template-columns: minmax(0, 1fr) 580px 20px; padding-top: 111px; }
  .about__text, .about__photos, .rules { grid-column: 2; }
  .about__text { margin: 0; }
  .about__text .title { font-size: 46px; }
  .about__text p { margin-top: 28px; font-size: 18px; line-height: 29px; }
  .about__text p + p { margin-top: 58px; }
  .about__photos { display: flex; gap: 26px; margin: 42px 0 0; padding: 0; overflow: visible; }
  .frame { width: 176px; height: 230px; }
  .rules { margin-top: 30px; height: 190px; padding: 22px 28px; border-radius: 24px; }
  .rules__list { margin-top: 23px; gap: 16.75px; }
  .rules__list li { padding-left: 26px; font-size: 17px; }
  .rules__list li::before { left: 0; top: 7px; width: 14px; height: 14px; }
  .about__hills { inset: 840px 0 0; height: auto; overflow: hidden; }
  .hill--far, .hill--front { display: block; }
  .hill--far { left: calc(50% - 1020px); top: 0; width: 1300px; height: 520px; background: #8a4098; }
  .hill--mid { left: calc(50% - 220px); top: 40px; width: 1400px; height: 520px; background: #5b3a9e; }
  .hill--near { left: calc(50% - 920px); top: 90px; width: 1100px; height: 420px; background: #2a2373; }
  .hill--front { left: calc(50% + 80px); top: 120px; width: 900px; height: 400px; background: #1b1859; }

  /* Booking */
  .booking {
    height: 880px; padding: 0;
    background: linear-gradient(#fbe3a0 0 293.33px, #fcebb8 0 440px, #fdf0c9 0 586.67px, transparent 0), var(--cream);
  }
  .booking__sun { display: block; position: absolute; left: calc(50% - 880px); top: 420px; width: 640px; height: 640px; border-radius: 50%; background: var(--butter); }
  .booking__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 580px 20px; column-gap: 0; padding-top: 98px; }
  .booking__text { padding-top: 12px; }
  .booking__text .title { font-size: 44px; }
  .booking__intro { margin-top: 25px; font-size: 19px; line-height: 30px; max-width: 500px; }
  .booking__email { margin: 58.9px 0 -12px; font-size: 19px; }
  .booking__press { margin-top: 18px; font-size: 16px; max-width: none; }
  .chips { margin-top: 40px; max-width: none; gap: 12px; }
  .chips li { height: 44px; padding: 0 18px; font-size: 16px; border-radius: 22px; }
  .chips li:nth-child(1) { min-width: 116px; } .chips li:nth-child(2) { min-width: 139px; }
  .chips li:nth-child(3) { min-width: 164px; } .chips li:nth-child(4) { min-width: 93px; }
  .booking__photo { margin-top: 34px; width: 400px; height: 290px; border-radius: 24px; }
  .note { grid-column: 2; margin: 0; height: 684px; padding: 54px 60px 0; border-width: 10px; border-color: var(--night); border-radius: 32px; }
  .note__title { font-size: 24px; }
  .field { margin-top: 40px; }
  .field + .field { margin-top: 20px; }
  .field span { font-size: 15px; }
  .field input, .field textarea { margin-top: 7.25px; height: 50px; border-width: 2px; border-radius: 14px; background: #fffaf0; }
  .field textarea { height: 104px; }
  .note__send { margin-top: 26px; width: 300px; height: 56px; font-size: 16px; border-radius: 28px; }

  /* Footer */
  .footer { height: 420px; padding: 70px 0 0; }
  .footer__grid { display: grid; grid-template-columns: minmax(0, 440fr) minmax(0, 300fr) minmax(0, 300fr) minmax(0, 240fr); }
  .contact__mail { overflow-wrap: anywhere; }
  .footer__logo { font-size: 30px; }
  .footer__line { margin-top: 14px; font-size: 17px; line-height: 26px; max-width: 380px; }
  .contact, .contact + .contact { margin: 4px 0 0; }
  .contact__title { font-size: 18px; }
  .contact__mail { margin-top: 13px; font-size: clamp(13px, 1.05cqi, 15px); line-height: 22px; }
  .contact__btn { margin-top: 30px; width: 150px; }
  .contact__btn--kit { width: 170px; }
  .footer__bottom { grid-column: 1 / -1; margin-top: 54px; padding-top: 42px; display: grid; grid-template-columns: 1fr auto; }
  .social { grid-template-columns: 130px 140px 180px auto; }
  .social a { font-size: 16px; }
  .footer__top { display: block; grid-column: 2; grid-row: 1; margin-right: 26px; font-weight: 600; color: var(--butter); padding-block: 12px; margin-block: -12px; }
  .footer__copy { grid-column: 1 / -1; margin-top: 40px; font-size: 14px; }
}

/* Wider than the design: content stays centered, backgrounds fill the screen */
@media (min-width: 1441px) {
  .hero__city img { width: max(1526px, 106cqi); }
}

/* ==========================================================================
   ANIMATIONS
   Only when <html> has the class "motion" (set by the script in the <head>).
   ========================================================================== */
@keyframes sun-rise { from { transform: translateY(var(--motion-sun-dist)); } }
@keyframes sun-rise-d { from { transform: translateY(calc(var(--motion-sun-dist) / 1px * var(--k))); } }
@keyframes stamp-press { 0% { transform: rotate(6deg) scale(1.35); opacity: 0; } 70% { opacity: 1; } 100% { transform: rotate(6deg) scale(1); } }
.motion .hero__sun { animation: sun-rise var(--motion-sun-dur) var(--motion-ease) backwards; }
@media (min-width: 1280px) {
  .motion .hero__sun { animation-name: sun-rise-d; }
}
.motion .reveal { opacity: 0; transform: translateY(var(--motion-reveal-dist)); transition: opacity var(--motion-reveal-dur) var(--motion-ease), transform var(--motion-reveal-dur) var(--motion-ease); transition-delay: calc(var(--i, 0) * var(--motion-reveal-step)); }
.motion .reveal.is-in { opacity: 1; transform: none; }
.motion .stamp { opacity: 0; }
.motion .is-in .stamp { opacity: 1; animation: stamp-press var(--motion-stamp-dur) var(--motion-ease) .35s backwards; }
.no-motion *, .no-motion *::before, .no-motion *::after { transition: none !important; animation: none !important; }

/* ---------- DEMO ONLY (not in the product) */
.footer__demo { position: relative; padding-top: 24px; padding-bottom: 8px; font-size: 13px; line-height: 1.5; color: var(--cream); }
.footer__demo p + p { margin-top: 4px; }
.footer__demo a { color: var(--butter); text-decoration: underline; text-underline-offset: 3px; }
.demo-note { margin-top: 12px; font-size: 14px; color: var(--ink); }
.footer { height: auto !important; min-height: 0 !important; }