/* Felix Lindsell-Hales - true fullscreen text-led composer site */

:root {
  --black: #0b0a08;
  --black-soft: #11100d;
  --walnut: #21160f;
  --walnut-light: #2c1e15;
  --off-white: #f2e8d8;
  --muted: rgba(242, 232, 216, 0.72);
  --faint: rgba(242, 232, 216, 0.10);
  --brass: #ad8748;
  --brass-soft: rgba(173, 135, 72, 0.25);
  --max-width: 1360px;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0b0a08;
  color: var(--off-white);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.022;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.45) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.45) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: screen;
}

.container {
  width: min(var(--max-width), calc(100% - 64px));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: 68px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(24px, 4vw, 56px);
  background: rgba(11, 10, 8, 0.72);
  border-bottom: 1px solid rgba(242,232,216,0.08);
  backdrop-filter: blur(18px);
}
.brand {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.nav {
  display: flex;
  gap: 24px;
  color: var(--muted);
  font-size: 0.92rem;
}
.nav a:hover { color: var(--off-white); }

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #0b0a08;
}
.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/Images/felix-hero.JPG") 68% center / cover no-repeat;
  filter: saturate(0.9) contrast(1.1) brightness(0.72);
  transform: scale(1.035);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(11,10,8,0.98) 0%,
      rgba(11,10,8,0.92) 25%,
      rgba(11,10,8,0.70) 48%,
      rgba(11,10,8,0.34) 72%,
      rgba(11,10,8,0.58) 100%),
    linear-gradient(180deg,
      rgba(11,10,8,0.60) 0%,
      rgba(11,10,8,0.20) 42%,
      rgba(11,10,8,0.76) 100%);
}
.hero-texture {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 42%, rgba(173,135,72,0.16), transparent 30rem),
    radial-gradient(circle at 18% 52%, rgba(90,58,36,0.22), transparent 24rem),
    linear-gradient(90deg, rgba(75,48,30,0.15), transparent 55%),
    repeating-linear-gradient(135deg, rgba(242,232,216,0.018) 0px, rgba(242,232,216,0.018) 1px, transparent 1px, transparent 12px);
}
.hero-content {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding-top: 68px;
}
.hero-copy {
  max-width: 790px;
  position: relative;
  padding: clamp(22px, 4vw, 46px) 0;
}
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -44px -58px -42px -58px;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 42%, rgba(90,58,36,0.24), transparent 26rem),
    linear-gradient(135deg, rgba(11,10,8,0.40), rgba(33,22,15,0.10));
  border-left: 1px solid rgba(173,135,72,0.28);
}
.eyebrow {
  margin: 0 0 16px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  font-weight: 800;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}
h1 {
  font-size: clamp(3.65rem, 5.35vw, 6.45rem);
  white-space: nowrap;
}
h2 { font-size: clamp(2.25rem, 4.1vw, 4.35rem); }
.hero-subtitle {
  margin: 24px 0 0;
  color: var(--off-white);
  font-size: clamp(1.12rem, 1.48vw, 1.45rem);
  letter-spacing: -0.028em;
  font-weight: 600;
}
.hero-line {
  max-width: 560px;
  margin: 18px 0 0;
  color: rgba(242, 232, 216, 0.72);
  font-size: clamp(0.98rem, 1.12vw, 1.08rem);
  line-height: 1.7;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 800;
  border: 0;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  background: var(--brass);
  color: var(--black);
  box-shadow: 0 12px 36px rgba(173,135,72,0.14);
}
.button-secondary {
  border: 1px solid var(--brass-soft);
  color: var(--off-white);
  background: rgba(255,255,255,0.018);
}
.button-tertiary {
  color: rgba(242, 232, 216, 0.70);
  background: transparent;
  border: 1px solid rgba(242, 232, 216, 0.12);
}

.section { padding: 112px 0; background: #0b0a08; }
.credits-strip {
  padding: 20px 0;
  border-top: 1px solid rgba(173,135,72,0.16);
  border-bottom: 1px solid rgba(173,135,72,0.16);
  background: rgba(11, 10, 8, 0.94);
}
.credits-strip p {
  margin: 0;
  color: rgba(242, 232, 216, 0.76);
  text-align: center;
  letter-spacing: 0.055em;
  font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  text-transform: uppercase;
}
.credits-strip span { color: var(--brass); margin: 0 10px; }

.section-intro { max-width: 880px; margin-bottom: 42px; }
.section-intro p:not(.eyebrow) {
  color: var(--muted);
  max-width: 680px;
  font-size: 1.03rem;
}

.featured-player-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 0.52fr) 1fr;
  border: 1px solid var(--brass-soft);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(33, 22, 15, 0.82), rgba(17, 16, 13, 0.92));
  color: var(--off-white);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.featured-player-card:hover {
  transform: translateY(-5px);
  border-color: rgba(173, 135, 72, 0.58);
  box-shadow: 0 26px 90px rgba(0,0,0,0.30);
}
.featured-media {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(11,10,8,0.02), rgba(11,10,8,0.34)),
    url("assets/Images/felix-working.JPG") center / cover no-repeat,
    linear-gradient(135deg, rgba(90, 58, 36, 0.34), rgba(11, 10, 8, 0.24));
  border-right: 1px solid var(--faint);
  overflow: hidden;
}
.play-disc {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(242,232,216,0.20);
  border-radius: 50%;
  background: rgba(11,10,8,0.62);
  color: var(--brass);
  padding-left: 5px;
}
.pulse-ring {
  position: absolute;
  z-index: 1;
  width: 108px;
  height: 108px;
  border: 1px solid rgba(173,135,72,0.24);
  border-radius: 50%;
  animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(.92);opacity:.32} 50%{transform:scale(1.06);opacity:.58} }
.featured-copy {
  padding: clamp(30px, 5vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.featured-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
}
.featured-text { display: block; max-width: 520px; margin-top: 18px; color: var(--muted); }
.inline-action {
  align-self: flex-start;
  margin-top: 24px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--brass);
  font-weight: 800;
}

