/* Crush prototype — layout + components. Tokens live in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--teal-glow); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- atmosphere: light leaks, grain, scanlines ---------- */
.atmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 85% -10%, color-mix(in oklch, var(--teal) 22%, transparent), transparent 70%),
    radial-gradient(50vw 60vh at -10% 40%, color-mix(in oklch, var(--teal-burnt) 28%, transparent), transparent 70%),
    radial-gradient(40vw 40vh at 60% 110%, rgb(217 150 58 / 0.06), transparent 70%);
}
.atmos::after { /* grain */
  content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scan { /* scanlines — intensity from Tweaks */
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / var(--scan, .12)) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.page { position: relative; z-index: 1; transition: margin-right var(--med) var(--ease); }

/* ---------- micro type ---------- */
.mono { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-glow); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 44px; padding: 0 var(--s5); border-radius: var(--r-pill);
  font-weight: 600; font-size: .9375rem; letter-spacing: .01em; white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--primary {
  background: linear-gradient(180deg, var(--teal-hi), var(--teal) 55%, var(--teal-burnt));
  color: var(--on-teal);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 0 0 1px color-mix(in oklch, var(--teal-glow) 35%, transparent), 0 8px 24px -10px var(--teal-glow-a);
}
.btn--primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 0 0 1px var(--teal-glow), 0 10px 32px -8px var(--teal-glow-a); }
.btn--ghost { border: 1px solid var(--line-hi); background: color-mix(in oklch, var(--ink) 35%, transparent); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--teal-glow); background: color-mix(in oklch, var(--plate) 60%, transparent); }
.btn--sm { height: 36px; padding: 0 var(--s4); font-size: .8125rem; }
.btn--icon { width: 40px; padding: 0; justify-content: center; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--fog);
  font-size: .8125rem; font-weight: 500; white-space: nowrap;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.chip:hover { color: var(--paper); border-color: var(--line-hi); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { color: var(--paper); border-color: var(--teal); background: color-mix(in oklch, var(--teal) 16%, transparent); }
.chip .n { font-family: var(--f-mono); font-size: .6875rem; color: var(--mist); }

.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 4px;
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  background: color-mix(in oklch, var(--ink) 72%, transparent); border: 1px solid color-mix(in oklch, var(--paper) 14%, transparent); color: var(--paper);
  backdrop-filter: blur(6px);
}
.tag--signal { color: #1a1206; background: var(--sodium); border-color: transparent; }
.tag--signal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag--soft { color: var(--fog); }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  display: flex; align-items: center; gap: var(--s5); padding: 0 var(--gutter);
  background: linear-gradient(to bottom, color-mix(in oklch, var(--ink) 92%, transparent), color-mix(in oklch, var(--ink) 70%, transparent));
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
}
/* wordmark: the CRUSH SVG. Letters take --paper; the notch on the U follows the theme hue. */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: none; padding: 6px 4px; margin-left: -4px; border-radius: 6px; color: var(--paper); transition: color var(--fast); }
.brand__mark { display: block; height: 24px; width: auto; overflow: visible; }
/* tagline: mono micro-label tucked under the wordmark, starting at the C's left edge */
.brand__tag { padding-left: 1px; font-family: var(--f-mono); font-size: .5625rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); white-space: nowrap; transition: color var(--fast); }
.brand:hover .brand__tag { color: var(--fog); }
.brand__accent { fill: var(--teal-glow); transition: fill var(--med) var(--ease); }
.brand:hover .brand__accent { filter: drop-shadow(0 0 4px var(--teal-glow-a)); }
.hdr__spacer { flex: 1; }
.search {
  display: flex; align-items: center; gap: 8px; height: 40px; width: min(380px, 34vw); padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in oklch, var(--hull) 70%, transparent); color: var(--mist);
  font-size: .875rem; transition: border-color var(--fast);
}
.search:focus-within { border-color: var(--teal); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--paper); font: inherit; }
.search input::placeholder { color: var(--mist); }
.search svg { width: 16px; height: 16px; flex: none; }

