@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter+Tight:opsz,wght@14..32,300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #050505;
  --bg2: #0a0a0a;
  --ink: #f4f1eb;
  --muted: #949494;
  --line: #252525;
  --signal: #ff3b1f;
  --panel: #0d0d0d;
  --player-h: 92px;
  --edge: clamp(18px, 2.25vw, 40px);
  --display: 'Archivo Black', 'Arial Black', sans-serif;
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--ink)
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  padding-bottom: var(--player-h)
}

a {
  color: inherit;
  text-decoration: none
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit
}

button {
  cursor: pointer
}

::selection {
  background: var(--signal);
  color: #090909
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E")
}

/* Navigation */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  z-index: 900;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--edge);
  background: linear-gradient(180deg, rgba(5, 5, 5, .9), rgba(5, 5, 5, 0));
  transition: .35s ease
}

.site-nav.scrolled {
  background: rgba(5, 5, 5, .86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #1d1d1d
}

.brand {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .04em
}

.brand span {
  opacity: .32
}

.nav-center {
  display: flex;
  gap: 26px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.nav-center a {
  opacity: .62;
  transition: .2s
}

.nav-center a:hover,
.nav-center a[aria-current='page'] {
  opacity: 1
}

.nav-right {
  justify-self: end;
  display: flex;
  gap: 12px;
  align-items: center
}

.nav-cta {
  border: 1px solid #3c3c3c;
  border-radius: 999px;
  padding: 10px 14px;
  font: 500 10px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #070707
}

.nav-toggle {
  display: none;
  border: 1px solid #313131;
  background: #090909;
  padding: 10px 12px;
  font: 11px var(--mono)
}

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #030303;
  border-bottom: 1px solid var(--line);
  isolation: isolate
}

#hero-audio-canvas,
.hero canvas {
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-photo {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 75%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 98%);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.85));
  transform: translate3d(0, calc(var(--hero-drift, 0)*1px), 0) scale(calc(1 + var(--beat, 0)*.012));
  transition: filter .3s
}

.hero-photo img {
  width: min(65vw, 860px);
  max-width: none;
  height: 94svh;
  object-fit: contain;
  object-position: center bottom;
  filter: contrast(1.04) saturate(.94);
}

.hero-title {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scale(calc(1 + var(--beat-scale, 0) * 0.035));
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 4;
  pointer-events: none;
  transition: transform .08s cubic-bezier(0.1, 0.9, 0.2, 1);
  will-change: transform;
}

.hero-word {
  position: relative;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(4.5rem, 11vw, 12rem);
  line-height: 0.85;
  letter-spacing: calc(-0.03em + var(--beat-tracking, 0) * 0.012em);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.85),
               0 0 calc(12px + var(--beat-glow, 0) * 35px) rgba(204, 255, 0, calc(0.15 + var(--beat-glow, 0) * 0.25)),
               0 0 calc(24px + var(--beat-glow, 0) * 70px) rgba(255, 153, 0, calc(0.10 + var(--beat-glow, 0) * 0.15));
  transform: translate3d(calc(var(--mx, 0)*10px), calc(var(--my, 0)*7px), 0);
  transition: color .4s ease, text-shadow .08s ease, transform .08s ease, letter-spacing .08s ease;
  will-change: transform, letter-spacing, text-shadow;
}

.hero-word.heads,
.hero-word.tails {
  align-self: center;
  margin: 0;
  left: auto;
  right: auto;
  mask-image: none;
  -webkit-mask-image: none;
}

.hero-word.or {
  align-self: center;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 0.85;
  letter-spacing: calc(0.12em + var(--beat-tracking, 0) * 0.02em);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 36px);
  width: 100%;
  max-width: 580px;
  margin: clamp(-0.8rem, -1vw, -0.2rem) 0;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.85),
               0 0 calc(10px + var(--beat-glow, 0) * 25px) rgba(255, 153, 0, calc(0.25 + var(--beat-glow, 0) * 0.25)),
               0 0 calc(20px + var(--beat-glow, 0) * 45px) rgba(204, 255, 0, calc(0.15 + var(--beat-glow, 0) * 0.15));
  transform: translate3d(calc(var(--mx, 0)*5px), calc(var(--my, 0)*3px), 0) scale(calc(1 + var(--beat-scale, 0) * 0.02));
  transition: color .4s ease, text-shadow .08s ease, transform .08s ease;
  will-change: transform, text-shadow;
}

.hero-word.or::before,
.hero-word.or::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
  box-shadow: 0 0 8px rgba(255, 153, 0, 0.3);
}

.hero-word.or::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), transparent);
}

.hero-word small {
  font-family: var(--mono);
  font-size: clamp(8px, .55vw, 12px);
  letter-spacing: .13em;
  position: absolute;
  color: #9d9d9d;
  font-weight: 500;
  line-height: 1;
}

.hero-word.heads small {
  left: 0;
  top: -22px;
}

.hero-word.tails small {
  right: 0;
  bottom: -20px;
}

.hero-copy {
  position: absolute;
  z-index: 5;
  left: var(--edge);
  bottom: var(--player-h);
  margin-bottom: 2rem;
  max-width: 340px
}

.hero-copy .kicker {
  font: 500 10px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b7b7b7;
  margin-bottom: 13px
}

.hero-copy p {
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.38;
  margin: 0;
  color: #dedbd4
}

.hero-copy .hero-links {
  display: flex;
  gap: 9px;
  margin-top: 20px;
  flex-wrap: wrap
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #353535;
  background: #090909;
  font: 500 10px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: .2s
}

.btn:hover {
  background: #f1eee8;
  color: #090909;
  border-color: #f1eee8
}

.btn.signal {
  background: var(--signal);
  color: #080808;
  border-color: var(--signal);
  font-weight: 700
}

.btn.signal:hover {
  background: #ff684e
}

.hero-meta {
  position: absolute;
  z-index: 5;
  right: var(--edge);
  bottom: calc(var(--player-h) + 36px);
  text-align: right;
  font: 10px/1.55 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888
}

.hero-meta strong {
  display: block;
  color: #e8e4dd;
  font-size: 12px;
  margin-bottom: 4px
}

.hero-center-mark {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 11px var(--mono);
  letter-spacing: .12em;
  pointer-events: none;
  opacity: 0.2;
  transition: opacity .4s ease, border-color .3s ease, color .3s ease;
}

.hero-center-mark:before,
.hero-center-mark:after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, .24)
}

.hero-center-mark:before {
  width: 1px;
  height: 160px
}

.hero-center-mark:after {
  height: 1px;
  width: 160px
}

.hero-scroll {
  position: absolute;
  z-index: 5;
  right: var(--edge);
  top: 110px;
  font: 9px var(--mono);
  letter-spacing: .13em;
  color: #666;
  writing-mode: vertical-rl;
  text-transform: uppercase
}

/* Sections */
.wrap {
  width: min(1540px, calc(100% - var(--edge)*2));
  margin: auto
}

.section {
  padding: clamp(88px, 10vw, 170px) 0;
  border-bottom: 1px solid var(--line)
}

.section.compact {
  padding: clamp(56px, 6vw, 90px) 0
}

.section-head {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  margin-bottom: clamp(40px, 6vw, 86px)
}

.section-no {
  font: 10px var(--mono);
  letter-spacing: .15em;
  color: #666;
  text-transform: uppercase
}

.section-title {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 126px);
  line-height: .83;
  letter-spacing: -.055em;
  text-transform: uppercase;
  margin: 0
}

.section-title em {
  font-family: Georgia, serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.04em
}

.lede {
  font-size: clamp(22px, 2.5vw, 44px);
  line-height: 1.03;
  max-width: 980px;
  letter-spacing: -.035em;
  margin: 0
}

/* Photo rail */
.photo-rail {
  display: grid;
  grid-template-columns: 1.15fr .8fr .9fr;
  gap: 12px;
  align-items: end
}

.photo-card {
  position: relative;
  overflow: hidden;
  background: #111
}

.photo-card:nth-child(1) {
  aspect-ratio: 4/5
}

.photo-card:nth-child(2) {
  aspect-ratio: 1/1.16
}

.photo-card:nth-child(3) {
  aspect-ratio: 4/5
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.06);
  transition: transform .8s cubic-bezier(.2, .7, .15, 1), filter .6s
}

.photo-card:hover img {
  transform: scale(1.025);
  filter: saturate(1) contrast(1.03)
}

.photo-card .cap {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  font: 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #f1eee8;
  text-shadow: 0 1px 10px #000
}

/* Music */
.music-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 50px;
  align-items: end
}

.music-copy h2 {
  font-family: var(--display);
  font-size: clamp(54px, 8vw, 148px);
  line-height: .77;
  letter-spacing: -.06em;
  margin: 0;
  text-transform: uppercase
}

.music-copy p {
  max-width: 570px;
  font-size: 18px;
  line-height: 1.55;
  color: #aaa
}

.platforms {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px
}

.platform {
  border: 1px solid #303030;
  padding: 10px 12px;
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em
}

.platform.verified:before {
  content: '●';
  color: #52d273;
  margin-right: 7px
}

.platform.search:after {
  content: ' search';
  font-size: 8px;
  color: #666
}

.track-table {
  border-top: 1px solid #2b2b2b;
  margin-top: 60px
}

.track-row {
  display: grid;
  grid-template-columns: 46px minmax(260px, 1.7fr) minmax(110px, .55fr) 90px 100px;
  gap: 16px;
  align-items: center;
  min-height: 70px;
  border-bottom: 1px solid #1d1d1d;
  transition: .18s;
  background: #050505
}

.track-row:hover,
.track-row.active {
  background: #0e0e0e
}

.track-row.active {
  box-shadow: inset 3px 0 0 var(--signal)
}

.track-play {
  width: 34px;
  height: 34px;
  border: 1px solid #343434;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 12px
}

.track-row:hover .track-play {
  background: #f3efe8;
  color: #080808
}

.track-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em
}

.track-sub {
  display: block;
  font: 9px var(--mono);
  color: #777;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 4px
}

.track-type,
.track-year,
.track-link {
  font: 9px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7c7c7c
}

.track-link {
  text-align: right
}

.track-link:hover {
  color: #fff
}

/* Documentary grid */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px
}

.doc {
  position: relative;
  overflow: hidden;
  background: #111
}

.doc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .7s cubic-bezier(.2, .8, .2, 1)
}

.doc:hover img {
  transform: scale(1.025)
}

.doc.a {
  grid-column: 1/7;
  aspect-ratio: 1.18
}

.doc.b {
  grid-column: 7/13;
  aspect-ratio: 1.18
}

.doc.c {
  grid-column: 1/5;
  aspect-ratio: .78
}

.doc.d {
  grid-column: 5/9;
  aspect-ratio: .78
}

.doc.e {
  grid-column: 9/13;
  aspect-ratio: .78
}

.doc:after {
  content: attr(data-label);
  position: absolute;
  left: 12px;
  bottom: 11px;
  font: 9px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .68);
  padding: 7px 8px
}

/* Profiles */
.profile-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh
}

.profile-panel {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 4vw, 60px)
}

.profile-panel:last-child {
  border-right: 0
}

.profile-panel .profile-bg {
  position: absolute;
  inset: 0;
  opacity: .62;
  filter: grayscale(.2) contrast(1.08);
  transition: .6s
}

.profile-panel .profile-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.profile-panel:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05) 20%, rgba(0, 0, 0, .9) 100%)
}

.profile-info {
  position: relative;
  z-index: 2
}

.profile-info .tag {
  font: 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #aaa
}

.profile-info h3 {
  font-family: var(--display);
  font-size: clamp(56px, 7.5vw, 128px);
  line-height: .78;
  letter-spacing: -.06em;
  text-transform: uppercase;
  margin: 16px 0
}

.profile-panel:hover .profile-bg {
  transform: scale(1.02);
  opacity: .76
}

/* Footer */
.site-footer {
  padding: 90px var(--edge) 120px;
  background: #f0ede6;
  color: #0a0a0a
}

.footer-mark {
  font-family: var(--display);
  font-size: clamp(64px, 13vw, 245px);
  line-height: .74;
  letter-spacing: -.07em;
  text-transform: uppercase;
  margin: 0 0 70px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 34px;
  border-top: 1px solid #bbb;
  padding-top: 24px
}

.footer-grid h4 {
  font: 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 14px
}

.footer-grid a,
.footer-grid p {
  display: block;
  font-size: 15px;
  margin: 6px 0;
  color: #252525
}

.footer-note {
  margin-top: 60px;
  border-top: 1px solid #bbb;
  padding-top: 17px;
  display: flex;
  justify-content: space-between;
  font: 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .09em
}

/* Digital player */
.player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--player-h);
  z-index: 950;
  background: rgba(4, 4, 4, .96);
  border-top: 1px solid #2b2b2b;
  backdrop-filter: blur(22px);
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(360px, 1.8fr) minmax(190px, .8fr);
  align-items: center;
  padding: 0 var(--edge);
  gap: 22px
}

.player:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 49.8%, rgba(255, 255, 255, .026) 50%, transparent 50.2% 100%), repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, .015) 8px)
}

.now {
  display: flex;
  gap: 13px;
  align-items: center;
  min-width: 0
}

.now-art {
  width: 48px;
  height: 48px;
  border: 1px solid #333;
  display: grid;
  place-items: center;
  background: #0b0b0b;
  font: 800 11px var(--mono);
  letter-spacing: -.04em;
  color: var(--signal)
}

.now-text {
  min-width: 0
}

.now-title {
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.now-sub {
  font: 9px var(--mono);
  color: #777;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 4px
}

.transport {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px
}

.ctrl {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #a7a7a7;
  display: grid;
  place-items: center
}

.ctrl.main {
  width: 42px;
  height: 42px;
  border: 1px solid #ddd;
  border-radius: 50%;
  color: #eee
}

.ctrl:hover {
  color: #fff
}

.timeline {
  display: flex;
  align-items: center;
  gap: 9px
}

.time {
  font: 8px var(--mono);
  color: #666;
  min-width: 31px
}

.progress {
  position: relative;
  height: 18px;
  flex: 1;
  cursor: pointer
}

.progress:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 2px;
  background: #2d2d2d
}

.progress-fill {
  position: absolute;
  left: 0;
  top: 8px;
  height: 2px;
  background: #ddd;
  width: 0
}

.progress-knob {
  position: absolute;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  left: 0;
  transform: translateX(-50%)
}

.wave {
  height: 34px;
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: flex-end
}

.wave i {
  display: block;
  width: 2px;
  background: #5c5c5c;
  height: var(--h, 10px);
  transform: scaleY(calc(.36 + var(--beat, 0)*1.25));
  transition: transform 70ms linear
}

.wave i:nth-child(4n) {
  background: var(--signal)
}

.player-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  position: relative;
  z-index: 2
}

.queue-btn {
  border: 1px solid #333;
  background: #090909;
  padding: 10px 12px;
  font: 9px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase
}

.queue {
  position: fixed;
  right: var(--edge);
  bottom: calc(var(--player-h) + 12px);
  width: min(470px, calc(100vw - var(--edge)*2));
  max-height: 60vh;
  overflow: auto;
  background: #080808;
  border: 1px solid #2d2d2d;
  z-index: 940;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: .25s
}

.queue.open {
  opacity: 1;
  pointer-events: auto;
  transform: none
}

.queue-head {
  position: sticky;
  top: 0;
  background: #080808;
  border-bottom: 1px solid #222;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  font: 10px var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase
}

.queue-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid #171717;
  align-items: center
}

.queue-item:hover {
  background: #101010
}

.queue-item button {
  border: 0;
  background: transparent;
  color: #aaa
}

.queue-item .q-title {
  font-size: 13px
}

.queue-item .q-year {
  font: 9px var(--mono);
  color: #666
}

.hidden-sc {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: -9999px
}

/* Interior page hero */
.page-hero {
  min-height: 74vh;
  padding: 150px var(--edge) 60px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden
}

.page-hero h1 {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(78px, 13.5vw, 250px);
  line-height: .73;
  letter-spacing: -.07em;
  text-transform: uppercase;
  margin: 0
}

.page-hero .side {
  position: absolute;
  right: var(--edge);
  bottom: 68px;
  width: min(380px, 35vw);
  font-size: 18px;
  line-height: 1.45;
  color: #aaa
}

.profile-hero-photo {
  position: absolute;
  inset: 0;
  opacity: .38
}

.profile-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.55);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 38%, #000 100%)
}

/* EPK */
.epk-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 70px
}

.epk-grid .fact-list {
  border-top: 1px solid #333
}

.fact {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #222
}

.fact b {
  font: 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #777
}

.fact span {
  font-size: 16px
}

/* Admin */
.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
  background: #060606;
  padding-bottom: 0
}

.admin-side {
  border-right: 1px solid #222;
  padding: 28px;
  position: sticky;
  top: 0;
  height: 100vh
}

.admin-side h1 {
  font: 18px var(--display);
  margin: 0 0 35px
}

.admin-tabs {
  display: grid;
  gap: 8px
}

.admin-tabs button {
  background: #0b0b0b;
  border: 1px solid #262626;
  padding: 13px;
  text-align: left;
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em
}

.admin-tabs button.active {
  border-color: var(--signal);
  color: var(--signal)
}

.admin-main {
  padding: 44px;
  max-width: 1100px
}

.admin-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 50px
}

.admin-top h2 {
  font-family: var(--display);
  font-size: 48px;
  letter-spacing: -.05em;
  text-transform: uppercase;
  margin: 0
}

.admin-status {
  font: 9px var(--mono);
  text-transform: uppercase;
  color: #777
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px
}

.field {
  display: grid;
  gap: 8px
}

.field.full {
  grid-column: 1/-1
}

.field label {
  font: 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #777
}

.field input,
.field textarea,
.field select {
  border: 1px solid #282828;
  background: #0b0b0b;
  padding: 13px;
  outline: none
}

.field textarea {
  min-height: 130px;
  resize: vertical
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #777
}

.admin-actions {
  display: flex;
  gap: 10px;
  margin-top: 28px
}

.admin-actions button {
  border: 1px solid #333;
  background: #111;
  padding: 12px 15px;
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em
}

.admin-actions .primary {
  background: var(--signal);
  color: #080808;
  border-color: var(--signal);
  font-weight: 700
}

.post-list {
  margin-top: 54px;
  border-top: 1px solid #292929
}

.post-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid #1f1f1f
}

.post-row time {
  font: 9px var(--mono);
  color: #666
}

.post-row h4 {
  margin: 0;
  font-size: 15px
}

.post-row button {
  border: 0;
  background: none;
  color: #777
}

/* responsive */
@media(max-width:1050px) {
  .site-nav {
    grid-template-columns: 1fr auto
  }

  .nav-center {
    display: none
  }

  .nav-toggle {
    display: block
  }

  .nav-right .nav-cta {
    display: none
  }

  .hero-title {
    font-size: 17vw
  }

  .hero-photo img {
    width: 115vw;
    max-width: none;
    object-position: center 55%
  }

  .hero-copy {
    max-width: 290px
  }

  .hero-meta {
    display: none
  }

  .section-head {
    grid-template-columns: 100px 1fr
  }

  .photo-rail {
    grid-template-columns: 1.15fr .85fr
  }

  .photo-card:nth-child(3) {
    display: none
  }

  .music-hero {
    grid-template-columns: 1fr
  }

  .track-row {
    grid-template-columns: 42px 1fr 90px 80px
  }

  .track-type {
    display: none
  }

  .player {
    grid-template-columns: 1fr 1.35fr
  }

  .player-side {
    display: none
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr
  }

  .footer-grid>div:last-child {
    display: none
  }

  .admin-shell {
    grid-template-columns: 210px 1fr
  }

  .admin-main {
    padding: 32px
  }
}

@media(max-width:760px) {
  :root {
    --player-h: 76px;
    --edge: 20px
  }

  .site-nav {
    height: 62px
  }

  .brand {
    font-size: 15px
  }

  .hero {
    min-height: 100svh
  }

  .hero-photo {
    align-items: center;
    top: 40px;
    bottom: 0
  }

  .hero-photo img {
    height: 86%;
    width: 145vw;
    object-position: center 55%;
    -webkit-mask-image: radial-gradient(ellipse 58% 72% at 50% 52%, #000 56%, transparent 86%);
    mask-image: radial-gradient(ellipse 58% 72% at 50% 52%, #000 56%, transparent 86%)
  }

  .hero-title {
    font-size: clamp(3.5rem, 16vw, 6.5rem);
    line-height: .85;
    padding: 0;
  }

  .hero-word.heads,
  .hero-word.tails {
    margin: 0;
  }

  .hero-word small {
    display: none
  }

  .hero-copy {
    left: var(--edge);
    right: var(--edge);
    bottom: var(--player-h);
    margin-bottom: 2rem;
    max-width: none
  }

  .hero-copy p {
    font-size: 15px;
    max-width: 310px
  }

  .hero-copy .btn:nth-child(2) {
    display: none
  }

  .hero-center-mark {
    width: 60px;
    height: 60px;
    opacity: 0.2
  }

  .hero-scroll {
    display: none
  }

  .section {
    padding: 86px 0
  }

  .section-head {
    display: block
  }

  .section-no {
    margin-bottom: 22px
  }

  .section-title {
    font-size: 16vw
  }

  .lede {
    font-size: 29px
  }

  .photo-rail {
    grid-template-columns: 1fr
  }

  .photo-card:nth-child(2) {
    margin-left: 22%;
    margin-top: -12%;
    border: 8px solid var(--bg)
  }

  .photo-card:nth-child(3) {
    display: block;
    margin-right: 18%;
    margin-top: 10%;
    aspect-ratio: 4/3
  }

  .music-copy h2 {
    font-size: 17vw
  }

  .music-copy p {
    font-size: 16px
  }

  .track-table {
    margin-top: 36px
  }

  .track-row {
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
    min-height: 66px
  }

  .track-type,
  .track-year {
    display: none
  }

  .track-link {
    font-size: 0
  }

  .track-link:after {
    content: '↗';
    font-size: 14px
  }

  .track-sub {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .doc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .doc.a,
  .doc.b,
  .doc.c,
  .doc.d,
  .doc.e {
    grid-column: auto;
    aspect-ratio: 4/5
  }

  .doc.a {
    grid-column: 1/-1;
    aspect-ratio: 4/3
  }

  .doc.e {
    grid-column: 1/-1;
    aspect-ratio: 16/10
  }

  .profile-split {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .profile-panel {
    min-height: 72vh;
    border-right: 0;
    border-bottom: 1px solid #222
  }

  .profile-info h3 {
    font-size: 20vw
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .footer-grid>div:first-child {
    grid-column: 1/-1
  }

  .footer-note {
    gap: 18px;
    flex-direction: column
  }

  .footer-mark {
    font-size: 18vw
  }

  .player {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 0 12px
  }

  .now-art {
    width: 42px;
    height: 42px
  }

  .transport {
    display: block
  }

  .controls {
    gap: 2px
  }

  .timeline,
  .wave {
    display: none
  }

  .ctrl {
    width: 28px
  }

  .ctrl.main {
    width: 38px;
    height: 38px
  }

  .now-sub {
    display: none
  }

  .page-hero {
    min-height: 62vh;
    padding: 120px var(--edge) 40px
  }

  .page-hero h1 {
    font-size: 21vw
  }

  .page-hero .side {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin-left: 20px;
    max-width: 260px;
    font-size: 14px
  }

  .epk-grid {
    grid-template-columns: 1fr
  }

  .fact {
    grid-template-columns: 100px 1fr
  }

  .admin-shell {
    display: block
  }

  .admin-side {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid #222;
    padding: 20px
  }

  .admin-tabs {
    grid-template-columns: repeat(3, 1fr)
  }

  .admin-main {
    padding: 26px 20px
  }

  .admin-grid {
    grid-template-columns: 1fr
  }

  .field.full {
    grid-column: auto
  }

  .admin-top h2 {
    font-size: 36px
  }

  .post-row {
    grid-template-columns: 1fr auto
  }

  .post-row time {
    display: none
  }
}

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

  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important
  }

  .hero-photo,
  .hero-word {
    transform: none !important
  }
}

/* V8 — music-reactive identity */
.hero {
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden
}

.hero-photo {
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 75%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 98%);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.85));
}

