:root {
  /* Font controls */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --font-serif: Georgia, "Times New Roman", serif;

  /* Image text controls */
  --title-image-max-width: min(72vw, 520px);
  --brand-image-width: 172px;
  --nav-image-height: 18px;
  --button-image-height: 20px;
  --section-image-max-width: min(78vw, 460px);
  --poster-image-max-width: min(42vw, 520px);

  /* Color controls: music site */
  --color-bg: #0d0610;
  --color-bg-soft: #261128;
  --color-panel: rgba(255, 246, 243, 0.07);
  --color-panel-strong: rgba(255, 246, 243, 0.13);
  --color-text: #fff6f3;
  --color-muted: #d9d5d9;
  --color-dim: #9d8e9d;
  --color-line: rgba(230, 210, 220, 0.22);
  --color-plum: #3d1d39;
  --color-deep-plum: #16091b;
  --color-mint: #c3e8cf;
  --color-silver: #d9d5d9;
  --color-rose: #e7a7b1;
  --color-vintage-rose: #563047;
  --color-button-text: #0d0610;
  --diatom-bg: linear-gradient(transparent, transparent);

  /* Layout controls */
  --max-width: 1180px;
  --narrow-width: 760px;
  --radius-sm: 10px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --section-padding: clamp(4.5rem, 14vw, 8rem);
  --space-page: clamp(1rem, 5vw, 3rem);
  --tap-target: 44px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: #0d0610;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 22% 78%, rgba(232, 159, 176, 0.22), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.10), transparent 30%),
    linear-gradient(115deg, var(--color-bg) 0%, var(--color-bg-soft) 48%, #2d2034 100%);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: -6%;
  z-index: -1;
  pointer-events: none;
  background: var(--diatom-bg) center / cover no-repeat;
  opacity: 0.15;
  mix-blend-mode: screen;
  filter: saturate(1.12) contrast(1.08);
}

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

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--color-mint);
  color: #071109;
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 0.85rem var(--space-page);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, background 180ms ease, border-color 180ms ease, backdrop-filter 180ms ease;
}

.site-header.is-scrolled,
.site-header:focus-within {
  opacity: 1;
  pointer-events: auto;
  background: rgba(10, 6, 12, 0.78);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(18px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, var(--max-width));
  margin: 0 auto;
}

.brand {
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 5vw, 1.35rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mint);
}

.nav-toggle {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(244, 231, 229, 0.08);
  color: var(--color-text);
  cursor: pointer;
}

.nav-toggle__line {
  width: 1.1rem;
  height: 1px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}

.nav-toggle__label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-links {
  position: absolute;
  left: var(--space-page);
  right: var(--space-page);
  top: calc(100% + 0.4rem);
  display: none;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  padding: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(17, 9, 20, 0.96);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.nav-links.is-open {
  display: grid;
}

.nav-links a {
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
  padding: 0.65rem 0.85rem;
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: var(--color-panel);
  color: var(--color-text);
}

.top-section,
.section {
  scroll-margin-top: 86px;
}

.top-section {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 22% 78%, rgba(232, 159, 176, 0.34), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(115deg, #0d0610 0%, #261128 48%, #2d2034 100%);
}

/* Subtle moving background. Keep this slow and soft so it feels like wispy waves, not a screensaver. */
.top-section::before,
.top-section::after,
.wisps {
  content: "";
  position: absolute;
  inset: -22%;
  pointer-events: none;
  z-index: -2;
}

.top-section::before {
  background:
    radial-gradient(ellipse at 12% 72%, rgba(231, 167, 177, 0.36), transparent 33%),
    radial-gradient(ellipse at 78% 18%, rgba(255, 255, 255, 0.16), transparent 28%),
    radial-gradient(ellipse at 46% 52%, rgba(86, 48, 71, 0.34), transparent 34%);
  filter: blur(42px);
  opacity: 0.82;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1.02);
  animation: wisp-drift 22s ease-in-out infinite alternate;
}

.top-section::after {
  z-index: -1;
  background:
    linear-gradient(105deg, transparent 0 34%, rgba(255, 255, 255, 0.065) 42%, transparent 52% 100%),
    linear-gradient(78deg, transparent 0 42%, rgba(231, 167, 177, 0.085) 52%, transparent 62% 100%);
  filter: blur(18px);
  opacity: 0.6;
  animation: wisp-slide 28s ease-in-out infinite alternate;
}

.wisps {
  z-index: -1;
  background:
    radial-gradient(ellipse at 15% 88%, rgba(244, 231, 229, 0.18), transparent 18%),
    radial-gradient(ellipse at 52% 20%, rgba(255, 255, 255, 0.07), transparent 20%),
    radial-gradient(ellipse at 88% 65%, rgba(185, 221, 196, 0.09), transparent 22%);
  filter: blur(30px);
  mix-blend-mode: screen;
  opacity: 0.48;
  animation: wisp-breathe 18s ease-in-out infinite alternate;
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  z-index: 0;
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.05), transparent 22%, rgba(255, 255, 255, 0.03) 46%, transparent 70%),
    repeating-radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 3px);
  mix-blend-mode: soft-light;
}


.top-section .grain {
  background-image:
    var(--diatom-bg),
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(105deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px);
  background-position: center, 0 0, 0 0;
  background-size: cover, auto, auto;
  opacity: 0.14;
  mix-blend-mode: screen;
}

.top-section__poster {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-items: center;
  padding: clamp(1.25rem, 4vw, 2.6rem) var(--space-page) clamp(1rem, 4vw, 2rem);
}

.top-brand {
  justify-self: center;
  margin: 0;
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-mint);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 2rem rgba(255, 255, 255, 0.16);
}

.top-section__portrait {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: min(74vw, 29rem);
  aspect-ratio: 0.76;
  overflow: hidden;
  margin-top: clamp(1.2rem, 6vw, 4rem);
  border: 1px solid rgba(230, 210, 220, 0.22);
  border-radius: clamp(1.15rem, 2.5vw, 2.3rem);
  background: #16091b;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.38);
}

.top-section__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(13, 6, 16, 0.06), rgba(13, 6, 16, 0.12) 50%, rgba(13, 6, 16, 0.34)),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.12), transparent 30%);
  filter: none;
  pointer-events: none;
}

.top-section__portrait img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: 42% center;
  filter: saturate(0.95) contrast(1.04) brightness(0.90);
}

.poster-word {
  position: absolute;
  z-index: 3;
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  color: var(--color-mint);
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 13.5vw, 8.2rem);
  font-weight: 400;
  letter-spacing: clamp(0.06em, 1.05vw, 0.13em);
  line-height: 0.85;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28), 0 18px 70px rgba(0, 0, 0, 0.34);
  transition: color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.poster-word:hover,
.poster-word:focus-visible {
  color: var(--color-text);
  transform: translateY(-2px);
}

.poster-word--left {
  left: var(--space-page);
  top: 34%;
}

.poster-word--right {
  right: var(--space-page);
  top: 53%;
}

.poster-copy {
  position: relative;
  z-index: 4;
  justify-self: center;
  max-width: 26rem;
  margin: clamp(0.6rem, 3vw, 1.1rem) 0 0;
  color: var(--color-rose);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.6vw, 1.55rem);
  line-height: 1.15;
  text-align: center;
}

.poster-bottom-nav {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
  margin-top: clamp(1.2rem, 7vw, 3rem);
}

.poster-bottom-nav a {
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-rose);
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 3.4vw, 1.08rem);
  letter-spacing: 0.16em;
  text-transform: lowercase;
  text-align: center;
  transition: color 160ms ease, transform 160ms ease;
}

.poster-bottom-nav a:hover,
.poster-bottom-nav a:focus-visible {
  color: var(--color-mint);
  transform: translateY(-2px);
}

.eyebrow,
.section-kicker,
.card-number,
.card-type,
.caption,
.section-note,
.form-note,
.photo-tile figcaption {
  color: var(--color-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.section {
  padding: var(--section-padding) var(--space-page);
}

.section__inner {
  width: min(100%, var(--max-width));
  margin: 0 auto;
}

.section__inner--narrow {
  width: min(100%, var(--narrow-width));
  margin-left: auto;
  margin-right: auto;
}

.section__inner--split {
  display: grid;
  gap: 2rem;
}

.section-kicker {
  margin: 0 0 0.8rem;
  color: var(--color-rose);
  font-size: 0.76rem;
}

.section-title {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 10.8vw, 5.9rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mint);
}

.lead {
  margin: 0 0 1rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 6vw, 2.65rem);
  line-height: 1.12;
}

.section p:not(.section-kicker):not(.lead):not(.section-note):not(.card-number):not(.card-type):not(.contact-email):not(.form-note) {
  color: var(--color-muted);
  font-size: clamp(1rem, 3.8vw, 1.18rem);
}

.section-heading-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.section-note {
  max-width: 22rem;
  margin: 0;
  font-size: 0.76rem;
}

.button-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 2rem;
}

.btn {
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.92rem 1.15rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

.btn--primary {
  border-color: transparent;
  background: var(--color-mint);
  color: var(--color-button-text);
}

.btn--secondary,
.btn--small {
  background: rgba(244, 231, 229, 0.08);
  color: var(--color-text);
}

.btn--small {
  width: auto;
  padding-inline: 1.25rem;
}

.photo-tile,
.info-card,
.embed-panel,
.contact-form,
.event-row {
  border: 1px solid var(--color-line);
  background: var(--color-panel);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.22);
}

.card-grid {
  display: grid;
  gap: 1rem;
}

.info-card {
  min-height: 14rem;
  padding: 1.15rem;
  border-radius: var(--radius-md);
}

.info-card h3 {
  margin: 2rem 0 0.35rem;
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 8vw, 2.55rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-text);
}

.info-card p {
  margin: 0.7rem 0 0;
}

.card-number,
.card-type {
  margin: 0;
  color: var(--color-mint);
  font-size: 0.75rem;
}

.embed-panel {
  margin-top: 1.3rem;
  padding: 1rem;
  border-radius: var(--radius-md);
}

.embed-panel h3 {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-silver);
}

.embed-list {
  display: grid;
  gap: 0.75rem;
}