.work-section {
  background: linear-gradient(180deg, rgba(33, 22, 15, 0.13), #0b0a08);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.work-card {
  position: relative;
  min-height: 360px;
  border: 1px solid var(--faint);
  border-radius: 22px;
  background: var(--walnut);
  color: var(--off-white);
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.work-card:hover {
  transform: translateY(-8px) scale(1.018);
  border-color: rgba(173, 135, 72, 0.58);
  box-shadow: 0 28px 80px rgba(0,0,0,0.34);
}
.card-image { position: absolute; inset: 0; transition: transform 650ms cubic-bezier(.2,.8,.2,1), filter 280ms ease; }
.card-glow { position: absolute; inset: 0; background: radial-gradient(circle at 55% 78%, rgba(173,135,72,0.20), transparent 52%); opacity: 0; transition: opacity 220ms ease; }
.work-card:hover .card-image { transform: scale(1.07); filter: saturate(1.12) contrast(1.05); }
.work-card:hover .card-glow { opacity: 1; }
.work-card:hover .card-content { transform: translateY(-8px); }
.card-image-one { background: linear-gradient(180deg, rgba(11,10,8,0.08), rgba(11,10,8,0.86)), radial-gradient(circle at 70% 20%, rgba(173,135,72,0.13), transparent 13rem), linear-gradient(135deg, #372315, #11100d); }
.card-image-two { background: linear-gradient(180deg, rgba(11,10,8,0.08), rgba(11,10,8,0.86)), radial-gradient(circle at 36% 18%, rgba(90,58,36,0.34), transparent 13rem), linear-gradient(135deg, #27130e, #0b0a08); }
.card-image-three { background: linear-gradient(180deg, rgba(11,10,8,0.08), rgba(11,10,8,0.86)), radial-gradient(circle at 62% 24%, rgba(52,56,41,0.42), transparent 13rem), linear-gradient(135deg, #202219, #0b0a08); }
.card-image-four { background: linear-gradient(180deg, rgba(11,10,8,0.08), rgba(11,10,8,0.86)), radial-gradient(circle at 55% 18%, rgba(173,135,72,0.16), transparent 13rem), linear-gradient(135deg, #3a2a1d, #10100d); }
.card-image-five { background: linear-gradient(180deg, rgba(11,10,8,0.08), rgba(11,10,8,0.86)), radial-gradient(circle at 50% 22%, rgba(110,35,25,0.22), transparent 13rem), linear-gradient(135deg, #1c1713, #090807); }
.card-image-six { background: linear-gradient(180deg, rgba(11,10,8,0.08), rgba(11,10,8,0.86)), radial-gradient(circle at 62% 24%, rgba(173,135,72,0.18), transparent 13rem), linear-gradient(135deg, #332516, #11100d); }
.card-content {
  position: absolute;
  inset: auto 24px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 220ms ease;
}
.card-category {
  margin: 0 0 12px;
  color: var(--brass);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
}
.card-title { font-family: var(--serif); font-size: 1.95rem; line-height: 1; letter-spacing: -0.04em; }
.card-description { margin-top: 14px; color: var(--muted); font-size: 0.95rem; }
.card-action { margin-top: 20px; padding-bottom: 5px; border-bottom: 1px solid var(--brass); font-weight: 800; }

.about-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}
.about-image-wrap {
  margin: 0;
  min-height: 520px;
  border-radius: 26px;
  border: 1px solid var(--brass-soft);
  overflow: hidden;
  background: var(--walnut);
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
}
.about-image { width: 100%; height: 100%; min-height: 520px; display: block; object-fit: cover; object-position: center; filter: saturate(0.95) contrast(1.02); }
.about-copy { margin-top: 26px; color: var(--muted); font-size: 1.06rem; }
.about-copy p { margin-top: 0; }

.contact-card {
  padding: clamp(36px, 6vw, 72px);
  border: 1px solid var(--brass-soft);
  border-radius: 28px;
  background: radial-gradient(circle at 80% 0%, rgba(173, 135, 72, 0.13), transparent 28rem), linear-gradient(145deg, rgba(33, 22, 15, 0.82), rgba(17, 16, 13, 0.95));
  box-shadow: 0 24px 80px rgba(0,0,0,0.24);
}
.contact-card h2 { max-width: 900px; }
.site-footer { padding: 30px 0; border-top: 1px solid var(--faint); color: rgba(242, 232, 216, 0.58); background:#0b0a08; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; font-size: 0.9rem; }
.footer-inner p { margin: 0; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 720ms ease, transform 720ms cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Audio modal */
.audio-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.audio-modal.is-open { display: block; }
.audio-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.80); backdrop-filter: blur(12px); }
.audio-panel {
  position: relative;
  width: min(1120px, calc(100% - 32px));
  min-height: min(700px, calc(100vh - 64px));
  margin: 32px auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border: 1px solid var(--brass-soft);
  border-radius: 26px;
  background: var(--black-soft);
  box-shadow: 0 28px 110px rgba(0,0,0,.58);
  overflow: hidden;
}
.modal-close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 42px; height: 42px; border: 1px solid rgba(242,232,216,.14); border-radius: 50%; background: rgba(11,10,8,.42); color: var(--off-white); font-size: 1.6rem; cursor: pointer; }
.audio-art { position: relative; min-height: 500px; background: linear-gradient(180deg, rgba(11,10,8,.04), rgba(11,10,8,.74)), radial-gradient(circle at 56% 22%, rgba(173,135,72,.18), transparent 16rem), linear-gradient(135deg, var(--walnut-light), var(--black)); }
.audio-art.has-image { background-size: cover; background-position: center; }
.audio-art-fallback { position: absolute; inset: 24px; display: grid; place-items: center; border: 1px solid rgba(242,232,216,.08); border-radius: 20px; }
.audio-art-fallback span { color: rgba(173,135,72,.45); font-family: var(--serif); font-size: clamp(5rem, 12vw, 11rem); letter-spacing: -0.08em; }
.audio-info { padding: clamp(34px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.audio-info p:not(.eyebrow) { color: var(--muted); max-width: 560px; }
.custom-player { margin-top: 34px; padding: 24px; border: 1px solid var(--faint); border-radius: 20px; background: rgba(255,255,255,.022); }
.player-row { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.round-play { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--brass-soft); border-radius: 50%; background: var(--brass); color: var(--black); cursor: pointer; padding-left: 3px; }
.time-row { display: flex; justify-content: space-between; color: rgba(242,232,216,.62); font-size: .82rem; margin-bottom: 8px; }
.seek { width: 100%; accent-color: var(--brass); }
.player-note { margin-top: 16px; color: rgba(242,232,216,.46); font-size: .78rem; }
.player-note code { color: rgba(242,232,216,.68); }

@media (max-width: 1120px) {
  h1 { white-space: normal; }
  .hero-image { background-position: 70% center; }
}
@media (max-width: 980px) {
  .about-grid, .audio-panel, .featured-player-card { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-media { min-height: 250px; border-right: none; border-bottom: 1px solid var(--faint); }
  .audio-panel { max-height: calc(100vh - 32px); overflow-y: auto; margin: 16px auto; }
  .audio-art { min-height: 300px; }
  .footer-inner { flex-direction: column; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 32px, var(--max-width)); }
  .section { padding: 76px 0; }
  .site-header { padding-left: 16px; padding-right: 16px; }
  .brand { font-size: .9rem; }
  .nav { gap: 14px; font-size: .82rem; }
  .hero-image { background-position: 74% center; filter: saturate(.86) contrast(1.08) brightness(.68); }
  .hero-overlay { background: linear-gradient(90deg, rgba(11,10,8,.94) 0%, rgba(11,10,8,.82) 58%, rgba(11,10,8,.42) 100%), linear-gradient(180deg, rgba(11,10,8,.52), rgba(11,10,8,.74)); }
  .hero-copy::before { inset: -24px -20px -24px -20px; }
  h1 { font-size: clamp(3rem, 14vw, 4.7rem); }
  h2 { font-size: clamp(2.15rem, 11vw, 3.45rem); }
  .hero-line { font-size: .96rem; }
  .credits-strip p { line-height: 2; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card { min-height: 300px; }
  .button-row { flex-direction: column; align-items: stretch; }
  .audio-info { padding: 28px; }
  .custom-player { padding: 18px; }
  .player-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}



/* === BRIGHTER / HIGHER FULLSCREEN HERO TUNING === */

.hero {
  align-items: center;
}

.hero-image {
  background-position: 66% 42%;
  filter: saturate(0.96) contrast(1.05) brightness(0.94);
  transform: scale(1.02);
}

.hero-overlay {
  background:
    linear-gradient(90deg,
      rgba(11,10,8,0.94) 0%,
      rgba(11,10,8,0.84) 24%,
      rgba(11,10,8,0.56) 48%,
      rgba(11,10,8,0.16) 72%,
      rgba(11,10,8,0.34) 100%),
    linear-gradient(180deg,
      rgba(11,10,8,0.34) 0%,
      rgba(11,10,8,0.08) 42%,
      rgba(11,10,8,0.54) 100%);
}

.hero-texture {
  background:
    radial-gradient(circle at 70% 42%, rgba(173,135,72,0.13), transparent 30rem),
    radial-gradient(circle at 18% 52%, rgba(90,58,36,0.16), transparent 24rem),
    linear-gradient(90deg, rgba(75,48,30,0.10), transparent 55%),
    repeating-linear-gradient(135deg, rgba(242,232,216,0.012) 0px, rgba(242,232,216,0.012) 1px, transparent 1px, transparent 12px);
}

.hero-content {
  align-items: center;
  padding-top: 48px;
  transform: translateY(-3vh);
}

.hero-copy::before {
  background:
    radial-gradient(circle at 16% 42%, rgba(90,58,36,0.18), transparent 26rem),
    linear-gradient(135deg, rgba(11,10,8,0.26), rgba(33,22,15,0.07));
}

.hero-line {
  color: rgba(242, 232, 216, 0.78);
}

@media (max-width: 1120px) {
  .hero-image {
    background-position: 68% 42%;
  }
}

@media (max-width: 640px) {
  .hero-content {
    transform: translateY(-2vh);
  }

  .hero-image {
    background-position: 72% 42%;
    filter: saturate(0.94) contrast(1.05) brightness(0.86);
  }

  .hero-overlay {
    background:
      linear-gradient(90deg,
        rgba(11,10,8,0.92) 0%,
        rgba(11,10,8,0.76) 58%,
        rgba(11,10,8,0.26) 100%),
      linear-gradient(180deg,
        rgba(11,10,8,0.32),
        rgba(11,10,8,0.58));
  }
}



/* === HEADROOM FIX === */
/* Moves the background image down within the viewport so the top of the head is not cut off. */

.hero-image {
  background-position: 66% 26%;
}

@media (max-width: 1120px) {
  .hero-image {
    background-position: 68% 26%;
  }
}

@media (max-width: 640px) {
  .hero-image {
    background-position: 72% 24%;
  }
}



/* === CLEAN PREMIUM HERO REFINEMENT === */
/* Smaller text, cleaner serif, more headroom, calmer professional feel. */

:root {
  --serif: "Instrument Serif", Georgia, serif;
}

/* Lift the apparent crop by showing more above the subject. */
.hero-image {
  background-position: 66% 12%;
  filter: saturate(0.95) contrast(1.04) brightness(0.98);
  transform: scale(1.005);
}

/* Keep text readable but reduce the heavy dark wash over the image. */
.hero-overlay {
  background:
    linear-gradient(90deg,
      rgba(11,10,8,0.95) 0%,
      rgba(11,10,8,0.86) 24%,
      rgba(11,10,8,0.58) 48%,
      rgba(11,10,8,0.18) 72%,
      rgba(11,10,8,0.34) 100%),
    linear-gradient(180deg,
      rgba(11,10,8,0.28) 0%,
      rgba(11,10,8,0.04) 42%,
      rgba(11,10,8,0.52) 100%);
}

.hero-texture {
  background:
    radial-gradient(circle at 70% 42%, rgba(173,135,72,0.11), transparent 30rem),
    radial-gradient(circle at 18% 52%, rgba(90,58,36,0.14), transparent 24rem),
    linear-gradient(90deg, rgba(75,48,30,0.08), transparent 55%),
    repeating-linear-gradient(135deg, rgba(242,232,216,0.010) 0px, rgba(242,232,216,0.010) 1px, transparent 1px, transparent 12px);
}

/* Move content a little higher but keep it centred. */
.hero-content {
  transform: translateY(-2vh);
}

/* More elegant, less shouty hero panel. */
.hero-copy {
  max-width: 720px;
}

.hero-copy::before {
  inset: -36px -48px -36px -48px;
  background:
    radial-gradient(circle at 16% 42%, rgba(90,58,36,0.17), transparent 24rem),
    linear-gradient(135deg, rgba(11,10,8,0.28), rgba(33,22,15,0.07));
  border-left: 1px solid rgba(173,135,72,0.22);
}

/* Cleaner, calmer typography. */
h1 {
  font-size: clamp(3.1rem, 4.45vw, 5.35rem);
  letter-spacing: -0.048em;
  line-height: 0.98;
  white-space: nowrap;
}

.hero-subtitle {
  margin-top: 20px;
  font-size: clamp(1.03rem, 1.28vw, 1.26rem);
  font-weight: 600;
}

.eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.19em;
  margin-bottom: 14px;
}

/* Slightly smaller, more controlled buttons. */
.button-row {
  margin-top: 30px;
}

.button {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.94rem;
}

/* Remove hero line if cached/remaining anywhere. */
.hero-line {
  display: none;
}

/* Make the header feel less heavy. */
.site-header {
  height: 64px;
  background: rgba(11, 10, 8, 0.76);
}

/* Keep credits strip premium and not too loud. */
.credits-strip {
  background: rgba(11, 10, 8, 0.92);
}

/* More headroom on narrower screens too. */
@media (max-width: 1120px) {
  .hero-image {
    background-position: 68% 12%;
  }

  h1 {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .hero-content {
    transform: translateY(-1vh);
  }

  .hero-image {
    background-position: 72% 10%;
    filter: saturate(0.94) contrast(1.04) brightness(0.88);
  }

  .hero-overlay {
    background:
      linear-gradient(90deg,
        rgba(11,10,8,0.93) 0%,
        rgba(11,10,8,0.78) 58%,
        rgba(11,10,8,0.30) 100%),
      linear-gradient(180deg,
        rgba(11,10,8,0.32),
        rgba(11,10,8,0.60));
  }

  .hero-copy::before {
    inset: -24px -20px -24px -20px;
  }

  h1 {
    font-size: clamp(2.9rem, 13vw, 4.35rem);
  }

  .hero-subtitle {
    font-size: 1rem;
  }
}


/* === BLOOD STAR POSTER CARD === */
/* Uses assets/Images/blood-star.jpg as a muted cinematic project-card background. */

.card-image-two {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.04), rgba(11,10,8,0.88)),
    linear-gradient(90deg, rgba(11,10,8,0.22), rgba(11,10,8,0.06)),
    url("assets/Images/blood-star.jpg") center / cover no-repeat,
    linear-gradient(135deg, #27130e, #0b0a08);
}

.work-card:hover .card-image-two {
  transform: scale(1.07);
  filter: saturate(1.04) contrast(1.05);
}


/* === SELECTED WORK REFINEMENT === */
/* Makes the section heading less dominant and the project cards feel more consistent. */

.work-section .section-intro {
  max-width: 760px;
  margin-bottom: 34px;
}

.work-section .section-intro h2 {
  font-size: clamp(2.25rem, 3.25vw, 3.55rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

/* Slightly calm the abstract placeholder cards so the real poster card does not feel visually isolated. */
.work-card:not(:nth-child(2)) .card-image {
  opacity: 0.88;
}

.work-card:not(:nth-child(2)) {
  background:
    radial-gradient(circle at 50% 20%, rgba(173, 135, 72, 0.08), transparent 18rem),
    linear-gradient(145deg, rgba(33, 22, 15, 0.72), rgba(11, 10, 8, 0.96));
}

/* Keep Blood Star poster legible and cinematic. */
.work-card:nth-child(2) .card-description {
  color: rgba(242, 232, 216, 0.84);
  font-weight: 600;
}

.work-card:nth-child(2) .card-action {
  color: var(--off-white);
}

/* Tighten card typography slightly for a more editorial look. */
.card-title {
  font-size: clamp(1.55rem, 2vw, 1.95rem);
}

.card-description {
  line-height: 1.45;
}

@media (max-width: 640px) {
  .work-section .section-intro h2 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }
}


/* === DARK FANTASY GAME SCORING CARD === */
.card-image-five {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.10), rgba(11,10,8,0.88)),
    radial-gradient(circle at 52% 22%, rgba(148, 58, 34, 0.28), transparent 12rem),
    radial-gradient(circle at 24% 78%, rgba(173, 135, 72, 0.10), transparent 16rem),
    linear-gradient(135deg, rgba(24, 19, 16, 0.88), rgba(9, 8, 7, 0.98)),
    repeating-linear-gradient(135deg,
      rgba(242,232,216,0.016) 0px,
      rgba(242,232,216,0.016) 1px,
      transparent 1px,
      transparent 12px);
}

.work-card:nth-child(5) .card-title {
  max-width: 10ch;
  line-height: 0.98;
}

.work-card:nth-child(5) .card-description {
  max-width: 28ch;
}


/* === DARK FANTASY CARD IMAGE === */
/* Uses the generated artwork included at assets/Images/dark-fantasy-game-scoring.jpg */

.card-image-five {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.06), rgba(11,10,8,0.88)),
    linear-gradient(90deg, rgba(11,10,8,0.28), rgba(11,10,8,0.04)),
    url("assets/Images/dark-fantasy-game-scoring.jpg") 58% center / cover no-repeat,
    linear-gradient(135deg, #1c1713, #090807);
}

.work-card:nth-child(5):hover .card-image-five,
.work-card:hover .card-image-five {
  transform: scale(1.07);
  filter: saturate(1.02) contrast(1.06);
}

/* Make the text sit cleanly over the generated artwork. */
.work-card:nth-child(5) .card-content {
  max-width: 86%;
}

.work-card:nth-child(5) .card-title {
  max-width: 12ch;
  line-height: 0.98;
}

.work-card:nth-child(5) .card-description {
  max-width: 30ch;
}


/* === AUDIO / VIDEO TABS FOR PROJECT MODAL === */

.media-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  margin-bottom: 16px;
}

.media-tab {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(242, 232, 216, 0.14);
  background: rgba(255, 255, 255, 0.018);
  color: rgba(242, 232, 216, 0.72);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.media-tab:hover {
  transform: translateY(-1px);
  color: var(--off-white);
  border-color: rgba(173, 135, 72, 0.34);
}

.media-tab.is-active {
  color: var(--black);
  background: var(--brass);
  border-color: var(--brass);
}

.video-player-shell {
  margin-top: 0;
  padding: 16px;
  border: 1px solid var(--faint);
  border-radius: 20px;
  background: rgba(255,255,255,0.022);
}

.video-player-shell video {
  width: 100%;
  display: block;
  border-radius: 14px;
  background: #050505;
  aspect-ratio: 16 / 9;
}

.audio-player-shell {
  margin-top: 0;
}

.audio-art.has-image {
  background-size: cover;
  background-position: center;
}


/* === FIXED MODAL MEDIA DISPLAY === */

.media-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  margin-bottom: 16px;
}

.media-tab {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(242, 232, 216, 0.14);
  background: rgba(255, 255, 255, 0.018);
  color: rgba(242, 232, 216, 0.72);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
}

.media-tab.is-active {
  color: var(--black);
  background: var(--brass);
  border-color: var(--brass);
}

.video-player-shell {
  margin-top: 0;
  padding: 16px;
  border: 1px solid var(--faint);
  border-radius: 20px;
  background: rgba(255,255,255,0.022);
}

.video-player-shell video {
  width: 100%;
  display: block;
  border-radius: 14px;
  background: #050505;
  aspect-ratio: 16 / 9;
}

.audio-player-shell {
  margin-top: 0;
}


/* === FINAL MEDIA TAB FIX === */

.player-note {
  display: none !important;
}

.media-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  margin-bottom: 16px;
}

.media-tab {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(242, 232, 216, 0.14);
  background: rgba(255, 255, 255, 0.018);
  color: rgba(242, 232, 216, 0.72);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.media-tab:hover {
  transform: translateY(-1px);
  color: var(--off-white);
  border-color: rgba(173, 135, 72, 0.34);
}

.media-tab.is-active {
  color: var(--black);
  background: var(--brass);
  border-color: var(--brass);
}

.video-player-shell {
  margin-top: 0;
  padding: 16px;
  border: 1px solid var(--faint);
  border-radius: 20px;
  background: rgba(255,255,255,0.022);
}

.video-player-shell video {
  width: 100%;
  display: block;
  border-radius: 14px;
  background: #050505;
  aspect-ratio: 16 / 9;
}

.audio-player-shell {
  margin-top: 0;
}

.audio-art.has-image {
  background-size: cover;
  background-position: center;
}


/* === MORE OBVIOUS MEDIA SELECTOR / VIDEO LAYOUT === */

.media-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
  margin-bottom: 18px;
}

.media-tabs::before {
  content: "Choose media";
  grid-column: 1 / -1;
  display: block;
  margin-bottom: 2px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 800;
}

.media-tab {
  min-height: 48px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(242, 232, 216, 0.14) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)) !important;
  color: rgba(242, 232, 216, 0.82) !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  text-align: left;
  cursor: pointer;
}

.media-tab::after {
  content: "Open";
  display: block;
  margin-top: 2px;
  color: rgba(242, 232, 216, 0.42);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.media-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(173, 135, 72, 0.42) !important;
  color: var(--off-white) !important;
}

.media-tab.is-active {
  color: var(--black) !important;
  background: var(--brass) !important;
  border-color: var(--brass) !important;
}

.media-tab.is-active::after {
  color: rgba(11, 10, 8, 0.62);
  content: "Selected";
}

.video-player-shell {
  margin-top: 0;
  padding: 14px !important;
  border: 1px solid rgba(173, 135, 72, 0.24) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(173,135,72,0.08), transparent 18rem),
    rgba(255,255,255,0.024) !important;
}

.video-player-shell video {
  width: 100%;
  display: block;
  border-radius: 15px;
  background: #050505;
  aspect-ratio: 16 / 9;
  min-height: 240px;
}

.custom-player.audio-player-shell {
  border-color: rgba(173, 135, 72, 0.24);
}

.video-error {
  display: none;
  margin-top: 12px;
  color: rgba(242, 232, 216, 0.66);
  font-size: 0.86rem;
  line-height: 1.5;
}

.video-error.is-visible {
  display: block;
}

@media (max-width: 640px) {
  .media-tabs {
    grid-template-columns: 1fr;
  }

  .video-player-shell video {
    min-height: 190px;
  }
}


/* === CINEMATIC VIDEO MODAL REFINEMENT === */

.audio-panel {
  width: min(1360px, calc(100% - 32px));
  min-height: min(820px, calc(100vh - 40px));
  margin: 20px auto;
  grid-template-columns: 0.72fr 1.28fr;
}

.audio-info {
  padding: clamp(34px, 5vw, 70px);
}

.audio-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 55% 25%, rgba(173,135,72,0.12), transparent 18rem),
    linear-gradient(180deg, rgba(11,10,8,0.02), rgba(11,10,8,0.50));
}

.audio-art.has-image {
  animation: slowCinematicDrift 18s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes slowCinematicDrift {
  0% { background-position: 48% 50%; }
  100% { background-position: 54% 48%; }
}

.media-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  margin-bottom: 16px;
}

.media-tabs::before {
  content: "Choose media";
  grid-column: 1 / -1;
  display: block;
  margin-bottom: 2px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 800;
}

.media-tab {
  min-height: 50px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.media-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(173,135,72,0.10), transparent 12rem);
  opacity: 0;
  transition: opacity 160ms ease;
}

.media-tab:hover::before,
.media-tab.is-active::before {
  opacity: 1;
}

.video-player-shell {
  padding: 18px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(173,135,72,0.10), transparent 20rem),
    rgba(255,255,255,0.024) !important;
}

.video-player-shell video {
  width: 100%;
  display: block;
  border-radius: 16px;
  background: #050505;
  aspect-ratio: 16 / 9;
  min-height: 390px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.34);
}

.video-error {
  display: none;
  margin-top: 12px;
  color: rgba(242, 232, 216, 0.68);
  font-size: 0.86rem;
  line-height: 1.5;
}

.video-error.is-visible {
  display: block;
}

@media (max-width: 1100px) {
  .audio-panel {
    grid-template-columns: 1fr;
  }

  .audio-art {
    min-height: 360px;
  }

  .media-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-player-shell video {
    min-height: 280px;
  }
}

@media (max-width: 640px) {
  .media-tabs {
    grid-template-columns: 1fr;
  }

  .video-player-shell video {
    min-height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-art.has-image {
    animation: none !important;
  }
}


/* === WARHAMMER VIDEO MODAL POLISH === */
/* No assets included. Uses existing paths and makes the modal/video section feel more cinematic. */

.work-card:nth-child(5) .card-title {
  max-width: 11ch;
}

.work-card:nth-child(5) .card-description {
  max-width: 30ch;
}

.card-image-five {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.00), rgba(11,10,8,0.74)),
    linear-gradient(90deg, rgba(11,10,8,0.12), rgba(11,10,8,0.02)),
    url("assets/Images/dark-fantasy-game-scoring.jpg") 58% center / cover no-repeat,
    linear-gradient(135deg, #1c1713, #090807) !important;
  filter: saturate(1.08) contrast(1.08) brightness(1.16);
}

.work-card:hover .card-image-five {
  filter: saturate(1.12) contrast(1.10) brightness(1.20);
}

.audio-panel {
  width: min(1460px, calc(100% - 32px));
  min-height: min(850px, calc(100vh - 32px));
  margin: 16px auto;
  grid-template-columns: 0.64fr 1.36fr;
  background:
    radial-gradient(circle at 76% 18%, rgba(173,135,72,0.08), transparent 24rem),
    linear-gradient(135deg, rgba(16,14,11,0.98), rgba(9,8,7,0.98));
}

.audio-art.has-image {
  filter: saturate(1.05) contrast(1.06) brightness(1.20);
  background-position: center !important;
}

.audio-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,10,8,0.02), rgba(11,10,8,0.30)),
    radial-gradient(circle at 54% 18%, rgba(173,135,72,0.12), transparent 20rem);
}

