/* Delmar Quartet · Jazz v2
   Mobile first (390 design). The desktop layout starts at 1180 px and is drawn
   on a 1440 px frame that scales down with the window (see --u below).
   ------------------------------------------------------------------
   1. Fonts and EDIT variables (colors, fonts, motion)
   2. Base, buttons, menu bar, photo spots, shared paper and record art
   3. Hero
   4. Sections: shows, records, personnel, live, press, reserve, footer
   5. Desktop (1180 px and up)
   6. Animations (only when <html> has the "motion" class)  */

/* ---------- 1. Fonts (local files, Google Fonts, OFL licenses in fonts/licenses) */
@font-face {
  font-family: "League Gothic";
  src: url("../../fonts/league-gothic-latin-var.woff2") format("woff2");
  font-weight: 400; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../../fonts/jost-latin-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* Scale of the desktop drawing: 1 unit = 1 px of the 1440 frame, capped at 1440.
   Registered as a length so it is worked out once, from the page width, and not again
   inside the records and stickers that measure their own size (container units). */
@property --u0 { syntax: "<length>"; inherits: true; initial-value: 1px; }

:root {
  /* EDIT: colors. Every color of the page lives here. */
  --navy: #0d1b30;       /* page background */
  --navy-deep: #08111f;  /* footer */
  --paper: #eadfc6;      /* record sleeves and paper panels */
  --paper-in: #dccfb0;   /* inner sleeve of the reservation panel */
  --slip: #f7f1e1;       /* snapshot frame, reservation slip, barcode */
  --tab: #d3c6a4;        /* record divider tabs */
  --cream: #f1e9d6;      /* text on navy */
  --orange: #f2892b;     /* buttons, stickers, record labels */
  --ink: #10233f;        /* text on paper, dark buttons */
  --slate: #34445e;      /* small text on paper */
  --muted: #b9c3d4;      /* small text on navy */
  --sand: #cfc8b6;       /* intro text on navy */
  --faint: #7b879b;      /* copyright on the footer */
  --hint: #52607a;       /* field hints and "Sold out" on paper (darker than the sketch for WCAG AA) */
  --blue: #3d6fa8;
  --blue-star: #37659c;  /* starburst (darker than the sketch so cream text passes WCAG AA) */
  --deck: #241a12;       /* turntable */
  --deck-edge: #3a2b1c;
  --vinyl: #07090e;      /* record */
  --groove: #1f2c42;

  /* EDIT: fonts. Titles and big names / everything else. */
  --font-display: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --font-text: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* EDIT: empty photo spots. The gradient and the hint color only show until a photo is added. */
  --slot-hint: #fffdf5;

  /* EDIT: animations. Only transform and opacity move.
     To turn them all off add class="no-motion" to the <html> tag. */
  --motion-dur: 800ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  --motion-dist: 26px;        /* how far rows and cards travel when they come in */
  --motion-stagger: 110ms;    /* delay between neighbours */
  --motion-spin: 18s;         /* one turn of the records */
  --motion-arm: 5deg;         /* how far the tonearm swings */

  /* EDIT (phones): the space from a section title to what comes next. */
  --nav-h: 84px;
  --nav-h-compact: 60px;
  color-scheme: dark;
}

/* ---------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; background: var(--navy); }
body {
  margin: 0; background: var(--navy); color: var(--cream);
  font-family: var(--font-text); font-size: 17px; line-height: 1.5; font-optical-sizing: none;
  container-type: inline-size;
}
/* --u0 is the scale for the window width; each desktop section may use a smaller --u
   so the whole section fits the window height (see "Desktop" below). Set on the direct
   children of the body, which measure the body width. */
.topbar, main, .footer, .skip-link { --u0: calc(min(100cqi, 1440px) / 1440); --u: var(--u0); }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg { display: block; }
a { color: inherit; }
.only-desktop { display: none; }

:focus-visible { outline: 3px solid var(--ring, var(--cream)); outline-offset: 3px; }
.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px 18px;
  background: var(--cream); color: var(--ink); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; outline-color: var(--orange); }

/* Buttons. Size per kind below (--bw, --bh, --bfs). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-width: var(--bw, 120px); height: var(--bh, 44px); padding: 0 16px;
  border: 2px solid transparent; border-radius: 0;
  font: 600 var(--bfs, 15px)/1 var(--font-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--motion-ease), background-color .2s;
}
a.btn:hover, button.btn:hover { transform: translateY(-2px); }
.btn--orange { background: var(--orange); color: var(--ink); }
.btn--line { border-color: var(--cream); color: var(--cream); background: transparent; }
.btn--ink { background: var(--ink); color: var(--paper); --ring: var(--ink); }
.btn--soldout { border-color: var(--hint); color: var(--hint); background: transparent; cursor: default; }
/* Touch target of at least 44 px even when the drawn button is smaller */
.track__btn { position: relative; }
.track__btn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); translate: 0 -50%; }
.btn--big { --bh: 54px; --bfs: 17px; --bw: 100%; }