.hero-photo img {
  width: min(78vw, 1180px);
  height: 94svh;
  object-fit: contain;
  object-position: center bottom;
  filter: contrast(1.05) saturate(.94);
  transform: translate3d(calc(var(--mx, 0)*-9px), calc(var(--my, 0)*-6px + var(--hero-drift, 0)*1px), 0) scale(calc(1 + var(--beat, .06)*.012));
  transform-origin: 50% 72%
}

.hero-title {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 4;
  pointer-events: none;
}

.hero-word {
  position: relative;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(4.5rem, 11vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 calc(2px + var(--beat, 0)*8px) rgba(255, 255, 255, .15);
}

.hero-word.heads,
.hero-word.tails {
  align-self: center;
  margin: 0;
  left: auto;
  right: auto;
  mask-image: none;
  -webkit-mask-image: none;
}

#hero-audio-canvas {
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .94;
}

.hero-copy,
.hero-meta,
.hero-scroll,
.hero-center-mark {
  z-index: 6
}

.hero-center-mark {
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
  opacity: 0.2;
  transition: opacity .4s ease, border-color .3s ease, color .3s ease
}

.hero:hover .hero-center-mark,
.hero.music-on .hero-center-mark,
.hero-center-mark:hover {
  opacity: 0.05
}

.good-vibes {
  padding: 10vw 0 8vw
}

.vibe-grid {
  display: grid;
  grid-template-columns: 1.1fr .7fr .8fr;
  gap: 12px;
  align-items: end
}

.vibe-grid figure {
  margin: 0;
  overflow: hidden;
  background: #111
}

.vibe-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1)
}

.vibe-grid figure:hover img {
  transform: scale(1.025)
}

.vibe-grid figure:nth-child(1) {
  height: 60vw;
  max-height: 720px
}

.vibe-grid figure:nth-child(2) {
  height: 38vw;
  max-height: 500px
}

.vibe-grid figure:nth-child(3) {
  height: 48vw;
  max-height: 620px
}

.vibe-caption {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font: 10px/1.2 monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aaa
}

.subscribe {
  border-top: 1px solid #242424;
  border-bottom: 1px solid #242424;
  padding: 9vw 0
}

.subscribe-inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 7vw;
  align-items: end
}

.subscribe h2 {
  font-size: clamp(3.8rem, 9vw, 9rem);
  line-height: .77;
  letter-spacing: -.075em;
  margin: 0
}

.subscribe h2 em {
  font-family: Georgia, serif;
  font-weight: 400
}

.subscribe-form {
  display: flex;
  border-bottom: 1px solid #777
}

.subscribe-form input {
  flex: 1;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 18px 4px;
  font: inherit;
  outline: 0
}

.subscribe-form button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer
}

.subscribe-note {
  font-size: 12px;
  color: #888;
  margin-top: 12px
}

.book-film {
  position: relative;
  min-height: 82svh;
  display: flex;
  align-items: flex-end;
  background: #080808;
  overflow: hidden
}

.book-film-bg {
  position: absolute;
  inset: 0
}

.book-film-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .58;
  filter: saturate(.82) contrast(1.1)
}

.book-film-bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .86))
}

.book-film-copy {
  position: relative;
  z-index: 2;
  padding: 8vw 4vw;
  width: min(900px, 92vw)
}

.book-film h2 {
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: .75;
  letter-spacing: -.08em;
  margin: 0 0 24px
}

.book-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.player {
  background: rgba(3, 3, 3, .97);
  border-top: 1px solid #343434;
  box-shadow: 0 -12px 60px rgba(0, 0, 0, .42)
}

.now-art {
  background: #0b0b0b;
  border: 1px solid #303030;
  color: #ff3b1f
}

.wave i {
  transition: height .1s ease;
  transform: scaleY(calc(.42 + var(--beat, .06)*.9));
  transform-origin: center
}

.track-row.active {
  background: #f1eee7;
  color: #090909
}

.track-row.active .track-sub {
  color: #555
}

.track-row.active .track-play {
  color: #ff3b1f
}

.track-row:hover {
  padding-left: 10px
}

@media(max-width:800px) {
  .hero-photo img {
    width: 118vw;
    height: 82svh;
    object-position: center bottom
  }

  .hero-word {
    font-size: clamp(3.5rem, 15vw, 6.5rem);
  }

  .hero-word.heads,
  .hero-word.tails {
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    margin: 0;
  }

  .hero-copy {
    max-width: 74vw
  }

  .vibe-grid {
    grid-template-columns: 1fr 1fr
  }

  .vibe-grid figure:nth-child(1) {
    grid-column: 1/-1;
    height: 110vw
  }

  .vibe-grid figure:nth-child(2),
  .vibe-grid figure:nth-child(3) {
    height: 65vw
  }

  .subscribe-inner {
    grid-template-columns: 1fr
  }

  .book-film {
    min-height: 72svh
  }
}

/* V8.1 — listening system */
.player-status {
  font: 8px var(--mono);
  letter-spacing: .13em;
  color: #ff3b1f;
  margin-top: 5px;
  text-transform: uppercase
}

.track-head {
  display: grid;
  grid-template-columns: 46px minmax(260px, 1.7fr) minmax(110px, .55fr) 90px 100px;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid #2b2b2b;
  font: 8px var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #666
}

.track-row {
  cursor: pointer
}

.track-row.active {
  background: #111;
  color: #f4f0e9;
  box-shadow: inset 3px 0 0 var(--signal)
}

.track-row.is-playing {
  background: #f1eee7;
  color: #090909
}

.track-row.is-playing .track-sub,
.track-row.is-playing .track-type,
.track-row.is-playing .track-year {
  color: #555
}

.track-row.is-playing .track-play {
  color: var(--signal);
  border-color: transparent;
  font-size: 9px
}

.queue-item.active {
  background: #121212;
  box-shadow: inset 2px 0 var(--signal)
}

#hero-audio-canvas {
  pointer-events: none
}

.hero:after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 32%, transparent 0 18%, rgba(0, 0, 0, .04) 35%, rgba(0, 0, 0, .42) 100%)
}

.hero-photo img {
  height: 94svh;
  width: min(65vw, 860px);
  object-fit: contain;
  object-position: center bottom;
}

.hero-word {
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .25))
}

.hero-word.heads,
.hero-word.tails {
  mask-image: none;
  -webkit-mask-image: none;
  margin: 0;
}

.booking-video {
  background: #050505;
  padding: clamp(70px, 8vw, 130px) var(--edge);
  border-top: 1px solid #181818
}

.booking-video-grid {
  width: min(1280px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center
}

.booking-video-copy h2 {
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: .76;
  letter-spacing: -.075em;
  margin: 12px 0 28px
}

.ig-stage {
  position: relative;
  min-height: 720px;
  background: #090909;
  border: 1px solid #222;
  overflow: hidden
}

.ig-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #090909
}

.ig-fallback {
  position: absolute;
  inset: auto 20px 20px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  pointer-events: none
}

.ig-fallback a {
  pointer-events: auto
}

.booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 30px
}

.booking-form .full {
  grid-column: 1/-1
}

.booking-form input,
.booking-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #2b2b2b;
  background: #080808;
  color: #eee;
  padding: 15px 14px;
  font: 12px var(--mono);
  outline: none
}

.booking-form textarea {
  min-height: 120px;
  resize: vertical
}

.booking-form input:focus,
.booking-form textarea:focus {
  border-color: #777
}

.booking-form button {
  grid-column: 1/-1;
  padding: 16px;
  background: #f1eee7;
  color: #080808;
  border: 0;
  font: 700 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase
}

.booking-note {
  grid-column: 1/-1;
  font: 9px var(--mono);
  color: #777;
  min-height: 14px
}

@media(max-width:1024px) {
  .track-head {
    grid-template-columns: 42px 1fr 90px 80px
  }

  .track-head span:nth-child(3) {
    display: none
  }

  .booking-video-grid {
    grid-template-columns: 1fr
  }

  .ig-stage {
    min-height: 680px
  }
}

@media(max-width:700px) {
  .track-head {
    grid-template-columns: 38px 1fr auto
  }

  .track-head span:nth-child(3),
  .track-head span:nth-child(4) {
    display: none
  }

  .hero-photo img {
    height: 86svh;
    width: 126vw;
    object-position: center 8%
  }

  .hero-word.heads,
  .hero-word.tails {
    top: auto;
    bottom: auto;
  }

  .ig-stage {
    min-height: 590px
  }

  .booking-form {
    grid-template-columns: 1fr
  }

  .booking-form .full,
  .booking-form button {
    grid-column: 1
  }

  .booking-video {
    padding-left: 20px;
    padding-right: 20px
  }
}

/* V8.5 — continuous music / chromatic signal system */
:root {
  --signal: #d7ff35;
  --signal-2: #8dff4a;
  --signal-3: #f4ffd0;
  --signal-4: #e9ece3
}

.hero-word,
.hero-word small,
.hero-center-mark,
.section-no,
.track-row.active .track-title,
.player-status {
  transition: color .55s ease, text-shadow .55s ease, transform .18s ease, letter-spacing .18s ease, filter .35s ease
}

.hero.music-on .hero-title {
  transform: translate(-50%, -50%) scale(calc(1 + var(--beat-scale, 0) * 0.035));
}

.hero.music-on .hero-word {
  color: #f5f5f3;
  transform: translate3d(calc(var(--mx, 0)*8px), calc(var(--my, 0)*5px), 0);
  letter-spacing: calc(-.03em + var(--beat-tracking, 0) * 0.012em);
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.85),
               0 0 calc(15px + var(--beat-glow, 0) * 35px) rgba(204, 255, 0, 0.4),
               0 0 calc(30px + var(--beat-glow, 0) * 70px) rgba(255, 153, 0, 0.25);
}

.hero.music-on .hero-word.tails {
  color: #f5f5f3;
  transform: translate3d(calc(var(--mx, 0)*-8px), calc(var(--my, 0)*-4px), 0);
  letter-spacing: calc(-.03em + var(--beat-tracking, 0) * 0.012em);
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.85),
               0 0 calc(15px + var(--beat-glow, 0) * 35px) rgba(204, 255, 0, 0.4),
               0 0 calc(30px + var(--beat-glow, 0) * 70px) rgba(255, 153, 0, 0.25);
}

.hero.music-on .hero-word.or {
  color: #f5f5f3;
  transform: translate3d(calc(var(--mx, 0)*5px), calc(var(--my, 0)*3px), 0) scale(calc(1 + var(--beat-scale, 0) * 0.02));
  letter-spacing: calc(0.12em + var(--beat-tracking, 0) * 0.02em);
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.85),
               0 0 calc(15px + var(--beat-glow, 0) * 35px) rgba(255, 153, 0, 0.4),
               0 0 calc(25px + var(--beat-glow, 0) * 50px) rgba(204, 255, 0, 0.25);
}

.hero.music-on .hero-center-mark {
  color: #f5f5f3;
  opacity: 0.05;
}

.hero.music-on .hero-photo {
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.85)) saturate(calc(1 + var(--beat, 0)*.04)) contrast(calc(1 + var(--beat, 0)*.02));
}

.theme-shift .hero-word,
.theme-shift .now-art {
  filter: blur(1px);
  transform: translateY(-2px)
}

.player .now-art {
  background: var(--signal);
  color: #050505;
  transition: background .55s ease, color .55s ease, filter .3s ease
}

.progress-fill,
.progress-knob {
  background: var(--signal) !important
}

.wave i {
  background: var(--signal) !important
}

.track-row.active {
  border-color: color-mix(in srgb, var(--signal) 48%, #2b2b2b)
}

.route-leave main,
.route-leave body>header {
  opacity: .22;
  filter: blur(2px);
  transition: opacity .16s ease, filter .16s ease
}

main,
body>header {
  transition: opacity .32s ease, filter .32s ease
}

.nav-center .shop-link::after {
  content: 'SOON';
  font: 7px var(--mono);
  margin-left: 5px;
  color: var(--signal);
  vertical-align: top
}

.mobile-open {
  display: flex !important;
  position: fixed !important;
  inset: 62px 0 auto 0 !important;
  padding: 24px 20px !important;
  background: #070707 !important;
  border-bottom: 1px solid #222 !important;
  flex-direction: column !important;
  gap: 18px !important
}

.music-stage {
  position: relative;
  min-height: 76vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid #202020;
  background: #050505;
  padding: 120px 3vw 46px
}

.music-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 32%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 30%);
  pointer-events: none
}

.music-stage-grid {
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: linear-gradient(color-mix(in srgb, var(--signal) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--signal) 14%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%)
}

.music-stage-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: 6vw;
  align-items: end
}

.music-stage h1 {
  font: 700 clamp(74px, 13vw, 220px)/.72 var(--sans);
  letter-spacing: -.075em;
  margin: 0;
  color: #f1efe9
}

.music-stage h1 span {
  color: var(--signal)
}

.music-stage-side {
  max-width: 520px
}

.music-stage-side .now-title {
  font: 700 clamp(34px, 5vw, 72px)/.9 var(--sans);
  letter-spacing: -.05em;
  margin: 16px 0 8px
}

.music-stage-side .now-sub {
  font-size: 12px;
  line-height: 1.5;
  color: #aaa
}

.music-stage-kicker {
  font: 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--signal)
}

.music-stage-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px
}

.music-stage-actions button {
  border: 1px solid #343434;
  background: #0a0a0a;
  color: #f2f0ea;
  padding: 14px 18px;
  font: 9px var(--mono);
  text-transform: uppercase;
  cursor: pointer
}

.music-stage-actions .primary {
  background: var(--signal);
  color: #050505;
  border-color: var(--signal)
}

.shop-coming {
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 130px 24px 80px;
  position: relative;
  overflow: hidden
}

.shop-coming::before {
  content: '';
  position: absolute;
  width: 55vw;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
  transform: rotate(45deg);
  opacity: .45
}

.shop-coming>* {
  position: relative
}

.shop-coming h1 {
  font: 700 clamp(74px, 15vw, 230px)/.72 var(--sans);
  letter-spacing: -.075em;
  margin: 12px 0 24px
}

.shop-coming h1 em {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--signal)
}

.shop-coming p {
  max-width: 560px;
  margin: auto;
  color: #aaa;
  line-height: 1.7
}

.shop-coming .subscribe-form {
  max-width: 460px;
  margin: 28px auto 0
}

.commerce-lock {
  margin-top: 34px;
  border: 1px solid #2b2b2b;
  padding: 28px;
  background: #0a0a0a
}

.commerce-lock h3 {
  font-size: 28px;
  margin: 6px 0
}

.commerce-lock .lock-state {
  font: 9px var(--mono);
  color: var(--signal);
  text-transform: uppercase;
  letter-spacing: .12em
}

@media(max-width:760px) {
  .music-stage {
    padding: 105px 20px 34px;
    min-height: 70vh
  }

  .music-stage-inner {
    grid-template-columns: 1fr;
    gap: 42px
  }

  .music-stage h1 {
    font-size: clamp(68px, 25vw, 118px)
  }

  .music-stage-side .now-title {
    font-size: 42px
  }

  .shop-coming h1 {
    font-size: clamp(68px, 24vw, 120px)
  }
}

@media(prefers-reduced-motion:reduce) {

  .hero.music-on .hero-word,
  .hero.music-on .hero-word.tails {
    transform: none !important
  }

  .route-leave main,
  .route-leave body>header {
    filter: none
  }
}

/* V8.6 — music application */
.music-app {
  min-height: calc(100vh - var(--player-h));
  padding-top: 74px;
  background: #07090d;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  color: #f4f1eb
}

.music-sidebar {
  position: sticky;
  top: 74px;
  height: calc(100vh - 74px - var(--player-h));
  border-right: 1px solid #242831;
  background: #11141a;
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
  z-index: 4
}

.music-side-mark {
  font: 800 18px var(--sans);
  letter-spacing: -.04em;
  color: var(--signal)
}

.music-side-mark span {
  font: 9px var(--mono);
  letter-spacing: .12em;
  color: #7f8691;
  margin-left: 7px
}

.music-side-nav {
  display: grid;
  gap: 5px;
  margin: 30px 0
}

.music-side-nav a {
  min-height: 44px;
  padding: 0 13px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 10px;
  color: #9da3ad;
  font-size: 13px
}

.music-side-nav a:hover,
.music-side-nav a.active {
  background: #262b34;
  color: #fff
}

.music-side-label {
  margin: 12px 12px 8px;
  font: 8px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #59606c
}

.music-filter {
  border: 0;
  background: none;
  color: #9299a4;
  text-align: left;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.music-filter:hover,
.music-filter.active {
  background: #1b1f26;
  color: #fff
}

.music-filter b {
  font: 8px var(--mono);
  color: #626a76
}

.music-side-foot {
  margin-top: auto;
  border-top: 1px solid #292d35;
  padding: 16px 10px 0;
  display: flex;
  justify-content: space-between;
  font: 8px var(--mono);
  letter-spacing: .1em;
  color: #626975
}

.music-workspace {
  min-width: 0;
  padding: 22px clamp(18px, 2.3vw, 38px) 80px
}

.music-toolbar {
  height: 54px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px
}

.music-search {
  height: 44px;
  width: min(480px, 55vw);
  border: 1px solid #292e37;
  border-radius: 999px;
  background: #171b22;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  color: #8e96a1
}

.music-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: 12px var(--sans)
}

.flip-button {
  width: auto !important;
  padding: 0 18px !important;
  border: 1px solid color-mix(in srgb, var(--signal) 45%, #333) !important;
  border-radius: 999px !important;
  color: var(--signal) !important;
  font: 9px var(--mono) !important;
  letter-spacing: .1em
}

.music-feature {
  height: clamp(390px, 49vw, 610px);
  max-height: 64vh;
  min-height: 420px;
  position: relative;
  overflow: hidden;
  border: 1px solid #2b3039;
  border-radius: 24px;
  background: #0b0e13;
  isolation: isolate
}

.music-feature:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(3, 4, 6, .86) 100%);
  z-index: 3;
  pointer-events: none
}

.music-feature-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--signal) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--signal) 14%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .45
}

.music-feature-words {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3%;
  font: 800 clamp(80px, 12vw, 190px)/.75 var(--sans);
  letter-spacing: -.08em;
  color: color-mix(in srgb, var(--signal) 48%, #20242b);
  overflow: hidden
}

.music-feature-cards .mf-card {
  position: absolute;
  width: 27%;
  height: 58%;
  object-fit: cover;
  top: 16%;
  border-radius: 18px;
  filter: saturate(.7) brightness(.62);
  opacity: .72
}

.mf-left {
  left: 6%;
  transform: rotate(-4deg)
}

.mf-mid {
  left: 36.5%;
  transform: translateY(-7%)
}

.mf-right {
  right: 5%;
  transform: rotate(4deg)
}

.music-feature-photo {
  position: absolute;
  z-index: 2;
  inset: 2% 22% 0;
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.music-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 20px 40px #000)
}

.music-feature-copy {
  position: absolute;
  z-index: 5;
  left: clamp(20px, 3vw, 44px);
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(20px, 3vw, 38px)
}

.music-feature-copy .now-title {
  font: 750 clamp(34px, 5vw, 78px)/.9 var(--sans);
  letter-spacing: -.055em;
  max-width: 70%;
  margin: 10px 0 6px
}

.music-feature-copy .now-sub {
  font: 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #abb1ba
}

.feature-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 9px
}

.feature-play {
  width: 58px !important;
  height: 58px !important;
  background: var(--signal) !important;
  color: #050607 !important;
  border-color: var(--signal) !important
}

.feature-next {
  width: auto !important;
  padding: 0 14px !important;
  border: 1px solid #414750 !important;
  border-radius: 999px !important;
  font: 8px var(--mono) !important;
  letter-spacing: .1em
}

.music-browser {
  padding-top: 32px
}

.music-browser-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px
}

.music-browser-head h2 {
  margin: 5px 0 0;
  font-size: clamp(24px, 3vw, 42px);
  letter-spacing: -.04em
}

.eyebrow,
.music-count {
  font: 8px var(--mono);
  letter-spacing: .13em;
  color: #747c88;
  text-transform: uppercase
}

.music-chips {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 20px 0 16px
}

.music-chips button {
  flex: 0 0 auto;
  border: 1px solid #333945;
  border-radius: 999px;
  background: #101319;
  color: #a8afb8;
  padding: 9px 16px;
  font: 9px var(--mono);
  text-transform: uppercase
}

.music-chips button.active {
  background: var(--signal);
  border-color: var(--signal);
  color: #050607
}

.music-popular-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 30px
}

.popular-card {
  min-width: 0;
  border: 0;
  background: #101319;
  border-radius: 14px;
  padding: 8px;
  text-align: left;
  color: #fff;
  transition: .2s
}

.popular-card:hover {
  background: #191e26;
  transform: translateY(-3px)
}

.popular-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px
}

.popular-card span {
  display: block;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.popular-card small {
  display: block;
  margin-top: 4px;
  font: 8px var(--mono);
  color: #707884;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.music-app .track-table {
  margin-top: 0;
  border-color: #252a33
}

.music-app .track-row {
  background: transparent;
  border-color: #1d222a;
  border-radius: 8px
}

.music-app .track-row:hover {
  background: #141820
}

.music-app .track-row.is-playing {
  background: color-mix(in srgb, var(--signal) 12%, #151820);
  color: #fff
}

.music-app .track-head {
  border-color: #272c35
}

.music-app~.site-footer {
  display: none
}

@media(max-width:980px) {
  .music-app {
    grid-template-columns: 78px minmax(0, 1fr)
  }

  .music-sidebar {
    padding: 24px 10px
  }

  .music-side-mark span,
  .music-side-nav span,
  .music-side-label,
  .music-filter:not(.active),
  .music-filter b,
  .music-side-foot {
    display: none
  }

  .music-side-nav a {
    justify-content: center;
    font-size: 15px
  }

  .music-filter.active {
    justify-content: center;
    font-size: 0
  }

  .music-filter.active:after {
    content: 'ALL';
    font: 8px var(--mono)
  }

  .music-popular-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .popular-card:nth-child(n+4) {
    display: none
  }

  .music-feature-photo {
    inset: 3% 12% 0
  }

  .music-feature-words {
    font-size: 15vw
  }
}

@media(max-width:700px) {
  .music-app {
    display: block;
    padding-top: 64px
  }

  .music-sidebar {
    display: none
  }

  .music-workspace {
    padding: 12px 14px 40px
  }

  .music-toolbar {
    height: 48px;
    margin-bottom: 10px
  }

  .music-search {
    width: 100%
  }

  .flip-button {
    display: none
  }

  .music-feature {
    min-height: 440px;
    height: 64vh;
    max-height: 590px;
    border-radius: 18px
  }

  .music-feature-cards .mf-card {
    width: 42%;
    height: 42%;
    top: 15%
  }

  .mf-left {
    left: -8%
  }

  .mf-mid {
    left: 30%
  }

  .mf-right {
    right: -8%
  }

  .music-feature-photo {
    inset: 5% -4% 0
  }

  .music-feature-words {
    align-items: flex-start;
    padding-top: 25%;
    font-size: 24vw
  }

  .music-feature-copy .now-title {
    font-size: 42px;
    max-width: 100%;
    padding-right: 66px
  }

  .feature-next {
    display: none
  }

  .feature-play {
    width: 52px !important;
    height: 52px !important
  }

  .music-popular-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory
  }

  .popular-card {
    flex: 0 0 42%;
    scroll-snap-align: start
  }

  .popular-card:nth-child(n) {
    display: block
  }

  .music-browser-head {
    align-items: start
  }

  .music-count {
    display: none
  }

  .music-app .track-head {
    display: none
  }
}

/* V8.7 evolution — persistent signal language beyond the landing hero */
.continuity-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .82;
  background: #050505
}

body>.site-nav,
body>.player,
body>.queue,
body>.noise {
  position: fixed
}

body>main,
body>.site-footer,
body>header {
  position: relative;
  z-index: 1
}

body>main:not(.music-app) {
  background: linear-gradient(180deg, rgba(5, 5, 5, .88), rgba(5, 5, 5, .95))
}

.music-app {
  position: relative;
  z-index: 1;
  background: rgba(5, 5, 5, .88)
}

@media (prefers-reduced-motion:reduce) {
  .continuity-canvas {
    display: none
  }
}