.embed-placeholder {
  min-height: 8rem;
  display: grid;
  place-items: center;
  gap: 0.4rem;
  padding: 1rem;
  border: 1px dashed rgba(244, 231, 229, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
  text-align: center;
}

.embed-placeholder strong {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.embed-placeholder span {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.photo-tile {
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-md);
}

.photo-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.photo-tile figcaption {
  padding: 0.65rem 0.75rem 0.75rem;
  font-size: 0.65rem;
}

.contact-email {
  margin-top: 1.35rem;
  color: var(--color-mint);
  font-family: var(--font-mono);
  word-break: break-word;
}

.contact-form {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: var(--radius-md);
}

.contact-form label {
  color: var(--color-silver);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: var(--tap-target);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
  color: var(--color-text);
  padding: 0.85rem;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid rgba(185, 221, 196, 0.45);
  outline-offset: 2px;
}

.form-note {
  margin: 0;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.04em;
}

.site-footer {
  display: grid;
  gap: 1rem;
  padding: 2rem var(--space-page) 2.5rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
}

.site-footer p {
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
}

.footer-links a {
  color: var(--color-silver);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text-image {
  display: block;
  object-fit: contain;
}

.text-image--title {
  width: var(--title-image-max-width);
}

.text-image--brand {
  width: var(--brand-image-width);
}

.text-image--nav {
  width: auto;
  height: var(--nav-image-height);
}

.text-image--button {
  width: auto;
  height: var(--button-image-height);
}

.text-image--section {
  width: var(--section-image-max-width);
}

.text-image--poster {
  width: var(--poster-image-max-width);
}

.has-image-text {
  letter-spacing: normal;
}

@keyframes wisp-drift {
  from {
    transform: translate3d(-1.5%, -0.8%, 0) rotate(-1deg) scale(1.02);
  }
  to {
    transform: translate3d(1.5%, 1.2%, 0) rotate(1deg) scale(1.08);
  }
}

@keyframes wisp-slide {
  from {
    transform: translate3d(-2%, 0, 0) skewX(-3deg);
  }
  to {
    transform: translate3d(2%, -1%, 0) skewX(3deg);
  }
}

@keyframes wisp-breathe {
  from {
    opacity: 0.34;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0.54;
    transform: scale(1.06) translateY(-1%);
  }
}

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

  .top-section::before,
  .top-section::after,
  .wisps {
    animation: none;
  }
}


@media (max-width: 699px) {
  
.top-section .grain {
  background-image:
    var(--diatom-bg),
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(105deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px);
  background-position: center, 0 0, 0 0;
  background-size: cover, auto, auto;
  opacity: 0.14;
  mix-blend-mode: screen;
}

.top-section__poster {
    padding-top: clamp(1rem, 5vw, 1.6rem);
    padding-bottom: clamp(0.9rem, 5vw, 1.4rem);
  }

  .top-section__portrait {
    width: min(72vw, 23rem);
  }

  .poster-word {
    font-size: clamp(3rem, 12.5vw, 5.15rem);
    letter-spacing: clamp(0.04em, 0.75vw, 0.1em);
  }

  .poster-word--left {
    top: 37%;
  }

  .poster-word--right {
    top: 52%;
  }
}

@media (min-width: 520px) {
  .button-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn {
    width: auto;
  }

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

@media (min-width: 700px) {
  
.top-section .grain {
  background-image:
    var(--diatom-bg),
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(105deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px);
  background-position: center, 0 0, 0 0;
  background-size: cover, auto, auto;
  opacity: 0.14;
  mix-blend-mode: screen;
}

.top-section__poster {
    padding-top: clamp(1.3rem, 2.5vw, 2.4rem);
    padding-bottom: clamp(4.7rem, 6vw, 6.25rem);
  }

  .poster-word {
    font-size: clamp(4rem, 9.4vw, 8rem);
    letter-spacing: clamp(0.05em, 0.72vw, 0.12em);
  }

  .poster-word--left,
  .poster-word--right {
    top: 47%;
    transform: translateY(-50%);
  }

  .poster-word--left {
    left: clamp(1rem, 3.2vw, 3.4rem);
  }

  .poster-word--right {
    right: clamp(1rem, 3.2vw, 3.4rem);
  }

  .poster-word:hover,
  .poster-word:focus-visible {
    transform: translateY(calc(-50% - 2px));
  }

  .top-section__portrait {
    width: min(36vw, 30rem);
    margin-top: clamp(1.25rem, 3.4vw, 2.6rem);
  }

  .poster-copy {
    position: absolute;
    left: 50%;
    bottom: clamp(4rem, 5.8vw, 5.65rem);
    width: min(32rem, 88vw);
    margin: 0;
    font-size: clamp(1.05rem, 1.7vw, 1.45rem);
    transform: translateX(-50%);
  }

  .poster-bottom-nav {
    position: absolute;
    left: var(--space-page);
    right: var(--space-page);
    bottom: clamp(0.75rem, 2vw, 1.35rem);
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    margin-top: 0;
  }
}

@media (min-width: 700px) and (max-height: 760px) {
  .top-section__portrait {
    width: min(31vw, 24rem);
    margin-top: 0.8rem;
  }

  .poster-word {
    font-size: clamp(3.55rem, 8vw, 6.55rem);
  }

  .poster-copy {
    bottom: 3.45rem;
    font-size: clamp(1rem, 1.45vw, 1.2rem);
  }

  .poster-bottom-nav {
    bottom: 0.45rem;
  }
}

@media (min-width: 820px) {
  .nav-toggle {
    display: none;
  }

  .nav-links {
    position: static;
    display: flex;
    align-items: center;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .nav-links a {
    padding-inline: 0.7rem;
    font-size: 0.9rem;
  }

  .section-heading-row,
  .section__inner--split {
    grid-template-columns: 1fr 0.9fr;
    align-items: start;
  }

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

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

  .site-footer {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (min-width: 1100px) {
  .poster-word--left {
    left: clamp(1.5rem, 3vw, 4rem);
  }

  .poster-word--right {
    right: clamp(1.5rem, 3vw, 4rem);
  }
}

/* Update: keep the top-section IG link visible and pinned to the far-right slot. */
.poster-bottom-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.poster-bottom-nav__ig {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  justify-self: end;
}

/* Separate Shows section. */
.shows-list {
  display: grid;
  gap: 0.9rem;
}

.show-card {
  display: grid;
  gap: 0.5rem;
  padding: 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.22);
}

.show-card h3 {
  margin: 0.35rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 6vw, 2.3rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-text);
}

.show-card p {
  margin: 0;
}

.show-date,
.show-meta {
  color: var(--color-mint);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.show-card p:not(.show-date):not(.show-meta) {
  color: var(--color-muted);
}

@media (min-width: 700px) {
  .poster-bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(2rem, 8vw, 10rem);
  }

  .poster-bottom-nav a {
    flex: 0 0 auto;
  }

  .poster-bottom-nav__ig {
    margin-left: auto;
  }
}

@media (min-width: 820px) {
  .shows-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Hard IG visibility fix: bio / shows / contact / ig must always be visible in the Top Section. */
.poster-bottom-nav {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(44px, 1fr)) !important;
  align-items: center;
  width: 100%;
}

.poster-bottom-nav a:nth-child(1) {
  justify-self: start;
}

.poster-bottom-nav a:nth-child(2) {
  justify-self: center;
}

.poster-bottom-nav a:nth-child(3) {
  justify-self: center;
}

.poster-bottom-nav__ig,
.poster-bottom-nav a[data-top-social="instagram"],
.poster-bottom-nav a[href*="instagram"] {
  grid-column: 4 !important;
  justify-self: end !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 44px;
  color: var(--color-rose);
}

/* Visual fallback in case an older HTML copy only has bio/shows/contact. */
.poster-bottom-nav:not(:has(.poster-bottom-nav__ig))::after {
  content: "ig";
  grid-column: 4;
  justify-self: end;
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-rose);
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 3.4vw, 1.08rem);
  letter-spacing: 0.16em;
  text-transform: lowercase;
}

@media (min-width: 700px) {
  .poster-bottom-nav {
    position: absolute;
    left: var(--space-page);
    right: var(--space-page);
    bottom: clamp(0.75rem, 2vw, 1.35rem);
    width: auto;
    margin-top: 0;
    gap: clamp(1.5rem, 6vw, 8rem);
  }
}


/* Soft plum wave motion update: more visible, still slow and soft. */
.top-section::before {
  background:
    radial-gradient(ellipse at 10% 74%, rgba(216, 154, 163, 0.46), transparent 36%),
    radial-gradient(ellipse at 78% 18%, rgba(185, 221, 196, 0.18), transparent 32%),
    radial-gradient(ellipse at 45% 58%, rgba(168, 95, 112, 0.34), transparent 42%),
    linear-gradient(120deg, transparent 0 25%, rgba(244, 231, 229, 0.06) 43%, transparent 64% 100%);
  filter: blur(46px);
  opacity: 0.9;
  transform-origin: 50% 58%;
  animation: deli-soft-tide 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.top-section::after {
  background:
    linear-gradient(108deg,
      transparent 0%,
      rgba(185, 221, 196, 0.06) 20%,
      transparent 36%,
      rgba(216, 154, 163, 0.09) 58%,
      transparent 78%),
    radial-gradient(ellipse at 14% 82%, rgba(244, 231, 229, 0.17), transparent 24%),
    radial-gradient(ellipse at 88% 18%, rgba(185, 221, 196, 0.12), transparent 27%);
  filter: blur(28px);
  opacity: 0.68;
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  animation: deli-silk-wave 30s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.wisps {
  background:
    radial-gradient(ellipse at 10% 86%, rgba(216, 154, 163, 0.34), transparent 24%),
    radial-gradient(ellipse at 54% 22%, rgba(255, 255, 255, 0.095), transparent 22%),
    radial-gradient(ellipse at 92% 64%, rgba(185, 221, 196, 0.13), transparent 25%),
    linear-gradient(88deg, transparent 0 30%, rgba(244, 231, 229, 0.07) 50%, transparent 70% 100%);
  filter: blur(30px);
  opacity: 0.62;
  mix-blend-mode: screen;
  transform-origin: 48% 60%;
  animation: deli-wisp-breath 34s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes deli-soft-tide {
  0% {
    opacity: 0.76;
    transform: translate3d(-4.5%, 1.4%, 0) rotate(-2.4deg) scale(1.07, 1.12);
  }
  50% {
    opacity: 0.98;
    transform: translate3d(2.4%, -2.2%, 0) rotate(1.3deg) scale(1.16, 1.08);
  }
  100% {
    opacity: 0.82;
    transform: translate3d(4.8%, 1.1%, 0) rotate(2.2deg) scale(1.1, 1.18);
  }
}

@keyframes deli-silk-wave {
  0% {
    opacity: 0.48;
    transform: translate3d(-5.5%, 1.8%, 0) skewX(-7deg) rotate(-1.2deg) scale(1.12);
  }
  45% {
    opacity: 0.76;
    transform: translate3d(2.8%, -1.7%, 0) skewX(4deg) rotate(0.9deg) scale(1.18);
  }
  100% {
    opacity: 0.56;
    transform: translate3d(5.8%, 1.2%, 0) skewX(7deg) rotate(1.4deg) scale(1.15);
  }
}

@keyframes deli-wisp-breath {
  0% {
    opacity: 0.46;
    transform: translate3d(-3.2%, 2.3%, 0) rotate(1.7deg) scale(1.06, 1.15);
  }
  50% {
    opacity: 0.74;
    transform: translate3d(1.8%, -2.8%, 0) rotate(-0.9deg) scale(1.16, 1.08);
  }
  100% {
    opacity: 0.52;
    transform: translate3d(3.6%, 1.1%, 0) rotate(-1.7deg) scale(1.1, 1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-section::before,
  .top-section::after,
  .wisps {
    animation: none !important;
    transform: none !important;
  }
}

/* =========================================================
   MOBILE-FIRST TOP SECTION FIX
   Keep MUSIC / PRESS completely outside the portrait.
   ========================================================= */
.top-section {
  overflow: clip;
}

.top-section__poster {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "portrait portrait"
    "music press"
    "copy copy"
    "nav nav";
  grid-template-rows: auto auto auto auto auto;
  align-content: start;
  align-items: center;
  column-gap: 0.9rem;
  row-gap: clamp(0.85rem, 3.5vw, 1.25rem);
  padding: clamp(1rem, 4vw, 1.35rem) clamp(1rem, 4.5vw, 1.4rem) clamp(1rem, 4vw, 1.35rem);
}

.top-brand {
  grid-area: title;
  position: static;
  justify-self: center;
  margin: 0 0 clamp(0.25rem, 2vw, 0.7rem);
  font-size: clamp(1.15rem, 6vw, 1.65rem);
  letter-spacing: clamp(0.2em, 1.7vw, 0.28em);
}

.top-section__portrait {
  grid-area: portrait;
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: min(78vw, 23rem);
  aspect-ratio: 4 / 5;
  margin: 0;
}

.poster-word {
  position: static;
  z-index: 3;
  width: 100%;
  min-height: var(--tap-target);
  justify-content: center;
  align-items: center;
  padding: 0.2rem 0;
  font-size: clamp(1.85rem, 10vw, 2.9rem);
  letter-spacing: clamp(0.05em, 0.8vw, 0.1em);
  line-height: 1;
  text-align: center;
  transform: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 35px rgba(0, 0, 0, 0.28);
}

.poster-word--left {
  grid-area: music;
  justify-self: stretch;
}

.poster-word--right {
  grid-area: press;
  justify-self: stretch;
}

.poster-word:hover,
.poster-word:focus-visible {
  color: var(--color-text);
  transform: translateY(-2px) scale(1.04);
}

.poster-copy {
  grid-area: copy;
  position: static;
  justify-self: center;
  width: min(100%, 28rem);
  margin: 0.15rem auto 0;
  font-size: clamp(1rem, 5.3vw, 1.35rem);
  line-height: 1.2;
  transform: none;
}

.poster-bottom-nav {
  grid-area: nav;
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(44px, 1fr)) !important;
  gap: 0.35rem;
  width: 100%;
  margin: 0.15rem 0 0;
}

.poster-bottom-nav a {
  font-size: clamp(0.78rem, 3.8vw, 0.98rem);
  letter-spacing: clamp(0.1em, 0.7vw, 0.16em);
}

/* Tablet/desktop: actual three-column composition instead of absolute text over the photo. */
@media (min-width: 700px) {
  .top-section__poster {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 32vw) minmax(0, 1fr);
    grid-template-areas:
      "title title title"
      "music portrait press"
      "copy copy copy"
      "nav nav nav";
    grid-template-rows: auto 1fr auto auto;
    align-content: center;
    column-gap: clamp(1.5rem, 3.2vw, 4rem);
    row-gap: clamp(0.85rem, 1.8vw, 1.4rem);
    padding: clamp(1.2rem, 2vw, 2rem) clamp(2rem, 4vw, 5rem) clamp(1rem, 2vw, 1.5rem);
  }

  .top-brand {
    margin-bottom: clamp(0.3rem, 1vw, 0.8rem);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
  }

  .top-section__portrait {
    width: min(32vw, 30rem);
    max-width: 100%;
    aspect-ratio: 0.76;
    margin: 0;
  }

  .poster-word {
    width: auto;
    font-size: clamp(3.25rem, 6vw, 6.8rem);
    letter-spacing: clamp(0.04em, 0.55vw, 0.1em);
    white-space: nowrap;
    transform: none;
  }

  .poster-word--left {
    justify-self: end;
  }

  .poster-word--right {
    justify-self: start;
  }

  .poster-word:hover,
  .poster-word:focus-visible {
    transform: translateY(-3px) scale(1.035);
  }

  .poster-copy {
    position: static;
    width: min(32rem, 80vw);
    margin: 0;
    font-size: clamp(1rem, 1.55vw, 1.35rem);
    transform: none;
  }

  .poster-bottom-nav {
    position: static;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(44px, 1fr)) !important;
    width: 100%;
    margin: 0;
  }
}

@media (min-width: 700px) and (max-height: 760px) {
  .top-section__poster {
    row-gap: 0.55rem;
    padding-top: 0.85rem;
    padding-bottom: 0.7rem;
  }

  .top-section__portrait {
    width: min(25vw, 21rem);
  }

  .poster-word {
    font-size: clamp(2.9rem, 5.2vw, 5.5rem);
  }

  .poster-copy {
    font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  }
}


/* =========================================================
   POLISH PASS: white top copy, calmer bio, real album links
   ========================================================= */
.poster-copy,
.poster-bottom-nav a,
.poster-bottom-nav__ig,
.poster-bottom-nav a[data-top-social="instagram"],
.poster-bottom-nav a[href*="instagram"] {
  color: #fff6f3 !important;
}

.poster-bottom-nav:not(:has(.poster-bottom-nav__ig))::after {
  color: #fff6f3;
}

.poster-bottom-nav a:hover,
.poster-bottom-nav a:focus-visible {
  color: var(--color-mint) !important;
}

/* Bio: less oversized, more editorial, easier to read on phones and desktop. */
.section--about {
  padding-top: clamp(4.25rem, 11vw, 7rem);
  padding-bottom: clamp(4.25rem, 11vw, 7rem);
}

.section--about .section__inner--narrow {
  width: min(100%, 56rem);
}

.section--about .section-title {
  margin-bottom: clamp(1.35rem, 4vw, 2rem);
}

.section--about .lead {
  max-width: 28ch;
  margin-bottom: clamp(1.15rem, 3vw, 1.6rem);
  color: #fff6f3;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 5.2vw, 2.05rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.section--about [data-config-text="artistBio"] {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 246, 243, 0.82) !important;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 3.8vw, 1.18rem) !important;
  line-height: 1.68;
  letter-spacing: 0;
}

/* Music: real platform links instead of placeholder embed boxes. */
.section--music .section-note {
  color: rgba(255, 246, 243, 0.78);
}

.info-card {
  display: flex;
  flex-direction: column;
}

.info-card > p:not(.card-number):not(.card-type) {
  line-height: 1.55;
}

.release-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 1.35rem;
}

.release-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.68rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(13, 6, 16, 0.22);
  color: #fff6f3;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.release-link:hover,
.release-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-mint);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-mint);
  outline: none;
}