/* Menu bar: transparent on top, soft navy after a little scrolling */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  transition: height .3s var(--motion-ease), background-color .3s, box-shadow .3s;
}
.static-nav .topbar { position: absolute; }
.topbar.is-scrolled { height: var(--nav-h-compact); background: rgb(13 27 48 / .95); box-shadow: 0 1px 0 rgb(241 233 214 / .14); }
.static-nav .topbar.is-scrolled { height: var(--nav-h); background: none; box-shadow: none; }
.nav { position: relative; width: min(100%, 430px); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 20px; }
.nav__logo { font: 600 22px/1.2 var(--font-text); text-decoration: none; padding: 9px 0; margin-right: auto; color: var(--cream); }
.nav__toggle { width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; color: var(--cream); display: grid; place-items: center; padding: 0; }
.nav__bars, .nav__bars::before, .nav__bars::after { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .25s var(--motion-ease), background-color .25s; }
.nav__bars { position: relative; }
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -8px; } .nav__bars::after { top: 8px; }
.nav.is-open .nav__bars { background: transparent; }
.nav.is-open .nav__bars::before { transform: translateY(8px) rotate(45deg); }
.nav.is-open .nav__bars::after { transform: translateY(-8px) rotate(-45deg); }
.nav__links { display: none; }
.nav.is-open .nav__links {
  display: flex; flex-direction: column; gap: 2px; position: absolute; top: 100%; left: 0; right: 0;
  padding: 12px 20px 24px; background: var(--navy); box-shadow: 0 16px 28px rgb(0 0 0 / .45); border-top: 1px solid rgb(241 233 214 / .14);
}
.nav__links a { display: block; padding: 10px 0; font: 400 40px/1.1 var(--font-display); text-decoration: none; color: var(--cream); letter-spacing: .01em; }

/* Empty photo spots. To add a photo, put an <img> inside the .photo-slot
   (the line is already there, commented). It is cropped to the shape of the spot,
   and the hint disappears. */