/* V8.8 — Music is the V8.6 hero opened into an application. No new brand palette. */
.music-app-v2 {
  --rail: 218px;
  background: #050505 !important;
  color: #f5f2ec;
  grid-template-columns: var(--rail) minmax(0, 1fr)
}

.music-app-v2 .music-sidebar {
  background: rgba(5, 5, 5, .96);
  border-right: 1px solid rgba(255, 255, 255, .13);
  padding: 28px 18px 20px;
  backdrop-filter: blur(16px)
}

.music-app-v2 .music-side-mark {
  display: block;
  text-decoration: none;
  color: #fff;
  font: 800 24px/1 var(--sans);
  letter-spacing: -.06em
}

.music-app-v2 .music-side-mark i {
  font-style: normal;
  color: var(--signal)
}

.music-app-v2 .music-side-mark span {
  color: var(--signal);
  font-size: 8px;
  letter-spacing: .18em
}

.music-app-v2 .music-side-nav {
  margin: 38px 0 28px;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

.music-app-v2 .music-side-nav a {
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  min-height: 48px;
  padding: 0 4px;
  color: #898989;
  gap: 13px
}

.music-app-v2 .music-side-nav a b {
  font: 8px var(--mono);
  font-weight: 400;
  color: #515151
}

.music-app-v2 .music-side-nav a:hover,
.music-app-v2 .music-side-nav a.active {
  background: transparent;
  color: #fff
}

.music-app-v2 .music-side-nav a.active b {
  color: var(--signal)
}

.music-app-v2 .music-side-rule {
  height: 1px;
  background: var(--signal);
  opacity: .7;
  margin: 0 0 22px
}

.music-app-v2 .music-side-label {
  margin: 0 4px 8px;
  color: #555
}

.music-app-v2 .music-filter {
  border-radius: 0;
  padding: 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: #777
}

.music-app-v2 .music-filter:hover,
.music-app-v2 .music-filter.active {
  background: transparent;
  color: #fff
}

.music-app-v2 .music-filter.active:before {
  content: '■';
  font-size: 6px;
  color: var(--signal);
  margin-right: 8px
}

.music-app-v2 .music-filter span {
  margin-right: auto
}

.music-app-v2 .music-side-foot {
  border-color: rgba(255, 255, 255, .12)
}

.music-app-v2 .music-workspace {
  padding: 18px clamp(16px, 2.1vw, 34px) 90px;
  background: transparent
}

.music-app-v2 .music-toolbar {
  height: 58px;
  margin: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  gap: 18px
}

.music-route-label {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap
}

.music-route-label span,
.music-route-label b,
.music-route-label em {
  font: 8px var(--mono);
  letter-spacing: .14em;
  font-style: normal
}

.music-route-label span {
  color: var(--signal)
}

.music-route-label b {
  color: #fff
}

.music-route-label em {
  color: #555
}

.music-app-v2 .music-search {
  margin-left: auto;
  width: min(330px, 32vw);
  height: 36px;
  border: 0;
  border-bottom: 1px solid #343434;
  border-radius: 0;
  background: transparent;
  padding: 0 2px
}

.music-app-v2 .music-search input {
  font: 8px var(--mono);
  letter-spacing: .1em
}

.music-app-v2 .flip-button {
  height: 36px !important;
  border-radius: 0 !important;
  border-color: var(--signal) !important
}

.music-app-v2 .music-feature {
  height: min(70vh, 720px);
  min-height: 540px;
  max-height: none;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0;
  background: #050505;
  overflow: hidden
}

.music-app-v2 .music-feature:after {
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .84) 92%);
  z-index: 4
}

.music-app-v2 #music-stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}

.music-stage-rule {
  position: absolute;
  z-index: 6;
  left: 18px;
  right: 18px;
  height: 1px;
  background: rgba(255, 255, 255, .14)
}

.music-stage-rule.top {
  top: 18px
}

.music-stage-rule.bottom {
  bottom: 18px
}

.music-app-v2 .music-feature-words {
  z-index: 2;
  padding: 0 2.2%;
  font-size: clamp(92px, 13.4vw, 220px);
  color: #f3f0ea;
  mix-blend-mode: difference;
  opacity: .94;
  pointer-events: none
}

.music-app-v2 .music-feature-words span {
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .25))
}

.music-app-v2 .music-feature-words span:first-child {
  transform: translateX(-2%);
  mask-image: linear-gradient(90deg, #000 0 52%, rgba(0, 0, 0, .72) 62%, rgba(0, 0, 0, .16) 74%, transparent 87%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 52%, rgba(0, 0, 0, .72) 62%, rgba(0, 0, 0, .16) 74%, transparent 87%)
}

.music-app-v2 .music-feature-words span:last-child {
  transform: translateX(2%);
  mask-image: linear-gradient(270deg, #000 0 50%, rgba(0, 0, 0, .72) 62%, rgba(0, 0, 0, .16) 76%, transparent 89%);
  -webkit-mask-image: linear-gradient(270deg, #000 0 50%, rgba(0, 0, 0, .72) 62%, rgba(0, 0, 0, .16) 76%, transparent 89%)
}

.music-app-v2 .music-feature-photo {
  z-index: 3;
  inset: -1% 24% 0
}

.music-app-v2 .music-feature-photo img {
  filter: drop-shadow(0 28px 44px rgba(0, 0, 0, .8));
  transform: scale(1.02);
  transform-origin: center bottom
}

.music-stage-index {
  position: absolute;
  z-index: 6;
  top: 31px;
  left: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 8px var(--mono);
  color: #fff
}

.music-stage-index i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--signal), rgba(255, 255, 255, .15), var(--signal))
}

.music-app-v2 .music-feature-copy {
  z-index: 7;
  left: 30px;
  right: 30px;
  bottom: 34px
}

.music-app-v2 .music-stage-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(430px, 48%);
  font: 8px var(--mono);
  letter-spacing: .14em;
  color: #fff
}

.music-app-v2 .music-stage-kicker i {
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, .25)
}

.music-app-v2 .music-feature-copy .now-title {
  font-size: clamp(44px, 6.5vw, 104px);
  max-width: 72%;
  margin: 12px 0 7px;
  line-height: .82
}

.music-app-v2 .music-feature-copy .now-sub {
  color: #bcb8b0
}

.feature-progress {
  width: min(500px, 55%);
  height: 1px;
  background: rgba(255, 255, 255, .22);
  margin-top: 18px;
  overflow: hidden
}

.feature-progress-fill {
  width: 0;
  height: 100%;
  background: var(--signal)
}

.music-app-v2 .feature-play {
  border-radius: 50% !important;
  width: 64px !important;
  height: 64px !important
}

.music-app-v2 .feature-next {
  border-radius: 0 !important
}

.music-stage-caption {
  position: absolute;
  right: 30px;
  top: 31px;
  z-index: 6;
  font: 7px var(--mono);
  letter-spacing: .13em;
  color: #737373
}

.music-app-v2 .music-browser {
  padding-top: 52px
}

.music-app-v2 .music-browser-head {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .15)
}

.music-app-v2 .music-browser-head h2 {
  font-size: clamp(38px, 5.2vw, 76px);
  line-height: .92;
  margin-top: 9px;
  letter-spacing: -.06em
}

.music-browser-meta {
  display: flex;
  gap: 30px;
  font: 8px var(--mono);
  letter-spacing: .12em;
  color: #666
}

.music-app-v2 .music-chips {
  padding: 16px 0 34px;
  gap: 0;
  border-bottom: 0
}

.music-app-v2 .music-chips button {
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0;
  background: transparent;
  padding: 8px 18px;
  color: #666
}

.music-app-v2 .music-chips button:first-child {
  padding-left: 0
}

.music-app-v2 .music-chips button.active {
  background: transparent;
  color: var(--signal)
}

.music-popular-label,
.music-table-label {
  display: flex;
  justify-content: space-between;
  padding: 0 0 10px;
  font: 7px var(--mono);
  letter-spacing: .14em;
  color: #666
}

.music-app-v2 .music-popular-strip {
  gap: 8px;
  margin-bottom: 50px
}

.music-app-v2 .popular-card {
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: #fff
}

.music-app-v2 .popular-card:hover {
  background: transparent;
  transform: none
}

.popular-image {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  margin-bottom: 11px
}

.music-app-v2 .popular-card img {
  border-radius: 0;
  margin: 0;
  aspect-ratio: 1.05/1;
  filter: saturate(.82) contrast(1.04);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .35s
}

.music-app-v2 .popular-card:hover img {
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.05)
}

.popular-image i {
  position: absolute;
  top: 8px;
  left: 8px;
  font: 7px var(--mono);
  font-style: normal;
  background: #050505;
  color: var(--signal);
  padding: 5px 6px
}

.music-app-v2 .popular-card span:not(.popular-image) {
  font-size: 13px
}

.music-app-v2 .popular-card small {
  color: #666
}

.music-app-v2 .track-table {
  border-top: 1px solid rgba(255, 255, 255, .18)
}

.music-app-v2 .track-row {
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
  min-height: 64px
}

.music-app-v2 .track-row:hover {
  background: rgba(255, 255, 255, .035) !important
}

.music-app-v2 .track-row.is-playing {
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal) 11%, transparent), transparent 62%) !important
}

.music-app-v2 .track-row.is-playing .track-title {
  color: var(--signal)
}

body.music-route-enter .music-feature-photo {
  animation: musicPhotoIn .75s cubic-bezier(.2, .8, .2, 1) both
}

body.music-route-enter .music-feature-words span:first-child {
  animation: musicHeadIn .8s cubic-bezier(.2, .8, .2, 1) both
}

body.music-route-enter .music-feature-words span:last-child {
  animation: musicTailIn .8s cubic-bezier(.2, .8, .2, 1) both
}

@keyframes musicPhotoIn {
  from {
    opacity: .45;
    transform: scale(1.13)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes musicHeadIn {
  from {
    transform: translateX(-12%);
    opacity: .15
  }

  to {
    transform: translateX(-2%);
    opacity: 1
  }
}

@keyframes musicTailIn {
  from {
    transform: translateX(12%);
    opacity: .15
  }

  to {
    transform: translateX(2%);
    opacity: 1
  }
}

@media(max-width:980px) {
  .music-app-v2 {
    --rail: 76px
  }

  .music-app-v2 .music-sidebar {
    padding-inline: 10px
  }

  .music-app-v2 .music-side-mark {
    text-align: center
  }

  .music-app-v2 .music-side-mark span {
    display: none
  }

  .music-app-v2 .music-side-nav a b {
    display: none
  }

  .music-app-v2 .music-feature {
    min-height: 520px
  }

  .music-app-v2 .music-feature-photo {
    inset: 2% 12% 0
  }

  .music-route-label em {
    display: none
  }

  .music-stage-caption {
    display: none
  }

  .music-app-v2 .music-feature-words {
    font-size: 15.8vw
  }

  .music-app-v2 .music-filter.active:before {
    display: none
  }
}

@media(max-width:700px) {
  .music-app-v2 .music-workspace {
    padding: 8px 10px 40px
  }

  .music-app-v2 .music-toolbar {
    height: 48px
  }

  .music-route-label b {
    display: none
  }

  .music-app-v2 .music-search {
    width: 58vw;
    margin-left: auto
  }

  .music-app-v2 .music-feature {
    height: 68svh;
    min-height: 500px;
    border-left: 0;
    border-right: 0
  }

  .music-app-v2 .music-feature-photo {
    inset: 5% -8% 0
  }

  .music-app-v2 .music-feature-words {
    align-items: center;
    padding: 0 2%;
    font-size: 24vw;
    line-height: .72
  }

  .music-app-v2 .music-feature-copy {
    left: 16px;
    right: 16px;
    bottom: 24px
  }

  .music-app-v2 .music-feature-copy .now-title {
    font-size: clamp(38px, 12vw, 56px);
    max-width: 100%;
    padding-right: 62px
  }

  .music-app-v2 .music-stage-kicker {
    width: 70%
  }

  .feature-progress {
    width: 70%
  }

  .music-app-v2 .feature-play {
    width: 54px !important;
    height: 54px !important
  }

  .music-app-v2 .music-browser {
    padding-top: 36px
  }

  .music-app-v2 .music-browser-head h2 {
    font-size: 13vw
  }

  .music-browser-meta {
    display: none
  }

  .music-app-v2 .music-popular-strip {
    gap: 7px
  }

  .music-app-v2 .popular-card {
    flex-basis: 58%
  }

  .music-popular-label,
  .music-table-label {
    padding-inline: 2px
  }
}

/* V8.9 — Music application refinement: V8.6 identity, software-grade hierarchy */
.music-app-v2 {
  position: relative;
  transition: grid-template-columns .38s cubic-bezier(.2, .8, .2, 1)
}

.music-app-v2 .music-workspace {
  max-width: 1800px;
  width: 100%;
  margin-inline: auto
}

.music-queue-toggle {
  height: 36px;
  border: 0;
  border-bottom: 1px solid #343434;
  background: transparent;
  color: #8d8d8d;
  padding: 0 2px;
  font: 8px var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap
}

.music-queue-toggle span {
  color: var(--signal);
  margin-left: 7px
}

.music-queue-toggle:hover {
  color: #fff;
  border-color: #777
}

.music-expand {
  position: absolute;
  right: 30px;
  bottom: 34px;
  z-index: 8;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #d8d4cd;
  padding: 8px 0;
  font: 8px var(--mono);
  letter-spacing: .13em
}

.music-expand:hover {
  color: #fff;
  border-color: var(--signal)
}

.music-app-v2 .music-feature {
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28)
}

.music-app-v2 .music-feature:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: calc(100% / 24) calc(100% / 14);
  mask-image: linear-gradient(to bottom, black, transparent 65%);
  opacity: .35
}

.music-app-v2 .music-feature-copy {
  max-width: 1100px
}

.music-app-v2 .music-feature-copy .now-title {
  letter-spacing: -.07em;
  text-wrap: balance
}

.music-app-v2 .music-feature-copy .now-sub {
  font: 9px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase
}

.music-app-v2 .feature-progress {
  position: relative;
  height: 18px;
  background: transparent;
  overflow: visible;
  cursor: pointer
}

.music-app-v2 .feature-progress:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 1px;
  background: rgba(255, 255, 255, .28)
}

.music-app-v2 .feature-progress-fill {
  position: absolute;
  top: 8px;
  height: 1px
}

.music-app-v2 .popular-card {
  position: relative;
  text-align: left
}

.music-app-v2 .popular-card:after {
  content: 'PLAY';
  position: absolute;
  right: 8px;
  top: 8px;
  background: #050505;
  color: #fff;
  padding: 5px 7px;
  font: 7px var(--mono);
  letter-spacing: .1em;
  opacity: 0;
  transform: translateY(4px);
  transition: .2s
}

.music-app-v2 .popular-card:hover:after,
.music-app-v2 .popular-card:focus-visible:after {
  opacity: 1;
  transform: none
}

.music-app-v2 .track-row {
  transition: background .18s ease, padding .18s ease, box-shadow .18s ease
}

.music-app-v2 .track-row:hover {
  padding-left: 8px
}

.music-app-v2 .track-row:focus-within {
  outline: 1px solid var(--signal);
  outline-offset: -1px
}

kbd {
  font: 7px var(--mono);
  border: 1px solid #333;
  padding: 2px 4px;
  color: #888;
  background: #0a0a0a
}

.music-upnext {
  position: fixed;
  z-index: 930;
  top: 74px;
  right: 0;
  bottom: var(--player-h);
  width: min(390px, 92vw);
  background: rgba(5, 5, 5, .985);
  border-left: 1px solid rgba(255, 255, 255, .14);
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-shadow: -30px 0 80px rgba(0, 0, 0, .38)
}

.music-upnext.open {
  transform: none
}

.upnext-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #282828;
  padding-bottom: 18px
}

.upnext-head span {
  font: 7px var(--mono);
  letter-spacing: .15em;
  color: var(--signal)
}

.upnext-head h3 {
  font-size: 36px;
  line-height: .9;
  letter-spacing: -.055em;
  margin: 8px 0 0
}

.music-queue-close {
  border: 0;
  background: none;
  color: #777;
  font: 8px var(--mono);
  letter-spacing: .12em
}

.upnext-now {
  padding: 18px 0;
  border-bottom: 1px solid #222;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 10px
}

.upnext-now>span {
  grid-row: 1/3;
  font: 7px var(--mono);
  color: var(--signal);
  padding-top: 3px
}

.upnext-now strong {
  font-size: 13px
}

.upnext-now small {
  font: 8px var(--mono);
  color: #666;
  margin-top: 4px
}

.upnext-list {
  overflow: auto;
  flex: 1
}

.upnext-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border-bottom: 1px solid #181818;
  background: none;
  color: #fff;
  width: 100%;
  text-align: left
}

.upnext-item:hover {
  background: #0d0d0d
}

.upnext-item .n {
  font: 8px var(--mono);
  color: #555
}

.upnext-item .t {
  font-size: 12px
}

.upnext-item .s {
  display: block;
  font: 7px var(--mono);
  color: #5f5f5f;
  margin-top: 3px
}

.upnext-item .y {
  font: 7px var(--mono);
  color: #4d4d4d
}

.upnext-flip {
  height: 48px !important;
  width: 100% !important;
  border: 1px solid var(--signal) !important;
  border-radius: 0 !important;
  color: var(--signal) !important;
  margin-top: 16px;
  font: 8px var(--mono) !important;
  letter-spacing: .14em !important
}

.nowplaying-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  background: #030303;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  transition: opacity .38s ease, transform .55s cubic-bezier(.2, .8, .2, 1)
}

.nowplaying-overlay.open {
  opacity: 1;
  pointer-events: auto;
  transform: none
}

.nowplaying-overlay canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.nowplaying-close {
  position: absolute;
  z-index: 9;
  right: var(--edge);
  top: 26px;
  border: 0;
  background: none;
  color: #aaa;
  font: 8px var(--mono);
  letter-spacing: .14em
}

.nowplaying-words {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
  font: 800 clamp(100px, 15vw, 260px)/.72 var(--sans);
  letter-spacing: -.085em;
  color: #f2efe8;
  mix-blend-mode: difference
}

.nowplaying-photo {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 94%;
  width: min(58vw, 920px);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 32px 70px #000)
}

.nowplaying-ui {
  position: absolute;
  z-index: 5;
  left: var(--edge);
  right: var(--edge);
  bottom: 36px
}

.np-label {
  font: 8px var(--mono);
  letter-spacing: .15em;
  color: var(--signal)
}

.nowplaying-ui .now-title {
  font-size: clamp(52px, 7vw, 120px);
  line-height: .82;
  letter-spacing: -.075em;
  max-width: 70%;
  margin: 12px 0 8px
}

.nowplaying-ui .now-sub {
  font: 9px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aaa
}

.np-progress {
  width: min(640px, 58vw);
  height: 20px;
  position: relative;
  margin-top: 22px
}

.np-progress:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 1px;
  background: #555
}

.np-progress-fill {
  position: absolute;
  left: 0;
  top: 9px;
  height: 1px;
  background: var(--signal);
  width: 0
}

.np-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px
}

.np-controls .ctrl {
  border: 1px solid #333
}

.np-controls .ctrl.main {
  border-color: #eee
}

.np-flip {
  width: auto !important;
  border-radius: 0 !important;
  padding: 0 18px !important;
  color: var(--signal) !important;
  border-color: var(--signal) !important;
  font: 8px var(--mono) !important;
  letter-spacing: .13em
}

.music-mobile-nav {
  display: none
}

body.queue-open .music-feature {
  transform: translateX(-10px);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1)
}

@media(max-width:700px) {
  .music-app-v2 {
    display: block;
    padding-top: 62px
  }

  .music-app-v2 .music-sidebar {
    display: none
  }

  .music-app-v2 .music-toolbar {
    position: sticky;
    top: 62px;
    z-index: 20;
    background: rgba(5, 5, 5, .94);
    backdrop-filter: blur(16px);
    padding-inline: 2px
  }

  .music-route-label span {
    font-size: 10px
  }

  .music-queue-toggle {
    display: none
  }

  .music-app-v2 .flip-button {
    padding: 0 11px !important
  }

  .music-app-v2 .music-feature {
    height: 64svh;
    min-height: 480px;
    margin-inline: -10px
  }

  .music-expand {
    right: 16px;
    bottom: 22px
  }

  .music-stage-caption {
    display: none
  }

  .music-mobile-nav {
    display: grid;
    position: fixed;
    z-index: 945;
    left: 0;
    right: 0;
    bottom: var(--player-h);
    height: 48px;
    background: rgba(4, 4, 4, .96);
    backdrop-filter: blur(18px);
    border-top: 1px solid #242424;
    grid-template-columns: repeat(4, 1fr)
  }

  .music-mobile-nav a,
  .music-mobile-nav button {
    border: 0;
    background: none;
    color: #777;
    display: grid;
    place-items: center;
    font: 8px var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase
  }

  .music-mobile-nav .active {
    color: var(--signal)
  }

  body:has(.music-mobile-nav) {
    padding-bottom: calc(var(--player-h) + 48px)
  }

  .music-upnext {
    top: 62px;
    bottom: calc(var(--player-h) + 48px);
    width: 100%;
    padding: 20px
  }

  .nowplaying-photo {
    height: 78%;
    width: 110vw
  }

  .nowplaying-words {
    font-size: 24vw;
    padding: 0 2vw;
    align-items: flex-start;
    padding-top: 25vh
  }

  .nowplaying-ui {
    bottom: calc(var(--player-h) + 28px)
  }

  .nowplaying-ui .now-title {
    font-size: 12vw;
    max-width: 100%;
    padding-right: 10px
  }

  .np-progress {
    width: 100%
  }

  .nowplaying-close {
    top: 20px
  }

  .music-app-v2 .music-browser {
    padding-bottom: 50px
  }
}

@media(prefers-reduced-motion:reduce) {

  .music-upnext,
  .nowplaying-overlay,
  .music-feature,
  .popular-card:after {
    transition: none !important
  }

  .music-app-v2 #music-stage-canvas,
  .nowplaying-overlay canvas {
    opacity: .25
  }
}

/* V9 — Spotify-grade application shell */

/* Sticky shrinking stage */
.music-stage-wrap {
  position: sticky;
  top: 74px;
  z-index: 10;
  transition: all .45s cubic-bezier(.2, .8, .2, 1)
}

.music-stage-wrap.stage-compact {
  z-index: 12
}

.music-stage-wrap.stage-compact .music-feature {
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  border-radius: 0 !important;
  border-left: 0;
  border-right: 0
}

.music-stage-wrap.stage-compact .music-feature-words,
.music-stage-wrap.stage-compact .music-feature-photo,
.music-stage-wrap.stage-compact #music-stage-canvas,
.music-stage-wrap.stage-compact .music-stage-index,
.music-stage-wrap.stage-compact .music-stage-rule,
.music-stage-wrap.stage-compact .music-stage-caption,
.music-stage-wrap.stage-compact .music-expand,
.music-stage-wrap.stage-compact .music-feature:before,
.music-stage-wrap.stage-compact .music-feature:after,
.music-stage-wrap.stage-compact .music-feature-grid {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease
}

.music-stage-wrap.stage-compact .music-feature-copy {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 100%;
  max-width: none
}

.music-stage-wrap.stage-compact .music-feature-copy .music-stage-kicker {
  display: none
}

.music-stage-wrap.stage-compact .music-feature-copy .now-title {
  font-size: 16px !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  max-width: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.music-stage-wrap.stage-compact .music-feature-copy .now-sub {
  font-size: 8px !important;
  margin: 0 !important;
  color: #888
}

.music-stage-wrap.stage-compact .feature-progress {
  width: 100% !important;
  margin: 0 !important;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0
}

.music-stage-wrap.stage-compact .feature-controls {
  position: relative;
  gap: 6px
}

.music-stage-wrap.stage-compact .feature-play {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important
}

.music-stage-wrap.stage-compact .feature-next {
  display: none
}

/* Animated equalizer indicator */
@keyframes eqBar1 {

  0%,
  100% {
    height: 4px
  }

  50% {
    height: 16px
  }
}

@keyframes eqBar2 {

  0%,
  100% {
    height: 12px
  }

  50% {
    height: 5px
  }
}

@keyframes eqBar3 {

  0%,
  100% {
    height: 8px
  }

  50% {
    height: 18px
  }
}

.eq-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 18px;
  width: 14px
}

