/* =========================================================================
   CHARLES B / WHEN CLASSICAL MEETS TECHNO
   One uniform bone page, ink type. No dark sections. Bone is a near-neutral
   light grey (232/231/229): the warm sepia cast it used to carry is gone.

   Type rules
     · Titles           → Anton, with the 3rd letter in Amador (see title() in PHP)
     · CLASSICAL/TECHNO → Helvetica Now Display ExtraBold
     · When / Meets     → Rama Gothic E
     · Running text     → Rama Gothic E
   ========================================================================= */

/* ------------------------------ 1. FONTS ------------------------------ */
@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.woff2") format("woff2"),
       url("../fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amador";
  src: url("../fonts/Amador-W01-Regular.woff2") format("woff2"),
       url("../fonts/Amador-W01-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-ExtraBold.woff2") format("woff2"),
       url("../fonts/HelveticaNowDisplay-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rama Gothic";
  src: url("../fonts/Rama-Gothic-E-W01-Regular.woff2") format("woff2"),
       url("../fonts/Rama-Gothic-E-W01-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ------------------------------ 2. TOKENS ----------------------------- */
:root {
  --ink:   #0b0b0b;
  --bone:  #e8e7e5;
  --paper: #ffffff;
  --ash:   #7a7876;

  --fg: var(--ink);          /* ink on bone, everywhere on the site */
  --bg: var(--bone);
  --line: rgba(11, 11, 11, .18);

  --anton: "Anton", "Arial Narrow", Impact, sans-serif;
  --amador: "Amador", "Times New Roman", serif;
  --hnd: "Helvetica Now Display", Helvetica, Arial, sans-serif;
  --rama: "Rama Gothic", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(18px, 4.4vw, 72px);
  --nav-h: clamp(58px, 8vw, 82px);
  --sect-y: clamp(72px, 11vw, 168px);
  --ease: cubic-bezier(.16, .84, .28, 1);
}

/* ------------------------------ 3. BASE ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--rama);
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 1.42;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg, picture, video { display: block; max-width: 100%; }
img {
  height: auto;
  /* The photography is not free to take: no drag-out, no long-press "Save
     image" on iOS, and pointer-events:none puts the right-click on the
     container so the browser offers no image entry in the menu. Nothing on
     this site needs a click on an <img>, so this costs no behaviour. */
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--ink); color: var(--bone); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%);
  background: var(--ink); color: var(--bone);
  padding: 10px 16px; font-family: var(--hnd); font-weight: 800;
}
.skip-link:focus { transform: none; }

/* Grain: a touch of print texture over the whole page. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------ 4. TYPE ------------------------------- */
.wrap { width: 100%; margin: 0 auto; padding-inline: var(--gutter); max-width: 1760px; }

/* Anton caps measure 344/400 em, Amador caps 300/400 em, so 1.146 makes the
   substituted letter exactly as tall as the letters around it. */
.amador {
  font-family: var(--amador);
  font-style: normal;
  font-size: 1.146em;
  letter-spacing: .012em;
}

.h-display, .h-section {
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.005em;
  margin: 0;
}
.h-display { font-size: clamp(3.4rem, 15vw, 12rem); }
.h-section { font-size: clamp(2.9rem, 10.5vw, 9rem); }
.h-sub {
  font-family: var(--anton);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: .95;
  letter-spacing: .002em;
  margin: 0;
}

.eyebrow {
  font-family: var(--rama);
  text-transform: uppercase;
  font-size: clamp(.72rem, 1.1vw, .92rem);
  letter-spacing: .34em;
  color: rgba(11, 11, 11, .55);
  margin: 0 0 1.1em;
  display: flex; align-items: center; gap: .8em;
}
.eyebrow::before {
  content: ""; width: clamp(24px, 4vw, 64px); height: 1px;
  background: currentColor; flex: none; opacity: .8;
}

.lede {
  font-family: var(--rama);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  line-height: 1.34;
  max-width: 46ch;
  color: rgba(11, 11, 11, .74);
}

/* The moto, with its own typographic signature. */
.moto {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: .32em;
  text-transform: uppercase; line-height: 1;
}
.moto__rama { font-family: var(--rama); font-weight: 400; letter-spacing: .06em; }
.moto__hnd  { font-family: var(--hnd);  font-weight: 800; letter-spacing: -.018em; }