/* location button: opens the "Your area" panel (scripts/area.js) */
.loc {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: color-mix(in oklch, var(--hull) 50%, transparent);
  font-size: .8125rem; color: var(--fog); white-space: nowrap; flex: none;
  transition: border-color var(--fast), color var(--fast), background var(--fast), box-shadow var(--fast);
}
.loc svg { width: 15px; height: 15px; color: var(--teal-glow); flex: none; }
.loc__r { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--mist); }
.loc:hover { border-color: var(--line-hi); color: var(--paper); }
.loc[aria-expanded="true"] { color: var(--paper); border-color: var(--teal-glow); background: color-mix(in oklch, var(--teal) 14%, transparent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--teal-glow) 14%, transparent); }
.loc[aria-expanded="true"] .loc__r { color: var(--teal-glow); }

/* menu: Sign in + Tell us about an event */
.hdr__more { position: relative; flex: none; }
.hdr__menu {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--fog);
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.hdr__menu svg { width: 18px; height: 18px; }
.hdr__menu:hover, .hdr__menu[aria-expanded="true"] { border-color: var(--line-hi); color: var(--paper); background: color-mix(in oklch, var(--plate) 60%, transparent); }
.menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: 264px; padding: 6px; display: grid; gap: 2px;
  border-radius: 14px; border: 1px solid var(--line-hi);
  background: color-mix(in oklch, var(--plate) 94%, transparent); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .85);
  transform-origin: top right; animation: menuIn var(--med) var(--ease);
}
.menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 9px; font-size: .875rem; font-weight: 600; color: var(--paper); outline: none; transition: background var(--fast); }
.menu__item svg { width: 18px; height: 18px; margin-top: 1px; color: var(--teal-glow); flex: none; }
.menu__item small { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: .5938rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.menu__item:hover, .menu__item:focus-visible { background: color-mix(in oklch, var(--teal) 16%, transparent); }
.menu__item:focus-visible { box-shadow: inset 0 0 0 1px var(--teal-glow); }
.menu__item + .menu__item { border-top: 1px solid color-mix(in oklch, var(--line) 60%, transparent); border-radius: 0 0 9px 9px; }

/* prices: shown only with grade, source and check date (scripts/prices.js) */
.price { font-family: var(--f-display); font-weight: 750; font-size: 1.125rem; font-variation-settings: "wdth" 110; font-variant-numeric: tabular-nums; }
.price--resale { color: var(--fog); }
.price__meta { font-family: var(--f-mono); font-size: .6875rem !important; letter-spacing: .03em; }
.price__meta a, .ticket__price small a { color: var(--fog); text-decoration: underline; text-decoration-color: var(--line-hi); text-underline-offset: 2px; }
.price__meta a:hover, .ticket__price small a:hover { color: var(--teal-glow); }

/* ---------- media: the image system ---------- */
.media {
  --focus: 50% 50%;
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--hull); isolation: isolate;
}
.media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus); transition: transform var(--slow) var(--ease); }
/* text-bearing art: never cropped. Contained over a blurred, graded copy of itself */
.media--contain .media__bg { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(28px) saturate(.7) brightness(.55); transform: scale(1.05); }
.media--contain .media__img { object-fit: contain; }
/* unified grade so mixed sources read as one set */
.media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklch, var(--teal-burnt) 0%, transparent) 40%, color-mix(in oklch, var(--ink) 55%, transparent) 100%), color-mix(in oklch, var(--teal-burnt) calc(var(--grade, .16) * 100%), transparent);
  mix-blend-mode: normal;
}
.media::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.media--grade .media__img, .media--grade .media__bg { filter: saturate(.82) contrast(1.04); }
.media--contain.media--grade .media__bg { filter: blur(28px) saturate(.6) brightness(.5); }
body.no-grade .media::before { background: linear-gradient(180deg, transparent 50%, color-mix(in oklch, var(--ink) 50%, transparent)); }
body.no-grade .media__img { filter: none; }