.eq-bars i {
  display: block;
  width: 3px;
  background: var(--signal);
  border-radius: 1px
}

.eq-bars i:nth-child(1) {
  animation: eqBar1 .42s ease-in-out infinite
}

.eq-bars i:nth-child(2) {
  animation: eqBar2 .38s ease-in-out infinite .1s
}

.eq-bars i:nth-child(3) {
  animation: eqBar3 .44s ease-in-out infinite .18s
}

.track-row:not(.is-playing) .eq-bars {
  display: none
}

.track-row.is-playing .track-play {
  font-size: 0 !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center
}

/* Track energy bars */
.track-energy {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--signal);
  opacity: .28;
  transition: width .5s cubic-bezier(.2, .8, .2, 1)
}

.track-row {
  position: relative;
  overflow: hidden
}

.track-row:hover .track-energy {
  opacity: .48
}

.track-row.is-playing .track-energy {
  opacity: .62
}

/* Smooth filter transitions */
.music-app-v2 .track-row {
  transition: opacity .32s ease, transform .32s ease, background .18s ease, padding .18s ease, box-shadow .18s ease, max-height .35s ease, min-height .35s ease
}

.track-row.filter-hide {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: transparent !important;
  margin: 0
}

.music-app-v2 .track-row:not(.filter-hide) {
  max-height: 120px
}

/* Popular shelf micro-interactions */
.music-popular-strip {
  scroll-behavior: smooth
}

.music-app-v2 .popular-card {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease
}

.music-app-v2 .popular-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4)
}

.music-app-v2 .popular-card:active {
  transform: translateY(-2px) scale(.98) !important;
  transition-duration: .1s
}

.popular-card .popular-play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 2
}

.popular-card .popular-play-overlay span {
  width: 44px;
  height: 44px;
  background: var(--signal);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #050505;
  font-size: 16px;
  transform: scale(.8);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1)
}

.popular-card:hover .popular-play-overlay {
  opacity: 1
}

.popular-card:hover .popular-play-overlay span {
  transform: scale(1)
}

/* Player glow */
.player {
  box-shadow: 0 -4px 40px color-mix(in srgb, var(--signal) 12%, transparent), 0 -1px 0 rgba(255, 255, 255, .06) inset
}

/* Custom dark scrollbar */
.music-workspace::-webkit-scrollbar {
  width: 6px
}

.music-workspace::-webkit-scrollbar-track {
  background: transparent
}

.music-workspace::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 3px
}

.music-workspace::-webkit-scrollbar-thumb:hover {
  background: #444
}

.music-workspace {
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent
}

/* Keyboard shortcut overlay */
.kb-overlay {
  position: fixed;
  z-index: 960;
  bottom: calc(var(--player-h) + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(8, 8, 8, .94);
  border: 1px solid #333;
  backdrop-filter: blur(16px);
  padding: 14px 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  font: 8px var(--mono);
  letter-spacing: .1em;
  color: #999;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
  white-space: nowrap
}

.kb-overlay.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto
}

.kb-overlay kbd {
  font: inherit;
  border: 1px solid #555;
  padding: 3px 6px;
  color: #ddd;
  background: #1a1a1a;
  margin-right: 4px
}

.kb-overlay .kb-dismiss {
  border: 0;
  background: none;
  color: #555;
  cursor: pointer;
  margin-left: 8px;
  font: inherit;
  padding: 4px
}

.kb-overlay .kb-dismiss:hover {
  color: #fff
}

/* Recently played sidebar */
.recently-played {
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 14px
}

.recently-played-label {
  font: 7px var(--mono);
  letter-spacing: .15em;
  color: #555;
  text-transform: uppercase;
  margin-bottom: 10px
}

.recent-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  cursor: pointer;
  transition: background .15s
}

.recent-item:hover {
  background: rgba(255, 255, 255, .04)
}

.recent-item .recent-num {
  font: 7px var(--mono);
  color: #444
}

.recent-item .recent-title {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.recent-item .recent-sub {
  display: block;
  font: 7px var(--mono);
  color: #444;
  margin-top: 2px
}

/* Button press micro-interaction */
.ctrl:active,
.btn:active,
.music-filter:active,
.music-chips button:active {
  transform: scale(.94);
  transition-duration: .08s
}

.music-side-nav a {
  position: relative;
  transition: color .2s, background .2s
}

/* Active track scroll target glow */
.track-row.scroll-highlight {
  animation: scrollGlow .8s ease
}

@keyframes scrollGlow {
  0% {
    box-shadow: inset 0 0 0 1px var(--signal)
  }

  100% {
    box-shadow: inset 0 0 0 1px transparent
  }
}

/* Sidebar active indicator */
.music-app-v2 .music-side-nav a.active::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--signal);
  border-radius: 0 2px 2px 0;
  transition: height .25s cubic-bezier(.2, .8, .2, 1)
}

@media(max-width:700px) {
  .music-stage-wrap {
    position: relative;
    top: auto
  }

  .music-stage-wrap.stage-compact .music-feature {
    height: 68px !important;
    min-height: 68px !important
  }

  .music-stage-wrap.stage-compact .music-feature-copy {
    padding: 0 14px;
    grid-template-columns: 1fr auto
  }

  .music-stage-wrap.stage-compact .music-feature-copy .now-sub {
    display: none
  }

  .kb-overlay {
    display: none
  }

  .recently-played {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {
  .eq-bars i {
    animation: none !important;
    height: 10px
  }

  .track-row,
  .popular-card {
    transition: none !important
  }

  .music-stage-wrap,
  .music-stage-wrap .music-feature {
    transition: none !important
  }
}


/* V9.5 — Ultra-Premium Spotify/Apple Music Style Player Upgrade */
:root {
  --player-h: 96px;
}

.player {
  bottom: 16px !important;
  left: 16px !important;
  right: 16px !important;
  height: 72px !important;
  border-radius: 24px !important;
  background: rgba(14, 14, 14, 0.6) !important;
  backdrop-filter: blur(48px) saturate(2.5) !important;
  -webkit-backdrop-filter: blur(48px) saturate(2.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  padding: 0 24px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

.player:before {
  display: none !important;
}

/* Now Playing Art */
.now-art {
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.15) !important;
  font-size: 14px !important;
  font-weight: bold;
}

.now-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #fff !important;
}

.now-sub {
  font-size: 11px !important;
  color: #999 !important;
}

.player-status {
  font-size: 8px !important;
  margin-top: 3px !important;
  letter-spacing: 0.15em !important;
}

/* Transport Controls */
.controls {
  gap: 16px !important;
}

.ctrl {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #b3b3b3 !important;
  transition: color 0.2s, transform 0.2s, background 0.2s !important;
}

.ctrl:hover {
  color: #fff !important;
}

.ctrl.prev,
.ctrl.next {
  width: 32px !important;
  height: 32px !important;
}

.ctrl.main {
  width: 44px !important;
  height: 44px !important;
  background: #fff !important;
  color: #000 !important;
  border-radius: 50% !important;
}

.ctrl.main:hover {
  background: var(--signal) !important;
  transform: scale(1.05) !important;
}

/* Timeline & Progress */
.timeline {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #888 !important;
}

.progress {
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  overflow: visible !important;
  position: relative !important;
  transition: height 0.15s ease !important;
}

.progress:hover {
  height: 6px !important;
}

.progress-fill {
  border-radius: 2px !important;
}

.progress-knob {
  width: 14px !important;
  height: 14px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  border-radius: 50% !important;
  opacity: 0;
  transition: opacity 0.2s !important;
  margin-top: -5px !important;
  /* Center knob */
}

.progress:hover .progress-knob {
  opacity: 1 !important;
}

/* Wave */
.wave {
  opacity: 0.6 !important;
}

/* Side Buttons */
.player-side .btn,
.player-side .queue-btn {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: background 0.2s, color 0.2s !important;
}

.player-side .btn:hover,
.player-side .queue-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

@media(max-width: 800px) {
  .player {
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 0 16px !important;
    height: 64px !important;
    border-radius: 20px !important;
  }

  .now-art {
    width: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
  }
}

/* Fix knob centering */
.progress-knob {
  position: absolute !important;
  top: 50% !important;
  left: 0;
  margin-top: -7px !important;
  transform: translateX(-50%) !important;
}

/* UI/UX & Architecture Refactor */

/* Navigation Consolidation */
.site-nav {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(5, 5, 5, 0.6) !important;
}

/* Sidebar changes */
.music-sidebar {
  padding-top: 10px !important;
}

.music-side-mark {
  margin-bottom: 40px !important;
}

/* Filter Pill Row */
.music-chips {
  display: flex !important;
  gap: 8px !important;
  padding: 16px 0 !important;
  border: none !important;
}

.music-chips button {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 8px 16px !important;
}

.music-chips button.active {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* Hero Composition & Depth */
.music-feature-photo {
  z-index: 4 !important;
  filter: drop-shadow(0 20px 40px var(--signal)) !important;
  transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  perspective: 1000px;
}

.music-feature-photo img {
  transform: translateZ(40px) !important;
}

/* Hero Stage & Typography Enhancement */
.music-feature {
  position: relative !important;
  overflow: hidden !important;
  background: radial-gradient(circle at calc(50% + var(--mx, 0) * 30%) calc(50% + var(--my, 0) * 30%), #121212 0%, #050505 100%) !important;
}

.music-feature #music-stage-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.music-feature-words {
  z-index: 2 !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 4vw !important;
  font-family: var(--sans) !important;
  font-weight: 800 !important;
  font-size: clamp(80px, 14vw, 210px) !important;
  line-height: 0.8 !important;
  letter-spacing: -0.06em !important;
  pointer-events: none !important;
  user-select: none !important;
  mix-blend-mode: difference !important;
  opacity: 0.95 !important;
}

.music-feature-words span {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  display: inline-block !important;
  color: #fff !important;
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), text-shadow 0.3s ease !important;
}

.music-feature-words span:first-child {
  transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 8px), 0) scale(calc(1 + var(--beat, 0) * 0.018)) !important;
}

.music-feature-words span:last-child {
  transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -8px), 0) scale(calc(1 + var(--beat, 0) * 0.022)) !important;
}

.music-feature.music-on .music-feature-words span {
  text-shadow: 0 0 calc(12px + var(--beat, 0) * 32px) color-mix(in srgb, var(--signal) 55%, transparent) !important;
}

.music-feature.music-on .music-stage-rule {
  background: color-mix(in srgb, var(--signal) 40%, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: 0 0 12px var(--signal) !important;
}

/* High-Performance Audio HUD & Scrubber */
.player .wave i {
  display: none !important;
}

#player-wave-canvas {
  width: 140px;
  height: 34px;
  display: block;
  image-rendering: pixelated;
}

/* Spring Physics on buttons */
.ctrl,
.feature-play,
.feature-next,
.music-queue-toggle,
.music-filter,
.popular-card {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s, color 0.2s !important;
}

.ctrl:hover,
.feature-play:hover,
.feature-next:hover,
.music-queue-toggle:hover {
  transform: translateY(-2px) scale(1.05) !important;
}

.ctrl:active,
.feature-play:active,
.feature-next:active,
.music-queue-toggle:active {
  transform: scale(0.95) !important;
}

.progress {
  cursor: ew-resize !important;
}

/* Navbar keyboard hints */
.nav-center b {
  font: 8px var(--mono);
  color: #666;
  margin-right: 6px;
  border: 1px solid #333;
  padding: 1px 4px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
}

.nav-center a.active b {
  color: var(--signal);
  border-color: var(--signal);
}
/* =========================================================
   V8.6 ORIGINAL MUSIC-REACTIVE HEADS / TAILS
   Reaction only — base hero composition remains V8.9.
   ========================================================= */

.hero.music-on .hero-word {
  color: var(--signal-3);
  transform:
    translate3d(
      calc(var(--mx, 0) * 8px),
      calc(var(--my, 0) * 5px),
      0
    )
    scale(calc(1 + var(--beat, 0) * .012));

  letter-spacing:
    calc(-.045em + var(--beat, 0) * .008em);

  text-shadow:
    0 0 calc(8px + var(--beat, 0) * 16px)
    color-mix(in srgb, var(--signal) 26%, transparent);
}

.hero.music-on .hero-word.tails {
  color: var(--signal-2);

  transform:
    translate3d(
      calc(var(--mx, 0) * -8px),
      calc(var(--my, 0) * -4px),
      0
    )
    scale(calc(1 + var(--beat, 0) * .014));
}

.hero.music-on .hero-center-mark {
  color: var(--signal);
}

@media (prefers-reduced-motion: reduce) {
  .hero.music-on .hero-word,
  .hero.music-on .hero-word.tails {
    transform: none !important;
  }
}


/* ==========================================================
   HERO — COMPACT DESKTOP / SPLIT VIEW
   Protect composition when browser width is reduced by
   sidebars, split-screen, Gemini, Stage Manager, etc.
   ========================================================== */

@media (min-width: 761px) and (max-width: 1180px) {

  body:not(.music-page) .hero {
    min-height: 100svh;
    overflow: hidden;

    /* Explicit hero composition geometry */
    --hero-safe-x: clamp(34px, 5vw, 64px);
  }

  /*
   * PORTRAIT
   * Stop scaling from viewport width.
   * Give the people a controlled visual footprint.
   */
  body:not(.music-page) .hero-photo {
    position: absolute;

    left: 50%;
    right: auto;
    top: auto;
    bottom: 0;

    width: min(69vw, 650px);
    height: 91svh;

    transform: translateX(-50%);

    z-index: 2;

    pointer-events: none;
  }

  body:not(.music-page) .hero-photo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center bottom;
  }

  /*
   * TITLE
   * Scale based on available width instead of preserving
   * the oversized wide-desktop treatment.
   */
  body:not(.music-page) .hero-title {
    position: absolute;

    left: 50%;
    top: 46%;

    width: min(88vw, 860px);

    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 4;

    pointer-events: none;
  }

  body:not(.music-page) .hero-word {
    width: auto;

    font-size: clamp(78px, 12.5vw, 142px) !important;
    line-height: .72 !important;
    letter-spacing: -.065em !important;

    white-space: nowrap;

    transform: none !important;
  }

  body:not(.music-page) .hero-or {
    margin:
      clamp(7px, 1vh, 12px)
      0;

    font-size: clamp(22px, 3vw, 34px);
    line-height: 1;

    transform: none !important;
  }

  /*
   * COPY
   * Protect lower-left editorial information from
   * colliding with the portrait.
   */
  body:not(.music-page) .hero-copy {
    left: var(--hero-safe-x);
    bottom: calc(var(--player-h, 72px) + 28px);

    width: min(260px, 27vw);

    z-index: 6;
  }

  body:not(.music-page) .hero-copy p {
    font-size: clamp(13px, 1.35vw, 16px);
    line-height: 1.35;
  }

  /*
   * Reduce square dominance at intermediate widths.
   * Keep the effect — don't let it become the subject.
   */
  body:not(.music-page) #hero-audio-canvas {
    opacity: .52;
  }

  /*
   * Keep metadata safely at the edges.
   */
  body:not(.music-page) .hero-side,
  body:not(.music-page) .hero-meta {
    opacity: .72;
  }
}


/* ==========================================================
   NARROW LAPTOP / LARGE TABLET
   ========================================================== */

@media (min-width: 761px) and (max-width: 920px) {

  body:not(.music-page) .hero-photo {
    width: min(76vw, 610px);
    height: 87svh;
  }

  body:not(.music-page) .hero-title {
    top: 45%;

    width: 92vw;
  }

  body:not(.music-page) .hero-word {
    font-size: clamp(70px, 13vw, 112px) !important;
  }

  body:not(.music-page) .hero-or {
    font-size: 21px;
  }

  body:not(.music-page) .hero-copy {
    width: min(230px, 31vw);
  }

  body:not(.music-page) #hero-audio-canvas {
    opacity: .44;
  }
}


/* ==========================================================
   SHORT DESKTOP WINDOWS
   Important for browsers with large top/bottom chrome.
   ========================================================== */

@media (min-width: 761px) and (max-height: 760px) {

  body:not(.music-page) .hero-photo {
    height: 88svh;
  }

  body:not(.music-page) .hero-title {
    top: 44%;
  }

  body:not(.music-page) .hero-word {
    font-size:
      clamp(68px, min(11.5vw, 16vh), 128px)
      !important;
  }

  body:not(.music-page) .hero-copy {
    bottom: calc(var(--player-h, 72px) + 18px);
  }
}


/* ==========================================================
   ULTRAWIDE / FULL DESKTOP
   Preserve the stronger original composition.
   ========================================================== */

@media (min-width: 1181px) {

  body:not(.music-page) .hero-title,
  body:not(.music-page) .hero-photo {
    /* Wide desktop remains governed by original hero rules. */
  }
}

/* ==========================================================
   HOT ARCHIVE TRANSITION V1
   Hero → Live Tape → Soundstage Reel → Frequency
   ========================================================== */

.hot-archive-transition {
  position: relative;
  z-index: 8;
  overflow: hidden;

  background: #080808;
  color: #f5f5f2;

  --archive-hot: var(--hot-signal, #ccff00);
  --archive-border: rgba(255,255,255,.12);
  --archive-muted: rgba(255,255,255,.46);
}


/* ==========================================================
   LIVE TAPE
   ========================================================== */

.live-tape {
  position: relative;
  z-index: 10;

  border-top: 1px solid var(--archive-border);
  border-bottom: 1px solid var(--archive-border);

  background: #050505;

  overflow: hidden;
}

.live-tape-track {
  position: relative;

  width: 100%;
  height: 40px;

  overflow: hidden;

  border-bottom: 1px solid rgba(255,255,255,.07);
}

.live-tape-track:last-child {
  border-bottom: 0;
}

.live-tape-track-secondary {
  height: 36px;
}

.live-tape-motion {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;

  width: max-content;
  height: 100%;

  will-change: transform;

  transform: translate3d(0,0,0);
}

.live-tape-set {
  display: flex;
  align-items: center;

  flex: none;

  height: 100%;
}

.live-tape-set span {
  flex: none;

  padding: 0 20px;

  color: rgba(255,255,255,.55);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: .16em;
  text-transform: uppercase;

  white-space: nowrap;
}

.live-tape-set .tape-hot {
  color: var(--archive-hot);
}

.live-tape-set i {
  display: block;

  width: 4px;
  height: 4px;

  flex: none;

  background: rgba(255,255,255,.28);

  transform: rotate(45deg);
}

.live-tape-left {
  animation: hotTickerLeft 34s linear infinite;
}

.live-tape-right {
  animation: hotTickerRight 39s linear infinite;
}

@keyframes hotTickerLeft {
  from {
    transform: translate3d(0,0,0);
  }

  to {
    transform: translate3d(-50%,0,0);
  }
}

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

  to {
    transform: translate3d(0,0,0);
  }
}


/* ==========================================================
   SOUNDSTAGE
   ========================================================== */

.soundstage {
  position: relative;

  padding:
    clamp(70px,8vw,132px)
    clamp(18px,3.5vw,58px)
    clamp(64px,7vw,110px);

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #080808 0%,
      #090909 50%,
      #060606 100%
    );
}


/* ----------------------------------------------------------
   GHOST TYPOGRAPHY
   ---------------------------------------------------------- */

.archive-ghost {
  position: absolute;

  left: -.04em;
  bottom: -.05em;

  z-index: 0;

  color: rgba(255,255,255,.045);

  font-family: var(--display);
  font-size: clamp(130px,23vw,420px);
  font-weight: 700;

  line-height: .62;

  letter-spacing: -.085em;

  white-space: nowrap;

  pointer-events: none;
  user-select: none;
}


/* ----------------------------------------------------------
   SECTION HEADER
   ---------------------------------------------------------- */

.soundstage-head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  padding-bottom: clamp(28px,3vw,46px);

  border-bottom: 1px solid var(--archive-border);
}

.archive-status {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 18px;

  color: var(--archive-hot);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;

  letter-spacing: .2em;
}

.archive-status-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: currentColor;

  box-shadow:
    0 0 0 4px rgb(var(--hot-signal-rgb, 204 255 0) / .08);
}

.soundstage-head h2 {
  margin: 0;

  max-width: 1050px;

  color: #f4f4f1;

  font-family: var(--display);
  font-size: clamp(62px,9vw,166px);
  font-weight: 700;

  line-height: .72;

  letter-spacing: -.075em;
  text-transform: uppercase;
}

.archive-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 5px;

  padding-bottom: 7px;

  color: rgba(255,255,255,.34);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;

  line-height: 1.4;

  letter-spacing: .15em;
  text-transform: uppercase;

  white-space: nowrap;
}


/* ==========================================================
   SOUNDSTAGE REEL
   ========================================================== */

.soundstage-reel {
  position: relative;
  z-index: 3;

  display: flex;

  gap: 7px;

  width: 100%;
  height: clamp(480px,58vw,690px);

  margin-top: 8px;

  overflow: hidden;
}

.reel-frame {
  position: relative;

  min-width: 0;

  overflow: hidden;

  flex-grow: 1;

  border: 1px solid rgba(255,255,255,.11);

  background: #0b0b0b;

  cursor: crosshair;

  transition:
    flex-grow 600ms cubic-bezier(.16,1,.3,1),
    border-color 320ms ease;
}

.reel-wide {
  flex-basis: 31%;
}

.reel-tall {
  flex-basis: 18%;
}

.reel-frame:hover {
  flex-grow: 1.72;

  border-color: rgb(var(--hot-signal-rgb, 204 255 0) / .52);
}

.reel-frame img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.84)
    contrast(1.06);

  transform: scale(1.001);

  transition:
    transform 850ms cubic-bezier(.16,1,.3,1),
    filter 550ms ease;
}

.reel-frame:hover img {
  transform: scale(1.045);

  filter:
    saturate(1)
    contrast(1.04);
}

.reel-shade {
  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.36) 0%,
      transparent 30%,
      transparent 55%,
      rgba(0,0,0,.82) 100%
    );

  pointer-events: none;
}

.reel-frame::after {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  z-index: 5;

  width: 100%;
  height: 2px;

  background: var(--archive-hot);

  transform: scaleX(0);
  transform-origin: left;

  transition:
    transform 520ms cubic-bezier(.16,1,.3,1);

  pointer-events: none;
}

.reel-frame:hover::after {
  transform: scaleX(1);
}

.reel-telemetry {
  position: absolute;

  left: 13px;
  top: 13px;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 6px;

  color: rgba(255,255,255,.78);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: .11em;
  text-transform: uppercase;

  text-shadow: 0 2px 12px #000;
}

.rec-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--archive-hot);

  box-shadow:
    0 0 10px rgb(var(--hot-signal-rgb, 204 255 0) / .80);
}

.reel-index {
  position: absolute;

  right: 14px;
  bottom: 13px;

  z-index: 4;

  color: rgba(255,255,255,.2);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;

  letter-spacing: .1em;
}

.reel-open {
  position: absolute;

  right: 12px;
  top: 12px;

  z-index: 6;

  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  padding: 0;

  border: 1px solid rgba(255,255,255,.2);
  border-radius: 0;

  background: rgba(0,0,0,.38);

  color: #fff;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;

  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 220ms ease;
}

.reel-open:hover {
  border-color: var(--archive-hot);

  background: var(--archive-hot);
  color: #080808;

  transform: translate3d(2px,-2px,0);
}

.reel-meta {
  position: absolute;

  left: 12px;
  bottom: 12px;

  z-index: 4;

  max-width: calc(100% - 65px);

  padding: 8px 10px;

  border: 1px solid rgba(255,255,255,.15);

  background: rgba(4,4,4,.55);

  color: rgba(255,255,255,.8);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  font-weight: 600;

  letter-spacing: .11em;
  text-transform: uppercase;

  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* ==========================================================
   FREQUENCY RULER
   ========================================================== */

.frequency-block {
  position: relative;
  z-index: 3;

  margin-top: clamp(42px,5vw,72px);

  border-top: 1px solid var(--archive-border);
  border-bottom: 1px solid var(--archive-border);
}

.frequency-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 42px;

  color: rgba(255,255,255,.38);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;

  letter-spacing: .18em;
  text-transform: uppercase;
}