.audio-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg,
      rgba(242,232,216,0.014) 0px,
      rgba(242,232,216,0.014) 1px,
      transparent 1px,
      transparent 14px);
  mix-blend-mode: screen;
}

.audio-info h2 {
  font-size: clamp(3.2rem, 4.7vw, 5.8rem);
  max-width: 720px;
}

.media-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
  margin-bottom: 18px;
}

.media-tabs::before {
  content: "Choose media";
  grid-column: 1 / -1;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 800;
}

.media-tab {
  min-height: 60px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(242, 232, 216, 0.14) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(173,135,72,0.10), transparent 10rem),
    linear-gradient(135deg, rgba(255,255,255,0.042), rgba(255,255,255,0.012)) !important;
  color: rgba(242, 232, 216, 0.84) !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  text-align: left;
  cursor: pointer;
  line-height: 1.12;
  position: relative;
  overflow: hidden;
}

.media-tab::after {
  content: "Open";
  display: block;
  margin-top: 6px;
  color: rgba(242, 232, 216, 0.42);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.media-tab:hover {
  transform: translateY(-2px);
  border-color: rgba(173, 135, 72, 0.52) !important;
  color: var(--off-white) !important;
}

.media-tab.is-active {
  color: var(--black) !important;
  background: linear-gradient(135deg, #c49b58, #a77d3e) !important;
  border-color: rgba(218, 178, 104, 0.92) !important;
  box-shadow: 0 12px 34px rgba(173,135,72,0.16);
}

.media-tab.is-active::after {
  color: rgba(11, 10, 8, 0.62);
  content: "Selected";
}

.video-player-shell {
  padding: 18px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(173, 135, 72, 0.30) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(173,135,72,0.12), transparent 20rem),
    rgba(255,255,255,0.026) !important;
  box-shadow: 0 22px 90px rgba(0,0,0,0.28);
}

.video-player-shell video {
  width: 100%;
  display: block;
  border-radius: 18px;
  background: #050505;
  aspect-ratio: 16 / 9;
  min-height: 430px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.42);
}

.custom-player.audio-player-shell {
  border-color: rgba(173, 135, 72, 0.30);
}

.audio-modal.is-open .audio-panel::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  pointer-events: none;
  border-radius: 28px;
  background:
    radial-gradient(circle at 72% 20%, rgba(173,135,72,0.16), transparent 28rem),
    radial-gradient(circle at 30% 82%, rgba(115,58,31,0.12), transparent 24rem);
  animation: modalGlowShift 9s ease-in-out infinite alternate;
}

@keyframes modalGlowShift {
  0% { opacity: 0.45; transform: translate3d(-6px, 0, 0); }
  100% { opacity: 0.82; transform: translate3d(6px, -4px, 0); }
}

@media (max-width: 1180px) {
  .audio-panel {
    grid-template-columns: 1fr;
  }

  .audio-art {
    min-height: 380px;
  }

  .media-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-player-shell video {
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  .media-tabs {
    grid-template-columns: 1fr;
  }

  .audio-info h2 {
    font-size: clamp(2.65rem, 13vw, 4.1rem);
  }

  .video-player-shell video {
    min-height: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-modal.is-open .audio-panel::before {
    animation: none !important;
  }
}


/* === CREDITS / WORK REFINEMENT === */

/* Make the credits strip feel like part of the first impression rather than a minor divider. */
.credits-strip {
  position: relative;
  z-index: 6;
  margin-top: -74px;
  padding: 22px 0;
  background:
    linear-gradient(90deg, rgba(11,10,8,0.92), rgba(26,18,12,0.92), rgba(11,10,8,0.92));
  border-top: 1px solid rgba(173,135,72,0.34);
  border-bottom: 1px solid rgba(173,135,72,0.30);
  box-shadow: 0 -18px 70px rgba(0,0,0,0.26), 0 18px 70px rgba(0,0,0,0.22);
}

.credits-strip p {
  font-size: clamp(0.86rem, 1.18vw, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.115em;
  color: rgba(242,232,216,0.90);
}

.credits-strip span {
  color: rgba(173,135,72,0.95);
  margin: 0 14px;
}

/* Give the following section enough breathing room after pulling the credits up. */
.credits-strip + .section {
  padding-top: 126px;
}

/* Cleaner fifth-card wording after replacing the old game-test positioning. */
.work-card:nth-child(5) .card-title {
  max-width: 12ch;
}

/* Slightly reduce the grid gap impact now that Story Tails is removed. */
.work-grid {
  align-items: stretch;
}

/* Better tab label spacing for longer names like Genestealer Cult Reveal. */
.media-tab {
  white-space: normal;
}

/* If the audio tab is long, keep it elegant. */
.media-tab:first-child {
  letter-spacing: -0.01em;
}

@media (max-width: 780px) {
  .credits-strip {
    margin-top: -38px;
  }

  .credits-strip p {
    line-height: 1.9;
  }

  .credits-strip + .section {
    padding-top: 96px;
  }
}


/* === BLOOD STAR MODAL + MULTI-AUDIO REFINEMENT === */

.work-card:nth-child(2) .card-action {
  color: var(--off-white);
}

.audio-art.has-image {
  background-size: cover;
  background-position: center;
}

/* Keep full poster readable in the modal; works especially well for portrait artwork. */
.audio-modal.is-open .audio-art.has-image {
  background-size: cover;
  background-position: center;
}

/* Audio-only project tabs can be a touch calmer than video tabs. */
.media-tab {
  white-space: normal;
}

/* Blood Star poster/card remains stylish and muted. */
.card-image-two {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.02), rgba(11,10,8,0.84)),
    linear-gradient(90deg, rgba(11,10,8,0.18), rgba(11,10,8,0.04)),
    url("assets/Images/blood-star.jpg") center / cover no-repeat,
    linear-gradient(135deg, #27130e, #0b0a08) !important;
}


/* === BLOOD STAR FULL POSTER + MANY CUE BUTTONS FIX === */

.audio-modal.is-open .audio-art.has-image {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #090807;
}

.media-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.media-tab {
  min-height: 48px !important;
  font-size: 0.82rem !important;
}

.media-tab::after {
  display: none !important;
}

@media (max-width: 1180px) {
  .media-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .media-tabs {
    grid-template-columns: 1fr !important;
  }
}


/* === BLOOD STAR 12-CUE GRID REFINEMENT === */

.media-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (min-width: 1181px) {
  .media-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 780px) {
  .media-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .media-tabs {
    grid-template-columns: 1fr !important;
  }
}


/* === AUDIO FOLDER STRUCTURE + DARK ATMOSPHERIC TEXTURES CARD === */

.card-image-dark-atmospheres {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.05), rgba(11,10,8,0.86)),
    radial-gradient(circle at 30% 26%, rgba(173,135,72,0.12), transparent 16rem),
    radial-gradient(circle at 72% 70%, rgba(57,72,60,0.14), transparent 18rem),
    url("assets/Images/dark-atmospheric-textures.jpg") center / cover no-repeat,
    linear-gradient(135deg, #19140f, #080807);
}

.work-card:hover .card-image-dark-atmospheres {
  transform: scale(1.07);
  filter: saturate(1.04) contrast(1.06) brightness(1.08);
}

/* If no dark atmospheric image has been added yet, the gradient still looks intentional. */
.card-image-dark-atmospheres:not([style]) {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.08), rgba(11,10,8,0.88)),
    radial-gradient(circle at 34% 26%, rgba(173,135,72,0.18), transparent 14rem),
    radial-gradient(circle at 76% 72%, rgba(57,72,60,0.18), transparent 18rem),
    repeating-linear-gradient(135deg, rgba(242,232,216,0.012) 0px, rgba(242,232,216,0.012) 1px, transparent 1px, transparent 12px),
    linear-gradient(135deg, #19140f, #080807);
}

/* More flexible grid now that the portfolio includes a library/atmosphere card. */
.work-grid {
  grid-auto-rows: minmax(300px, auto);
}


/* === DARK ATMOSPHERIC TEXTURES COPY WIDTH === */

.work-card .card-title {
  overflow-wrap: normal;
}

.card-image-dark-atmospheres {
  filter: saturate(0.95) contrast(1.08) brightness(1.02);
}

.work-card:hover .card-image-dark-atmospheres {
  filter: saturate(1.02) contrast(1.10) brightness(1.08);
}


/* === DARK ATMOSPHERIC TEXTURES 8-TRACK GRID === */

@media (min-width: 1181px) {
  .audio-modal.is-open .media-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.audio-modal.is-open .media-tab {
  min-height: 48px !important;
}


/* === REMOVE FLH MODAL MARK + DARK ATMOSPHERIC CARD IMAGE FIX === */

/* Hide/remove the large FLH monogram overlay in clicked-through project artwork. */
.audio-art .audio-art-mark,
.audio-art .art-mark,
.audio-art .flh-mark,
.audio-art [class*="mark"] {
  display: none !important;
}

.audio-art::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,10,8,0.02), rgba(11,10,8,0.24)),
    radial-gradient(circle at 55% 18%, rgba(173,135,72,0.10), transparent 20rem);
}

.audio-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg,
      rgba(242,232,216,0.010) 0px,
      rgba(242,232,216,0.010) 1px,
      transparent 1px,
      transparent 14px);
  mix-blend-mode: screen;
}

/* Make the Dark Atmospheric Textures card use the photo file, not just the abstract gradient. */
.card-image-dark-atmospheres {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.03), rgba(11,10,8,0.84)),
    linear-gradient(90deg, rgba(11,10,8,0.18), rgba(11,10,8,0.02)),
    url("assets/Images/dark-atmospheric-textures.jpg") center / cover no-repeat,
    linear-gradient(135deg, #19140f, #080807) !important;
  filter: saturate(1.04) contrast(1.05) brightness(1.02);
}

.work-card:hover .card-image-dark-atmospheres {
  transform: scale(1.07);
  filter: saturate(1.08) contrast(1.08) brightness(1.08);
}

/* If this card is now third after Blood Star, make sure any earlier nth-child rules do not override it. */
.work-card .card-image-dark-atmospheres {
  opacity: 1 !important;
}


/* === TRAINWRECK TRACKS + IMAGE WIRING === */

.card-image-one {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.06), rgba(11,10,8,0.86)),
    linear-gradient(90deg, rgba(11,10,8,0.22), rgba(11,10,8,0.03)),
    url("assets/Images/trainwreck-balloon-boy-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #17110d, #080807) !important;
}

.work-card:hover .card-image-one {
  transform: scale(1.07);
  filter: saturate(1.06) contrast(1.08) brightness(1.06);
}


/* === LAND ROVER VIDEO CARD === */

.card-image-four,
.card-image-landrover {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.04), rgba(11,10,8,0.86)),
    radial-gradient(circle at 60% 20%, rgba(173,135,72,0.16), transparent 18rem),
    url("assets/Images/landrover-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #1a1510, #080807) !important;
}

.work-card:hover .card-image-four,
.work-card:hover .card-image-landrover {
  transform: scale(1.07);
  filter: saturate(1.08) contrast(1.08) brightness(1.07);
}


/* === LAND ROVER CARD / POSTER NAMING === */

.card-image-four,
.card-image-landrover {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.04), rgba(11,10,8,0.86)),
    radial-gradient(circle at 60% 20%, rgba(173,135,72,0.16), transparent 18rem),
    url("assets/Images/landrover-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #1a1510, #080807) !important;
}

.audio-modal.is-open .audio-art.has-image {
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Portrait posters read better contained in the project modal. */
.audio-modal.is-open .audio-art.has-image {
  background-size: contain !important;
  background-color: #090807;
}


/* === MAIN REEL REMOVED, HERO / CREDITS PRESERVED === */

.listening-section {
  display: none !important;
}

.credits-strip + .section {
  padding-top: clamp(78px, 9vw, 132px);
}


/* === ORCHESTRAL & NOTATED WORK SECTION === */

.score-section {
  position: relative;
  padding-top: clamp(84px, 10vw, 150px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

.score-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(196,151,78,0.10), transparent 22rem),
    radial-gradient(circle at 82% 74%, rgba(111,79,45,0.10), transparent 24rem);
  opacity: 0.8;
}

.score-grid {
  position: relative;
  z-index: 1;
  width: min(100% - 64px, 1500px);
  margin: clamp(32px, 4vw, 54px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.score-card {
  min-height: clamp(290px, 27vw, 420px);
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(196,151,78,0.28);
  background:
    linear-gradient(180deg, rgba(15,13,10,0.40), rgba(9,8,7,0.96)),
    linear-gradient(90deg, rgba(196,151,78,0.10), transparent 62%),
    repeating-linear-gradient(0deg,
      rgba(242,232,216,0.10) 0px,
      rgba(242,232,216,0.10) 1px,
      transparent 1px,
      transparent 24px),
    repeating-linear-gradient(90deg,
      rgba(242,232,216,0.045) 0px,
      rgba(242,232,216,0.045) 1px,
      transparent 1px,
      transparent 72px),
    #0d0b09;
  box-shadow: 0 26px 80px rgba(0,0,0,0.34);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(26px, 3vw, 42px);
  text-decoration: none;
  color: var(--cream);
  isolation: isolate;
}

.score-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.26;
  background:
    radial-gradient(circle at 24% 28%, rgba(242,232,216,0.20), transparent 1.5px),
    radial-gradient(circle at 38% 28%, rgba(242,232,216,0.18), transparent 1.5px),
    radial-gradient(circle at 52% 28%, rgba(242,232,216,0.16), transparent 1.5px),
    radial-gradient(circle at 66% 28%, rgba(242,232,216,0.15), transparent 1.5px),
    linear-gradient(135deg, transparent 0%, rgba(196,151,78,0.10) 48%, transparent 72%);
  transform: scale(1.1);
}

.score-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9,8,7,0.04), rgba(9,8,7,0.86) 76%),
    repeating-linear-gradient(135deg,
      rgba(242,232,216,0.018) 0px,
      rgba(242,232,216,0.018) 1px,
      transparent 1px,
      transparent 14px);
}

.score-card-sheen {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 28% 22%, rgba(196,151,78,0.20), transparent 28rem);
  opacity: 0.55;
  transform: translate3d(-3%, -3%, 0);
  transition: transform 700ms ease, opacity 700ms ease;
}

.score-card:hover .score-card-sheen {
  opacity: 0.85;
  transform: translate3d(3%, 2%, 0);
}

.score-type {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 14px;
  font-size: 0.78rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 800;
}

.score-title {
  position: relative;
  z-index: 2;
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 4.2rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  max-width: 10ch;
}

.score-description {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 18px;
  max-width: 32rem;
  color: rgba(242,232,216,0.78);
  font-size: clamp(1rem, 1.1vw, 1.18rem);
  line-height: 1.45;
}

.score-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: fit-content;
  margin-top: 28px;
  color: var(--cream);
  font-weight: 800;
  font-size: 1.02rem;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(196,151,78,0.9);
}

.score-card:hover {
  transform: translateY(-5px);
  border-color: rgba(196,151,78,0.48);
}

.score-card-depths {
  background:
    linear-gradient(180deg, rgba(9,8,7,0.10), rgba(9,8,7,0.94)),
    radial-gradient(circle at 22% 22%, rgba(182,198,206,0.16), transparent 20rem),
    repeating-linear-gradient(0deg, rgba(242,232,216,0.11) 0px, rgba(242,232,216,0.11) 1px, transparent 1px, transparent 23px),
    #0c0d0d;
}

.score-card-solar {
  background:
    linear-gradient(180deg, rgba(9,8,7,0.16), rgba(9,8,7,0.94)),
    radial-gradient(circle at 70% 18%, rgba(110,153,180,0.18), transparent 19rem),
    radial-gradient(circle at 24% 76%, rgba(196,151,78,0.16), transparent 18rem),
    repeating-linear-gradient(0deg, rgba(242,232,216,0.09) 0px, rgba(242,232,216,0.09) 1px, transparent 1px, transparent 23px),
    #080b0d;
}

.score-card-mustard {
  background:
    linear-gradient(180deg, rgba(9,8,7,0.12), rgba(9,8,7,0.94)),
    radial-gradient(circle at 20% 18%, rgba(217,168,65,0.18), transparent 22rem),
    radial-gradient(circle at 82% 72%, rgba(111,51,24,0.14), transparent 20rem),
    repeating-linear-gradient(0deg, rgba(242,232,216,0.10) 0px, rgba(242,232,216,0.10) 1px, transparent 1px, transparent 23px),
    #100c08;
}

