/* ============================================================
   LAGOSNOIR — mobile-first responsive stylesheet
   ============================================================ */

:root {
  --bg:            #0c0a11;
  --bg-elevated:   #14111c;
  --bg-card:       #17131f;
  --line:          rgba(255, 255, 255, 0.08);
  --text:          #ece9f1;
  --text-dim:      #9a93a8;
  --text-faint:    #6b6479;
  --accent:        #8b5cf6;
  --accent-bright: #a880ff;
  --accent-soft:   rgba(139, 92, 246, 0.18);
  --radius:        14px;
  --maxw:          1100px;
  --rail-w:        54px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

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

/* ---------- Shared bits ---------- */
.eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  font-weight: 600;
  margin-bottom: 0.65rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-bright); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.btn--spotify { margin-bottom: 1.4rem; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
}

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.65rem 1rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60; /* above .mobile-nav (55) so the toggle stays clickable to close */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  background: rgba(12, 10, 17, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.logo {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
}
.header-actions { display: flex; align-items: center; gap: 1.1rem; }
.cart { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-dim); }
.cart:hover { color: var(--text); }
.cart-count { font-size: 0.78rem; }

.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.menu-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--text);
  transition: transform .25s, opacity .25s;
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Mobile nav overlay ---------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5.5rem 2rem 2.5rem;
  background: rgba(9, 7, 13, 0.94);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility flips instantly on open (so links are focusable at once) but is
     delayed to the end of the fade on close, keeping the panel present while it
     fades out. */
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

.mobile-nav__list { list-style: none; }
.mobile-nav__list li {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(12px);
}
.mobile-nav.is-open .mobile-nav__list li {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease, transform .4s ease;
}
/* staggered entrance */
.mobile-nav.is-open .mobile-nav__list li:nth-child(1) { transition-delay: .06s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(2) { transition-delay: .12s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(3) { transition-delay: .18s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(4) { transition-delay: .24s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(5) { transition-delay: .30s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(6) { transition-delay: .36s; }

.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 0.2rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  transition: color .2s, padding-left .2s;
}
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible { color: var(--accent-bright); padding-left: 0.5rem; }
.mobile-nav__ext { font-size: 0.9rem; color: var(--text-dim); }

.mobile-nav__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.mobile-nav__foot a {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mobile-nav__foot a:hover { color: var(--accent-bright); }

/* Lock background scroll while the menu is open */
body.nav-open { overflow: hidden; }

/* On large screens the side rails provide navigation, so the overlay content
   is capped and left-aligned to a comfortable column. */
@media (min-width: 700px) {
  .mobile-nav__inner { max-width: 460px; margin: 0 auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav.is-open .mobile-nav__list li { transition: none; }
  .mobile-nav__list li { opacity: 1; transform: none; }
}

/* ---------- Side rails ---------- */
.side-rail {
  display: none;
  position: fixed;
  top: 50%;
  z-index: 40;
  font-size: 0.66rem;
  letter-spacing: 0.4em;
  font-weight: 600;
  color: var(--text-dim);
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}
.side-rail:hover { color: var(--accent-bright); }
.side-rail--left  { left: 1rem;  transform: translateY(-50%) rotate(180deg); }
.side-rail--right { right: 1rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 2.5rem 1.25rem 3rem;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 35%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 35%, transparent 75%);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12,10,17,0.2) 0%, rgba(12,10,17,0.1) 50%, var(--bg) 100%);
}
.hero-content { position: relative; z-index: 2; }
.hero-title {
  font-weight: 600;
  font-size: clamp(2.4rem, 11vw, 5rem);
  letter-spacing: 0.18em;
  line-height: 1;
  margin-bottom: 0.9rem;
  text-indent: 0.18em;
}
.hero-tagline {
  font-size: clamp(0.58rem, 2.6vw, 0.78rem);
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 11rem;
}
.hero-lede {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  line-height: 1.9;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1.4rem;
}
.hero-actions .btn { width: 100%; max-width: 260px; }
.hero-note {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.hero-chevron {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--text-dim);
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- Latest release ---------- */
.latest-card {
  display: grid;
  gap: 1.4rem;
}
.latest-cover a { display: block; }
.latest-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  transition: transform .2s, box-shadow .2s;
}
/* Album art is the hero content, so it renders at full fidelity — unlike the
   decorative social tiles, which are dimmed into the palette. */
.latest-cover a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.latest-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.latest-meta {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 0.3rem 0 1.1rem;
}

.tracklist { list-style: none; }
.track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.track:last-child { border-bottom: none; }
.track:hover { background: rgba(255,255,255,0.03); }
.track-num { color: var(--text-faint); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.track-time { color: var(--text-dim); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.track--active { background: var(--accent-soft); }
.track--active .track-name,
.track--active .track-time { color: var(--accent-bright); }
.track--active .track-num { color: var(--accent-bright); }
.track--active .track-num::before {
  content: '▶ ';
  font-size: 0.6rem;
}

.eyebrow--player { margin-top: 0.4rem; }

/* Bandcamp embed. Height matches Bandcamp's own sizing for
   size=large + artwork=small + tracklist=false. */
.bandcamp-embed {
  display: block;
  width: 100%;
  height: 120px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #333;
}
.btn--bandcamp {
  width: 100%;
  margin-top: 0.9rem;
}
.player-note {
  margin-top: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}
/* Secondary "also on <service>" link — used by the Spotify slot once a real
   URL exists. */
.also-on {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.6rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
 /* color: var(--text-dim); */
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: color .2s, border-color .2s;
}
.also-on:hover { color: var(--text); border-color: rgba(255,255,255,0.22); }

/* ---------- Two-column grid (merch + shows) ---------- */
.grid-2 { display: grid; gap: 1rem; }

/* Merch */
.merch-card {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  display: flex;
  align-items: flex-end;
}
.merch-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.merch-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(100deg, #000 35%, transparent 90%);
          mask-image: linear-gradient(100deg, #000 35%, transparent 90%);
}
.merch-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--bg-card) 30%, transparent 85%);
}
.merch-text { position: relative; z-index: 2; }
.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 14ch;
}
.merch-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0.6rem 0 1.1rem;
}

/* Shows */
.shows-card { position: relative; overflow: hidden; padding: 0; }
.shows-bg { position: absolute; inset: 0; z-index: 0; }
.shows-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(260deg, #000 10%, transparent 85%);
          mask-image: linear-gradient(260deg, #000 10%, transparent 85%);
}
.shows-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--bg-card) 35%, transparent 100%);
}
.shows-inner { position: relative; z-index: 2; padding: 1.4rem; }
.show-list { list-style: none; }
.show {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.show-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  min-width: 2.4rem;
}
.show-mon { font-size: 0.58rem; letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; }
.show-day { font-size: 1.25rem; font-weight: 600; }
.show-place { display: flex; flex-direction: column; }
.show-city { font-size: 0.88rem; font-weight: 500; }
.show-venue { font-size: 0.72rem; color: var(--text-dim); }
.show-tickets {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
  display: inline-flex;
  gap: 0.35rem;
  white-space: nowrap;
}
.show-tickets:hover { color: var(--accent-bright); }
.shows-all {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--accent-bright);
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Newsletter ---------- */
.newsletter-card { position: relative; overflow: hidden; }
.newsletter-bg { position: absolute; inset: 0; z-index: 0; }
.newsletter-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
.newsletter-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(23,19,31,0.7) 100%);
}
.newsletter-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.newsletter-desc {
  font-size: 0.84rem;
  color: var(--text-dim);
  margin-top: 0.3rem;
}
/* The newsletter form keeps Brevo's required DOM wrappers (see index.html),
   so the original one-row look is rebuilt with flexbox over that structure:
   email + button share row 1, the captcha wraps onto row 2. */