.frequency-state {
  display: flex;
  align-items: center;

  gap: 7px;
}

.frequency-state i {
  display: block;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--archive-hot);

  box-shadow:
    0 0 10px rgb(var(--hot-signal-rgb, 204 255 0) / .70);
}

.frequency-spectrum {
  position: relative;

  height: 94px;

  border-top: 1px solid rgba(255,255,255,.08);

  overflow: hidden;
}

.frequency-bars {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 25px;

  display: flex;
  align-items: flex-end;

  gap: 2px;

  height: 54px;
}

.frequency-bar {
  min-width: 1px;

  flex: 1;

  height: var(--freq-height);

  background: rgba(255,255,255,.2);

  transform: scaleY(.35);
  transform-origin: bottom;

  animation:
    archiveFrequency
    var(--freq-speed)
    ease-in-out
    var(--freq-delay)
    infinite
    alternate;

  will-change: transform;
}

.frequency-bar:nth-child(11n) {
  background: rgb(var(--hot-signal-rgb, 204 255 0) / .72);
}

@keyframes archiveFrequency {
  0% {
    transform: scaleY(.28);
    opacity: .28;
  }

  55% {
    transform: scaleY(1);
    opacity: .75;
  }

  100% {
    transform: scaleY(.48);
    opacity: .46;
  }
}

.frequency-axis {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  justify-content: space-between;

  height: 24px;

  border-top: 1px solid rgba(255,255,255,.1);
}

.frequency-axis span {
  position: relative;

  padding-top: 9px;

  color: rgba(255,255,255,.28);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 7px;

  letter-spacing: .08em;
}

.frequency-axis span::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 0;

  width: 1px;
  height: 5px;

  background: rgba(255,255,255,.24);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

  .soundstage {
    padding-inline: 24px;
  }

  .soundstage-head h2 {
    font-size: clamp(66px,11vw,118px);
  }

  .soundstage-reel {
    height: 560px;
  }

  .archive-readout {
    display: none;
  }

  .reel-wide {
    flex-basis: 30%;
  }

  .reel-tall {
    flex-basis: 21%;
  }
}


/* ==========================================================
   MOBILE — kinetic horizontal archive feed
   ========================================================== */

@media (max-width: 700px) {

  .live-tape-track {
    height: 36px;
  }

  .live-tape-track-secondary {
    height: 32px;
  }

  .live-tape-set span {
    padding-inline: 14px;

    font-size: 8px;
  }

  .soundstage {
    padding:
      58px
      14px
      70px;
  }

  .soundstage-head {
    display: block;

    padding-bottom: 24px;
  }

  .soundstage-head h2 {
    font-size: clamp(58px,19vw,94px);
    line-height: .74;
  }

  .archive-status {
    margin-bottom: 14px;
  }

  .soundstage-reel {
    width: calc(100% + 28px);
    height: min(124vw,570px);

    margin-left: -14px;
    margin-top: 7px;

    padding:
      0
      14px
      12px;

    gap: 8px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
  }

  .soundstage-reel::-webkit-scrollbar {
    display: none;
  }

  .reel-frame,
  .reel-wide,
  .reel-tall {
    min-width: 78vw;

    flex:
      0
      0
      78vw;

    scroll-snap-align: center;
  }

  .reel-frame:hover {
    flex-grow: 0;
  }

  .reel-frame img,
  .reel-frame:hover img {
    transform: scale(1.01);
  }

  .archive-ghost {
    bottom: 28px;

    font-size: 42vw;
  }

  .frequency-block {
    margin-top: 42px;
  }

  .frequency-spectrum {
    height: 80px;
  }

  .frequency-bars {
    bottom: 23px;

    height: 44px;
  }

  .frequency-axis span:nth-child(even) {
    display: none;
  }
}


/* ==========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .live-tape-motion,
  .frequency-bar {
    animation: none !important;
  }

  .reel-frame,
  .reel-frame img,
  .reel-frame::after,
  .reel-open {
    transition: none !important;
  }
}

/* ==========================================================
   HOT ARCHIVE V1.1 — PRECISION POLISH
   Laptop budget / playback state / metadata contrast
   ========================================================== */


/* ----------------------------------------------------------
   01. VIEWPORT HEIGHT BUDGET

   Width alone cannot determine the reel height.
   13" laptops and split-screen windows need a ceiling based
   on actual available vertical space.
   ---------------------------------------------------------- */

.soundstage-reel {
  height: clamp(
    390px,
    min(52vw, calc(100svh - var(--player-h, 72px) - 235px)),
    660px
  );
}


/*
 * Short desktop viewport:
 * preserve the complete composition instead of allowing
 * photographs to consume the whole screen.
 */

@media (min-width: 901px) and (max-height: 900px) {

  .soundstage {
    padding-top: clamp(54px, 6vh, 78px);
    padding-bottom: clamp(58px, 7vh, 82px);
  }

  .soundstage-head {
    padding-bottom: 24px;
  }

  .soundstage-head h2 {
    font-size: clamp(
      58px,
      min(8vw, 13vh),
      118px
    );

    line-height: .73;
  }

  .archive-status {
    margin-bottom: 12px;
  }

  .soundstage-reel {
    height: clamp(
      360px,
      calc(100svh - var(--player-h, 72px) - 265px),
      520px
    );
  }

  .frequency-block {
    margin-top: 34px;
  }

  .frequency-spectrum {
    height: 78px;
  }

  .frequency-bars {
    height: 43px;
  }
}


/*
 * Extremely short desktop windows.
 */

@media (min-width: 761px) and (max-height: 720px) {

  .soundstage-head h2 {
    font-size: clamp(54px, 7vw, 92px);
  }

  .soundstage-reel {
    height: clamp(
      320px,
      calc(100svh - var(--player-h, 72px) - 225px),
      430px
    );
  }

  .archive-readout {
    display: none;
  }
}


/* ----------------------------------------------------------
   02. MICRO-TYPOGRAPHY CONTRAST
   ---------------------------------------------------------- */

.reel-telemetry {
  color: rgba(255,255,255,.82);

  font-weight: 650;

  text-shadow:
    0 1px 3px rgba(0,0,0,.9),
    0 3px 14px rgba(0,0,0,.78);
}

.reel-meta {
  color: rgba(255,255,255,.84);

  border-color: rgba(255,255,255,.2);

  background: rgba(5,5,5,.68);
}

.archive-readout {
  color: rgba(255,255,255,.5);
}

.frequency-head {
  color: rgba(255,255,255,.54);
}

.frequency-axis span {
  color: rgba(255,255,255,.44);
}

.frequency-axis span::before {
  background: rgba(255,255,255,.34);
}

.reel-index {
  color: rgba(255,255,255,.38);
}


/* ----------------------------------------------------------
   03. FREQUENCY ENGINE STATES

   Default = standby.
   Playback explicitly activates the meter.
   ---------------------------------------------------------- */

.frequency-bar {
  animation-play-state: paused;

  transform: scaleY(.16);

  opacity: .24;

  transition:
    opacity 280ms ease,
    background-color 280ms ease;
}


/* PLAYING */

.hot-archive-transition.archive-playing .frequency-bar {
  animation-play-state: running;

  opacity: .62;
}


/*
 * Sparse HOT signal channels rather than turning the entire
 * spectrum pink.
 */

.hot-archive-transition.archive-playing
.frequency-bar:nth-child(11n),

.hot-archive-transition.archive-playing
.frequency-bar:nth-child(17n) {
  background: rgb(var(--hot-signal-rgb, 204 255 0) / .92);

  box-shadow:
    0 0 10px rgb(var(--hot-signal-rgb, 204 255 0) / .16);
}


/*
 * Slightly different behavior for three signal bands.
 * This prevents all 72 bars moving like one CSS animation.
 */

.hot-archive-transition.archive-playing
.frequency-bar:nth-child(3n) {
  animation-duration: .74s;
}

.hot-archive-transition.archive-playing
.frequency-bar:nth-child(5n) {
  animation-duration: 1.08s;
}

.hot-archive-transition.archive-playing
.frequency-bar:nth-child(7n) {
  animation-duration: .91s;
}


/* STANDBY indicator */

.hot-archive-transition:not(.archive-playing)
.frequency-state i {
  background: rgba(255,255,255,.34);

  box-shadow: none;
}


/* PLAYING indicator */

.hot-archive-transition.archive-playing
.frequency-state i {
  background: var(--archive-hot);

  box-shadow:
    0 0 0 4px rgb(var(--hot-signal-rgb, 204 255 0) / .06),
    0 0 12px rgb(var(--hot-signal-rgb, 204 255 0) / .55);

  animation:
    archiveSignalPulse
    1.2s
    ease-in-out
    infinite;
}

@keyframes archiveSignalPulse {

  0%,
  100% {
    opacity: .55;
    transform: scale(.86);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}


/* ----------------------------------------------------------
   04. FRAME POLISH
   ---------------------------------------------------------- */

.reel-frame {
  isolation: isolate;
}

.reel-frame::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;

  opacity: 0;

  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 44%,
      rgb(var(--hot-signal-rgb, 204 255 0) / .055) 50%,
      transparent 57%,
      transparent 100%
    );

  transform: translate3d(-18%,0,0);

  transition:
    opacity 400ms ease,
    transform 850ms cubic-bezier(.16,1,.3,1);
}

@media (hover:hover) and (pointer:fine) {

  .reel-frame:hover::before {
    opacity: 1;

    transform: translate3d(18%,0,0);
  }
}


/* ----------------------------------------------------------
   05. PLAYER-SAFE ENDING
   ---------------------------------------------------------- */

.hot-archive-transition {
  padding-bottom:
    max(
      0px,
      env(safe-area-inset-bottom)
    );
}


/* ----------------------------------------------------------
   MOBILE
   Don't use desktop viewport-height constraints.
   ---------------------------------------------------------- */

@media (max-width: 700px) {

  .soundstage-reel {
    height: min(124vw, 560px);
  }

  .reel-telemetry {
    font-size: 8px;
  }

  .frequency-head {
    font-size: 8px;
  }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .archive-status-dot,
  .frequency-state i {
    animation: none !important;
  }

  .frequency-bar {
    animation: none !important;

    transform: scaleY(.32);
  }

  .hot-archive-transition.archive-playing
  .frequency-bar {
    opacity: .48;
  }
}


/* ==========================================================
   HOT SHARED SIGNAL THEME
   Hero + Archive use ONE active signal identity.
   ========================================================== */

:root {
  --hot-signal: #ccff00;
  --hot-signal-rgb: 204 255 0;
}


/*
 * Smooth theme hand-off.
 * Color changes should feel like a lighting cue,
 * not an instantaneous CSS swap.
 */

.hot-archive-transition,
.hot-archive-transition .tape-hot,
.hot-archive-transition .archive-status,
.hot-archive-transition .rec-dot,
.hot-archive-transition .frequency-state i,
.hot-archive-transition .frequency-bar,
.hot-archive-transition .reel-open {
  transition:
    color 650ms cubic-bezier(.16,1,.3,1),
    background-color 650ms cubic-bezier(.16,1,.3,1),
    border-color 650ms cubic-bezier(.16,1,.3,1),
    box-shadow 650ms cubic-bezier(.16,1,.3,1);
}


/*
 * Active signal gets a very restrained atmospheric cast.
 * The page stays BLACK.
 */

.hot-archive-transition::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      65% 45% at 50% 15%,
      rgb(var(--hot-signal-rgb) / .035),
      transparent 72%
    );

  transition:
    background 800ms cubic-bezier(.16,1,.3,1);
}


/*
 * Reel hover follows the active hero world.
 */

.reel-frame:hover {
  border-color:
    rgb(var(--hot-signal-rgb) / .52);
}

.reel-frame:hover::before {
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 44%,
      rgb(var(--hot-signal-rgb) / .055) 50%,
      transparent 57%,
      transparent 100%
    );
}


/*
 * Signal channels.
 */

.hot-archive-transition.archive-playing
.frequency-bar:nth-child(11n),

.hot-archive-transition.archive-playing
.frequency-bar:nth-child(17n) {

  background:
    rgb(var(--hot-signal-rgb) / .92);

  box-shadow:
    0 0 12px
    rgb(var(--hot-signal-rgb) / .18);
}


/*
 * Active status LED.
 */

.hot-archive-transition.archive-playing
.frequency-state i {

  background: var(--hot-signal);

  box-shadow:
    0 0 0 4px
      rgb(var(--hot-signal-rgb) / .06),

    0 0 12px
      rgb(var(--hot-signal-rgb) / .55);
}


/* ==========================================================
   HEADS OR TAILS — COIN PORTAL V1
   ========================================================== */

.coin-portal {
  --coin-signal:
    var(--hot-signal, #ccff00);

  position: relative;

  height: 235svh;

  background: #050505;

  color: #f4f4ef;

  border-top:
    1px solid rgba(255,255,255,.12);

  border-bottom:
    1px solid rgba(255,255,255,.12);

  isolation: isolate;
}


/* =========================
   STICKY CINEMATIC VIEWPORT
   ========================= */

.coin-portal-sticky {
  position: sticky;

  top: 0;

  width: 100%;
  height: 100svh;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255,255,255,.035),
      transparent 31%
    ),
    #050505;
}


/* engineering grid */

.coin-portal-sticky::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: .25;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:
    8.333vw 8.333vw;
}


/* signal atmosphere */

.coin-portal-sticky::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 0;

  width:
    min(76vw, 1100px);

  aspect-ratio: 1;

  border-radius: 50%;

  transform:
    translate(-50%, -50%);

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--coin-signal) 9%,
        transparent
      ),
      transparent 66%
    );

  filter: blur(36px);

  opacity:
    calc(
      .32 +
      var(--coin-velocity, 0) * .38
    );

  pointer-events: none;
}


/* =========================
   THREE.JS STAGE
   ========================= */

.coin-portal-stage {
  position: absolute;
  inset: 0;

  z-index: 2;

  overflow: hidden;
}

#coin-portal-canvas {
  display: block;

  width: 100%;
  height: 100%;

  outline: 0;

  filter:
    contrast(1.05)
    saturate(.88);
}


/* =========================
   COIN AURA
   ========================= */

.coin-portal {
  --coin-velocity: 0;
}

.coin-portal-aura {
  position: absolute;

  left: 50%;
  top: 50%;

  width:
    min(39vw, 580px);

  aspect-ratio: 1;

  transform:
    translate(-50%, -50%)
    scale(
      calc(
        1 +
        var(--coin-velocity) * .14
      )
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--coin-signal) 25%,
      transparent
    );

  border-radius: 50%;

  opacity:
    calc(
      .20 +
      var(--coin-velocity) * .48
    );

  box-shadow:
    0 0 100px
    color-mix(
      in srgb,
      var(--coin-signal) 8%,
      transparent
    );

  pointer-events: none;
}


/* =========================
   TOP HUD
   ========================= */

.coin-portal-topline {
  position: absolute;

  left:
    clamp(16px, 2.2vw, 36px);

  right:
    clamp(16px, 2.2vw, 36px);

  top:
    clamp(72px, 8vw, 106px);

  z-index: 5;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 20px;

  padding: 10px 0;

  border-top:
    1px solid rgba(255,255,255,.12);

  border-bottom:
    1px solid rgba(255,255,255,.12);

  color:
    rgba(255,255,255,.46);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 8px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: .18em;

  text-transform: uppercase;

  pointer-events: none;
}

.coin-portal-topline
span:nth-child(2) {
  color:
    var(--coin-signal);

  text-align: center;
}

.coin-portal-topline
span:last-child {
  text-align: right;
}


/* =========================
   CHAD / JOSH STATES
   ========================= */

.coin-side {
  position: absolute;

  z-index: 4;

  bottom:
    max(
      108px,
      calc(
        var(--player-h, 72px) +
        34px
      )
    );

  width:
    min(28vw, 400px);

  pointer-events: none;

  will-change:
    opacity,
    transform;
}

.coin-side-heads {
  left:
    clamp(20px, 4vw, 72px);
}

.coin-side-tails {
  right:
    clamp(20px, 4vw, 72px);

  text-align: right;

  opacity: 0;
}

.coin-side-index {
  margin-bottom: 14px;

  color:
    var(--coin-signal);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 8px;

  letter-spacing: .20em;
}

.coin-side-copy > span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(255,255,255,.42);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: .18em;
}

.coin-side-copy h2 {
  margin: 0;

  color: #f4f4ef;

  font-family:
    var(--display);

  font-size:
    clamp(56px, 7vw, 112px);

  font-weight: 700;

  line-height: .78;

  letter-spacing: -.07em;

  text-transform: uppercase;
}

.coin-side-copy p {
  margin: 15px 0 0;

  color:
    rgba(255,255,255,.56);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 8px;

  line-height: 1.65;

  letter-spacing: .14em;
}


/* =========================
   CROSSHAIRS
   ========================= */

.coin-crosshair {
  position: absolute;

  z-index: 5;

  top: 50%;

  display: grid;

  place-items: center;

  width: 22px;
  height: 22px;

  color:
    rgba(255,255,255,.26);

  font-family:
    ui-monospace,
    monospace;

  font-size: 14px;

  pointer-events: none;
}

.coin-crosshair-a {
  left:
    clamp(12px, 2vw, 32px);
}

.coin-crosshair-b {
  right:
    clamp(12px, 2vw, 32px);
}


/* =========================
   PROGRESS
   ========================= */

.coin-portal-footer {
  position: absolute;

  z-index: 5;

  left:
    clamp(16px, 2.2vw, 36px);

  right:
    clamp(16px, 2.2vw, 36px);

  bottom:
    max(
      22px,
      calc(
        var(--player-h, 72px) +
        14px
      )
    );

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 18px;

  color:
    rgba(255,255,255,.38);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 7px;

  letter-spacing: .16em;

  pointer-events: none;
}

.coin-progress {
  position: relative;

  height: 1px;

  overflow: hidden;

  background:
    rgba(255,255,255,.14);
}

.coin-progress-fill {
  position: absolute;
  inset: 0;

  display: block;

  background:
    var(--coin-signal);

  transform:
    scaleX(0);

  transform-origin:
    left center;

  will-change:
    transform;

  box-shadow:
    0 0 14px
    color-mix(
      in srgb,
      var(--coin-signal) 48%,
      transparent
    );
}


/* =========================
   WEBGL FALLBACK
   ========================= */

.coin-webgl-fallback
.coin-portal-stage::after {
  content: "H / T";

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  color:
    rgba(255,255,255,.92);

  font-family:
    var(--display);

  font-size:
    clamp(
      120px,
      24vw,
      360px
    );

  font-weight: 700;

  letter-spacing: -.08em;
}


/* =========================
   SHORT DESKTOP
   ========================= */

@media
(min-width: 701px)
and
(max-height: 820px) {

  .coin-portal {
    height: 215svh;
  }

  .coin-portal-topline {
    top: 66px;
  }

  .coin-side {
    bottom:
      max(
        92px,
        calc(
          var(--player-h, 72px) +
          18px
        )
      );
  }

  .coin-side-copy h2 {
    font-size:
      clamp(
        48px,
        6vw,
        82px
      );
  }

}


/* =========================
   MOBILE
   ========================= */

@media
(max-width: 700px) {

  .coin-portal {
    height: 170svh;
  }

  .coin-portal-sticky::before {
    background-size:
      20vw 20vw;
  }

  .coin-portal-topline {
    top: 62px;

    grid-template-columns:
      1fr auto;

    font-size: 7px;
  }

  .coin-portal-topline
  span:nth-child(2) {
    display: none;
  }

  .coin-portal-topline
  span:last-child {
    text-align: right;
  }

  .coin-portal-aura {
    width: 78vw;
  }

  .coin-side {
    left: 18px;
    right: auto;

    width:
      calc(100% - 36px);

    bottom:
      max(
        108px,
        calc(
          var(--player-h, 72px) +
          34px
        )
      );

    text-align: left;
  }

  .coin-side-tails {
    left: 18px;
    right: auto;

    text-align: right;
  }

  .coin-side-copy h2 {
    font-size:
      clamp(
        62px,
        19vw,
        94px
      );
  }

  .coin-side-copy p {
    max-width: 260px;
  }

  .coin-side-tails
  .coin-side-copy p {
    margin-left: auto;
  }

  .coin-portal-footer {
    bottom:
      max(
        16px,
        calc(
          var(--player-h, 72px) +
          10px
        )
      );

    grid-template-columns: 1fr;

    gap: 8px;
  }

  .coin-portal-footer > span {
    display: none;
  }

}


/* =========================
   REDUCED MOTION
   ========================= */

@media
(prefers-reduced-motion: reduce) {

  .coin-side,
  .coin-progress-fill,
  .coin-portal-aura {
    transition: none !important;
  }

}

/* =========================================================
   HEADS OR TAILS — INDIVIDUAL PROFILE HOLD
   Josh / Chad intentionally left unresolved.
   ========================================================= */

.profile-hold {
  position: relative;
  min-height: calc(100svh - var(--player-h, 92px));
  background: #030303;
  color: #f3f0e9;
}

.profile-hold-space {
  min-height: calc(100svh - var(--player-h, 92px));
  display: flex;
  align-items: flex-end;
  padding:
    clamp(88px, 10vw, 150px)
    clamp(20px, 4vw, 64px)
    clamp(120px, 14vh, 180px);
}

.profile-hold-label {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  gap: clamp(14px, 2vw, 32px);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  text-transform: uppercase;
}

.profile-hold-label span {
  font-size: 10px;
  letter-spacing: .14em;
  opacity: .38;
}

.profile-hold-label strong {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: clamp(28px, 4vw, 64px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.055em;
}

@media (max-width: 700px) {
  .profile-hold-space {
    padding:
      96px 20px
      calc(var(--player-h, 92px) + 48px);
  }

  .profile-hold-label {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}


/* ==========================================================
   ARCHIVE / FIELD RECORDS 05—10
   ========================================================== */

.archive-new-records {
  width: 100%;
  margin: clamp(72px, 9vw, 150px) 0 clamp(70px, 8vw, 130px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(10px, 1.1vw, 18px);
  row-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.archive-new-head {
  grid-column: 1 / -1;
  padding: 10px 0 14px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,.18);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.46);
}

.archive-record {
  margin: 0;
  min-width: 0;
}

.record-a {
  grid-column: 1 / span 7;
}

.record-b {
  grid-column: 9 / span 4;
  margin-top: 9vw;
}

.record-c {
  grid-column: 2 / span 4;
}

.record-d {
  grid-column: 7 / span 6;
  margin-top: 8vw;
}

.record-e {
  grid-column: 1 / span 6;
  margin-top: 4vw;
}

.record-f {
  grid-column: 9 / span 4;
  margin-top: 12vw;
}

.archive-record-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #070707;
  border: 1px solid rgba(255,255,255,.13);
}

.record-a .archive-record-media {
  aspect-ratio: 1.28 / 1;
}

.record-b .archive-record-media {
  aspect-ratio: .78 / 1;
}

.record-c .archive-record-media {
  aspect-ratio: .92 / 1;
}

.record-d .archive-record-media {
  aspect-ratio: 1.08 / 1;
}

.record-e .archive-record-media {
  aspect-ratio: 1.14 / 1;
}

.record-f .archive-record-media {
  aspect-ratio: .8 / 1;
}

.archive-record-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.002);
  filter: saturate(.9) contrast(1.05);
  transition:
    transform 800ms cubic-bezier(.2,.75,.2,1),
    filter 500ms ease;
}

.archive-record:hover .archive-record-media img {
  transform: scale(1.03);
  filter: saturate(1) contrast(1.02);
}

.archive-record-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.02) 45%,
      rgba(0,0,0,.32) 100%
    );
}