/* honest placeholder — designed, labelled, never fake art */
.media--ph {
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in oklch, var(--teal) 45%, transparent), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, color-mix(in oklch, var(--teal-burnt) 55%, transparent), transparent 65%),
    linear-gradient(160deg, var(--plate), var(--ink));
}
.media--ph .ph__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(color-mix(in oklch, var(--teal-glow) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--teal-glow) 9%, transparent) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: linear-gradient(to top, #000, transparent 85%);
}
.media--ph .ph__glyph { position: absolute; right: 7%; top: 12%; width: 22%; aspect-ratio: 1; color: color-mix(in oklch, var(--teal-glow) 55%, transparent); }
.media--ph .ph__venue { position: absolute; left: 14px; bottom: 12px; right: 14px; z-index: 4; font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
.media--ph .ph__venue b { display: block; color: var(--mist); font-weight: 400; margin-bottom: 2px; }

/* ---------- hero carousel ---------- */
.hero { position: relative; height: min(76vh, 760px); min-height: 520px; overflow: hidden; margin-top: calc(var(--header-h) * -1); }
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--slow) var(--ease), visibility 0s linear var(--slow); }
.hero__slide.is-on { opacity: 1; visibility: visible; transition: opacity var(--slow) var(--ease); }
.hero .media { position: absolute; inset: 0; aspect-ratio: auto; }
/* copy hands off cleanly: outgoing text leaves fast, incoming text arrives after the image settles */
.hero__slide .hero__body, .hero__slide .hero__credit { opacity: 0; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease; }
.hero__slide.is-on .hero__body, .hero__slide.is-on .hero__credit { opacity: 1; transform: none; transition: opacity var(--med) var(--ease) 320ms, transform var(--med) var(--ease) 320ms; }
.hero .media::before {
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--ink) 92%, transparent) 0%, color-mix(in oklch, var(--ink) 55%, transparent) 38%, transparent 70%),
    linear-gradient(0deg, var(--ink) 0%, color-mix(in oklch, var(--ink) 40%, transparent) 30%, transparent 55%),
    linear-gradient(180deg, color-mix(in oklch, var(--ink) 70%, transparent), transparent 22%),
    color-mix(in oklch, var(--teal-burnt) calc(var(--grade, .18) * 100%), transparent);
}
.hero__slide.is-on .media__img { animation: kenburns 14s var(--ease) both; }
.hero .media--contain .media__img { object-fit: contain; object-position: 78% 50%; padding: 12vh 4vw 18vh 42vw; }
@keyframes kenburns { from { transform: scale(1.08) translate3d(1%, 1%, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
.hero__grid { /* perspective floor */
  position: absolute; left: -20%; right: -20%; bottom: 0; height: 36%; z-index: 4; pointer-events: none; opacity: .5;
  background-image: linear-gradient(color-mix(in oklch, var(--teal-glow) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--teal-glow) 35%, transparent) 1px, transparent 1px);
  background-size: 64px 40px; transform: perspective(380px) rotateX(62deg); transform-origin: bottom;
  mask-image: linear-gradient(to top, transparent 0%, #000 30%, transparent 95%);
}
.hero__body {
  position: absolute; z-index: 5; left: var(--gutter); bottom: clamp(56px, 10vh, 104px); max-width: min(680px, 88vw);
  display: grid; gap: var(--s4);
}
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.hero__title {
  font-family: var(--f-display); font-size: var(--t-hero); line-height: .92; font-weight: 800; letter-spacing: -.01em;
  font-variation-settings: "wdth" 112; text-transform: uppercase;
  text-shadow: 0 2px 30px color-mix(in oklch, var(--ink) 60%, transparent);
}
.hero__title .soft { display: block; font-size: .42em; line-height: 1.1; letter-spacing: .04em; color: var(--fog); font-weight: 600; margin-top: .35em; }
.hero__when { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .06em; color: var(--paper); }
.hero__when span { color: var(--mist); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.hero__src { font-family: var(--f-mono); font-size: .6875rem; color: var(--mist); letter-spacing: .04em; }
.hero__nav { position: absolute; z-index: 6; right: var(--gutter); bottom: clamp(56px, 10vh, 104px); display: flex; gap: var(--s3); align-items: center; }
.hero__dots { display: flex; gap: 6px; }
.hero__dot { position: relative; width: 28px; height: 3px; border-radius: 2px; background: color-mix(in oklch, var(--paper) 22%, transparent); overflow: hidden; }
.hero__dot::after { content: ""; position: absolute; inset: 0; background: var(--teal-glow); transform: scaleX(0); transform-origin: left; }
.hero__dot.is-on::after { animation: dotfill var(--dwell, 7s) linear forwards; }
.hero.is-paused .hero__dot.is-on::after { animation-play-state: paused; }
.hero__dot.is-done::after { transform: scaleX(1); }
@keyframes dotfill { to { transform: scaleX(1); } }
.hero__count { font-family: var(--f-mono); font-size: .6875rem; color: var(--mist); letter-spacing: .1em; min-width: 46px; text-align: right; }
.hero__credit { position: absolute; z-index: 6; right: var(--gutter); top: calc(var(--header-h) + 14px); font-family: var(--f-mono); font-size: .5625rem; color: color-mix(in oklch, var(--paper) 50%, transparent); letter-spacing: .06em; }

/* ---------- discovery bar ---------- */
.disc { position: relative; z-index: 2; padding: 0 var(--gutter); margin-top: calc(var(--s6) * -1); }
.disc__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.disc__lead { font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; font-variation-settings: "wdth" 110; }
.disc__lead span { color: var(--mist); font-weight: 500; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: color-mix(in oklch, var(--hull) 80%, transparent); border: 1px solid var(--line); }
.seg button { height: 32px; padding: 0 14px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 500; color: var(--fog); transition: background var(--fast), color var(--fast); }
.seg button:hover { color: var(--paper); }
.seg button[aria-pressed="true"] { background: var(--plate-hi); color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-hi); }
.cats { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.cats::-webkit-scrollbar { display: none; }

/* ---------- rails ---------- */
.rails { position: relative; z-index: 1; padding: var(--s6) 0 var(--s7); display: grid; gap: var(--s6); }
.rail { display: grid; gap: var(--s4); }
.rail__head { display: flex; align-items: baseline; gap: var(--s3); padding: 0 var(--gutter); }
.rail__title { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 700; letter-spacing: .005em; font-variation-settings: "wdth" 108; }
.rail__count { font-family: var(--f-mono); font-size: .6875rem; color: var(--mist); }
.rail__see { margin-left: auto; font-size: .8125rem; font-weight: 600; color: var(--teal-glow); }
.rail__see:hover { text-decoration: underline; text-underline-offset: 3px; }
.rail__arrows { display: flex; gap: 6px; }
.rail__arrows button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--fog); transition: border-color var(--fast), color var(--fast), opacity var(--fast); }
.rail__arrows button:hover:not(:disabled) { border-color: var(--teal-glow); color: var(--paper); }
.rail__arrows button:disabled { opacity: .3; cursor: default; }
.rail__arrows svg { width: 14px; height: 14px; }
.rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w, clamp(240px, 22vw, 340px)); gap: var(--s4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  padding: 6px var(--gutter) 10px; scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }

/* ---------- card ---------- */
.card { position: relative; display: grid; gap: var(--s3); border-radius: var(--r-card); transition: transform var(--med) var(--ease); }
.card .media { border-radius: var(--r-card); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--teal-glow) 12%, transparent); }
.card .media .media__img { will-change: transform; }
.card:hover, .card:focus-within { transform: translateY(-4px); }
.card:hover .media__img { transform: scale(1.04); }
.card:hover .media { box-shadow: 0 0 0 1px color-mix(in oklch, var(--teal-glow) 55%, transparent), 0 18px 40px -18px var(--teal-glow-a); }
.card .media .fringe { /* chromatic edge on hover — mild */
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; border-radius: inherit;
  box-shadow: inset 2px 0 0 color-mix(in oklch, var(--teal-glow) 70%, transparent), inset -2px 0 0 rgb(217 150 58 / .5);
  transition: opacity var(--med) var(--ease);
}
.card:hover .fringe { opacity: 1; }
.card__tags { position: absolute; z-index: 5; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.card__tags .tag--signal { margin-left: auto; }
.card__cta {
  position: absolute; z-index: 5; right: 10px; bottom: 10px; opacity: 0; transform: translateY(6px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.card:hover .card__cta, .card:focus-within .card__cta { opacity: 1; transform: none; }
.card__body { display: grid; gap: 4px; padding: 0 2px; }
.card__when { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-glow); }
.card__when.is-tonight { color: var(--sodium); }
.card__title { font-weight: 650; font-size: 1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: var(--r-card); }
.card__where { font-size: .8125rem; color: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__more { color: var(--teal-glow); font-weight: 600; }
.card__src { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .04em; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__src i { font-style: normal; color: var(--fog); }

/* big numbered / feature card for "Tonight" */
.rail--wide { --card-w: clamp(280px, 30vw, 440px); }

/* ---------- venue tiles ---------- */
.rail--venues { --card-w: 132px; }
.venue { display: grid; justify-items: center; gap: var(--s2); text-align: center; padding-top: 4px; }
.venue__disc {
  position: relative; width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-hi), 0 0 0 5px var(--ink), 0 0 0 6px color-mix(in oklch, var(--teal-glow) 20%, transparent);
  transition: box-shadow var(--med) var(--ease);
}
.venue__disc .media { position: absolute; inset: 0; aspect-ratio: auto; }
.venue:hover .venue__disc { box-shadow: 0 0 0 1px var(--teal-glow), 0 0 0 5px var(--ink), 0 0 0 6px var(--teal-glow), 0 0 28px var(--teal-glow-a); }
.venue__name { font-size: .8125rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.venue__n { font-family: var(--f-mono); font-size: .625rem; color: var(--mist); letter-spacing: .06em; }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 1; padding: var(--s6) var(--gutter) var(--s7); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; justify-content: space-between; }
.foot__trust { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .06em; color: var(--fog); }
.foot__trust::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-glow); box-shadow: 0 0 10px var(--teal-glow); }
.foot nav { display: flex; gap: var(--s5); font-size: .8125rem; color: var(--mist); }
.foot nav a:hover { color: var(--paper); }

/* ================= EVENT PAGE ================= */
.ev-hero { position: relative; height: min(82vh, 820px); min-height: 540px; margin-top: calc(var(--header-h) * -1); overflow: hidden; }
.ev-hero .media { position: absolute; inset: 0; aspect-ratio: auto; }
.ev-hero .media::before {
  background:
    linear-gradient(0deg, var(--ink) 2%, color-mix(in oklch, var(--ink) 55%, transparent) 34%, transparent 62%),
    linear-gradient(90deg, color-mix(in oklch, var(--ink) 78%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklch, var(--ink) 75%, transparent), transparent 20%),
    color-mix(in oklch, var(--teal-burnt) calc(var(--grade, .22) * 100%), transparent);
}
.ev-hero .media__img { animation: kenburns 18s var(--ease) both; }
.ev-hero__body { position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); bottom: clamp(40px, 8vh, 80px); display: grid; gap: var(--s4); max-width: 900px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.crumbs a:hover { color: var(--paper); }
.ev-title {
  font-family: var(--f-display); font-size: clamp(3.4rem, 1.6rem + 8vw, 9rem); line-height: .86; font-weight: 800;
  font-variation-settings: "wdth" 125; letter-spacing: -.01em; text-transform: uppercase;
}
.ev-strip { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .05em; }
.ev-strip b { color: var(--paper); font-weight: 500; }
.ev-strip span { color: var(--mist); }
.ev-strip .div { width: 1px; height: 14px; background: var(--line-hi); }

.ev-layout {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s6);
  padding: var(--s6) var(--gutter) 0; align-items: start;
}
.ev-main { display: grid; gap: var(--s6); min-width: 0; }
.panel { background: linear-gradient(180deg, color-mix(in oklch, var(--plate) 70%, transparent), color-mix(in oklch, var(--hull) 70%, transparent)); border: 1px solid var(--line); border-radius: var(--r-sheet); }

