/* ==========================================================================
   High Tide · Tropical 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: "Fraunces";
  src: url("../../fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 600 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../../fonts/dm-sans-latin-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../../fonts/space-grotesk-latin-var.woff2") format("woff2");
  font-weight: 500 700; 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 */
  --night: #170a26;        /* page background, dark text on light colors */
  --dusk: #241038;         /* alternate sections, inputs, current track */
  --cream: #fff1dc;        /* titles and light text */
  --muted: #bfa8d0;        /* body text on dark backgrounds */
  --coral: #ff5a3c;        /* main buttons, "on sale" */
  --amber: #ffb627;        /* rolling band, months, prices */
  --teal: #12d6b0;         /* "new release", "coming soon" */
  --line: rgb(255 241 220 / .16);   /* thin dividers and input borders */
  --palm: #0c0316;         /* palm trees (inside the SVG files) */

  /* Sky and sea of the top section */
  --sky: linear-gradient(180deg, #170a26 0%, #3b1259 42%, #b02a72 74%, #ff5a3c 92%, #ffb627 100%);
  --sea: linear-gradient(180deg, #ff9a3c 0%, #8e2a6a 16%, #2a1245 60%, #170a26 100%);
  /* Booking panel */
  --sunset: linear-gradient(90deg, #ffb627 0%, #ff5a3c 55%, #ff3d8b 100%);

  /* Photo slot placeholders (hidden once a photo is added) */
  --slot-teal: linear-gradient(168deg, #2f8f8a 0%, #0f3d4a 83.333%);
  --slot-sea: linear-gradient(170deg, #3aa39a 0%, #14505a 83.333%);
  --slot-sand: linear-gradient(168deg, #e9b88a 0%, #b8643f 83.333%);
  /* EDIT: "replace with photo" hints. Each one reaches the WCAG AA contrast
     (4.5:1) on its own placeholder. They disappear once a photo is added. */
  --hint-light: rgb(255 255 255 / .8);   /* on the teal placeholders */
  --hint-dark: #170a26;                  /* on the sand product placeholders */

  /* ---------- Fonts */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-label: "Space Grotesk", system-ui, sans-serif;
  --font-hint: "Inter", system-ui, sans-serif;

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

  /* ---------- Menu bar (fixed on top while scrolling)
     --nav-h at the top of the page, --nav-h-compact after scrolling. */
  --nav-h: 90px;
  --nav-h-compact: 72px;
  --nav-dur: .25s;
  --nav-bg: rgb(23 10 38 / .9);
  --nav-shadow: 0 1px 0 var(--line);

  /* ---------- Animations (see "Animations" in README.md)
     EDIT: slower or faster, longer or shorter moves. */
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-sun-dur: 2.2s;      /* the sun settling on the horizon on load */
  --motion-sun-dist: 40px;
  --motion-sway-dur: 7s;       /* one slow sway of the palm trees */
  --motion-sway-angle: 1.2deg; /* how far they lean */
  --motion-band-dur: 40s;      /* one loop of the rolling band */
  --motion-reveal-dur: .7s;    /* tracks, dates, photos and cards rising into view */
  --motion-reveal-dist: 20px;
  --motion-reveal-step: .08s;
}

@media (min-width: 768px) {
  :root { --column: 640px; }
}

@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);
    --nav-h: 117px;
    /* --k scales the art of the top section, 1 at 1440 px wide */
    --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.5;
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
header, main, footer, .topbar { container-type: inline-size; }
h1, h2, h3, p, ul, ol, dl, dd { 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(--nav-h-compact); }

:focus-visible { outline: 3px solid var(--focus, var(--amber)); outline-offset: 3px; border-radius: 6px; }
.book__text, .band { --focus: var(--night); }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 60; padding: 12px 18px;
  background: var(--amber); color: var(--night); 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: 900; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 46px; line-height: 1; letter-spacing: -.015em; color: var(--cream);
}
.intro { margin-top: 16px; color: var(--muted); }
.label, .link-caps, .chip, .btn, .nav__links, .footer__links, .footer__social, .band, dt, .field span {
  font-family: var(--font-label); text-transform: uppercase; line-height: 1;
}
.label { font-weight: 500; font-size: 13px; letter-spacing: 1.82px; }
.label--teal { color: var(--teal); }

/* ---------- Buttons (pills) */
.btn {
  --py: 13px; --px: 22px;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: var(--py) var(--px); border-radius: 999px; font-weight: 700; font-size: 14px; line-height: 14px; letter-spacing: 1.12px;
  transition: transform .2s var(--motion-ease), background-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--coral { background: var(--coral); color: var(--night); }
/* outlined pills: the 1.5 px line is drawn inside, so it stays 1.5 px on every screen */
.btn--line { color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--cream); padding: calc(var(--py) + 1.5px) calc(var(--px) + 1.5px); }
.btn--xs { --py: 10px; --px: 16px; }
.chip {
  display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px;
  font-weight: 500; font-size: 13px; line-height: 13px; letter-spacing: 1.82px; white-space: nowrap;
}
.chip--sale { background: var(--coral); color: var(--night); }
.chip--out { border: 1px solid var(--muted); color: var(--muted); }
.chip--soon { border: 1px solid var(--teal); color: var(--teal); }

/* ---------- 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; color: var(--hint, var(--hint-light)); }
.slot--teal { background: var(--slot-teal); }
.slot--sea { background: var(--slot-sea); --hint: #fff; }   /* full white reaches 4.5:1 on this lighter teal */
.slot--sand { background: var(--slot-sand); --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: 15px; white-space: nowrap;
}
.slot__icon { width: 56px; height: 56px; opacity: .7; }
.slot:has(img) .slot__hint { 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: 40; 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(10px); } }
.static-nav .topbar { position: absolute; }
.static-nav .topbar.is-scrolled { background: none; box-shadow: none; height: var(--nav-h); }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav__logo {
  font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 28px; line-height: 1.2; letter-spacing: -.14px; padding-block: 5px; margin-block: -5px;
}
.nav__toggle {
  position: relative; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nav__bars { display: grid; gap: 6px; width: 28px; }
.nav__bars i { display: block; height: 2px; border-radius: 1px; background: var(--cream); transition: transform .25s, opacity .2s; }
.nav__bars i:last-child { width: 18px; }
.nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav__toggle[aria-expanded="true"] .nav__bars i:first-child { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__bars i:last-child { width: 28px; transform: translateY(-8px) rotate(-45deg); }
/* phone menu panel */
.nav__panel {
  position: absolute; left: 0; right: 0; top: 100%; display: none;
  padding: 12px var(--gutter) 32px; background: var(--night); border-bottom: 1px solid var(--line);
  box-shadow: 0 20px 40px rgb(0 0 0 / .35);
}
.nav__panel.is-open { display: block; }
.nav__links { display: grid; font-weight: 500; font-size: 15px; letter-spacing: 1.82px; }
.nav__links a { display: flex; align-items: center; height: 52px; border-bottom: 1px solid var(--line); }
.nav__book { margin-top: 24px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  /* The top section and the yellow band fit the screen together. The hero is the
     screen height minus the band (56 px), at most 900 (the design). First the empty
     bottom of the sea is cut (up to 40 px), then the sun, palm and sky move up
     (--art-up) and the texts move up with them, at most 42 px (--text-up). */
  --hero-h: clamp(746px, 100svh - 56px, 900px);   /* 746: the sun stays below the buttons */
  --art-up: max(0px, 900px - var(--hero-h) - 40px);
  --text-up: min(var(--art-up), 42px);
  position: relative; z-index: 1; overflow: hidden; height: var(--hero-h);
  background: var(--sky) 0 calc(-1 * var(--art-up)) / 100% 740px no-repeat, var(--night);
}
.hero__art { position: absolute; inset: 0; pointer-events: none; }
.hero__stage { position: absolute; left: 50%; top: calc(-1 * var(--art-up)); width: 390px; height: 900px; margin-left: -195px; }
.hero__sea { position: absolute; left: calc(50% - 50vw); width: 100vw; top: 740px; height: 160px; background: var(--sea); }
.hero__sun { position: absolute; left: 15px; top: 560px; width: 359.8px; height: 360px; max-width: none; }
.hero__glints li { position: absolute; background: var(--amber); }
.hero__glints li:nth-child(1) { left: 65px; top: 756px; width: 260px; height: 8px; border-radius: 4px; }
.hero__glints li:nth-child(2) { left: 100px; top: 780px; width: 190px; height: 8px; border-radius: 4px; }
.hero__glints li:nth-child(3) { left: 130px; top: 806px; width: 130px; height: 6px; border-radius: 3px; }
.hero__glints li:nth-child(4) { left: 155px; top: 836px; width: 80px; height: 6px; border-radius: 3px; }
.hero__glints li:nth-child(5) { display: none; }
.hero__palm { position: absolute; max-width: none; transform-origin: 50% 100%; }
.hero__palm--small { display: none; }
.hero__palm--large { left: 236px; top: 520px; width: 224px; height: 320px; }

.hero__content { position: relative; padding-top: calc(152px - var(--text-up)); }   /* 152 px: the design */
@media (max-width: 359px) { .hero { --hero-h: clamp(790px, 100svh - 56px, 900px); } }   /* the buttons take two lines */
.hero__title {
  margin-top: 0; font-family: var(--font-display); font-weight: 900; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: min(104px, 28vw); line-height: .8846; letter-spacing: -.03em; color: var(--cream);
}
.hero__title span { display: block; }
.hero__intro { margin-top: 20px; max-width: 300px; font-size: 17px; line-height: 26px; }
.hero__actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   ROLLING BAND
   ========================================================================== */
.band { overflow: hidden; height: 56px; background: var(--amber); color: var(--night); font-weight: 700; font-size: 14px; letter-spacing: 1.12px; }
.band__track { display: flex; width: max-content; height: 100%; }
.band__list { display: flex; align-items: center; flex: none; }
.band__list li { display: flex; align-items: center; white-space: nowrap; }
.band__list li::after { content: "/"; margin: 0 28px; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.music, .about, .shop { background: var(--night); }
.shows, .gallery { background: var(--dusk); }
.music, .shows, .about, .gallery, .shop { padding: 72px 0; }

/* ---------- Music */
.music__grid { margin-top: 40px; }
.release__cover { aspect-ratio: 1; border-radius: 21px; }
/* soft shade behind the small tag, so it reads on any cover photo */
.release__cover::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 28%; z-index: 1;
  background: linear-gradient(rgb(12 38 48 / .55), rgb(12 38 48 / 0));
}
.release__tag, .release__name { position: absolute; z-index: 2; left: 21px; color: var(--cream); }
.release__tag { top: 21px; font-family: var(--font-label); font-weight: 500; font-size: 8.5px; letter-spacing: 1.2px; line-height: 1; }
.release__name {
  bottom: 17px; font-family: var(--font-display); font-weight: 700; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 26.3px; line-height: 1.1; letter-spacing: -.26px;
}
.release__info { margin-top: 40px; }
.release__title {
  margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 30px; line-height: 1.1; letter-spacing: -.3px;
}
.release__note { margin-top: 10px; color: var(--muted); }
.release__links { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 280px; }

.tracks { margin-top: 40px; }
.track {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 16px;
  border-bottom: 1px solid var(--line); border-radius: 0;
}
.track.is-current { background: var(--dusk); border-radius: 18px; border-bottom-width: 0; }
.track__text { flex: 1; min-width: 0; }
.track__name {
  font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 28px; line-height: 34px; letter-spacing: -.14px;
}
.track__mix { margin-top: 2px; color: var(--muted); }
.track__play {
  flex: none; position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--cream); background: none;
}
.track.is-current .track__play { background: var(--coral); border-color: var(--coral); }
.i-play, .i-pause { position: absolute; left: 50%; top: 50%; }
.i-play {   /* the play triangle, drawn like the design (12 x 14 on phones) */
  width: 12px; height: 14px; transform: translate(-42%, -50%);
  background: url("../svg/play-cream.svg") center / contain no-repeat;
}
.track.is-current .i-play { background-image: url("../svg/play-dark.svg"); }
.i-pause { display: none; width: 12px; height: 14px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, var(--cream) 0 4px, transparent 0 8px, var(--cream) 0) ; border-radius: 1px; }
.track.is-current .i-pause { background: linear-gradient(90deg, var(--night) 0 4px, transparent 0 8px, var(--night) 0); }
.track.is-playing .i-play { display: none; }
.track.is-playing .i-pause { display: block; }

/* ---------- Shows */
.dates { margin-top: 40px; }
.date { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.date__day { display: flex; flex-direction: column; font-family: var(--font-label); font-weight: 500; font-size: 13px; letter-spacing: 1.82px; text-transform: uppercase; line-height: 1; color: var(--amber); }
.date__day b {
  font-family: var(--font-display); font-weight: 700; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 30px; line-height: 1.1; letter-spacing: -.3px; color: var(--cream); margin-bottom: 4px; text-transform: none;
}
.date__city {
  font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 28px; line-height: 34px; letter-spacing: -.14px;
}
.date__venue { margin-top: 6px; color: var(--muted); }
.date__meta { margin-top: 6px; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.date__meta .chip { margin-bottom: 2.5px; }
.shows__foot { display: none; }
.link-caps { font-weight: 700; font-size: 14px; letter-spacing: 1.12px; }

/* ---------- About */
.about__photo { aspect-ratio: 342 / 440; border-radius: 171px 171px 20px 20px; }
.about__text { margin-top: 40px; }
.about__lead { margin-top: 24px; color: var(--muted); font-size: 17px; line-height: 26px; }
.about__more { display: none; }
.about__actions { margin-top: 24px; display: grid; gap: 12px; }
.about__actions .btn { width: 100%; --py: 18px; }

/* ---------- Gallery */
.gallery__grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gallery__grid .slot { border-radius: 10.5px; aspect-ratio: 165 / 220; }
.gallery__grid .g1 { grid-column: 1 / -1; aspect-ratio: 342 / 280; border-radius: 12.9px; }
.gallery__grid .slot__hint { font-size: 11px; gap: 8px; }
.gallery__grid .slot__icon { width: 32px; height: 32px; }
.gallery__more { margin-top: 40px; }
.gallery__more .btn { width: 100%; --py: 18px; }

/* ---------- Shop */
.products { margin-top: 40px; }
.product { width: 280px; }
.product__photo { width: 280px; height: 280px; border-radius: 28px; }
.product__info { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.product__info > div { max-width: 187px; }
.product__name {
  font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 28px; line-height: 34px; letter-spacing: -.14px;
}
.product__price { margin-top: 4px; font-weight: 700; color: var(--amber); }

/* ---------- Book */
.book { background: var(--night); padding: 40px var(--gutter) 72px; }
.book__panel {
  max-width: var(--column); margin: 0 auto; padding: 40px 20px 40px;
  border-radius: 32px; background: linear-gradient(180deg, #ffb627 0%, #ff5a3c 55%, #ff3d8b 100%);
}
.book__text { color: var(--night); }
.book__text .title { color: var(--night); }
.book__intro { margin-top: 20px; }
.contacts { margin-top: 20px; display: grid; gap: 16px; }
dt { font-weight: 500; font-size: 13px; letter-spacing: 1.82px; }
dd {
  margin-top: 4px; font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 28px; line-height: 34px; letter-spacing: -.14px; overflow-wrap: anywhere;
}
.contacts div:nth-child(2) dd { font-size: 24px; line-height: 29px; }
.contacts a { display: inline-block; padding-block: 5px; margin-block: -5px; }

.form { margin-top: 32px; padding: 20px; border-radius: 24px; background: var(--night); display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; }
.field span { display: block; font-weight: 500; font-size: 13px; letter-spacing: 1.82px; color: var(--muted); }
.field input, .field textarea {
  display: block; width: 100%; margin-top: 8px; height: 52px; padding: 0 16px;
  background: var(--dusk); border: 1px solid var(--line); border-radius: 12px; color: var(--cream);
}
.field textarea { height: 112px; padding: 13px 16px; resize: vertical; }
::placeholder { color: var(--muted); opacity: 1; }
.form__send { width: 100%; --py: 18px; --px: 28px; border: 0; cursor: pointer; }
.form__note { text-align: center; color: var(--muted); }

/* ---------- Footer */
.footer { border-top: 1px solid var(--line); padding: 49px 0 48px; }
.footer__logo {
  display: inline-block; padding-block: 5px; margin-block: -5px;
  font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 28px; line-height: 1.2; letter-spacing: -.14px;
}
.footer__links { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px 24px; font-weight: 500; font-size: 13px; letter-spacing: 1.82px; }
.footer__giant {
  margin-top: 32px; font-family: var(--font-display); font-weight: 900; font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: min(60px, 15.4vw); line-height: .88; letter-spacing: -.03em; color: var(--cream); opacity: .08; white-space: nowrap;
}
.footer__copy { margin-top: 32px; color: var(--muted); }
.footer__social { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 24px; font-weight: 500; font-size: 13px; letter-spacing: 1.82px; color: var(--muted); }
.footer__links a, .footer__social a { display: inline-block; padding-block: 8px; margin-block: -8px; }


/* EDIT: word widths from the design (the browser adds letter spacing after the last letter too).
   If you rename a link or a band word, delete its line. */
.nav__links li:nth-child(1), .footer__links li:nth-child(1) { width: 47px; }
.nav__links li:nth-child(2), .footer__links li:nth-child(2) { width: 52px; }
.nav__links li:nth-child(3), .footer__links li:nth-child(3) { width: 50px; }
.nav__links li:nth-child(4), .footer__links li:nth-child(4) { width: 66px; }
.nav__links li:nth-child(5), .footer__links li:nth-child(5) { width: 39px; }
.footer__links li:nth-child(6) { width: 40px; }
.footer__social li:nth-child(1) { width: 86px; } .footer__social li:nth-child(2) { width: 61px; }
.footer__social li:nth-child(3) { width: 101px; } .footer__social li:nth-child(4) { width: 69px; }
.footer__social li:nth-child(5) { width: 76px; }
.band__list li:nth-child(1) { --w: 93px; } .band__list li:nth-child(2) { --w: 99px; } .band__list li:nth-child(3) { --w: 66px; }
.band__list li:nth-child(4) { --w: 93px; } .band__list li:nth-child(5) { --w: 118px; } .band__list li:nth-child(6) { --w: 78px; }
.band__list li { position: relative; width: calc(var(--w) + 28px + 6px + 28px); }   /* word, gap, slash, gap */
.band__list li::after { position: absolute; left: calc(var(--w) + 28px); margin: 0; }
@media (max-width: 1279px) { .nav__links li { width: auto !important; } }
.nav__links li, .footer__links li, .footer__social li { white-space: nowrap; }

/* Touch areas of at least 44 px on phones, without changing how things look */
@media (max-width: 1279px) {
  .btn--xs, .chip { position: relative; }
  .btn { position: relative; }
  .btn::after { content: ""; position: absolute; inset: -1px 0; }
  .btn--xs::after { inset: -5px 0; }
}

/* ==========================================================================
   DESKTOP (1280 px and wider)
   ========================================================================== */
@media (min-width: 1280px) {
  .wrap { max-width: 1440px; }
  .d-only { display: inline; }
  .m-only { display: none; }
  .title { font-size: 80px; line-height: 77px; letter-spacing: -1.6px; max-width: 900px; }
  .intro { margin-top: 20px; font-size: 20px; line-height: 1.5; max-width: 640px; }
  .btn { --py: 20px; --px: 32px; }
  .btn--sm, .btn--xs { --py: 14px; --px: 24px; }
  .chip { padding: 10px 16px; }

  /* Menu bar: links visible, no panel */
  .nav__toggle { display: none; }
  .nav__panel { position: static; display: flex; flex: 1; align-items: center; justify-content: space-between; padding: 0; background: none; border: 0; box-shadow: none; margin-left: calc(465px - 156px); }
  .nav__links { display: flex; gap: 40px; font-size: 13px; }
  .nav__links a { height: auto; border: 0; padding-block: 12px; margin-block: -12px; }
  .nav__book { margin: 0; --py: 14px; --px: 24px; }

  /* Hero: the art scales with the page (--k), anchored to the horizon */
  /* The top section and the yellow band fit the screen together: the hero is
     the screen height minus the band (72 px), between 802 and 920 px (the design).
     The content moves up with the horizon, so the texts keep the same sky behind them. */
  .hero {
    --hero-h: clamp(802px, 100svh - 72px, 920px);
    height: var(--hero-h);
    background: var(--sky) top / 100% calc(var(--hero-h) - 230 * var(--k)) no-repeat, var(--night);
  }
  .hero__stage { width: calc(1440 * var(--k)); height: 100%; margin-left: calc(-720 * var(--k)); top: 0; }
  .hero__sea { top: auto; bottom: 0; height: calc(230 * var(--k)); }
  .hero__sun { left: calc(740 * var(--k)); top: auto; bottom: calc(130 * var(--k)); width: calc(540 * var(--k)); height: calc(540 * var(--k)); }
  .hero__glints li { top: auto !important; }
  .hero__glints li:nth-child(1) { left: calc(800 * var(--k)); bottom: calc(198 * var(--k)); width: calc(420 * var(--k)); height: 10px; border-radius: 5px; }
  .hero__glints li:nth-child(2) { left: calc(850 * var(--k)); bottom: calc(170 * var(--k)); width: calc(320 * var(--k)); height: 10px; border-radius: 5px; }
  .hero__glints li:nth-child(3) { left: calc(890 * var(--k)); bottom: calc(140 * var(--k)); width: calc(240 * var(--k)); height: 8px; border-radius: 4px; }
  .hero__glints li:nth-child(4) { left: calc(925 * var(--k)); bottom: calc(106 * var(--k)); width: calc(170 * var(--k)); height: 8px; border-radius: 4px; }
  .hero__glints li:nth-child(5) { display: block; left: calc(955 * var(--k)); bottom: calc(68 * var(--k)); width: calc(110 * var(--k)); height: 6px; border-radius: 3px; }
  .hero__palm--small { display: block; left: calc(700 * var(--k)); top: auto; bottom: calc(10 * var(--k)); width: calc(308 * var(--k)); height: calc(440 * var(--k)); }
  .hero__palm--large { left: calc(960 * var(--k)); top: auto; bottom: calc(-50 * var(--k)); width: calc(560 * var(--k)); height: calc(800 * var(--k)); }
  /* The intro sits on the orange part of the sky at any screen size (contrast): its top
     is at 84.3 % of the sky height, minus the two lines of the title and the space */
  .hero__content { padding-top: calc((var(--hero-h) - 230 * var(--k)) * .843 - 1.7554 * max(130px, calc(188 * var(--k))) - 28px); }
  .hero__title { margin-top: 0; line-height: .8777; font-size: max(130px, calc(188 * var(--k))); letter-spacing: calc(-5.64 * var(--k)); }
  .hero__intro { margin-top: 28px; max-width: 520px; font-size: 20px; line-height: 1.5;
    color: var(--night); }   /* dark on the orange part of the sunset (WCAG AA, approved) */
  .hero__actions { margin-top: 28px; gap: 16px; }
  /* translucent dark fill keeps the outlined button readable on the horizon (WCAG AA, approved) */
  .btn--glass { background: rgb(23 10 38 / .55); }

  .band { height: 72px; }
  .band__list li { width: calc(var(--w) + 40px + 6px + 40px); }
  .band__list li::after { left: calc(var(--w) + 40px); }

  .music, .shows, .about, .gallery, .shop { padding: 120px 0; }

  /* Music */
  .music__grid { margin-top: 64px; display: grid; grid-template-columns: 520px 1fr; column-gap: 80px; align-items: start; }
  .release__cover { border-radius: 32px; }
  .release__tag { left: 32px; top: 32px; font-size: 13px; letter-spacing: 1.82px; }
  .release__name { left: 32px; bottom: 26px; font-size: 40px; letter-spacing: -.4px; }
  .release__info { margin-top: 28px; }
  .release__title { margin-top: 12px; font-size: 40px; letter-spacing: -.4px; }
  .release__note { margin-top: 12px; }
  .release__links { margin-top: 28px; gap: 12px; max-width: none; flex-wrap: nowrap; }
  .tracks { margin-top: 0; }
  .track { gap: 24px; padding: 28px 24px; }
  .track.is-current { border-radius: 20px; }
  .track__mix { margin-top: 4px; }
  .track__play { width: 52px; height: 52px; }
  .i-play, .i-pause { width: 14px; height: 16px; }
  .i-pause { background: linear-gradient(90deg, var(--cream) 0 5px, transparent 0 9px, var(--cream) 0); }
  .track.is-current .i-pause { background: linear-gradient(90deg, var(--night) 0 5px, transparent 0 9px, var(--night) 0); }

  /* Shows */
  .dates { margin-top: 64px; }
  .date { grid-template-columns: 110px minmax(0, 690px) 160px 200px; column-gap: 40px; align-items: center; padding: 32px 0; min-height: 139px; }
  .date__info, .date__meta { display: contents; }
  .date__day b { font-weight: 900; font-size: 52px; line-height: 1; letter-spacing: -.52px; margin-bottom: 6px; }
  .date__city { font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -.4px; }
  .date__meta .chip { grid-column: 3; justify-self: start; margin: 0; }
  .date__btn { grid-column: 4; justify-self: end; }
  .shows__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 64px; color: var(--muted); }
  .shows__foot .link-caps { color: var(--cream); padding-block: 15px; margin-block: -15px; }

  /* About */
  .about__grid { display: grid; grid-template-columns: 540px minmax(0, 640px); column-gap: 100px; align-items: center; }
  .about__photo { aspect-ratio: auto; height: 680px; border-radius: 270px 270px 32px 32px; }
  .about__text { margin: 0; }
  .about__text .title { max-width: 620px; }
  .about__lead { margin-top: 32px; max-width: 600px; font-size: 20px; line-height: 1.5; }
  .about__more { display: block; margin-top: 32px; max-width: 600px; color: var(--muted); }
  .about__actions { margin-top: 32px; display: flex; gap: 16px; }
  .about__actions .btn { width: auto; --py: 20px; }

  /* Gallery */
  .gallery__grid { margin-top: 64px; grid-template-columns: 400fr 20fr 320fr 20fr 80fr 20fr 440fr; gap: 20px 0; }
  .gallery__grid .slot { aspect-ratio: auto; height: 360px; border-radius: 28px; }
  .gallery__grid .g1 { grid-column: 1 / 4; height: 480px; border-radius: 28px; }
  .gallery__grid .g2 { grid-column: 5 / 8; height: 480px; }
  .gallery__grid .g3 { grid-column: 1 / 2; }
  .gallery__grid .g4 { grid-column: 3 / 6; }
  .gallery__grid .g5 { grid-column: 7 / 8; }
  .gallery__grid .slot__hint { font-size: 15px; gap: 12px; }
  .gallery__grid .slot__icon { width: 56px; height: 56px; }
  .gallery__more { margin-top: 64px; text-align: center; }
  .gallery__more .btn { width: auto; --py: 20px; }

  /* Shop */
  .products { margin: 64px auto 0; max-width: 1440px; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; overflow: visible; }
  .product { width: auto; }
  .product__photo { width: 100%; height: 440px; }
  .product__info { margin-top: 20px; }
  .product__info > div { max-width: none; }
  .product__price { margin-top: 6px; }

  /* Book */
  .book { padding: 40px var(--gutter) 120px; }
  .book__panel {
    max-width: 1280px; padding: 80px; display: grid; grid-template-columns: 520px 520px; justify-content: space-between; align-items: center;
    border-radius: 48px; background: var(--sunset);
  }
  .book__text .title { font-size: 80px; }
  .book__intro { margin-top: 32px; font-size: 20px; line-height: 1.5; max-width: 480px; }
  .contacts { margin-top: 32px; gap: 20px; }
  .contacts div:nth-child(2) dd { font-size: 28px; line-height: 34px; }
  .form { margin: 0; padding: 40px; border-radius: 32px; gap: 20px; }
  .form__row { grid-template-columns: 1fr 1fr; }
  .field input, .field textarea { height: 56px; padding: 0 20px; border-radius: 14px; }
  .field textarea { height: 120px; padding: 15px 20px; }
  .form__send { --py: 20px; --px: 32px; }
  .form__note { text-align: left; }

  /* Footer */
  .footer { padding: 65px 0 64px; }
  .footer__top { display: flex; justify-content: space-between; align-items: center; }
  .footer__links { margin: 0; gap: 40px; }
  .footer__giant { margin-top: 48px; text-align: center; font-size: calc(236 * var(--k)); letter-spacing: calc(-7.08 * var(--k)); }
  .footer__base { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; }
  .footer__copy { margin: 0; }
  .footer__social { margin: 0; gap: 32px; }
}

/* Wider than the design: content stays centered, backgrounds fill the screen */
@media (min-width: 1441px) {
  .hero__sea { left: calc(720px - 50vw); }
}

/* ==========================================================================
   ANIMATIONS
   Only when <html> has the class "motion" (set by the script in the <head>).
   ========================================================================== */
@keyframes sun-set { from { transform: translateY(var(--motion-sun-dist)); } }
@keyframes glint-in { from { opacity: 0; transform: scaleX(.6); } }
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(var(--motion-sway-angle)); } }
@keyframes band-roll { to { transform: translateX(-50%); } }
.motion .hero__sun { animation: sun-set var(--motion-sun-dur) var(--motion-ease) backwards; }
.motion .hero__glints li { animation: glint-in 1.2s var(--motion-ease) backwards; }
.motion .hero__glints li:nth-child(2) { animation-delay: .15s; }
.motion .hero__glints li:nth-child(3) { animation-delay: .3s; }
.motion .hero__glints li:nth-child(4) { animation-delay: .45s; }
.motion .hero__glints li:nth-child(5) { animation-delay: .6s; }
.motion .hero__palm { animation: sway var(--motion-sway-dur) ease-in-out 2.4s infinite; }
.motion .hero__palm--small { animation-duration: calc(var(--motion-sway-dur) * .8); animation-delay: 2.8s; }
.motion .band__track { animation: band-roll var(--motion-band-dur) linear infinite; }
.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; }
.no-motion *, .no-motion *::before, .no-motion *::after { transition: none !important; animation: none !important; }

/* ---------- DEMO ONLY (not in the product) */
.footer__demo { padding-top: 24px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.footer__demo p + p { margin-top: 4px; }
.footer__demo a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.demo-note { margin-top: 14px; font-size: 15px; color: var(--cream); }