.archive-record-num,
.archive-record-cam {
  position: absolute;
  z-index: 2;
  top: 12px;
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.archive-record-num {
  right: 12px;
  color: var(--archive-hot, var(--hot-signal, #ccff00));
}

.archive-record-cam {
  left: 12px;
  color: rgba(255,255,255,.72);
}

.archive-record figcaption {
  padding-top: 9px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(255,255,255,.13);
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
}

.archive-record figcaption span:last-child {
  color: rgba(255,255,255,.82);
}


/* Tablet gets its own composition */
@media (max-width: 1024px) {

  .archive-new-records {
    grid-template-columns: repeat(8, minmax(0,1fr));
  }

  .record-a {
    grid-column: 1 / span 5;
  }

  .record-b {
    grid-column: 6 / span 3;
    margin-top: 10vw;
  }

  .record-c {
    grid-column: 1 / span 3;
  }

  .record-d {
    grid-column: 4 / span 5;
    margin-top: 7vw;
  }

  .record-e {
    grid-column: 1 / span 5;
  }

  .record-f {
    grid-column: 6 / span 3;
    margin-top: 8vw;
  }
}


/* Mobile: staggered editorial sequence */
@media (max-width: 640px) {

  .archive-new-records {
    grid-template-columns: repeat(6, minmax(0,1fr));
    row-gap: 34px;
    margin-top: 58px;
  }

  .archive-new-head {
    font-size: 8px;
  }

  .record-a {
    grid-column: 1 / -1;
  }

  .record-b {
    grid-column: 2 / -1;
    margin-top: 0;
  }

  .record-c {
    grid-column: 1 / span 5;
  }

  .record-d {
    grid-column: 2 / -1;
    margin-top: 0;
  }

  .record-e {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .record-f {
    grid-column: 2 / -1;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-record-media img {
    transition: none;
  }

  .archive-record:hover .archive-record-media img {
    transform: none;
  }
}


/* =========================================================
   HOT NOW PLAYING V2
   Cinematic expanded player
   ========================================================= */

.nowplaying-overlay.hot-nowplaying-v2 {
  --np-pad: clamp(22px, 3vw, 56px);

  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  background: #030303;
  color: #f2efe8;
}

.hot-nowplaying-v2 .hot-np-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns:
    minmax(330px, .88fr)
    minmax(420px, 1.25fr)
    minmax(260px, .72fr);
  gap: clamp(24px, 3vw, 64px);
  align-items: end;
  padding:
    clamp(82px, 9vh, 120px)
    var(--np-pad)
    clamp(50px, 7vh, 88px);
}

/* subtle structural grid */
.hot-nowplaying-v2 .hot-np-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background:
    linear-gradient(
      90deg,
      transparent calc(33.333% - .5px),
      rgba(255,255,255,.12) 33.333%,
      transparent calc(33.333% + .5px),
      transparent calc(66.666% - .5px),
      rgba(255,255,255,.12) 66.666%,
      transparent calc(66.666% + .5px)
    );
}

/* ---------------------------------------------------------
   LEFT / TRACK INFORMATION
   --------------------------------------------------------- */

.hot-np-info {
  position: relative;
  z-index: 3;
  align-self: end;
  padding-bottom: 4px;
}

.hot-np-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(18px, 2.5vh, 30px);

  font: 600 9px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal, #ff4938);
}

.hot-np-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
}

.hot-np-index {
  margin-bottom: 12px;

  font: 500 10px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .17em;
  color: rgba(255,255,255,.42);
}

.hot-np-title {
  max-width: 8ch;
  margin: 0;

  font-family: inherit;
  font-size: clamp(46px, 5.7vw, 108px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hot-np-artist {
  max-width: 36ch;
  margin-top: 22px;

  font: 500 10px/1.55
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.hot-np-artist strong {
  color: rgba(255,255,255,.9);
  font-weight: 500;
}

/* ---------------------------------------------------------
   CENTER / HERO PHOTOGRAPH
   --------------------------------------------------------- */

.hot-np-visual {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 100%;
}

.hot-np-photo {
  position: relative;
  width: 100%;
  height: min(67vh, 760px);
  overflow: hidden;
  background: #080808;
}

.hot-np-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter:
    saturate(.88)
    contrast(1.06)
    brightness(.91);
  transform: scale(1.002);
}

.hot-np-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.04),
      transparent 50%,
      rgba(0,0,0,.3)
    );
}

.hot-np-photo-tag {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;

  font: 500 8px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.hot-np-photo-index {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;

  font: 500 9px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .15em;
  color: var(--signal, #ff4938);
}

/* ---------------------------------------------------------
   PROGRESS
   --------------------------------------------------------- */

.hot-np-timeline {
  margin-top: 18px;
}

.hot-np-time {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;

  font: 500 9px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
}

.hot-np-progress {
  position: relative;
  height: 18px;
  cursor: pointer;
}

.hot-np-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 1px;
  background: rgba(255,255,255,.23);
}

.hot-np-progress-fill {
  position: absolute;
  left: 0;
  top: 7px;
  width: 0%;
  height: 3px;
  background: var(--signal, #ff4938);
  pointer-events: none;
}

/* ---------------------------------------------------------
   RIGHT / CONTROLS
   --------------------------------------------------------- */

.hot-np-controls {
  position: relative;
  z-index: 3;
  align-self: end;
}

.hot-np-control-label {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.18);

  font: 500 8px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

.hot-np-buttons {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  gap: 8px;
  margin-top: 18px;
}

.hot-np-btn {
  min-height: 54px;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  color: #f2efe8;
  cursor: pointer;
  font: inherit;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.hot-np-btn:hover {
  border-color: rgba(255,255,255,.65);
}

.hot-np-play {
  background: #f2efe8;
  color: #050505;
  border-color: #f2efe8;
  font-size: 18px;
}

.hot-np-flip {
  width: 100%;
  min-height: 47px;
  margin-top: 8px;
  border: 1px solid var(--signal, #ff4938);
  background: transparent;
  color: var(--signal, #ff4938);

  font: 600 9px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .2em;
  cursor: pointer;
}

.hot-np-flip:hover {
  background: var(--signal, #ff4938);
  color: #050505;
}

/* ---------------------------------------------------------
   UP NEXT
   --------------------------------------------------------- */

.hot-np-next {
  margin-top: clamp(28px, 4vh, 50px);
}

.hot-np-next-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.18);

  font: 500 8px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .16em;
  color: rgba(255,255,255,.42);
}

.hot-np-next-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hot-np-next-track {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
}

.hot-np-next-track:hover {
  color: var(--signal, #ff4938);
}

.hot-np-next-track span {
  font: 500 8px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  color: rgba(255,255,255,.35);
}

.hot-np-next-track strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.hot-np-next-track em {
  font: normal 8px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  color: rgba(255,255,255,.3);
}

/* ---------------------------------------------------------
   CLOSE + META
   --------------------------------------------------------- */

.hot-np-close {
  position: absolute;
  z-index: 20;
  top: 22px;
  right: var(--np-pad);

  padding: 10px 0 10px 20px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.65);

  font: 500 8px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .18em;
  cursor: pointer;
}

.hot-np-close:hover {
  color: #fff;
}

.hot-np-system {
  position: absolute;
  z-index: 5;
  left: var(--np-pad);
  top: 25px;

  display: flex;
  gap: 20px;

  font: 500 7px/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .17em;
  color: rgba(255,255,255,.27);
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px) {
  .hot-nowplaying-v2 .hot-np-shell {
    grid-template-columns: .85fr 1.15fr;
  }

  .hot-np-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .hot-np-next {
    margin-top: 0;
  }

  .hot-np-photo {
    height: min(54vh, 620px);
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 680px) {
  .nowplaying-overlay.hot-nowplaying-v2 {
    overflow-y: auto;
  }

  .hot-nowplaying-v2 .hot-np-shell {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding:
      70px
      16px
      32px;
  }

  .hot-np-system {
    left: 16px;
    top: 22px;
  }

  .hot-np-close {
    right: 16px;
    top: 13px;
  }

  .hot-np-visual {
    order: 1;
  }

  .hot-np-photo {
    height: auto;
    aspect-ratio: .92 / 1;
  }

  .hot-np-info {
    order: 2;
    width: 100%;
    padding-top: 24px;
  }

  .hot-np-kicker {
    margin-bottom: 15px;
  }

  .hot-np-title {
    max-width: 100%;
    font-size: clamp(42px, 15vw, 72px);
  }

  .hot-np-artist {
    margin-top: 15px;
  }

  .hot-np-controls {
    order: 3;
    display: block;
    width: 100%;
    margin-top: 30px;
  }

  .hot-np-next {
    margin-top: 34px;
  }
}


/* ==========================================================
   HEADS OR TAILS
   HOME EDITORIAL V1
   Below-hero system only.
   ========================================================== */

.hot-home-editorial {
  --hot-bg: #050505;
  --hot-paper: #f0eee7;
  --hot-ink: #090909;
  --hot-muted: rgba(240,238,231,.52);
  --hot-line: rgba(240,238,231,.17);
  --hot-signal: #d8ff42;

  position: relative;
  overflow: clip;
  background: var(--hot-bg);
  color: var(--hot-paper);
}

.hot-home-editorial *,
.hot-home-editorial *::before,
.hot-home-editorial *::after {
  box-sizing: border-box;
}

.hot-home-editorial section {
  position: relative;
}

.hot-register {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  width: 100%;
  padding: 14px 22px;
  border-top: 1px solid var(--hot-line);
  border-bottom: 1px solid var(--hot-line);
  color: rgba(240,238,231,.48);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1;
  text-transform: uppercase;
}

.hot-register span:nth-child(2) {
  text-align: center;
}

.hot-register span:last-child {
  text-align: right;
}

.hot-register-light {
  border-color: rgba(8,8,8,.18);
  color: rgba(8,8,8,.48);
}

.hot-text-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}


/* 01 — MANIFESTO */

.hot-manifesto {
  min-height: 92svh;
  background: var(--hot-paper);
  color: var(--hot-ink);
}

.hot-manifesto .hot-register {
  border-color: rgba(8,8,8,.18);
  color: rgba(8,8,8,.48);
}

.hot-manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
  min-height: calc(92svh - 38px);
}

.hot-manifesto-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(42px,6vw,92px) clamp(22px,5vw,76px);
}

.hot-manifesto-copy h2 {
  margin: 0;
  max-width: 1100px;
  font-size: clamp(62px,9.6vw,172px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .78;
  text-transform: uppercase;
}

.hot-manifesto-copy h2 span,
.hot-manifesto-copy h2 em {
  display: block;
}

.hot-manifesto-copy h2 em {
  margin-top: .1em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .68em;
  font-weight: 400;
  letter-spacing: -.06em;
  text-transform: none;
}

.hot-manifesto-foot {
  display: grid;
  grid-template-columns: minmax(220px,440px) auto;
  gap: 40px;
  align-items: end;
  margin-top: 70px;
}

.hot-manifesto-foot p {
  margin: 0;
  max-width: 420px;
  font-size: clamp(15px,1.3vw,20px);
  line-height: 1.45;
}

.hot-manifesto-photo {
  position: relative;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid rgba(8,8,8,.18);
}

.hot-manifesto-photo img {
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04);
  transition: transform 1.2s cubic-bezier(.2,.75,.2,1);
}

.hot-manifesto-photo:hover img {
  transform: scale(1.025);
}

.hot-manifesto-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(4,4,4,.78);
  color: white;
  font-size: 8px;
  letter-spacing: .16em;
}


/* 02 — SIGNAL */

.hot-signal {
  padding-bottom: clamp(80px,11vw,180px);
}

.hot-signal-head {
  display: grid;
  grid-template-columns: .38fr 1fr;
  gap: 30px;
  padding: clamp(54px,8vw,120px) 22px clamp(45px,6vw,86px);
}

.hot-signal-head > p {
  margin: 8px 0 0;
  color: var(--hot-muted);
  font-size: 9px;
  letter-spacing: .17em;
}

.hot-signal-head h2 {
  margin: 0;
  font-size: clamp(54px,8vw,146px);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .79;
  text-transform: uppercase;
}

.hot-signal-head h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .73em;
  font-weight: 400;
  letter-spacing: -.055em;
  text-transform: none;
}

.hot-feature-track {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(300px,.65fr);
  margin: 0 22px;
  border-top: 1px solid var(--hot-line);
  border-bottom: 1px solid var(--hot-line);
}

.hot-feature-media {
  position: relative;
  min-height: min(72vw,860px);
  overflow: hidden;
  border-right: 1px solid var(--hot-line);
}

.hot-feature-media img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(.72) contrast(1.08);
  transition: transform 1.3s cubic-bezier(.2,.8,.2,1);
}

.hot-feature-track:hover .hot-feature-media img {
  transform: scale(1.018);
}

.hot-feature-stamp {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 30px;
  padding: 8px 10px;
  background: var(--hot-signal);
  color: #050505;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

.hot-feature-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(26px,4vw,58px);
}

.hot-track-kicker {
  margin-bottom: auto;
  color: var(--hot-muted);
  font-size: 9px;
  letter-spacing: .16em;
}

.hot-feature-info h3 {
  margin: 90px 0 14px;
  font-size: clamp(52px,6vw,108px);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .78;
}

.hot-feature-info > p {
  margin: 0 0 34px;
  color: var(--hot-muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hot-play-track {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  background: none;
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.hot-play-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--hot-paper);
  color: var(--hot-ink);
  font-size: 11px;
}

.hot-track-ledger {
  margin: 0 22px;
}

.hot-track-ledger button {
  display: grid;
  grid-template-columns: 70px minmax(180px,1fr) minmax(140px,.5fr) auto;
  gap: 22px;
  width: 100%;
  align-items: center;
  min-height: 72px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--hot-line);
  background: transparent;
  color: white;
  cursor: pointer;
  text-align: left;
  transition: padding .25s ease, background .25s ease;
}

.hot-track-ledger button:hover {
  padding-right: 14px;
  padding-left: 14px;
  background: rgba(255,255,255,.045);
}

.hot-track-ledger span,
.hot-track-ledger small,
.hot-track-ledger b {
  color: var(--hot-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
}

.hot-track-ledger strong {
  font-size: 14px;
  letter-spacing: -.015em;
}


/* 03 — STORY */

.hot-story {
  padding-bottom: clamp(110px,14vw,230px);
  background: #090909;
}

.hot-story-title {
  padding: clamp(70px,9vw,140px) 22px 40px;
}

.hot-story-title p {
  margin: 0 0 20px;
  color: var(--hot-muted);
  font-size: 9px;
  letter-spacing: .16em;
}

.hot-story-title h2 {
  margin: 0;
  max-width: 1200px;
  font-size: clamp(68px,11.5vw,210px);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .72;
}

.hot-story-title h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .68em;
  font-weight: 400;
  letter-spacing: -.06em;
}

.hot-story-canvas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: clamp(10px,1.4vw,22px);
  min-height: 2500px;
  padding: 0 22px;
}

.hot-story-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.hot-story-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.08);
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}

.hot-story-shot:hover img {
  transform: scale(1.025);
}

.hot-story-shot figcaption {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  color: var(--hot-muted);
  font-size: 8px;
  letter-spacing: .13em;
}

.shot-a {
  grid-column: 1 / 9;
  height: 720px;
}

.shot-b {
  grid-column: 10 / 13;
  height: 500px;
  margin-top: 230px;
}

.shot-c {
  grid-column: 5 / 13;
  height: 680px;
  margin-top: 80px;
}

.shot-d {
  grid-column: 1 / 4;
  height: 440px;
  margin-top: -220px;
}

.shot-e {
  grid-column: 2 / 7;
  height: 590px;
  margin-top: 120px;
}

.shot-f {
  grid-column: 9 / 13;
  height: 520px;
  margin-top: -80px;
}

.hot-story-interrupt {
  grid-column: 1 / 13;
  display: flex;
  align-items: baseline;
  gap: .16em;
  margin: 70px 0 0;
  font-size: clamp(44px,7vw,128px);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .8;
}

.hot-story-interrupt em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72em;
  font-weight: 400;
}


/* 04 — DUALITY */

.hot-duality {
  background: var(--hot-paper);
  color: var(--hot-ink);
}

.hot-duality-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 86svh;
}

.hot-side {
  position: relative;
  overflow: hidden;
}

.hot-side + .hot-side {
  border-left: 1px solid rgba(8,8,8,.18);
}

.hot-side img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.2) saturate(.7) contrast(1.05);
  transition:
    transform 1s cubic-bezier(.2,.8,.2,1),
    filter .6s ease;
}

.hot-side:hover img {
  transform: scale(1.025);
  filter: grayscale(0) saturate(.95) contrast(1.02);
}

.hot-side-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.62),
    transparent 55%
  );
}

.hot-side-label {
  position: absolute;
  right: 22px;
  bottom: 20px;
  left: 22px;
  color: white;
}

.hot-side-label small {
  display: block;
  margin-bottom: 7px;
  font-size: 8px;
  letter-spacing: .16em;
}