.ticket { position: sticky; top: calc(var(--header-h) + 24px); padding: var(--s5); display: grid; gap: var(--s4); margin-top: calc(var(--s7) * -1.6);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8), inset 0 1px 0 color-mix(in oklch, var(--teal-glow) 18%, transparent); backdrop-filter: blur(16px); }
.ticket__when { display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); align-items: center; }
.cal { display: grid; place-items: center; height: 60px; border-radius: 8px; border: 1px solid var(--line-hi); background: var(--ink); line-height: 1; }
.cal b { font-family: var(--f-display); font-size: 1.6rem; font-weight: 800; font-variation-settings: "wdth" 115; }
.cal span { font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .14em; color: var(--sodium); }
.ticket__day { font-weight: 650; }
.ticket__time { font-family: var(--f-mono); font-size: .75rem; color: var(--fog); letter-spacing: .04em; }
.ticket .btn--primary { width: 100%; justify-content: center; height: 52px; font-size: 1rem; }
.ticket__price { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s3) 0; border-top: 1px dashed var(--line-hi); border-bottom: 1px dashed var(--line-hi); }
.ticket__price b { font-weight: 600; }
.ticket__price span { font-family: var(--f-mono); font-size: .6875rem; color: var(--mist); }
.ticket__price--face, .ticket__price--resale { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; }
.ticket__price--face b, .ticket__price--resale b { font-family: var(--f-display); font-size: 1.375rem; font-weight: 750; font-variation-settings: "wdth" 110; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket__price--resale b { color: var(--fog); }
.ticket__price--face span, .ticket__price--resale span { text-align: right; text-transform: uppercase; letter-spacing: .08em; font-size: .5938rem; }
.ticket__price small { grid-column: 1 / -1; font-family: var(--f-mono); font-size: .625rem; color: var(--mist); }
.ticket__fine { font-size: .75rem; color: var(--mist); line-height: 1.55; }
.ticket__fine b { color: var(--fog); font-weight: 600; }
.ticket__acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.ticket__acts .btn { justify-content: center; }

.sec { display: grid; gap: var(--s4); }
.sec__h { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 700; font-variation-settings: "wdth" 108; display: flex; align-items: baseline; gap: var(--s3); }
.sec__h small { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); font-weight: 400; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sheet); overflow: hidden; }
.fact { background: var(--hull); padding: var(--s4) var(--s5); display: grid; gap: 4px; align-content: start; }
.fact dt { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-glow); }
.fact dd { margin: 0; font-size: .9375rem; }
.fact dd small { display: block; color: var(--mist); font-size: .8125rem; }
.prose { max-width: 66ch; color: var(--fog); font-size: 1.0625rem; line-height: 1.65; display: grid; gap: var(--s3); }
.prose p:first-child { color: var(--paper); }
.attrib { font-family: var(--f-mono); font-size: .6875rem; color: var(--mist); letter-spacing: .03em; }
.attrib a { color: var(--fog); text-decoration: underline; text-decoration-color: var(--line-hi); text-underline-offset: 3px; }
.attrib a:hover { color: var(--paper); }