@media (max-width: 699px) {
  .section--about .section-title {
    font-size: clamp(3rem, 16vw, 4.4rem);
  }

  .section--about .lead {
    max-width: 22ch;
  }

  .section--music .section-heading-row {
    gap: 0.55rem;
    margin-bottom: 1.2rem;
  }

  .info-card {
    min-height: 0;
    padding: 1.15rem;
  }

  .info-card h3 {
    margin-top: 1.5rem;
    font-size: clamp(1.8rem, 9.5vw, 2.55rem);
  }

  .release-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .release-link {
    width: 100%;
    padding-inline: 0.7rem;
    font-size: 0.69rem;
  }
}

@media (min-width: 700px) {
  .section--about .lead {
    font-size: clamp(1.75rem, 2.6vw, 2.15rem);
  }

  .section--about [data-config-text="artistBio"] {
    font-size: clamp(1.08rem, 1.4vw, 1.2rem) !important;
  }
}


/* === Album covers + floating art + direct contact === */
body {
  overflow-x: hidden;
}

.floating-art {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.floating-art__piece {
  position: absolute;
  width: clamp(90px, 16vw, 250px);
  height: auto;
  opacity: 0.075;
  filter: saturate(0.78) brightness(1.15);
  mix-blend-mode: screen;
  will-change: transform;
  animation: art-drift 24s ease-in-out infinite alternate;
}

.floating-art__piece--1 { left: -3%; top: 13%; transform: rotate(-16deg); animation-duration: 27s; }
.floating-art__piece--2 { right: -4%; top: 29%; transform: rotate(17deg); animation-duration: 31s; animation-delay: -8s; }
.floating-art__piece--3 { left: 7%; bottom: 3%; transform: rotate(11deg); animation-duration: 34s; animation-delay: -13s; }
.floating-art__piece--4 { right: 12%; top: 6%; transform: rotate(-8deg); animation-duration: 29s; animation-delay: -5s; }
.floating-art__piece--5 { left: 43%; top: 48%; transform: rotate(24deg); animation-duration: 36s; animation-delay: -18s; }
.floating-art__piece--6 { right: 26%; bottom: -5%; transform: rotate(-20deg); animation-duration: 32s; animation-delay: -11s; }

@keyframes art-drift {
  from { translate: 0 0; }
  to { translate: 18px -24px; }
}

.info-card {
  overflow: hidden;
  padding: 0;
}

.release-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
  background: rgba(0, 0, 0, 0.24);
}

.release-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -40px 70px rgba(13, 6, 16, 0.08);
}

.release-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease, filter 350ms ease;
}

.info-card:hover .release-cover img,
.info-card:focus-within .release-cover img {
  transform: scale(1.025);
  filter: brightness(1.04);
}

.release-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.15rem;
}

.release-card__body h3 {
  margin-top: 1.1rem;
}

.contact-email {
  display: inline-block;
  color: #fff6f3;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  text-underline-offset: 0.24em;
}

.contact-email:hover,
.contact-email:focus-visible {
  color: var(--color-mint);
}

.contact-direct {
  display: flex;
  min-height: 240px;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.25rem, 5vw, 2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(255, 246, 243, 0.055);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.2);
}

.contact-direct__label {
  margin: 0 !important;
  color: var(--color-rose) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}

.contact-direct__copy {
  max-width: 28ch;
  margin: 0 !important;
  color: rgba(255, 246, 243, 0.84) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.contact-direct__button {
  width: fit-content;
  min-width: 150px;
}

@media (max-width: 699px) {
  .floating-art__piece {
    width: clamp(80px, 31vw, 145px);
    opacity: 0.055;
  }

  .floating-art__piece--3,
  .floating-art__piece--6 {
    display: none;
  }

  .release-card__body {
    padding: 1.05rem;
  }

  .release-card__body h3 {
    margin-top: 0.9rem;
  }

  .contact-direct {
    min-height: 0;
  }
}

@media (min-width: 700px) {
  .release-card__body {
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-art__piece {
    animation: none;
  }
}

/* === Floating collage art: music site ===
   Two depth layers: back pieces drift behind the content; front pieces cross above it.
*/
.floating-art,
.floating-art__piece {
  display: none !important;
}

.art-field {
  position: fixed;
  inset: -8%;
  pointer-events: none;
  overflow: hidden;
}

.art-field--back { z-index: 4; }
.art-field--front { z-index: 24; }

.top-section__poster,
.section__inner,
.site-footer {
  position: relative;
  z-index: 10;
}

.site-header { z-index: 100; }

.art-piece {
  --r1: 0deg;
  --r2: 10deg;
  --dx: 42px;
  --dy: -56px;
  position: absolute;
  display: block;
  width: clamp(92px, 13vw, 220px);
  height: auto;
  opacity: 0.11;
  mix-blend-mode: screen;
  filter: saturate(0.9) brightness(1.12) drop-shadow(0 14px 36px rgba(0,0,0,.16));
  will-change: transform;
  transform: translate3d(0,0,0) rotate(var(--r1));
  animation: deli-art-drift 17s ease-in-out infinite alternate;
}

.art-field--front .art-piece {
  width: clamp(104px, 15vw, 255px);
  opacity: 0.19;
  filter: saturate(1.03) brightness(1.17) drop-shadow(0 18px 42px rgba(0,0,0,.24));
}

.art-piece--1 { left: -2%; top: 10%; --r1: -14deg; --r2: 4deg; --dx: 70px; --dy: 48px; animation-duration: 18s; }
.art-piece--2 { right: -3%; top: 21%; --r1: 18deg; --r2: -1deg; --dx: -76px; --dy: 64px; animation-duration: 22s; animation-delay: -9s; }
.art-piece--3 { left: 8%; bottom: -4%; --r1: 8deg; --r2: 25deg; --dx: 64px; --dy: -86px; animation-duration: 25s; animation-delay: -14s; }
.art-piece--4 { right: 8%; top: 3%; --r1: -10deg; --r2: -26deg; --dx: -58px; --dy: 88px; animation-duration: 20s; animation-delay: -6s; }
.art-piece--5 { left: 43%; top: 46%; --r1: 22deg; --r2: 6deg; --dx: -66px; --dy: -72px; animation-duration: 24s; animation-delay: -17s; }
.art-piece--6 { right: 24%; bottom: -7%; --r1: -22deg; --r2: -4deg; --dx: 76px; --dy: -96px; animation-duration: 24s; animation-delay: -12s; }

@keyframes deli-art-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--r1)) scale(.96); }
  38%  { transform: translate3d(calc(var(--dx) * .42), calc(var(--dy) * .36), 0) rotate(var(--r2)) scale(1.035); }
  72%  { transform: translate3d(calc(var(--dx) * .78), calc(var(--dy) * .7), 0) rotate(var(--r1)) scale(1.07); }
  100% { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--r2)) scale(1.02); }
}

@media (max-width: 699px) {
  .art-field { inset: -4%; }
  .art-piece { width: clamp(72px, 25vw, 128px); opacity: 0.09; }
  .art-field--front .art-piece { width: clamp(82px, 29vw, 148px); opacity: 0.15; }
  .art-piece--1 { left: -8%; top: 7%; }
  .art-piece--2 { right: -13%; top: 25%; }
  .art-piece--3 { left: -6%; bottom: 6%; }
  .art-piece--4 { right: -10%; top: 4%; }
  .art-piece--5 { left: 34%; top: 50%; }
  .art-piece--6 { right: 16%; bottom: -9%; }
}

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

/* === Sky Soft Brown announcement + simplified contact === */
.poster-release {
  position: relative;
  z-index: 12;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  width: min(86vw, 760px);
  margin-top: clamp(0.8rem, 2.8vw, 1.5rem);
  color: #fff6f3;
  text-align: center;
  transition: transform 220ms ease, filter 220ms ease;
}

.poster-release img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 1.2rem rgba(139, 159, 255, 0.18));
}

.poster-release span {
  margin-top: -0.45rem;
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 2.3vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 246, 243, 0.82);
}

.poster-release:hover,
.poster-release:focus-visible {
  transform: translateY(-3px) scale(1.015);
  filter: brightness(1.12);
  outline: none;
}

.section--contact {
  min-height: 54vh;
  display: grid;
  align-items: center;
}

.contact-simple {
  text-align: center;
}

.contact-simple .section-kicker {
  margin-bottom: 0.8rem;
}

.contact-simple .section-title {
  margin-bottom: clamp(1.4rem, 5vw, 2.2rem);
}

.contact-simple__email {
  display: inline-block;
  color: #fff6f3;
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 3.8vw, 1.18rem);
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 0.18rem;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.contact-simple__email:hover,
.contact-simple__email:focus-visible {
  color: var(--color-mint);
  border-bottom-color: var(--color-mint);
  transform: translateY(-2px);
  outline: none;
}

@media (max-width: 699px) {
  .poster-release {
    width: min(94vw, 620px);
    margin-top: 0.35rem;
  }

  .poster-release span {
    margin-top: -0.2rem;
  }

  .section--contact {
    min-height: 44vh;
  }
}


/* =========================================================
   FINAL LAYOUT REPAIR — Sky Soft Brown + minimal contact
   ========================================================= */
.poster-release {
  grid-area: copy;
  position: relative;
  z-index: 12;
  justify-self: center;
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: min(76vw, 360px);
  margin: 0;
  color: #fff6f3;
  text-align: center;
  transition: transform 220ms ease, filter 220ms ease;
}

.poster-release img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 1rem rgba(139, 159, 255, 0.14));
}

.poster-release span {
  margin: 0;
  color: rgba(255, 246, 243, 0.86);
  font-family: var(--font-mono);
  font-size: clamp(0.63rem, 2.6vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.poster-release:hover,
.poster-release:focus-visible {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.1);
  outline: none;
}

/* Contact is deliberately not a card. It behaves like a tiny menu. */
.section--contact {
  min-height: 42vh;
  display: grid;
  align-items: center;
  padding-top: clamp(4rem, 9vw, 6.5rem);
  padding-bottom: clamp(4rem, 9vw, 6.5rem);
}

.contact-simple {
  width: min(100%, 34rem);
  text-align: center;
}

.contact-simple .section-kicker {
  margin-bottom: 0.55rem;
}

.contact-simple .section-title {
  margin-bottom: clamp(1.4rem, 4vw, 2rem);
  font-size: clamp(2.8rem, 10vw, 5.2rem);
}

.contact-menu {
  width: min(100%, 22rem);
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
}

.contact-menu summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.15rem;
  color: #fff6f3;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.contact-menu summary::-webkit-details-marker {
  display: none;
}