.hot-side-label strong {
  display: block;
  font-size: clamp(60px,9vw,160px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .78;
}

.hot-duality-center {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  transform: translate(-50%,-50%);
  background: var(--hot-signal);
  color: #050505;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}

.hot-duality-statement {
  display: grid;
  grid-template-columns: .45fr 1fr .45fr;
  gap: 40px;
  align-items: end;
  padding: clamp(70px,10vw,150px) 22px;
}

.hot-duality-statement > p {
  margin: 0;
  max-width: 270px;
  font-size: 11px;
  line-height: 1.5;
}

.hot-duality-statement > p:last-child {
  justify-self: end;
}

.hot-duality-statement h3 {
  margin: 0;
  font-size: clamp(60px,8.5vw,150px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .77;
}

.hot-duality-statement h3 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72em;
  font-weight: 400;
}


/* 05 — LIVE */

.hot-live {
  padding-bottom: clamp(100px,12vw,190px);
}

.hot-live-heading {
  padding: clamp(80px,10vw,150px) 22px clamp(50px,7vw,100px);
}

.hot-live-heading h2 {
  margin: 0;
  font-size: clamp(66px,10vw,184px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .75;
}

.hot-live-heading h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .7em;
  font-weight: 400;
}

.hot-show-list {
  border-top: 1px solid var(--hot-line);
}

.hot-show-row {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr minmax(180px,.35fr);
  gap: 30px;
  min-height: 210px;
  align-items: center;
  padding: 24px 22px;
  overflow: hidden;
  border-bottom: 1px solid var(--hot-line);
  isolation: isolate;
}

.hot-show-row > div {
  position: relative;
  z-index: 2;
}

.hot-show-row > img {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 18%;
  width: min(420px,34vw);
  height: 180%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(-48%) rotate(2deg) scale(.94);
  filter: saturate(.65);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}

.hot-show-row:hover > img {
  opacity: .44;
  transform: translateY(-50%) rotate(-1deg) scale(1);
}

.hot-show-date strong {
  display: block;
  font-size: 62px;
  letter-spacing: -.06em;
  line-height: .8;
}

.hot-show-date span,
.hot-show-name small,
.hot-show-state span,
.hot-show-state b {
  font-size: 8px;
  letter-spacing: .14em;
}

.hot-show-name h3 {
  margin: 7px 0 0;
  font-size: clamp(34px,4.8vw,78px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .86;
}

.hot-show-state {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  text-align: right;
}

.hot-show-state span {
  color: var(--hot-muted);
}

.hot-show-past {
  color: rgba(240,238,231,.55);
}

.hot-live-foot {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 34px 22px 0;
}

.hot-live-foot p {
  margin: 0;
  max-width: 390px;
  color: var(--hot-muted);
  font-size: 11px;
  line-height: 1.5;
}


/* 06 — BOOKING */

.hot-booking {
  padding-bottom: clamp(80px,10vw,150px);
  background: var(--hot-paper);
  color: var(--hot-ink);
}

.hot-booking-head {
  display: grid;
  grid-template-columns: 1fr .35fr;
  gap: 40px;
  align-items: end;
  padding: clamp(70px,9vw,140px) 22px clamp(50px,6vw,90px);
}

.hot-booking-head h2 {
  margin: 0;
  font-size: clamp(62px,9.5vw,172px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .75;
}

.hot-booking-head h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72em;
  font-weight: 400;
}

.hot-booking-head p {
  margin: 0;
  max-width: 280px;
  font-size: 13px;
  line-height: 1.45;
}

.hot-booking-layout {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(360px,.75fr);
  margin: 0 22px;
  border: 1px solid rgba(8,8,8,.2);
}

.hot-booking-film {
  position: relative;
  min-height: 800px;
  background: #050505;
  border-right: 1px solid rgba(8,8,8,.2);
}

.hot-booking-film iframe {
  width: 100%;
  height: 100%;
  min-height: 800px;
  border: 0;
}

.hot-film-label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(4,4,4,.9);
  color: white;
  font-size: 8px;
  letter-spacing: .13em;
}

.hot-film-label a {
  color: inherit;
  text-decoration: none;
}

.hot-booking-panel {
  padding: clamp(24px,4vw,58px);
}

.hot-booking-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 60px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(8,8,8,.2);
  font-size: 8px;
  letter-spacing: .13em;
}

.hot-booking .booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.hot-booking .booking-form input,
.hot-booking .booking-form textarea {
  width: 100%;
  min-width: 0;
  padding: 19px 0;
  border: 0;
  border-bottom: 1px solid rgba(8,8,8,.24);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #080808;
  font: inherit;
  font-size: 10px;
  letter-spacing: .09em;
}

.hot-booking .booking-form textarea.full {
  grid-column: 1 / -1;
  min-height: 130px;
  resize: vertical;
}

.hot-booking .booking-form button {
  grid-column: 1 / -1;
  margin-top: 34px;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  background: #080808;
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.hot-booking .booking-note {
  grid-column: 1 / -1;
  margin-top: 14px;
  font-size: 8px;
  line-height: 1.5;
  opacity: .55;
}


/* 07 — DIRECT */

.hot-direct {
  padding-bottom: 130px;
}

.hot-direct-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 70px;
  align-items: end;
  padding: clamp(80px,11vw,170px) 22px 0;
}

.hot-direct h2 {
  margin: 0;
  font-size: clamp(64px,9vw,164px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .75;
}

.hot-direct h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .7em;
  font-weight: 400;
}

.hot-direct-form {
  padding-bottom: 8px;
}

.hot-direct-form > p {
  margin: 0 0 35px;
  color: var(--hot-muted);
  font-size: 12px;
}

.hot-direct .subscribe-form {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid rgba(255,255,255,.45);
}

.hot-direct .subscribe-form input {
  min-width: 0;
  padding: 18px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: white;
  font: inherit;
  font-size: clamp(18px,2vw,30px);
  letter-spacing: -.03em;
}

.hot-direct .subscribe-form button {
  padding: 0 0 0 30px;
  border: 0;
  background: transparent;
  color: var(--hot-signal);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.hot-direct .subscribe-note {
  margin-top: 12px;
  color: var(--hot-muted);
  font-size: 8px;
  letter-spacing: .1em;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1024px) {

  .hot-manifesto-grid {
    grid-template-columns: 1fr .7fr;
  }

  .hot-manifesto-copy h2 {
    font-size: clamp(62px,10vw,110px);
  }

  .hot-feature-track {
    grid-template-columns: 1.3fr .7fr;
  }

  .hot-story-canvas {
    min-height: 2200px;
  }

  .hot-show-row {
    grid-template-columns: 130px 1fr 150px;
  }

  .hot-booking-layout {
    grid-template-columns: 1fr 1fr;
  }

  .hot-booking-film,
  .hot-booking-film iframe {
    min-height: 680px;
  }
}


@media (max-width: 760px) {

  .hot-register {
    grid-template-columns: 1fr auto;
    padding-right: 14px;
    padding-left: 14px;
  }

  .hot-register span:nth-child(2) {
    display: none;
  }

  .hot-manifesto {
    min-height: 0;
  }

  .hot-manifesto-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .hot-manifesto-copy {
    min-height: 72svh;
    padding: 48px 14px 34px;
  }

  .hot-manifesto-copy h2 {
    font-size: clamp(54px,18vw,90px);
  }

  .hot-manifesto-foot {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 70px;
  }

  .hot-manifesto-photo {
    height: 68svh;
    border-top: 1px solid rgba(8,8,8,.18);
    border-left: 0;
  }

  .hot-manifesto-photo img {
    min-height: 0;
  }

  .hot-signal-head {
    display: block;
    padding: 60px 14px 36px;
  }

  .hot-signal-head > p {
    margin-bottom: 22px;
  }

  .hot-signal-head h2 {
    font-size: clamp(48px,15vw,76px);
  }

  .hot-feature-track {
    display: block;
    margin: 0 14px;
  }

  .hot-feature-media {
    min-height: 62svh;
    border-right: 0;
    border-bottom: 1px solid var(--hot-line);
  }

  .hot-feature-info {
    min-height: 420px;
    padding: 26px 4px 32px;
  }

  .hot-feature-info h3 {
    margin-top: 80px;
  }

  .hot-track-ledger {
    margin: 0 14px;
  }

  .hot-track-ledger button {
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    min-height: 64px;
  }

  .hot-track-ledger small {
    display: none;
  }

  .hot-story-title {
    padding: 70px 14px 35px;
  }

  .hot-story-title h2 {
    font-size: clamp(58px,18vw,96px);
  }

  .hot-story-canvas {
    display: block;
    min-height: 0;
    padding: 0 14px;
  }

  .hot-story-shot {
    width: 100%;
    height: auto;
    margin: 0 0 54px;
  }

  .hot-story-shot img {
    height: auto;
    max-height: 72svh;
  }

  .shot-b,
  .shot-d,
  .shot-f {
    width: 68%;
    margin-left: auto;
  }

  .shot-e {
    width: 82%;
  }

  .hot-story-interrupt {
    display: block;
    margin: 90px 0;
    font-size: clamp(48px,15vw,80px);
  }

  .hot-story-interrupt span,
  .hot-story-interrupt em {
    display: block;
  }

  .hot-duality-stage {
    min-height: 72svh;
  }

  .hot-side-label {
    right: 10px;
    bottom: 14px;
    left: 10px;
  }

  .hot-side-label strong {
    font-size: clamp(42px,14vw,72px);
  }

  .hot-duality-center {
    gap: 7px;
    padding: 7px 8px;
    font-size: 7px;
  }

  .hot-duality-statement {
    display: block;
    padding: 70px 14px;
  }

  .hot-duality-statement h3 {
    margin: 55px 0;
    font-size: clamp(54px,16vw,84px);
  }

  .hot-duality-statement > p:last-child {
    margin-left: auto;
  }

  .hot-live-heading {
    padding: 70px 14px 50px;
  }

  .hot-live-heading h2 {
    font-size: clamp(58px,17vw,94px);
  }

  .hot-show-row {
    grid-template-columns: 72px 1fr;
    gap: 18px;
    min-height: 170px;
    padding: 22px 14px;
  }

  .hot-show-date strong {
    font-size: 44px;
  }

  .hot-show-state {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
  }

  .hot-show-row > img {
    right: -10%;
    width: 65vw;
  }

  .hot-live-foot {
    display: block;
    padding: 30px 14px 0;
  }

  .hot-live-foot p {
    margin-bottom: 30px;
  }

  .hot-booking-head {
    display: block;
    padding: 70px 14px 45px;
  }

  .hot-booking-head h2 {
    margin-bottom: 36px;
    font-size: clamp(56px,16vw,90px);
  }

  .hot-booking-layout {
    display: block;
    margin: 0 14px;
  }

  .hot-booking-film {
    min-height: 660px;
    border-right: 0;
    border-bottom: 1px solid rgba(8,8,8,.2);
  }

  .hot-booking-film iframe {
    min-height: 660px;
  }

  .hot-booking-panel {
    padding: 30px 18px 38px;
  }

  .hot-booking-panel-head {
    display: block;
    margin-bottom: 35px;
  }

  .hot-booking-panel-head span {
    display: block;
    margin-bottom: 6px;
  }

  .hot-booking .booking-form {
    grid-template-columns: 1fr;
  }

  .hot-booking .booking-form textarea.full,
  .hot-booking .booking-form button,
  .hot-booking .booking-note {
    grid-column: auto;
  }

  .hot-direct {
    padding-bottom: 90px;
  }

  .hot-direct-grid {
    display: block;
    padding: 70px 14px 0;
  }

  .hot-direct h2 {
    margin-bottom: 70px;
    font-size: clamp(56px,16vw,90px);
  }

  .hot-direct .subscribe-form input {
    font-size: 18px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .hot-home-editorial *,
  .hot-home-editorial *::before,
  .hot-home-editorial *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ==========================================================
   HEADS OR TAILS
   HOME ART DIRECTION V2
   DARK WORLD + FACE-SAFE CROPS + TABLET/MOBILE
   ========================================================== */

.hot-home-editorial {
  --hot-bg: #050505;
  --hot-bg-raised: #0a0a0a;
  --hot-bg-soft: #0d0d0c;

  --hot-paper: #f1eee6;
  --hot-paper-muted: rgba(241,238,230,.58);
  --hot-paper-faint: rgba(241,238,230,.34);

  --hot-line: rgba(241,238,230,.14);
  --hot-line-strong: rgba(241,238,230,.25);

  --hot-signal: #d8ff42;

  background: var(--hot-bg);
  color: var(--hot-paper);
}


/* ==========================================================
   REGISTRATION SYSTEM
   ========================================================== */

.hot-home-editorial .hot-register,
.hot-home-editorial .hot-register-light {
  border-color: var(--hot-line);
  background: transparent;
  color: var(--hot-paper-faint);
}


/* ==========================================================
   01 — MANIFESTO
   Remove cream takeover.
   ========================================================== */

.hot-home-editorial .hot-manifesto {
  background: var(--hot-bg);
  color: var(--hot-paper);
}

.hot-home-editorial .hot-manifesto .hot-register {
  border-color: var(--hot-line);
  color: var(--hot-paper-faint);
}

.hot-home-editorial .hot-manifesto-grid {
  background:
    linear-gradient(
      90deg,
      transparent 0,
      transparent calc(100% - 1px),
      rgba(255,255,255,.02) calc(100% - 1px)
    );
}

.hot-home-editorial .hot-manifesto-copy {
  background: var(--hot-bg);
}

.hot-home-editorial .hot-manifesto-copy h2 {
  color: var(--hot-paper);
}

.hot-home-editorial .hot-manifesto-copy h2 em {
  color: rgba(241,238,230,.72);
}

.hot-home-editorial .hot-manifesto-foot p {
  color: var(--hot-paper-muted);
}

.hot-home-editorial .hot-manifesto-photo {
  background: #080808;
  border-color: var(--hot-line);
}

/*
   FACE-SAFE:
   Do not center-crop this image.
   Keep upper body / heads in the protected region.
*/

.hot-home-editorial .hot-manifesto-photo img {
  object-fit: cover;
  object-position: 50% 28%;
  filter:
    saturate(.78)
    contrast(1.06)
    brightness(.88);
}


/* ==========================================================
   02 — CURRENT SIGNAL
   ========================================================== */

.hot-home-editorial .hot-signal {
  background: var(--hot-bg);
}

.hot-home-editorial .hot-feature-media {
  background: #080808;
}

/*
   Glasses photograph:
   protect face rather than filling the box aggressively.
*/

.hot-home-editorial .hot-feature-media img {
  object-position: 50% 28%;
}


/* ==========================================================
   03 — FIELD NOTES
   Tighten vertical rhythm.
   ========================================================== */

.hot-home-editorial .hot-story {
  background: var(--hot-bg-raised);
  padding-bottom: clamp(80px, 10vw, 150px);
}

.hot-home-editorial .hot-story-canvas {
  min-height: 2180px;
}

.hot-home-editorial .hot-story-shot {
  background: #0d0d0d;
}

/* Primary live shot — protect performers */

.hot-home-editorial .shot-a img {
  object-position: 50% 30%;
}

/* Backstage seated duo */

.hot-home-editorial .shot-b img {
  object-position: 50% 22%;
}

/* Blue stage — hands + heads */

.hot-home-editorial .shot-c img {
  object-position: 50% 24%;
}

/* Club shot */

.hot-home-editorial .shot-d img {
  object-position: 50% 25%;
}

/* Costume photo */

.hot-home-editorial .shot-e img {
  object-position: 50% 18%;
}

/* Winter candid */

.hot-home-editorial .shot-f img {
  object-position: 50% 18%;
}


/* ==========================================================
   04 — HEADS / TAILS
   Keep this inside the dark HOT universe.
   ========================================================== */

.hot-home-editorial .hot-duality {
  background: var(--hot-bg-soft);
  color: var(--hot-paper);
}

.hot-home-editorial .hot-duality-stage {
  border-top: 1px solid var(--hot-line);
  border-bottom: 1px solid var(--hot-line);
}

.hot-home-editorial .hot-side + .hot-side {
  border-color: var(--hot-line);
}

/*
   Critical face protection.
   Less aggressive crop and upper-face bias.
*/

.hot-home-editorial .hot-side-heads img {
  object-fit: cover;
  object-position: 50% 18%;
}

.hot-home-editorial .hot-side-tails img {
  object-fit: cover;
  object-position: 50% 16%;
}

.hot-home-editorial .hot-side-shade {
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.12) 52%,
      rgba(0,0,0,.06) 100%
    );
}

.hot-home-editorial .hot-duality-statement {
  background: var(--hot-bg);
}

.hot-home-editorial .hot-duality-statement > p {
  color: var(--hot-paper-muted);
}


/* ==========================================================
   05 — LIVE
   ========================================================== */

.hot-home-editorial .hot-live {
  background: var(--hot-bg);
}


/* ==========================================================
   06 — BOOKING
   No cream takeover.
   Video becomes the bright object.
   ========================================================== */

.hot-home-editorial .hot-booking {
  background: var(--hot-bg-raised);
  color: var(--hot-paper);
}

.hot-home-editorial .hot-booking-head p {
  color: var(--hot-paper-muted);
}

.hot-home-editorial .hot-booking-layout {
  border-color: var(--hot-line);
  background: #080808;
}

.hot-home-editorial .hot-booking-film {
  border-color: var(--hot-line);
}

.hot-home-editorial .hot-booking-panel {
  background: #090909;
}

.hot-home-editorial .hot-booking-panel-head {
  border-color: var(--hot-line);
  color: var(--hot-paper-muted);
}

.hot-home-editorial .hot-booking .booking-form input,
.hot-home-editorial .hot-booking .booking-form textarea {
  border-color: var(--hot-line);
  background: transparent;
  color: var(--hot-paper);
}

.hot-home-editorial .hot-booking .booking-form input::placeholder,
.hot-home-editorial .hot-booking .booking-form textarea::placeholder {
  color: rgba(241,238,230,.4);
}

.hot-home-editorial .hot-booking .booking-form button {
  border: 1px solid var(--hot-paper);
  background: var(--hot-paper);
  color: #050505;
  transition:
    background .22s ease,
    color .22s ease;
}

.hot-home-editorial .hot-booking .booking-form button:hover {
  background: transparent;
  color: var(--hot-paper);
}


/* ==========================================================
   07 — DIRECT SIGNAL
   ========================================================== */

.hot-home-editorial .hot-direct {
  background: var(--hot-bg);
}


/* ==========================================================
   TABLET LANDSCAPE / SMALL LAPTOP
   769 — 1180
   ========================================================== */

@media (min-width: 769px) and (max-width: 1180px) {

  .hot-register {
    padding-right: 18px;
    padding-left: 18px;
  }

  /* Manifesto */

  .hot-manifesto {
    min-height: auto;
  }

  .hot-manifesto-grid {
    grid-template-columns: 1.05fr .95fr;
    min-height: 760px;
  }

  .hot-manifesto-copy {
    padding:
      clamp(44px, 6vw, 72px)
      clamp(18px, 4vw, 44px);
  }

  .hot-manifesto-copy h2 {
    max-width: 700px;
    font-size: clamp(62px, 8.4vw, 104px);
    line-height: .79;
  }

  .hot-manifesto-foot {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 54px;
  }

  .hot-manifesto-photo {
    min-height: 760px;
  }

  .hot-manifesto-photo img {
    min-height: 760px;
    object-position: 50% 25%;
  }

  /* Music */

  .hot-signal-head {
    grid-template-columns: .26fr 1fr;
    padding-right: 18px;
    padding-left: 18px;
  }

  .hot-feature-track {
    grid-template-columns: 1.18fr .82fr;
    margin-right: 18px;
    margin-left: 18px;
  }

  .hot-feature-media {
    min-height: 620px;
  }

  .hot-feature-info {
    padding: 30px;
  }

  .hot-feature-info h3 {
    margin-top: 70px;
    font-size: clamp(54px, 7vw, 80px);
  }

  .hot-track-ledger {
    margin-right: 18px;
    margin-left: 18px;
  }

  /* Story */

  .hot-story-title {
    padding-right: 18px;
    padding-left: 18px;
  }

  .hot-story-canvas {
    gap: 16px;
    min-height: 1780px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .shot-a {
    height: 560px;
  }

  .shot-b {
    height: 390px;
    margin-top: 160px;
  }

  .shot-c {
    height: 530px;
    margin-top: 55px;
  }

  .shot-d {
    height: 350px;
    margin-top: -150px;
  }

  .shot-e {
    height: 470px;
    margin-top: 80px;
  }

  .shot-f {
    height: 420px;
    margin-top: -40px;
  }

  .hot-story-interrupt {
    margin-top: 45px;
  }

  /* Duality */

  .hot-duality-stage {
    min-height: 720px;
  }

  .hot-side-heads img,
  .hot-side-tails img {
    object-position: 50% 20%;
  }

  .hot-duality-statement {
    grid-template-columns: .3fr 1fr .3fr;
    gap: 24px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .hot-duality-statement h3 {
    font-size: clamp(68px, 8vw, 110px);
  }

  /* Live */

  .hot-show-row {
    grid-template-columns: 125px 1fr 150px;
    padding-right: 18px;
    padding-left: 18px;
  }

  /* Booking */

  .hot-booking-head {
    grid-template-columns: 1fr .42fr;
    padding-right: 18px;
    padding-left: 18px;
  }

  .hot-booking-layout {
    grid-template-columns: 1.08fr .92fr;
    margin-right: 18px;
    margin-left: 18px;
  }

  .hot-booking-film,
  .hot-booking-film iframe {
    min-height: 650px;
  }

  .hot-booking-panel {
    padding: 30px;
  }

  /* Direct */

  .hot-direct-grid {
    gap: 42px;
    padding-right: 18px;
    padding-left: 18px;
  }
}


/* ==========================================================
   IPAD PORTRAIT
   Give tablet its own composition.
   ========================================================== */

@media (min-width: 761px) and (max-width: 900px) {

  .hot-manifesto-grid {
    grid-template-columns: 1fr;
  }

  .hot-manifesto-copy {
    min-height: 650px;
  }

  .hot-manifesto-photo {
    height: 74svh;
    min-height: 600px;
    border-top: 1px solid var(--hot-line);
    border-left: 0;
  }

  .hot-manifesto-photo img {
    min-height: 600px;
    object-position: 50% 24%;
  }

  .hot-feature-track {
    grid-template-columns: 1fr;
  }

  .hot-feature-media {
    min-height: 68svh;
    border-right: 0;
    border-bottom: 1px solid var(--hot-line);
  }

  .hot-feature-info {
    min-height: 470px;
  }

  .hot-track-ledger button {
    grid-template-columns: 55px 1fr .55fr auto;
  }

  .hot-story-canvas {
    min-height: 1650px;
  }

  .hot-duality-stage {
    min-height: 680px;
  }

  .hot-duality-statement {
    grid-template-columns: 1fr;
  }

  .hot-duality-statement h3 {
    margin: 40px 0;
  }

  .hot-duality-statement > p:last-child {
    justify-self: start;
  }

  .hot-booking-head {
    grid-template-columns: 1fr;
  }

  .hot-booking-head p {
    margin-top: 30px;
  }

  .hot-booking-layout {
    grid-template-columns: 1fr;
  }

  .hot-booking-film {
    border-right: 0;
    border-bottom: 1px solid var(--hot-line);
  }

  .hot-booking-panel {
    padding: 44px;
  }

  .hot-direct-grid {
    grid-template-columns: 1fr;
  }

  .hot-direct-form {
    max-width: 620px;
  }
}


/* ==========================================================
   MOBILE
   430 / 390 / smaller
   ========================================================== */

@media (max-width: 760px) {

  .hot-home-editorial {
    overflow-x: clip;
  }

  .hot-register,
  .hot-register-light {
    min-height: 36px;
    padding: 12px 12px;
  }

  /* Manifesto */

  .hot-manifesto-copy {
    min-height: auto;
    padding: 48px 12px 56px;
  }

  .hot-manifesto-copy h2 {
    max-width: 100%;
    font-size: clamp(49px, 15.7vw, 76px);
    line-height: .79;
  }

  .hot-manifesto-copy h2 em {
    margin-top: .12em;
    font-size: .65em;
  }

  .hot-manifesto-foot {
    margin-top: 70px;
  }

  .hot-manifesto-photo {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .hot-manifesto-photo img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: 50% 20%;
  }

  /* Signal */

  .hot-signal {
    padding-bottom: 90px;
  }

  .hot-signal-head {
    padding: 64px 12px 40px;
  }

  .hot-signal-head h2 {
    font-size: clamp(46px, 14vw, 68px);
  }

  .hot-feature-track {
    margin: 0 12px;
  }

  .hot-feature-media {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .hot-feature-media img {
    object-position: 50% 22%;
  }

  .hot-feature-info {
    min-height: 390px;
    padding: 28px 2px 30px;
  }

  .hot-feature-info h3 {
    margin-top: 66px;
    font-size: clamp(50px, 15vw, 74px);
  }

  .hot-track-ledger {
    margin: 0 12px;
  }

  .hot-track-ledger button {
    min-height: 66px;
  }

  /* Story */

  .hot-story {
    padding-bottom: 80px;
  }

  .hot-story-title {
    padding: 70px 12px 38px;
  }

  .hot-story-title h2 {
    font-size: clamp(55px, 17vw, 84px);
  }

  .hot-story-canvas {
    padding: 0 12px;
  }

  .hot-story-shot {
    margin-bottom: 44px;
  }

  .hot-story-shot img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /*
     On phones we deliberately stop forcing portrait images
     into fixed cover boxes. Faces win over geometry.
  */

  .shot-a,
  .shot-c {
    width: 100%;
  }

  .shot-b {
    width: 68%;
    margin-left: auto;
  }

  .shot-d {
    width: 62%;
    margin-right: auto;
    margin-left: 0;
  }

  .shot-e {
    width: 82%;
    margin-left: auto;
  }

  .shot-f {
    width: 72%;
    margin-right: auto;
    margin-left: 0;
  }

  .hot-story-interrupt {
    margin: 68px 0 76px;
    font-size: clamp(45px, 14vw, 70px);
  }

  /* Heads / Tails */

  .hot-duality-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    height: 68svh;
    max-height: 620px;
  }

  .hot-side-heads img {
    object-position: 48% 18%;
  }

  .hot-side-tails img {
    object-position: 52% 16%;
  }

  .hot-side-label strong {
    font-size: clamp(38px, 12vw, 58px);
  }

  .hot-duality-statement {
    padding: 64px 12px 74px;
  }

  .hot-duality-statement h3 {
    margin: 44px 0;
    font-size: clamp(50px, 15vw, 74px);
  }

  /* Live */

  .hot-live {
    padding-bottom: 90px;
  }

  .hot-live-heading {
    padding: 68px 12px 44px;
  }

  .hot-live-heading h2 {
    font-size: clamp(52px, 16vw, 82px);
  }

  .hot-show-row {
    padding-right: 12px;
    padding-left: 12px;
  }

  .hot-show-name h3 {
    font-size: clamp(28px, 8.5vw, 43px);
  }

  /* Booking */

  .hot-booking {
    padding-bottom: 80px;
  }

  .hot-booking-head {
    padding: 68px 12px 44px;
  }

  .hot-booking-head h2 {
    font-size: clamp(52px, 15vw, 80px);
  }

  .hot-booking-layout {
    margin: 0 12px;
  }

  .hot-booking-film {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .hot-booking-film iframe {
    min-height: 0;
    height: 100%;
  }

  .hot-booking-panel {
    padding: 28px 16px 34px;
  }

  .hot-booking .booking-form input,
  .hot-booking .booking-form textarea {
    min-height: 52px;
    font-size: 16px;
  }

  .hot-booking .booking-form button {
    min-height: 52px;
  }

  /* Direct */

  .hot-direct {
    padding-bottom: 100px;
  }

  .hot-direct-grid {
    padding: 68px 12px 0;
  }

  .hot-direct h2 {
    margin-bottom: 58px;
    font-size: clamp(52px, 15vw, 80px);
  }

  .hot-direct .subscribe-form input {
    min-height: 52px;
    font-size: 16px;
  }

  .hot-direct .subscribe-form button {
    min-height: 52px;
  }
}


/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media (max-width: 430px) {

  .hot-manifesto-copy h2 {
    font-size: clamp(47px, 15.2vw, 65px);
  }

  .hot-signal-head h2,
  .hot-story-title h2,
  .hot-live-heading h2,
  .hot-booking-head h2,
  .hot-direct h2 {
    overflow-wrap: normal;
    word-break: normal;
  }

  .hot-feature-info h3 {
    font-size: clamp(48px, 14.5vw, 63px);
  }

  .hot-duality-stage {
    height: 62svh;
  }

  .hot-duality-center {
    white-space: nowrap;
  }

  .hot-film-label {
    gap: 12px;
    font-size: 7px;
  }
}


/* ==========================================================
   VERY SMALL PHONE
   ========================================================== */

@media (max-width: 390px) {

  .hot-manifesto-copy,
  .hot-signal-head,
  .hot-story-title,
  .hot-live-heading,
  .hot-booking-head,
  .hot-direct-grid {
    padding-right: 10px;
    padding-left: 10px;
  }

  .hot-feature-track,
  .hot-track-ledger,
  .hot-booking-layout {
    margin-right: 10px;
    margin-left: 10px;
  }

  .hot-story-canvas {
    padding-right: 10px;
    padding-left: 10px;
  }

  .hot-manifesto-copy h2 {
    font-size: clamp(45px, 15vw, 59px);
  }

  .hot-duality-stage {
    height: 58svh;
  }
}


/* ==========================================================
   TOUCH DEVICES
   Don't depend on hover for comprehension.
   ========================================================== */

@media (hover: none), (pointer: coarse) {

  .hot-manifesto-photo:hover img,
  .hot-feature-track:hover .hot-feature-media img,
  .hot-story-shot:hover img,
  .hot-side:hover img {
    transform: none;
  }

  .hot-show-row > img {
    opacity: .17;
    transform: translateY(-50%) scale(1);
  }

  .hot-show-row:hover > img {
    opacity: .17;
    transform: translateY(-50%) scale(1);
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hot-home-editorial *,
  .hot-home-editorial *::before,
  .hot-home-editorial *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================
   HEADS OR TAILS — EVENTS V1
   Editorial public events / live archive
   ========================================================== */

.events-route {
  background: #050505;
  color: #f0eee7;
}

.events-page {
  --events-bg: #050505;
  --events-raised: #0a0a0a;
  --events-paper: #f0eee7;
  --events-muted: rgba(240,238,231,.5);
  --events-line: rgba(240,238,231,.16);
  --events-signal: #d8ff42);

  overflow: clip;
  background: var(--events-bg);
  color: var(--events-paper);
}

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

.events-register,
.events-section-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-height: 38px;
  align-items: center;
  padding: 0 22px;
  border-top: 1px solid var(--events-line);
  border-bottom: 1px solid var(--events-line);
  color: var(--events-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.events-register {
  grid-template-columns: 1fr 1fr 1fr;
}

.events-register span:nth-child(2) {
  text-align: center;
}

.events-register span:last-child,
.events-section-index span:last-child {
  text-align: right;
}


/* HERO */

.events-hero {
  min-height: 100svh;
  padding-top: 62px;
}

.events-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: calc(100svh - 100px);
}

.events-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px,8vw,130px) 22px;
}

.events-eyebrow {
  margin: 0 0 45px;
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .18em;
}

.events-hero h1 {
  margin: 0;
  font-size: clamp(78px,10.5vw,190px);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .72;
}

.events-hero h1 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .7em;
  font-weight: 400;
}

.events-intro {
  max-width: 370px;
  margin: 70px 0 0;
  color: var(--events-muted);
  font-size: 14px;
  line-height: 1.5;
}

.events-hero-media {
  position: relative;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid var(--events-line);
  background: #0a0a0a;
}

.events-hero-media img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 50% 25%;
  filter: saturate(.72) contrast(1.08) brightness(.88);
}

.events-hero-media figcaption,
.event-feature-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(4,4,4,.84);
  color: white;
  font-size: 8px;
  letter-spacing: .15em;
}


/* NEXT */

.events-next {
  padding-bottom: clamp(100px,12vw,190px);
}

.event-feature {
  display: grid;
  grid-template-columns: minmax(150px,.28fr) minmax(360px,.82fr) 1fr;
  min-height: 760px;
  border-bottom: 1px solid var(--events-line);
}

.event-feature-date {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 38px 22px;
  border-right: 1px solid var(--events-line);
}

.event-feature-date small,
.event-feature-date span {
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .16em;
}

.event-feature-date strong {
  font-size: clamp(100px,12vw,220px);
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: .7;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.event-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(45px,6vw,90px);
}

.event-status {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 65px;
  color: var(--events-muted);
  font-size: 8px;
  letter-spacing: .15em;
}

.event-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8ff42;
}

.event-feature-copy > p {
  margin: 0 0 18px;
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .14em;
}

.event-feature-copy h2 {
  margin: 0;
  font-size: clamp(54px,6.8vw,116px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .8;
}

.event-meta {
  display: flex;
  gap: 25px;
  margin-top: 35px;
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .13em;
}

.event-actions {
  display: flex;
  gap: 30px;
  margin-top: 80px;
}

.event-actions a,
.event-actions button {
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--events-paper);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-decoration: none;
}

.event-feature-photo {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid var(--events-line);
}

.event-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.7) contrast(1.08);
}