/* ---------------------------- 5. BUTTONS ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: clamp(.85em, 1.5vw, 1.05em) clamp(1.4em, 2.6vw, 2.1em);
  border: 1.5px solid var(--fg);
  color: var(--fg);
  font-family: var(--hnd); font-weight: 800;
  font-size: clamp(.78rem, 1.05vw, .95rem);
  letter-spacing: .1em; text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .38s var(--ease);
  text-align: center;
}
/* The wipe uses --fg, not currentColor: currentColor changed on hover at the
   same time, which made the fill and the label vanish together. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fg);
  transform: translateY(101%);
  transition: transform .42s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--bg); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid::before { background: var(--bg); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--fg); }
.btn--full { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .38; pointer-events: none; }
.btn__icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

.btn-row { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 16px); }

/* Text link with an underline that redraws on hover. */
.link {
  font-family: var(--hnd); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; font-size: clamp(.75rem, 1vw, .88rem);
  display: inline-flex; align-items: center; gap: .6em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: .25em;
  transition: background-size .4s var(--ease);
}
.link:hover { background-size: 0% 1.5px; background-position: 100% 100%; }

/* ------------------------------ 6. NAV -------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 48px);
  padding-inline: var(--gutter);
  color: var(--ink);
  transition: background-color .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--stuck {
  background: rgba(232, 231, 229, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav__home { display: flex; align-items: center; flex: none; }
.nav__logo { height: clamp(15px, 1.75vw, 22px); width: auto; }
.nav__links {
  display: flex; align-items: center; gap: clamp(22px, 2.8vw, 48px);
  margin-inline-start: auto;
}
.nav__link {
  font-family: var(--anton); text-transform: uppercase;
  font-size: clamp(.9rem, 1.15vw, 1.05rem); letter-spacing: .04em;
  position: relative; padding-block: 6px;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .4s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav__burger {
  display: none; margin-inline-start: auto;
  width: 46px; height: 46px; margin-right: -12px;
  position: relative; z-index: 2;
}
/* Weighted to sit with the display type rather than disappear next to it:
   2.8px bars, 26px wide, centred in the 46px hit area (10 + 26 + 10). The two
   bars are 8px apart, so ±4px on open lands them both on the same line for
   the cross. */
.nav__burger span {
  position: absolute; left: 10px; width: 26px; height: 2.8px; background: currentColor;
  transition: transform .38s var(--ease), opacity .28s var(--ease);
}
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 25px; }
body.is-menu-open .nav__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.is-menu-open .nav__burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
body.is-menu-open .nav { background: transparent; border-bottom-color: transparent; }

.menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bone);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 6vh) var(--gutter) 6vh;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .62s var(--ease), visibility 0s linear .62s;
  visibility: hidden;
}
body.is-menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s, 0s; }
.menu__list { list-style: none; margin: 0; padding: 0; }
/* The padding keeps Amador's descending flourish inside the clipping box. */
.menu__list li { overflow: hidden; padding-bottom: .14em; margin-bottom: -.1em; }
.menu__link {
  display: block; font-family: var(--anton); text-transform: uppercase;
  font-size: clamp(2.6rem, 13vw, 5rem); line-height: 1.06;
  transform: translateY(105%); transition: transform .55s var(--ease);
}
body.is-menu-open .menu__link { transform: translateY(0); }
.menu__list li:nth-child(2) .menu__link { transition-delay: .05s; }
.menu__list li:nth-child(3) .menu__link { transition-delay: .1s; }
.menu__list li:nth-child(4) .menu__link { transition-delay: .15s; }
.menu__foot { margin-top: auto; padding-top: 8vh; display: grid; gap: 18px; }
.menu__moto { font-size: clamp(1rem, 4.2vw, 1.5rem); justify-content: flex-start; }