.newsletter-form-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-start;
}
/* Basis kept small so the field + button still share one row at 375px
   (card inner width ~297px, button ~134px) as in the original design. */
.nl-field   { flex: 1 1 110px; min-width: 0; }
.nl-submit  { flex: 0 0 auto; }
.nl-captcha { flex: 1 1 100%; }

#sib-container .input {
  width: 100%;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
}
#sib-container .input::placeholder { color: var(--text-faint); }
#sib-container .input:focus { outline: none; border-color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer {
  max-width: var(--maxw);
  margin: 1.5rem auto 0;
  padding: 1.5rem 1rem 2.5rem;
}
.socials {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}
/* Social tiles. The artwork is brighter and more saturated than the rest of
   the page, so it is dimmed and slightly desaturated to sit back into the
   noir palette, then brought to full strength on hover. */
.social { display: block; position: relative; }
.social img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  filter: brightness(0.68) saturate(0.78);
  transition: filter .28s, border-color .2s, transform .15s;
}
.social::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 10, 17, 0.18), rgba(12, 10, 17, 0.52));
  transition: opacity .28s;
}
.social:hover img {
  filter: brightness(1) saturate(1);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.social:hover::after { opacity: 0; }
.copyright {
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ============================================================
   Tablet  ≥ 680px
   ============================================================ */
@media (min-width: 680px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .newsletter-inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .newsletter-copy { flex: 1; }
  .nl-form-wrap { flex: 1; max-width: 420px; }
  .newsletter-form { flex-wrap: nowrap; }
  .socials { grid-template-columns: repeat(4, 1fr); max-width: 640px; margin-inline: auto; }
}

/* ============================================================
   Desktop  ≥ 960px
   ============================================================ */
@media (min-width: 960px) {
  :root { --maxw: 1000px; }

  .side-rail { display: block; }

  .hero { padding: 3.5rem 1.25rem 4rem; min-height: 78vh; display: flex; align-items: center; justify-content: center; }
  .hero-tagline { margin-bottom: 9rem; }
  .hero-actions { flex-direction: row; justify-content: center; }
  .hero-actions .btn { width: auto; }

  /* Latest: cover + tracklist on the left, player on the right */
  .latest-card {
    grid-template-columns: 150px 1fr;
    grid-template-areas:
      "cover info"
      "player player";
    align-items: start;
    column-gap: 1.6rem;
    padding: 1.8rem;
  }
  .latest-cover  { grid-area: cover; }
  .latest-cover img { width: 150px; height: 150px; }
  .latest-info   { grid-area: info; }
  .latest-player { grid-area: player; margin-top: 0.5rem; }

  .merch-card { min-height: 250px; }
}

/* ============================================================
   Brevo forms — functional rules only
   Brevo's sib-styles.css is intentionally NOT loaded on this site,
   so nothing here is an "override" — the site's own styling above
   is never fought over. These are only the rules Brevo's main.js
   depends on, reproduced locally.
   ============================================================ */

/* Success/error panels are hidden by default and revealed by main.js, which
   REVEALS them by adding the class .sib-form-message-panel--active (it does not
   set an inline style). Both the default-hide and the active-reveal rule live in
   the "Success / error panels" block below — Brevo's own CSS would supply the
   reveal rule, but that CSS is not loaded, so we must. */

/* Honeypot anti-spam field — must never render or be fillable. */
.input--hidden { display: none !important; }

/* Brevo layout containers carry no styling of their own here. */
.sib-form, .sib-form-container, #sib-container { display: block; }
#sib-container .form__entry,
#sib-container .form__label-row,
#sib-container .entry_block { margin: 0; padding: 0; }

/* Submit-button loader. main.js toggles .sib-hide-loader-icon on this <svg>
   to show a spinner while posting, so the element must exist and must be
   hidden by default (Brevo's own CSS, which would do this, is not loaded). */
#sib-container .sib-form-block__button svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  animation: sib-spin 0.9s linear infinite;
}
#sib-container .sib-form-block__button svg.sib-hide-loader-icon { display: none; }
#sib-container .sib-form-block__button-disabled { opacity: 0.65; cursor: default; }
@keyframes sib-spin { to { transform: rotate(360deg); } }

/* Inline field errors — hidden until Brevo writes text into them */
.entry__error {
  display: block;
  font-size: 0.72rem;
  color: #ffb4b4;
  background: rgba(255, 73, 73, 0.09);
  border: 1px solid rgba(255, 73, 73, 0.32);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
}
.entry__error:empty { display: none; }

/* Stacked form layout — used by the unsubscribe page */
.form-stack { display: flex; flex-direction: column; gap: 0.9rem; }
.form-stack .input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
}
.form-stack .input::placeholder { color: var(--text-faint); }
.form-stack .input:focus { outline: none; border-color: var(--accent); }
.form-stack .btn { width: 100%; }
.entry__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.entry__specification {
  display: block;
  font-size: 0.7rem;
  color: var(--text-faint);
  margin-top: 0.45rem;
}

