/* ==========================================================================
   AFRODAM : "Dam Nights"
   Realization of the active Novamira design direction.
   Tokens are the single source of truth; nothing below invents a value.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no third-party request) ---------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/archivo-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/archivo-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/archivo-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/spacegrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/spacegrotesk-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  --bg: #0B0B0C;
  --surface: #141417;
  --ink: #F4F2EC;
  --muted: #8B877E;
  --line: #2A2A2E;
  --accent: #FFD400;
  --accent-hover: #FFE04D;
  --support: #D6341F;
  --placeholder: #6E6B65;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;

  --xs: 8px;
  --sm: 16px;
  --md: 32px;
  --lg: 64px;
  --xl: 128px;

  --radius: 0px;

  /* The stock CSS easings are too weak to read as intentional. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1440px;
  --header-h: 76px;
}

/* ---------- Reset (zero specificity so components always win) ---------- */

*, *::before, *::after { box-sizing: border-box; }

:where(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }
:where(img, video, svg, iframe) { display: block; max-width: 100%; }
:where(img, video) { height: auto; }
:where(a) { color: inherit; text-decoration: none; }
:where(button, input, textarea, select) { font: inherit; color: inherit; background: none; border: 0; border-radius: var(--radius); }
:where(button) { cursor: pointer; }
:where(blockquote, figure) { margin: 0; padding: 0; border: 0; }
:where(table) { border-collapse: collapse; }

@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto; }
}

/* ---------- Base ---------- */

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 0.55vw + 13px, 17px);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--bg); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--bg);
  padding: 12px 20px;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Layout primitives ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }

.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- Type ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 0;
}

.d1 { font-size: clamp(3rem, 9.2vw, 9.5rem); }
.d2 { font-size: clamp(2.4rem, 6.4vw, 5.6rem); }
.d3 { font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.02; }
.d4 { font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.05; }

.label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  font-size: clamp(1.05rem, 1.15vw + 0.8rem, 1.375rem);
  line-height: 1.5;
  max-width: 30ch;
  color: var(--ink);
}

.prose { max-width: 66ch; }
.prose p { margin-bottom: 1.15em; color: var(--ink); }
.prose p:last-child { margin-bottom: 0; }
.prose p.dim { color: var(--muted); }

.accent { color: var(--accent); }
.dim { color: var(--muted); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius);
  transition: transform 160ms var(--ease-out),
              background-color 180ms var(--ease-out),
              color 180ms var(--ease-out);
}

/* Press feedback: the interface confirms it heard you. */
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--accent); color: #0B0B0C; }
.btn--ghost { border: 1px solid var(--ink); color: var(--ink); }

.btn__arrow {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  transition: transform 200ms var(--ease-out);
}

/* Hover is gated so a tap on a touch screen does not latch a hover state. */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-hover); }
  .btn--ghost:hover { background: var(--ink); color: var(--bg); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow { transition: background-color 180ms linear, color 180ms linear; }
  .btn:active { transform: none; }
}

/* ---------- Grain overlay (texture on media only, never on type) ---------- */

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 11, 12, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
}

.brand { display: flex; align-items: center; flex: 0 0 auto; position: relative; z-index: 2; }
.brand img { height: 26px; width: auto; }
.brand__text {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); }

.nav a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-block: 4px;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms var(--ease-out);
}
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: scaleX(1); }
}

.header-cta { flex: 0 0 auto; }
.header-cta .btn { padding: 11px 18px; min-height: 42px; font-size: 0.78rem; }

.nav-toggle { display: none; }

/* The in-nav ticket button belongs to the mobile drawer only. */
.nav > .btn { display: none; }

/* ---------- Hero ----------
   Full-bleed cinematic frame with the copy anchored bottom-left. The media is
   the composition; a directional scrim buys the type its contrast. */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img,