/* ------------------------------ 7. HERO ------------------------------- */
.hero {
  position: relative;
  /* isolate + an opaque ground of its own: the photo below blends against
     THIS background, so the hero must paint it rather than inherit it. */
  isolation: isolate;
  background: var(--bone);
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(10px, 2vw, 28px)) var(--gutter) clamp(22px, 4vw, 46px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hero__stage { position: relative; flex: 1 1 auto; min-height: 38svh; }
.hero__wordmark {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(90vw, 1440px); height: auto; color: var(--ink);
  opacity: .96; pointer-events: none;
}
/* darken, not multiply: it takes the per-channel minimum of the photo and the
   bone ground. The studio backdrop is brighter than bone in every channel, so
   it collapses to exactly bone and vanishes, while everything darker than bone
   — skin, hair, denim, bench, sneakers — passes through at its true value and
   the photo is not tinted. multiply darkened every pixel by the bone and had to
   be fed a tone curve that blew out the shirt and the skin; both are gone.
   Only the edge fade is still baked into the picture by tools/build-assets.sh,
   so there is no CSS mask to keep aligned. object-fit then guarantees the photo
   keeps its proportions at any viewport, and nothing in the stage opens a
   stacking context (no z-index, no containment), which is what lets the blend
   reach the bone ground and the wordmark underneath. */
.hero__photo { position: absolute; inset: 0; }
.hero__photo picture { display: contents; }
.hero__photo img {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain; object-position: bottom center;
  mix-blend-mode: darken;
}
.hero__foot {
  position: relative; z-index: 3;
  display: grid; gap: clamp(16px, 2.6vw, 28px); justify-items: center;
  text-align: center;
  padding-top: clamp(16px, 3vw, 34px);
}
.hero__moto { font-size: clamp(1.05rem, 3.3vw, 2.6rem); }
.hero__actions { justify-content: center; }

/* ----------------------------- 8. TICKER ------------------------------ */
/* The only inverted block on the site: the moto banner runs white on black. */
.ticker {
  background: var(--ink);
  color: var(--paper);
  --fg: var(--paper); --bg: var(--ink);
  overflow: hidden; padding-block: clamp(14px, 1.9vw, 26px);
  position: relative;
}
.ticker__track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 46px);
  padding-inline: clamp(20px, 3vw, 46px);
  font-size: clamp(1.15rem, 2.6vw, 2.1rem);
  white-space: nowrap;
}
.ticker__item::after {
  content: ""; width: clamp(9px, 1.2vw, 14px); height: clamp(9px, 1.2vw, 14px);
  background: currentColor; border-radius: 50%; flex: none;
}
@keyframes slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ----------------------------- 8b. COUNTS ----------------------------- */
/* The audience strip sits directly under the inverted ticker. It belongs to the
   banner, not to TOUR, so it carries its own short padding instead of a full
   --sect-y, and it stays on bone: the ticker is the only inverted block on the
   site. The hairline underneath separates it from the first section. */
.stats {
  padding-block: clamp(22px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2vw, 40px);
}
.stat { margin: 0; text-align: center; position: relative; }
/* Divider between cells, centred in the gap, never before the first one. */
.stat + .stat::before {
  content: "";
  position: absolute; top: 50%; left: calc(-0.5 * clamp(10px, 2vw, 40px));
  transform: translateY(-50%);
  width: 1px; height: 64%; background: var(--line);
}
.stat__value {
  display: block;
  font-family: var(--hnd); font-weight: 800;
  /* vw-driven on phones so three cells always fit side by side: at 360px the
     widest token, 300K, takes about 60px of a 105px cell. */
  font-size: clamp(1.5rem, 6.4vw, 4.1rem);
  line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__label {
  display: block; margin-top: .72em;
  font-family: var(--rama); text-transform: uppercase;
  font-size: clamp(.66rem, 1vw, .84rem); letter-spacing: .26em;
  color: var(--ash); line-height: 1;
}

/* ---------------------------- 9. SECTIONS ----------------------------- */
.section { padding-block: var(--sect-y); position: relative; }
/* Anchor links must clear the fixed bar. */
.section, .hero, .footer { scroll-margin-top: calc(var(--nav-h) + 6px); }
.section + .section { padding-top: 0; }
/* The footer already brings its own top padding and a rule above it, so a full
   --sect-y underneath the last section stacked on top of that: up to 268px of
   empty page between the social row and the footer links. Keep a breath, not a
   gap. */
main > .section:last-child { padding-bottom: clamp(28px, 3.5vw, 56px); }
.section__head {
  display: grid; gap: clamp(14px, 2vw, 26px);
  grid-template-columns: 1fr; align-items: end;
  margin-bottom: clamp(28px, 4.6vw, 64px);
}
@media (min-width: 900px) {
  .section__head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 34ch); }
  .section__head--split .section__aside { justify-self: end; text-align: right; }
}
.section__aside { display: grid; gap: 18px; justify-items: start; }
@media (min-width: 900px) { .section__aside { justify-items: end; } }