/* Success / error panels */
.sib-form-message-panel {
  display: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  border: 1px solid;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.8rem;
  max-width: none;
}
.sib-form-message-panel__text {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
}
.sib-form-message-panel .sib-notification__icon {
  width: 18px; height: 18px;
  flex: none;
  fill: currentColor;
}
.nl-msg--error   { color: #ffb4b4; background: rgba(255, 73, 73, 0.10); border-color: rgba(255, 73, 73, 0.35); }
.nl-msg--success { color: #9df0c0; background: rgba(19, 206, 102, 0.10); border-color: rgba(19, 206, 102, 0.35); }

/* THE reveal rule. main.js adds --active to show a panel after submit. Without
   this the success/error message stays display:none even though the request
   succeeded — the two-specificity selector beats the default-hide above. */
.sib-form-message-panel.sib-form-message-panel--active { display: block; }

/* reCAPTCHA — keep it inside the card on narrow screens */
.nl-captcha .g-recaptcha { max-width: 100%; overflow: hidden; }
@media (max-width: 400px) {
  .nl-captcha .g-recaptcha {
    transform: scale(0.86);
    transform-origin: left top;
    height: 68px;
  }
}

/* Footer unsubscribe link */
.copyright-sep { margin: 0 0.4rem; opacity: 0.5; }
.footer-link { color: var(--text-dim); text-decoration: none; }
.footer-link:hover { color: var(--accent-bright); }

/* ---------- Standalone form page (unsubscribe.html) ---------- */
.form-page {
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem 3rem;
}
.form-page-card { width: 100%; max-width: 480px; }
.form-page-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
.form-page-desc {
  font-size: 0.84rem;
  color: var(--text-dim);
  margin-bottom: 1.4rem;
}
.form-page-back {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-bright);
}

/* Wide desktop: player sits beside the tracklist like the mockup */
@media (min-width: 1100px) {
  :root { --maxw: 1120px; }
  .latest-card {
    grid-template-columns: 180px minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
      "cover info player";
    column-gap: 2rem;
  }
  .latest-cover img { width: 180px; height: 180px; }
  .latest-player { margin-top: 0; }
}