@media (max-width: 980px) {
  .score-grid {
    grid-template-columns: 1fr;
    width: min(100% - 36px, 680px);
  }

  .score-card {
    min-height: 300px;
  }
}


/* === COMPACT SCORE SECTION + IN-PAGE SCORE PREVIEW === */

.score-section-compact {
  padding-top: clamp(56px, 7vw, 96px) !important;
  padding-bottom: clamp(54px, 7vw, 100px) !important;
}

.score-intro {
  width: min(100% - 64px, 1500px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(260px, 0.62fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: end;
}

.score-intro h2 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 5.8rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
  margin: 0;
}

.score-intro > p {
  max-width: 560px;
  color: rgba(242,232,216,0.72);
  line-height: 1.5;
  margin: 0 0 0.45rem;
}

.score-grid-compact {
  width: min(100% - 64px, 1500px) !important;
  margin-top: clamp(22px, 3vw, 38px) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.6vw, 20px) !important;
}

.score-grid-compact .score-card {
  min-height: 0 !important;
  height: auto !important;
  border-radius: 20px !important;
  padding: clamp(20px, 2.2vw, 30px) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.22) !important;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.score-grid-compact .score-card::before {
  opacity: 0.12 !important;
}

.score-grid-compact .score-card::after {
  background:
    linear-gradient(180deg, rgba(9,8,7,0.08), rgba(9,8,7,0.74) 90%),
    repeating-linear-gradient(135deg,
      rgba(242,232,216,0.012) 0px,
      rgba(242,232,216,0.012) 1px,
      transparent 1px,
      transparent 15px) !important;
}

.score-grid-compact .score-type {
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 12px !important;
}

.score-grid-compact .score-title {
  font-size: clamp(1.65rem, 2.1vw, 2.55rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  max-width: none !important;
}

.score-grid-compact .score-description {
  margin-top: 12px !important;
  font-size: 0.96rem !important;
  line-height: 1.4 !important;
  color: rgba(242,232,216,0.68) !important;
}

.score-grid-compact .score-action {
  margin-top: 18px !important;
  font-size: 0.92rem !important;
  padding-bottom: 6px !important;
}

/* Score preview modal */
.score-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.score-modal.is-open {
  display: block;
}

.score-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
}

.score-modal-panel {
  position: absolute;
  inset: clamp(18px, 3vw, 42px);
  border-radius: 28px;
  border: 1px solid rgba(196,151,78,0.34);
  background: #090807;
  box-shadow: 0 34px 120px rgba(0,0,0,0.62);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.score-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(242,232,216,0.22);
  background: rgba(9,8,7,0.64);
  color: var(--cream);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.score-modal-header {
  padding: clamp(22px, 3vw, 34px) clamp(26px, 4vw, 46px);
  border-bottom: 1px solid rgba(242,232,216,0.10);
  background:
    radial-gradient(circle at 16% 0%, rgba(196,151,78,0.10), transparent 26rem),
    linear-gradient(180deg, rgba(18,15,12,0.95), rgba(9,8,7,0.95));
}

.score-modal-header h3 {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3vw, 4rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.score-modal-header a {
  display: inline-flex;
  margin-top: 14px;
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(196,151,78,0.75);
  padding-bottom: 5px;
}

.score-frame-wrap {
  background: #111;
  min-height: 0;
}

.score-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #151515;
}

body.score-modal-open {
  overflow: hidden;
}

@media (max-width: 980px) {
  .score-intro {
    width: min(100% - 36px, 680px);
    grid-template-columns: 1fr;
  }

  .score-grid-compact {
    width: min(100% - 36px, 680px) !important;
    grid-template-columns: 1fr !important;
  }

  .score-modal-panel {
    inset: 12px;
    border-radius: 20px;
  }
}


/* === SCORE PORTAL, QUIET ENTRY + WORKING IN-PAGE PDF VIEWER === */

.score-section,
.score-section-compact,
.score-grid,
.score-grid-compact,
.score-intro {
  display: none !important;
}

.score-portal-section {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(52px, 7vw, 94px);
}

.score-portal-card {
  width: min(100% - 64px, 1500px);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(196,151,78,0.24);
  background:
    radial-gradient(circle at 84% 50%, rgba(196,151,78,0.16), transparent 22rem),
    radial-gradient(circle at 14% 18%, rgba(242,232,216,0.06), transparent 24rem),
    linear-gradient(135deg, rgba(19,16,12,0.88), rgba(9,8,7,0.96));
  padding: clamp(26px, 3.6vw, 54px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 80px);
  align-items: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.24);
}

.score-portal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background:
    repeating-linear-gradient(0deg, rgba(242,232,216,0.035) 0px, rgba(242,232,216,0.035) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(242,232,216,0.022) 0px, rgba(242,232,216,0.022) 1px, transparent 1px, transparent 56px);
}

.score-portal-copy {
  position: relative;
  z-index: 2;
}

.score-portal-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.25rem, 4vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.score-portal-copy p:not(.eyebrow) {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgba(242,232,216,0.72);
  line-height: 1.5;
}

.score-portal-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-width: min(100%, 360px);
  border: 1px solid rgba(196,151,78,0.38);
  border-radius: 999px;
  padding: 14px 24px 14px 14px;
  color: var(--cream);
  background: rgba(9,8,7,0.54);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 18px 44px rgba(0,0,0,0.28);
}

.score-portal-orb {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, rgba(242,232,216,0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(196,151,78,0.24), transparent 18px),
    conic-gradient(from 0deg, rgba(196,151,78,0.0), rgba(196,151,78,0.9), rgba(196,151,78,0.0));
  animation: scoreOrb 5.5s linear infinite;
  box-shadow: 0 0 36px rgba(196,151,78,0.22);
}

@keyframes scoreOrb {
  to { transform: rotate(360deg); }
}

.score-portal-button-copy span,
.score-portal-button-copy small {
  display: block;
}

.score-portal-button-copy span {
  font-weight: 850;
  font-size: 1.05rem;
}

.score-portal-button-copy small {
  margin-top: 4px;
  color: rgba(242,232,216,0.60);
  font-size: 0.86rem;
}

.score-portal-button:hover {
  border-color: rgba(196,151,78,0.62);
  transform: translateY(-2px);
}

.score-portal-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.score-portal-modal.is-open {
  display: block;
}

.score-portal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(196,151,78,0.10), transparent 18rem),
    rgba(0,0,0,0.78);
  backdrop-filter: blur(14px);
}

.score-portal-stage {
  position: absolute;
  inset: clamp(14px, 3vw, 42px);
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  border-radius: 30px;
  border: 1px solid rgba(196,151,78,0.34);
  overflow: hidden;
  background: #090807;
  box-shadow: 0 36px 130px rgba(0,0,0,0.68);
  transform: scale(0.985);
  opacity: 0;
  animation: scoreStageIn 360ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes scoreStageIn {
  to { transform: scale(1); opacity: 1; }
}

.score-portal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(242,232,216,0.24);
  background: rgba(9,8,7,0.72);
  color: var(--cream);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.score-portal-list {
  min-height: 0;
  padding: clamp(24px, 3vw, 38px);
  border-right: 1px solid rgba(242,232,216,0.10);
  background:
    radial-gradient(circle at 0% 0%, rgba(196,151,78,0.12), transparent 20rem),
    linear-gradient(180deg, rgba(18,15,12,0.94), rgba(9,8,7,0.98));
  overflow: auto;
}

.score-portal-list h3 {
  margin: 0 0 26px;
  font-family: var(--display);
  font-size: clamp(2.1rem, 3vw, 3.8rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.score-choice {
  width: 100%;
  display: block;
  margin: 0 0 12px;
  padding: 18px 18px 17px;
  border-radius: 18px;
  border: 1px solid rgba(242,232,216,0.12);
  background: rgba(255,255,255,0.025);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
}

.score-choice.is-active,
.score-choice:hover {
  border-color: rgba(196,151,78,0.55);
  background: rgba(196,151,78,0.10);
}

.score-choice span,
.score-choice strong,
.score-choice small {
  display: block;
}

.score-choice span {
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 850;
}

.score-choice strong {
  margin-top: 8px;
  font-size: 1.15rem;
}

.score-choice small {
  margin-top: 8px;
  color: rgba(242,232,216,0.62);
  line-height: 1.35;
}

.score-portal-view {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.score-portal-view-head {
  padding: clamp(22px, 3vw, 34px) clamp(28px, 4vw, 48px);
  border-bottom: 1px solid rgba(242,232,216,0.10);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
}

.score-portal-view-head h3 {
  margin: 0.18rem 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.score-portal-view-head a {
  flex: 0 0 auto;
  color: var(--gold);
  font-weight: 850;
  text-decoration: none;
  border-bottom: 1px solid rgba(196,151,78,0.75);
  padding-bottom: 6px;
}

.score-pdf-shell {
  min-height: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(242,232,216,0.06), transparent 28rem),
    #141414;
}

.score-pdf-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #1a1a1a;
}

body.score-portal-open {
  overflow: hidden;
}

@media (max-width: 980px) {
  .score-portal-card {
    width: min(100% - 36px, 680px);
    grid-template-columns: 1fr;
  }

  .score-portal-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    inset: 10px;
  }

  .score-portal-list {
    max-height: 42vh;
    border-right: 0;
    border-bottom: 1px solid rgba(242,232,216,0.10);
  }

  .score-portal-view-head {
    align-items: start;
    flex-direction: column;
  }
}


/* === SCORE PORTAL CLICK FIX === */

.score-portal-button {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
}

.score-portal-card {
  pointer-events: auto !important;
}

.score-portal-card::after {
  pointer-events: none !important;
}

.score-portal-modal.is-open {
  display: block !important;
}


/* === NEATER SCORE PORTAL PDF VIEW === */

/* Use the site's clean body font for the score portal titles instead of the large display font. */
.score-portal-list h3,
.score-portal-view-head h3 {
  font-family: var(--body) !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
}

.score-portal-list h3 {
  font-size: clamp(1.75rem, 2.2vw, 2.6rem) !important;
  max-width: 8ch;
}

.score-portal-view-head h3 {
  font-size: clamp(1.8rem, 2.4vw, 3.1rem) !important;
}

/* Make the PDF feel like a framed score preview rather than a browser taking over the page. */
.score-pdf-shell {
  display: grid !important;
  place-items: center !important;
  padding: clamp(18px, 2.4vw, 34px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(242,232,216,0.08), transparent 30rem),
    linear-gradient(180deg, #11100f, #090807) !important;
  overflow: hidden !important;
}

.score-pdf-shell iframe {
  width: min(100%, 980px) !important;
  height: min(100%, 72vh) !important;
  max-height: 760px !important;
  border: 1px solid rgba(242,232,216,0.14) !important;
  border-radius: 16px !important;
  background: #f4f1eb !important;
  box-shadow: 0 26px 80px rgba(0,0,0,0.48) !important;
}

/* Slightly reduce the header weight so the PDF preview has more breathing room. */
.score-portal-view-head {
  padding-top: clamp(18px, 2.2vw, 28px) !important;
  padding-bottom: clamp(16px, 2vw, 24px) !important;
}

.score-portal-view-head a {
  font-size: 0.94rem !important;
}

@media (max-width: 980px) {
  .score-pdf-shell {
    padding: 12px !important;
  }

  .score-pdf-shell iframe {
    width: 100% !important;
    height: 62vh !important;
  }
}


/* === SMALLER, MORE STYLISED SCORE PORTAL === */

.score-portal-card {
  transform-style: preserve-3d;
}

.score-portal-card:hover {
  border-color: rgba(196,151,78,0.46);
}

.score-portal-card:hover .score-portal-orb {
  box-shadow:
    0 0 42px rgba(196,151,78,0.30),
    0 0 90px rgba(196,151,78,0.12);
}

.score-portal-stage {
  --score-x: 50%;
  --score-y: 50%;
  border-color: rgba(196,151,78,0.42) !important;
}

.score-portal-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--score-x) var(--score-y), rgba(196,151,78,0.16), transparent 19rem),
    radial-gradient(circle at calc(var(--score-x) + 10%) calc(var(--score-y) + 12%), rgba(242,232,216,0.045), transparent 14rem),
    linear-gradient(135deg, rgba(88,59,29,0.10), transparent 45%, rgba(196,151,78,0.06));
  opacity: 0.85;
  transition: opacity 300ms ease;
}

.score-portal-list,
.score-portal-view {
  position: relative;
  z-index: 1;
}

.score-portal-list {
  background:
    radial-gradient(circle at 30% 0%, rgba(196,151,78,0.14), transparent 18rem),
    linear-gradient(180deg, rgba(20,16,12,0.96), rgba(6,6,5,0.99)) !important;
}

.score-choice {
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.score-choice:hover {
  transform: translateX(4px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.22);
}

.score-choice.is-active {
  box-shadow:
    inset 0 0 0 1px rgba(196,151,78,0.22),
    0 16px 48px rgba(0,0,0,0.24);
}

.score-portal-view-head {
  background:
    radial-gradient(circle at var(--score-x) 0%, rgba(196,151,78,0.12), transparent 20rem),
    linear-gradient(180deg, rgba(13,12,10,0.98), rgba(8,7,6,0.98));
}

/* Smaller PDF frame, with more space around it so it feels like an object in the room. */
.score-pdf-shell {
  padding: clamp(26px, 4vw, 64px) !important;
  align-items: start !important;
  background:
    radial-gradient(circle at var(--score-x) var(--score-y), rgba(196,151,78,0.12), transparent 24rem),
    radial-gradient(circle at 50% 42%, rgba(242,232,216,0.055), transparent 32rem),
    linear-gradient(180deg, #11100f, #070706) !important;
}

.score-pdf-shell iframe {
  width: min(100%, 760px) !important;
  height: min(100%, 60vh) !important;
  max-height: 640px !important;
  border-radius: 18px !important;
  transform: translateY(4px);
  box-shadow:
    0 36px 110px rgba(0,0,0,0.58),
    0 0 0 1px rgba(242,232,216,0.10) !important;
}

.score-portal-view::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: auto clamp(28px, 4vw, 58px) clamp(20px, 3vw, 42px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,151,78,0.35), transparent);
  opacity: 0.75;
}

.score-portal-view-head h3 {
  font-size: clamp(1.65rem, 2.1vw, 2.55rem) !important;
}

.score-portal-list h3 {
  font-size: clamp(1.55rem, 1.9vw, 2.25rem) !important;
}

@media (max-width: 980px) {
  .score-pdf-shell {
    padding: 14px !important;
  }

  .score-pdf-shell iframe {
    width: 100% !important;
    height: 58vh !important;
  }
}


/* === FULL PAGE SCORE PREVIEW, SMALLER OBJECT SCALE === */

/*
  Keep the full PDF page visible. The earlier crop looked like a mistake.
  This makes the PDF viewer itself a smaller object on the page.
*/

.score-pdf-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(34px, 5vw, 82px) !important;
  overflow: hidden !important;
}

.score-pdf-shell iframe {
  width: min(100%, 620px) !important;
  height: min(100%, 70vh) !important;
  max-height: 720px !important;
  border-radius: 18px !important;
  background: #f4f1eb !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Landscape pages still need room, but should not dominate. */
.score-portal-modal[data-active-score="mustard"] .score-pdf-shell iframe,
.score-pdf-shell iframe[data-landscape="true"] {
  width: min(100%, 820px) !important;
  height: min(100%, 56vh) !important;
}

/* Make the viewing area feel intentionally staged. */
.score-pdf-shell::before {
  content: "";
  position: absolute;
  width: min(60vw, 760px);
  height: min(42vw, 480px);
  background: radial-gradient(circle, rgba(196,151,78,0.10), transparent 66%);
  filter: blur(18px);
  pointer-events: none;
}

.score-pdf-shell iframe {
  position: relative;
  z-index: 1;
}

/* Smaller top heading leaves more visual air. */
.score-portal-view-head {
  min-height: 96px;
}

.score-portal-view-head h3 {
  font-size: clamp(1.55rem, 2vw, 2.35rem) !important;
}

/* Slightly slimmer side rail. */
.score-portal-stage {
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) !important;
}

