/* =====================================================================
   Rustbelt · Rock v2
   Plain CSS, no build step. Sections:
   1. Settings (colors, fonts, motion)   2. Base   3. Pieces on the table
   4. Menu   5. Phone layout (drawn on the 390 frame, scaled by --m)
   6. Desktop layout (1024 px and up, drawn on the 1440 frame, scaled by --k)
   7. Animations
   Every piece on the table is placed with five numbers taken from the design:
   --x and --y (top left corner), --w and --h (size), --r (angle).
   ===================================================================== */

/* Fonts, loaded from the fonts folder (see README to load them from Google instead) */
@font-face { font-family: "Alfa Slab One"; src: url("../../fonts/alfa-slab-one-latin.woff2") format("woff2"); font-weight: 400; 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; }
@font-face { font-family: "Special Elite"; src: url("../../fonts/special-elite-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../../fonts/courier-prime-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- 1. Settings. EDIT: colors, fonts and motion live here. */
:root {
  --table: #1f1a17;      /* the wooden table behind everything */
  --ink: #161310;        /* text on paper, buttons, footer */
  --paper: #e9dfc8;      /* setlist, polaroids, notebook, postcard, light tickets */
  --red: #b9301e;        /* cassette, red ticket, strike lines, send button */
  --mustard: #d8a21b;    /* menu labels, tickets, stickers, footer links */
  --teal: #21505a;       /* listen button, teal cassette */
  --hint: #686151;       /* form placeholders (4.6:1 on the paper) */
  --photo-hint: #e9dfc8; /* "replace with photo" text on the empty photo spots */
  --label: rgb(216 162 27 / .92); /* menu labels (mustard, a little see-through) */
  --focus: #d8a21b;      /* focus outline on the table (paper pieces use --ink) */

  --font-display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --font-hand: "Permanent Marker", "Comic Sans MS", cursive;
  --font-type: "Special Elite", "Courier New", monospace;
  --font-text: "Courier Prime", "Courier New", monospace;

  /* Motion. Durations in ms, distances in px. */
  --motion-drop: 900ms;        /* pieces dropping onto the table */
  --motion-drop-y: 28px;       /* how far above the table they start */
  --motion-drop-turn: 4deg;    /* how much they turn while landing */
  --motion-step: 120ms;        /* delay between pieces that come into view together */
  --motion-strike: 600ms;      /* the red lines crossing out played songs */
  --motion-ease: cubic-bezier(.2, .9, .25, 1.12);

  --nav-h-compact: 56px;       /* height of the slim menu bar after scrolling */

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

/* ---------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--table); color: var(--paper); font: 400 16px/1.4 var(--font-text); overflow-x: clip; }
/* the scale units (cqi) are measured on these boxes, not on <body>: a container on <body>
   would make Firefox scroll the fixed menu bar away with the page */
main, footer, .topbar { container-type: inline-size; }
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(--mustard); color: var(--ink); font: 400 18px/1.2 var(--font-hand); text-decoration: none; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.setlist, .ticket, .polaroid, .notebook, .postcard, .postit, .note, .sticker, .label, .cassette { --focus: var(--ink); }
.ticket__buy, .ticket--red { --focus: var(--paper); }
.desk-only { display: none !important; }

/* Table grain (brand art): one SVG per section, phone and desktop versions */
.section { position: relative; overflow: hidden; background: var(--table) no-repeat 0 0 / 100% 100%; }
.hero { background-image: url("../svg/m-grain-hero.svg"); }
.shows { background-image: url("../svg/m-grain-shows.svg"); }
.records { background-image: url("../svg/m-grain-discos.svg"); }
.band { background-image: url("../svg/m-grain-banda.svg"); }
.contact { background-image: url("../svg/m-grain-contato.svg"); }
.stage { position: relative; margin: 0 auto; }

/* 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.69deg, #8a7a62 0%, #2a2218 83.333%); }
.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(10 * var(--k));
  width: 92%; color: var(--photo-hint); font: 400 calc(var(--hint-fs, 12) * var(--k))/1.2 var(--font-text); text-align: center;
}
.photo-slot__hint svg { width: calc(var(--hint-icon, 52) * var(--k)); height: calc(var(--hint-icon, 52) * var(--k)); }
.photo-slot img ~ .photo-slot__hint { display: none; }

/* ---------- 3. Pieces on the table */
.pc {
  position: absolute; margin: 0;
  left: calc(var(--x) * var(--k));
  top: calc(var(--after, 0) * var(--hero-h, 0px) + var(--y) * var(--k) + var(--free, 0px) * var(--s, 0));
  width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k));
  rotate: var(--r, 0deg);
}
/* shadow under paper, plastic and vinyl (4 7 10 on phones, 6 10 14 on desktop) */
.setlist, .cassette, .ticket, .polaroid, .pick, .listen, .vinyl, .cover, .note, .notebook, .postcard, .postit, .sticker {
  --shadow: drop-shadow(calc(var(--sx) * var(--k)) calc(var(--sy) * var(--k)) calc(var(--sb) * var(--k)) rgb(0 0 0 / .45));
  filter: var(--shadow);
}
.coffee, .clip, .pin { pointer-events: none; }

/* Section titles in marker */
.shows .title, .records .title { font: 400 calc(var(--tfs) * var(--k))/1 var(--font-hand); color: var(--paper); }
.shows .title { white-space: nowrap; }

/* Hero name */
.hero .title { font: 400 calc(var(--tfs) * var(--k))/.92 var(--font-display); letter-spacing: calc(var(--tls) * var(--k)); color: var(--paper); white-space: nowrap; }

/* Setlist */
.setlist { background: var(--paper); color: var(--ink); }
.setlist__title { position: absolute; left: calc(var(--p) * var(--k)); top: calc(var(--p) * var(--k)); font: 400 calc(var(--st-fs) * var(--k))/1.3 var(--font-type); }
.setlist__songs { position: absolute; left: calc(var(--p) * var(--k)); top: calc(var(--songs-y) * var(--k)); width: calc(var(--songs-w) * var(--k)); }
.setlist__songs li { position: relative; height: calc(var(--song-step) * var(--k)); font: 400 calc(var(--song-fs) * var(--k))/1.15 var(--font-hand); }
.setlist__songs .is-played::after {
  content: ""; position: absolute; left: calc(var(--strike-x) * var(--k)); top: calc(var(--strike-y) * var(--k));
  width: calc(var(--strike-w) * var(--k)); height: calc(var(--strike-h) * var(--k)); background: var(--red); rotate: var(--strike-r); transform-origin: 0 50%;
}

/* Cassettes */
.cassette { display: block; color: var(--ink); text-decoration: none; }
.cassette__art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.cassette__label { position: absolute; left: calc(var(--cl-x) * var(--k)); top: calc(var(--cl-y) * var(--k)); width: calc(var(--cl-w) * var(--k)); font: 400 calc(var(--cl-fs) * var(--k))/1.15 var(--font-hand); }
a.cassette:hover { filter: var(--shadow) brightness(1.06); }

/* Tickets: real punched notches (the mask cuts them) and a dotted tear line */
.ticket { color: var(--ink); }
.ticket__body {
  position: absolute; inset: 0; background: var(--tk-bg, var(--mustard));
  -webkit-mask: radial-gradient(circle calc(var(--hr) * var(--k)) at 0 50%, #0000 97%, #000 100%) 0 calc(var(--h0) * var(--k)) / 51% calc(var(--hp) * var(--k)) repeat-y,
                radial-gradient(circle calc(var(--hr) * var(--k)) at 100% 50%, #0000 97%, #000 100%) 100% calc(var(--h0) * var(--k)) / 51% calc(var(--hp) * var(--k)) repeat-y;
          mask: radial-gradient(circle calc(var(--hr) * var(--k)) at 0 50%, #0000 97%, #000 100%) 0 calc(var(--h0) * var(--k)) / 51% calc(var(--hp) * var(--k)) repeat-y,
                radial-gradient(circle calc(var(--hr) * var(--k)) at 100% 50%, #0000 97%, #000 100%) 100% calc(var(--h0) * var(--k)) / 51% calc(var(--hp) * var(--k)) repeat-y;
}
.ticket__body::after { /* tear line: round dots 3 wide, every 12 */
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--perf-x) * var(--k)); width: calc(3 * var(--k));
  background: radial-gradient(closest-side, var(--ink) 99%, #0000) 0 calc(-1.5 * var(--k)) / 100% calc(6 * var(--k)) no-repeat,
              repeating-linear-gradient(var(--ink) 0 calc(6 * var(--k)), #0000 0 calc(12 * var(--k))) 0 calc(-1.5 * var(--k)) / 100% 100%;
  border-radius: calc(1.5 * var(--k));
}
.ticket--paper { --tk-bg: var(--paper); }
.ticket--red { --tk-bg: var(--red); color: var(--paper); } /* paper text on red passes AA (4.5:1); dark text did not */
.ticket__date, .ticket__city, .ticket__venue, .ticket__price, .ticket__buy { position: absolute; }
.ticket__date { left: calc(var(--tp) * var(--k)); top: calc(var(--td-y) * var(--k)); font: 400 calc(var(--td-fs) * var(--k))/1 var(--font-display); white-space: nowrap; }
.ticket__city { left: calc(var(--tp) * var(--k)); top: calc(var(--tc-y) * var(--k)); width: calc(var(--tc-w) * var(--k)); font: 400 calc(var(--tc-fs) * var(--k))/1.3 var(--font-type); }
.ticket__venue { left: calc(var(--tp) * var(--k)); top: calc(var(--tv-y) * var(--k)); width: calc(var(--tc-w) * var(--k)); font: 400 calc(var(--tv-fs) * var(--k))/1.4 var(--font-text); }
.ticket__price { left: calc(var(--ts-x) * var(--k)); top: calc(var(--tpr-y) * var(--k)); font: 400 calc(var(--tpr-fs) * var(--k))/1.15 var(--font-hand); }
.ticket__buy {
  left: calc(var(--ts-x) * var(--k)); top: calc(var(--tb-y) * var(--k)); width: calc(var(--tb-w) * var(--k)); height: calc(var(--tb-h) * var(--k));
  padding-top: calc(var(--tb-pt) * var(--k)); background: var(--ink); color: var(--paper); text-align: center; text-decoration: none;
  font: 400 calc(var(--tb-fs) * var(--k))/1.4 var(--font-text);
}
.ticket__buy:hover { background: #2c2620; }

/* Polaroids */
.polaroid { background: var(--paper); color: var(--ink); }
.polaroid .photo-slot { position: absolute; left: calc(var(--pp) * var(--k)); top: calc(var(--pp) * var(--k)); width: calc(var(--ph) * var(--k)); height: calc(var(--ph) * var(--k)); }
.polaroid__caption { position: absolute; left: calc(var(--pc-x) * var(--k)); top: calc(var(--pc-y) * var(--k)); font: 400 calc(var(--pc-fs) * var(--k))/1.15 var(--font-hand); white-space: nowrap; }

/* Brand objects */
.clip, .pick, .coffee, .vinyl { max-width: none; }
.pin { border-radius: 50%; background: #d8412f; box-shadow: inset 0 0 0 calc(var(--pin-line) * var(--k)) #8f2a1e, 0 calc(var(--pin-sy) * var(--k)) calc(var(--pin-sb) * var(--k)) rgb(0 0 0 / .55); }
.pin::after { content: ""; position: absolute; left: calc(var(--pin-hx) * var(--k)); top: calc(var(--pin-hx) * var(--k)); width: calc(var(--pin-hd) * var(--k)); height: calc(var(--pin-hd) * var(--k)); border-radius: 50%; background: #ef8a78; }

/* Round listen button */
.listen {
  display: block; border-radius: 50%; background: var(--teal); color: var(--paper); text-decoration: none; text-align: center;
  padding-top: calc(var(--li-pt) * var(--k)); font: 400 calc(var(--li-fs) * var(--k))/1.15 var(--font-hand);
}
.listen:hover { filter: var(--shadow) brightness(1.12); }

/* Records */
.cover .photo-slot { background-color: var(--teal); }
.note { background: var(--paper); color: var(--ink); padding: calc(var(--n-py) * var(--k)) calc(var(--n-px) * var(--k)); font: 400 calc(var(--n-fs) * var(--k))/1.15 var(--font-hand); }
.btn {
  display: block; background: var(--ink); color: var(--paper); border: calc(3 * var(--k)) solid var(--paper); text-align: center; text-decoration: none;
  padding-top: calc(var(--b-pt) * var(--k) - 3 * var(--k)); font: 400 calc(var(--b-fs) * var(--k))/1.15 var(--font-hand);
}
.btn:hover { background: #2c2620; }

/* Notebook */
.notebook { background: var(--paper); color: var(--ink); }
.notebook__lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.notebook__title { position: absolute; left: calc(var(--nb-x) * var(--k)); top: calc(var(--nb-ty) * var(--k)); font: 400 calc(var(--nb-tfs) * var(--k))/1 var(--font-hand); color: var(--red); white-space: nowrap; }
.notebook__text { position: absolute; left: calc(var(--nb-x) * var(--k)); top: calc(var(--nb-y) * var(--k)); width: calc(var(--nb-w) * var(--k)); font: 400 calc(var(--nb-fs) * var(--k))/1.15 var(--font-hand); }
.notebook__text p + p { margin-top: 1.15em; }
.sticker { background: var(--mustard); color: var(--ink); display: flex; align-items: center; justify-content: center; text-align: center; font: 400 calc(var(--sk-fs) * var(--k))/1.15 var(--font-hand); }

/* Postcard and form */
.postcard { background: var(--paper); color: var(--ink); }
.postcard__title { position: absolute; left: calc(var(--pc-p) * var(--k)); top: calc(var(--pc-p) * var(--k)); width: calc(var(--pt-w) * var(--k)); font: 400 calc(var(--pt-fs) * var(--k))/1 var(--font-display); }
.postcard__intro { position: absolute; left: calc(var(--pc-p) * var(--k)); top: calc(var(--pi-y) * var(--k)); width: calc(var(--pi-w) * var(--k)); font: 400 calc(var(--pi-fs) * var(--k))/1.45 var(--font-type); }
.postcard__line { position: absolute; left: calc(440 * var(--k)); top: calc(40 * var(--k)); width: calc(4 * var(--k)); height: calc(520 * var(--k)); background: var(--ink); }
.postcard__stamp { position: absolute; left: calc(686.1 * var(--k)); top: calc(24.5 * var(--k)); width: calc(150 * var(--k)); height: calc(180 * var(--k)); rotate: -4deg; max-width: none; pointer-events: none; }
.form__field {
  position: absolute; left: calc(var(--f-x) * var(--k)); width: calc(var(--f-w) * var(--k)); height: calc(var(--f-h) * var(--k));
  padding: 0 0 calc(var(--f-pb) * var(--k)); border: 0; border-bottom: calc(3 * var(--k)) solid var(--ink); border-radius: 0; background: transparent;
  font: 400 calc(var(--f-fs) * var(--k))/1.15 var(--font-hand); color: var(--ink); resize: none; overflow: hidden;
}
.form__field::placeholder { color: var(--hint); opacity: 1; }
.form__field:focus-visible { outline-offset: 4px; }
.form__field:nth-of-type(1) { top: calc(var(--f-y) * var(--k)); }
.form__field:nth-of-type(2) { top: calc((var(--f-y) + var(--f-step)) * var(--k)); }
.form__field:nth-of-type(3) { top: calc((var(--f-y) + 2 * var(--f-step)) * var(--k)); }
.form__field.form__field--msg { top: calc((var(--f-y) + 3 * var(--f-step)) * var(--k)); }
.form__send {
  position: absolute; left: calc(var(--fs-x) * var(--k)); top: calc(var(--fs-y) * var(--k)); width: calc(var(--fs-w) * var(--k)); height: calc(var(--fs-h) * var(--k));
  padding: calc(var(--fs-pt) * var(--k)) 0 0; border: 0; background: var(--red); color: var(--paper); rotate: 1.5deg; cursor: pointer;
  font: 400 calc(var(--fs-fs) * var(--k))/1.15 var(--font-hand); --focus: var(--ink);
}
.form__send:hover { background: #a32a1a; }
.postit { background: var(--mustard); color: var(--ink); text-align: center; padding: calc(var(--po-y) * var(--k)) calc(10 * var(--k)) 0; font: 400 calc(var(--po-fs) * var(--k))/1.15 var(--font-hand); }
.postit a { text-decoration: none; }
.postit a:hover { text-decoration: underline; }

/* Footer */
.footer { background: var(--ink); }
.footer__inner { position: relative; margin: 0 auto; }
.footer__copy { font: 400 calc(var(--fc-fs) * var(--k))/1.4 var(--font-text); color: var(--paper); }
.footer__links { display: flex; gap: calc(var(--fl-gap) * var(--k)); }
.footer__links a { font: 400 calc(var(--fl-fs) * var(--k))/1.15 var(--font-hand); color: var(--mustard); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }

/* ---------- 4. Menu: mustard labels at the top, a slim bar after scrolling */
.topbar { position: fixed; inset: 0 0 auto; z-index: 20; height: 0; }
.static-nav .topbar, html:not(.js) .topbar { position: absolute; }
.nav { position: relative; margin: 0 auto; height: 100%; }
.label {
  display: block; height: 100%; background: var(--label); color: var(--ink); text-decoration: none; text-align: center; white-space: nowrap;
  font: 400 calc(var(--lb-fs) * var(--k))/1.15 var(--font-hand); padding-top: calc(var(--lb-pt) * var(--k));
}
.label:hover { background: var(--mustard); translate: 0 -2px; }
.nav__logo, .nav__toggle { display: none; }
.topbar.is-scrolled { height: var(--nav-h-compact); background: rgb(22 19 16 / .94); box-shadow: 0 6px 18px rgb(0 0 0 / .35); }
.topbar.is-scrolled .nav__logo { display: block; position: absolute; top: 50%; translate: 0 -50%; font: 400 24px/1 var(--font-display); color: var(--paper); text-decoration: none; }
.topbar.is-scrolled .nav__logo::after { content: ""; position: absolute; inset: -12px -8px; } /* 44 px touch area */

/* ---------- 5. Phone layout (also tablets: the phone layout, centered) */
.section, .footer { --k: var(--m); --sx: 4; --sy: 7; --sb: 10; --hint-fs: 11; --hint-icon: 52; }
.stage, .footer__inner, .nav { width: calc(390 * var(--k)); }

/* Menu on phones: two rows of labels at the top; after scrolling, a bar with the name and a menu label */
.topbar { --k: var(--m); --lb-fs: 20; --lb-pt: 5; }
.nav__links { position: absolute; left: calc(20 * var(--k)); top: calc(24 * var(--k)); width: calc(350 * var(--k)); display: flex; flex-wrap: wrap; gap: calc(15 * var(--k)) calc(14 * var(--k)); }
.nav__links li { height: calc(33 * var(--k)); rotate: 2deg; }
.nav__links li:nth-child(even) { rotate: -2deg; }
.nav__links li:nth-child(1) { width: calc(90 * var(--k)); }
.nav__links li:nth-child(2) { width: calc(84 * var(--k)); }
.nav__links li:nth-child(3) { width: calc(70 * var(--k)); }
.nav__links li:nth-child(4) { width: calc(80 * var(--k)); }
.nav__links li:nth-child(5) { width: calc(99 * var(--k)); }
.topbar.is-scrolled .nav { padding: 0 calc(20 * var(--k)); }
.topbar.is-scrolled .nav__logo { left: calc(20 * var(--k)); }
.topbar.is-scrolled .nav__toggle {
  display: flex; align-items: center; justify-content: center; position: absolute; right: calc(20 * var(--k)); top: 50%; translate: 0 -50%; rotate: -2deg;
  width: 56px; height: 34px; padding: 0; border: 0; background: var(--label); color: var(--ink); cursor: pointer; --focus: var(--paper);
}
.nav__toggle::after { content: ""; position: absolute; inset: -5px -4px; } /* 44 px touch area */
.nav__burger { width: 22px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; overflow: visible; }
.nav__close, .nav.is-open .nav__lines { display: none; }
.nav.is-open .nav__close { display: inline; }
.topbar.is-scrolled .nav__links {
  display: none; top: var(--nav-h-compact); left: calc(-1 * (100cqi - 390 * var(--k)) / 2); width: 100cqi;
  padding: 16px calc((100cqi - 350 * var(--k)) / 2) 24px; background: rgb(22 19 16 / .97); box-shadow: 0 18px 30px rgb(0 0 0 / .4);
}
.topbar.is-scrolled .nav.is-open .nav__links { display: flex; }
.topbar.is-scrolled .nav__links li { height: 40px; }
.topbar.is-scrolled .label { font-size: 22px; padding-top: 6px; }

/* Hero: the first screen is exactly one screen high. On tall phones the extra
   space goes between the labels, the name and the setlist (--s is each piece's share). */
.hero { --hero-h: max(100svh, 690 * var(--k)); --free: calc(var(--hero-h) - 690 * var(--k)); }
.hero .stage { height: calc(var(--hero-h) + 810 * var(--k)); }
.hero .title { --tfs: 66; --tls: -.34; }
.setlist { --p: 20; --st-fs: 22; --songs-y: 70; --songs-w: 270; --song-step: 50; --song-fs: 21; --strike-x: 2; --strike-y: 18; --strike-w: 240; --strike-h: 3; --strike-r: 0deg; }
.cassette { --cl-x: 28.57; --cl-y: 50; --cl-w: 242.86; --cl-fs: 26; }
.ticket { --hr: 9.4; --hp: 38; --h0: 6.4; --perf-x: 236; --tp: 20; --td-y: 16; --td-fs: 34; --tc-y: 66; --tc-w: 210; --tc-fs: 22; --tv-y: 104; --tv-fs: 13;
  --ts-x: 248; --tpr-y: 18; --tpr-fs: 26; --tb-y: 100; --tb-w: 84; --tb-h: 40; --tb-pt: 10; --tb-fs: 14; }
.polaroid { --pp: 12; --ph: 141; --pc-x: 12; --pc-y: 160; --pc-fs: 20; }
.member { --ph: 136; --pc-y: 162; --pc-fs: 19; }
.pin { --pin-line: 2; --pin-sy: 4; --pin-sb: 5; --pin-hx: 3.85; --pin-hd: 6.3; }
.listen { --li-pt: 40; --li-fs: 28; }

.shows .stage { height: calc(1440 * var(--k)); }
.shows .title { --tfs: 48; }
.guest { font: 400 calc(28 * var(--k))/1.15 var(--font-hand); color: var(--mustard); }

.records .stage { height: calc(1328 * var(--k)); }
.records .title { --tfs: 48; }
.note { --n-py: 18; --n-px: 16; --n-fs: 22; }
.btn { --b-pt: 12; --b-fs: 28; }

.band .stage { height: calc(1500 * var(--k)); }
.notebook { --nb-x: 56; --nb-ty: 6; --nb-tfs: 42; --nb-y: 62; --nb-w: 280; --nb-fs: 20; }
.sticker { --sk-fs: 21; }

.contact .stage { height: calc(980 * var(--k)); }
.postcard { --pc-p: 20; --pt-w: 310; --pt-fs: 34; --pi-y: 76; --pi-w: 310; --pi-fs: 16;
  --f-x: 20; --f-w: 310; --f-y: 190; --f-step: 84; --f-h: 47; --f-pb: 16.4; --f-fs: 24;
  --fs-x: 19.2; --fs-y: 542.6; --fs-w: 200; --fs-h: 56; --fs-pt: 10; --fs-fs: 30; }
.postit { --po-y: 60; --po-fs: 24; }

.footer__inner { height: calc(150 * var(--k)); padding: calc(30 * var(--k)) calc(20 * var(--k)) 0; --fc-fs: 14; --fl-fs: 24; --fl-gap: 27; }
.footer__links { margin-top: calc(14 * var(--k)); }

/* phone positions */
.hero .title { --x: 18.2; --y: 157.7; --w: 294; --h: 61; --r: 3deg; --s: .35; }
.hero .setlist { --x: 13.3; --y: 267.6; --w: 300; --h: 400; --r: 3deg; --s: .7; }
.hero .pin--setlist { --x: 155.9; --y: 257.9; --w: 18.2; --h: 18.2; --r: 0deg; --s: .7; }
/* the rest of the hero, below the first screen (y counted from the end of the first screen) */
.hero .cassette--hero { --x: 66.4; --y: -0.7; --w: 300; --h: 192.86; --r: -4deg; --after: 1; }
.hero .ticket--hero { --x: 19.3; --y: 218.8; --w: 340; --h: 170; --r: 3deg; --after: 1; }
.hero .polaroid--a { --x: 32.4; --y: 412.4; --w: 165; --h: 200; --r: -5deg; --after: 1; }
.hero .polaroid--b { --x: 192.8; --y: 455.5; --w: 165; --h: 200; --r: 4deg; --after: 1; }
.hero .listen { --x: 198.8; --y: 649.7; --w: 150; --h: 150; --r: 8deg; --after: 1; }
.hero .clip--a { --x: 90.5; --y: 389.0; --w: 30.8; --h: 42; --r: -5deg; --after: 1; }
.hero .clip--b { --x: 267.1; --y: 432.0; --w: 30.8; --h: 42; --r: 4deg; --after: 1; }
.hero .pick, .hero .coffee { display: none; }
.shows .title { --x: 19.1; --y: 46.1; --w: 350; --h: 48; --r: 2deg; }
.shows .ticket:nth-child(1) { --x: 20.1; --y: 157.3; --w: 340; --h: 170; --r: 2.5deg; }
.shows .ticket:nth-child(2) { --x: 37.5; --y: 362.5; --w: 340; --h: 170; --r: -2.5deg; }
.shows .ticket:nth-child(3) { --x: 20.1; --y: 597.3; --w: 340; --h: 170; --r: 2.5deg; }
.shows .ticket:nth-child(4) { --x: 37.5; --y: 802.5; --w: 340; --h: 170; --r: -2.5deg; }
.shows .ticket:nth-child(5) { --x: 20.1; --y: 1037.3; --w: 340; --h: 170; --r: 2.5deg; }
.shows .guest { --x: 22.1; --y: 1298.3; --w: 320; --h: 64; --r: 3deg; }
.records .title { --x: 21.2; --y: 35.4; --w: 350; --h: 96; --r: -1.5deg; }
.records .cassette--teal { --x: 32.9; --y: 178.2; --w: 300; --h: 192.86; --r: 4deg; }
.records .cassette--mustard { --x: 54.8; --y: 390.0; --w: 300; --h: 192.86; --r: -3deg; }
.records .vinyl--red { --x: 20.0; --y: 648.0; --w: 220; --h: 220; --r: 0deg; }
.records .cover { --x: 138.4; --y: 728.4; --w: 210; --h: 210; --r: 6deg; }
.records .note { --x: 41.8; --y: 952.7; --w: 300; --h: 110; --r: -2deg; }
.records .btn--listen { --x: 28.9; --y: 1122.5; --w: 260; --h: 60; --r: 2deg; }
.records .btn--vinyl { --x: 30.7; --y: 1194.6; --w: 260; --h: 60; --r: -1.5deg; }
.band .notebook { --x: 8.7; --y: 45.9; --w: 350; --h: 640; --r: 2deg; }
.band .pin--notebook { --x: 190.9; --y: 35.9; --w: 18.2; --h: 18.2; --r: 0deg; }
.band .member:nth-child(1) { --x: 29.8; --y: 724.1; --w: 160; --h: 230; --r: -4deg; }
.band .member:nth-child(2) { --x: 193.9; --y: 734.0; --w: 160; --h: 230; --r: 3deg; }
.band .member:nth-child(3) { --x: 13.8; --y: 1005.3; --w: 160; --h: 230; --r: 4deg; }
.band .member:nth-child(4) { --x: 205.9; --y: 995.7; --w: 160; --h: 230; --r: -3deg; }
.band .clip--a { --x: 86.2; --y: 700.6; --w: 30.8; --h: 42; --r: -4deg; }
.band .clip--b { --x: 264.6; --y: 710.4; --w: 30.8; --h: 42; --r: 3deg; }
.band .clip--c { --x: 86.6; --y: 981.8; --w: 30.8; --h: 42; --r: 4deg; }
.band .clip--d { --x: 264.3; --y: 972.0; --w: 30.8; --h: 42; --r: -3deg; }
.band .sticker { --x: 96.6; --y: 1338.6; --w: 200; --h: 70; --r: 5deg; }
.contact .postcard { --x: 11.8; --y: 54.5; --w: 350; --h: 620; --r: 1.5deg; }
.contact .postit { --x: 64.8; --y: 722.8; --w: 270; --h: 190; --r: -3deg; }

/* ---------- 6. Desktop layout (1024 px and up). Every section fits one screen:
   the layout scales by the smaller of width and height (--k), never below 60 % of the width scale. */
@media (min-width: 1024px) {
  :root { --nav-h-compact: 64px;
    --kh: max(min(var(--u0), 100svh / 1180), var(--u0) * .6);   /* hero */
    --kc: max(min(var(--u0), 100svh / 1010), var(--u0) * .6); }  /* contact with the footer */
  .desk-only { display: revert !important; }
  .phone-only { display: none !important; }
  .section, .footer { --k: max(min(var(--u0), 100svh / 1000), var(--u0) * .6); --sx: 6; --sy: 10; --sb: 14; --hint-fs: 13; --hint-icon: 56; }
  .hero { --k: var(--kh); --hero-h: 0px; --free: 0px; height: max(100svh, 1180 * var(--k)); background-image: url("../svg/grain-hero.svg"); }
  .contact, .footer { --k: var(--kc); }
  .shows { background-image: url("../svg/grain-shows.svg"); }
  .records { background-image: url("../svg/grain-discos.svg"); }
  .band { background-image: url("../svg/grain-banda.svg"); }
  .contact { background-image: url("../svg/grain-contato.svg"); }
  .stage, .footer__inner { width: calc(1440 * var(--k)); }
  .hero .pc { --after: 0; --s: 0; }
  .hero .stage { height: calc(1180 * var(--k)); }
  .hero .pick, .hero .coffee { display: block; }
  .shows .stage, .records .stage, .band .stage { height: calc(1000 * var(--k)); }
  .contact .stage { height: calc(900 * var(--k)); }
  /* on screens wider than the design (or taller), the table fills the screen and the pieces stay centered */
  .shows, .records, .band, .contact { display: flex; flex-direction: column; justify-content: center; }
  .shows, .records, .band { min-height: 100svh; }
  .contact { min-height: calc(100svh - 110 * var(--k)); }
  .stage { flex: none; }

  /* Menu on desktop: the labels sit on the table; after scrolling they line up in the bar */
  .topbar { --k: var(--kh); --lb-fs: 26; --lb-pt: 6; }
  .nav { width: calc(1440 * var(--k)); }
  .nav__links { position: static; display: block; width: auto; }
  .nav__links li { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); rotate: var(--r); }
  .nav__links li:nth-child(1) { --x: 69.0; --y: 42.6; --w: 118; --h: 42; --r: 2.5deg; }
  .nav__links li:nth-child(2) { --x: 270.9; --y: 45.6; --w: 110; --h: 42; --r: -2.5deg; }
  .nav__links li:nth-child(3) { --x: 449.0; --y: 58.0; --w: 92; --h: 42; --r: 2.5deg; }
  .nav__links li:nth-child(4) { --x: 650.9; --y: 37.7; --w: 105; --h: 42; --r: -2.5deg; }
  .nav__links li:nth-child(5) { --x: 829.0; --y: 50.8; --w: 130; --h: 42; --r: 2.5deg; }
  .topbar.is-scrolled .nav { width: min(100%, calc(1440 * var(--u0))); padding: 0 calc(70 * var(--u0)); }
  .topbar.is-scrolled .nav__logo { left: calc(70 * var(--u0)); font-size: 30px; }
  .topbar.is-scrolled .nav__toggle { display: none; }
  .topbar.is-scrolled .nav__links,
  .topbar.is-scrolled .nav.is-open .nav__links {
    display: flex; position: absolute; right: calc(70 * var(--u0)); left: auto; top: 50%; translate: 0 -50%; width: auto;
    padding: 0; gap: 14px; background: none; box-shadow: none;
  }
  .topbar.is-scrolled .nav__links li { position: relative; left: auto; top: auto; width: auto; height: 36px; }
  .topbar.is-scrolled .label { font-size: 22px; padding: 4px 14px 0; }

  .hero .title { --tfs: 196; --tls: -1; }
  .setlist { --p: 30; --st-fs: 28; --songs-y: 100; --songs-w: 380; --song-step: 66; --song-fs: 30; --strike-x: 4; --strike-y: 22; --strike-w: 340; --strike-h: 4; --strike-r: 1deg; }
  .cassette { --cl-x: 52; --cl-y: 74; --cl-w: 316; --cl-fs: 32; }
  .ticket { --hr: 11; --hp: 42; --h0: 10; --perf-x: 400; --tp: 28; --td-y: 22; --td-fs: 50; --tc-y: 92; --tc-w: 360; --tc-fs: 30; --tv-y: 146; --tv-fs: 16;
    --ts-x: 420; --tpr-y: 26; --tpr-fs: 34; --tb-y: 130; --tb-w: 130; --tb-h: 48; --tb-pt: 13; --tb-fs: 18; }
  .polaroid { --pp: 18; --ph: 224; --pc-x: 20; --pc-y: 254; --pc-fs: 28; }
  .member { --ph: 214; --pc-x: 18; --pc-y: 244; --pc-fs: 26; }
  .pin { --pin-line: 2; --pin-sy: 4; --pin-sb: 5; --pin-hx: 5.5; --pin-hd: 9; }
  .listen { --li-pt: 76; --li-fs: 42; }
  .shows .title, .records .title { --tfs: 84; }
  .records .title { white-space: nowrap; }
  .guest { font-size: calc(34 * var(--k)); }
  .note { --n-py: 24; --n-px: 20; --n-fs: 26; }
  .btn { --b-pt: 14; --b-fs: 32; }
  .notebook { --nb-x: 100; --nb-ty: 10; --nb-tfs: 72; --nb-y: 100; --nb-w: 500; --nb-fs: 28; }
  .sticker { --sk-fs: 32; }
  .postcard { --pc-p: 40; --pt-w: 380; --pt-fs: 58; --pi-y: 200; --pi-w: 370; --pi-fs: 21;
    --f-x: 470; --f-w: 340; --f-y: 100; --f-step: 100; --f-h: 53; --f-pb: 18; --f-fs: 28;
    --fs-x: 469.1; --fs-y: 503.1; --fs-w: 240; --fs-h: 64; --fs-pt: 12; --fs-fs: 36; }
  .postit { --po-y: 80; --po-fs: 28; }
  .footer__inner { height: calc(110 * var(--k)); padding: 0 calc(70 * var(--k)); display: flex; align-items: center; justify-content: space-between; --fc-fs: 18; --fl-fs: 30; --fl-gap: 33; }
  .footer__copy { margin-top: calc(-1 * var(--k)); }
  .footer__links { margin-top: calc(-11 * var(--k)); }

  /* desktop positions */
  .hero .title { --x: 54.7; --y: 132.7; --w: 871; --h: 180; --r: 3deg; }
  .hero .setlist { --x: 55.1; --y: 480.9; --w: 430; --h: 560; --r: 3deg; }
  .hero .cassette--hero { --x: 571.0; --y: 411.2; --w: 420; --h: 270; --r: -5deg; }
  .hero .ticket--hero { --x: 512.0; --y: 779.3; --w: 560; --h: 210; --r: 4deg; }
  .hero .polaroid--a { --x: 1075.5; --y: 105.6; --w: 260; --h: 310; --r: -6deg; }
  .hero .polaroid--b { --x: 1166.0; --y: 480.7; --w: 260; --h: 310; --r: 5deg; }
  .hero .pick { --x: 980.3; --y: 224.7; --w: 110; --h: 130; --r: -22deg; }
  .hero .listen { --x: 1131.4; --y: 876.2; --w: 250; --h: 250; --r: 8deg; }
  .hero .coffee { --x: 820.0; --y: 40.0; --w: 260; --h: 260; --r: 0deg; }
  .hero .clip--a { --x: 1166.9; --y: 72.4; --w: 44; --h: 60; --r: -6deg; }
  .hero .clip--b { --x: 1287.9; --y: 447.3; --w: 44; --h: 60; --r: 5deg; }
  .hero .pin--setlist { --x: 252.0; --y: 465.0; --w: 26; --h: 26; --r: 0deg; }
  .shows .title { --x: 68.3; --y: 80.6; --w: 609; --h: 84; --r: 2deg; }
  .shows .ticket:nth-child(1) { --x: 64.1; --y: 274.5; --w: 560; --h: 210; --r: 3deg; }
  .shows .ticket:nth-child(2) { --x: 744.3; --y: 217.7; --w: 560; --h: 210; --r: -2.5deg; }
  .shows .ticket:nth-child(3) { --x: 113.5; --y: 510.2; --w: 560; --h: 210; --r: -2deg; }
  .shows .ticket:nth-child(4) { --x: 695.2; --y: 512.1; --w: 560; --h: 210; --r: 2.5deg; }
  .shows .ticket:nth-child(5) { --x: 397.2; --y: 777.3; --w: 560; --h: 210; --r: 1.5deg; }
  .shows .guest { --x: 996.8; --y: 833.2; --w: 380; --h: 78; --r: 4deg; }
  .records .title { --x: 71.0; --y: 50.4; --w: 731; --h: 84; --r: -1.5deg; }
  .records .cassette--teal { --x: 80.1; --y: 234.3; --w: 420; --h: 270; --r: 4deg; }
  .records .cassette--mustard { --x: 706.8; --y: 178.8; --w: 420; --h: 270; --r: -3deg; }
  .records .vinyl--red { --x: 1040.0; --y: 160.0; --w: 330; --h: 330; --r: 0deg; }
  .records .cover { --x: 781.8; --y: 436.3; --w: 330; --h: 330; --r: 6deg; }
  .records .vinyl--mustard { --x: 160.0; --y: 560.0; --w: 320; --h: 320; --r: 0deg; }
  .records .note { --x: 522.9; --y: 634.7; --w: 300; --h: 170; --r: -2deg; }
  .records .btn--listen { --x: 108.7; --y: 865.2; --w: 300; --h: 70; --r: 2deg; }
  .records .btn--vinyl { --x: 500.9; --y: 856.1; --w: 300; --h: 70; --r: -1.5deg; }
  .band .notebook { --x: 55.8; --y: 90.9; --w: 640; --h: 800; --r: 2deg; }
  .band .pin--notebook { --x: 357.0; --y: 74.0; --w: 26; --h: 26; --r: 0deg; }
  .band .member:nth-child(1) { --x: 812.6; --y: 88.5; --w: 250; --h: 300; --r: -5deg; }
  .band .member:nth-child(2) { --x: 1079.2; --y: 208.4; --w: 250; --h: 300; --r: 4deg; }
  .band .member:nth-child(3) { --x: 832.0; --y: 476.3; --w: 250; --h: 300; --r: 3deg; }
  .band .member:nth-child(4) { --x: 1130.2; --y: 530.9; --w: 250; --h: 300; --r: -4deg; }
  .band .sticker { --x: 894.7; --y: 841.8; --w: 230; --h: 90; --r: 6deg; }
  .band .clip--a { --x: 902.2; --y: 55.1; --w: 44; --h: 60; --r: -5deg; }
  .band .clip--b { --x: 1193.0; --y: 174.7; --w: 44; --h: 60; --r: 4deg; }
  .band .clip--c { --x: 943.0; --y: 442.6; --w: 44; --h: 60; --r: 3deg; }
  .band .clip--d { --x: 1222.4; --y: 497.3; --w: 44; --h: 60; --r: -4deg; }
  .contact .postcard { --x: 109.3; --y: 114.8; --w: 860; --h: 600; --r: 2deg; }
  .contact .postit { --x: 1072.5; --y: 186.4; --w: 300; --h: 300; --r: -5deg; }
}

/* ---------- 7. Animations. Pieces drop onto the table when they come into view
   (main.js adds "rs-reveal" to <html> and "is-in" to each piece). Without
   JavaScript, or with class="no-motion" on <html>, everything is simply there. */
.rs-reveal [data-reveal] {
  opacity: 0; translate: 0 calc(-1 * var(--motion-drop-y)); transform: rotate(var(--motion-drop-turn)) scale(1.04);
  transition: opacity var(--motion-drop) ease-out, translate var(--motion-drop) var(--motion-ease), transform var(--motion-drop) var(--motion-ease);
  transition-delay: calc(var(--i, 0) * var(--motion-step));
}
.rs-reveal [data-reveal]:nth-child(even) { transform: rotate(calc(-1 * var(--motion-drop-turn))) scale(1.04); }
.rs-reveal .stage [data-reveal].is-in, .rs-reveal .tickets [data-reveal].is-in, .rs-reveal .members [data-reveal].is-in { opacity: 1; translate: none; transform: none; }
.rs-reveal .setlist .is-played::after { scale: 0 1; transition: scale var(--motion-strike) ease-out calc(var(--motion-drop) + var(--i, 0) * var(--motion-step)); }
.rs-reveal .setlist.is-in .is-played:last-child::after, .rs-reveal .setlist.is-in .is-played::after { scale: 1 1; }
.rs-reveal .setlist.is-in .is-played ~ .is-played::after { transition-delay: calc(var(--motion-drop) + var(--motion-strike) + var(--i, 0) * var(--motion-step)); }
/* used by main.js for a moment while it measures where an anchor link should stop */
.rs-still [data-reveal], .rs-still .is-played::after { transition: none !important; }
.rs-measure [data-reveal] { translate: none !important; transform: none !important; }

/* DEMO ONLY: note after sending the form, template and photo credits under the footer */
.demo-note { position: absolute; left: calc(20 * var(--k)); top: calc(146 * var(--k)); width: calc(310 * var(--k)); margin: 0; font: 700 calc(14 * var(--k))/1.3 var(--font-text); color: var(--red); }
.demo-credit { width: calc(390 * var(--k)); margin: 0 auto; padding: 0 calc(20 * var(--k)) 28px; font: 400 13px/1.5 var(--font-text); color: var(--paper); opacity: .8; }
.demo-credit p { margin: 0 0 6px; }
@media (min-width: 1024px) {
  .demo-note { left: calc(40 * var(--k)); top: calc(300 * var(--k)); width: calc(370 * var(--k)); font-size: calc(17 * var(--k)); }
  .demo-credit { width: calc(1440 * var(--k)); padding: 0 calc(70 * var(--k)) 32px; font-size: 14px; }
}