.contact-menu summary::after {
  content: "+";
  color: var(--color-mint);
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.contact-menu[open] summary::after {
  content: "−";
}

.contact-menu__options {
  display: grid;
  border-top: 1px solid rgba(255, 246, 243, 0.12);
}

.contact-menu__options a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.15rem;
  border-bottom: 1px solid rgba(255, 246, 243, 0.09);
  color: rgba(255, 246, 243, 0.86);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 160ms ease, padding 160ms ease;
}

.contact-menu__options a:last-child {
  border-bottom: 0;
}

.contact-menu__options a:hover,
.contact-menu__options a:focus-visible {
  color: var(--color-mint);
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  outline: none;
}

.contact-simple__email {
  display: inline-block;
  margin-top: 1.1rem;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid rgba(255, 246, 243, 0.22);
  color: rgba(255, 246, 243, 0.62);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 3vw, 0.88rem);
  letter-spacing: 0.03em;
  transition: color 160ms ease, border-color 160ms ease;
}

.contact-simple__email:hover,
.contact-simple__email:focus-visible {
  color: #fff6f3;
  border-bottom-color: var(--color-mint);
  outline: none;
}

@media (max-width: 699px) {
  .poster-release {
    width: min(82vw, 330px);
  }

  .section--contact {
    min-height: 0;
  }

  .contact-simple .section-title {
    font-size: clamp(2.7rem, 15vw, 4.1rem);
  }
}

@media (min-width: 700px) {
  .poster-release {
    width: min(29vw, 390px);
  }
}

@media (min-width: 700px) and (max-height: 760px) {
  .poster-release {
    width: min(24vw, 300px);
  }

  .poster-release span {
    font-size: 0.66rem;
  }
}


/* =========================================================
   FINAL TOP ROW / FLOATING ART / LOWERCASE NAV PASS
   ========================================================= */

/* Fixed header labels and oversized poster words stay lowercase. */
.nav-links a,
.poster-word,
.poster-bottom-nav a {
  text-transform: lowercase !important;
}

/* Replace the old separate release/copy + nav rows with one shared row. */
.top-section__poster {
  grid-template-areas:
    "title title"
    "portrait portrait"
    "music press"
    "lower lower" !important;
  grid-template-rows: auto auto auto auto !important;
  row-gap: clamp(0.7rem, 2.6vw, 1.05rem) !important;
}

.poster-lower-row {
  grid-area: lower;
  position: relative;
  z-index: 26;
  width: min(100%, 44rem);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 1.6rem);
  margin-top: clamp(-0.8rem, -1.7vw, -0.3rem);
}

.poster-release {
  grid-area: unset !important;
  flex: 0 0 auto;
  width: clamp(108px, 31vw, 150px) !important;
  margin: 0 !important;
  transform: translateY(-3px);
}

.poster-release img {
  width: 100%;
  height: auto;
  animation: sky-soft-brown-shimmer 3.1s ease-in-out infinite;
  transform-origin: center;
}

.poster-release span {
  display: none !important;
}

@keyframes sky-soft-brown-shimmer {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) saturate(1) drop-shadow(0 0 0.7rem rgba(139, 159, 255, 0.12));
  }
  48% {
    transform: scale(1.012);
    filter: brightness(1.18) saturate(1.08) drop-shadow(0 0 1.15rem rgba(175, 188, 255, 0.30));
  }
  62% {
    transform: scale(1.004);
    filter: brightness(1.07) saturate(1.04) drop-shadow(0 0 0.9rem rgba(255, 255, 255, 0.18));
  }
}

.poster-bottom-nav {
  grid-area: unset !important;
  position: static !important;
  display: flex !important;
  flex: 0 1 auto;
  width: auto !important;
  min-width: 0;
  grid-template-columns: none !important;
  justify-content: center;
  align-items: center;
  gap: clamp(0.55rem, 2.2vw, 1.05rem) !important;
  margin: 0 !important;
  white-space: nowrap;
}

.poster-bottom-nav a {
  min-width: 0 !important;
  padding: 0.15rem 0 !important;
  font-size: clamp(0.68rem, 2.7vw, 0.9rem) !important;
  letter-spacing: clamp(0.07em, 0.45vw, 0.12em) !important;
}

/* Keep both butterflies away from the portrait/face corridor. */
.art-piece--5 {
  left: -4% !important;
  top: 53% !important;
  right: auto !important;
  bottom: auto !important;
  --dx: 38px !important;
  --dy: -34px !important;
  animation-duration: 20s !important;
}

.art-piece--6 {
  right: -4% !important;
  bottom: 4% !important;
  left: auto !important;
  top: auto !important;
  --dx: -32px !important;
  --dy: -42px !important;
  animation-duration: 19s !important;
}

/* ssb3.webp is the rabbit: deliberately keep it visible in the viewport. */
.art-piece--2 {
  right: 3% !important;
  top: 13% !important;
  left: auto !important;
  bottom: auto !important;
  width: clamp(118px, 14vw, 215px) !important;
  opacity: 0.24 !important;
  --dx: -30px !important;
  --dy: 38px !important;
  animation-duration: 18s !important;
}

@media (max-width: 699px) {
  .poster-lower-row {
    width: 100%;
    gap: clamp(0.5rem, 2.3vw, 0.85rem);
    margin-top: -0.35rem;
  }

  .poster-release {
    width: clamp(96px, 29vw, 126px) !important;
    transform: translateY(-4px);
  }

  .poster-bottom-nav {
    gap: clamp(0.4rem, 2vw, 0.7rem) !important;
  }

  .poster-bottom-nav a {
    font-size: clamp(0.62rem, 2.9vw, 0.78rem) !important;
    letter-spacing: 0.055em !important;
  }

  .art-piece--2 {
    right: -2% !important;
    top: 16% !important;
    width: clamp(90px, 27vw, 122px) !important;
    opacity: 0.22 !important;
    --dx: -18px !important;
    --dy: 30px !important;
  }

  .art-piece--5 {
    left: -14% !important;
    top: 57% !important;
    --dx: 26px !important;
    --dy: -24px !important;
  }

  .art-piece--6 {
    right: -15% !important;
    bottom: 2% !important;
    --dx: -24px !important;
    --dy: -30px !important;
  }
}

@media (min-width: 700px) {
  .top-section__poster {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 32vw) minmax(0, 1fr) !important;
    grid-template-areas:
      "title title title"
      "music portrait press"
      "lower lower lower" !important;
    grid-template-rows: auto 1fr auto !important;
    row-gap: clamp(0.6rem, 1.35vw, 1rem) !important;
  }

  .poster-lower-row {
    width: min(100%, 52rem);
    margin-top: clamp(-1.2rem, -1.5vw, -0.55rem);
  }

  .poster-release {
    width: clamp(150px, 15vw, 205px) !important;
    transform: translateY(-6px);
  }

  .poster-bottom-nav a {
    font-size: clamp(0.75rem, 1vw, 0.9rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster-release img {
    animation: none !important;
  }
}

/* =========================================================
   2026-08-26 COMPOSITION FIX
   Exact front-page logo + centered Sky Soft Brown + 5-item row
   + dedicated floating butterfly above music.
   ========================================================= */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Use the exact DIATOM DELI PNG from the front index page. */
.top-brand--image {
  width: min(74vw, 560px) !important;
  min-height: 0 !important;
  margin: 0 auto clamp(0.2rem, 1.2vw, 0.55rem) !important;
  padding: 0 !important;
  display: block !important;
  line-height: 0 !important;
}

.top-brand-mark {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 1.2rem rgba(255, 255, 255, 0.09));
}

/* One clean horizontal row: bio | shows | SSB | contact | ig.
   The center slot lines up exactly with the portrait center. */
.poster-lower-row {
  grid-area: lower !important;
  position: relative !important;
  z-index: 28 !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.25rem, 1.7vw, 1rem) !important;
  margin: clamp(-0.72rem, -1.3vw, -0.25rem) 0 0 !important;
}

.poster-lower-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #fff6f3;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 2.8vw, 0.98rem);
  letter-spacing: clamp(0.08em, 0.48vw, 0.14em);
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
  transition: color 160ms ease, transform 160ms ease;
}

.poster-lower-link:hover,
.poster-lower-link:focus-visible {
  color: var(--color-mint);
  transform: translateY(-2px);
  outline: none;
}

.poster-lower-link--bio { justify-self: start; }
.poster-lower-link--shows { justify-self: center; }
.poster-lower-link--contact { justify-self: center; }
.poster-lower-link--ig { justify-self: end; }

.poster-release {
  grid-column: 3 !important;
  justify-self: center !important;
  align-self: center !important;
  flex: none !important;
  width: clamp(108px, 29vw, 154px) !important;
  margin: 0 !important;
  transform: translateY(-7px) !important;
}

.poster-release:hover,
.poster-release:focus-visible {
  transform: translateY(-9px) scale(1.018) !important;
}

/* The new uploaded artwork is deliberately assigned to the MUSIC side.
   It floats above/around the word but stays outside Deli's portrait. */
.art-piece--music-butterfly {
  left: 4% !important;
  right: auto !important;
  top: 20% !important;
  bottom: auto !important;
  width: clamp(54px, 6.5vw, 92px) !important;
  opacity: 0.25 !important;
  --r1: -8deg !important;
  --r2: 8deg !important;
  --dx: 34px !important;
  --dy: -28px !important;
  animation-duration: 18.5s !important;
  animation-delay: -5s !important;
  filter: saturate(1.03) brightness(1.15) drop-shadow(0 16px 36px rgba(0,0,0,.20)) !important;
}

@media (max-width: 699px) {
  .top-brand--image {
    width: min(82vw, 430px) !important;
    margin-bottom: 0.2rem !important;
  }

  .poster-lower-row {
    gap: clamp(0.16rem, 1.15vw, 0.45rem) !important;
    margin-top: -0.48rem !important;
  }

  .poster-lower-link {
    font-size: clamp(0.59rem, 2.75vw, 0.76rem);
    letter-spacing: 0.055em;
  }

  .poster-release {
    width: clamp(92px, 26vw, 124px) !important;
    transform: translateY(-6px) !important;
  }

  .poster-release:hover,
  .poster-release:focus-visible {
    transform: translateY(-8px) scale(1.015) !important;
  }

  .art-piece--music-butterfly {
    left: -1% !important;
    top: 28% !important;
    width: clamp(42px, 13vw, 62px) !important;
    opacity: 0.22 !important;
    --dx: 22px !important;
    --dy: -20px !important;
  }
}

@media (min-width: 700px) {
  .top-brand--image {
    width: min(48vw, 590px) !important;
  }

  .poster-lower-row {
    width: min(100%, 72rem) !important;
    justify-self: center !important;
    gap: clamp(0.7rem, 2.4vw, 2rem) !important;
    margin-top: clamp(-1rem, -1.2vw, -0.45rem) !important;
  }

  .poster-lower-link {
    font-size: clamp(0.78rem, 1vw, 0.96rem);
  }

  .poster-release {
    width: clamp(148px, 14vw, 205px) !important;
    transform: translateY(-10px) !important;
  }

  .poster-release:hover,
  .poster-release:focus-visible {
    transform: translateY(-12px) scale(1.018) !important;
  }

  .art-piece--music-butterfly {
    left: clamp(3%, 6vw, 8%) !important;
    top: 20% !important;
  }
}

/* =========================================================
   FINAL HEADER + FIRST-VIEW ROW FIX — 2026-08-26
   Handwritten Diatom Deli PNG is STATIC.
   bio | shows | Sky Soft Brown | contact | ig is one even row
   and remains visible in the first viewport.
   ========================================================= */

/* Keep the handwritten title completely separate from the floating-art system. */
.top-brand--image {
  position: relative !important;
  z-index: 30 !important;
  width: min(66vw, 690px) !important;
  height: clamp(58px, 8.5svh, 92px) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  transform: none !important;
  animation: none !important;
}

.top-brand-mark {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  animation: none !important;
  filter: drop-shadow(0 0 1rem rgba(101, 122, 255, 0.14)) !important;
}

/* Keep the whole opening composition inside the initial viewport on desktop. */
.top-section__poster {
  min-height: 100svh !important;
  height: 100svh !important;
  padding-top: clamp(0.55rem, 1.4svh, 0.95rem) !important;
  padding-bottom: clamp(0.3rem, 1svh, 0.65rem) !important;
}

/* One evenly distributed row. Sky Soft Brown owns the exact center column. */
.poster-lower-row {
  width: min(100%, 78rem) !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-12px) !important;
}