/* ----------------------------- 10. TOUR ------------------------------- */
.tour-tools {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
.chip {
  border: 1px solid var(--line); padding: .55em 1em;
  font-family: var(--hnd); font-weight: 800; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.tour-list { border-top: 1px solid var(--line); }
/* Date left, city next, venue flush right: with no ticket button to anchor it,
   the row justifies itself across the full measure instead of trailing off. */
.tour-row {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr) minmax(0, auto);
  gap: clamp(12px, 3vw, 48px);
  padding-block: clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* No hover state on purpose: the rows are informative, not clickable, since
   there is no ticket link behind them, and a highlight that follows the cursor
   reads as an affordance that leads nowhere. */
.tour-row.is-hidden { display: none; }
.tour-row__date {
  font-family: var(--anton); text-transform: uppercase;
  font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
}
.tour-row__date span {
  display: block; font-family: var(--rama); font-size: .74rem;
  letter-spacing: .22em; color: var(--ash); margin-top: 7px;
}
.tour-row__city {
  font-family: var(--hnd); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.9vw, 1.65rem); letter-spacing: -.015em; line-height: 1.05;
}
/* The venue is the third piece of information a visitor scans, so it is set
   larger and darker than a caption: readable, still clearly secondary. */
.tour-row__venue {
  font-family: var(--rama); text-transform: uppercase; letter-spacing: .08em;
  font-size: clamp(1rem, 1.35vw, 1.2rem); color: rgba(11, 11, 11, .72);
  justify-self: end; text-align: right; line-height: 1.2;
}
.tour-empty { padding-block: clamp(28px, 5vw, 60px); text-align: center; color: var(--ash); text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; }
.tour-more { display: flex; justify-content: center; margin-top: clamp(24px, 3.4vw, 44px); }

/* ---------------------------- 11. MERCH ------------------------------- */
.merch-grid {
  display: grid; gap: clamp(16px, 2.2vw, 30px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.card { display: flex; flex-direction: column; height: 100%; }
.card__media {
  position: relative; overflow: hidden;
  background: rgba(11, 11, 11, .045);
  aspect-ratio: 4 / 5;
  box-shadow: inset 0 0 0 1px var(--line);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--ink); color: var(--bone);
  font-family: var(--hnd); font-weight: 800; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; padding: .45em .7em;
}
/* Column layout + margin-top:auto keeps every ADD TO BAG on the same line
   across a row of cards, whatever the product name wraps to. */
.card__body { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; flex: 1 1 auto; }
.card__body > .btn { margin-top: auto; }
.card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card__title {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--hnd); font-weight: 800;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.06; letter-spacing: -.02em;
  text-transform: uppercase;
}
.card__price { font-family: var(--hnd); font-weight: 800; font-size: clamp(.95rem, 1.3vw, 1.1rem); white-space: nowrap; flex: none; }
.card__sizes { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.size {
  border: 1px solid var(--line); padding: .42em .7em;
  font-family: var(--rama); text-transform: uppercase; letter-spacing: .1em;
  font-size: .78rem; line-height: 1; cursor: pointer; position: relative;
  transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.size:has(input:checked) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.size:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
.size--out { opacity: .34; cursor: not-allowed; text-decoration: line-through; }
/* Fallback for engines without :has(): JS mirrors the state on the label. */
.size.is-checked { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.card__note {
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ash);
  min-height: 1.2em;
}
.store-note {
  margin-top: clamp(22px, 3vw, 40px);
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  border-top: 1px solid var(--line); padding-top: clamp(16px, 2vw, 26px);
  font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ash);
}

/* --------------------------- 12. PARTNERS ----------------------------- */
/* Editorial, not a shop: one wide split block per partner, photo on one side
   and the pitch on the other, so a single card never reads as a lonely product
   tile in the merch grid. Sides alternate if a second partner is added. */
.partner-list { display: grid; gap: clamp(34px, 5vw, 72px); border-top: 1px solid var(--line); }
.partner {
  display: grid; gap: clamp(20px, 3vw, 52px); align-items: center;
  padding-top: clamp(26px, 4vw, 56px);
}
@media (min-width: 900px) {
  .partner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .partner:nth-child(even) .partner__media { order: 2; }
}
.partner__media {
  position: relative; display: block; overflow: hidden;
  background: rgba(11, 11, 11, .045);
  aspect-ratio: 1 / 1;
  box-shadow: inset 0 0 0 1px var(--line);
}
/* display:contents drops the <picture> box so the image fills the square the
   anchor defines; srcset still resolves from the <source> siblings. */
.partner__media picture { display: contents; }
.partner__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.partner:hover .partner__media img { transform: scale(1.04); }

.partner__body { display: grid; gap: clamp(10px, 1.4vw, 16px); justify-items: start; align-content: center; }
.partner__label {
  margin: 0; font-family: var(--rama); text-transform: uppercase;
  letter-spacing: .26em; font-size: .74rem; color: var(--ash);
}
.partner__name {
  margin: 0; font-family: var(--anton); text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: .94; letter-spacing: .005em;
}
.partner__claim {
  margin: 0; font-family: var(--hnd); font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: -.02em; max-width: 26ch;
}
.partner__text { margin: 0; max-width: 46ch; color: rgba(11, 11, 11, .72); line-height: 1.45; }
/* Same frame as the merch size chips: the spec reads as a set of facts. */
.partner__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.partner__facts li {
  border: 1px solid var(--line); padding: .42em .7em;
  font-family: var(--rama); text-transform: uppercase; letter-spacing: .1em;
  font-size: .78rem; line-height: 1; color: var(--ash);
}
.partner__actions { margin-top: clamp(4px, 1vw, 10px); }

/* ---------------------------- 13. CONTACT ----------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0 clamp(24px, 4vw, 72px);
  border-top: 1px solid var(--line);
}
.contact-card {
  display: grid; gap: 8px; align-content: start;
  padding-block: clamp(22px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.contact-card__label {
  margin: 0;
  font-family: var(--rama); font-weight: 400;
  text-transform: uppercase; letter-spacing: .26em;
  font-size: .74rem; color: var(--ash);
}
.contact-card__name {
  margin: 0; font-family: var(--anton); text-transform: uppercase;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1;
}
.contact-card__mail {
  font-family: var(--hnd); font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: -.02em;
  justify-self: start; overflow-wrap: anywhere;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: .1em;
  transition: background-size .4s var(--ease);
}
.contact-card__mail:hover { background-size: 0% 1.5px; background-position: 100% 100%; }
.contact-card__note {
  margin: 0; font-size: .92rem; line-height: 1.35;
  color: rgba(11, 11, 11, .66); max-width: 34ch;
}
.contact-social {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 12px clamp(18px, 3vw, 34px);
  padding-top: clamp(20px, 2.6vw, 34px);
}
.contact-social__label {
  font-family: var(--rama); text-transform: uppercase; letter-spacing: .26em;
  font-size: .74rem; color: var(--ash);
}
.contact-social__links { display: flex; flex-wrap: wrap; gap: 12px clamp(18px, 3vw, 34px); }

/* ----------------------------- 14. FOOTER ----------------------------- */
.footer { padding-block: clamp(50px, 7vw, 100px) clamp(26px, 3vw, 40px); border-top: 1px solid var(--line); }
.footer__cols {
  display: grid; gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  padding-bottom: clamp(30px, 4vw, 56px);
}
.footer__col h3 {
  font-family: var(--rama); text-transform: uppercase; letter-spacing: .26em;
  font-size: .74rem; color: var(--ash); margin: 0 0 14px; font-weight: 400;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer__col a {
  font-family: var(--hnd); font-weight: 800; text-transform: uppercase;
  font-size: clamp(.82rem, 1.05vw, .95rem); letter-spacing: -.005em;
  transition: opacity .3s var(--ease);
}
.footer__col a:hover { opacity: .58; }
.footer__bar {
  border-top: 1px solid var(--line); padding-top: clamp(16px, 2vw, 26px);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ash);
}
.footer__bar a:hover { color: var(--ink); }

/* --------------------------- 15. UTILITIES ---------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .08s; }
.reveal--d2 { transition-delay: .16s; }
.reveal--d3 { transition-delay: .24s; }

/* Simple page shell for legal / status pages. */
.page { padding: calc(var(--nav-h) + clamp(46px, 8vw, 110px)) 0 clamp(60px, 9vw, 130px); }
.page__body { max-width: 74ch; display: grid; gap: 1.1em; color: rgba(11, 11, 11, .8); }
.page__body h2 { font-family: var(--anton); text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: 1.4em 0 0; }
.page__body a { text-decoration: underline; text-underline-offset: 3px; }
.page__body ul { margin: 0; padding-left: 1.1em; display: grid; gap: .5em; }
.page__body strong { font-family: var(--hnd); font-weight: 800; letter-spacing: -.01em; }
/* Company identity on the legal notice: label column, value column, one row
   each. Collapses to stacked pairs when there is no room for two columns. */
.legal-id { margin: 0; display: grid; gap: .1em .9em; grid-template-columns: 1fr; }
@media (min-width: 620px) { .legal-id { grid-template-columns: 15ch minmax(0, 1fr); } }
.legal-id dt {
  font-family: var(--rama); text-transform: uppercase; letter-spacing: .2em;
  font-size: .72rem; color: var(--ash); align-self: baseline;
}
.legal-id dd { margin: 0 0 .7em; }
@media (min-width: 620px) { .legal-id dt { margin-bottom: .7em; } .legal-id dd { margin-bottom: .7em; } }
.legal-updated {
  border-top: 1px solid var(--line); padding-top: 1.2em; margin-top: 1.4em;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ash);
}

/* --------------------------- 16. RESPONSIVE --------------------------- */
@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  /* Ticket-stub layout on phones: the date block holds the left edge while the
     city and venue stack beside it, instead of four sparse lines. */
  .tour-row {
    /* Fixed, not auto: the weekday line varies in width (MON is 5px wider than
       SAT in Rama Gothic), which used to nudge the city out of alignment. 70px
       clears the widest date + weekday combination, measured at 65.3px. */
    grid-template-columns: 70px minmax(0, 1fr);
    grid-template-areas: "date city" "date venue";
    align-items: start;
    column-gap: clamp(14px, 4vw, 22px); row-gap: 4px;
    padding-block: 16px;
  }
  .tour-row__date  { grid-area: date; align-self: center; }
  .tour-row__city  { grid-area: city; }
  .tour-row__venue {
    grid-area: venue; justify-self: start; text-align: left;
    font-size: 1rem; letter-spacing: .06em;
  }
}
@media (max-width: 700px) {
  /* Two products per line on phones, whatever the screen width. */
  .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .card__title { font-size: .92rem; letter-spacing: -.01em; }
  .card__price { font-size: .92rem; }
  .card__body { gap: 8px; padding-top: 12px; }
  .card__note { font-size: .72rem; }
  .card__body > .btn { padding: .8em .6em; font-size: .72rem; letter-spacing: .06em; }
  .size { padding: .38em .5em; font-size: .7rem; }
  .card__tag { font-size: .6rem; top: 8px; left: 8px; }
}
@media (max-width: 560px) {
  .hero__actions .btn { width: 100%; }
  .partner__actions .btn { width: 100%; justify-content: center; }
  /* Two lines, moto first: the moto takes the whole first row, the copyright
     and the legal links share the second. */
  .footer__bar {
    flex-wrap: wrap; align-items: baseline;
    row-gap: 14px; column-gap: 12px;
    letter-spacing: .12em;
  }
  .footer__bar .moto { order: -1; flex-basis: 100%; justify-content: flex-start; }
  .footer__rights { display: none; }
}
/* Short viewports: keep the wordmark from swallowing the figure. */
@media (max-height: 760px) and (min-width: 900px) {
  .hero__wordmark { width: min(78vw, 1080px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .menu__link { transform: none; }
}

@media print {
  body::after, .nav, .menu, .ticker { display: none; }
  body { background: #fff; color: #000; }
}