.hero__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  /* Low-light phone footage: lift it rather than bury it. */
  filter: contrast(1.16) saturate(1.1) brightness(1.3);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(97deg, rgba(11,11,12,0.95) 0%, rgba(11,11,12,0.64) 26%, rgba(11,11,12,0.16) 58%, rgba(11,11,12,0) 80%),
    linear-gradient(0deg, rgba(11,11,12,0.93) 0%, rgba(11,11,12,0.28) 34%, rgba(11,11,12,0) 64%);
}
.hero.grain::after { z-index: 1; opacity: 0.1; }

/* Sound control: a square stamp in the hero corner. The accent gold is already
   spent on the ticket action, so this one earns attention with a slow stroke
   pulse while it is still waiting to be switched on. */
/* The clip is shot vertical, so it only earns its place on a phone. Wider
   viewports keep the still and never fetch the video at all. */
.hero__video { display: none; }

.hero__sound {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(18px, 2.4vw, 30px);
  z-index: 3;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(244, 242, 236, 0.45);
  background: rgba(11, 11, 12, 0.55);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

@supports (backdrop-filter: blur(4px)) {
  .hero__sound { backdrop-filter: blur(6px); }
}

@media (hover: hover) and (pointer: fine) {
  .hero__sound:hover { border-color: var(--ink); background: rgba(11, 11, 12, 0.78); }
}

.hero__soundicon {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
}
.hero__soundicon::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: currentColor;
  transform: scale(0);
  transition: transform 220ms var(--ease-out);
}
.hero__sound.is-on .hero__soundicon::after { transform: scale(1); }

@keyframes afd-ask {
  0%, 100% { border-color: rgba(244, 242, 236, 0.4); }
  50% { border-color: rgba(244, 242, 236, 0.95); }
}
.hero__sound.is-asking { animation: afd-ask 2.6s var(--ease-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero__sound.is-asking { animation: none; border-color: var(--ink); }
  .hero__soundicon::after { transition: none; }
}

@media (max-width: 720px) {
  .hero__video { display: block; }
  .hero__sound {
    display: inline-flex;
    bottom: auto;
    top: clamp(14px, 4vw, 22px);
    padding: 9px 12px;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
  .hero__sound[hidden] { display: none; }
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(48px, 7vw, 104px);
}

.hero__copy { max-width: 64rem; }

.hero__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px, 1.8vw, 24px); }
.hero__kicker::before { content: ""; width: 56px; height: 2px; background: var(--accent); flex: 0 0 auto; }

.hero__title.d1 { font-size: clamp(2.15rem, 7.1vw, 7rem); line-height: 0.92; letter-spacing: -0.045em; }
.hero__title { margin-bottom: clamp(18px, 2.2vw, 30px); }
.hero__title .line { display: block; }
.hero__title .out { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }

.hero__lede { margin-bottom: clamp(24px, 2.8vw, 36px); max-width: 38ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Entrance: the headline wipes up line by line, then the supporting copy
   follows. Motivated by hierarchy, and it plays once, on load. */
.js .hero__title .line {
  clip-path: inset(-18% 0 100% 0);
  transform: translateY(0.14em);
}
.js .hero.is-ready .hero__title .line {
  clip-path: inset(-18% 0 -18% 0);
  transform: none;
  transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.js .hero.is-ready .hero__title .line:nth-child(2) { transition-delay: 110ms; }

.js .hero__kicker,
.js .hero__lede,
.js .hero__actions { opacity: 0; transform: translateY(16px); }
.js .hero.is-ready .hero__kicker,
.js .hero.is-ready .hero__lede,
.js .hero.is-ready .hero__actions {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js .hero.is-ready .hero__kicker { transition-delay: 60ms; }
.js .hero.is-ready .hero__lede { transition-delay: 320ms; }
.js .hero.is-ready .hero__actions { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .js .hero__title .line { clip-path: none !important; transform: none !important; }
  .js .hero__kicker,
  .js .hero__lede,
  .js .hero__actions { opacity: 1 !important; transform: none !important; }
  .js .hero__title .line,
  .js .hero__kicker,
  .js .hero__lede,
  .js .hero__actions { transition: none !important; }
}

@media (max-width: 900px) {
  /* A full-height hero leaves a dead field of shadow above the copy on a
     narrow screen, so shorten it and pull the crowd into frame. */
  .hero { min-height: min(84svh, 700px); }
  .hero__bg::after {
    background:
      linear-gradient(0deg, rgba(11,11,12,0.97) 0%, rgba(11,11,12,0.5) 52%, rgba(11,11,12,0.62) 100%);
  }
  .hero__bg img, .hero__bg video { object-position: 62% 42%; }
}
/* ---------- Marquee (real information, not atmosphere) ---------- */

.marquee {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: clamp(14px, 1.6vw, 22px);
  background: var(--bg);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: afd-marquee 42s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: baseline;
  gap: clamp(28px, 4vw, 56px);
  padding-right: clamp(28px, 4vw, 56px);
}
.marquee__item {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.1vw, 2rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.marquee__venue {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

@keyframes afd-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
}

/* ---------- Track record (one enormous number inline) ---------- */

.record__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.record__statement {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.1vw, 3rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.record__big {
  display: inline-block;
  color: var(--accent);
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
}
.record__meta { display: grid; }
.record__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sm);
  padding-block: 14px;
  border-top: 1px solid var(--line);
}
.record__row:last-child { border-bottom: 1px solid var(--line); }
.record__val { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 1.35rem; }

/* ---------- Event rows (hairlines, never cards) ---------- */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--md);
  padding-bottom: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line);
}
.section-head__link {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color 200ms var(--ease-out);
}

.event {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 40px);
  align-items: center;
  padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background-color 250ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .section-head__link:hover { color: var(--accent); }
  .event:hover { background: rgba(255, 212, 0, 0.03); }
}

.event__date {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.03em;
}
.event__day { display: block; font-size: clamp(2.6rem, 4.6vw, 4.25rem); }
.event__mon { display: block; font-size: 0.95rem; letter-spacing: 0.06em; color: var(--muted); margin-top: 6px; }

.event__name { font-size: clamp(1.3rem, 2.1vw, 2rem); margin-bottom: 6px; }
.event__where { font-size: 0.86rem; color: var(--muted); }

.event__price { font-size: 0.9rem; color: var(--ink); }
.event__price .from { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.event__action { justify-self: end; }

.tag {
  display: inline-block;
  padding: 6px 11px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.tag--past { color: var(--support); }
.tag--live { color: var(--accent); }

.event--past .event__name,
.event--past .event__day { color: var(--muted); }

.empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}
.empty__mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line);
  text-transform: uppercase;
}

/* Stacked section header: headline over body, never a floating corner note. */
.bento-head { margin-bottom: clamp(28px, 3.4vw, 52px); max-width: 64ch; }
.bento-head h2 { margin-bottom: 16px; }

/* ---------- Capabilities bento ----------
   Hairline grid rather than floating cards: the 1px gap over a --line ground
   draws the rules, so separation stays consistent with the event list. */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.bento__cell {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  padding: clamp(24px, 2.6vw, 40px);
  min-height: clamp(200px, 22vw, 280px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  overflow: hidden;
}

.bento__cell--wide { grid-column: span 3; }
.bento__cell--third { grid-column: span 2; }
.bento__cell--tall { grid-column: span 3; min-height: clamp(240px, 26vw, 340px); }

.bento__cell--tint { background: var(--surface); }

.bento__media { position: absolute; inset: 0; z-index: -1; }
.bento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.55);
  transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out);
}
/* The scrim is sized so the copy block always sits on near-solid ground. */
.bento__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 11, 12, 0.97) 0%, rgba(11, 11, 12, 0.92) 38%, rgba(11, 11, 12, 0.55) 72%, rgba(11, 11, 12, 0.4) 100%);
}