.poster-lower-link,
.poster-lower-link--bio,
.poster-lower-link--shows,
.poster-lower-link--contact,
.poster-lower-link--ig {
  justify-self: center !important;
  min-height: 38px !important;
  padding: 0 clamp(0.15rem, 0.8vw, 0.45rem) !important;
  font-size: clamp(0.72rem, 1vw, 0.94rem) !important;
  letter-spacing: clamp(0.08em, 0.35vw, 0.14em) !important;
  white-space: nowrap !important;
}

.poster-release {
  grid-column: 3 !important;
  justify-self: center !important;
  align-self: center !important;
  width: clamp(116px, 11vw, 160px) !important;
  margin: 0 !important;
  transform: none !important;
}

.poster-release:hover,
.poster-release:focus-visible {
  transform: scale(1.018) !important;
}

/* Dedicated butterfly above the music word. It remains floating. */
.art-piece--music-butterfly {
  left: clamp(7%, 10vw, 13%) !important;
  right: auto !important;
  top: 27% !important;
  bottom: auto !important;
  width: clamp(68px, 7vw, 108px) !important;
  opacity: 0.28 !important;
  --r1: -12deg !important;
  --r2: 10deg !important;
  --dx: 38px !important;
  --dy: -25px !important;
  animation-duration: 17s !important;
  animation-delay: -4s !important;
}

@media (min-width: 700px) {
  .top-section__poster {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 30vw) minmax(0, 1fr) !important;
    grid-template-areas:
      "title title title"
      "music portrait press"
      "lower lower lower" !important;
    grid-template-rows: clamp(62px, 9svh, 98px) minmax(0, 1fr) clamp(84px, 12svh, 116px) !important;
    row-gap: 0 !important;
  }

  .top-section__portrait {
    grid-area: portrait !important;
    align-self: center !important;
    justify-self: center !important;
    width: auto !important;
    height: min(59svh, 555px) !important;
    max-height: calc(100svh - 205px) !important;
    aspect-ratio: 0.76 !important;
    margin: 0 !important;
  }

  .poster-lower-row {
    grid-area: lower !important;
    align-self: start !important;
    transform: translateY(-18px) !important;
  }

  .poster-release {
    width: clamp(122px, 10vw, 164px) !important;
  }
}

/* Mobile: still one line, but compact enough to fit without wrapping. */
@media (max-width: 699px) {
  .top-section__poster {
    grid-template-areas:
      "title title"
      "portrait portrait"
      "music press"
      "lower lower" !important;
    grid-template-rows: clamp(58px, 9svh, 78px) minmax(0, 1fr) auto clamp(70px, 11svh, 90px) !important;
    row-gap: 0.25rem !important;
  }

  .top-brand--image {
    width: min(88vw, 560px) !important;
    height: clamp(54px, 8svh, 72px) !important;
  }

  .top-section__portrait {
    width: auto !important;
    height: min(52svh, 470px) !important;
    max-height: calc(100svh - 225px) !important;
    aspect-ratio: 0.76 !important;
    margin: 0 auto !important;
  }

  .poster-lower-row {
    grid-template-columns: 1fr 1fr minmax(72px, 0.9fr) 1fr 1fr !important;
    transform: translateY(-8px) !important;
  }

  .poster-lower-link,
  .poster-lower-link--bio,
  .poster-lower-link--shows,
  .poster-lower-link--contact,
  .poster-lower-link--ig {
    min-height: 32px !important;
    padding: 0 0.08rem !important;
    font-size: clamp(0.54rem, 2.45vw, 0.7rem) !important;
    letter-spacing: 0.045em !important;
  }

  .poster-release {
    width: clamp(70px, 20vw, 94px) !important;
  }

  .art-piece--music-butterfly {
    left: 1% !important;
    top: 26% !important;
    width: clamp(50px, 14vw, 68px) !important;
    opacity: 0.24 !important;
    --dx: 24px !important;
    --dy: -18px !important;
  }
}

/* Final sizing correction: make the handwritten PNG read as the actual title,
   and keep the quick-link row immediately beneath the portrait rather than
   letting a flexible grid row push it below the fold. */
.top-brand--image {
  width: min(56vw, 540px) !important;
  height: auto !important;
  aspect-ratio: 2040 / 646 !important;
}

.top-brand-mark {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

@media (min-width: 700px) {
  .top-section__poster {
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    row-gap: 0 !important;
  }

  .top-brand--image {
    margin-bottom: clamp(-0.3rem, -0.4vw, 0rem) !important;
  }

  .top-section__portrait {
    height: min(55svh, 520px) !important;
    max-height: calc(100svh - 245px) !important;
  }

  .poster-lower-row {
    align-self: start !important;
    transform: translateY(-10px) !important;
  }
}

@media (max-width: 699px) {
  .top-brand--image {
    width: min(88vw, 390px) !important;
    height: auto !important;
    aspect-ratio: 2040 / 646 !important;
  }

  .top-section__poster {
    grid-template-rows: auto auto auto auto !important;
    align-content: start !important;
  }

  .top-section__portrait {
    height: min(48svh, 430px) !important;
    max-height: calc(100svh - 250px) !important;
  }

  .poster-lower-row {
    transform: translateY(-6px) !important;
  }
}

/* =========================================================
   2026-08-26 SCALE / DENSITY / SKY SOFT BROWN POLISH
   Mobile-first overrides. Uses more of the first viewport while
   keeping the five-item lower row intact and readable.
   ========================================================= */

/* Static mint title: same palette as music / press. */
.top-brand--image,
.top-brand-mark {
  animation: none !important;
  transform: none !important;
}

.top-brand-mark {
  filter: drop-shadow(0 0 1.15rem rgba(255, 255, 255, 0.14)) !important;
}

/* Mobile-first sizing: slightly larger portrait, less unused air. */
.top-section__poster {
  min-height: 100svh !important;
  height: auto !important;
  align-content: start !important;
  padding-top: clamp(0.45rem, 1.6svh, 0.8rem) !important;
  padding-bottom: clamp(0.7rem, 2svh, 1.1rem) !important;
  row-gap: clamp(0.2rem, 0.9svh, 0.45rem) !important;
}

.top-brand--image {
  width: min(91vw, 420px) !important;
  margin: 0 auto clamp(0.15rem, 0.8svh, 0.35rem) !important;
}

.top-section__portrait {
  width: min(80vw, 344px) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 0.76 !important;
  margin: 0 auto !important;
}

/* Push this row DOWN from the portrait instead of tucking it under it. */
.poster-lower-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(88px, 1.12fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 0 !important;
  margin-top: clamp(0.7rem, 2.6svh, 1.15rem) !important;
  transform: none !important;
  align-self: start !important;
}

.poster-lower-link,
.poster-lower-link--bio,
.poster-lower-link--shows,
.poster-lower-link--contact,
.poster-lower-link--ig {
  min-height: 34px !important;
  padding: 0 0.08rem !important;
  font-size: clamp(0.57rem, 2.55vw, 0.72rem) !important;
  letter-spacing: 0.05em !important;
}

/* Sky Soft Brown is a little larger and shimmers without bobbing around. */
.poster-release {
  width: clamp(88px, 24vw, 112px) !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

.poster-release img {
  animation: sky-soft-shimmer 3.4s ease-in-out infinite !important;
  transform-origin: center !important;
  will-change: filter, opacity !important;
}

.poster-release:hover,
.poster-release:focus-visible {
  transform: scale(1.025) !important;
}

@keyframes sky-soft-shimmer {
  0%, 100% {
    opacity: 0.91;
    filter:
      brightness(1.00)
      saturate(1.02)
      drop-shadow(0 0 0.35rem rgba(139, 159, 255, 0.16));
  }
  48% {
    opacity: 1;
    filter:
      brightness(1.23)
      saturate(1.16)
      drop-shadow(0 0 0.85rem rgba(255, 255, 255, 0.24))
      drop-shadow(0 0 1.35rem rgba(139, 159, 255, 0.22));
  }
  62% {
    opacity: 0.96;
    filter:
      brightness(1.10)
      saturate(1.08)
      drop-shadow(0 0 0.55rem rgba(255, 246, 243, 0.15));
  }
}

/* Extra SB collage pieces. They are intentionally quiet so density goes up
   without turning the page into visual clutter. */
.art-piece--8 {
  left: 16%;
  top: 6%;
  width: clamp(62px, 18vw, 112px) !important;
  opacity: 0.075 !important;
  --r1: 15deg;
  --r2: -7deg;
  --dx: 42px;
  --dy: 36px;
  animation-duration: 20s !important;
  animation-delay: -8s !important;
}

.art-piece--9 {
  right: 6%;
  bottom: 10%;
  width: clamp(66px, 20vw, 118px) !important;
  opacity: 0.08 !important;
  --r1: -12deg;
  --r2: 7deg;
  --dx: -44px;
  --dy: -40px;
  animation-duration: 23s !important;
  animation-delay: -15s !important;
}

.art-piece--10 {
  left: -5%;
  top: 62%;
  width: clamp(56px, 17vw, 106px) !important;
  opacity: 0.12 !important;
  --r1: 7deg;
  --r2: -13deg;
  --dx: 34px;
  --dy: -46px;
  animation-duration: 18s !important;
  animation-delay: -10s !important;
}

.art-piece--11 {
  right: -4%;
  top: 47%;
  width: clamp(58px, 18vw, 110px) !important;
  opacity: 0.11 !important;
  --r1: -8deg;
  --r2: 12deg;
  --dx: -36px;
  --dy: 42px;
  animation-duration: 21s !important;
  animation-delay: -4s !important;
}

/* Keep the butterfly above music visible but away from Deli's portrait. */
.art-piece--music-butterfly {
  left: -1% !important;
  top: 24% !important;
  width: clamp(52px, 15vw, 72px) !important;
  opacity: 0.25 !important;
}

/* Desktop/tablet grows the composition proportionally rather than just
   creating more blank margins. */
@media (min-width: 700px) {
  .top-section__poster {
    height: 100svh !important;
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    padding-top: clamp(0.5rem, 1.2svh, 0.8rem) !important;
    padding-bottom: clamp(0.4rem, 1svh, 0.7rem) !important;
  }

  .top-brand--image {
    width: min(58vw, 590px) !important;
    margin-bottom: clamp(0.15rem, 0.7svh, 0.4rem) !important;
  }

  .top-section__portrait {
    width: auto !important;
    height: min(63svh, 590px) !important;
    max-height: calc(100svh - 215px) !important;
    aspect-ratio: 0.76 !important;
  }

  .poster-lower-row {
    width: min(100%, 80rem) !important;
    margin-top: clamp(0.65rem, 1.8svh, 1.05rem) !important;
  }

  .poster-lower-link,
  .poster-lower-link--bio,
  .poster-lower-link--shows,
  .poster-lower-link--contact,
  .poster-lower-link--ig {
    min-height: 38px !important;
    font-size: clamp(0.76rem, 0.95vw, 0.94rem) !important;
    letter-spacing: clamp(0.08em, 0.3vw, 0.14em) !important;
  }

  .poster-release {
    width: clamp(154px, 12vw, 192px) !important;
  }

  .art-piece--8 {
    left: 21%;
    top: 8%;
    width: clamp(100px, 8vw, 150px) !important;
    opacity: 0.08 !important;
  }

  .art-piece--9 {
    right: 9%;
    bottom: 8%;
    width: clamp(105px, 9vw, 160px) !important;
    opacity: 0.085 !important;
  }

  .art-piece--10 {
    left: 1%;
    top: 64%;
    width: clamp(90px, 7.5vw, 145px) !important;
    opacity: 0.13 !important;
  }

  .art-piece--11 {
    right: 1%;
    top: 43%;
    width: clamp(92px, 8vw, 150px) !important;
    opacity: 0.12 !important;
  }

  .art-piece--music-butterfly {
    left: clamp(5%, 8vw, 10%) !important;
    top: 25% !important;
    width: clamp(72px, 6.5vw, 106px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster-release img {
    animation: none !important;
  }
}


/* =========================================================
   2026-08-26 INTERACTION / SHOWS / PRESS KIT UPDATE
   ========================================================= */

/* The portrait is the shuffle trigger. Keep the hint very quiet. */
.top-section__portrait[data-art-shuffle-trigger] {
  cursor: pointer;
  outline: none;
}

.top-section__portrait[data-art-shuffle-trigger]:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.72),
    0 2rem 6rem rgba(0, 0, 0, 0.38);
}

.portrait-shuffle-hint {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  z-index: 3;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(13, 6, 16, 0.44);
  color: rgba(255, 246, 243, 0.58);
  font-family: var(--font-mono);
  font-size: clamp(0.52rem, 1.8vw, 0.66rem);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: lowercase;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
  backdrop-filter: blur(7px);
}

.top-section__portrait:hover .portrait-shuffle-hint,
.top-section__portrait:focus-visible .portrait-shuffle-hint {
  opacity: 1;
}

/* Quick positional snap when Deli's portrait is clicked. The normal drift
   resumes immediately after the short relocation transition. */
.art-piece {
  transition:
    left 260ms cubic-bezier(.2,.9,.2,1),
    top 260ms cubic-bezier(.2,.9,.2,1),
    opacity 160ms ease;
}

.art-piece.is-shuffling {
  animation-play-state: paused !important;
  opacity: max(0.16, var(--shuffle-opacity, 0.16));
}

.art-field--front .art-piece.is-shuffling {
  opacity: 0.24;
}

/* Shows: explicit September date + November tour. */
.show-card {
  min-height: 11rem;
  align-content: start;
}

.show-series {
  margin: 0 !important;
  color: var(--color-rose) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.show-card .show-date {
  margin-top: 0.15rem;
}

/* Press: one clear Press Kit action, then the False Alarm video. */
.section--press .section__inner {
  width: min(100%, 66rem);
}

.press-kit-action {
  display: flex;
  justify-content: center;
  margin: clamp(0.4rem, 2vw, 1rem) 0 clamp(2.3rem, 7vw, 4.8rem);
}

.press-kit-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-mint);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 6vw, 2rem);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: lowercase;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.press-kit-button:hover,
.press-kit-button:focus-visible {
  transform: translateY(-2px) scale(1.02);
  background: rgba(255, 255, 255, 0.14);
  color: #fff6f3;
  outline: none;
}

.music-video-block {
  width: 100%;
}

.music-video-block__label {
  margin: 0 0 0.75rem !important;
  color: rgba(255, 246, 243, 0.7) !important;
  font-family: var(--font-mono) !important;
  font-size: clamp(0.65rem, 2.4vw, 0.8rem) !important;
  letter-spacing: 0.13em !important;
  text-transform: lowercase !important;
}

.video-embed {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: clamp(1rem, 3vw, 1.7rem);
  background: #070409;
  box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.3);
}