.score-portal-list {
  padding: clamp(22px, 2.5vw, 34px) !important;
}

.score-choice {
  padding: 15px 16px 15px !important;
}

@media (max-width: 980px) {
  .score-portal-stage {
    grid-template-columns: 1fr !important;
  }

  .score-pdf-shell {
    padding: 18px !important;
  }

  .score-pdf-shell iframe {
    width: min(100%, 520px) !important;
    height: 58vh !important;
  }
}


/* === STYLISED SCALED SCORE READER === */

/*
  Browser PDF viewers are awkward to control. This makes the iframe viewport
  much larger than the visible frame, then scales it down. That means the
  preview shows more of the full page instead of looking cropped.
*/

.score-pdf-shell {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(38px, 5vw, 78px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at var(--score-x) var(--score-y), rgba(196,151,78,0.13), transparent 24rem),
    radial-gradient(circle at 50% 48%, rgba(242,232,216,0.05), transparent 30rem),
    repeating-linear-gradient(0deg, rgba(242,232,216,0.018) 0px, rgba(242,232,216,0.018) 1px, transparent 1px, transparent 26px),
    linear-gradient(180deg, #11100f, #070706) !important;
}

.score-reader-frame {
  position: absolute;
  inset: clamp(28px, 4vw, 62px);
  border-radius: 28px;
  border: 1px solid rgba(196,151,78,0.16);
  pointer-events: none;
  opacity: 0.74;
  background:
    radial-gradient(circle at 50% 50%, rgba(196,151,78,0.08), transparent 22rem),
    linear-gradient(90deg, rgba(196,151,78,0.05), transparent 28%, transparent 72%, rgba(196,151,78,0.05));
}

.score-reader-frame span {
  position: absolute;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,232,216,0.13), transparent);
}

.score-reader-frame span:nth-child(1) { top: 18%; }
.score-reader-frame span:nth-child(2) { top: 30%; }
.score-reader-frame span:nth-child(3) { top: 42%; }
.score-reader-frame span:nth-child(4) { top: 54%; }
.score-reader-frame span:nth-child(5) { top: 66%; }

.score-reader-meta {
  position: absolute;
  left: clamp(24px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 38px);
  z-index: 2;
  display: flex;
  gap: 14px;
  color: rgba(242,232,216,0.42);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  pointer-events: none;
}

.score-reader-meta span {
  border-top: 1px solid rgba(196,151,78,0.28);
  padding-top: 9px;
}

.score-pdf-shell::before {
  width: min(68vw, 920px) !important;
  height: min(42vw, 560px) !important;
  background:
    radial-gradient(circle, rgba(196,151,78,0.13), transparent 62%) !important;
}

/* Visible frame. */
.score-pdf-shell iframe {
  position: relative !important;
  z-index: 3 !important;
  border: 1px solid rgba(242,232,216,0.18) !important;
  border-radius: 18px !important;
  background: #f4f1eb !important;
  box-shadow:
    0 38px 120px rgba(0,0,0,0.64),
    0 0 0 1px rgba(196,151,78,0.08) !important;
  transform-origin: top center !important;
}

/*
  Oversized iframe viewport, scaled down.
  This is what reduces crop while keeping the preview physically smaller.
*/
.score-pdf-shell iframe.score-pdf-portrait {
  width: 980px !important;
  height: 1320px !important;
  max-width: none !important;
  max-height: none !important;
  transform: scale(0.47) !important;
  margin-bottom: -700px !important;
}

.score-pdf-shell iframe.score-pdf-landscape {
  width: 1180px !important;
  height: 860px !important;
  max-width: none !important;
  max-height: none !important;
  transform: scale(0.55) !important;
  margin-bottom: -390px !important;
}

/* Fallback if the class has not applied yet. */
.score-pdf-shell iframe:not(.score-pdf-portrait):not(.score-pdf-landscape) {
  width: 980px !important;
  height: 1320px !important;
  max-width: none !important;
  max-height: none !important;
  transform: scale(0.47) !important;
  margin-bottom: -700px !important;
}

/* Give the stage a more deliberate, gallery-like feel. */
.score-portal-stage {
  background:
    linear-gradient(90deg, rgba(14,12,10,0.99), rgba(8,7,6,0.99)),
    #090807 !important;
}

.score-portal-view {
  background:
    radial-gradient(circle at 50% 50%, rgba(196,151,78,0.035), transparent 32rem),
    #080807;
}

.score-portal-view-head {
  min-height: 86px !important;
}

.score-portal-view-head h3 {
  font-size: clamp(1.45rem, 1.8vw, 2.15rem) !important;
}

.score-portal-view-head a {
  font-size: 0.88rem !important;
}

/* Keep the side rail refined. */
.score-portal-list h3 {
  font-size: clamp(1.45rem, 1.75vw, 2.05rem) !important;
}

.score-choice small {
  line-height: 1.32 !important;
}

@media (max-width: 980px) {
  .score-reader-meta {
    display: none;
  }

  .score-pdf-shell iframe.score-pdf-portrait,
  .score-pdf-shell iframe:not(.score-pdf-portrait):not(.score-pdf-landscape) {
    width: 820px !important;
    height: 1120px !important;
    transform: scale(0.42) !important;
    margin-bottom: -640px !important;
  }

  .score-pdf-shell iframe.score-pdf-landscape {
    width: 920px !important;
    height: 680px !important;
    transform: scale(0.42) !important;
    margin-bottom: -390px !important;
  }
}


/* === CLEAN SCORE ROOM OVERRIDE === */

/* Undo the cluttered trial elements if any remain. */
.score-ghost-notation,
.score-reader-details,
.score-reader-chips {
  display: none !important;
}

/* Keep the modal premium, but calmer. */
.score-portal-stage {
  border-color: rgba(196,151,78,0.34) !important;
  background: #090807 !important;
}

.score-portal-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background:
    radial-gradient(circle at var(--score-x, 50%) var(--score-y, 50%), rgba(196,151,78,0.16), transparent 22rem),
    repeating-linear-gradient(0deg, rgba(242,232,216,0.018) 0px, rgba(242,232,216,0.018) 1px, transparent 1px, transparent 30px);
}

.score-portal-atmosphere {
  opacity: 0.42 !important;
}

.score-portal-list,
.score-portal-view {
  position: relative;
  z-index: 1;
}

.score-portal-list {
  background:
    radial-gradient(circle at 25% 0%, rgba(196,151,78,0.10), transparent 18rem),
    linear-gradient(180deg, rgba(18,15,12,0.96), rgba(7,7,6,0.99)) !important;
}

.score-portal-list h3 {
  font-family: var(--body) !important;
  font-size: clamp(1.55rem, 1.85vw, 2.25rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  font-weight: 850 !important;
  max-width: 9ch;
}

/* Cleaner PDF stage, no extra floating labels. */
.score-pdf-shell {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(42px, 5vw, 82px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(196,151,78,0.11), transparent 26rem),
    linear-gradient(180deg, #11100f, #070706) !important;
}

.score-pdf-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(54vw, 760px);
  height: min(36vw, 520px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(196,151,78,0.13), transparent 66%);
  filter: blur(20px);
  pointer-events: none;
}

/* Simple framed "display case" around the score. */
.score-reader-frame {
  position: absolute;
  inset: clamp(38px, 5vw, 78px);
  border-radius: 24px;
  border: 1px solid rgba(196,151,78,0.18);
  pointer-events: none;
  opacity: 0.68;
  background:
    radial-gradient(circle at 50% 50%, rgba(196,151,78,0.055), transparent 22rem),
    linear-gradient(90deg, rgba(196,151,78,0.035), transparent 28%, transparent 72%, rgba(196,151,78,0.035));
}

.score-reader-frame span {
  opacity: 0.45;
}

/* Keep the PDF smaller and visibly intentional. */
.score-pdf-shell iframe.score-pdf-portrait,
.score-pdf-shell iframe:not(.score-pdf-portrait):not(.score-pdf-landscape) {
  width: 980px !important;
  height: 1320px !important;
  max-width: none !important;
  max-height: none !important;
  transform: scale(0.43) !important;
  margin-bottom: -740px !important;
  transform-origin: top center !important;
}

.score-pdf-shell iframe.score-pdf-landscape {
  width: 1180px !important;
  height: 860px !important;
  max-width: none !important;
  max-height: none !important;
  transform: scale(0.50) !important;
  margin-bottom: -430px !important;
  transform-origin: top center !important;
}

.score-pdf-shell iframe {
  position: relative !important;
  z-index: 2 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(242,232,216,0.16) !important;
  background: #f4f1eb !important;
  box-shadow:
    0 40px 120px rgba(0,0,0,0.64),
    0 0 0 1px rgba(196,151,78,0.08) !important;
}

/* Bottom label: keep only one refined line. */
.score-reader-meta {
  left: clamp(32px, 4vw, 64px) !important;
  bottom: clamp(24px, 3vw, 42px) !important;
  opacity: 0.55 !important;
}

.score-reader-meta span:nth-child(2) {
  display: none !important;
}

/* Header refinement. */
.score-portal-view-head {
  min-height: 86px !important;
  background:
    radial-gradient(circle at var(--score-x, 50%) 0%, rgba(196,151,78,0.10), transparent 20rem),
    linear-gradient(180deg, rgba(13,12,10,0.98), rgba(7,7,6,0.98)) !important;
}

.score-portal-view-head h3 {
  font-family: var(--body) !important;
  font-size: clamp(1.55rem, 1.9vw, 2.35rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  font-weight: 850 !important;
}

.score-portal-view-head a {
  font-size: 0.88rem !important;
}

/* The score choices should be useful, not visually noisy. */
.score-choice {
  padding: 16px 17px !important;
  border-radius: 17px !important;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease !important;
}

.score-choice:hover {
  transform: translateX(3px);
}

.score-choice.is-active {
  border-color: rgba(196,151,78,0.54) !important;
  background: rgba(196,151,78,0.10) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,0.24) !important;
}

@media (max-width: 980px) {
  .score-pdf-shell iframe.score-pdf-portrait,
  .score-pdf-shell iframe:not(.score-pdf-portrait):not(.score-pdf-landscape) {
    width: 820px !important;
    height: 1120px !important;
    transform: scale(0.40) !important;
    margin-bottom: -660px !important;
  }

  .score-pdf-shell iframe.score-pdf-landscape {
    width: 920px !important;
    height: 680px !important;
    transform: scale(0.40) !important;
    margin-bottom: -410px !important;
  }

  .score-reader-frame,
  .score-reader-meta {
    display: none !important;
  }
}


/* === SCORE ROOM MAIN TITLE REDUCTION + PDF GLOW === */

/* Main page score portal title: reduce the size so it feels supporting, not headline-level. */
.score-portal-copy h2 {
  font-size: clamp(2.15rem, 4.2vw, 5.1rem) !important;
  line-height: 0.98 !important;
  max-width: 12ch !important;
}

/* Slightly tighten the score portal card so the section feels more discreet. */
.score-portal-card {
  padding: clamp(28px, 3.2vw, 48px) !important;
}

.score-portal-copy p:not(.eyebrow) {
  max-width: 560px !important;
  font-size: clamp(1rem, 1.05vw, 1.15rem) !important;
}

/* Stronger, cleaner glow behind the score PDF inside the Score Room. */
.score-pdf-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(58vw, 860px) !important;
  height: min(44vw, 620px) !important;
  border-radius: 999px;
  background:
    radial-gradient(circle,
      rgba(196,151,78,0.23) 0%,
      rgba(196,151,78,0.13) 28%,
      rgba(196,151,78,0.055) 48%,
      transparent 72%) !important;
  filter: blur(30px) !important;
  opacity: 0.95 !important;
  pointer-events: none;
  animation: scoreGlowPulse 6.5s ease-in-out infinite alternate;
}

.score-pdf-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(38vw, 560px);
  height: min(38vw, 560px);
  border-radius: 999px;
  background:
    radial-gradient(circle,
      rgba(242,232,216,0.08) 0%,
      rgba(196,151,78,0.06) 42%,
      transparent 70%);
  filter: blur(18px);
  opacity: 0.85;
  pointer-events: none;
}

@keyframes scoreGlowPulse {
  from {
    transform: scale(0.96);
    opacity: 0.70;
  }
  to {
    transform: scale(1.06);
    opacity: 1;
  }
}

/* Give the PDF itself a more premium lifted edge. */
.score-pdf-shell iframe {
  box-shadow:
    0 42px 130px rgba(0,0,0,0.68),
    0 0 78px rgba(196,151,78,0.16),
    0 0 0 1px rgba(242,232,216,0.15) !important;
}


/* === SCORE ROOM FOURTH SCORE + SERIF HEADING FIX === */

/* Use the same elegant display family as the hero name, but keep it smaller and single-line where possible. */
.score-portal-copy h2 {
  font-family: var(--display) !important;
  font-size: clamp(2.35rem, 4vw, 5rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
  max-width: 16ch !important;
}

/* Avoid the previous forced narrow wrap. */
@media (min-width: 981px) {
  .score-portal-copy h2 {
    white-space: nowrap;
  }
}

/* Make the whole main score card a little shallower. */
.score-portal-card {
  min-height: auto !important;
  padding-top: clamp(26px, 3vw, 42px) !important;
  padding-bottom: clamp(26px, 3vw, 42px) !important;
}

/* Four score choices need slightly slimmer cards in the side rail. */
.score-choice {
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}

.score-choice strong {
  font-size: 1.06rem !important;
}

.score-choice small {
  font-size: 0.86rem !important;
}

/* Let the Score Room list fit four choices more elegantly. */
.score-portal-list {
  padding-top: clamp(22px, 2.5vw, 32px) !important;
}

.score-portal-list h3 {
  margin-bottom: 20px !important;
}


/* === SCORE ROOM HOMEPAGE TITLE FINAL FIX === */

/* Smaller, elegant display font matching the hero name. */
.score-portal-copy h2 {
  font-family: var(--display) !important;
  font-size: clamp(2.2rem, 3.45vw, 4.15rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
  max-width: 13.5ch !important;
  white-space: normal !important;
}

/* Keep the score section visually secondary rather than headline-sized. */
.score-portal-card {
  padding-top: clamp(26px, 3vw, 42px) !important;
  padding-bottom: clamp(26px, 3vw, 42px) !important;
}

.score-portal-copy p:not(.eyebrow) {
  max-width: 520px !important;
}

/* Four choices in the Score Room sidebar, with Solar first. */
.score-choice {
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}

.score-choice strong {
  font-size: 1.05rem !important;
}

.score-choice small {
  font-size: 0.85rem !important;
}


/* === FINAL SCORE ROOM HOMEPAGE HEADING FIX === */

/*
  This heading should match the elegant display serif used for the main
  "Selected work across screen, commercial and cinematic media." heading.
  It should also stay on one line on desktop.
*/

.score-portal-copy h2 {
  font-family: var(--display) !important;
  font-size: clamp(2.15rem, 3.05vw, 4.15rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
  font-weight: 500 !important;
  max-width: none !important;
  width: max-content !important;
  white-space: nowrap !important;
}

/* Keep the score-room entry as a supporting section, not a huge page headline. */
.score-portal-card {
  min-height: 0 !important;
  padding-top: clamp(24px, 2.8vw, 40px) !important;
  padding-bottom: clamp(24px, 2.8vw, 40px) !important;
}

.score-portal-copy {
  min-width: 0 !important;
}

.score-portal-copy p:not(.eyebrow) {
  max-width: 560px !important;
}

/* Mobile can wrap normally. */
@media (max-width: 780px) {
  .score-portal-copy h2 {
    width: auto !important;
    white-space: normal !important;
    font-size: clamp(2.05rem, 10vw, 3.8rem) !important;
  }
}


/* === NINE CARD SELECTED WORK GRID === */

.work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-image-adventure {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.05), rgba(11,10,8,0.88)),
    radial-gradient(circle at 56% 18%, rgba(196,151,78,0.12), transparent 18rem),
    url("assets/Images/adventure-together-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #17140f, #060605) !important;
}

.card-image-blood-wine {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.06), rgba(11,10,8,0.86)),
    radial-gradient(circle at 44% 22%, rgba(112,38,30,0.18), transparent 18rem),
    radial-gradient(circle at 68% 72%, rgba(196,151,78,0.12), transparent 20rem),
    url("assets/Images/blood-and-wine-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #1a100d, #070606) !important;
}

.card-image-barren {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.10), rgba(11,10,8,0.91)),
    radial-gradient(circle at 32% 18%, rgba(132,132,124,0.11), transparent 18rem),
    radial-gradient(circle at 70% 76%, rgba(196,151,78,0.06), transparent 22rem),
    url("assets/Images/barren-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #0f0e0d, #050505) !important;
}

