/* =====================================================================
   Rico Salvage · Hip Hop v2
   Plain CSS, no build step. Sections:
   1. Settings (colors, fonts, motion)   2. Base   3. Menu bar
   4. Phone layout (drawn on the 390 frame, scaled by --m)
   5. Desktop layout (1180 px and up, drawn on the 1440 frame, scaled by --u)
   6. Animations
   ===================================================================== */

/* Fonts, loaded from the fonts folder (see README to load them from Google instead) */
@font-face { font-family: "Bungee"; src: url("../../fonts/bungee-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chivo Mono"; src: url("../../fonts/chivo-mono-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../../fonts/permanent-marker-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- 1. Settings. EDIT: colors, fonts and motion live here. */
:root {
  --ink: #141416;        /* text on light pieces, outlines */
  --cream: #efe8d8;      /* text on dark walls, paper */
  --yellow: #ffd23f;     /* title, stickers, tickets */
  --pink: #ff4f8b;       /* title shadow, about wall, lanyard */
  --mint: #86e3b8;       /* main button, tickets, book wall */
  --wall: #242427;       /* hero, tape and road wall */
  --night: #121214;      /* player and footer */
  --deck: #0a0a0b;       /* player panel */
  --deck-edge: #3b3b40;  /* player panel border */
  --grey: #3b3b40;       /* small print on paper and cards */
  --hint: #696963;       /* form placeholders (4.5:1 on the paper) */
  --muted: #85857f;      /* copyright line on the footer */
  --strip: #e6d9b4;      /* track strips (inside assets/svg/strip.svg too) */
  --frame: #f4efe2;      /* photo frame */
  --metal: #8d8f96;      /* lanyard clip */
  --photo-hint: #efe8d8; /* "replace with photo" text on the empty photo spots (5:1 or more) */
  --focus: #ffd23f;      /* focus outline on dark walls (light sections use --ink) */

  --font-display: "Bungee", "Arial Black", sans-serif;
  --font-text: "Chivo Mono", "Courier New", monospace;
  --font-hand: "Permanent Marker", "Comic Sans MS", cursive;

  /* Motion. Durations in ms, distances in px. */
  --motion-slap: 700ms;        /* stickers and title landing */
  --motion-slide: 900ms;       /* tracks, tickets and cards sliding in */
  --motion-slide-x: 80px;      /* how far they come from */
  --motion-step: 120ms;        /* delay between pieces that come into view together */
  --motion-reel: 2.4s;         /* one turn of the cassette reels */
  --motion-beat: 690ms;        /* speaker thump (690 ms is about 87 BPM) */
  --motion-ease: cubic-bezier(.2, .9, .25, 1.15);

  --nav-h: 80px;               /* menu bar height at the top of the page */
  --nav-h-compact: 60px;       /* menu bar height after scrolling */

  /* --m: one Figma pixel on phones (390 px frame, up to 430 px wide) */
  --m: calc(min(100cqi, 430px) / 390);
}

/* ---------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--wall); color: var(--cream); font: 400 16px/1.5 var(--font-text); container-type: inline-size; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg { display: block; }
button, input, textarea { font: inherit; color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--yellow); color: var(--ink); font-weight: 700; border-radius: 22px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.about, .merch, .book, .slip, .product__card, .ticket { --focus: var(--ink); }

/* Wall grain (brand art): one SVG per section, phone and desktop versions */
.section--grain { position: relative; background-repeat: no-repeat; background-position: 50% 0; background-size: 100% auto; }
.hero { background-image: url("../svg/m-grain-hero.svg"); }
.tape { background-image: url("../svg/m-grain-tape.svg"); }
.about { background-image: url("../svg/m-grain-about.svg"); }
.road { background-image: url("../svg/m-grain-road.svg"); }
.merch { background-image: url("../svg/m-grain-merch.svg"); }
.book { background-image: url("../svg/m-grain-book.svg"); }

.section { position: relative; overflow: hidden; }
.section__inner { position: relative; width: calc(390 * var(--m)); margin: 0 auto; }
.title { font: 400 calc(var(--tfs) * var(--m))/1 var(--font-display); color: var(--cream); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
  border-radius: 999px; font: 700 calc(16 * var(--m))/1.19 var(--font-text); cursor: pointer; border: 0;
}
.btn--mint { background: var(--mint); color: var(--ink); }
.btn--line { border: 2px solid var(--cream); color: var(--cream); background: transparent; }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn:hover { filter: brightness(1.08); }
.btn--line:hover { background: rgb(239 232 216 / .1); }

/* Photo spots. EDIT: the gradient shows until a photo is added. */
.photo-slot { position: relative; overflow: hidden; width: 100%; height: 100%; background: linear-gradient(168.7deg, #8a1f33 0%, #2a0d12 83.3%); }
.photo-slot--green { background: linear-gradient(168.7deg, #3b6b57 0%, #10231b 83.3%); }
.photo-slot--slate { background: linear-gradient(168.7deg, #4a4a52 0%, #141416 83.3%); }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot__hint {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--m));
  color: var(--photo-hint); font: 500 calc(13 * var(--m))/1.25 var(--font-text); text-align: center; width: 90%;
}
.photo-slot__hint svg { width: calc(56 * var(--m)); height: calc(56 * var(--m)); }
.photo-slot img ~ .photo-slot__hint { display: none; }

/* ---------- 3. Menu bar */
.topbar { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--nav-h); transition: height .25s, background-color .25s; }
.topbar.is-scrolled { height: var(--nav-h-compact); background: rgb(18 18 20 / .92); box-shadow: 0 6px 18px rgb(0 0 0 / .25); }
@supports (backdrop-filter: blur(6px)) { .topbar.is-scrolled { background: rgb(18 18 20 / .8); backdrop-filter: blur(8px); } }
.static-nav .topbar { position: absolute; }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; width: calc(390 * var(--m)); margin: 0 auto; padding: 0 calc(20 * var(--m)); }
.nav__logo { font: 700 calc(18 * var(--m))/1.19 var(--font-text); text-decoration: none; color: var(--cream); white-space: nowrap; position: relative; }
.nav__logo::after { content: ""; position: absolute; inset: -12px -8px; } /* 44 px touch area */
.chip {
  display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--cream); border-radius: 999px; background: transparent;
  color: var(--cream); text-decoration: none; font: 500 calc(14 * var(--m))/1.19 var(--font-text); white-space: nowrap; position: relative; cursor: pointer;
}
.chip:hover { background: rgb(239 232 216 / .12); }
.nav__toggle { width: calc(64 * var(--m)); height: calc(36 * var(--m)); padding: 0; }
.nav__toggle::after { content: ""; position: absolute; left: -4px; right: -4px; top: calc(50% - 22px); bottom: calc(50% - 22px); } /* 44 px touch area */
.nav__burger { width: calc(20 * var(--m)); height: calc(14 * var(--m)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; overflow: visible; }
.nav__close, .nav.is-open .nav__lines { display: none; }
.nav.is-open .nav__close { display: inline; }
.nav__links {
  position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 12px;
  padding: 16px calc(20 * var(--m)) 24px; background: var(--night); box-shadow: 0 18px 30px rgb(0 0 0 / .4);
}
.nav.is-open .nav__links { display: flex; }
.nav__links .chip { height: 48px; width: 100%; font-size: 16px; }
/* without JavaScript the phone menu shows its links in a row instead */
html:not(.js) .nav__toggle { display: none; }
html:not(.js) .nav__links { display: flex; position: static; flex-direction: row; flex-wrap: wrap; padding: 0; background: none; box-shadow: none; gap: 6px; justify-content: flex-end; }
html:not(.js) .nav__links .chip { height: 32px; width: auto; padding: 0 10px; font-size: 13px; }

/* ---------- 4. Phone layout (also tablets: the phone layout, centered) */

/* Hero: exactly one screen high. Empty wall goes first when the screen is short,
   then the gaps between the texts shrink. */
.hero {
  position: relative; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden;
  padding: 0 0 clamp(calc(20 * var(--m)), calc(20 * var(--m) + (100svh - 740px) * .1875), calc(35 * var(--m)));
}
.hero__text { position: relative; z-index: 1; width: calc(390 * var(--m)); margin: 0 auto; padding: clamp(calc(76 * var(--m)), calc(76 * var(--m) + (100svh - 740px) * .2), calc(92 * var(--m))) calc(20 * var(--m)) 0; }
.hero__title { position: relative; font: 400 calc(68 * var(--m))/.98 var(--font-display); color: var(--yellow); text-transform: uppercase; }
.hero__title::before { content: attr(data-shadow); position: absolute; left: calc(4 * var(--m)); top: calc(4 * var(--m)); right: calc(-4 * var(--m)); color: var(--pink); z-index: -1; }
.hero__title span { display: block; }
.hero__lead { margin-top: clamp(calc(26 * var(--m)), calc(26 * var(--m) + (100svh - 740px) * .234), calc(44.7 * var(--m))); font-size: calc(16 * var(--m)); line-height: 1.5; color: var(--cream); }
.hero__actions { display: flex; flex-direction: column; gap: calc(14 * var(--m)); margin-top: clamp(calc(28 * var(--m)), calc(28 * var(--m) + (100svh - 740px) * .25), calc(48 * var(--m))); }
.hero__actions .btn { height: calc(54 * var(--m)); width: 100%; }

/* Boombox and its stickers (positions in boombox units: --b is one Figma pixel of the 1200 px drawing) */
.boombox { position: relative; flex: none; width: calc(350 * var(--m)); margin: calc(28 * var(--m)) auto 0; aspect-ratio: 1200 / 670; container-type: inline-size; --b: calc(100cqw / 1200); }
.hero__text { flex: none; }
.hero .boombox { margin-top: auto; }
.hero__actions { margin-bottom: calc(28 * var(--m)); }
.boombox__art { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 calc(24 * var(--b)) calc(25 * var(--b)) rgb(0 0 0 / .5)); }
.cassette__name { font: 400 22px var(--font-hand); fill: var(--ink); }
.boombox__star, .boombox__sticker { position: absolute; }
.boombox__star img, .boombox__sticker img { width: 100%; height: auto; max-width: none; }
/* phone: star 80 px at (-26, 2.4), sticker 92 px at (288, -9.6), in the 350 px boombox */
.boombox__star { left: calc(-26 / 350 * 100cqw); top: calc(2.4 / 350 * 100cqw); width: calc(80 / 350 * 100cqw); }
.boombox__sticker { left: calc(288 / 350 * 100cqw); top: calc(-9.6 / 350 * 100cqw); width: calc(92 / 350 * 100cqw); }
.boombox__sticker span { position: absolute; left: calc(10 / 92 * 100%); top: calc(25 / 92 * 100%); width: calc(72 / 92 * 100%); text-align: center; font: 400 calc(15 / 350 * 100cqw)/1 var(--font-display); color: var(--ink); text-transform: uppercase; }

/* The tape */
.tape { padding: calc(50 * var(--m)) 0 calc(36 * var(--m)); }
.tape__title { --tfs: 56; color: var(--yellow); }
.tape__intro, .tape__title { margin-left: calc(20 * var(--m)); margin-right: calc(20 * var(--m)); }
.tape__intro { margin-top: calc(26 * var(--m)); font-size: calc(16 * var(--m)); line-height: 1.5; }
.tape__cover { width: calc(316 * var(--m)); height: calc(316 * var(--m)); margin: calc(38 * var(--m)) auto 0; padding: calc(8 * var(--m)); background: var(--cream); border-radius: calc(8 * var(--m)); box-shadow: 0 calc(8 * var(--m)) calc(16 * var(--m)) rgb(0 0 0 / .5); }
.tape__cover .photo-slot { box-shadow: 0 calc(12 * var(--m)) calc(12 * var(--m)) rgb(0 0 0 / .5); }
.tracks { margin-top: calc(54.48 * var(--m)); }
.track {
  --c: var(--m); position: relative; display: flex; align-items: flex-start; width: calc(340 * var(--c)); height: calc(62 * var(--c)); margin: calc(20 * var(--c)) 0 0 calc(15 * var(--c)); /* the strip art starts 5 px in: its edge sits on the 20 px margin */
  rotate: var(--tilt, .85deg);
}
.track:nth-child(odd) { margin-top: calc(24.5 * var(--c)); }
.track:first-child { margin-top: 0; }
.track:nth-child(even) { margin-top: calc(15.5 * var(--c)); margin-left: calc(30 * var(--c)); --tilt: -.85deg; } /* right end on the 370 px margin */
.track:nth-child(1) { --tilt: .837deg; } .track:nth-child(2) { --tilt: -.945deg; } .track:nth-child(3) { --tilt: .792deg; } .track:nth-child(4) { --tilt: -.792deg; }
.track:nth-child(5) { --tilt: .82deg; } .track:nth-child(6) { --tilt: -.977deg; } .track:nth-child(7) { --tilt: .751deg; } .track:nth-child(8) { --tilt: -.815deg; }
.track::before { /* the strip (brand art) */
  content: ""; position: absolute; left: calc(-7.07 * var(--c)); top: calc(-3.5 * var(--c)); width: calc(353.6 * var(--c)); height: calc(75 * var(--c));
  background: url("../svg/m-strip.svg") 0 0 / 100% 100% no-repeat; z-index: -1;
}
.track { isolation: isolate; }
.track__name { padding: 0 0 0 calc(24 * var(--c)); font: 400 calc(30 * var(--c))/1.457 var(--font-hand); color: var(--ink); white-space: nowrap; }
.track__play, .deck__play {
  position: absolute; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: transparent;
}
.track__play { left: calc(283 * var(--c)); top: calc(12 * var(--c)); width: calc(38 * var(--c)); height: calc(38 * var(--c)); color: var(--ink); }
.track__play::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pink); border: calc(3 * var(--c)) solid var(--ink); }
.track__play::after { content: ""; position: absolute; left: calc(50% - 22px); right: calc(50% - 22px); top: calc(50% - 22px); bottom: calc(50% - 22px); border-radius: 50%; } /* 44 px touch area */
.track__play svg { position: relative; width: calc(10.5 * var(--c)); height: calc(12 * var(--c)); margin-left: calc(2 * var(--c)); fill: currentColor; }
.track__play:hover::before { filter: brightness(1.1); }
.track.is-current .track__play::before { background: var(--yellow); }

/* Player */
.player { background: var(--night); padding: calc(50 * var(--m)) 0 calc(40 * var(--m)); }
.player__title { --tfs: 36; line-height: 1.05; margin: 0 calc(20 * var(--m)); }
.deck {
  --c: var(--m); position: relative; width: calc(350 * var(--c)); height: calc(290 * var(--c)); margin: calc(64 * var(--m)) auto 0;
  background: var(--deck); border: calc(3 * var(--c)) solid var(--deck-edge); border-radius: calc(22 * var(--c));
}
.deck__now { position: absolute; left: calc(21 * var(--c)); top: calc(33 * var(--c)); font: 700 calc(20 * var(--c))/1.19 var(--font-text); color: var(--cream); max-width: calc(230 * var(--c)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck__play { left: calc(263 * var(--c)); top: calc(15 * var(--c)); width: calc(60 * var(--c)); height: calc(60 * var(--c)); color: var(--ink); }
.deck__play::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); border: calc(4 * var(--c)) solid var(--ink); }
.deck__icon { position: relative; width: calc(17 * var(--c)); height: calc(20 * var(--c)); fill: currentColor; }
.deck__icon--play { margin-left: calc(4 * var(--c)); }
.deck__icon--pause, .deck.is-playing .deck__icon--play { display: none; }
.deck.is-playing .deck__icon--pause { display: block; }
.deck__meter { position: absolute; left: calc(21 * var(--c)); top: calc(97 * var(--c)); width: calc(302 * var(--c)); height: calc(170 * var(--c)); }
.eq { width: 100%; height: 100%; overflow: visible; }
.eq path { fill: none; transition: stroke-opacity .15s; }
.eq path.off { stroke-opacity: .3; }
.eq--wide { display: none; }

/* About */
.about { background-color: var(--pink); padding: calc(55.1 * var(--m)) 0 calc(53.1 * var(--m)); }
.about .section__inner { display: flex; flex-direction: column; align-items: center; }
.snapshot {
  --c: var(--m); position: relative; width: calc(300 * var(--c)); height: calc(400 * var(--c)); padding: calc(20 * var(--c)) calc(20 * var(--c)) 0;
  background: var(--frame); rotate: 2deg; filter: drop-shadow(0 calc(12 * var(--c)) calc(12 * var(--c)) rgb(0 0 0 / .4));
}
.snapshot .photo-slot { height: calc(325 * var(--c)); }
.snapshot__caption { margin-top: calc(13 * var(--c)); font: 400 calc(20 * var(--c))/1.457 var(--font-hand); color: var(--ink); }
.staple {
  position: absolute; z-index: 1; width: calc(24 * var(--c)); height: calc(4.1 * var(--c)); background: #c9cbd1; border: 1px solid #7d7f86; border-radius: 2px;
  box-shadow: 0 calc(2 * var(--c)) calc(3 * var(--c)) rgb(0 0 0 / .45); translate: -50% -50%;
}
.staple--a { left: calc(51.26 * var(--c)); top: calc(13.53 * var(--c)); rotate: 4deg; }
.staple--b { left: calc(219.7 * var(--c)); top: calc(10.71 * var(--c)); rotate: -10deg; }
.badge-atl { position: absolute; left: calc(257.64 * var(--m)); top: calc(320.9 * var(--m)); width: calc(118.9 * var(--m)); z-index: 1; }
.badge-atl img { width: 100%; height: auto; }
.badge-atl span { position: absolute; left: calc(7.5 / 118.9 * 100%); top: calc(41.5 * var(--m)); width: calc(104 / 118.9 * 100%); text-align: center; font: 400 calc(24 * var(--m))/1.2 var(--font-display); color: var(--ink); }
.bio {
  --c: var(--m); position: relative; width: calc(341 * var(--c)); height: calc(520 * var(--c)); margin-top: calc(61.8 * var(--m)); padding: calc(44 * var(--c)) calc(23.5 * var(--c)) 0; /* 341 wide: the turned paper stays inside the page margins */
  rotate: -1deg; color: var(--ink); filter: drop-shadow(0 calc(12 * var(--c)) calc(12 * var(--c)) rgb(0 0 0 / .4)); isolation: isolate;
}
.bio::before { content: ""; position: absolute; left: -.14%; top: calc(-.86 * var(--c)); width: 100.29%; height: calc(521.36 * var(--c)); background: url("../svg/m-paper-bio.svg") 0 0 / 100% 100% no-repeat; z-index: -1; }
.bio__title { width: calc(300 * var(--c)); margin-right: calc(-6 * var(--c)); white-space: nowrap; /* one line, as in the Figma: it may use 6 px of the paper margin */ font: 400 calc(38 * var(--c))/1 var(--font-display); }
.bio p { width: calc(294 * var(--c)); margin-top: calc(28 * var(--c)); font-size: calc(15 * var(--c)); line-height: 1.55; }
.bio p + p { margin-top: calc(27.25 * var(--c)); }
.bio__more { display: inline-block; margin-top: calc(27 * var(--c)); font: 700 calc(15 * var(--c))/1.19 var(--font-text); text-decoration: none; position: relative; }
.bio__more::after { content: ""; position: absolute; inset: -13px -6px; }
.bio__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* On the road */
.road { padding: calc(50 * var(--m)) 0 calc(52.2 * var(--m)); }
.road__title { --tfs: 52; margin: 0 calc(20 * var(--m)); white-space: nowrap; }
.tickets { margin-top: calc(49.8 * var(--m)); }
.ticket {
  --c: var(--m); position: relative; isolation: isolate; width: calc(350 * var(--c)); height: calc(176 * var(--c)); margin: calc(24 * var(--c)) 0 0 calc(20 * var(--c)); color: var(--ink);
  rotate: .6deg; filter: drop-shadow(0 calc(6 * var(--c)) calc(6 * var(--c)) rgb(0 0 0 / .4));
  --hole: calc(14 * var(--c)); --hole-y: calc(128 * var(--c));
}
.ticket:nth-child(odd) { margin-top: calc(28 * var(--c)); }
.ticket:first-child { margin-top: 0; }
.ticket:nth-child(even) { rotate: -.6deg; margin-top: calc(20 * var(--c)); }
.ticket--yellow { --tk: var(--yellow); } .ticket--mint { --tk: var(--mint); } .ticket--cream { --tk: var(--cream); }
.ticket::before { /* perforation */
  content: ""; position: absolute; left: var(--hole); right: var(--hole); top: calc(127 * var(--c)); height: 2px; /* stops at the notches */
  background: repeating-linear-gradient(90deg, transparent 0 calc(2 * var(--c)), rgb(20 20 22 / .6) calc(2 * var(--c)) calc(6 * var(--c)), transparent calc(6 * var(--c)) calc(9.85 * var(--c)));
}
.ticket::after { /* the ticket itself, with the two notches punched out at the perforation (nothing sticks out past its edges) */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tk); border-radius: calc(8 * var(--c));
  --punch-l: radial-gradient(circle at 0 var(--hole-y), transparent var(--hole), #000 calc(var(--hole) + .5px));
  --punch-r: radial-gradient(circle at 100% var(--hole-y), transparent var(--hole), #000 calc(var(--hole) + .5px));
  -webkit-mask: var(--punch-l) left / 51% 100% no-repeat, var(--punch-r) right / 51% 100% no-repeat;
  mask: var(--punch-l) left / 51% 100% no-repeat, var(--punch-r) right / 51% 100% no-repeat;
}
.ticket__city { position: absolute; left: calc(24 * var(--c)); top: calc(18 * var(--c)); font: 400 calc(34 * var(--c))/1.32 var(--font-display); }
.ticket__date { position: absolute; left: calc(24 * var(--c)); top: calc(70 * var(--c)); font: 700 calc(16 * var(--c))/1.19 var(--font-text); }
.ticket__venue { position: absolute; left: calc(24 * var(--c)); top: calc(96 * var(--c)); font: 400 calc(15 * var(--c))/1.19 var(--font-text); }
.ticket__btn {
  position: absolute; left: calc(120 * var(--c)); top: calc(134 * var(--c)); width: calc(110 * var(--c)); height: calc(34 * var(--c)); display: grid; place-items: center;
  border-radius: 999px; background: var(--ink); color: var(--tk); font: 700 calc(14 * var(--c))/1.19 var(--font-text); text-decoration: none; z-index: 1;
}
.ticket__btn::after { content: ""; position: absolute; left: -2px; right: -2px; top: calc(50% - 22px); bottom: calc(50% - 22px); } /* 44 px touch area */
.ticket__btn:hover { filter: brightness(1.25); }

/* Merch: a row you swipe sideways */
.merch { background-color: var(--cream); padding: calc(50 * var(--m)) 0 calc(50 * var(--m)); }
.merch__title { --tfs: 46; color: var(--ink); margin: 0 calc(20 * var(--m)); width: calc(350 * var(--m)); }
.merch .section__inner { width: 100%; max-width: none; }
.merch__title { margin-left: max(calc(20 * var(--m)), calc(50% - 175 * var(--m))); }
.products {
  display: flex; gap: calc(20 * var(--m)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-top: calc(8 * var(--m)); padding: calc(60 * var(--m)) max(calc(20 * var(--m)), calc(50% - 175 * var(--m))) calc(60 * var(--m));
}
.products::-webkit-scrollbar { display: none; }
.product { --c: var(--m); --cx: 0; --sxm: 209; --lxm: 137.8; position: relative; flex: none; width: calc(290 * var(--c)); height: calc(440 * var(--c)); scroll-snap-align: center; }
.product__card {
  position: absolute; left: calc(var(--cx) * var(--c)); top: calc(3.72 * var(--c)); width: calc(290 * var(--c)); height: calc(430 * var(--c)); padding: calc(16 * var(--c)) calc(16 * var(--c)) 0;
  background: #fff; color: var(--ink); rotate: 1.5deg; filter: drop-shadow(0 calc(10 * var(--c)) calc(10 * var(--c)) rgb(0 0 0 / .25));
}
.product:nth-child(1) { --cx: 5.63; --sxm: 214.63; --lxm: 143.43; } /* phone: the first card's turned corner sits on the 20 px margin */
.product:nth-child(2) .product__card { top: calc(-2.56 * var(--c)); rotate: -1deg; }
.product:nth-child(3) .product__card { top: calc(-2.56 * var(--c)); rotate: 1deg; }
.product__card .photo-slot { height: calc(258 * var(--c)); }
.product__name { margin: calc(16 * var(--c)) 0 0 calc(2 * var(--c)); font: 400 calc(24 * var(--c))/1.32 var(--font-display); text-transform: uppercase; }
.product__note { margin: calc(6.3 * var(--c)) 0 0 calc(2 * var(--c)); font-size: calc(14 * var(--c)); line-height: 1.19; color: var(--grey); }
.product__btn {
  position: absolute; left: calc(18 * var(--c)); top: calc(370 * var(--c)); width: calc(254 * var(--c)); height: calc(44 * var(--c)); display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 999px; font: 700 calc(15 * var(--c))/1.19 var(--font-text); text-decoration: none; color: var(--ink);
}
.product__btn::after { content: ""; position: absolute; inset: -2px; top: calc(50% - 22px); bottom: calc(50% - 22px); } /* 44 px touch area */
.product__btn:hover { background: var(--ink); color: #fff; }
.product__price {
  position: absolute; left: calc(var(--sxm) * var(--c)); top: calc(9 * var(--c)); width: calc(82 * var(--c)); height: calc(82 * var(--c)); display: grid; place-items: center; z-index: 1;
  background: url("../svg/m-price-sticker.svg") 0 0 / 100% 100% no-repeat; font: 400 calc(24 * var(--c))/1.32 var(--font-display); color: var(--ink);
}
.product__loop { position: absolute; left: calc(var(--lxm) * var(--c)); top: calc(-13.6 * var(--c)); width: calc(14.4 * var(--c)); height: calc(36.8 * var(--c)); overflow: visible; z-index: 1; }

/* Book */
.book { background-color: var(--mint); padding: 0 0 calc(53.1 * var(--m)); }
.pass { --c: var(--m); position: relative; width: calc(300 * var(--c)); height: calc(600 * var(--c)); margin: 0 auto; }
.pass__lanyard { position: absolute; left: calc(124 * var(--c)); top: calc(-60 * var(--c)); width: calc(52.5 * var(--c)); height: calc(172.5 * var(--c)); background: var(--pink); }
.pass__clip { position: absolute; left: calc(127 * var(--c)); top: calc(98 * var(--c)); width: calc(45 * var(--c)); height: calc(37.5 * var(--c)); background: var(--metal); border-radius: calc(7.5 * var(--c)); }
.pass__card {
  position: absolute; left: 0; top: calc(120 * var(--c)); width: calc(300 * var(--c)); height: calc(480 * var(--c)); overflow: hidden; border-radius: calc(21 * var(--c));
  background: var(--ink); color: var(--cream); box-shadow: 0 calc(15 * var(--c)) calc(27 * var(--c)) rgb(0 0 0 / .4);
}
.pass__card::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(112.5 * var(--c)); background: var(--yellow); }
.pass__hole { position: absolute; left: calc(136.5 * var(--c)); top: calc(12 * var(--c)); width: calc(27 * var(--c)); height: calc(27 * var(--c)); border-radius: 50%; background: var(--mint); border: calc(2.25 * var(--c)) solid var(--ink); }
.pass__band { position: absolute; left: 0; right: 0; top: calc(57 * var(--c)); text-align: center; font: 400 calc(30 * var(--c))/1.32 var(--font-display); color: var(--ink); text-transform: uppercase; }
.pass__title { position: absolute; left: calc(27 * var(--c)); top: calc(142.5 * var(--c)); font: 400 calc(48 * var(--c))/1 var(--font-display); }
.pass__text { position: absolute; left: calc(27 * var(--c)); top: calc(270 * var(--c)); width: calc(247.5 * var(--c)); font-size: calc(12 * var(--c)); line-height: 1.5; }
.barcode { position: absolute; left: calc(27 * var(--c)); top: calc(375 * var(--c)); width: calc(246 * var(--c)); height: calc(75 * var(--c)); }
.slip {
  --c: var(--m); position: relative; width: calc(337.8 * var(--c)); height: calc(700 * var(--c)); margin: calc(86.9 * var(--m)) auto 0; padding: calc(44 * var(--c)) calc(21.9 * var(--c)) 0; /* 337.8 wide: the turned paper stays inside the page margins */
  rotate: -1deg; color: var(--ink); filter: drop-shadow(0 calc(12 * var(--c)) calc(12 * var(--c)) rgb(0 0 0 / .35)); isolation: isolate;
}
.slip::before { content: ""; position: absolute; left: -.15%; top: calc(-.86 * var(--c)); width: 100.3%; height: calc(701.36 * var(--c)); background: url("../svg/m-paper-form.svg") 0 0 / 100% 100% no-repeat; z-index: -1; }
.slip__title { width: calc(294 * var(--c)); font: 400 calc(32 * var(--c))/1 var(--font-display); }
.slip__intro { position: absolute; left: calc(21.9 * var(--c)); top: calc(130 * var(--c)); width: calc(294 * var(--c)); font-size: calc(14 * var(--c)); line-height: 1.4; color: var(--grey); }
.field { position: absolute; left: calc(21.9 * var(--c)); width: calc(294 * var(--c)); top: calc(var(--fy) * var(--c)); display: block; }
.field:nth-of-type(1) { --fy: 190; } .field:nth-of-type(2) { --fy: 274; } .field:nth-of-type(3) { --fy: 358; } .field:nth-of-type(4) { --fy: 446; }
.field__label { display: block; font: 700 calc(14 * var(--c))/1.19 var(--font-text); }
.field input, .field textarea {
  display: block; width: 100%; margin: calc(5.34 * var(--c)) 0 0; padding: 0 0 calc(10.96 * var(--c)); border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent;
  font: 400 calc(16 * var(--c))/1.19 var(--font-text); color: var(--ink); outline-offset: 4px;
}
.field textarea {
  resize: none; height: calc(76.5 * var(--c)); padding: 0; line-height: calc(36 * var(--c)); border-bottom: 0; overflow: hidden;
  background: linear-gradient(var(--ink), var(--ink)) 0 calc(38.48 * var(--c)) / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 calc(74.48 * var(--c)) / 100% 2px no-repeat;
  margin-top: calc(-3.14 * var(--c));
}
.field input::placeholder, .field textarea::placeholder { color: var(--hint); opacity: 1; }
.slip__foot { position: absolute; left: calc(21.9 * var(--c)); top: calc(574 * var(--c)); }
.slip .btn { width: calc(200 * var(--c)); height: calc(52 * var(--c)); font-size: calc(16 * var(--c)); }
.slip__mail { position: absolute; left: 0; top: calc(72 * var(--c)); font: 700 calc(14 * var(--c))/1.19 var(--font-text); white-space: nowrap; text-decoration: none; }
.slip__mail::after { content: ""; position: absolute; inset: -14px -4px; }
.slip__mail:hover { text-decoration: underline; }

/* Footer */
.footer { background: var(--night); }
.footer__inner { position: relative; width: calc(390 * var(--m)); height: calc(300 * var(--m)); margin: 0 auto; }
.footer__logo { position: absolute; left: calc(20 * var(--m)); top: calc(50 * var(--m)); font: 400 calc(32 * var(--m))/1.2 var(--font-display); color: var(--yellow); text-transform: uppercase; }
.footer__links { position: absolute; left: calc(20 * var(--m)); top: calc(120 * var(--m)); display: grid; grid-template-columns: calc(140 * var(--m)) auto; row-gap: calc(17 * var(--m)); }
.footer__links a { display: block; width: fit-content; position: relative; font: 500 calc(16 * var(--m))/1.19 var(--font-text); text-decoration: none; }
.footer__links a::after { content: ""; position: absolute; left: -6px; right: -6px; top: calc(50% - 18 * var(--m)); bottom: calc(50% - 18 * var(--m)); } /* the rows are 36 px apart: the touch area fills the gap */
.footer__links a:hover { color: var(--yellow); }
.footer__copy { position: absolute; left: calc(20 * var(--m)); top: calc(230 * var(--m)); font-size: calc(13 * var(--m)); line-height: 1.19; color: var(--muted); }

/* very narrow phones: the menu bar keeps a readable size */
@media (max-width: 359px) { .nav__logo { font-size: 15px; } }

/* ---------- 5. Desktop (1180 px and up). Drawn on the 1440 frame, scaled by --u. */
@media (min-width: 1180px) {
  :root { --nav-h: max(72px, calc(100 * var(--u0))); --nav-h-compact: 64px; --u0: calc(min(100cqi, 1440px) / 1440); }
  body { --u: var(--u0); }
  .hero { background-image: url("../svg/grain-hero.svg"); }
  .tape { background-image: url("../svg/grain-tape.svg"); }
  .about { background-image: url("../svg/grain-about.svg"); }
  .road { background-image: url("../svg/grain-road.svg"); }
  .merch { background-image: url("../svg/grain-merch.svg"); }
  .book { background-image: url("../svg/grain-book.svg"); }

  /* Menu bar */
  .nav { width: calc(1440 * var(--u0)); padding: 0 calc(72 * var(--u0)); }
  .nav__logo { font-size: max(18px, calc(22 * var(--u0))); }
  .nav__toggle { display: none; }
  .nav__links, html:not(.js) .nav__links { display: flex; position: static; flex-direction: row; gap: calc(10 * var(--u0)); padding: 0; background: none; box-shadow: none; }
  .nav__links .chip, html:not(.js) .nav__links .chip { height: max(36px, calc(40 * var(--u0))); width: auto; min-width: calc(var(--cw) * var(--u0)); padding: 0 calc(21.5 * var(--u0)); font-size: max(14px, calc(15 * var(--u0))); }
  .nav__links li:nth-child(1) .chip { --cw: 124; } .nav__links li:nth-child(2) .chip { --cw: 82; }
  .nav__links li:nth-child(3) .chip { --cw: 92.5; } .nav__links li:nth-child(4) .chip { --cw: 82; }

  /* Every section: the 1440 drawing scales down a little more, if needed, so it fits the window height */
  .section { padding: 0; height: calc(var(--H) * var(--u)); --u: max(min(var(--u0), 100svh / var(--H)), var(--u0) * .78); }
  .section__inner { width: calc(1440 * var(--u)); height: 100%; }
  .section__inner > * { position: absolute; margin: 0; }
  .title { font-size: calc(var(--tfs) * var(--u)); }
  .tape { --H: 940; } .player { --H: 620; } .about { --H: 920; } .road { --H: 1060; } .merch { --H: 900; } .book { --H: 960; }
  .photo-slot__hint { gap: calc(12 * var(--u)); font-size: calc(15 * var(--u)); }
  .photo-slot__hint svg { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .btn { font-size: calc(17 * var(--u)); }

  /* Hero: 100% of the window height. Texts sit on the 1440 drawing; the boombox takes the height that is left. */
  .hero { --u: max(min(var(--u0), 100svh / 1130), var(--u0) * .74); display: block; height: 100svh; min-height: calc(760 * var(--u)); padding: 0; }
  .hero__text { position: absolute; left: calc(50% - 720 * var(--u)); top: 0; width: calc(1440 * var(--u)); height: 0; padding: 0; margin: 0; }
  /* the title keeps the left margin of the logo when the hero scales down to fit the window */
  .hero__title { position: absolute; left: calc(720 * var(--u) - 648 * var(--u0)); top: calc(100 * var(--u)); font-size: calc(124 * var(--u)); line-height: 1; white-space: nowrap; }
  .hero__title::before { left: calc(6 * var(--u)); top: calc(6 * var(--u)); right: auto; }
  .hero__lead { position: absolute; left: calc(360 * var(--u)); top: calc(262 * var(--u)); width: calc(720 * var(--u)); margin: 0; text-align: center; font-size: calc(18 * var(--u)); }
  .hero__actions { position: absolute; left: calc(500 * var(--u)); top: calc(350 * var(--u)); flex-direction: row; gap: calc(16 * var(--u)); margin: 0; }
  .hero__actions .btn { height: calc(56 * var(--u)); width: calc(220 * var(--u)); }
  .hero__actions .btn--line { width: calc(204 * var(--u)); }
  .hero .boombox {
    position: absolute; left: 50%; top: calc(420 * var(--u)); translate: -50% 0; margin: 0; width: auto;
    height: max(calc(300 * var(--u)), min(calc(670 * var(--u)), 100svh - 460 * var(--u)));
  }
  /* desktop: star 138 px at (-4, 26), sticker 158 px at (1061, -21), text box at (1085, 24) 110 wide; in the 1200 px boombox */
  .boombox__star { left: calc(-4 * var(--b)); top: calc(26 * var(--b)); width: calc(138 * var(--b)); }
  .boombox__sticker { left: calc(1061 * var(--b)); top: calc(-21 * var(--b)); width: calc(158 * var(--b)); }
  .boombox__sticker span { left: calc(24 / 158 * 100%); top: calc(45 / 158 * 100%); width: calc(110 / 158 * 100%); font-size: calc(26 * var(--b)); }

  /* The tape */
  .tape__title { --tfs: 80; left: calc(72 * var(--u)); top: calc(70 * var(--u)); }
  .tape__intro { left: calc(72 * var(--u)); top: calc(210 * var(--u)); width: calc(380 * var(--u)); font-size: calc(18 * var(--u)); }
  .tape__cover { left: calc(60 * var(--u)); top: calc(388 * var(--u)); width: calc(404 * var(--u)); height: calc(404 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(16 * var(--u)) rgb(0 0 0 / .5); }
  .tape__cover .photo-slot { box-shadow: 0 calc(16 * var(--u)) calc(15 * var(--u)) rgb(0 0 0 / .5); }
  .tracks { left: 0; top: calc(88.92 * var(--u)); width: 100%; }
  .track { --c: var(--u); width: calc(780 * var(--c)); height: calc(76 * var(--c)); margin: calc(1.6 * var(--c)) 0 0 calc(559 * var(--c)); }
  .track:nth-child(odd) { margin-top: calc(31 * var(--c)); }
  .track:nth-child(even) { margin-left: calc(584.5 * var(--c)); }
  .track:nth-child(1) { margin-top: 0; --tilt: 1.31deg; } .track:nth-child(2) { margin-top: calc(.6 * var(--c)); --tilt: -.95deg; }
  .track:nth-child(3) { margin-top: calc(27.62 * var(--c)); --tilt: .76deg; } .track:nth-child(4) { margin-top: calc(1.62 * var(--c)); --tilt: -1.36deg; }
  .track:nth-child(5) { margin-top: calc(34.46 * var(--c)); --tilt: 1.36deg; } .track:nth-child(6) { margin-top: calc(1.72 * var(--c)); --tilt: -.74deg; }
  .track:nth-child(7) { margin-top: calc(30.26 * var(--c)); --tilt: 1.36deg; } .track:nth-child(8) { margin-top: calc(2.55 * var(--c)); --tilt: -.62deg; }
  .track::before { left: calc(-8.19 * var(--c)); top: calc(-4.5 * var(--c)); width: calc(796.72 * var(--c)); height: calc(89 * var(--c)); background-image: url("../svg/strip.svg"); }
  .track__name { padding-left: calc(38 * var(--c)); margin-top: calc(2 * var(--c)); font-size: calc(38 * var(--c)); }
  .track__play { left: calc(708 * var(--c)); top: calc(14 * var(--c)); width: calc(44 * var(--c)); height: calc(44 * var(--c)); }
  .track__play svg { width: calc(12.1 * var(--c)); height: calc(14 * var(--c)); }

  /* Player */
  .player__title { left: calc(72 * var(--u)); top: calc(70 * var(--u)); --tfs: 60; line-height: 1; white-space: nowrap; }
  .deck { --c: var(--u); left: calc(72 * var(--u)); top: calc(190 * var(--u)); width: calc(1296 * var(--c)); height: calc(340 * var(--c)); border-width: calc(4 * var(--c)); border-radius: calc(28 * var(--c)); }
  .deck__now { left: calc(194 * var(--c)); top: calc(36 * var(--c)); font-size: calc(26 * var(--c)); max-width: calc(900 * var(--c)); }
  .deck__play { left: calc(59 * var(--c)); top: calc(111 * var(--c)); width: calc(110 * var(--c)); height: calc(110 * var(--c)); }
  .deck__icon { width: calc(29 * var(--c)); height: calc(34 * var(--c)); }
  .deck__icon--play { margin-left: calc(6 * var(--c)); }
  .deck__meter { left: calc(194 * var(--c)); top: calc(86 * var(--c)); width: calc(1035 * var(--c)); height: calc(220 * var(--c)); }
  .eq--wide { display: block; } .eq--narrow { display: none; }

  /* About */
  .about .section__inner { display: block; }
  .snapshot { --c: var(--u); left: calc(98 * var(--u)); top: calc(118.87 * var(--u)); width: calc(520 * var(--c)); height: calc(680 * var(--c)); filter: drop-shadow(0 calc(16 * var(--c)) calc(15 * var(--c)) rgb(0 0 0 / .4)); }
  .snapshot .photo-slot { height: calc(600 * var(--c)); }
  .snapshot__caption { margin: calc(10 * var(--c)) 0 0 calc(4 * var(--c)); font-size: calc(26 * var(--c)); }
  .staple { width: calc(34 * var(--c)); height: calc(5.78 * var(--c)); }
  .staple--a { left: calc(136.9 * var(--c)); top: calc(7.9 * var(--c)); }
  .staple--b { left: calc(387.45 * var(--c)); top: calc(.94 * var(--c)); }
  .badge-atl { left: calc(509.67 * var(--u)); top: calc(634 * var(--u)); width: calc(170.66 * var(--u)); }
  .badge-atl span { left: calc(10.33 / 170.66 * 100%); top: calc(60.5 * var(--u)); width: calc(150 / 170.66 * 100%); font-size: calc(34 * var(--u)); }
  .bio { --c: var(--u); left: calc(705.19 * var(--u)); top: calc(144.37 * var(--u)); width: calc(640 * var(--c)); height: calc(600 * var(--c)); padding: calc(66 * var(--c)) calc(44 * var(--c)) 0; filter: drop-shadow(0 calc(16 * var(--c)) calc(15 * var(--c)) rgb(0 0 0 / .4)); }
  .bio::before { left: 0; top: calc(-.86 * var(--c)); width: calc(641 * var(--c)); height: calc(601.36 * var(--c)); background-image: url("../svg/paper-bio.svg"); }
  .bio__title { width: calc(560 * var(--c)); font-size: calc(64 * var(--c)); }
  .bio p { width: calc(552 * var(--c)); margin-top: calc(60 * var(--c)); font-size: calc(18 * var(--c)); }
  .bio p + p { margin-top: calc(60.5 * var(--c)); }
  .bio__more { margin-top: calc(26.2 * var(--c)); font-size: calc(18 * var(--c)); }

  /* On the road */
  .road__title { --tfs: 84; left: calc(72 * var(--u)); top: calc(70 * var(--u)); }
  .tickets { left: 0; top: calc(225.65 * var(--u)); width: 100%; }
  .ticket { --c: var(--u); width: calc(1296 * var(--c)); height: calc(128 * var(--c)); margin: calc(10.69 * var(--c)) 0 0 calc(72 * var(--c)); rotate: .5deg; filter: drop-shadow(0 calc(8 * var(--c)) calc(8 * var(--c)) rgb(0 0 0 / .4)); --hole: calc(17 * var(--c)); --hole-x: calc(1020 * var(--c)); }
  .ticket:nth-child(odd) { margin-top: calc(33.31 * var(--c)); }
  .ticket:first-child { margin-top: 0; }
  .ticket:nth-child(even) { rotate: -.5deg; margin-top: calc(10.69 * var(--c)); }
  .ticket::before { left: calc(1019 * var(--c)); right: auto; top: var(--hole); bottom: var(--hole); width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, transparent 0 calc(1.97 * var(--c)), rgb(20 20 22 / .6) calc(1.97 * var(--c)) calc(5.9 * var(--c)), transparent calc(5.9 * var(--c)) calc(9.85 * var(--c))); }
  .ticket::after { /* desktop: the notches sit on the top and bottom edges, at the perforation */
    --punch-l: radial-gradient(circle at var(--hole-x) 0, transparent var(--hole), #000 calc(var(--hole) + .5px));
    --punch-r: radial-gradient(circle at var(--hole-x) 100%, transparent var(--hole), #000 calc(var(--hole) + .5px));
    -webkit-mask: var(--punch-l) top / 100% 51% no-repeat, var(--punch-r) bottom / 100% 51% no-repeat;
    mask: var(--punch-l) top / 100% 51% no-repeat, var(--punch-r) bottom / 100% 51% no-repeat; }
  .ticket__city { left: calc(40 * var(--c)); top: calc(34 * var(--c)); font-size: calc(46 * var(--c)); line-height: 1.2; }
  .ticket__date { left: calc(420 * var(--c)); top: calc(28 * var(--c)); font-size: calc(20 * var(--c)); }
  .ticket__venue { left: calc(420 * var(--c)); top: calc(70 * var(--c)); font-size: calc(20 * var(--c)); }
  /* the Tickets button sits in the middle of the stub (right of the perforation) */
  .ticket__btn { left: calc(1058 * var(--c)); top: calc(40 * var(--c)); width: calc(200 * var(--c)); height: calc(48 * var(--c)); font-size: calc(17 * var(--c)); }

  /* Merch */
  .merch__title { --tfs: 84; left: calc(72 * var(--u)); top: calc(70 * var(--u)); width: auto; white-space: nowrap; }
  .merch .section__inner { width: calc(1440 * var(--u)); }
  .products { left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: visible; padding: 0; margin: 0; }
  .product { --c: var(--u); position: absolute; width: calc(400 * var(--c)); height: calc(560 * var(--c)); left: calc(var(--px) * var(--u)); top: calc(var(--py) * var(--u)); }
  /* the three turned cards span the page margins (72 to 1368) with equal gaps between them */
  .product:nth-child(1) { --px: 79.26; --py: 235.14; } .product:nth-child(2) { --px: 522.41; --py: 266.47; } .product:nth-child(3) { --px: 963.15; --py: 243.45; }
  .product__card, .product:nth-child(2) .product__card, .product:nth-child(3) .product__card { left: 0; top: 0; width: calc(400 * var(--c)); height: calc(560 * var(--c)); padding: calc(20 * var(--c)) calc(20 * var(--c)) 0; filter: drop-shadow(0 calc(14 * var(--c)) calc(13 * var(--c)) rgb(0 0 0 / .25)); }
  .product__card .photo-slot { height: calc(360 * var(--c)); }
  .product__name { margin: calc(22 * var(--c)) 0 0 calc(4 * var(--c)); font-size: calc(30 * var(--c)); }
  .product__note { margin: calc(6.4 * var(--c)) 0 0 calc(4 * var(--c)); font-size: calc(16 * var(--c)); }
  .product__btn { left: calc(24 * var(--c)); top: calc(490 * var(--c)); width: calc(352 * var(--c)); height: calc(48 * var(--c)); font-size: calc(16 * var(--c)); }
  /* price sticker and loop are placed on the page drawing (not turned with the card) */
  .product__price { left: calc(var(--sx) * var(--c)); top: calc(var(--sy) * var(--c)); width: calc(124 * var(--c)); height: calc(124 * var(--c)); padding-bottom: calc(12 * var(--c)); background-image: url("../svg/price-sticker.svg"); font-size: calc(30 * var(--c)); }
  .product:nth-child(1) { --sx: 295.4; --sy: -1.14; --lx: 198.4; } .product:nth-child(2) { --sx: 283.14; --sy: 7.53; --lx: 186.14; } .product:nth-child(3) { --sx: 292.91; --sy: .55; --lx: 195.91; }
  /* each eyelet sits 4 px below the top edge of its card */
  .product__loop { left: calc(var(--lx) * var(--c)); top: calc(-33 * var(--c)); width: calc(18 * var(--c)); height: calc(46 * var(--c)); }

  /* Book */
  .book .section__inner > .pass, .pass { --c: var(--u); left: calc(100 * var(--u)); top: 0; width: calc(400 * var(--c)); height: calc(840 * var(--c)); }
  .pass__lanyard { left: calc(165 * var(--c)); top: calc(-40 * var(--c)); width: calc(70 * var(--c)); height: calc(230 * var(--c)); }
  .pass__clip { left: calc(170 * var(--c)); top: calc(170 * var(--c)); width: calc(60 * var(--c)); height: calc(50 * var(--c)); border-radius: calc(10 * var(--c)); }
  .pass__card { top: calc(200 * var(--c)); width: calc(400 * var(--c)); height: calc(640 * var(--c)); border-radius: calc(28 * var(--c)); box-shadow: 0 calc(20 * var(--c)) calc(36 * var(--c)) rgb(0 0 0 / .4); }
  .pass__card::before { height: calc(150 * var(--c)); }
  .pass__hole { left: calc(182 * var(--c)); top: calc(16 * var(--c)); width: calc(36 * var(--c)); height: calc(36 * var(--c)); border-width: calc(3 * var(--c)); }
  .pass__band { top: calc(76 * var(--c)); font-size: calc(40 * var(--c)); }
  .pass__title { left: calc(36 * var(--c)); top: calc(190 * var(--c)); font-size: calc(64 * var(--c)); }
  .pass__text { left: calc(36 * var(--c)); top: calc(360 * var(--c)); width: calc(330 * var(--c)); font-size: calc(16 * var(--c)); }
  .barcode { left: calc(36 * var(--c)); top: calc(500 * var(--c)); width: calc(328 * var(--c)); height: calc(100 * var(--c)); }
  .slip { --c: var(--u); left: calc(646.23 * var(--u)); top: calc(114.36 * var(--u)); width: calc(640 * var(--c)); height: calc(720 * var(--c)); padding: calc(56 * var(--c)) calc(48 * var(--c)) 0; filter: drop-shadow(0 calc(16 * var(--c)) calc(15 * var(--c)) rgb(0 0 0 / .35)); }
  .slip::before { left: 0; top: calc(-.86 * var(--c)); width: calc(641 * var(--c)); height: calc(721.36 * var(--c)); background-image: url("../svg/paper-form.svg"); }
  .slip__title { width: calc(544 * var(--c)); font-size: calc(40 * var(--c)); }
  .slip__intro { left: calc(48 * var(--c)); top: calc(160 * var(--c)); width: calc(544 * var(--c)); font-size: calc(16 * var(--c)); line-height: 1.19; }
  .field { left: calc(48 * var(--c)); width: calc(544 * var(--c)); }
  .field:nth-of-type(1) { --fy: 216; } .field:nth-of-type(2) { --fy: 308; } .field:nth-of-type(3) { --fy: 400; } .field:nth-of-type(4) { --fy: 492; }
  .field__label { font-size: calc(15 * var(--c)); }
  .field input, .field textarea { margin-top: calc(6.15 * var(--c)); padding-bottom: calc(12.58 * var(--c)); font-size: calc(18 * var(--c)); }
  .field textarea { height: calc(85.3 * var(--c)); padding: 0; line-height: calc(40 * var(--c)); margin-top: calc(-3.14 * var(--c));
    background-position: 0 calc(43.29 * var(--c)), 0 calc(83.29 * var(--c)); }
  .slip__foot { left: calc(48 * var(--c)); top: calc(628 * var(--c)); display: flex; align-items: center; }
  .slip .btn { width: calc(220 * var(--c)); height: calc(56 * var(--c)); font-size: calc(17 * var(--c)); }
  .slip__mail { position: static; margin-left: calc(28 * var(--c)); font-size: calc(16 * var(--c)); }

  /* Footer */
  .footer__inner { width: calc(1440 * var(--u0)); height: calc(240 * var(--u0)); }
  .footer__logo { left: calc(72 * var(--u0)); top: calc(60 * var(--u0)); font-size: calc(38 * var(--u0)); }
  .footer__links { left: calc(72 * var(--u0)); top: calc(140 * var(--u0)); display: flex; gap: calc(34.7 * var(--u0)); }
  .footer__links a { font-size: max(14px, calc(16 * var(--u0))); }
  /* the copyright sits on the same baseline as the links */
  .footer__copy { left: auto; right: calc(72 * var(--u0)); top: calc(141.9 * var(--u0)); font-size: max(13px, calc(14 * var(--u0))); }
}

/* ---------- 6. Animations (only with class "motion" on <html>, set in the <head> script).
   Nothing starts hidden until main.js adds "rs-reveal", so the page is complete without it. */
.motion .reel { animation: reel var(--motion-reel) linear infinite; }
.motion .vu-needle { animation: needle 1.6s ease-in-out infinite alternate; }
.motion .vu-needle:last-of-type { animation-duration: 1.3s; animation-delay: -.4s; }
.motion .speaker__cone { animation: thump var(--motion-beat) ease-out infinite; }
.motion .hero.is-away .reel, .motion .hero.is-away .vu-needle, .motion .hero.is-away .speaker__cone { animation-play-state: paused; }
@keyframes reel { to { rotate: 360deg; } }
@keyframes needle { from { rotate: -6deg; } to { rotate: 22deg; } }
@keyframes thump { 0% { scale: 1.035; } 35%, 100% { scale: 1; } }

/* Landing: the title and the stickers slap on, tracks and tickets slide in, cards drop on their loops */
.rs-reveal .hero__title span, .rs-reveal .boombox__sticker, .rs-reveal .boombox__star, .rs-reveal .badge-atl { animation: slap var(--motion-slap) var(--motion-ease) both; }
.rs-reveal .hero__title span { animation-delay: 80ms; }
.rs-reveal .boombox__star { animation-delay: 420ms; }
.rs-reveal .boombox__sticker { animation-delay: 560ms; }
@keyframes slap { from { opacity: 0; scale: 1.25; rotate: -8deg; } 60% { opacity: 1; } to { opacity: 1; scale: 1; rotate: 0deg; } }
.rs-reveal .badge-atl { animation-play-state: paused; }
.rs-reveal .badge-atl.is-in { animation-play-state: running; animation-delay: 250ms; }

.rs-reveal [data-reveal] { opacity: 0; translate: var(--motion-slide-x) 0; transition: opacity var(--motion-slide) ease, translate var(--motion-slide) var(--motion-ease); transition-delay: calc(var(--i, 0) * var(--motion-step)); }
.rs-reveal .ticket[data-reveal]:nth-child(even) { translate: calc(-1 * var(--motion-slide-x)) 0; }
.rs-reveal .product[data-reveal] { translate: 0 calc(-.5 * var(--motion-slide-x)); }
/* the landed state must beat the starting points above, so it lists them again */
.rs-reveal [data-reveal].is-in, .rs-reveal .ticket[data-reveal].is-in:nth-child(even), .rs-reveal .product[data-reveal].is-in { opacity: 1; translate: 0 0; }

/* DEMO ONLY: note after sending the form, template and photo credits under the footer */
.demo-note { position: absolute; left: 0; top: calc(96 * var(--c)); width: calc(294 * var(--c)); margin: 0; font: 700 calc(13 * var(--c))/1.3 var(--font-text); color: var(--ink); }
.demo-credit { width: calc(390 * var(--m)); margin: 0 auto; padding: 0 calc(20 * var(--m)) 32px; font: 400 13px/1.5 var(--font-text); color: var(--muted); }
.demo-credit p { margin: 0 0 6px; }
@media (min-width: 1180px) {
  .demo-note { top: calc(66 * var(--c)); width: calc(544 * var(--c)); font-size: calc(15 * var(--c)); }
  .demo-credit { width: calc(1440 * var(--u0)); padding: 0 calc(72 * var(--u0)) 40px; font-size: 14px; }
}