@media (hover: hover) and (pointer: fine) {
  .bento__cell:hover .bento__media img { transform: scale(1.04); filter: grayscale(0.55) contrast(1.15) brightness(0.62); }
}

.bento__name { font-size: clamp(1.15rem, 1.7vw, 1.55rem); }
.bento__body { color: var(--muted); font-size: 0.92rem; max-width: 42ch; }

/* ---------- Reel strip ----------
   Vertical clips from the nights themselves. Hairline grid on desktop,
   scroll-snap carousel on a phone rather than a tall stack. */

.reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.reel {
  position: relative;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  background: var(--surface);
}
.reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.95);
}
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(11, 11, 12, 0.55) 0%, rgba(11, 11, 12, 0) 42%);
}

@media (max-width: 720px) {
  .reels {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reels::-webkit-scrollbar { display: none; }
  .reel { flex: 0 0 74%; scroll-snap-align: start; }
}

/* ---------- Instagram feed ----------
   Scoped overrides only: the plugin owns the markup, the design owns the look.
   Square edges, hairline grid, colour arriving on hover. */

.igfeed #sb_instagram {
  padding: 0 !important;
  background: var(--line) !important;
  border: 1px solid var(--line);
}
.igfeed #sb_instagram #sbi_images { padding: 0 !important; }
.igfeed #sb_instagram .sbi_item { padding: 1px !important; }

.igfeed #sb_instagram .sbi_photo_wrap,
.igfeed #sb_instagram .sbi_photo,
.igfeed #sb_instagram .sbi_photo img {
  border-radius: 0 !important;
}

.igfeed #sb_instagram .sbi_photo {
  filter: grayscale(1) contrast(1.12) brightness(0.82);
  transition: filter 450ms var(--ease-out), transform 650ms var(--ease-out);
}
.igfeed #sb_instagram .sbi_photo img { display: block; width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .igfeed #sb_instagram .sbi_item:hover .sbi_photo {
    filter: grayscale(0) contrast(1.05) brightness(1);
    transform: scale(1.03);
  }
}

/* Reels and videos carry a square marker so the grid reads as motion, not stills. */
.igfeed #sb_instagram .sbi_playbtn { display: none !important; }
.igfeed #sb_instagram .sbi_type_video .sbi_photo_wrap,
.igfeed #sb_instagram .sbi_type_carousel .sbi_photo_wrap { position: relative; }
.igfeed #sb_instagram .sbi_type_video .sbi_photo_wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 11px solid var(--accent);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  pointer-events: none;
}

.igfeed #sb_instagram .sbi_loader,
.igfeed #sb_instagram .sbi_follow_btn,
.igfeed #sb_instagram #sbi_load { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .igfeed #sb_instagram .sbi_photo { transition: none; }
  .igfeed #sb_instagram .sbi_item:hover .sbi_photo { transform: none; }
}

/* ---------- Full-bleed film ---------- */

.film {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: clamp(360px, 62vh, 680px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.film video, .film img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Vertical scrim for depth plus a directional one so the copy column keeps
   WCAG contrast over the brightest part of the crowd. */
.film::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(11, 11, 12, 0.92) 0%, rgba(11, 11, 12, 0.7) 38%, rgba(11, 11, 12, 0.2) 75%),
    linear-gradient(0deg, rgba(11, 11, 12, 0.95) 0%, rgba(11, 11, 12, 0.45) 55%, rgba(11, 11, 12, 0.65) 100%);
}
.film.grain::after { z-index: 3; }
.film__inner { position: relative; z-index: 4; padding-block: clamp(32px, 5vw, 72px); }

/* ---------- Subscribe / forms ---------- */

.subscribe__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.field { display: grid; gap: 8px; margin-bottom: var(--sm); }
.field > label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 15px 16px;
  min-height: 50px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color 200ms var(--ease-out);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--placeholder); }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--accent); outline: none; }
.field textarea { min-height: 140px; resize: vertical; }