.work-card:hover .card-image-adventure,
.work-card:hover .card-image-blood-wine,
.work-card:hover .card-image-barren {
  transform: scale(1.07);
  filter: saturate(1.08) contrast(1.08) brightness(1.06);
}

@media (max-width: 980px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}


/* === FINAL NINE CARD SELECTED WORK FIX === */

.work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.card-image-adventure {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.05), rgba(11,10,8,0.88)),
    radial-gradient(circle at 56% 18%, rgba(196,151,78,0.12), transparent 18rem),
    url("assets/Images/adventure-together-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #17140f, #060605) !important;
}

.card-image-blood-wine {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.06), rgba(11,10,8,0.86)),
    radial-gradient(circle at 44% 22%, rgba(112,38,30,0.18), transparent 18rem),
    radial-gradient(circle at 68% 72%, rgba(196,151,78,0.12), transparent 20rem),
    url("assets/Images/blood-and-wine-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #1a100d, #070606) !important;
}

.card-image-barren {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.10), rgba(11,10,8,0.91)),
    radial-gradient(circle at 32% 18%, rgba(132,132,124,0.11), transparent 18rem),
    radial-gradient(circle at 70% 76%, rgba(196,151,78,0.06), transparent 22rem),
    url("assets/Images/barren-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #0f0e0d, #050505) !important;
}

@media (max-width: 980px) {
  .work-grid {
    grid-template-columns: 1fr !important;
  }
}


/* === HARD FIX: NINE VISIBLE SELECTED WORK CARDS === */

.work-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

.card-image-adventure {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.05), rgba(11,10,8,0.88)),
    radial-gradient(circle at 56% 18%, rgba(196,151,78,0.12), transparent 18rem),
    url("assets/Images/adventure-together-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #17140f, #060605) !important;
}

.card-image-blood-wine {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.06), rgba(11,10,8,0.86)),
    radial-gradient(circle at 44% 22%, rgba(112,38,30,0.18), transparent 18rem),
    radial-gradient(circle at 68% 72%, rgba(196,151,78,0.12), transparent 20rem),
    url("assets/Images/blood-and-wine-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #1a100d, #070606) !important;
}

.card-image-barren {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.10), rgba(11,10,8,0.91)),
    radial-gradient(circle at 32% 18%, rgba(132,132,124,0.11), transparent 18rem),
    radial-gradient(circle at 70% 76%, rgba(196,151,78,0.06), transparent 22rem),
    url("assets/Images/barren-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #0f0e0d, #050505) !important;
}

@media (max-width: 980px) {
  .work-grid {
    grid-template-columns: 1fr !important;
  }
}


/* === FLOW TIGHTENING + COPY CLEANUP === */

/* Remove extra dead space after the work grid and let the next sections flow. */
.work-section {
  padding-bottom: clamp(36px, 4.2vw, 64px) !important;
}

.score-portal-section {
  padding-top: clamp(18px, 2.4vw, 32px) !important;
  padding-bottom: clamp(42px, 4.5vw, 68px) !important;
}

.about-section {
  padding-top: clamp(32px, 3.2vw, 56px) !important;
}

/* Slightly tighten the grid intro too so the cards begin sooner. */
.work-section .section-intro {
  margin-bottom: 28px !important;
}

/* Smaller elegant serif heading for the score portal homepage panel. */
.score-portal-copy h2 {
  font-family: var(--display) !important;
  font-size: clamp(1.9rem, 2.4vw, 3.05rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  font-weight: 500 !important;
  max-width: 10ch !important;
  width: auto !important;
  white-space: normal !important;
}

/* Tighter score portal card footprint. */
.score-portal-card {
  padding: clamp(24px, 2.8vw, 40px) !important;
}

/* About heading rewritten more simply and styled a touch less AI-polished. */
.about-copy-wrap h2 {
  max-width: 14ch;
}

@media (max-width: 780px) {
  .work-section {
    padding-bottom: 28px !important;
  }

  .score-portal-section {
    padding-top: 12px !important;
    padding-bottom: 36px !important;
  }

  .about-section {
    padding-top: 24px !important;
  }

  .score-portal-copy h2 {
    font-size: clamp(1.95rem, 8.3vw, 3rem) !important;
    max-width: 12ch !important;
  }
}


/* === SAFE SOCIETY IMAGE PATH FIX === */

.card-image-safe-society {
  background:
    linear-gradient(180deg, rgba(11,10,8,0.05), rgba(11,10,8,0.88)),
    radial-gradient(circle at 50% 20%, rgba(220,0,0,0.14), transparent 18rem),
    url("assets/Images/safe-society-card.jpg") center / cover no-repeat,
    linear-gradient(135deg, #0b1012, #050505) !important;
}

.work-card:hover .card-image-safe-society {
  transform: scale(1.07);
  filter: saturate(1.08) contrast(1.08) brightness(1.05);
}


/* === GAP TIGHTENING BETWEEN WORK GRID AND SCORE BOX === */

/* The previous spacing still inherited too much top padding from the generic .section rule.
   This tightens the transition so the cards flow straight into the score box. */
.work-section {
  padding-bottom: clamp(14px, 1.8vw, 26px) !important;
}

.score-portal-section {
  padding-top: 0 !important;
  padding-bottom: clamp(36px, 4vw, 58px) !important;
}

.score-portal-card {
  margin-top: 0 !important;
}

@media (max-width: 780px) {
  .work-section {
    padding-bottom: 12px !important;
  }

  .score-portal-section {
    padding-top: 0 !important;
    padding-bottom: 28px !important;
  }
}


/* === FINAL SCORE BOX GAP + ONE-LINE TITLE FIX === */

/* Pull the score box much closer to the final row of project cards. */
.work-section {
  padding-bottom: 0 !important;
}

.score-portal-section {
  padding-top: 0 !important;
  margin-top: clamp(-150px, -8vw, -86px) !important;
  padding-bottom: clamp(32px, 3.5vw, 52px) !important;
}

/* Keep the score panel itself compact. */
.score-portal-card {
  padding: clamp(22px, 2.4vw, 34px) clamp(28px, 3vw, 46px) !important;
  min-height: 0 !important;
}

/* Keep "Selected score excerpts." on one line on desktop. */
.score-portal-copy h2 {
  font-family: var(--display) !important;
  font-size: clamp(2rem, 2.65vw, 3.55rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  width: max-content !important;
  max-width: none !important;
}

.score-portal-copy p:not(.eyebrow) {
  margin-top: 12px !important;
}

/* Keep mobile sensible. */
@media (max-width: 900px) {
  .score-portal-section {
    margin-top: -40px !important;
  }

  .score-portal-card {
    grid-template-columns: 1fr !important;
  }

  .score-portal-copy h2 {
    white-space: normal !important;
    width: auto !important;
    max-width: 12ch !important;
    font-size: clamp(2rem, 8.5vw, 3.2rem) !important;
  }
}


/* === PHONE ONLY LAYOUT FIX === */
/* These rules only apply to phone and small tablet widths. Desktop remains unchanged. */

@media (max-width: 700px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .site-header,
  .header-inner {
    min-height: 58px !important;
  }

  .header-inner {
    width: min(100% - 22px, var(--max)) !important;
    gap: 10px !important;
  }

  .brand {
    max-width: 88px !important;
    font-size: 0.74rem !important;
    line-height: 0.92 !important;
    letter-spacing: -0.03em !important;
  }

  .nav {
    gap: 9px !important;
    font-size: 0.67rem !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
  }

  .nav a {
    padding: 7px 0 !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 96px !important;
    padding-bottom: 44px !important;
  }

  .hero-content {
    width: min(100% - 28px, var(--max)) !important;
  }

  .hero h1 {
    font-size: clamp(3.6rem, 15vw, 5.4rem) !important;
    line-height: 0.9 !important;
    max-width: 8.8ch !important;
  }

  .hero-subtitle {
    max-width: 30ch !important;
    font-size: 0.93rem !important;
    line-height: 1.42 !important;
  }

  .hero-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 320px !important;
  }

  .button {
    min-height: 44px !important;
    justify-content: center !important;
  }

  .credits-strip {
    margin-top: 0 !important;
    padding: 14px 14px !important;
  }

  .credits-strip p {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 14px !important;
    line-height: 1.25 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
  }

  .credits-strip span {
    display: none !important;
  }

  .credits-strip + .section {
    padding-top: 52px !important;
  }

  .section {
    padding: 58px 0 !important;
  }

  .section-intro {
    margin-bottom: 24px !important;
  }

  .section-intro h2 {
    font-size: clamp(2.35rem, 12vw, 3.55rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.055em !important;
  }

  .work-section {
    padding-top: 58px !important;
    padding-bottom: 0 !important;
  }

  .work-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: min(100% - 28px, var(--max)) !important;
  }

  .work-card {
    min-height: 292px !important;
    border-radius: 18px !important;
  }

  .card-content {
    inset: auto 18px 18px 18px !important;
  }

  .card-category {
    font-size: 0.62rem !important;
    margin-bottom: 8px !important;
  }

  .card-title {
    font-size: clamp(1.45rem, 7.4vw, 2.2rem) !important;
    line-height: 0.98 !important;
    max-width: 11ch !important;
  }

  .card-description {
    margin-top: 9px !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    max-width: 28ch !important;
  }

  .card-action {
    margin-top: 12px !important;
    font-size: 0.9rem !important;
  }

  .score-portal-section {
    margin-top: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 28px !important;
  }

  .score-portal-card {
    width: min(100% - 28px, var(--max)) !important;
    padding: 22px 18px !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    border-radius: 20px !important;
  }

  .score-portal-copy h2 {
    white-space: normal !important;
    width: auto !important;
    max-width: 11ch !important;
    font-size: clamp(2.05rem, 10.5vw, 3rem) !important;
    line-height: 0.94 !important;
  }

  .score-portal-copy p:not(.eyebrow) {
    max-width: 31ch !important;
    font-size: 0.9rem !important;
    line-height: 1.42 !important;
    margin-top: 10px !important;
  }

  .score-portal-button {
    min-width: 0 !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }

  .score-portal-orb {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
  }

  .score-portal-button-copy span {
    font-size: 0.98rem !important;
  }

  .score-portal-button-copy small {
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
  }

  .about-section {
    padding-top: 44px !important;
  }

  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: min(100% - 28px, var(--max)) !important;
  }

  .about-copy-wrap h2 {
    max-width: 12ch !important;
    font-size: clamp(2.2rem, 10vw, 3.1rem) !important;
    line-height: 0.96 !important;
  }

  .about-copy {
    font-size: 0.95rem !important;
    line-height: 1.52 !important;
  }

  .contact-card {
    width: min(100% - 28px, var(--max)) !important;
    padding: 24px 18px !important;
    border-radius: 20px !important;
  }

  .contact-card h2 {
    font-size: clamp(2.25rem, 11vw, 3.35rem) !important;
    line-height: 0.95 !important;
  }

  .audio-panel,
  .score-portal-stage {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 22px) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }

  .audio-layout,
  .media-layout {
    grid-template-columns: 1fr !important;
  }

  .audio-info h2 {
    font-size: clamp(2rem, 10vw, 3.1rem) !important;
    line-height: 0.94 !important;
  }

  .audio-art {
    min-height: 220px !important;
  }

  .media-tabs {
    grid-template-columns: 1fr !important;
  }

  .score-portal-stage {
    grid-template-columns: 1fr !important;
  }

  .score-portal-list {
    max-height: none !important;
  }

  .score-reader {
    min-height: 62vh !important;
  }

  .scroll-top {
    right: 18px !important;
    bottom: 18px !important;
    width: 38px !important;
    height: 38px !important;
  }
}

@media (max-width: 420px) {
  .nav {
    gap: 7px !important;
    font-size: 0.62rem !important;
  }

  .brand {
    max-width: 74px !important;
    font-size: 0.68rem !important;
  }

  .hero h1 {
    font-size: clamp(3.25rem, 14.4vw, 4.75rem) !important;
  }

  .work-card {
    min-height: 274px !important;
  }
}


/* === PHONE HERO, CREDITS AND SCORE SPACING CLEANUP === */
/* Phone-only refinement. Desktop/laptop layout is unchanged. */

.credits-strip .credit-dot {
  color: var(--brass);
  margin: 0 14px;
}

.credits-strip .credit-name {
  display: inline;
}