.where { display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; }
.map { position: relative; min-height: 220px; background:
  radial-gradient(circle at 46% 54%, color-mix(in oklch, var(--teal-glow) 35%, transparent) 0 6px, transparent 7px),
  radial-gradient(circle at 46% 54%, color-mix(in oklch, var(--teal-glow) 14%, transparent) 0 38px, transparent 39px),
  linear-gradient(color-mix(in oklch, var(--teal-glow) 8%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
  linear-gradient(90deg, color-mix(in oklch, var(--teal-glow) 8%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
  linear-gradient(160deg, var(--plate), var(--ink)); }
.map__label { position: absolute; left: 14px; bottom: 12px; font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.where__info { padding: var(--s5); display: grid; gap: var(--s3); align-content: start; }
.where__info h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; font-variation-settings: "wdth" 110; }
.where__info p { color: var(--fog); font-size: .9375rem; }

.ask { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center; padding: var(--s5); position: relative; overflow: hidden; }
.ask::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 0% 50%, color-mix(in oklch, var(--teal) 22%, transparent), transparent 70%); pointer-events: none; }
.ask__owl { width: 72px; height: 72px; object-fit: contain; position: relative; }
.ask__body { display: grid; gap: var(--s3); position: relative; }
.ask__body h3 { font-weight: 650; font-size: 1.0625rem; }
.ask__body h3 span { color: var(--mist); font-weight: 400; }
.ask__chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s3); }
.gallery .media { border-radius: var(--r-card); }
.gallery .media:nth-child(2) { aspect-ratio: auto; }