.photo-slot { position: relative; display: block; overflow: hidden; background: linear-gradient(var(--slot-angle, 170deg), var(--slot-a, #3d6fa8) 0%, var(--slot-b, #0b1626) 83.33%); }
.photo-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot > img ~ .photo-slot__hint { display: none; }
.photo-slot__hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 500 15px/1.2 var(--font-text); color: var(--slot-hint); text-align: center; width: 90%;
}
.photo-slot__hint svg { width: var(--hint-icon, 56px); height: var(--hint-icon, 56px); }
.photo-slot--hero { --slot-angle: 165.96deg; --hint-icon: 28px; }
.photo-slot--room { --slot-angle: 172.41deg; --slot-a: #10233f; --slot-b: #3d6fa8; }
.photo-slot--cover1 { --slot-angle: 168.69deg; --slot-a: #e8a45b; --slot-b: #7a3a0a; }
.photo-slot--cover2 { --slot-angle: 168.69deg; --slot-a: #3d6fa8; --slot-b: #10233f; }
.photo-slot--cover3 { --slot-angle: 168.69deg; --slot-a: #d9c9a3; --slot-b: #48381a; } /* end color darker than the sketch (#6b5a35) so the hint passes WCAG AA */
.photo-slot--band { --slot-angle: 172.41deg; }
.photo-slot--video { --slot-angle: 173.58deg; --hint-icon: 40px; }
.photo-slot--video .photo-slot__hint { width: 44%; } /* two lines, clear of the play button */
.photo-slot--hero .photo-slot__text, .photo-slot--video .photo-slot__text { display: none; } /* too small for text on phones */

/* Shared art -------------------------------------------------------- */
.paper-grain { position: absolute; inset: 0; background: url("../svg/paper-grain.svg") 0 0 / 560px auto repeat; pointer-events: none; }
.sleeve .paper-grain, .release__sleeve .paper-grain, .quote--card .paper-grain, .slip .paper-grain { background-size: 100% 100%; }

/* A paper panel (a record sleeve laid flat) */
.paper { position: relative; background: var(--paper); overflow: hidden; color: var(--ink); --ring: var(--ink); box-shadow: 0 20px 40px rgb(0 0 0 / .3); }
.paper--sleeve { background: var(--paper-in); }
.paper__border, .quote__border, .sleeve__border { position: absolute; border: 2px solid var(--ink); pointer-events: none; }
.paper__border { inset: 12px; }

.title { font-family: var(--font-display); font-weight: 400; font-size: var(--tfs, 88px); line-height: .9; font-stretch: 100%; color: var(--ink); }

/* A record. Everything inside scales with the record (container units). */
.record { position: relative; container-type: inline-size; aspect-ratio: 1; }
.record__disc { position: absolute; inset: 0; width: 100%; height: 100%; }
.record__name, .record__sub { position: absolute; left: 0; right: 0; text-align: center; color: var(--ink); white-space: nowrap; }
.record__name { top: 44.9%; font: 600 2.857cqi/1.2 var(--font-text); }
.record__sub { top: 52%; font: 500 2.143cqi/1.2 var(--font-text); }
.record > svg { display: block; }

/* ---------- 3. Hero */
.hero {
  --hu: clamp(.74px, .74px + (100svh - 740px) * .001444, 1px); /* about 1 px, a bit smaller on short screens */
  position: relative; overflow: hidden; min-height: 100svh;
  display: flex; flex-direction: column; background: var(--navy);
}
.hero__text {
  width: min(100%, 430px); margin: 0 auto; padding: clamp(76px, calc(76px + (100svh - 740px) * .1333), 100px) 20px 16px;
}
.hero__title { font: 400 58px/.96 var(--font-display); font-stretch: 100%; color: var(--cream); }
.hero__lead { margin-top: clamp(14px, calc(14px + (100svh - 740px) * .1), 32px); font-size: 18px; line-height: 1.5; color: var(--sand); }
.hero__actions { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(20px, calc(20px + (100svh - 740px) * .161), 49px); }
.hero__stage { position: relative; width: min(100%, 430px); margin: auto auto 0; height: calc(330 * var(--hu)); flex: none; }
.hero__vinyl { position: absolute; left: calc(210 * var(--hu)); bottom: calc(30 * var(--hu)); /* same center line as the sleeve, like on desktop */ width: calc(280 * var(--hu)); }

.sleeve {
  position: absolute; left: calc(30 * var(--hu)); bottom: calc(20 * var(--hu)); width: calc(300 * var(--hu)); aspect-ratio: 1;
  background: var(--paper); container-type: inline-size; box-shadow: 0 24px 48px rgb(0 0 0 / .4);
}
.sleeve__ring { position: absolute; left: 5.357%; top: 5.357%; width: 89.286%; height: 89.286%; background: url("../svg/ring-wear.svg") center / 100% 100% no-repeat; }
.sleeve__border { inset: 2.857%; }
.sleeve__halftone { position: absolute; left: 44.64%; top: 33.93%; width: 50%; height: 50%; background: url("../svg/halftone.svg") center / 100% 100% no-repeat; }
.snapshot {
  position: absolute; left: 47.857%; top: 36.07%; width: 46.55%; height: 57.2%; background: var(--slip);
  rotate: 2deg; padding: 3.45% 3.45% 0; box-shadow: 0 6px 14px rgb(0 0 0 / .25);
}
.snapshot .photo-slot { width: 100%; height: 93%; }
.sleeve__title { position: absolute; left: 6.43%; top: 6.07%; margin: 0; font: 400 26.786cqi/.88 var(--font-display); font-stretch: 100%; color: var(--ink); }
.sleeve__title span { display: block; white-space: nowrap; }
.sleeve__title span + span { color: var(--orange); }
.sleeve__stamp { position: absolute; left: 6.43%; top: 80.7%; font: 400 6.43cqi/1.2 var(--font-display); font-stretch: 100%; color: var(--ink); }
.sleeve__credit { position: absolute; left: 6.43%; top: 88.6%; font: 500 2.857cqi/1.4 var(--font-text); color: var(--ink); }
.sticker {
  position: absolute; left: 78.57%; top: -6.07%; width: 22.14%; aspect-ratio: 1; border-radius: 50%;
  background: var(--orange); border: 2px solid var(--ink); display: grid; place-items: center; text-align: center;
  font: 700 3.214cqi/1.15 var(--font-text); color: var(--ink); box-shadow: 0 6px 6px rgb(0 0 0 / .25);
}

/* ---------- 4. Sections */
.section { position: relative; padding-top: 40px; }
.shows, .personnel, .reserve { padding-bottom: 40px; }
.shows { padding-bottom: 42px; }
.section__inner { position: relative; width: min(100%, 430px); margin: 0 auto; }

/* Shows */
.shows .paper { margin: 0 20px; padding: 36px 28px 30px; }
.shows__title { --tfs: 88px; position: relative; }
.shows__intro { position: relative; margin-top: 25px; font-size: 17px; line-height: 1.5; color: var(--slate); }
.shows__shot { position: relative; margin-top: 44px; width: 100%; aspect-ratio: 3/2; }
.shows__photo { width: 100%; height: 100%; }
.corner { position: absolute; width: 29px; height: 29px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .3)); }
.corner--tr { scale: -1 1; } .corner--bl { scale: 1 -1; } .corner--br { scale: -1 -1; }
/* the corners sit 3 px outside the corners of the photo, wherever the photo ends up */
.corner--tl { left: -3px; top: -3px; } .corner--tr { right: -3px; top: -3px; }
.corner--bl { left: -3px; bottom: -3px; } .corner--br { right: -3px; bottom: -3px; }
.tracks { position: relative; margin-top: 42px; }
.track { position: relative; height: 168px; padding: 10px 0 0 104px; }
.track::after { content: ""; position: absolute; left: 0; right: 0; top: 160px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 8px); }
.track__day { position: absolute; left: 0; top: 8px; font: 500 15px/22px var(--font-text); color: var(--slate); }
.track__date { position: absolute; left: 0; top: 26px; font: 400 46px/41px var(--font-display); font-stretch: 100%; color: var(--ink); white-space: nowrap; }
.track__when { display: contents; }
.track__name { font: 600 20px/1.2 var(--font-text); color: var(--ink); min-height: 62px; margin-bottom: 4px; } /* room for a third line on narrow phones */
.track__detail { font-size: 15px; line-height: 22px; color: var(--slate); }
.track__btn { --bw: 120px; --bh: 40px; margin-top: 6px; }
.barcode { position: relative; display: block; width: 197.2px; height: auto; margin-top: 0; }

/* Records */
.records .section__inner { padding-top: 0; }
.records__title { --tfs: 84px; color: var(--orange); margin: 0 20px; }
.records__intro { margin: 22px 20px 0; font-size: 17px; line-height: 1.5; color: var(--muted); }
.carousel { display: flex; gap: 72px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; padding: 62px 20px 10px; margin-top: 34px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { flex: none; scroll-snap-align: start; }
.release { position: relative; width: 270px; height: 480px; }
.release__disc { inset: auto; left: 130px; top: 34px; width: 220px; height: 220px; }
.release__tab {
  position: absolute; left: 20px; top: -34px; width: 130px; height: 34px; background: var(--tab); color: var(--ink);
  font: 600 14px/34px var(--font-text); padding-left: 0; text-align: center; white-space: nowrap;
}
.release__sleeve { position: relative; width: 270px; height: 320px; background: var(--paper); box-shadow: 0 14px 28px rgb(0 0 0 / .35); }
.release__cover { position: absolute; left: 18px; top: 18px; width: 234px; height: 234px; }
.release__name { position: absolute; left: 18px; top: 264px; width: 234px; font: 400 36px/1 var(--font-display); font-stretch: 100%; color: var(--ink); }
.release__detail { position: absolute; left: 0; top: 344px; width: 250px; font-size: 16px; line-height: 1.4; color: var(--muted); }
.release__link { position: absolute; left: 0; top: 394px; font-weight: 600; font-size: 17px; line-height: 44px; color: var(--cream); text-decoration: none; }
.release__link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Personnel */
.personnel .paper { margin: 0 20px; padding: 34px 28px 46px; min-height: 1020px; }
.personnel__title { --tfs: 88px; position: relative; }
.polaroid { position: absolute; left: 27px; top: 165.9px; width: 302px; height: 232px; margin: 0; }
.polaroid__frame { position: absolute; inset: 0; background: var(--slip); rotate: 1.5deg; padding: 16px 16px 0; box-shadow: 0 6px 7px rgb(0 0 0 / .25); }
.polaroid__frame .photo-slot { height: 180px; }
.paperclip { position: absolute; width: 23.5px; height: 74.4px; left: 103px; top: -15.9px; fill: none; }
.paperclip--main { stroke: #a9a28f; }
.paperclip--shadow { stroke: #000; stroke-opacity: .25; left: 106px; top: -10.9px; }
.polaroid__caption { position: absolute; left: 1px; top: 242.1px; width: 294px; font-size: 15px; line-height: 1.4; color: var(--slate); }
.players { position: absolute; left: 28px; right: 28px; top: 480px; }
.player { position: relative; height: 130px; }
.player::after { content: ""; position: absolute; left: 0; right: 0; top: 104px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 8px); }
.player__name { font: 400 54px/1 var(--font-display); font-stretch: 100%; color: var(--ink); text-transform: uppercase; }
.player__role { margin-top: 8px; font: 500 17px/25px var(--font-text); color: var(--slate); }

/* Live */
.live .section__inner { padding: 0 20px; }
.turntable { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 820 / 700; background: var(--deck); border: 3px solid var(--deck-edge); border-radius: 18px; box-shadow: 0 20px 40px rgb(0 0 0 / .45); }
.turntable > * { position: absolute; }
.turntable__platter { left: 6.098%; top: 8.571%; width: 70.732%; height: auto; aspect-ratio: 1; overflow: visible; fill: #15161a; stroke: #8d96a1; stroke-width: 3; }
.turntable__vinyl { left: 9.756%; top: 12.857%; width: 63.415%; }
.turntable__vinyl .record__name { font-size: 2.7cqi; } .turntable__vinyl .record__sub { font-size: 2.25cqi; }
.turntable__base { left: 83.902%; top: 10%; width: 10.244%; overflow: visible; fill: #b9b2a0; stroke: #5c564a; stroke-width: 3; }
.turntable__arm { left: 67.9%; top: 15.4%; width: 21.8%; height: auto; overflow: visible; fill: none; stroke: #d8d2c2; stroke-width: 9; stroke-linecap: round; transform-origin: 97.5% 1.2%; }
.turntable__head { left: 67.8%; top: 70.3%; width: 7.5%; aspect-ratio: 61.77 / 52.44; background: #d8d2c2; border-radius: 10px; border: 2px solid #5c564a; box-sizing: border-box; transform: rotate(-12deg); }
.turntable__start { left: 87.8%; top: 84.3%; width: 7.3%; aspect-ratio: 1; background: var(--orange); border-radius: 50%; }
.live__title { --tfs: 72px; color: var(--cream); line-height: .92; margin-top: 33px; }
.live__caption { margin-top: 11px; font-size: 17px; line-height: 1.5; color: var(--sand); }
.video { position: relative; display: block; margin-top: 30px; aspect-ratio: 350 / 197.3; }
.video .photo-slot { width: 100%; height: 100%; }
.video__play { position: absolute; right: 5.7%; bottom: 5.4%; width: 20.6%; aspect-ratio: 1; background: var(--orange); border-radius: 50%; display: grid; place-items: center; transition: transform .25s var(--motion-ease); }
.video:hover .video__play { transform: scale(1.08); }
.video__play svg { width: 28.6%; height: auto; fill: var(--ink); rotate: 90deg; margin-left: 4%; }
.live { padding-bottom: 78px; }

/* Press */
.press__title { --tfs: 72px; color: var(--cream); line-height: .92; margin: 0 20px; }
.press .carousel { gap: 24px; padding: 0 20px; margin-top: 34px; align-items: center; height: 380px; }
.quote { position: relative; margin: 0; flex: none; container-type: inline-size; }
.quote blockquote, .quote figcaption { position: absolute; text-align: center; }
.quote blockquote p { font-family: var(--font-display); font-stretch: 100%; font-weight: 400; line-height: 1; }
.quote figcaption { font: 600 17px/25px var(--font-text); }
.quote--sticker { width: 300px; height: 300px; color: var(--ink); }
.quote__shape { position: absolute; overflow: visible; pointer-events: none; }
.quote--sticker .quote__shape { left: -7.89%; top: -3.68%; width: 115.8%; height: 115.8%; fill: var(--orange); stroke: var(--ink); stroke-width: 4; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .25)); }
.quote--sticker blockquote { left: 13.33%; top: 28.67%; width: 73.33%; } .quote--sticker blockquote p { font-size: 40px; }
.quote--sticker figcaption { left: 0; right: 0; top: 74%; }
.quote--card { width: 300px; height: 270px; background: var(--paper); color: var(--ink); box-shadow: 0 14px 28px rgb(0 0 0 / .35); }
.quote__border { inset: 12px; }
.quote--card blockquote { left: 28px; top: 40px; width: 244px; text-align: left; } .quote--card blockquote p { font-size: 44px; }
.quote--card figcaption { left: 28px; top: 206px; text-align: left; }
.quote--star { width: 340px; height: 340px; color: var(--cream); }
.quote--star .quote__shape { left: -7.14%; top: -3.33%; width: 114.3%; height: 114.3%; fill: var(--blue-star); stroke: var(--cream); stroke-width: 4; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .3)); }
.quote--star blockquote { left: 17.65%; top: 29.4%; width: 64.7%; } .quote--star blockquote p { font-size: 40px; }
.quote--star figcaption { left: 0; right: 0; top: 68.2%; }
.press { padding-bottom: 40px; }

/* Reserve */
.reserve .paper { margin: 0 20px; height: 1130px; padding: 34px 28px 0; }
.reserve__title { --tfs: 80px; position: relative; }
.reserve__intro { position: relative; margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--slate); }
.diecut { position: absolute; left: 160px; top: 990px; width: 200px; height: 200px; border-radius: 50%; background: var(--navy); }
.slip { position: absolute; left: 20px; top: 356px; width: 310px; height: 620px; background: var(--slip); box-shadow: 0 14px 28px rgb(0 0 0 / .3); padding: 22px 20px 0 56px; --ring: var(--ink); }
.slip__perforation { position: absolute; left: 36px; top: 0; width: 620px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 9px); opacity: .8; transform-origin: 0 0; rotate: 90deg; translate: 0 0; }
.slip__title { position: relative; font: 400 44px/1.2 var(--font-display); font-stretch: 100%; color: var(--ink); }
.slip__row { position: relative; margin-top: 20px; }
.slip__title + .slip__row { margin-top: 17px; }
.slip__row label { display: block; font: 500 15px/22px var(--font-text); color: var(--slate); }
.slip__row input { display: block; width: 100%; height: 38px; margin-top: 2px; padding: 0 0 7px; border: 0; border-bottom: 2px solid rgb(16 35 63 / .8); border-radius: 0; background: transparent; font: 400 17px/25px var(--font-text); color: var(--ink); outline-offset: 4px; }
.slip__row input::placeholder { color: var(--hint); opacity: 1; }
.slip__send { --bw: 234px; --bh: 52px; --bfs: 17px; margin-top: 40px; }

/* Footer */
.footer { background: var(--navy-deep); }
.footer__inner { width: min(100%, 430px); margin: 0 auto; padding: 40px 20px 60px; }
.footer__logo { font: 600 26px/38px var(--font-text); color: var(--cream); }
.footer__social { margin-top: 8.5px; display: grid; grid-template-columns: 120px 120px; }
.footer__social a { display: block; font-size: 17px; line-height: 44px; color: var(--muted); text-decoration: none; }
.footer__social a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.footer__copy { margin-top: 25.5px; font-size: 14px; line-height: 20px; color: var(--faint); }

@media (max-width: 359px) {
  .nav { gap: 4px; padding: 0 14px; }
  .nav__logo { font-size: 18px; }
  .hero__title { font-size: 50px; }
}

/* ---------- 5. Desktop (1180 px and up). Drawn on the 1440 frame, scaled by --u. */
@media (min-width: 1180px) {
  :root { --nav-h-compact: 72px; }
  .topbar { --nav-h: max(72px, calc(120 * var(--u0))); }
  .nav { width: calc(1440 * var(--u0)); padding: 0; justify-content: flex-start; }
  .nav__logo { margin: 0 0 0 calc(72 * var(--u0)); font-size: max(20px, calc(26 * var(--u0))); white-space: nowrap; }
  .nav__toggle { display: none; }
  .nav__links { display: flex; position: absolute; right: calc(72 * var(--u0)); gap: calc(44 * var(--u0)); }
  .nav__links a { padding: 10px 0; font: 500 max(15px, calc(18 * var(--u0)))/1.2 var(--font-text); letter-spacing: 0; }
  .only-desktop { display: inline; }

  .section, .shows, .personnel, .reserve { padding: 0; height: calc(var(--H) * var(--u)); }
  .section__inner { width: calc(1440 * var(--u)); height: 100%; }
  .abs { position: absolute; }
  /* each section scales down a little more, if needed, so it fits the window height */
  .shows { --H: 940; --u: max(min(var(--u0), 100svh / 940), var(--u0) * .78); }
  .records { --H: 1040; --u: max(min(var(--u0), 100svh / 1040), var(--u0) * .78); }
  .personnel { --H: 900; --u: max(min(var(--u0), 100svh / 900), var(--u0) * .78); }
  .live { --H: 860; --u: max(min(var(--u0), 100svh / 860), var(--u0) * .78); padding-bottom: 0; }
  .press { --H: 800; --u: max(min(var(--u0), 100svh / 800), var(--u0) * .78); padding-bottom: 0; }
  .reserve { --H: 900; --u: max(min(var(--u0), 100svh / 900), var(--u0) * .78); }

  .btn { --bw: calc(120 * var(--u)); --bh: calc(42 * var(--u)); --bfs: calc(16 * var(--u)); }
  .btn--big { --bw: calc(220 * var(--u)); --bh: calc(60 * var(--u)); --bfs: calc(18 * var(--u)); }
  .photo-slot__hint { font-size: calc(15 * var(--u)); gap: calc(12 * var(--u)); }
  .photo-slot__hint svg { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .photo-slot--hero .photo-slot__text, .photo-slot--video .photo-slot__text { display: block; }
  .title { font-size: calc(var(--tfs) * var(--u)); }

  /* Hero: 100% of the window height; the 1440 x 840 drawing is centered in it */
  .hero { --u: max(min(var(--u0), 100svh / 840), var(--u0) * .78); display: block; height: 100svh; min-height: calc(640 * var(--u0)); }
  .hero__text, .hero__stage { position: absolute; width: auto; margin: 0; padding: 0; left: calc(50% - 720 * var(--u)); top: calc(50% - 420 * var(--u)); height: 0; }
  .hero__title { position: absolute; left: calc(72 * var(--u)); top: calc(230 * var(--u)); width: calc(440 * var(--u)); font-size: calc(80 * var(--u)); }
  .hero__lead { position: absolute; left: calc(72 * var(--u)); top: calc(500 * var(--u)); width: calc(420 * var(--u)); margin: 0; font-size: calc(21 * var(--u)); }
  .hero__actions { position: absolute; left: calc(72 * var(--u)); top: calc(650 * var(--u)); flex-direction: row; gap: calc(16 * var(--u)); margin: 0; }
  .hero__actions .btn--big:last-child { --bw: calc(200 * var(--u)); }
  .hero__vinyl { left: calc(900 * var(--u)); top: calc(170 * var(--u)); bottom: auto; width: calc(560 * var(--u)); }
  .sleeve { left: calc(560 * var(--u)); top: calc(170 * var(--u)); bottom: auto; width: calc(560 * var(--u)); }
  .snapshot .photo-slot__hint { font-size: calc(15 * var(--u)); }

  /* Shows */
  .paper { position: absolute; }
  .shows .paper { margin: 0; padding: 0; left: calc(72 * var(--u)); top: calc(60 * var(--u)); width: calc(1296 * var(--u)); height: calc(820 * var(--u)); }
  .paper__border { inset: calc(20 * var(--u)); }
  .paper-grain { background-size: calc(560 * var(--u)) auto; }
  .shows__title { --tfs: 140; position: absolute; left: calc(64 * var(--u)); top: calc(56 * var(--u)); }
  .shows__intro { position: absolute; left: calc(64 * var(--u)); top: calc(206 * var(--u)); width: calc(440 * var(--u)); margin: 0; font-size: calc(20 * var(--u)); }
  .shows__shot { position: absolute; left: calc(64 * var(--u)); top: calc(420 * var(--u)); width: calc(440 * var(--u)); height: calc(293 * var(--u)); margin: 0; aspect-ratio: auto; }
  .corner { width: calc(39 * var(--u)); height: calc(39 * var(--u)); }
  .corner--tl { left: calc(-3 * var(--u)); top: calc(-3 * var(--u)); } .corner--tr { right: calc(-3 * var(--u)); top: calc(-3 * var(--u)); }
  .corner--bl { left: calc(-3 * var(--u)); bottom: calc(-3 * var(--u)); } .corner--br { right: calc(-3 * var(--u)); bottom: calc(-3 * var(--u)); }
  .tracks { position: absolute; left: calc(600 * var(--u)); top: calc(64 * var(--u)); width: calc(632 * var(--u)); margin: 0; }
  .track { height: calc(124 * var(--u)); padding: calc(18 * var(--u)) 0 0 calc(170 * var(--u)); }
  .track::after { top: calc(116 * var(--u)); height: calc(1.5 * var(--u)); background: repeating-linear-gradient(90deg, var(--ink) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(8 * var(--u))); }
  .track__day { top: calc(10 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(25 * var(--u)); }
  .track__date { top: calc(28 * var(--u)); font-size: calc(60 * var(--u)); line-height: calc(54 * var(--u)); }
  .track__name { font-size: calc(24 * var(--u)); min-height: calc(60 * var(--u)); margin-bottom: calc(4 * var(--u)); width: calc(300 * var(--u)); }
  .track__detail { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
  .track__btn { position: absolute; left: calc(512 * var(--u)); top: calc(28 * var(--u)); margin: 0; }
  .barcode { position: absolute; left: calc(1000 * var(--u)); top: calc(690 * var(--u)); width: calc(232 * var(--u)); }

  /* Records */
  .records__title { --tfs: 150; position: absolute; left: calc(72 * var(--u)); top: calc(80 * var(--u)); margin: 0; }
  .records__intro { position: absolute; left: calc(900 * var(--u)); top: calc(130 * var(--u)); width: calc(468 * var(--u)); margin: 0; font-size: calc(20 * var(--u)); }
  .carousel { display: block; overflow: visible; padding: 0; margin: 0; height: 0; }
  .release { position: absolute; width: calc(360 * var(--u)); height: calc(530 * var(--u)); top: calc(var(--ry) * var(--u)); left: calc(var(--rx) * var(--u)); }
  .release--1 { --rx: 72; --ry: 300; } .release--2 { --rx: 520; --ry: 370; } .release--3 { --rx: 968; --ry: 330; }
  .release__disc { left: calc(170 * var(--u)); top: calc(40 * var(--u)); width: calc(330 * var(--u)); height: calc(330 * var(--u)); }
  .release__tab { left: calc(28 * var(--u)); top: calc(-38 * var(--u)); width: calc(150 * var(--u)); height: calc(40 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(40 * var(--u)); }
  .release__sleeve { width: calc(360 * var(--u)); height: calc(420 * var(--u)); }
  .release__cover { left: calc(24 * var(--u)); top: calc(24 * var(--u)); width: calc(312 * var(--u)); height: calc(312 * var(--u)); }
  .release__name { left: calc(24 * var(--u)); top: calc(352 * var(--u)); width: calc(312 * var(--u)); font-size: calc(46 * var(--u)); }
  .release__detail { top: calc(444 * var(--u)); width: calc(320 * var(--u)); font-size: calc(17 * var(--u)); }
  .release__link { top: calc(494 * var(--u)); font-size: calc(18 * var(--u)); line-height: max(44px, calc(34 * var(--u))); }

  /* Personnel */
  .personnel .paper { margin: 0; left: calc(72 * var(--u)); top: calc(60 * var(--u)); width: calc(1296 * var(--u)); height: calc(780 * var(--u)); padding: 0; min-height: 0; }
  .personnel__title { --tfs: 140; position: absolute; left: calc(64 * var(--u)); top: calc(50 * var(--u)); }
  .polaroid { left: calc(69.5 * var(--u)); top: calc(233.8 * var(--u)); width: calc(600 * var(--u)); height: calc(430 * var(--u)); }
  .polaroid__frame { box-shadow: 0 8px 9px rgb(0 0 0 / .25); }
  .polaroid__frame { padding: calc(16 * var(--u)) calc(16 * var(--u)) 0; }
  .polaroid__frame .photo-slot { height: calc(379 * var(--u)); }
  .paperclip { width: calc(38 * var(--u)); height: calc(120 * var(--u)); left: calc(160.5 * var(--u)); top: calc(-43.8 * var(--u)); }
  .paperclip--shadow { left: calc(163.5 * var(--u)); top: calc(-38.8 * var(--u)); }
  .polaroid__caption { left: calc(-5.5 * var(--u)); top: calc(456.2 * var(--u)); width: calc(560 * var(--u)); font-size: calc(18 * var(--u)); }
  .players { left: calc(760 * var(--u)); right: auto; width: calc(472 * var(--u)); top: calc(64 * var(--u)); }
  .player { height: calc(172 * var(--u)); }
  .player::after { top: calc(138 * var(--u)); height: calc(1.5 * var(--u)); background: repeating-linear-gradient(90deg, var(--ink) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(8 * var(--u))); }
  .player__name { font-size: calc(76 * var(--u)); }
  .player__role { margin-top: calc(10 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(29 * var(--u)); }

  /* Live */
  .live .section__inner { padding: 0; }
  .turntable { position: absolute; left: calc(72 * var(--u)); top: calc(80 * var(--u)); width: calc(820 * var(--u)); border-radius: calc(24 * var(--u)); }
  .live__title { --tfs: 120; position: absolute; left: calc(960 * var(--u)); top: calc(100 * var(--u)); width: calc(408 * var(--u)); margin: 0; }
  .live__caption { position: absolute; left: calc(960 * var(--u)); top: calc(330 * var(--u)); width: calc(400 * var(--u)); margin: 0; font-size: calc(20 * var(--u)); }
  .video { position: absolute; left: calc(960 * var(--u)); top: calc(410 * var(--u)); width: calc(408 * var(--u)); height: calc(230 * var(--u)); margin: 0; aspect-ratio: auto; }
  .photo-slot--video { --hint-icon: calc(56 * var(--u)); }

  /* Press */
  .press__title { --tfs: 120; position: absolute; left: calc(72 * var(--u)); top: calc(60 * var(--u)); margin: 0; }
  .press .carousel { display: block; height: 0; padding: 0; margin: 0; }
  .quote { position: absolute; }
  .quote figcaption { font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); }
  .quote--sticker { left: calc(72 * var(--u)); top: calc(240 * var(--u)); width: calc(380 * var(--u)); height: calc(380 * var(--u)); }
  .quote--sticker blockquote { left: 10.5%; top: 23.7%; width: 78.9%; } .quote--sticker blockquote p { font-size: 13.2cqi; }
  .quote--sticker figcaption { top: 73.7%; }
  .quote--card { left: calc(520 * var(--u)); top: calc(300 * var(--u)); width: calc(420 * var(--u)); height: calc(340 * var(--u)); }
  .quote__border { inset: calc(16 * var(--u)); }
  .quote--card blockquote { left: calc(44 * var(--u)); top: calc(54 * var(--u)); width: calc(332 * var(--u)); } .quote--card blockquote p { font-size: calc(54 * var(--u)); }
  .quote--card figcaption { left: calc(44 * var(--u)); top: calc(270 * var(--u)); }
  .quote--star { left: calc(980 * var(--u)); top: calc(200 * var(--u)); width: calc(420 * var(--u)); height: calc(420 * var(--u)); }
  .quote--star blockquote { left: 11.9%; top: 31%; width: 76.2%; } .quote--star blockquote p { font-size: 12.4cqi; }
  .quote--star figcaption { top: 71.4%; }

  /* Reserve */
  .reserve .paper { margin: 0; left: calc(72 * var(--u)); top: calc(60 * var(--u)); width: calc(1296 * var(--u)); height: calc(780 * var(--u)); padding: 0; }
  .reserve__title { --tfs: 150; position: absolute; left: calc(64 * var(--u)); top: calc(50 * var(--u)); width: calc(540 * var(--u)); }
  .reserve__intro { position: absolute; left: calc(64 * var(--u)); top: calc(380 * var(--u)); width: calc(460 * var(--u)); margin: 0; font-size: calc(20 * var(--u)); }
  .diecut { left: calc(64 * var(--u)); top: calc(490 * var(--u)); width: calc(260 * var(--u)); height: calc(260 * var(--u)); }
  .slip { left: calc(690 * var(--u)); top: calc(56 * var(--u)); width: calc(540 * var(--u)); height: calc(668 * var(--u)); padding: calc(34 * var(--u)) 0 0 calc(76 * var(--u)); }
  .slip__perforation { left: calc(48 * var(--u)); width: calc(668 * var(--u)); height: calc(1.5 * var(--u)); background: repeating-linear-gradient(90deg, var(--ink) 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(9 * var(--u))); }
  .slip__title { font-size: calc(52 * var(--u)); line-height: calc(62 * var(--u)); }
  .slip__row { margin-top: calc(26 * var(--u)); width: calc(420 * var(--u)); }
  .slip__title + .slip__row { margin-top: calc(20 * var(--u)); }
  .slip__row label { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); }
  .slip__row input { height: calc(38 * var(--u)); margin-top: calc(3 * var(--u)); padding-bottom: calc(7 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(29 * var(--u)); }
  .slip__send { --bw: calc(420 * var(--u)); --bh: calc(56 * var(--u)); --bfs: calc(19 * var(--u)); margin-top: calc(44 * var(--u)); }

  /* Footer: 200 px high on the 1440 frame */
  .footer__inner { width: calc(1440 * var(--u0)); height: calc(200 * var(--u0)); min-height: 150px; padding: 0; position: relative; }
  .footer__logo { position: absolute; left: calc(72 * var(--u0)); top: calc(50 * var(--u0)); font-size: max(20px, calc(28 * var(--u0))); }
  .footer__social { position: absolute; left: calc(72 * var(--u0)); top: calc(104 * var(--u0)); display: flex; gap: calc(36 * var(--u0)); margin: 0; }
  .footer__social a { font-size: max(15px, calc(17 * var(--u0))); }
  .footer__copy { position: absolute; right: calc(72 * var(--u0)); top: calc(116 * var(--u0)); margin: 0; font-size: max(13px, calc(15 * var(--u0))); }
}

/* ---------- 6. Animations. Only when <html> has "motion" (see index.html). Without it,
   or with JavaScript off, every piece is already in place. */
@keyframes drop-in { from { opacity: 0; translate: 0 -48px; rotate: -3deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
/* Hero record: fully hidden behind the sleeve while the sleeve lands (first 900 ms), then it slides out */
@keyframes vinyl-out { 0%, 42.8% { translate: -62% 0; opacity: 0; } 43% { translate: -62% 0; opacity: 1; animation-timing-function: var(--motion-ease); } 100% { translate: 0 0; opacity: 1; } }
@keyframes slide-out { from { translate: -34% 0; } to { translate: 0 0; } }
@keyframes pop { 0% { opacity: 0; scale: .3; } 70% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes row-in { from { opacity: 0; translate: var(--motion-dist) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes rise-in { from { opacity: 0; translate: 0 var(--motion-dist); } to { opacity: 1; translate: 0 0; } }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes photo-drop { from { opacity: 0; translate: 0 -40px; rotate: -4deg; } to { opacity: 1; translate: 0 0; rotate: 1.5deg; } }
@keyframes clip-in { from { opacity: 0; translate: 0 -28px; } to { opacity: 1; translate: 0 0; } }
@keyframes shape-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes arm-in { from { rotate: calc(var(--motion-arm) * -2.4); } to { rotate: 0deg; } }
@keyframes arm-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: calc(var(--motion-arm) * .3); } }

/* Hero: starts on the first paint, no JavaScript needed */
.motion .sleeve { animation: drop-in 900ms var(--motion-ease) both; }
.motion .hero__vinyl { animation: vinyl-out 2100ms linear both; }
.motion .sticker { animation: pop 700ms var(--motion-ease) 1100ms both; }
/* the records keep turning slowly, label text included */
.motion .hero:not(.is-away) .hero__vinyl { animation: vinyl-out 2100ms linear both, spin var(--motion-spin) linear 2100ms infinite; }
.motion .live.is-live .turntable__vinyl { animation: spin var(--motion-spin) linear infinite; }

/* Everything below stays visible until main.js says "reveal-ready" */
.reveal-ready [data-reveal-group]:not(.is-in) [data-reveal] { opacity: 0; }
.reveal-ready [data-reveal-group].is-in .track[data-reveal] { animation: row-in var(--motion-dur) var(--motion-ease) calc(var(--i) * var(--motion-stagger)) both; }
.reveal-ready [data-reveal-group]:not(.is-in) .track::after { clip-path: inset(0 100% 0 0); }
.reveal-ready [data-reveal-group].is-in .track::after { animation: draw 900ms var(--motion-ease) calc(var(--i) * var(--motion-stagger) + 250ms) both; }
.reveal-ready [data-reveal-group].is-in .release[data-reveal] { animation: rise-in var(--motion-dur) var(--motion-ease) calc(var(--i) * var(--motion-stagger)) both; }
.reveal-ready [data-reveal-group].is-in .release[data-reveal] .release__disc { animation: slide-out 1100ms var(--motion-ease) calc(var(--i) * var(--motion-stagger) + 350ms) both; }
.reveal-ready [data-reveal-group]:not(.is-in) .release__disc { translate: -34% 0; }
.reveal-ready [data-reveal-group].is-in .polaroid__frame[data-reveal] { animation: photo-drop 1000ms var(--motion-ease) both; }
.reveal-ready .polaroid:not(.is-in) .paperclip { opacity: 0; }
.reveal-ready .polaroid.is-in .paperclip { animation: clip-in 600ms var(--motion-ease) 800ms both; }
.reveal-ready [data-reveal-group].is-in .player[data-reveal] { animation: rise-in var(--motion-dur) var(--motion-ease) calc(var(--i) * var(--motion-stagger) + 300ms) both; }
.reveal-ready [data-reveal-group]:not(.is-in) .player::after { clip-path: inset(0 100% 0 0); }
.reveal-ready [data-reveal-group].is-in .player::after { animation: draw 900ms var(--motion-ease) calc(var(--i) * var(--motion-stagger) + 500ms) both; }
.reveal-ready [data-reveal-group].is-in .quote[data-reveal] { animation: shape-in var(--motion-dur) var(--motion-ease) calc(var(--i) * var(--motion-stagger) * 1.6) both; }
.reveal-ready .live .turntable__arm { animation: arm-in 1400ms var(--motion-ease) both; }
.reveal-ready .live.is-live .turntable__arm { animation: arm-in 1400ms var(--motion-ease) both, arm-sway 6s ease-in-out 1400ms infinite; }

/* DEMO ONLY: note after sending the form, template and photo credits in the footer */
.demo-note { position: relative; margin: 10px 0 0; font: 600 14px/1.3 var(--font-text); color: var(--ink); }
.demo-credit { width: min(100%, 430px); margin: 0 auto; padding: 0 20px 36px; font: 400 13px/1.5 var(--font-text); color: var(--muted); }
.demo-credit p { margin: 0 0 6px; }
.demo-credit a { color: inherit; }
@media (min-width: 1180px) {
  .demo-note { font-size: calc(16 * var(--u)); }
  .demo-credit { width: 100%; max-width: 1440px; padding: 0 72px 40px; font-size: 14px; }
}