.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (max-width: 699px) {
  .portrait-shuffle-hint {
    display: none;
  }

  .show-card {
    min-height: 0;
  }

  .press-kit-action {
    justify-content: flex-start;
    margin-bottom: 2.2rem;
  }

  .press-kit-button {
    width: 100%;
    font-size: clamp(1.25rem, 7vw, 1.7rem);
  }

  .video-embed {
    border-radius: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-piece {
    transition-duration: 0ms !important;
  }
}

/* ==========================================================
   PRESS POLISH — selected coverage + robust False Alarm player
   ========================================================== */
.section--press .section__inner {
  width: min(100%, 74rem);
}

.press-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.8rem);
}

.press-title {
  margin: 0;
  color: var(--color-mint);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 11vw, 7.4rem);
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 0.85;
  text-transform: lowercase;
}

.press-heading .press-kit-button {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  margin: 0 0 0.15rem;
  padding: 0.72rem 1rem;
  font-size: clamp(0.92rem, 2vw, 1.15rem);
  letter-spacing: 0.08em;
}

.press-coverage {
  display: grid;
  gap: 0.8rem;
}

.press-feature,
.press-story {
  position: relative;
  color: inherit;
  text-decoration: none;
}

.press-feature {
  min-height: clamp(13rem, 28vw, 18rem);
  display: grid;
  align-content: space-between;
  padding: clamp(1.25rem, 3.5vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: clamp(1rem, 2.5vw, 1.55rem);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.13), transparent 32%),
    linear-gradient(135deg, rgba(19, 10, 20, 0.78), rgba(73, 35, 63, 0.54));
  box-shadow: 0 1.7rem 5.5rem rgba(0, 0, 0, 0.16);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.press-feature::after {
  content: "↗";
  position: absolute;
  top: 1rem;
  right: 1.15rem;
  color: rgba(255, 246, 243, 0.55);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  transition: transform 180ms ease, color 180ms ease;
}

.press-feature:hover,
.press-feature:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.5);
  outline: none;
}

.press-feature:hover::after,
.press-feature:focus-visible::after {
  transform: translate(3px, -3px);
  color: var(--color-mint);
}

.press-feature__source {
  color: var(--color-mint);
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 10vw, 6.4rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: lowercase;
}

.press-feature__title {
  align-self: end;
  color: #fff6f3;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.5vw, 2.3rem);
  line-height: 1;
}

.press-feature__meta {
  color: rgba(255, 246, 243, 0.62);
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 2vw, 0.78rem);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.press-links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}

.press-story {
  min-height: 8.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 0.6rem 1rem;
  padding: 1.15rem 1.15rem 1.2rem;
  border-top: 1px solid rgba(255, 246, 243, 0.2);
  border-bottom: 1px solid rgba(255, 246, 243, 0.1);
  background: rgba(255, 246, 243, 0.025);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.press-story:hover,
.press-story:focus-visible {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.34);
  outline: none;
}

.press-story__source {
  color: var(--color-rose);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: lowercase;
}

.press-story__title {
  max-width: 27rem;
  align-self: end;
  color: #fff6f3;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  line-height: 1.05;
}

.press-story__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--color-mint);
  font-size: 1rem;
}

.music-video-block {
  margin-top: clamp(4rem, 10vw, 7.5rem);
}

.music-video-block__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.music-video-block__eyebrow {
  margin: 0 0 0.25rem !important;
  color: var(--color-rose) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 700;
  letter-spacing: 0.14em !important;
  text-transform: lowercase !important;
}

.music-video-block__title {
  margin: 0;
  color: var(--color-mint);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 4.7rem);
  font-weight: 400;
  line-height: 0.9;
}

.music-video-block__youtube {
  padding-bottom: 0.25rem;
  color: rgba(255, 246, 243, 0.75);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: lowercase;
}

.music-video-block__youtube:hover,
.music-video-block__youtube:focus-visible {
  color: var(--color-mint);
  outline: none;
}

.video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: clamp(1rem, 2.5vw, 1.6rem);
  background: #070409;
  box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.28);
}

.video-player iframe,
.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-poster {
  display: block;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: #070409;
}

.video-poster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.02);
  transform: scale(1.015);
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), filter 300ms ease;
}

.video-poster__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 4, 10, 0.04), rgba(9, 4, 10, 0.44)),
    radial-gradient(circle at center, transparent 22%, rgba(25, 10, 24, 0.15) 100%);
}

.video-poster__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.05rem;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  background: rgba(21, 8, 19, 0.54);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 180ms ease, background 180ms ease;
}

.video-poster__play b {
  color: var(--color-mint);
  font-size: 0.82rem;
  font-weight: 400;
}

.video-poster:hover img,
.video-poster:focus-visible img {
  transform: scale(1.045);
  filter: saturate(0.95) contrast(1.05);
}

.video-poster:hover .video-poster__play,
.video-poster:focus-visible .video-poster__play {
  transform: translate(-50%, -50%) scale(1.045);
  background: rgba(21, 8, 19, 0.68);
}

.video-poster:focus-visible {
  outline: 2px solid var(--color-mint);
  outline-offset: -4px;
}

.video-local-note {
  max-width: 44rem;
  margin: 0.75rem 0 0 !important;
  color: rgba(255, 246, 243, 0.54) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.64rem !important;
  line-height: 1.55;
}

@media (min-width: 700px) {
  .press-links-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .press-story {
    min-height: 10.5rem;
  }
}

@media (max-width: 699px) {
  .press-heading {
    align-items: flex-start;
  }

  .press-heading .press-kit-button {
    min-height: 40px;
    padding: 0.62rem 0.8rem;
    font-size: 0.82rem;
  }

  .press-feature {
    min-height: 12rem;
  }

  .music-video-block {
    margin-top: 4.25rem;
  }
}


/* ==========================================================
   2026-08-26 — VISUAL PRESS / 3 VIDEO / EXTRA COLLAGE POLISH
   Mobile-first. These rules intentionally override the older press cards.
   ========================================================== */

/* Additional floating collage density without adding new asset files. */
.art-piece--12 {
  left: 14%; top: 34%;
  width: clamp(58px, 17vw, 110px) !important;
  opacity: 0.075 !important;
  --r1: -17deg; --r2: 9deg; --dx: 48px; --dy: -36px;
  animation-duration: 19s !important; animation-delay: -5s !important;
}
.art-piece--13 {
  right: 13%; top: 72%;
  width: clamp(62px, 18vw, 116px) !important;
  opacity: 0.07 !important;
  --r1: 12deg; --r2: -8deg; --dx: -52px; --dy: 40px;
  animation-duration: 22s !important; animation-delay: -13s !important;
}
.art-piece--14 {
  left: 5%; top: 82%;
  width: clamp(64px, 19vw, 122px) !important;
  opacity: 0.13 !important;
  --r1: 6deg; --r2: 18deg; --dx: 46px; --dy: -48px;
  animation-duration: 18s !important; animation-delay: -9s !important;
}
.art-piece--15 {
  right: 4%; top: 58%;
  width: clamp(60px, 18vw, 118px) !important;
  opacity: 0.12 !important;
  --r1: -13deg; --r2: 5deg; --dx: -42px; --dy: 44px;
  animation-duration: 20s !important; animation-delay: -2s !important;
}

/* Press becomes visual editorial/browser snapshots, not generic copy cards. */
.press-editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(1.4rem, 5vw, 2.4rem);
}