.report { padding: 0 var(--gutter) var(--s6); font-size: .875rem; color: var(--mist); }
.report a { color: var(--teal-glow); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tweaks ---------- */
.tweaks { position: fixed; left: 16px; bottom: 16px; z-index: 70; width: 240px; padding: var(--s4); border-radius: 12px; background: color-mix(in oklch, var(--hull) 94%, transparent); border: 1px solid var(--line-hi); backdrop-filter: blur(12px); display: none; gap: var(--s3); font-size: .8125rem; box-shadow: 0 20px 50px -20px #000; }
.tweaks.is-open { display: grid; }
.tweaks h4 { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-glow); display: flex; justify-content: space-between; }
.tweaks label { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); color: var(--fog); }
.tweaks input[type="range"] { width: 100px; accent-color: var(--teal); }
.tweaks input[type="checkbox"] { accent-color: var(--teal); width: 16px; height: 16px; }
.tweaks__reset { justify-self: start; height: 26px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-hi); font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); transition: border-color var(--fast), color var(--fast); }
.tweaks__reset:hover { border-color: var(--teal-glow); color: var(--paper); }
.tweaks-fab { position: fixed; left: 16px; bottom: 16px; z-index: 69; height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in oklch, var(--hull) 80%, transparent); font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.tweaks-fab:hover { color: var(--paper); border-color: var(--line-hi); }