.form__note { font-size: 0.78rem; color: var(--muted); margin-top: 12px; }
.form__hp { position: absolute; left: -9999px; }

.notice {
  padding: 14px 18px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.9rem;
  margin-bottom: var(--sm);
}
.notice--err { border-color: var(--support); color: var(--support); }

/* ---------- Page headers ---------- */

.pagehead {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(28px, 3.4vw, 52px);
  border-bottom: 1px solid var(--line);
}
.pagehead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.pagehead .d1 { font-size: clamp(2.4rem, 5.5vw, 5.5rem); }
.pagehead .prose { padding-bottom: 6px; }

/* ---------- About ---------- */

.vm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
}
.vm__block { border-top: 1px solid var(--line); padding-top: clamp(20px, 2.4vw, 32px); }
.vm__title { margin-bottom: 14px; }

/* ---------- Contact ---------- */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.channels { display: grid; }
.channel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sm);
  padding-block: 18px;
  min-height: 56px;
  border-top: 1px solid var(--line);
  transition: color 200ms var(--ease-out);
}
.channel:last-child { border-bottom: 1px solid var(--line); }
.channel__name { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 1.15rem; text-transform: uppercase; }
.channel__val { font-size: 0.84rem; color: var(--muted); transition: color 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  a.channel:hover { color: var(--accent); }
  a.channel:hover .channel__val { color: inherit; }
}

/* ---------- Footer: compact, edge to edge ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 2vw, 26px);
  padding-bottom: clamp(18px, 2vw, 26px);
}

.footer__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 44px);
}

.footer__logo { display: flex; align-items: center; flex: 0 0 auto; }
.footer__logo img { height: 22px; width: auto; display: block; }
.footer__logotext {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.footer__nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: clamp(9px, 2.1vw, 28px);
}

.footer__nav a {
  font-size: clamp(0.56rem, 1.9vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  padding-block: 4px;
  transition: color 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover { color: var(--ink); }
}

/* Sign-off pushed to both edges under a hairline. */
.footer__signoff {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(14px, 1.8vw, 22px);
  padding-top: clamp(12px, 1.6vw, 18px);
  border-top: 1px solid var(--line);
  font-size: clamp(0.58rem, 1.5vw, 0.72rem);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.footer__signoff span { white-space: nowrap; }

@media (max-width: 720px) {
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer__nav { width: 100%; justify-content: space-between; gap: 6px; }
}

.event__name a { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .event__name a:hover { color: var(--accent); }
}

/* ---------- On sale: flyer beside the ticket panel ---------- */

.billing {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(34px, 4vw, 54px);
  margin-bottom: clamp(34px, 4vw, 54px);
  border-bottom: 1px solid var(--line);
}
.billing:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

/* Event art is portrait and the lineup lives at the edges, so it is contained
   rather than cropped to a band. */
.billing__poster {
  display: block;
  border: 1px solid var(--line);
  background: var(--surface);
  line-height: 0;
}
.billing__poster img {
  width: 100%;
  height: auto;
  display: block;
}
.billing__poster--solo { max-width: 620px; margin: 0; }

.billing__flag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(14px, 2vw, 20px);
  color: var(--accent);
}
.billing__dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  flex: 0 0 auto;
}

.billing__name {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.02;
}
.billing__name a { color: inherit; }

@media (hover: hover) and (pointer: fine) {
  .billing__name a:hover { color: var(--accent); }
}

.billing__meta { margin-bottom: clamp(24px, 3vw, 34px); }

.billing__cta { margin-top: 4px; }

.billing__alt {
  margin: 16px 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}
.billing__alt strong {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .billing { grid-template-columns: minmax(0, 1fr); }
  .billing__poster { max-width: 460px; }
}

/* ---------- Photo albums ---------- */

/* A hairline grid, not a row of cards. The 1px gaps are the grid ground
   showing through, which is the same trick the Instagram strip uses. */
.shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(22px, 3vw, 34px);
  background: var(--line);
  border: 1px solid var(--line);
}