@media (max-width: 700px) {
  /* Keep the name on one line, smaller and cleaner. */
  .hero {
    padding-top: 92px !important;
    padding-bottom: 38px !important;
  }

  .hero h1 {
    white-space: nowrap !important;
    max-width: none !important;
    width: max-content !important;
    font-size: clamp(2.18rem, 9.7vw, 3.95rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.07em !important;
  }

  .hero-subtitle {
    margin-top: 14px !important;
    max-width: 32ch !important;
  }

  .hero-actions {
    margin-top: 22px !important;
  }

  /* Credits: six names arranged as two clean rows across the screen. */
  .credits-strip {
    padding: 16px 10px !important;
  }

  .credits-strip p {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }

  .credits-strip .credit-name {
    display: block !important;
    min-width: 0 !important;
    font-size: clamp(0.58rem, 2.8vw, 0.76rem) !important;
    letter-spacing: 0.065em !important;
    white-space: nowrap !important;
    color: rgba(242,232,216,0.86) !important;
  }

  .credits-strip .credit-dot,
  .credits-strip p > span:not(.credit-name) {
    display: none !important;
  }

  .credits-strip + .section {
    padding-top: 48px !important;
  }

  /* Keep cards broadly as they are, but make the transition into Score Room cleaner. */
  .work-section {
    padding-bottom: 0 !important;
  }

  .score-portal-section {
    margin-top: -34px !important;
    padding-top: 0 !important;
    padding-bottom: 30px !important;
  }

  .score-portal-card {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .hero h1 {
    font-size: clamp(2.02rem, 9.15vw, 3.25rem) !important;
    letter-spacing: -0.075em !important;
  }

  .credits-strip p {
    gap: 8px 6px !important;
  }

  .credits-strip .credit-name {
    font-size: clamp(0.53rem, 2.55vw, 0.68rem) !important;
    letter-spacing: 0.045em !important;
  }

  .score-portal-section {
    margin-top: -42px !important;
  }
}

@media (max-width: 370px) {
  .hero h1 {
    font-size: clamp(1.86rem, 8.7vw, 2.9rem) !important;
  }

  .credits-strip .credit-name {
    font-size: 0.5rem !important;
  }
}

/* === FINAL PHONE OVERRIDE === */
/* Desktop remains unchanged. */

@media (max-width: 700px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Header */
  .brand {
    max-width: 92px !important;
    font-size: 0.72rem !important;
    line-height: 0.92 !important;
  }

  .nav {
    gap: 9px !important;
    font-size: 0.66rem !important;
    white-space: nowrap !important;
  }

  /* Hero */
  .hero {
    min-height: auto !important;
    padding-top: 92px !important;
    padding-bottom: 42px !important;
  }

  .hero h1 {
    white-space: nowrap !important;
    max-width: none !important;
    width: max-content !important;
    font-size: clamp(2rem, 9vw, 3.6rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.07em !important;
  }

  .hero-subtitle {
    margin-top: 14px !important;
    font-size: 0.94rem !important;
    line-height: 1.38 !important;
  }

  .hero-actions {
    margin-top: 22px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 320px !important;
  }

  /* Credits: clean two-line layout */
  .credits-strip {
    margin-top: 0 !important;
    padding: 16px 12px !important;
  }

  .credits-strip p {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px 8px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .credits-strip .credit-name {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: clamp(0.53rem, 2.45vw, 0.68rem) !important;
    letter-spacing: 0.075em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    color: rgba(242, 232, 216, 0.86) !important;
  }

  .credits-strip .credit-dot,
  .credits-strip p > span:not(.credit-name) {
    display: none !important;
  }

  /* Selected work heading */
  .credits-strip + .section {
    padding-top: 48px !important;
  }

  .section {
    padding: 56px 0 !important;
  }

  .section-intro h2 {
    font-size: clamp(2.45rem, 10.8vw, 3.35rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.055em !important;
  }

  .work-section .section-intro h2 {
    max-width: 9.8ch !important;
  }

  /* Cards */
  .work-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: min(100% - 28px, var(--max)) !important;
  }

  .work-card {
    min-height: 292px !important;
  }

  /* Remove the vertical stripe area before Score Room */
  .work-section,
  .score-portal-section {
    background: #0b0a08 !important;
  }

  .work-section::before,
  .work-section::after,
  .score-portal-section::before,
  .score-portal-section::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .work-section {
    padding-bottom: 0 !important;
  }

  .score-portal-section {
    margin-top: -42px !important;
    padding-top: 0 !important;
  }

  /* Listening modal */
  .audio-modal {
    align-items: flex-start !important;
    padding: 10px !important;
  }

  .audio-panel {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    padding: 0 !important;
  }

  .audio-layout,
  .media-layout {
    grid-template-columns: 1fr !important;
  }

  .audio-art,
  .audio-art.has-image {
    height: 205px !important;
    min-height: 205px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: #080706 !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .audio-art::before,
  .audio-art::after,
  .audio-art.has-image::before,
  .audio-art.has-image::after,
  .audio-art .poster-frame,
  .audio-art .poster-frame::before,
  .audio-art .poster-frame::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    background: none !important;
  }

  .audio-info {
    padding: 24px 22px 12px !important;
  }

  .audio-info h2 {
    font-size: clamp(2.05rem, 9.6vw, 3.1rem) !important;
    line-height: 0.94 !important;
  }

  .audio-info p {
    font-size: 0.92rem !important;
    line-height: 1.42 !important;
  }

  .media-section,
  .audio-player-area {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .media-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 10px !important;
  }

  .media-tab {
    min-height: 34px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
  }

  .audio-player-shell,
  .custom-player {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 8 !important;
    margin-top: 14px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(12, 10, 8, 0.96) !important;
    backdrop-filter: blur(12px) !important;
  }

  .player-main {
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .player-button,
  .play-button,
  .audio-play-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }
}

@media (max-width: 430px) {
  .nav {
    gap: 7px !important;
    font-size: 0.62rem !important;
  }

  .hero h1 {
    font-size: clamp(1.86rem, 8.6vw, 3rem) !important;
  }

  .credits-strip .credit-name {
    font-size: 0.5rem !important;
    letter-spacing: 0.055em !important;
  }

  .media-tabs {
    grid-template-columns: 1fr !important;
  }

  .media-tab {
    min-height: 34px !important;
    font-size: 0.72rem !important;
  }
}

/* === MOBILE FIX V2 === */
/* Applies to phone and narrow preview widths. Desktop/laptop full width remains unchanged. */

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .container {
    width: min(100% - 28px, var(--max)) !important;
  }

  .site-header {
    min-height: 58px !important;
  }

  .header-inner {
    width: min(100% - 24px, var(--max)) !important;
    min-height: 58px !important;
    gap: 10px !important;
  }

  .brand {
    max-width: 96px !important;
    font-size: 0.72rem !important;
    line-height: 0.92 !important;
  }

  .nav {
    gap: 9px !important;
    font-size: 0.66rem !important;
    white-space: nowrap !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 94px !important;
    padding-bottom: 42px !important;
  }

  .hero-content {
    width: min(100% - 32px, var(--max)) !important;
  }

  .hero h1 {
    white-space: nowrap !important;
    max-width: none !important;
    width: max-content !important;
    font-size: clamp(2rem, 8.2vw, 3.55rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.068em !important;
  }

  .hero-subtitle {
    margin-top: 14px !important;
    max-width: 32ch !important;
    font-size: 0.94rem !important;
    line-height: 1.38 !important;
  }

  .hero-actions {
    margin-top: 22px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 320px !important;
  }

  .credits-strip {
    margin-top: 0 !important;
    padding: 15px 8px !important;
  }

  .credits-strip p {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 6px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .credits-strip .credit-name {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: clamp(0.5rem, 2.1vw, 0.68rem) !important;
    letter-spacing: 0.055em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    color: rgba(242,232,216,0.86) !important;
  }

  .credits-strip .credit-dot,
  .credits-strip p > span:not(.credit-name) {
    display: none !important;
  }

  .section {
    padding: 54px 0 !important;
  }

  .credits-strip + .section {
    padding-top: 46px !important;
  }

  .section-intro {
    margin-bottom: 24px !important;
  }

  .section-intro h2,
  .work-section .section-intro h2 {
    max-width: 100% !important;
    font-size: clamp(2.05rem, 7vw, 3rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.05em !important;
  }

  .work-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: min(100% - 28px, var(--max)) !important;
  }

  .work-card {
    min-height: 292px !important;
  }

  /* Clean dark transition into Score Room: no vertical decorative striping. */
  .work-section,
  .score-portal-section {
    background: #0b0a08 !important;
  }

  .work-section::before,
  .work-section::after,
  .score-portal-section::before,
  .score-portal-section::after,
  .work-grid::before,
  .work-grid::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
  }

  .work-section {
    padding-bottom: 0 !important;
  }

  .score-portal-section {
    margin-top: -24px !important;
    padding-top: 0 !important;
    padding-bottom: 32px !important;
  }

  .score-portal-card {
    width: min(100% - 28px, var(--max)) !important;
    margin-top: 0 !important;
  }

  /* Audio/listening modal */
  .audio-modal {
    align-items: flex-start !important;
    padding: 10px !important;
  }

  .audio-panel {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    padding: 0 !important;
  }

  .audio-layout,
  .media-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .audio-art,
  .audio-art.has-image {
    height: 205px !important;
    min-height: 205px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: #080706 !important;
    border: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .audio-art::before,
  .audio-art::after,
  .audio-art.has-image::before,
  .audio-art.has-image::after,
  .audio-art-fallback,
  .audio-art-fallback::before,
  .audio-art-fallback::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  .audio-info {
    padding: 24px 22px 12px !important;
  }

  .audio-info h2 {
    font-size: clamp(2.05rem, 8.2vw, 3.1rem) !important;
    line-height: 0.94 !important;
  }

  .audio-info p {
    font-size: 0.92rem !important;
    line-height: 1.42 !important;
  }

  .media-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 10px !important;
    margin-bottom: 12px !important;
  }

  .media-tab {
    min-height: 34px !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
  }

  .audio-player-shell,
  .custom-player {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 8 !important;
    margin-top: 12px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(12,10,8,0.96) !important;
    backdrop-filter: blur(12px) !important;
  }

  .player-main {
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .player-button,
  .play-button,
  .audio-play-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }
}

@media (max-width: 430px) {
  .nav {
    gap: 7px !important;
    font-size: 0.62rem !important;
  }

  .hero h1 {
    font-size: clamp(1.82rem, 8.5vw, 3rem) !important;
  }

  .credits-strip .credit-name {
    font-size: 0.5rem !important;
    letter-spacing: 0.045em !important;
  }

  .media-tabs {
    grid-template-columns: 1fr !important;
  }

  .media-tab {
    min-height: 34px !important;
    font-size: 0.72rem !important;
  }
}


/* === MOBILE V3: CLEAN LINES, INSET TEXT, ORDERED CREDITS === */
/* Desktop remains unchanged at normal laptop/desktop widths. */

@media (max-width: 900px) {
  /* Remove subtle decorative vertical line/grid effects on phone. */
  body::before,
  body::after,
  main::before,
  main::after,
  .hero::before,
  .hero::after,
  .work-section::before,
  .work-section::after,
  .score-portal-section::before,
  .score-portal-section::after,
  .section::before,
  .section::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: 0 !important;
    opacity: 0 !important;
  }

  body,
  .hero,
  .section,
  .work-section,
  .score-portal-section,
  .about-section,
  .contact-section {
    background-image: none !important;
  }

  /* Give mobile section text a more deliberate left inset. */
  .section-intro,
  .work-section .section-intro,
  .about-copy-wrap,
  .contact-card {
    width: min(100% - 44px, var(--max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .section-intro h2,
  .work-section .section-intro h2 {
    padding-left: 0 !important;
  }

  /* Keep the selected work heading readable and less hard against the edge. */
  .work-section .section-intro h2 {
    font-size: clamp(2.1rem, 7vw, 3rem) !important;
    line-height: 1 !important;
    max-width: 12ch !important;
  }

  /* Credits: preserve two rows, but order by visual balance:
     Netflix / Amazon Prime / BBC Wales
     Apple TV / Jaguar Land Rover / Channel 4 */
  .credits-strip p {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .credit-netflix { order: 1 !important; }
  .credit-amazon { order: 2 !important; }
  .credit-bbc { order: 3 !important; }
  .credit-apple { order: 4 !important; }
  .credit-jlr { order: 5 !important; }
  .credit-channel4 { order: 6 !important; }

  .credits-strip .credit-name {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: clamp(0.51rem, 2.05vw, 0.68rem) !important;
    letter-spacing: 0.055em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .credits-strip .credit-dot {
    display: none !important;
  }

  /* Clean up transition area between final project card and score box. */
  .work-section {
    padding-bottom: 0 !important;
    background: #0b0a08 !important;
  }

  .score-portal-section {
    margin-top: -30px !important;
    padding-top: 0 !important;
    background: #0b0a08 !important;
  }

  .score-portal-card {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .section-intro,
  .work-section .section-intro,
  .about-copy-wrap,
  .contact-card {
    width: min(100% - 38px, var(--max)) !important;
  }

  .credits-strip .credit-name {
    font-size: 0.49rem !important;
    letter-spacing: 0.04em !important;
  }
}


/* === MOBILE V4: SPACING, NAV AND STAVE LINE REMOVAL === */
/* Mobile/narrow screen only. Normal desktop remains unchanged. */

@media (max-width: 900px) {
  /* Remove the decorative stave/grid lines that were showing down the left side. */
  body::before,
  body::after,
  main::before,
  main::after,
  .page-shell::before,
  .page-shell::after,
  .hero::before,
  .hero::after,
  .section::before,
  .section::after,
  .work-section::before,
  .work-section::after,
  .score-portal-section::before,
  .score-portal-section::after,
  .about-section::before,
  .about-section::after,
  .contact-section::before,
  .contact-section::after,
  .stave-lines,
  .score-lines,
  .staff-lines,
  .music-lines,
  .line-field,
  .vertical-lines,
  .decor-lines {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Override any repeating-line backgrounds used for the previous stave effect. */
  body,
  main,
  .hero,
  .section,
  .work-section,
  .score-portal-section,
  .about-section,
  .contact-section {
    background-image: none !important;
  }

  /* Keep site texture subtle, without the vertical left line artefacts. */
  body {
    background: #0b0a08 !important;
  }

  /* Mobile nav now has Music, Scores, About, Contact only. */
  .nav {
    gap: 13px !important;
    font-size: 0.72rem !important;
  }

  /* Give mobile content a real gutter and let headings use the available width. */
  .section-intro,
  .work-section .section-intro {
    width: calc(100% - 46px) !important;
    max-width: none !important;
    margin-left: 23px !important;
    margin-right: 23px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-intro h2,
  .work-section .section-intro h2 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: clamp(2.15rem, 8.15vw, 3.45rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.052em !important;
  }

  .section-intro p:not(.eyebrow),
  .work-section .section-intro p:not(.eyebrow) {
    max-width: 34ch !important;
  }

  .eyebrow {
    padding-left: 0 !important;
  }

  /* Match cards to the same mobile gutter so text and images align better. */
  .work-grid,
  .score-portal-card,
  .about-grid,
  .contact-card {
    width: calc(100% - 46px) !important;
    max-width: none !important;
    margin-left: 23px !important;
    margin-right: 23px !important;
  }

  /* Smooth dark transition from cards to Score Room with no line texture. */
  .work-section {
    padding-bottom: 0 !important;
    background: #0b0a08 !important;
  }

  .score-portal-section {
    margin-top: -18px !important;
    padding-top: 0 !important;
    background: #0b0a08 !important;
  }
}

@media (max-width: 430px) {
  .section-intro,
  .work-section .section-intro,
  .work-grid,
  .score-portal-card,
  .about-grid,
  .contact-card {
    width: calc(100% - 36px) !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .section-intro h2,
  .work-section .section-intro h2 {
    font-size: clamp(2rem, 8.8vw, 3.2rem) !important;
    line-height: 1 !important;
  }

  .nav {
    gap: 11px !important;
    font-size: 0.68rem !important;
  }
}


/* === MOBILE V5: REMOVE CLICKABLE LEFT LINE ARTEFACTS === */
/* These lines were coming from off-screen/overflowing work cards, so this clips
   the work section and hides any overflowing card media on phone-width layouts. */

@media (max-width: 900px) {
  html,
  body,
  main,
  .work-section,
  .score-portal-section {
    overflow-x: hidden !important;
  }

  .work-section {
    position: relative !important;
    isolation: isolate !important;
    contain: paint !important;
  }

  .work-grid {
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .work-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    contain: paint !important;
  }

  .work-card,
  .work-card * {
    box-sizing: border-box !important;
  }

  .card-image,
  .card-glow,
  .card-content {
    max-width: 100% !important;
  }

  .card-image {
    inset: 0 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Kill the decorative vertical-line background that was visible/clickable on
     the left edge between the last card and Score Room. */
  .card-image::before,
  .card-image::after,
  .work-card::before,
  .work-card::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Keep the Score Room from being overlapped by any previous card artefact. */
  .score-portal-section {
    position: relative !important;
    z-index: 5 !important;
    margin-top: 18px !important;
    background: #0b0a08 !important;
  }
}


/* === MOBILE V6: DELETE LINE HITBOXES + BRAND FIX === */
/* Mobile/narrow only. Full desktop layout remains unchanged. */

@media (max-width: 900px) {
  /* Stop the top-left name splitting. */
  .brand,
  .brand:link,
  .brand:visited {
    max-width: none !important;
    width: auto !important;
    min-width: 150px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
  }

  .header-inner {
    grid-template-columns: auto 1fr !important;
  }

  .nav {
    justify-self: end !important;
  }

  /* The vertical line artefact is a clickable overflow layer. 
     Delete all non-content decoration/hit layers on mobile. */
  .work-section *,
  .score-portal-section * {
    background-attachment: scroll !important;
  }

  .work-section::before,
  .work-section::after,
  .score-portal-section::before,
  .score-portal-section::after,
  .work-grid::before,
  .work-grid::after,
  .work-card::before,
  .work-card::after,
  .card-image::before,
  .card-image::after,
  .card-glow,
  .score-portal-card::before,
  .score-portal-card::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Clip absolutely everything inside the work area to the visible cards. */
  .work-section,
  .work-grid,
  .work-card {
    overflow: hidden !important;
    clip-path: inset(0) !important;
    contain: paint !important;
  }

  .work-card {
    position: relative !important;
    z-index: 1 !important;
  }

  .card-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .card-content {
    pointer-events: none !important;
  }

  /* Remove any decorative background patterns between work and Score Room. */
  body,
  main,
  .section,
  .work-section,
  .score-portal-section {
    background-image: none !important;
  }

  .score-portal-section {
    position: relative !important;
    z-index: 10 !important;
    margin-top: 22px !important;
    background: #0b0a08 !important;
    isolation: isolate !important;
  }
}

@media (max-width: 430px) {
  .brand,
  .brand:link,
  .brand:visited {
    min-width: 142px !important;
    font-size: 0.68rem !important;
  }

  .nav {
    gap: 9px !important;
    font-size: 0.65rem !important;
  }
}

/* === V7: REMOVE DECORATIVE LINES EVERYWHERE === */
/* Removes the old interactive/stave line decoration from desktop and mobile. */

body::before,
body::after,
main::before,
main::after,
.page-shell::before,
.page-shell::after,
.hero::before,
.hero::after,
.section::before,
.section::after,
.work-section::before,
.work-section::after,
.score-portal-section::before,
.score-portal-section::after,
.about-section::before,
.about-section::after,
.contact-section::before,
.contact-section::after,
.work-grid::before,
.work-grid::after,
.work-card::before,
.work-card::after,
.card-image::before,
.card-image::after,
.card-glow,
.stave-lines,
.staff-lines,
.score-lines,
.music-lines,
.vertical-lines,
.decor-lines,
.line-field,
.stripe-lines,
.stripes,
.interactive-lines,
.interactive-staves,
.score-staves {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove repeating decorative line backgrounds while keeping the main colour palette. */
body,
main,
.hero,
.section,
.work-section,
.score-portal-section,
.about-section,
.contact-section {
  background-image: none !important;
}

body {
  background-color: #0b0a08 !important;
}

/* Keep the card artwork intact after removing line overlays. */
.card-image {
  background-blend-mode: normal !important;
}

.work-section {
  background: linear-gradient(180deg, rgba(33, 22, 15, 0.13), #0b0a08) !important;
}

.score-portal-section,
.about-section,
.contact-section {
  background: #0b0a08 !important;
}


/* === V8: STRUCTURAL CLEANUP SUPPORT === */
/* The duplicate loose work-card block has been removed from the HTML.
   This keeps any remaining accidental loose cards hidden if a browser has cached old markup. */

body > .work-card,
main > .work-card,
.section + .work-card {
  display: none !important;
  pointer-events: none !important;
}


/* === V9: SCORE ROOM PLACEMENT FIX === */
/* The duplicate cards are now removed, so the Score Room should sit cleanly after
   the project grid rather than being pulled up underneath the final row. */

.score-portal-section {
  position: relative !important;
  z-index: 1 !important;
  clear: both !important;
  margin-top: 0 !important;
  padding-top: clamp(34px, 3vw, 58px) !important;
  padding-bottom: clamp(46px, 5vw, 82px) !important;
}

.work-section {
  padding-bottom: clamp(18px, 2vw, 34px) !important;
}

.score-portal-card {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .work-section {
    padding-bottom: 14px !important;
  }

  .score-portal-section {
    margin-top: 0 !important;
    padding-top: 22px !important;
    padding-bottom: 34px !important;
  }
}


/* === V10: MOBILE SCORE ROOM + FOOTER INSET FIX === */
/* Desktop remains unchanged. */

@media (max-width: 900px) {
  /* Footer/contact bottom text was touching the phone edge. */
  .site-footer,
  footer,
  .footer,
  .contact-footer,
  .contact-card,
  .contact-card p,
  .contact-card h2 {
    box-sizing: border-box !important;
  }

  .site-footer,
  footer,
  .footer {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .site-footer .container,
  footer .container,
  .footer .container,
  .contact-section .container,
  .contact-card {
    width: calc(100% - 44px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Score Room modal: make the whole panel scrollable on phone. */
  .score-portal-modal {
    overflow-y: auto !important;
    align-items: flex-start !important;
    padding: 10px !important;
  }

  .score-portal-stage {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    border-radius: 18px !important;
    margin: 0 auto 24px !important;
  }

  .score-portal-list {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 24px 18px 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(196,151,78,0.18) !important;
  }

  .score-portal-list h3 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 0.95 !important;
    margin-bottom: 20px !important;
  }

  .score-choice {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
  }

  .score-choice strong {
    font-size: 1rem !important;
  }

  .score-choice small {
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
  }

  .score-choice span {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

  .score-portal-view {
    width: 100% !important;
    min-height: 0 !important;
    padding: 22px 18px 24px !important;
    overflow: visible !important;
  }

  .score-view-header {
    padding: 0 !important;
    margin-bottom: 18px !important;
  }

  .score-view-header h4,
  .score-view-title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 0.95 !important;
  }

  .score-view-meta,
  .score-view-header .eyebrow {
    font-size: 0.72rem !important;
  }

  .score-reader,
  .score-frame-wrap,
  .score-portal-reader {
    width: 100% !important;
    height: 72vh !important;
    min-height: 520px !important;
    max-height: none !important;
    overflow: auto !important;
    border-radius: 14px !important;
  }

  .score-reader iframe,
  .score-frame-wrap iframe,
  .score-portal-reader iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px !important;
  }

  .score-portal-close {
    position: sticky !important;
    top: 12px !important;
    margin-left: auto !important;
    right: auto !important;
    z-index: 20 !important;
    width: 52px !important;
    height: 52px !important;
    float: right !important;
  }
}

@media (max-width: 430px) {
  .site-footer,
  footer,
  .footer {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .site-footer .container,
  footer .container,
  .footer .container,
  .contact-section .container,
  .contact-card {
    width: calc(100% - 36px) !important;
  }

  .score-reader,
  .score-frame-wrap,
  .score-portal-reader {
    height: 70vh !important;
    min-height: 480px !important;
  }

  .score-reader iframe,
  .score-frame-wrap iframe,
  .score-portal-reader iframe {
    min-height: 480px !important;
  }
}


/* === V11: MOBILE HERO FLOW + FOOTER TEXT SPLIT === */
/* Phone/narrow screen only. Desktop remains unchanged. */

@media (max-width: 900px) {
  /* Make the hero flow into the credits sooner on phone. */
  .hero {
    min-height: 0 !important;
    padding-top: 86px !important;
    padding-bottom: 0 !important;
  }

  .hero-content {
    min-height: clamp(520px, 56vh, 660px) !important;
    padding-top: 0 !important;
    padding-bottom: 30px !important;
    align-items: start !important;
  }

  .hero-copy {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero h1 {
    margin-bottom: 0 !important;
  }

  .hero-subtitle {
    display: block !important;
    margin-top: 12px !important;
    max-width: 100% !important;
    font-size: clamp(1.05rem, 4.2vw, 1.45rem) !important;
    line-height: 1.18 !important;
  }

  .hero-line {
    margin-top: 12px !important;
  }

  .button-row,
  .hero-actions {
    margin-top: 24px !important;
  }

  .credits-strip {
    margin-top: 0 !important;
  }

  /* Bottom/footer text: split the name and role into two cleaner lines. */
  .footer-name,
  .footer-role {
    display: block !important;
  }

  .footer-name {
    margin-bottom: 6px !important;
  }

  .footer-role {
    line-height: 1.25 !important;
  }

  .site-footer p,
  footer p,
  .footer p,
  .contact-card p:last-child {
    max-width: 32ch !important;
  }
}

@media (max-width: 430px) {
  .hero-content {
    min-height: clamp(500px, 54vh, 620px) !important;
    padding-bottom: 26px !important;
  }

  .hero-subtitle {
    font-size: clamp(1rem, 4vw, 1.28rem) !important;
  }
}


/* === V12: MOBILE HERO GAP ADJUST === */
/* Phone/narrow screen only. Desktop remains unchanged.
   Keeps the hero image feel, but shortens the empty space between Contact DNA and the studio credits. */

@media (max-width: 900px) {
  .hero {
    min-height: 0 !important;
    padding-top: 86px !important;
    padding-bottom: 0 !important;
  }

  .hero-content {
    min-height: clamp(470px, 48vh, 570px) !important;
    padding-top: 0 !important;
    padding-bottom: 18px !important;
    align-items: start !important;
  }

  .button-row,
  .hero-actions {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }

  .credits-strip {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .hero-content {
    min-height: clamp(455px, 46vh, 540px) !important;
    padding-bottom: 16px !important;
  }
}


/* === V13: MOBILE HERO + TITLE REFINEMENT === */
/* Mobile/narrow screen only. Desktop remains unchanged. */

@media (max-width: 900px) {
  /* Shorten the empty space beneath Contact DNA before the studio credits.
     Keep the image visible, but do not force a huge hero height. */
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 86px !important;
    padding-bottom: 0 !important;
  }

  .hero-content {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: clamp(82px, 13vh, 130px) !important;
    align-items: start !important;
  }

  .hero-copy {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .button-row,
  .hero-actions {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }

  .credits-strip {
    margin-top: 0 !important;
  }

  /* Score panel title: one line on phone. */
  .score-portal-copy h2 {
    white-space: nowrap !important;
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(1.75rem, 6.8vw, 2.75rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
  }

  /* About heading: use the full mobile text width rather than bunching left. */
  .about-copy-wrap h2 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(3rem, 12.5vw, 5rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
  }
}

@media (max-width: 430px) {
  .hero-content {
    padding-bottom: clamp(72px, 11vh, 112px) !important;
  }

  .score-portal-copy h2 {
    font-size: clamp(1.62rem, 6.55vw, 2.35rem) !important;
  }

  .about-copy-wrap h2 {
    font-size: clamp(2.75rem, 12vw, 4.25rem) !important;
  }
}


/* === V15: MOBILE HERO BALANCED RESET === */
/* Based on V13, not V14. Keeps the good spacing, but gives the hero image a small
   amount of extra breathing room without pushing the studio credits too far down. */

@media (max-width: 900px) {
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 86px !important;
    padding-bottom: 0 !important;
  }

  .hero-content {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: clamp(96px, 9vh, 138px) !important;
    align-items: start !important;
  }

  .hero-copy {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .button-row,
  .hero-actions {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }

  .credits-strip {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .hero-content {
    padding-bottom: clamp(88px, 8vh, 122px) !important;
  }
}


/* === V16: MOBILE HERO GAP SHORTER === */
/* Phone/narrow screen only. Desktop remains unchanged.
   This specifically shortens the image/background space between Contact DNA and the studio credits. */

@media (max-width: 900px) {
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 86px !important;
    padding-bottom: 0 !important;
  }

  .hero-content {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: clamp(44px, 6vh, 72px) !important;
    align-items: start !important;
  }

  .hero-copy {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .button-row,
  .hero-actions {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }

  .credits-strip {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .hero-content {
    padding-bottom: clamp(38px, 5vh, 62px) !important;
  }
}


/* === V17: MOBILE HERO TOP BREATHING ROOM === */
/* Phone/narrow screen only. Desktop remains unchanged.
   Adds headroom between the black header and "Represented by DNA Music",
   while keeping the studio credits reasonably close below the hero. */

@media (max-width: 900px) {
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 86px !important;
    padding-bottom: 0 !important;
  }

  .hero-content {
    min-height: 0 !important;
    height: auto !important;
    padding-top: clamp(38px, 5.5vh, 64px) !important;
    padding-bottom: clamp(54px, 7vh, 86px) !important;
    align-items: start !important;
  }

  .hero-copy {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-copy .eyebrow {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  .hero h1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .hero-subtitle {
    margin-top: 14px !important;
  }

  .button-row,
  .hero-actions {
    margin-top: 30px !important;
    margin-bottom: 0 !important;
  }

  .credits-strip {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .hero-content {
    padding-top: clamp(34px, 5vh, 56px) !important;
    padding-bottom: clamp(48px, 6vh, 74px) !important;
  }

  .hero-copy .eyebrow {
    margin-bottom: 16px !important;
  }

  .button-row,
  .hero-actions {
    margin-top: 28px !important;
  }
}


/* === V18: MOBILE HERO PORTRAIT BALANCE === */
/* Phone/narrow screen only. Desktop remains unchanged.
   Places the hero text lower over the portrait, like the preferred reference,
   but avoids the very long empty top gap. */

@media (max-width: 900px) {
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 86px !important;
    padding-bottom: 0 !important;
    background-position: center top !important;
  }

  .hero-content {
    min-height: clamp(720px, 78vh, 860px) !important;
    height: auto !important;
    display: grid !important;
    align-items: start !important;
    padding-top: clamp(170px, 20vh, 230px) !important;
    padding-bottom: clamp(58px, 7vh, 90px) !important;
  }

  .hero-copy {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-copy .eyebrow {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  .hero h1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .hero-subtitle {
    margin-top: 14px !important;
  }

  .button-row,
  .hero-actions {
    margin-top: 30px !important;
    margin-bottom: 0 !important;
  }

  .credits-strip {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .hero-content {
    min-height: clamp(690px, 76vh, 820px) !important;
    padding-top: clamp(145px, 18vh, 200px) !important;
    padding-bottom: clamp(52px, 6vh, 78px) !important;
  }

  .hero-copy .eyebrow {
    margin-bottom: 16px !important;
  }
}


/* === V19: MOBILE HERO BOTTOM GAP TIGHTEN === */
/* Keeps the improved hero portrait balance, but specifically reduces only the
   space between the Contact DNA button and the studio credits on phone. */

@media (max-width: 900px) {
  .hero-content {
    padding-bottom: clamp(24px, 3.8vh, 46px) !important;
  }
}

@media (max-width: 430px) {
  .hero-content {
    padding-bottom: clamp(20px, 3.2vh, 34px) !important;
  }
}


/* === V20: MOBILE HERO HEIGHT FIX === */
/* The remaining gap was caused by a forced mobile hero min-height, not bottom padding.
   This removes that forced height while keeping the text lower over the portrait. */

@media (max-width: 900px) {
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 86px !important;
    padding-bottom: 0 !important;
  }

  .hero-content {
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    align-items: start !important;
    padding-top: clamp(170px, 20vh, 230px) !important;
    padding-bottom: clamp(28px, 4vh, 48px) !important;
  }

  .credits-strip {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .hero-content {
    min-height: 0 !important;
    height: auto !important;
    padding-top: clamp(145px, 18vh, 200px) !important;
    padding-bottom: clamp(24px, 3.5vh, 40px) !important;
  }
}


/* === V21: MOBILE TITLE BALANCE + HERO HEADROOM + CONSISTENT TITLE PUNCTUATION === */
@media (max-width: 900px) {
  /* Give the mobile hero portrait slightly more headroom. */
  .hero-image {
    background-position: 72% 35% !important;
  }

  /* Make the large section headings slightly smaller and sit more centrally
     within their content area, while staying left-aligned. */
  .about-copy-wrap,
  .contact-card {
    padding-left: clamp(24px, 5.8vw, 36px) !important;
    padding-right: clamp(24px, 5.8vw, 36px) !important;
  }

  .about-copy-wrap h2,
  .contact-card h2 {
    width: auto !important;
    max-width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(2.45rem, 10.2vw, 3.9rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
  }
}

@media (max-width: 640px) {
  .hero-image {
    background-position: 72% 33% !important;
  }

  .about-copy-wrap h2,
  .contact-card h2 {
    max-width: 95% !important;
    font-size: clamp(2.3rem, 9.7vw, 3.45rem) !important;
    line-height: 0.99 !important;
  }
}

@media (max-width: 430px) {
  .hero-image {
    background-position: 71% 31% !important;
  }

  .about-copy-wrap,
  .contact-card {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .about-copy-wrap h2,
  .contact-card h2 {
    max-width: 96% !important;
    font-size: clamp(2.15rem, 9.2vw, 3.15rem) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.04em !important;
  }
}


/* === V22: MOBILE FOOTER ONE-LINE + HERO COPY MORE CENTRAL === */
@media (max-width: 900px) {
  /* Nudge the hero copy into a slightly more central position within the portrait space. */
  .hero-copy {
    width: min(100%, 620px) !important;
    max-width: min(88vw, 620px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {
  .hero-copy {
    max-width: min(86vw, 560px) !important;
  }

  /* Footer: smaller and cleaner on phone. */
  .site-footer .container,
  footer .container,
  .footer .container {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .footer-inner {
    gap: 10px !important;
  }

  .site-footer p:first-child,
  footer p:first-child,
  .footer p:first-child {
    max-width: none !important;
    white-space: nowrap !important;
    font-size: clamp(0.76rem, 2.9vw, 0.90rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.012em !important;
  }

  .site-footer p:last-child,
  footer p:last-child,
  .footer p:last-child {
    max-width: none !important;
    font-size: clamp(0.72rem, 2.7vw, 0.84rem) !important;
    line-height: 1.2 !important;
  }

  .footer-name,
  .footer-role {
    display: inline !important;
  }

  .footer-name {
    margin-bottom: 0 !important;
  }

  .footer-name::after {
    content: ' - ';
  }
}

@media (max-width: 430px) {
  .hero-copy {
    max-width: min(84vw, 520px) !important;
  }

  .site-footer .container,
  footer .container,
  .footer .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .site-footer p:first-child,
  footer p:first-child,
  .footer p:first-child {
    font-size: clamp(0.70rem, 2.55vw, 0.80rem) !important;
  }

  .site-footer p:last-child,
  footer p:last-child,
  .footer p:last-child {
    font-size: clamp(0.68rem, 2.4vw, 0.78rem) !important;
  }
}