.editorial-card {
  display: grid;
  gap: 0.55rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.editorial-window {
  overflow: hidden;
  border: 1px solid rgba(255, 246, 243, 0.17);
  border-radius: 0.9rem;
  background: #f3f0eb;
  box-shadow: 0 1.4rem 4rem rgba(0,0,0,.2);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.editorial-card:hover .editorial-window,
.editorial-card:focus-visible .editorial-window {
  transform: translateY(-4px) rotate(-0.2deg);
  border-color: rgba(195,232,207,.42);
  box-shadow: 0 1.8rem 4.8rem rgba(0,0,0,.28);
}
.editorial-card:focus-visible { outline: none; }

.editorial-window__chrome {
  height: 1.55rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .65rem;
  background: #d7d3cd;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.editorial-window__chrome span {
  width: .42rem; height: .42rem; border-radius: 50%; background: rgba(0,0,0,.2);
}

.editorial-window__page {
  min-height: 15rem;
  color: #111;
  overflow: hidden;
}

.press-masthead { line-height: .9; }
.press-masthead--pitchfork {
  padding: .8rem .9rem .72rem;
  border-bottom: 3px solid #111;
  font-family: Arial Black, Arial, sans-serif;
  font-size: clamp(2rem, 10vw, 4.3rem);
  font-weight: 900;
  letter-spacing: -.08em;
}
.pitchfork-preview { background: #fff; }
.pitchfork-preview__body {
  display: grid;
  grid-template-columns: minmax(6.5rem, 42%) 1fr;
  gap: .9rem;
  padding: .85rem;
  align-items: start;
}
.pitchfork-preview__body img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pitchfork-preview__body > div { display: grid; gap: .22rem; }
.editorial-label {
  font: 700 .56rem/1.2 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: #6c6c6c;
}
.pitchfork-preview strong {
  font: 700 clamp(1.15rem, 5vw, 2rem)/.98 Georgia, serif;
  letter-spacing: -.03em;
}
.pitchfork-preview span:not(.editorial-label) { font: 600 .72rem/1.25 Arial, sans-serif; }
.pitchfork-preview small { margin-top: .35rem; font: .58rem/1.25 Arial, sans-serif; color: #666; }

.slug-preview { padding: .9rem; background: #f7f3e9; }
.press-masthead--slug {
  font-family: Impact, Haettenschweiler, Arial Narrow Bold, sans-serif;
  font-size: clamp(3.5rem, 17vw, 7rem);
  letter-spacing: -.06em;
}
.slug-preview__rule { height: .22rem; margin: .1rem 0 .75rem; background: #111; }
.slug-preview > strong {
  display: block; margin-top: .45rem;
  font: 700 clamp(1.25rem, 5vw, 1.9rem)/1.02 Arial, sans-serif;
}
.slug-preview__bottom {
  display: grid; grid-template-columns: 4.4rem 1fr; gap: .7rem; align-items: end; margin-top: .8rem;
}
.slug-preview__bottom img { width: 4.4rem; aspect-ratio: 1; object-fit: cover; }
.slug-preview__bottom small { font: .64rem/1.35 var(--font-mono); color: #555; }

.spill-preview { padding: .9rem; background: #111; color: #fff; }
.spill-preview__top { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.press-masthead--spill {
  font-family: Arial Black, Arial, sans-serif;
  font-size: clamp(1.8rem, 8vw, 3.5rem);
  letter-spacing: -.07em;
}
.spill-score {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: #fff; color: #111; font: 900 1rem/1 Arial, sans-serif;
}
.spill-preview > img {
  width: 48%; max-width: 8rem; aspect-ratio: 1; object-fit: cover; margin: .7rem 0;
}
.spill-preview > strong { display: block; font: 700 1.05rem/1.08 Arial, sans-serif; }
.spill-preview > small { display: block; margin-top: .38rem; font: .6rem/1.2 var(--font-mono); color: #bdbdbd; }

.aoty-preview { padding: .8rem; background: #f6f6f6; }
.press-masthead--aoty { font: 900 1rem/1 Arial, sans-serif; letter-spacing: -.02em; border-bottom: 2px solid #111; padding-bottom: .5rem; }
.aoty-preview__body { display: grid; grid-template-columns: 5.2rem 1fr; gap: .8rem; align-items: center; margin-top: .75rem; }
.aoty-preview__body img { width: 5.2rem; aspect-ratio: 1; object-fit: cover; }
.aoty-preview__body > div { display: grid; }
.aoty-preview__body span { font: 700 .55rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: #777; }
.aoty-preview__body strong { font: 900 3.4rem/.9 Arial, sans-serif; }
.aoty-preview__body small { font: .58rem/1.2 Arial, sans-serif; color: #666; }
.aoty-preview__scores { display: grid; gap: .22rem; margin-top: .7rem; font: .62rem/1.2 Arial, sans-serif; }
.aoty-preview__scores span { display: flex; justify-content: space-between; border-top: 1px solid #ccc; padding-top: .25rem; }

.rvng-preview { position: relative; min-height: 15rem; background: #151515; }
.rvng-preview > img { width: 100%; height: 15rem; object-fit: cover; object-position: center 32%; filter: saturate(.75) contrast(1.04); }
.rvng-preview__overlay {
  position: absolute; inset: auto 0 0; display: grid; gap: .18rem; padding: 1.25rem .9rem .9rem;
  background: linear-gradient(transparent, rgba(0,0,0,.88)); color: #fff;
}
.press-masthead--rvng { font: 900 clamp(1.6rem, 7vw, 2.8rem)/.9 Arial, sans-serif; letter-spacing: -.06em; }
.rvng-preview__overlay strong { font: 700 1rem/1.1 Arial, sans-serif; }
.rvng-preview__overlay small { font: .6rem/1 var(--font-mono); color: #d6d6d6; }

.editorial-card__footer {
  display: flex; justify-content: space-between; gap: .7rem; align-items: baseline;
  padding: 0 .15rem; color: rgba(255,246,243,.8); font: .62rem/1.2 var(--font-mono);
  letter-spacing: .04em; text-transform: lowercase;
}
.editorial-card__footer b { color: var(--color-mint); font-weight: 700; }

/* Newest video first. Keep every video on one horizontal row and scroll across for older videos. */
.music-video-block { margin-top: clamp(3.5rem, 12vw, 7rem); }
.video-gallery {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.35rem);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 .85rem;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.video-gallery .video-player {
  flex: 0 0 calc((100% - (2 * clamp(1rem, 1.5vw, 1.35rem))) / 3);
  width: auto;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: .95rem;
  scroll-snap-align: start;
}

@media (max-width: 899px) {
  .video-gallery .video-player {
    flex-basis: min(72vw, 34rem);
  }
}

@media (max-width: 599px) {
  .video-gallery {
    gap: .85rem;
    padding-bottom: .65rem;
  }

  .video-gallery .video-player {
    flex-basis: 86vw;
  }
}
.video-poster__play {
  width: 3.4rem; height: 3.4rem; display: grid; place-items: center; padding: 0;
  border-color: rgba(255,255,255,.72); background: rgba(13,6,16,.48);
}
.video-poster__play b { font-size: 1rem; transform: translateX(.08rem); }
.video-poster__corner {
  position: absolute; left: .75rem; top: .7rem; z-index: 2;
  padding: .3rem .5rem; border-radius: 999px; background: rgba(13,6,16,.56);
  color: rgba(255,255,255,.88); font: 700 .58rem/1 var(--font-mono);
  letter-spacing: .08em; text-transform: lowercase; backdrop-filter: blur(6px);
}
.video-local-note { display: none !important; }

/* Long city/state names should remain clean on mobile. */
.show-card h3 { font-size: clamp(1.35rem, 6vw, 2.25rem); line-height: 1.02; }
.show-card { min-height: 9.5rem; }

@media (min-width: 640px) {
  .press-editorial-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .editorial-card--pitchfork { grid-column: 1 / -1; }
  .pitchfork-preview__body { grid-template-columns: minmax(10rem, 35%) 1fr; }
}

@media (min-width: 980px) {
  .press-editorial-grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1.15rem; }
  .editorial-card--pitchfork { grid-column: span 7; }
  .editorial-card--slug { grid-column: span 5; }
  .editorial-card--spill { grid-column: span 4; }
  .editorial-card--aoty { grid-column: span 4; }
  .editorial-card--rvng { grid-column: span 4; }
  .editorial-window__page { min-height: 17rem; }
  .rvng-preview, .rvng-preview > img { min-height: 17rem; height: 17rem; }

  .art-piece--12 { left: 27%; top: 38%; width: clamp(90px, 7vw, 145px) !important; }
  .art-piece--13 { right: 24%; top: 78%; width: clamp(95px, 7.5vw, 150px) !important; }
  .art-piece--14 { left: 11%; top: 85%; width: clamp(95px, 7.5vw, 150px) !important; }
  .art-piece--15 { right: 10%; top: 59%; width: clamp(92px, 7vw, 145px) !important; }
}

/* =========================================================
   FINAL QUICK-LINK ROW SCALE
   Mobile-first. Keep bio / shows / Sky Soft Brown / contact / ig
   visible on one line at every width, but make the whole row
   easier to read and tap.
   ========================================================= */
.poster-lower-row {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(100px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
}

.poster-lower-link,
.poster-lower-link--bio,
.poster-lower-link--shows,
.poster-lower-link--contact,
.poster-lower-link--ig {
  min-height: 40px !important;
  padding-inline: 0.06rem !important;
  font-size: clamp(0.64rem, 2.8vw, 0.80rem) !important;
  letter-spacing: 0.045em !important;
  white-space: nowrap !important;
}

.poster-release {
  width: clamp(100px, 27vw, 126px) !important;
}

@media (max-width: 360px) {
  .poster-lower-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(94px, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .poster-lower-link,
  .poster-lower-link--bio,
  .poster-lower-link--shows,
  .poster-lower-link--contact,
  .poster-lower-link--ig {
    font-size: clamp(0.60rem, 2.75vw, 0.70rem) !important;
    letter-spacing: 0.025em !important;
  }

  .poster-release {
    width: clamp(94px, 29vw, 108px) !important;
  }
}

@media (min-width: 700px) {
  .poster-lower-row {
    width: min(100%, 82rem) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(172px, 1.18fr) repeat(2, minmax(0, 1fr)) !important;
  }

  .poster-lower-link,
  .poster-lower-link--bio,
  .poster-lower-link--shows,
  .poster-lower-link--contact,
  .poster-lower-link--ig {
    min-height: 44px !important;
    font-size: clamp(0.84rem, 1.08vw, 1.04rem) !important;
    letter-spacing: clamp(0.08em, 0.28vw, 0.13em) !important;
  }

  .poster-release {
    width: clamp(172px, 13vw, 214px) !important;
  }
}

/* =========================================================
   SKY SOFT BROWN — ALWAYS-ON RELEASE CUE
   Mobile-first: subtle motion + glow even before hover/click.
   ========================================================= */
.poster-release img {
  animation: sky-soft-invite 2.85s ease-in-out infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform, filter, opacity !important;
}

@keyframes sky-soft-invite {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.94;
    filter:
      brightness(1.02)
      saturate(1.03)
      drop-shadow(0 0 0.38rem rgba(139, 159, 255, 0.16));
  }
  42% {
    transform: translate3d(0, -2px, 0) scale(1.018);
    opacity: 1;
    filter:
      brightness(1.22)
      saturate(1.14)
      drop-shadow(0 0 0.82rem rgba(255, 255, 255, 0.28))
      drop-shadow(0 0 1.2rem rgba(139, 159, 255, 0.24));
  }
  58% {
    transform: translate3d(0, -1px, 0) scale(1.008);
    opacity: 0.98;
    filter:
      brightness(1.10)
      saturate(1.08)
      drop-shadow(0 0 0.55rem rgba(255, 246, 243, 0.18));
  }
}

.poster-release:hover img,
.poster-release:focus-visible img {
  filter:
    brightness(1.28)
    saturate(1.17)
    drop-shadow(0 0 0.95rem rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 1.5rem rgba(139, 159, 255, 0.28)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .poster-release img {
    animation: none !important;
    filter: brightness(1.08) drop-shadow(0 0 0.7rem rgba(255, 255, 255, 0.20)) !important;
  }
}

/* =========================================================
   DJ HERO LINK — equal visual weight with MUSIC
   ========================================================= */
.poster-word--dj {
  font-size: clamp(2.55rem, 13vw, 4rem) !important;
  letter-spacing: 0.045em !important;
  font-weight: 400 !important;
}

@media (min-width: 700px) {
  .poster-word--dj {
    font-size: clamp(4.4rem, 7.2vw, 7.9rem) !important;
    transform: translateX(-0.08em);
  }
  .poster-word--dj:hover,
  .poster-word--dj:focus-visible {
    transform: translateX(-0.08em) translateY(-3px) scale(1.045) !important;
  }
}

@media (max-width: 380px) {
  .poster-word--dj {
    font-size: clamp(2.3rem, 12vw, 3.15rem) !important;
  }
}


/* =========================================================
   2026-08-26 — FRONT COLLAGE: MORE RABBITS + SQUIGGLES
   Mobile-first. Reuses existing ssb3 rabbit + ssb4 spiral art.
   Slightly faster drift while keeping each piece out of sync.
   ========================================================= */

/* Speed up the existing collage a little without making it frantic. */
.art-piece--1  { animation-duration: 15.2s !important; }
.art-piece--2  { animation-duration: 18.2s !important; }
.art-piece--3  { animation-duration: 19.8s !important; }
.art-piece--4  { animation-duration: 16.8s !important; }
.art-piece--5  { animation-duration: 19.2s !important; }
.art-piece--6  { animation-duration: 19.4s !important; }
.art-piece--8  { animation-duration: 16.4s !important; }
.art-piece--9  { animation-duration: 18.2s !important; }
.art-piece--10 { animation-duration: 14.8s !important; }
.art-piece--11 { animation-duration: 17.1s !important; }
.art-piece--12 { animation-duration: 15.7s !important; }
.art-piece--13 { animation-duration: 17.9s !important; }
.art-piece--14 { animation-duration: 14.9s !important; }
.art-piece--15 { animation-duration: 16.3s !important; }

/* Extra rabbits / squiggles — phone layout first. */
.art-piece--16 {
  left: -7%; top: 40%;
  width: clamp(72px, 22vw, 128px) !important;
  opacity: 0.10 !important;
  --r1: -12deg; --r2: 10deg; --dx: 54px; --dy: -42px;
  animation-duration: 15.5s !important; animation-delay: -7s !important;
}
.art-piece--17 {
  right: -10%; top: 67%;
  width: clamp(68px, 21vw, 122px) !important;
  opacity: 0.09 !important;
  --r1: 16deg; --r2: -9deg; --dx: -52px; --dy: 46px;
  animation-duration: 17.2s !important; animation-delay: -12s !important;
}
.art-piece--18 {
  left: 2%; top: 70%;
  width: clamp(78px, 23vw, 136px) !important;
  opacity: 0.15 !important;
  --r1: -8deg; --r2: 14deg; --dx: 50px; --dy: -54px;
  animation-duration: 14.8s !important; animation-delay: -4s !important;
}
.art-piece--19 {
  right: -6%; top: 35%;
  width: clamp(80px, 24vw, 140px) !important;
  opacity: 0.145 !important;
  --r1: 9deg; --r2: -12deg; --dx: -58px; --dy: 48px;
  animation-duration: 16.1s !important; animation-delay: -10s !important;
}
.art-piece--20 {
  left: 20%; top: 13%;
  width: clamp(64px, 19vw, 112px) !important;
  opacity: 0.075 !important;
  --r1: 13deg; --r2: -4deg; --dx: 46px; --dy: 38px;
  animation-duration: 18s !important; animation-delay: -14s !important;
}
.art-piece--21 {
  right: 20%; top: 84%;
  width: clamp(70px, 20vw, 118px) !important;
  opacity: 0.12 !important;
  --r1: -15deg; --r2: 7deg; --dx: -44px; --dy: -46px;
  animation-duration: 15.9s !important; animation-delay: -6s !important;
}

/* Press replaces IG in the five-column quick-link row, keeping identical sizing. */
.poster-lower-link--press {
  min-height: 40px !important;
  white-space: nowrap !important;
}

@media (min-width: 700px) {
  .art-piece--16 { left: 3%; top: 37%; width: clamp(100px, 7.8vw, 150px) !important; opacity: 0.095 !important; }
  .art-piece--17 { right: 4%; top: 69%; width: clamp(96px, 7.4vw, 145px) !important; opacity: 0.085 !important; }
  .art-piece--18 { left: 7%; top: 73%; width: clamp(108px, 8.4vw, 160px) !important; opacity: 0.145 !important; }
  .art-piece--19 { right: 4%; top: 31%; width: clamp(112px, 8.8vw, 166px) !important; opacity: 0.14 !important; }
  .art-piece--20 { left: 27%; top: 12%; width: clamp(88px, 6.8vw, 132px) !important; opacity: 0.07 !important; }
  .art-piece--21 { right: 28%; top: 86%; width: clamp(102px, 7.7vw, 148px) !important; opacity: 0.115 !important; }
  .poster-lower-link--press { min-height: 44px !important; }
}


/* =========================================================
   2026-08-26 — ADD NEW USER PNG FLOATERS
   Added standing rabbit, side rabbit, alt spiral, and alt butterfly.
   Mobile-first positions; desktop overrides below.
   ========================================================= */
.art-piece--22 {
  left: -6%; top: 56%;
  width: clamp(74px, 22vw, 132px) !important;
  opacity: 0.09 !important;
  --r1: -9deg; --r2: 8deg; --dx: 46px; --dy: -56px;
  animation-duration: 16.1s !important; animation-delay: -11s !important;
}
.art-piece--23 {
  right: 18%; top: 8%;
  width: clamp(62px, 18vw, 108px) !important;
  opacity: 0.085 !important;
  --r1: 10deg; --r2: -5deg; --dx: -42px; --dy: 36px;
  animation-duration: 14.6s !important; animation-delay: -5s !important;
}
.art-piece--24 {
  right: -8%; top: 46%;
  width: clamp(88px, 26vw, 150px) !important;
  opacity: 0.10 !important;
  --r1: -6deg; --r2: 5deg; --dx: -48px; --dy: 42px;
  animation-duration: 17.3s !important; animation-delay: -14s !important;
}
.art-piece--25 {
  left: 12%; top: 16%;
  width: clamp(80px, 23vw, 138px) !important;
  opacity: 0.13 !important;
  --r1: -12deg; --r2: 8deg; --dx: 48px; --dy: -38px;
  animation-duration: 13.9s !important; animation-delay: -7s !important;
}
.art-piece--26 {
  right: 8%; top: 78%;
  width: clamp(70px, 20vw, 124px) !important;
  opacity: 0.115 !important;
  --r1: 8deg; --r2: -10deg; --dx: -42px; --dy: -44px;
  animation-duration: 15.4s !important; animation-delay: -9s !important;
}
.art-piece--27 {
  left: 36%; top: 10%;
  width: clamp(68px, 19vw, 112px) !important;
  opacity: 0.10 !important;
  --r1: 14deg; --r2: -8deg; --dx: 36px; --dy: 42px;
  animation-duration: 15.0s !important; animation-delay: -13s !important;
}
.art-piece--28 {
  left: 6%; top: 83%;
  width: clamp(82px, 24vw, 144px) !important;
  opacity: 0.11 !important;
  --r1: -4deg; --r2: 7deg; --dx: 40px; --dy: -48px;
  animation-duration: 16.8s !important; animation-delay: -6s !important;
}

@media (min-width: 700px) {
  .art-piece--22 { left: 9%; top: 52%; width: clamp(108px, 8.2vw, 155px) !important; opacity: 0.082 !important; }
  .art-piece--23 { right: 22%; top: 10%; width: clamp(78px, 6.2vw, 118px) !important; opacity: 0.075 !important; }
  .art-piece--24 { right: 2%; top: 44%; width: clamp(132px, 10.2vw, 195px) !important; opacity: 0.098 !important; }
  .art-piece--25 { left: 14%; top: 14%; width: clamp(116px, 8.8vw, 170px) !important; opacity: 0.12 !important; }
  .art-piece--26 { right: 12%; top: 76%; width: clamp(94px, 7.3vw, 142px) !important; opacity: 0.102 !important; }
  .art-piece--27 { left: 41%; top: 8%; width: clamp(84px, 6.6vw, 126px) !important; opacity: 0.092 !important; }
  .art-piece--28 { left: 5%; top: 84%; width: clamp(112px, 8.9vw, 168px) !important; opacity: 0.102 !important; }
}


/* =========================================================
   2026-08-26 — TRANQUILO II MINI PLAYER
   Small Apple Music preview/player in the opening composition.
   Mobile-first; does not cover the portrait or quick links.
   ========================================================= */
.tranquilo-player {
  position: relative;
  z-index: 12;
  justify-self: center;
  width: min(88vw, 320px);
  margin: clamp(0.65rem, 2.8vw, 1.05rem) auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 16px;
  background: rgba(13, 6, 16, 0.55);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(12px);
}

.tranquilo-player__label {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.65rem;
  color: rgba(255, 246, 243, 0.82);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
}

.tranquilo-player__label > span:last-child {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}

.tranquilo-player__label b {
  color: var(--color-mint);
  font-weight: 700;
  white-space: nowrap;
}

.tranquilo-player__label small {
  color: rgba(255, 246, 243, 0.48);
  font-size: 0.58rem;
  white-space: nowrap;
}

.tranquilo-player__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-rose);
  box-shadow: 0 0 0.8rem rgba(231, 167, 177, 0.55);
  animation: tranquilo-dot 2.4s ease-in-out infinite alternate;
}

.tranquilo-player iframe {
  display: block;
  width: 100%;
  height: 150px;
  border: 0;
  background: transparent;
}

@keyframes tranquilo-dot {
  from { opacity: 0.50; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1.08); }
}

@media (min-width: 700px) {
  .tranquilo-player {
    position: absolute;
    left: clamp(2rem, 8vw, 9rem);
    bottom: clamp(4.8rem, 8.5vh, 6.8rem);
    width: clamp(260px, 20vw, 330px);
    margin: 0;
  }

  .tranquilo-player iframe {
    height: 145px;
  }
}

@media (max-width: 420px) {
  .tranquilo-player {
    width: min(92vw, 305px);
  }

  .tranquilo-player iframe {
    height: 145px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tranquilo-player__dot { animation: none !important; }
}


/* =========================================================
   2026-08-26 — TINY TRANQUILO II PLAYER
   Upper-right, play/pause first. Mobile-first.
   ========================================================= */
.tranquilo-player { display: none !important; }

.tranquilo-mini {
  position: absolute;
  z-index: 35;
  top: 0.75rem;
  right: 0.75rem;
  width: auto;
  max-width: calc(100vw - 1.5rem);
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.32rem 0.48rem 0.32rem 0.34rem;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  background: rgba(13, 6, 16, 0.62);
  box-shadow: 0 0.5rem 1.6rem rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(12px);
}

.tranquilo-mini__button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: var(--color-mint);
  color: #0d0610;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.tranquilo-mini__button:hover,
.tranquilo-mini__button:focus-visible {
  transform: scale(1.06);
  outline: none;
  box-shadow: 0 0 1.1rem rgba(255, 255, 255, 0.30);
}
.tranquilo-mini__button.is-playing {
  background: #fff6f3;
}

.tranquilo-mini__icon {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  transform: translateX(1px);
}
.tranquilo-mini__button.is-playing .tranquilo-mini__icon { transform: none; }

.tranquilo-mini__text {
  min-width: 0;
  display: grid;
  gap: 0;
  padding-right: 0.12rem;
  font-family: var(--font-mono);
  line-height: 1.1;
}
.tranquilo-mini__text b {
  color: var(--color-mint);
  font-size: 0.59rem;
  white-space: nowrap;
}
.tranquilo-mini__text span {
  color: rgba(255, 246, 243, 0.48);
  font-size: 0.49rem;
  white-space: nowrap;
}

.tranquilo-mini__status {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.tranquilo-mini__status.is-ready {
  background: var(--color-rose);
  box-shadow: 0 0 0.6rem rgba(231, 167, 177, .45);
}

@media (min-width: 700px) {
  .tranquilo-mini {
    top: clamp(1rem, 2vw, 1.6rem);
    right: clamp(1rem, 2.4vw, 2.1rem);
    min-height: 46px;
    gap: 0.58rem;
    padding: 0.36rem 0.58rem 0.36rem 0.38rem;
  }
  .tranquilo-mini__button {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
  }
  .tranquilo-mini__text b { font-size: 0.64rem; }
  .tranquilo-mini__text span { font-size: 0.52rem; }
}

@media (max-width: 430px) {
  .tranquilo-mini__text span { display: none; }
  .tranquilo-mini__text b { font-size: 0.54rem; }
  .tranquilo-mini { gap: 0.38rem; }
}

/* ============================================================
   SITE CREDITS — David Bailey / Cory Feder
   Desktop: upper-left.
   Mobile: centered just above the poster navigation.
   ============================================================ */
.site-credit-rotator {
  position: fixed;
  top: 1.75rem;
  left: 2rem;
  z-index: 90;
  width: min(24rem, calc(100vw - 4rem));
  height: 1.35rem;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.35rem;
  letter-spacing: 0.055em;
  color: rgba(255, 255, 255, 0.56);
}

.site-credit {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  white-space: nowrap;
  opacity: 0;
}

.site-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.30);
  pointer-events: auto;
  transition: color 220ms ease, border-color 220ms ease;
}

.site-credit a:hover,
.site-credit a:focus-visible {
  color: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.76);
  outline: none;
}

.site-credit--design {
  animation: site-credit-design 22s ease-in-out infinite;
}

.site-credit--illustrations {
  animation: site-credit-illustrations 22s ease-in-out infinite;
}

@keyframes site-credit-design {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  43%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes site-credit-illustrations {
  0%   { opacity: 0; visibility: hidden; }
  48%  { opacity: 0; visibility: hidden; }
  55%  { opacity: 1; visibility: visible; }
  92%  { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}


.site-credit--design {
  pointer-events: none;
}

.site-credit--illustrations {
  visibility: hidden;
}

.site-credit--illustrations a {
  pointer-events: auto;
}

@media (max-width: 699px) {
  .site-credit-rotator {
    top: auto;
    left: 50%;
    bottom: 4.9rem;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    height: 1.2rem;
    text-align: center;
    font-size: clamp(0.52rem, 2.15vw, 0.63rem);
    line-height: 1.2rem;
    letter-spacing: 0.035em;
  }

  .site-credit {
    inset: 0;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-credit--design {
    animation: none;
    opacity: 1;
  }

  .site-credit--illustrations {
    display: none;
    animation: none;
  }
}

/* ============================================================
   2026-08-28 — MOBILE CREDIT + PLAYER PLACEMENT
   Credit is physically in the poster grid so it always stays
   directly beneath Deli's portrait. On phones the Tranquilo
   control collapses to one small play/pause button.
   ============================================================ */
@media (max-width: 699px) {
  .top-section__poster {
    grid-template-areas:
      "title title"
      "portrait portrait"
      "credit credit"
      "music press"
      "lower lower" !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-content: start !important;
  }

  .site-credit-rotator {
    grid-area: credit !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    justify-self: center !important;
    align-self: start !important;
    width: calc(100% - 1.5rem) !important;
    height: 1.2rem !important;
    margin: clamp(0.22rem, 0.8svh, 0.42rem) auto clamp(0.05rem, 0.35svh, 0.2rem) !important;
    text-align: center !important;
    z-index: 36 !important;
  }

  .site-credit {
    inset: 0 !important;
    text-align: center !important;
  }

  /* Leave a clean right-side pocket for the single player button. */
  .top-brand--image {
    width: min(82vw, 380px) !important;
  }

  .tranquilo-mini {
    top: 0.55rem !important;
    right: 0.55rem !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .tranquilo-mini__button {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-width: 1px !important;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.18) !important;
  }

  .tranquilo-mini__icon {
    font-size: 0.68rem !important;
  }

  .tranquilo-mini__text,
  .tranquilo-mini__status {
    display: none !important;
  }
}



/* Bio desktop width polish */
@media (min-width: 900px) {
  .section--about .section__inner--narrow {
    width: min(100%, 68rem);
  }

  .section--about .lead {
    max-width: 42ch;
    line-height: 1.16;
  }
}


/* clickable press title */
.press-title a {
  color: inherit;
  text-decoration: none;
  font: inherit;
}

.press-title a:hover,
.press-title a:focus-visible {
  color: inherit;
}

/* Tour flyer replaces individual show cards */
.tour-flyer-wrap {
  width: min(100%, 46rem);
  margin: clamp(1rem, 3vw, 2rem) auto 0;
}

.tour-flyer {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
  border-radius: clamp(0.8rem, 1.6vw, 1.15rem);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.28);
}

@media (max-width: 599px) {
  .tour-flyer-wrap {
    width: 100%;
    margin-top: 1rem;
  }

  .tour-flyer {
    border-radius: 0.8rem;
  }
}