.shot {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  appearance: none;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Club photography arrives underexposed, so lift it rather than dim it.
     Most of the desaturation is what unifies a mixed batch of phone and
     camera shots; hover hands the colour back. */
  filter: grayscale(0.82) contrast(1.06) brightness(1.24);
  transition: filter 420ms var(--ease-out), transform 620ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .shot:hover img {
    filter: grayscale(0) contrast(1.02) brightness(1.18);
    transform: scale(1.04);
  }
}

.shot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }

@media (max-width: 900px) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- YouTube ---------- */

.tube {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(24px, 3vw, 38px);
}

.tube__play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  appearance: none;
}

.tube__play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.7) contrast(1.05) brightness(1.08);
  transition: filter 400ms var(--ease-out), transform 620ms var(--ease-out);
}

/* A square plate with a gold triangle: the same marker language the reel
   badges use, so video reads as video everywhere on the site. */
.tube__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px);
  transform: translate(-50%, -50%);
  background: rgba(11, 11, 12, 0.72);
  border: 1px solid rgba(244, 242, 236, 0.5);
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.tube__mark::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 13px solid var(--accent);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

@media (hover: hover) and (pointer: fine) {
  .tube__play:hover img { filter: grayscale(0) contrast(1.02) brightness(1.04); transform: scale(1.03); }
  .tube__play:hover .tube__mark { background: rgba(11, 11, 12, 0.9); border-color: var(--ink); }
}

.tube__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.tube__play iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tube__name {
  margin: 14px 0 4px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.98rem;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.tube__when {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 900px) { .tube { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tube { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .tube__play img { transition: none; }
  .tube__play:hover img { transform: none; }
}

/* ---------- Lightbox ---------- */

.lbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(11, 11, 12, 0.96);
}
.lbox.is-open { display: flex; }

.lbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lbox__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(12px, 2vw, 22px) clamp(14px, 3vw, 34px);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

.lbox__btn {
  position: absolute;
  top: 0;
  width: clamp(56px, 12vw, 110px);
  height: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 200ms var(--ease-out);
}
.lbox__btn:hover { opacity: 1; }
.lbox__btn--prev { left: 0; }
.lbox__btn--next { right: 0; }

.lbox__close {
  position: absolute;
  top: clamp(10px, 2vw, 20px);
  right: clamp(10px, 2vw, 20px);
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(244, 242, 236, 0.4);
  background: none;
  color: var(--ink);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.lbox__close:hover { border-color: var(--ink); }

@media (max-width: 720px) {
  .lbox__btn { width: 64px; opacity: 0.8; }
}

/* ---------- Stylish type: hollow words, chapter numerals ---------- */

/* A word cut back to its outline, so a headline reads half solid, half hollow. */
.hollow {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

/* Chapter numerals sit behind the heading as texture, never as content. */
.display[data-num] { position: relative; isolation: isolate; }
.display[data-num]::before {
  content: attr(data-num);
  position: absolute;
  z-index: -1;
  left: -0.06em;
  top: -0.34em;
  font-size: 1.85em;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--surface);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 720px) {
  .hollow { -webkit-text-stroke-width: 1px; }
  .display[data-num]::before { font-size: 1.5em; top: -0.28em; }
}

/* ---------- Scroll reveal (degrades to visible without JS) ---------- */

.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

/* Stagger siblings so a list arrives in sequence rather than all at once. */
.js .events .reveal:nth-child(2).is-in { transition-delay: 60ms; }
.js .events .reveal:nth-child(3).is-in { transition-delay: 120ms; }
.js .events .reveal:nth-child(4).is-in { transition-delay: 180ms; }
.js .bento .reveal:nth-child(2).is-in { transition-delay: 60ms; }
.js .bento .reveal:nth-child(3).is-in { transition-delay: 120ms; }
.js .bento .reveal:nth-child(4).is-in { transition-delay: 180ms; }
.js .bento .reveal:nth-child(5).is-in { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0ms !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__cell--wide,
  .bento__cell--tall,
  .bento__cell--third { grid-column: span 1; }
  .bento__cell--tall { grid-column: span 2; }
}

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 32px; }
  .hero__media {
    margin-right: calc(var(--gutter) * -1);
    margin-left: calc(var(--gutter) * -1);
    height: 58svh;
    min-height: 300px;
  }
  .hero__media::before { background: linear-gradient(0deg, rgba(11, 11, 12, 0.85) 0%, rgba(11, 11, 12, 0.1) 60%); }
  .record__grid,
  .subscribe__grid,
  .contact__grid,
  .pagehead__grid,
  .vm__grid,
  .empty { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 0;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    position: relative;
    z-index: 2;
  }
  .header-cta { display: none; }

  /* The drawer is offset by its own height PLUS the header, and is taken out
     of the accessibility tree while closed, so no sliver can peek above the
     header no matter how tall the menu is. */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 28px;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    transform: translateY(calc(-100% - var(--header-h)));
    visibility: hidden;
    transition: transform 360ms var(--ease-drawer), visibility 0s linear 360ms;
  }
  .nav.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 360ms var(--ease-drawer), visibility 0s;
  }
  .nav a {
    width: 100%;
    padding-block: 18px;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }
  .nav a::after { display: none; }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .nav { transition: visibility 0s linear 0s; }
}