/* ---------- responsive ---------- */
@media (max-width: 1360px) {
  .search { width: 300px; }
}
@media (max-width: 1100px) {
  .search { width: 240px; }
  .ev-layout { grid-template-columns: 1fr; }
  .ticket { position: relative; top: 0; margin-top: calc(var(--s6) * -1); order: -1; }
}
@media (max-width: 820px) {
  :root { --header-h: 58px; }
  .search { flex: 1; width: auto; min-width: 0; }
  .brand__mark { height: 22px; }
  .hdr { gap: var(--s3); }
  .hdr__spacer { display: none; }
  .hero { height: 78vh; min-height: 560px; }
  .hero .media--contain .media__img { padding: 14vh 6vw 44vh; object-position: 50% 30%; }
  .hero__body { bottom: 72px; }
  .hero__nav { left: var(--gutter); right: auto; bottom: 28px; }
  .hero__credit { display: none; }
  .disc { margin-top: var(--s4); }
  .disc__row { gap: var(--s3); }
  .seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg button { flex: none; }
  .rail__arrows { display: none; }
  .rail__track { --card-w: 74vw; }
  .rail--wide { --card-w: 84vw; }
  .rail--venues .rail__track { --card-w: 108px; }
  .venue__disc { width: 92px; height: 92px; }
  .where { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .media:nth-child(2) { aspect-ratio: 16 / 9; }
  .ev-strip .div { display: none; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask { grid-template-columns: 1fr; }
  .card__cta { opacity: 1; transform: none; }
}
@media (hover: none) { .card__cta { opacity: 1; transform: none; } }

/* topbar on phones: the location button keeps only the pin and radius */
@media (max-width: 640px) {
  .loc { padding: 0 11px; gap: 5px; }
  .loc__place, .loc__sep { display: none; }
  .brand__mark { height: 20px; }
  .brand__tag { display: none; }
  .search { padding: 0 12px; }
}