/* LEDGER */

.events-ledger {
  padding-bottom: clamp(120px,14vw,220px);
  background: var(--events-raised);
}

.events-ledger-heading {
  padding: clamp(80px,10vw,150px) 22px;
}

.events-ledger-heading > p {
  margin: 0 0 25px;
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .16em;
}

.events-ledger-heading h2 {
  margin: 0;
  font-size: clamp(76px,11vw,200px);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .7;
}

.events-ledger-heading h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .7em;
  font-weight: 400;
}

.events-group {
  border-top: 1px solid var(--events-line);
}

.events-group + .events-group {
  margin-top: 100px;
}

.events-group-label {
  display: flex;
  justify-content: space-between;
  padding: 13px 22px;
  border-bottom: 1px solid var(--events-line);
  color: var(--events-muted);
  font-size: 8px;
  letter-spacing: .15em;
}

.events-row {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0,1fr) 220px;
  gap: 30px;
  min-height: 220px;
  align-items: center;
  padding: 24px 22px;
  overflow: hidden;
  border-bottom: 1px solid var(--events-line);
  isolation: isolate;
}

.events-row > div {
  position: relative;
  z-index: 2;
}

.events-row > img {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 16%;
  width: min(440px,32vw);
  height: 170%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(-50%) scale(.94);
  filter: saturate(.65);
  transition:
    opacity .3s ease,
    transform .45s cubic-bezier(.2,.8,.2,1);
}

.events-row:hover > img {
  opacity: .38;
  transform: translateY(-50%) scale(1);
}

.events-row-date {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.events-row-date strong {
  font-size: 72px;
  letter-spacing: -.07em;
  line-height: .75;
}

.events-row-date span,
.events-row-title small,
.events-row-meta span,
.events-row-meta b {
  color: var(--events-muted);
  font-size: 8px;
  letter-spacing: .14em;
}

.events-row-title h3 {
  margin: 8px 0 0;
  font-size: clamp(32px,4vw,68px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
}

.events-row-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  text-align: right;
}

.events-group-past {
  color: rgba(240,238,231,.65);
}


/* FIELD NOTES */

.events-proof {
  padding-bottom: clamp(120px,14vw,220px);
}

.events-proof-grid {
  display: grid;
  grid-template-columns: 1.15fr .65fr .55fr;
  gap: 20px;
  align-items: center;
  padding: clamp(80px,10vw,150px) 22px 0;
}

.events-proof figure {
  margin: 0;
  overflow: hidden;
}

.events-proof-main {
  height: 760px;
}

.events-proof-secondary {
  height: 440px;
  align-self: end;
}

.events-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.events-proof-main img {
  object-position: 50% 22%;
}

.events-proof-secondary img {
  object-position: 50% 18%;
}

.events-proof-copy {
  padding: 0 15px;
}

.events-proof-copy > span {
  color: var(--events-muted);
  font-size: 8px;
  letter-spacing: .15em;
}

.events-proof-copy h2 {
  margin: 30px 0;
  font-size: clamp(48px,6vw,100px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .78;
}

.events-proof-copy h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .7em;
  font-weight: 400;
}

.events-proof-copy p {
  max-width: 290px;
  margin: 0;
  color: var(--events-muted);
  font-size: 12px;
  line-height: 1.55;
}


/* BOOK */

.events-book {
  padding-bottom: 150px;
  border-top: 1px solid var(--events-line);
}

.events-book-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 70px;
  align-items: end;
  padding: clamp(90px,11vw,170px) 22px 0;
}

.events-book-grid > div:first-child > p {
  margin: 0 0 30px;
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .16em;
}

.events-book h2 {
  margin: 0;
  font-size: clamp(70px,9.5vw,170px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .73;
}

.events-book h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .7em;
  font-weight: 400;
}

.events-book-action {
  padding-bottom: 8px;
}

.events-book-action p {
  max-width: 320px;
  margin: 0 0 45px;
  color: var(--events-muted);
  font-size: 12px;
  line-height: 1.5;
}

.events-book-action a {
  display: block;
  width: fit-content;
  margin-top: 20px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  color: var(--events-paper);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-decoration: none;
}


/* TABLET */

@media (min-width: 761px) and (max-width: 1180px) {

  .events-hero-grid {
    grid-template-columns: 1fr .72fr;
  }

  .events-hero h1 {
    font-size: clamp(72px,10vw,118px);
  }

  .event-feature {
    grid-template-columns: 115px 1fr .8fr;
    min-height: 650px;
  }

  .event-feature-copy {
    padding: 40px;
  }

  .event-feature-date strong {
    font-size: 120px;
  }

  .events-row {
    grid-template-columns: 140px 1fr 160px;
  }

  .events-proof-grid {
    grid-template-columns: 1fr .65fr;
  }

  .events-proof-secondary {
    display: none;
  }

  .events-proof-main {
    height: 620px;
  }

  .events-book-grid {
    grid-template-columns: 1fr .55fr;
  }
}


/* IPAD PORTRAIT */

@media (min-width: 761px) and (max-width: 900px) {

  .events-hero {
    min-height: auto;
  }

  .events-hero-grid {
    grid-template-columns: 1fr;
  }

  .events-hero-copy {
    min-height: 70svh;
  }

  .events-hero-media {
    height: 70svh;
    min-height: 620px;
    border-top: 1px solid var(--events-line);
    border-left: 0;
  }

  .event-feature {
    grid-template-columns: 120px 1fr;
  }

  .event-feature-photo {
    grid-column: 1 / -1;
    min-height: 560px;
    border-top: 1px solid var(--events-line);
    border-left: 0;
  }

  .events-proof-grid {
    grid-template-columns: 1fr;
  }

  .events-proof-copy {
    padding: 50px 0;
  }

  .events-book-grid {
    grid-template-columns: 1fr;
  }

  .events-book-action {
    max-width: 540px;
    margin-top: 50px;
  }
}


/* MOBILE */

@media (max-width: 760px) {

  .events-register {
    grid-template-columns: 1fr auto;
    padding: 0 12px;
  }

  .events-register span:nth-child(2) {
    display: none;
  }

  .events-section-index {
    padding: 0 12px;
  }

  .events-hero {
    min-height: 0;
    padding-top: 56px;
  }

  .events-hero-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .events-hero-copy {
    min-height: 72svh;
    padding: 65px 12px 45px;
  }

  .events-eyebrow {
    margin-bottom: 40px;
  }

  .events-hero h1 {
    font-size: clamp(58px,17vw,88px);
  }

  .events-intro {
    margin-top: 55px;
  }

  .events-hero-media {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-top: 1px solid var(--events-line);
    border-left: 0;
  }

  .events-hero-media img {
    object-position: 50% 20%;
  }

  .event-feature {
    display: grid;
    grid-template-columns: 72px 1fr;
    min-height: 0;
  }

  .event-feature-date {
    padding: 26px 12px;
  }

  .event-feature-date strong {
    font-size: 76px;
  }

  .event-feature-copy {
    padding: 45px 18px;
  }

  .event-status {
    margin-bottom: 45px;
  }

  .event-feature-copy h2 {
    font-size: clamp(44px,13vw,66px);
  }

  .event-meta {
    flex-direction: column;
    gap: 8px;
  }

  .event-actions {
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
    margin-top: 55px;
  }

  .event-feature-photo {
    grid-column: 1 / -1;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-top: 1px solid var(--events-line);
    border-left: 0;
  }

  .events-ledger-heading {
    padding: 70px 12px;
  }

  .events-ledger-heading h2 {
    font-size: clamp(62px,18vw,94px);
  }

  .events-group + .events-group {
    margin-top: 70px;
  }

  .events-group-label {
    padding-right: 12px;
    padding-left: 12px;
  }

  .events-row {
    grid-template-columns: 74px 1fr;
    gap: 16px;
    min-height: 175px;
    padding: 22px 12px;
  }

  .events-row-date strong {
    font-size: 48px;
  }

  .events-row-title h3 {
    font-size: clamp(27px,8vw,40px);
  }

  .events-row-meta {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
  }

  .events-row > img {
    right: -10%;
    width: 72vw;
    opacity: .14;
    transform: translateY(-50%) scale(1);
  }

  .events-row:hover > img {
    opacity: .14;
    transform: translateY(-50%) scale(1);
  }

  .events-proof-grid {
    display: block;
    padding: 70px 12px 0;
  }

  .events-proof-main {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .events-proof-main img {
    object-position: 50% 18%;
  }

  .events-proof-copy {
    padding: 60px 0 0;
  }

  .events-proof-copy h2 {
    font-size: clamp(52px,15vw,78px);
  }

  .events-proof-secondary {
    display: none;
  }

  .events-book {
    padding-bottom: 110px;
  }

  .events-book-grid {
    display: block;
    padding: 75px 12px 0;
  }

  .events-book h2 {
    font-size: clamp(56px,16vw,84px);
  }

  .events-book-action {
    margin-top: 65px;
  }
}


/* 430 */

@media (max-width: 430px) {

  .events-hero h1 {
    font-size: clamp(56px,16.4vw,72px);
  }

  .event-feature-copy {
    padding-right: 12px;
    padding-left: 14px;
  }

  .event-feature-copy h2 {
    font-size: clamp(40px,12vw,54px);
  }

  .events-book h2 {
    font-size: clamp(52px,15vw,70px);
  }
}


/* 390 */

@media (max-width: 390px) {

  .events-hero-copy,
  .events-ledger-heading,
  .events-proof-grid,
  .events-book-grid {
    padding-right: 10px;
    padding-left: 10px;
  }

  .events-section-index,
  .events-register,
  .events-group-label,
  .events-row {
    padding-right: 10px;
    padding-left: 10px;
  }
}


/* TOUCH */

@media (hover: none), (pointer: coarse) {

  .events-row > img {
    opacity: .12;
    transform: translateY(-50%) scale(1);
  }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .events-page *,
  .events-page *::before,
  .events-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ==========================================================
   HEADS OR TAILS — EVENTS V1
   Editorial public events / live archive
   ========================================================== */

.events-route {
  background: #050505;
  color: #f0eee7;
}

.events-page {
  --events-bg: #050505;
  --events-raised: #0a0a0a;
  --events-paper: #f0eee7;
  --events-muted: rgba(240,238,231,.5);
  --events-line: rgba(240,238,231,.16);
  --events-signal: #d8ff42);

  overflow: clip;
  background: var(--events-bg);
  color: var(--events-paper);
}

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

.events-register,
.events-section-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-height: 38px;
  align-items: center;
  padding: 0 22px;
  border-top: 1px solid var(--events-line);
  border-bottom: 1px solid var(--events-line);
  color: var(--events-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.events-register {
  grid-template-columns: 1fr 1fr 1fr;
}

.events-register span:nth-child(2) {
  text-align: center;
}

.events-register span:last-child,
.events-section-index span:last-child {
  text-align: right;
}


/* HERO */

.events-hero {
  min-height: 100svh;
  padding-top: 62px;
}

.events-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: calc(100svh - 100px);
}

.events-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px,8vw,130px) 22px;
}

.events-eyebrow {
  margin: 0 0 45px;
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .18em;
}

.events-hero h1 {
  margin: 0;
  font-size: clamp(78px,10.5vw,190px);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .72;
}

.events-hero h1 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .7em;
  font-weight: 400;
}

.events-intro {
  max-width: 370px;
  margin: 70px 0 0;
  color: var(--events-muted);
  font-size: 14px;
  line-height: 1.5;
}

.events-hero-media {
  position: relative;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid var(--events-line);
  background: #0a0a0a;
}

.events-hero-media img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 50% 25%;
  filter: saturate(.72) contrast(1.08) brightness(.88);
}

.events-hero-media figcaption,
.event-feature-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(4,4,4,.84);
  color: white;
  font-size: 8px;
  letter-spacing: .15em;
}


/* NEXT */

.events-next {
  padding-bottom: clamp(100px,12vw,190px);
}

.event-feature {
  display: grid;
  grid-template-columns: minmax(150px,.28fr) minmax(360px,.82fr) 1fr;
  min-height: 760px;
  border-bottom: 1px solid var(--events-line);
}

.event-feature-date {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 38px 22px;
  border-right: 1px solid var(--events-line);
}

.event-feature-date small,
.event-feature-date span {
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .16em;
}

.event-feature-date strong {
  font-size: clamp(100px,12vw,220px);
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: .7;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.event-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(45px,6vw,90px);
}

.event-status {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 65px;
  color: var(--events-muted);
  font-size: 8px;
  letter-spacing: .15em;
}

.event-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8ff42;
}

.event-feature-copy > p {
  margin: 0 0 18px;
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .14em;
}

.event-feature-copy h2 {
  margin: 0;
  font-size: clamp(54px,6.8vw,116px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .8;
}

.event-meta {
  display: flex;
  gap: 25px;
  margin-top: 35px;
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .13em;
}

.event-actions {
  display: flex;
  gap: 30px;
  margin-top: 80px;
}

.event-actions a,
.event-actions button {
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--events-paper);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-decoration: none;
}

.event-feature-photo {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid var(--events-line);
}

.event-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.7) contrast(1.08);
}


/* LEDGER */

.events-ledger {
  padding-bottom: clamp(120px,14vw,220px);
  background: var(--events-raised);
}

.events-ledger-heading {
  padding: clamp(80px,10vw,150px) 22px;
}

.events-ledger-heading > p {
  margin: 0 0 25px;
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .16em;
}

.events-ledger-heading h2 {
  margin: 0;
  font-size: clamp(76px,11vw,200px);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .7;
}

.events-ledger-heading h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .7em;
  font-weight: 400;
}

.events-group {
  border-top: 1px solid var(--events-line);
}

.events-group + .events-group {
  margin-top: 100px;
}

.events-group-label {
  display: flex;
  justify-content: space-between;
  padding: 13px 22px;
  border-bottom: 1px solid var(--events-line);
  color: var(--events-muted);
  font-size: 8px;
  letter-spacing: .15em;
}

.events-row {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0,1fr) 220px;
  gap: 30px;
  min-height: 220px;
  align-items: center;
  padding: 24px 22px;
  overflow: hidden;
  border-bottom: 1px solid var(--events-line);
  isolation: isolate;
}

.events-row > div {
  position: relative;
  z-index: 2;
}

.events-row > img {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 16%;
  width: min(440px,32vw);
  height: 170%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(-50%) scale(.94);
  filter: saturate(.65);
  transition:
    opacity .3s ease,
    transform .45s cubic-bezier(.2,.8,.2,1);
}

.events-row:hover > img {
  opacity: .38;
  transform: translateY(-50%) scale(1);
}

.events-row-date {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.events-row-date strong {
  font-size: 72px;
  letter-spacing: -.07em;
  line-height: .75;
}

.events-row-date span,
.events-row-title small,
.events-row-meta span,
.events-row-meta b {
  color: var(--events-muted);
  font-size: 8px;
  letter-spacing: .14em;
}

.events-row-title h3 {
  margin: 8px 0 0;
  font-size: clamp(32px,4vw,68px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
}

.events-row-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  text-align: right;
}

.events-group-past {
  color: rgba(240,238,231,.65);
}


/* FIELD NOTES */

.events-proof {
  padding-bottom: clamp(120px,14vw,220px);
}

.events-proof-grid {
  display: grid;
  grid-template-columns: 1.15fr .65fr .55fr;
  gap: 20px;
  align-items: center;
  padding: clamp(80px,10vw,150px) 22px 0;
}

.events-proof figure {
  margin: 0;
  overflow: hidden;
}

.events-proof-main {
  height: 760px;
}

.events-proof-secondary {
  height: 440px;
  align-self: end;
}

.events-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.events-proof-main img {
  object-position: 50% 22%;
}

.events-proof-secondary img {
  object-position: 50% 18%;
}

.events-proof-copy {
  padding: 0 15px;
}

.events-proof-copy > span {
  color: var(--events-muted);
  font-size: 8px;
  letter-spacing: .15em;
}

.events-proof-copy h2 {
  margin: 30px 0;
  font-size: clamp(48px,6vw,100px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .78;
}

.events-proof-copy h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .7em;
  font-weight: 400;
}

.events-proof-copy p {
  max-width: 290px;
  margin: 0;
  color: var(--events-muted);
  font-size: 12px;
  line-height: 1.55;
}


/* BOOK */

.events-book {
  padding-bottom: 150px;
  border-top: 1px solid var(--events-line);
}

.events-book-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 70px;
  align-items: end;
  padding: clamp(90px,11vw,170px) 22px 0;
}

.events-book-grid > div:first-child > p {
  margin: 0 0 30px;
  color: var(--events-muted);
  font-size: 9px;
  letter-spacing: .16em;
}

.events-book h2 {
  margin: 0;
  font-size: clamp(70px,9.5vw,170px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .73;
}

.events-book h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .7em;
  font-weight: 400;
}

.events-book-action {
  padding-bottom: 8px;
}

.events-book-action p {
  max-width: 320px;
  margin: 0 0 45px;
  color: var(--events-muted);
  font-size: 12px;
  line-height: 1.5;
}

.events-book-action a {
  display: block;
  width: fit-content;
  margin-top: 20px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  color: var(--events-paper);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-decoration: none;
}


/* TABLET */

@media (min-width: 761px) and (max-width: 1180px) {

  .events-hero-grid {
    grid-template-columns: 1fr .72fr;
  }

  .events-hero h1 {
    font-size: clamp(72px,10vw,118px);
  }

  .event-feature {
    grid-template-columns: 115px 1fr .8fr;
    min-height: 650px;
  }

  .event-feature-copy {
    padding: 40px;
  }

  .event-feature-date strong {
    font-size: 120px;
  }

  .events-row {
    grid-template-columns: 140px 1fr 160px;
  }

  .events-proof-grid {
    grid-template-columns: 1fr .65fr;
  }

  .events-proof-secondary {
    display: none;
  }

  .events-proof-main {
    height: 620px;
  }

  .events-book-grid {
    grid-template-columns: 1fr .55fr;
  }
}


/* IPAD PORTRAIT */

@media (min-width: 761px) and (max-width: 900px) {

  .events-hero {
    min-height: auto;
  }

  .events-hero-grid {
    grid-template-columns: 1fr;
  }

  .events-hero-copy {
    min-height: 70svh;
  }

  .events-hero-media {
    height: 70svh;
    min-height: 620px;
    border-top: 1px solid var(--events-line);
    border-left: 0;
  }

  .event-feature {
    grid-template-columns: 120px 1fr;
  }

  .event-feature-photo {
    grid-column: 1 / -1;
    min-height: 560px;
    border-top: 1px solid var(--events-line);
    border-left: 0;
  }

  .events-proof-grid {
    grid-template-columns: 1fr;
  }

  .events-proof-copy {
    padding: 50px 0;
  }

  .events-book-grid {
    grid-template-columns: 1fr;
  }

  .events-book-action {
    max-width: 540px;
    margin-top: 50px;
  }
}


/* MOBILE */

@media (max-width: 760px) {

  .events-register {
    grid-template-columns: 1fr auto;
    padding: 0 12px;
  }

  .events-register span:nth-child(2) {
    display: none;
  }

  .events-section-index {
    padding: 0 12px;
  }

  .events-hero {
    min-height: 0;
    padding-top: 56px;
  }

  .events-hero-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .events-hero-copy {
    min-height: 72svh;
    padding: 65px 12px 45px;
  }

  .events-eyebrow {
    margin-bottom: 40px;
  }

  .events-hero h1 {
    font-size: clamp(58px,17vw,88px);
  }

  .events-intro {
    margin-top: 55px;
  }

  .events-hero-media {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-top: 1px solid var(--events-line);
    border-left: 0;
  }

  .events-hero-media img {
    object-position: 50% 20%;
  }

  .event-feature {
    display: grid;
    grid-template-columns: 72px 1fr;
    min-height: 0;
  }

  .event-feature-date {
    padding: 26px 12px;
  }

  .event-feature-date strong {
    font-size: 76px;
  }

  .event-feature-copy {
    padding: 45px 18px;
  }

  .event-status {
    margin-bottom: 45px;
  }

  .event-feature-copy h2 {
    font-size: clamp(44px,13vw,66px);
  }

  .event-meta {
    flex-direction: column;
    gap: 8px;
  }

  .event-actions {
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
    margin-top: 55px;
  }

  .event-feature-photo {
    grid-column: 1 / -1;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-top: 1px solid var(--events-line);
    border-left: 0;
  }

  .events-ledger-heading {
    padding: 70px 12px;
  }

  .events-ledger-heading h2 {
    font-size: clamp(62px,18vw,94px);
  }

  .events-group + .events-group {
    margin-top: 70px;
  }

  .events-group-label {
    padding-right: 12px;
    padding-left: 12px;
  }

  .events-row {
    grid-template-columns: 74px 1fr;
    gap: 16px;
    min-height: 175px;
    padding: 22px 12px;
  }

  .events-row-date strong {
    font-size: 48px;
  }

  .events-row-title h3 {
    font-size: clamp(27px,8vw,40px);
  }

  .events-row-meta {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
  }

  .events-row > img {
    right: -10%;
    width: 72vw;
    opacity: .14;
    transform: translateY(-50%) scale(1);
  }

  .events-row:hover > img {
    opacity: .14;
    transform: translateY(-50%) scale(1);
  }

  .events-proof-grid {
    display: block;
    padding: 70px 12px 0;
  }

  .events-proof-main {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .events-proof-main img {
    object-position: 50% 18%;
  }

  .events-proof-copy {
    padding: 60px 0 0;
  }

  .events-proof-copy h2 {
    font-size: clamp(52px,15vw,78px);
  }

  .events-proof-secondary {
    display: none;
  }

  .events-book {
    padding-bottom: 110px;
  }

  .events-book-grid {
    display: block;
    padding: 75px 12px 0;
  }

  .events-book h2 {
    font-size: clamp(56px,16vw,84px);
  }

  .events-book-action {
    margin-top: 65px;
  }
}


/* 430 */

@media (max-width: 430px) {

  .events-hero h1 {
    font-size: clamp(56px,16.4vw,72px);
  }

  .event-feature-copy {
    padding-right: 12px;
    padding-left: 14px;
  }

  .event-feature-copy h2 {
    font-size: clamp(40px,12vw,54px);
  }

  .events-book h2 {
    font-size: clamp(52px,15vw,70px);
  }
}


/* 390 */

@media (max-width: 390px) {

  .events-hero-copy,
  .events-ledger-heading,
  .events-proof-grid,
  .events-book-grid {
    padding-right: 10px;
    padding-left: 10px;
  }

  .events-section-index,
  .events-register,
  .events-group-label,
  .events-row {
    padding-right: 10px;
    padding-left: 10px;
  }
}


/* TOUCH */

@media (hover: none), (pointer: coarse) {

  .events-row > img {
    opacity: .12;
    transform: translateY(-50%) scale(1);
  }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .events-page *,
  .events-page *::before,
  .events-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}