@media (max-width: 720px) {
  .event {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "date name"
      "price action";
    gap: 6px 20px;
    align-items: start;
  }
  .event__date { grid-area: date; }
  .event__namewrap { grid-area: name; }
  .event__price { grid-area: price; margin-top: 16px; }
  .event__action { grid-area: action; justify-self: end; margin-top: 16px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__cell--tall { grid-column: span 1; }
}

/* ---------- Liquid surfaces ----------
   A frosted-glass approximation, not Apple's Liquid Glass: backdrop-filter,
   a layered inner highlight and a specular sweep on press. Square-edged,
   because the direction bans rounded corners. */

.btn { position: relative; isolation: isolate; overflow: hidden; }

/* The sweep: a soft highlight that travels across on hover, then settles. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,0.42) 46%, rgba(255,255,255,0.06) 60%, transparent 78%);
  transform: translateX(-120%);
  pointer-events: none;
}

.btn--ghost {
  background: rgba(244, 242, 236, 0.07);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border-color: rgba(244, 242, 236, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

.btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -1px 0 rgba(0, 0, 0, 0.12); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: translateX(120%); transition: transform 900ms var(--ease-out); }
  .btn--ghost:hover { background: rgba(244, 242, 236, 0.14); border-color: rgba(244, 242, 236, 0.6); color: var(--ink); }
}

/* Press: the surface compresses and the sheen snaps back, fast. */
.btn:active::before { transform: translateX(-120%); transition: transform 180ms var(--ease-out); }

/* The header and the drawer are the other glass surfaces. */
.site-header {
  background: rgba(11, 11, 12, 0.6);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

@media (max-width: 860px) {
  .nav {
    background: rgba(11, 11, 12, 0.82);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
}

/* Transparency is a preference, so honour the opt-out with solid fills. */
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn--ghost { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
}

/* A statement band standing on its own, with no metrics beside it. */
.record__statement--solo {
  max-width: 24ch;
  font-size: clamp(2rem, 5.2vw, 4.75rem);
  line-height: 0.98;
}

/* ==========================================================================
   Signature moves
   ========================================================================== */

/* The second display line is cut out of the live hero frame, so the type and
   the photograph are one object. A hairline stroke keeps it legible where the
   picture goes black. Falls back to the plain outline without support. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title .out {
    color: transparent;
    -webkit-text-stroke: 1px rgba(244, 242, 236, 0.55);
    background-image: var(--hero-img);
    background-size: 118% auto;
    background-position: center 34%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: brightness(1.85) contrast(1.2) saturate(1.15);
  }
}