/* ==========================================================================
   LEA : LIGHT ECHOES ALGORITHM — components.css
   Navigation, footer, buttons, artwork, catalog, filters, forms, media.
   ========================================================================== */

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

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  transition: background var(--duration-medium) var(--ease-standard),
              border-color var(--duration-medium) var(--ease-standard);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(4, 4, 5, 0.86);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--color-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.brand-sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.primary-nav ul {
  display: flex;
  gap: var(--space-lg);
}

.primary-nav a {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-block: var(--space-xs);
  transition: color var(--duration-fast) var(--ease-standard);
}

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

.primary-nav a[aria-current="page"] {
  color: var(--color-text);
}

.primary-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: var(--space-sm);
  margin-right: calc(var(--space-sm) * -1);
}

.nav-toggle-icon {
  position: relative;
  width: 1.4rem;
  height: 0.8rem;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duration-medium) var(--ease-expressive),
              top var(--duration-medium) var(--ease-expressive);
}

.nav-toggle-icon::before { top: 0; }
.nav-toggle-icon::after { top: calc(100% - 1.5px); }

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
  top: 50%;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
  top: 50%;
  transform: rotate(-45deg);
}

/* ---- Topbar Spotify player ------------------------------------------------ */

.tp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  border: 1px solid var(--color-line-strong);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.tp-toggle:hover,
.tp-toggle:focus-visible,
.tp-toggle.is-open {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg-deep);
}

.topbar-player {
  position: fixed;
  inset-inline: 0;
  top: 4.2rem;
  z-index: calc(var(--z-header) - 1);
  background: rgba(4, 4, 7, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
}

.tp-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-sm);
}

.tp-transport {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.tp-info {
  display: grid;
  gap: 1px;
  min-width: 11rem;
}

.tp-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  text-transform: uppercase;
  line-height: 1.1;
}

.tp-embed {
  flex: 1 1 320px;
  min-width: 260px;
}

.tp-embed iframe {
  display: block;
  border-radius: 12px;
}

@media (max-width: 480px) {
  .tp-toggle-label {
    display: none;
  }
}

/* ---- Mobile menu -------------------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--space-2xl)) var(--gutter) var(--space-xl);
  background: var(--color-bg-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-medium) var(--ease-standard),
              visibility 0s linear var(--duration-medium);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-menu nav ul {
  display: grid;
  gap: var(--space-sm);
}

.mobile-menu nav a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text);
  transform: translateY(0.4em);
  opacity: 0;
  transition: transform var(--duration-medium) var(--ease-out),
              opacity var(--duration-medium) var(--ease-out),
              color var(--duration-fast) var(--ease-standard);
}

.mobile-menu.is-open nav a {
  transform: none;
  opacity: 1;
}

.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible,
.mobile-menu nav a[aria-current="page"] {
  color: var(--color-accent);
}

.mobile-menu-foot {
  display: grid;
  gap: var(--space-sm);
}

body.menu-open {
  overflow: hidden;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.9rem 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
  background: transparent;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-text);
  color: var(--color-bg-deep);
  border-color: var(--color-text);
}

.btn--primary {
  background: var(--color-text);
  color: var(--color-bg-deep);
  border-color: var(--color-text);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg-deep);
}

.btn--accent {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--accent:hover,
.btn--accent:focus-visible {
  background: var(--color-accent);
  color: var(--color-bg-deep);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

/* Text link with signal underline */
.link-signal {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: 3px;
  transition: color var(--duration-fast) var(--ease-standard);
}

.link-signal::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform var(--duration-medium) var(--ease-expressive);
}

.link-signal:hover,
.link-signal:focus-visible {
  color: var(--color-text);
}

.link-signal:hover::after,
.link-signal:focus-visible::after {
  transform: scaleX(1);
}

/* ---- Platform links ------------------------------------------------------ */

.platform-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

/* ---- Artwork placeholder system ------------------------------------------
   Real artwork: set `artwork` in js/data.js or replace the .art markup with
   an <img>. Until then a deterministic typographic placeholder renders,
   so the site works with zero missing-image errors. */

.art {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    linear-gradient(var(--art-angle, 160deg),
      var(--color-surface-2) 0%,
      var(--color-surface) 42%,
      var(--color-bg-deep) 100%);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
}

.art::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.art::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: var(--art-line, 34%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-line-strong), transparent);
}

.art-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 3.5cqw + 0.6rem, 1.8rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--color-chrome);
  word-break: break-word;
}

.art-tag {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--color-faint);
  text-transform: uppercase;
}

.art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Catalog (music page) ------------------------------------------------ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-line);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.filter-group > .mono {
  margin-right: var(--space-xs);
}

.filter-btn {
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  border: 1px solid var(--color-line);
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}

.filter-btn:hover,
.filter-btn:focus-visible {
  color: var(--color-text);
  border-color: var(--color-line-strong);
}

.filter-btn[aria-pressed="true"] {
  color: var(--color-bg-deep);
  background: var(--color-text);
  border-color: var(--color-text);
}

.catalog {
  display: grid;
}

.catalog-row {
  display: grid;
  grid-template-columns: 3rem 6.5rem minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-line);
  transition: background var(--duration-fast) var(--ease-standard);
}

.catalog-row:hover {
  background: rgba(242, 241, 236, 0.025);
}

.catalog-row .art {
  padding: var(--space-xs);
}

.catalog-row .art .art-title {
  font-size: 0.55rem;
  letter-spacing: 0;
}

.catalog-row .art .art-tag {
  display: none;
}

.catalog-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}

.catalog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-faint);
  border: 1px solid var(--color-line);
  padding: 2px 7px;
}

/* Apple Music catalog genre (OFFICIAL tier) */
.tag--official {
  color: var(--color-accent-2);
  border-color: rgba(55, 230, 242, 0.35);
}

.tag--explicit {
  color: var(--color-muted);
  border-color: var(--color-line-strong);
}

/* 30-second preview play button (official Apple audio previews) */
.preview-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  color: var(--color-text);
  background: rgba(3, 3, 8, 0.72);
  border: 1px solid var(--color-line-strong);
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
  z-index: 2;
}

.preview-btn:hover,
.preview-btn:focus-visible {
  opacity: 1;
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg-deep);
}

.preview-btn.is-playing {
  opacity: 1;
  background: var(--color-accent-2);
  border-color: var(--color-accent-2);
  color: var(--color-bg-deep);
  box-shadow: var(--glow-cyan);
}

.catalog-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  justify-content: flex-end;
}

.catalog-empty {
  padding: var(--space-xl) 0;
  text-align: center;
}

/* ---- Video facade (click-to-load YouTube) --------------------------------- */

.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  text-align: left;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(35%) contrast(1.05);
  transition: filter var(--duration-medium) var(--ease-standard),
              transform var(--duration-slow) var(--ease-out);
}

.video-facade:hover img,
.video-facade:focus-visible img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.03);
}

.video-facade-meta {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: linear-gradient(transparent, rgba(4, 4, 5, 0.85));
}

.video-facade-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1;
}

.video-facade-play {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.video-facade:hover .video-facade-play,
.video-facade:focus-visible .video-facade-play {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg-deep);
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-line);
}

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

/* ---- Press cards (press page) --------------------------------------------- */

.press-card {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.press-card:hover {
  border-color: var(--color-line-strong);
}

.press-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.press-card--placeholder {
  border-style: dashed;
  background: transparent;
}

/* Press cards get the console corner brackets */
.press-card {
  position: relative;
}

.press-card:not(.press-card--placeholder)::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--color-accent-2), var(--color-accent-2)) left 0 top 0 / 16px 2px,
    linear-gradient(var(--color-accent-2), var(--color-accent-2)) left 0 top 0 / 2px 16px,
    linear-gradient(var(--color-accent), var(--color-accent)) right 0 bottom 0 / 16px 2px,
    linear-gradient(var(--color-accent), var(--color-accent)) right 0 bottom 0 / 2px 16px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-standard);
}

.press-card:not(.press-card--placeholder):hover::after {
  opacity: 0.9;
}

/* Key facts strip on the press page head */
.press-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) 0;
  margin-top: var(--space-lg);
  color: var(--color-chrome);
}

.press-facts span {
  padding-inline: var(--space-md);
  border-left: 1px solid var(--color-line-strong);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.press-facts span:first-child {
  padding-left: 0;
  border-left: none;
}

/* Copy-to-clipboard buttons (bios) */
.copy-btn.is-copied {
  background: var(--color-accent-2);
  border-color: var(--color-accent-2);
  color: var(--color-bg-deep);
}

/* ---- Forms ------------------------------------------------------------------ */

.form {
  display: grid;
  gap: var(--space-lg);
  max-width: 46rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.field {
  display: grid;
  gap: var(--space-sm);
}

.field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-standard);
  border-radius: 0;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2397958d'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.field textarea {
  min-height: 10rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-note {
  border: 1px dashed var(--color-line-strong);
  padding: var(--space-md);
}

.form-status {
  min-height: 1.5rem;
}

/* ---- Contact: transmission console + channels ---------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: stretch; /* the form console matches the right column's height */
}

.contact-grid > .console {
  display: flex;
  flex-direction: column;
}

.contact-grid > .console .form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-grid .field--grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-grid .field--grow textarea {
  flex: 1;
  min-height: 8rem;
}

.console {
  position: relative;
  padding: var(--space-lg);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(157, 92, 255, 0.07), transparent 55%),
    var(--color-surface);
  border: 1px solid var(--color-line);
}

/* Neon corner brackets — the futuristic frame */
.console::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--color-accent-2), var(--color-accent-2)) left 0 top 0 / 20px 2px,
    linear-gradient(var(--color-accent-2), var(--color-accent-2)) left 0 top 0 / 2px 20px,
    linear-gradient(var(--color-accent-2), var(--color-accent-2)) right 0 top 0 / 20px 2px,
    linear-gradient(var(--color-accent-2), var(--color-accent-2)) right 0 top 0 / 2px 20px,
    linear-gradient(var(--color-accent), var(--color-accent)) left 0 bottom 0 / 20px 2px,
    linear-gradient(var(--color-accent), var(--color-accent)) left 0 bottom 0 / 2px 20px,
    linear-gradient(var(--color-accent), var(--color-accent)) right 0 bottom 0 / 20px 2px,
    linear-gradient(var(--color-accent), var(--color-accent)) right 0 bottom 0 / 2px 20px;
  background-repeat: no-repeat;
  opacity: 0.85;
}

.console-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px dashed var(--color-line);
}

.console .form {
  max-width: none;
  gap: var(--space-md);
}

.console-foot {
  margin-top: var(--space-md);
}

.console--side {
  padding: var(--space-md);
}

.console--side .console-head {
  margin-bottom: var(--space-md);
}

.channels {
  display: grid;
  gap: var(--space-md);
}

.channel-list {
  display: grid;
}

.channel {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-xs);
  border-bottom: 1px solid var(--color-line);
  transition: background var(--duration-fast) var(--ease-standard);
}

.channel-list li:last-child .channel {
  border-bottom: none;
}

.channel:hover,
.channel:focus-visible {
  background: rgba(157, 92, 255, 0.08);
}

.channel .icon {
  width: 1.4em;
  height: 1.4em;
  color: var(--color-accent-2);
  flex-shrink: 0;
}

.channel span {
  display: grid;
}

.channel strong {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.channel em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-faint);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Signal-pulse dot in the console header */
.pulse-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.6em;
  border-radius: 50%;
  background: var(--color-accent-2);
  box-shadow: 0 0 8px var(--color-accent-2);
  animation: pulse-dot 1.8s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

/* Scanline sweep across the main console */
.console:not(.console--side):not(.console--photo)::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(55, 230, 242, 0.5), transparent);
  animation: console-scan 7s linear infinite;
  pointer-events: none;
}

@keyframes console-scan {
  0% { top: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Photo card in the channels column */
.console--photo {
  padding: var(--space-xs);
}

.console--photo .img-slot {
  aspect-ratio: 4 / 5;
}

.console--photo .img-slot img {
  filter: saturate(1.05);
}

.console-photo-caption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-sm);
}

.field label .mono--accent {
  letter-spacing: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot,
  .console:not(.console--side):not(.console--photo)::before {
    animation: none;
  }
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-faint);
}

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

/* ---- Footer ------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--color-line);
  background: var(--color-bg-deep);
  padding-block: var(--space-xl) var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.footer-col h2 {
  margin-bottom: var(--space-md);
}

.footer-col ul {
  display: grid;
  gap: var(--space-sm);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}

/* ---- Platform icons ------------------------------------------------------------- */

.icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

.platform-links .icon,
.footer-col .icon {
  color: var(--color-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}

.icon-link:hover .icon,
.icon-link:focus-visible .icon {
  color: var(--color-accent-2);
}

.btn .icon {
  width: 1.05em;
  height: 1.05em;
}

/* ---- Hover glow (no 3D rotation — flat, premium) ------------------------------ */

.art,
.video-facade,
.press-card {
  transition: box-shadow var(--duration-medium) var(--ease-out),
              border-color var(--duration-fast) var(--ease-standard);
}

.art:hover,
.video-facade:hover,
.video-facade:focus-visible {
  box-shadow: 0 18px 55px -20px rgba(0, 0, 0, 0.85), var(--glow-violet);
  border-color: var(--color-line-strong);
}

/* ---- Flip deck (Selected Works) — real 3D card flip, hover / tap / focus ------- */

.works-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-md);
}

.flip-card {
  position: relative;
  aspect-ratio: 1 / 1;
  perspective: 1100px;
  cursor: pointer;
  outline-offset: 4px;
}

.flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 650ms var(--ease-expressive);
}

.flip-card:hover .flip-inner,
.flip-card:focus-within .flip-inner,
.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--color-line);
  overflow: hidden;
}

.flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flip-hint {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: 2px 8px;
  background: rgba(3, 3, 8, 0.72);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
  font-size: 0.6rem;
}

.flip-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(157, 92, 255, 0.16), transparent 60%),
    radial-gradient(100% 70% at 100% 100%, rgba(55, 230, 242, 0.08), transparent 60%),
    var(--color-surface);
}

.flip-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1;
  text-transform: uppercase;
  margin-block: var(--space-xs);
  word-break: break-word;
}

.flip-links {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}

@media (prefers-reduced-motion: reduce) {
  .flip-inner {
    transition: none;
  }
}

/* ---- Aurora backdrop (animated light field) ------------------------------------- */

.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  width: 58vw;
  height: 58vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.2;
}

.aurora::before {
  background: radial-gradient(circle, var(--color-accent), transparent 65%);
  top: -20%;
  left: -14%;
  animation: aurora-a 24s ease-in-out infinite alternate;
}

.aurora::after {
  background: radial-gradient(circle, var(--color-accent-2), transparent 65%);
  bottom: -24%;
  right: -12%;
  animation: aurora-b 28s ease-in-out infinite alternate;
}

@keyframes aurora-a {
  to { transform: translate(11vw, 9vh) scale(1.15); }
}

@keyframes aurora-b {
  to { transform: translate(-9vw, -7vh) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before,
  .aurora::after {
    animation: none;
  }
}

/* ---- Neon frame (rotating conic border for active/selected items) ---------------- */

@property --na {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.neon-frame {
  position: relative;
  z-index: var(--z-base);
}

.neon-frame::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: conic-gradient(from var(--na),
    transparent 0%, var(--color-accent-2) 10%, var(--color-accent) 28%,
    transparent 45%, transparent 55%, var(--color-accent-3) 72%, transparent 90%);
  animation: neon-spin 4s linear infinite;
}

@keyframes neon-spin {
  to { --na: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .neon-frame::before {
    animation: none;
    background: linear-gradient(120deg, var(--color-accent-2), var(--color-accent));
  }
}

/* ---- Galerie TV ---------------------------------------------------------------------
   Player + lyrics panel + playlist. */

/* Console: screen + lyrics side by side, SAME height (lyrics scroll inside) */
.tv-console {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}

.tv-lyrics-col {
  position: relative;
  min-height: 300px;
}

.tv-lyrics-col .lyrics-panel {
  position: absolute;
  inset: 0;
  max-height: none;
}

.tv-screen {
  position: relative;
  background: #000;
  border: 1px solid var(--color-line);
}

.tv-screen .video-facade,
.tv-screen .video-frame {
  border: none;
}

.tv-nowplaying {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}

.tv-nowplaying-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.tv-nowplaying-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.lyrics-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(157, 92, 255, 0.08), transparent 55%),
    var(--color-surface);
}

.lyrics-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-line);
}

.lyrics-scroll {
  overflow-y: auto;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--color-faint) transparent;
}

.lyrics-text {
  white-space: pre-line;
  color: var(--color-muted);
  line-height: 2;
  font-size: var(--text-base);
}

.lyrics-empty {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-md);
}

.lyrics-full {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

/* ---- Playlist page: player integrated in a 3D spectrum stage ---- */
.playlist-hero {
  position: relative;
  padding-block: var(--space-2xl);
  background: radial-gradient(120% 90% at 50% 12%, #0d0d1e 0%, var(--color-bg-deep) 72%);
}

.pl-lede { max-width: none; margin: var(--space-md) 0 var(--space-xl); }

/* Stage: holds the 3D spectrum canvas + the player, centred inside it. */
.pl-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 82vh;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--color-line);
  background: #06060c;
}

.pl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Player sits dead-centre of the spectrum ring — sized to the ring's inner
   ellipse (proportional to the stage) so it always fills it nicely. */
.pl-player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 38%;
  height: 66%;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b16;
  box-shadow: 0 0 0 1px var(--color-line-strong), var(--glow-violet), 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}

.pl-player iframe { width: 100%; height: 100%; display: block; }

@media (max-width: 760px) {
  .pl-stage { aspect-ratio: auto; min-height: 600px; max-height: none; }
  .pl-player { width: 92%; height: 500px; }   /* big enough to actually use the Spotify player */
  .playlist-hero { padding-block: var(--space-xl); }
}

/* ---- Follow the signal (fanzone) ---- */
.follow-lede { max-width: 48ch; margin: var(--space-md) 0 var(--space-xl); }

/* Compact — a single row of discreet social chips. */
.follow-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-sm);
}

.follow-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--space-md) 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
  overflow: hidden;
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-medium) var(--ease-out),
              transform var(--duration-medium) var(--ease-out);
}

.follow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 50% 0%, var(--fc, var(--color-accent)) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-out);
  pointer-events: none;
}

.follow-card:hover,
.follow-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--fc, var(--color-accent));
  box-shadow: 0 16px 40px -26px rgba(0, 0, 0, 0.9), 0 0 18px -8px var(--fc, var(--color-accent));
}

.follow-card:hover::before,
.follow-card:focus-visible::before { opacity: 0.1; }

/* Discreet icons: muted by default, accent on hover. */
.follow-icon {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--color-muted);
  transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-medium) var(--ease-out);
}

.follow-card:hover .follow-icon,
.follow-card:focus-visible .follow-icon { color: var(--fc, var(--color-accent)); transform: scale(1.12); }

.follow-text { display: contents; }

.follow-net {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1;
  white-space: nowrap;
}

/* Handle + CTA hidden in the compact row. */
.follow-handle,
.follow-cta { display: none; }

/* Per-platform accent colour (drives border, glow, icon, CTA). */
.follow-card--tiktok { --fc: #37e6f2; }
.follow-card--ig { --fc: #ef5ce0; }
.follow-card--fb { --fc: #5a86ff; }
.follow-card--yt { --fc: #ff4e6a; }
.follow-card--sp { --fc: #1ed760; }
.follow-card--am { --fc: #fc5c9c; }
.follow-card--sh { --fc: #2b9bff; }

.follow-embed {
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: var(--space-md);
  background: var(--color-surface);
  min-height: 320px;
  overflow: hidden;
}

/* ---- Share button + fallback menu ---- */
.share-btn {
  background: none;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-medium) var(--ease-out);
}

.share-btn:hover,
.share-btn:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--glow-violet);
}

.pulse-release-actions { display: inline-flex; gap: var(--space-md); align-items: center; margin-top: 0.25rem; }

.share-menu {
  position: absolute;
  z-index: var(--z-modal);
  display: grid;
  gap: 2px;
  padding: 6px;
  min-width: 168px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line-strong);
  border-radius: 10px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}

.share-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.8rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  cursor: pointer;
}

.share-opt:hover,
.share-opt:focus-visible {
  background: var(--color-surface);
  color: var(--color-accent-2);
}

/* ---- FAQ accordion ---- */
.faq-list { display: grid; max-width: var(--width-text); }

.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item:first-child { border-top: 1px solid var(--color-line); }

.faq-q {
  cursor: pointer;
  list-style: none;
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q::after {
  content: "+";
  color: var(--color-accent);
  font-size: 1.4em;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.faq-item[open] .faq-q::after { transform: rotate(45deg); }

.faq-a {
  padding-bottom: var(--space-md);
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 62ch;
}

/* ---- "This month in the signal" — live dashboard ---- */
.pulse-eyebrow { color: var(--color-accent-2); }

.pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  overflow: hidden;
}

.pulse-stat {
  background: var(--color-bg-deep);
  padding: var(--space-lg) var(--space-md);
}

.pulse-stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pulse-stat-label {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-faint);
}

.pulse-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-md), 4vw, var(--space-2xl));
  align-items: center;
  margin-top: var(--space-xl);
}

.pulse-tag {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pulse-release-row { display: flex; gap: var(--space-md); align-items: center; }

.pulse-cover {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.pulse-release-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.05;
}

.pulse-release-date { display: block; margin: 0.2rem 0 0.35rem; }

.pulse-countdown { display: flex; gap: var(--space-sm); }

.pulse-cd-unit {
  display: inline-grid;
  justify-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-faint);
}

.pulse-cd-unit b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--color-text);
}

/* ---- Preloader (brand loading veil) ---- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  background: var(--color-bg-deep);
  transition: opacity 1200ms var(--ease-out), visibility 1200ms;
}

.preloader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-inner {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
}

.preloader-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 4.5rem);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: preloaderPulse 1.5s ease-in-out infinite;
}

.preloader-bar {
  position: relative;
  width: min(240px, 52vw);
  height: 2px;
  background: var(--color-line);
  overflow: hidden;
}

.preloader-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -42%;
  width: 42%;
  background: var(--gradient-brand);
  animation: preloaderSweep 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes preloaderPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes preloaderSweep { 0% { left: -42%; } 100% { left: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .preloader-mark { animation: none; }
  .preloader-bar i { animation: none; left: 0; width: 100%; opacity: 0.6; }
}

/* ---- Back-to-top button ---- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: var(--z-header);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  background: rgba(7, 7, 13, 0.72);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 300ms var(--ease-out), visibility 300ms,
              transform 300ms var(--ease-out),
              box-shadow 300ms var(--ease-out),
              border-color 200ms var(--ease-standard);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover,
.to-top:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--glow-violet);
  transform: translateY(-3px);
}

.to-top svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "Join the signal" newsletter (injected into the footer site-wide) */
.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-md), 4vw, var(--space-2xl));
  align-items: center;
}

/* Footer fallback placement keeps a divider under it. */
.site-footer .newsletter {
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-line);
}

.newsletter-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.newsletter-input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: 8px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.newsletter-input::placeholder { color: var(--color-faint); }

.newsletter-input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--glow-violet);
}

.newsletter-status {
  flex-basis: 100%;
  min-height: 1.2em;
}

/* Channel rail: horizontal zapping strip */
.tv-rail-wrap {
  margin-top: var(--space-xl);
}

.tv-playlist {
  display: flex;
  align-items: flex-start;          /* items keep their own height — no row-wide stretch */
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--color-faint) transparent;
}

.tv-playlist .tv-item {
  flex: 0 0 104px;                 /* narrow case: shows a crop of the cover */
  scroll-snap-align: start;
  transition: flex-basis 440ms var(--ease-out),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-medium) var(--ease-out);
  will-change: flex-basis;
}

/* Hover / focus widens the case to reveal the whole square pochette. */
.tv-playlist .tv-item:hover,
.tv-playlist .tv-item:focus-within {
  flex-basis: 176px;
}

.tv-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-medium) var(--ease-out);
}

.tv-item:hover,
.tv-item:focus-visible {
  border-color: var(--color-line-strong);
  box-shadow: var(--glow-cyan);
}

.tv-item img {
  width: 100%;
  height: 176px;            /* fixed height; case width == height when expanded
                              so the full square cover shows edge-to-edge */
  object-fit: cover;
  display: block;
}

.tv-item-meta {
  display: grid;
  gap: 3px;
  padding: var(--space-sm);
}

.tv-item-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-item.is-active .tv-item-title {
  color: var(--color-accent-2);
}

.tv-item {
  position: relative;
}

.tv-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  background: rgba(3, 3, 8, 0.8);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
}

.tv-badge--apple { color: var(--color-accent-3); }
.tv-badge--yt { color: var(--color-accent-2); }

/* Apple Music preview player */
.tv-apple video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  object-fit: contain;
}

/* ==========================================================================
   Galerie TV — futuristic theater refresh
   ========================================================================== */
.tv-theater {
  position: relative;
  padding: clamp(var(--space-md), 2.5vw, var(--space-xl));
  border-radius: 20px;
  overflow: hidden;
}
.tv-theater::before {                 /* faint neon tech ambience */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 82% -10%, rgba(157, 92, 255, 0.12), transparent 55%),
    radial-gradient(100% 80% at 0% 112%, rgba(55, 230, 242, 0.10), transparent 55%);
}
.tv-theater > * { position: relative; z-index: 1; }

.tv-live {
  position: absolute;
  top: calc(clamp(var(--space-md), 2.5vw, var(--space-xl)) + 0.75rem);
  left: calc(clamp(var(--space-md), 2.5vw, var(--space-xl)) + 0.9rem);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--color-muted);
}
.tv-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4e6a;
  box-shadow: 0 0 10px #ff4e6a;
  animation: tv-live 1.6s ease-in-out infinite;
}
@keyframes tv-live { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .tv-live i { animation: none; } }

/* Screen — neon frame + CRT scanlines */
.tv-screen {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  box-shadow: 0 0 0 1px rgba(157, 92, 255, 0.22), var(--glow-violet), 0 40px 90px -50px #000;
}
.tv-screen::after {                   /* subtle scanlines over the screen */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
  opacity: 0.5;
  border-radius: 14px;
}
@media (prefers-reduced-motion: reduce) { .tv-screen::after { opacity: 0.3; } }

/* Lyrics — glass teleprompter, centred karaoke type, fade top/bottom */
.lyrics-panel {
  border-radius: 14px;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(157, 92, 255, 0.10), transparent 55%),
    rgba(14, 14, 24, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lyrics-panel-head { flex-wrap: wrap; row-gap: var(--space-sm); }
.ly-tools { display: inline-flex; gap: 0.35rem; }
.ly-tool {
  border: 1px solid var(--color-line-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.ly-tool:hover,
.ly-tool:focus-visible { color: var(--color-text); border-color: var(--color-accent); }
.ly-tool--scroll[aria-pressed="true"] {
  color: var(--color-bg-deep);
  background: var(--color-accent-2);
  border-color: var(--color-accent-2);
  box-shadow: var(--glow-cyan);
}
.lyrics-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 92%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 92%, transparent);
}
.lyrics-text {
  font-size: var(--ly-size, 1.02rem);
  line-height: 1.85;
  text-align: center;
  color: var(--color-chrome);
}

/* Now playing — glass bar */
.tv-nowplaying {
  border-radius: 14px;
  background: rgba(14, 14, 24, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tv-np-info { min-width: 0; }

/* Channel cases — rounded, stronger active glow */
.tv-item { border-radius: 10px; overflow: hidden; }
.tv-item.is-active { box-shadow: var(--glow-violet); }

/* ==========================================================================
   Galerie TV — integrated player + grid
   ========================================================================== */
.vg-section { padding-top: var(--space-lg); }   /* sit just under the intro, not far below */
.vg-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: stretch;          /* both columns share the video's height */
  margin-bottom: var(--space-xl);
}
.vg-player {
  position: relative;
  border: 1px solid var(--color-line-strong);
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(157, 92, 255, 0.2), var(--glow-violet), 0 40px 90px -55px #000;
  animation: vg-glow 7s ease-in-out infinite;   /* 3D neon breathing */
}
@keyframes vg-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(157, 92, 255, 0.3), 0 0 44px -8px rgba(157, 92, 255, 0.55), 0 40px 90px -55px #000; }
  50%      { box-shadow: 0 0 0 1px rgba(55, 230, 242, 0.34), 0 0 50px -6px rgba(55, 230, 242, 0.55), 0 40px 90px -55px #000; }
}
@media (prefers-reduced-motion: reduce) { .vg-player { animation: none; } }
/* The facade tilts in 3D on hover (handled site-wide); keep the video flat. */
.vg-screen { position: relative; transform-style: preserve-3d; }
.vg-screen .video-facade { transition: transform 0.3s var(--ease-out); }
.vg-screen .video-facade,
.vg-screen .video-frame { border: none; }
.vg-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  background: rgba(7, 7, 13, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.vg-nav--prev { left: 0.6rem; }
.vg-nav--next { right: 0.6rem; }
.vg-nav:hover,
.vg-nav:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg-deep); }
.vg-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 0;                 /* allow the lyrics area to shrink & scroll */
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: rgba(14, 14, 24, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vg-info { display: flex; flex-direction: column; gap: 0.35rem; }
.vg-transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 0.2rem;
}
.vg-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1; text-transform: uppercase; }
.vg-links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-top: var(--space-sm); }
.vg-lyrics-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1 1 0;                   /* fills the panel down to the video's height */
  min-height: 0;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-md);
}
.vg-lyrics {
  flex: 1 1 0;
  min-height: 140px;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
@media (max-width: 860px) {
  .vg-stage { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .vg-side { min-height: 0; }
  .vg-lyrics-wrap { flex: none; }
  .vg-lyrics { flex: none; min-height: 0; max-height: 55vh; overflow-y: auto; }
}
.vg-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem; height: 4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  background: rgba(7, 7, 13, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff; font-size: 1.2rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.3s;
}
.vg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}
.vg-card {
  display: flex; flex-direction: column;
  text-align: left;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.3s, transform 0.3s;
}
.vg-card:hover, .vg-card:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--glow-violet);
  transform: translateY(-4px);
  outline: none;
}
.vg-card.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), var(--glow-violet);
}
.vg-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.vg-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.vg-card:hover .vg-card-media img { transform: scale(1.05); }
.vg-play--sm { width: 2.8rem; height: 2.8rem; font-size: 0.9rem; opacity: 0; }
.vg-card:hover .vg-play--sm, .vg-card:focus-visible .vg-play--sm { opacity: 1; }
.vg-card-meta { display: flex; flex-direction: column; gap: 2px; padding: var(--space-sm) var(--space-md); }
.vg-card-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--text-sm); line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 600px) {
  .vg-featured { aspect-ratio: 16 / 10; }
  .vg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-sm); }
  .vg-play { width: 3.2rem; height: 3.2rem; }
}

/* ---- Immersive popup (video + lyrics to sing along) ---- */
body.cf-lock { overflow: hidden; }
.cf-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: clamp(0.5rem, 3vw, 2rem); }
.cf-modal[hidden] { display: none; }
.cf-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(3, 3, 8, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cf-modal-card {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: 92vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  border: 1px solid var(--color-line-strong);
  border-radius: 18px;
  background: rgba(10, 10, 18, 0.94);
  box-shadow: var(--glow-violet), 0 60px 140px -40px #000;
}
.cf-modal-close {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  background: rgba(7, 7, 13, 0.7);
  color: var(--color-text); cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cf-modal-close:hover,
.cf-modal-close:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg-deep); }
.cf-modal-media { background: #000; display: flex; align-items: center; }
.cf-modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.cf-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cf-modal-side {
  display: flex; flex-direction: column; min-height: 0;
  padding: var(--space-lg); gap: var(--space-md);
  border-left: 1px solid var(--color-line);
}
.cf-modal-head { display: flex; flex-direction: column; gap: 0.2rem; }
.cf-modal-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); text-transform: uppercase; line-height: 1; }
.cf-modal-lyrics-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.cf-modal-lyrics {
  flex: 1 1 auto; min-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
.cf-modal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm) var(--space-md); }
.cf-modal-links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.cf-modal-nav { display: flex; align-items: center; gap: var(--space-md); }

@media (max-width: 860px) {
  .cf-modal-card { grid-template-columns: minmax(0, 1fr); max-height: 94vh; overflow-y: auto; }
  .cf-modal-side { border-left: none; border-top: 1px solid var(--color-line); }
  .cf-modal-lyrics { max-height: 42vh; overflow-y: auto; }
}

.tv-apple-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}

/* Player controls (prev / counter / next) */
.tv-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.tv-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  color: var(--color-text);
  font-size: 1rem;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.tv-control:hover:not(:disabled),
.tv-control:focus-visible:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg-deep);
}

.tv-control:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Track DNA (verified third-party audio analysis) */
.dna-badges {
  margin-top: var(--space-xs);
  letter-spacing: 0.16em;
}

.catalog-dna {
  grid-column: 1 / -1;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px dashed var(--color-line);
}

.catalog-dna[hidden] {
  display: none;
}

.dna-bars {
  display: grid;
  gap: var(--space-sm);
  max-width: 34rem;
}

.dna-bar {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 3.2rem;
  align-items: center;
  gap: var(--space-sm);
}

.dna-bar-track {
  display: block;
  height: 6px;
  background: var(--color-line);
  overflow: hidden;
}

.dna-bar-fill {
  display: block;
  height: 100%;
  background: var(--gradient-brand);
  box-shadow: var(--glow-cyan);
  transition: width var(--duration-slow) var(--ease-out);
}

.dna-source {
  margin-top: var(--space-md);
  max-width: 40rem;
}

/* Lyrics expander on the music page */
.catalog-lyrics {
  grid-column: 1 / -1;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px dashed var(--color-line);
  white-space: pre-line;
  color: var(--color-muted);
  line-height: 1.9;
}

.catalog-lyrics[hidden] {
  display: none;
}

/* ---- Campaign photo slots -------------------------------------------------------
   A designed placeholder until the real file is dropped into assets/images/.
   main.js probes the file and fades the photo in when it exists. */

.img-slot {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(157, 92, 255, 0.12), transparent 60%),
    linear-gradient(160deg, var(--color-surface-2), var(--color-bg-deep));
  border: 1px solid var(--color-line);
}

.img-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.img-slot-note {
  position: absolute;
  inset-inline: var(--space-md);
  bottom: var(--space-md);
  z-index: 1;
}

.img-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}

.img-slot.is-loaded img {
  opacity: 1;
}

.img-slot.is-loaded .img-slot-note {
  display: none;
}

.img-slot--portrait { aspect-ratio: 3 / 4; }
.img-slot--wide { aspect-ratio: 16 / 9; }
.img-slot--square { aspect-ratio: 1 / 1; }

/* ---- 404 ----------------------------------------------------------------------- */

.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--color-bg-deep);
}

.error-code {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-line-strong);
}

/* ==========================================================================
   Social icons — top bar + mobile menu (injected site-wide)
   ========================================================================== */
.nav-social {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.nav-social-link {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--color-line);
  color: rgba(236, 238, 252, 0.5);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nav-social-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.nav-social-link:hover,
.nav-social-link:focus-visible {
  color: var(--fc);
  border-color: var(--fc);
  background: color-mix(in srgb, var(--fc) 12%, transparent);
  box-shadow: 0 0 0 1px var(--fc);
  transform: translateY(-1px);
  outline: none;
}
.nav-social-link:hover svg { transform: scale(1.1); }

/* Hidden in the top bar once the nav collapses; shown inside the mobile menu. */
@media (max-width: 1024px) {
  .header-inner .nav-social { display: none; }
}
.nav-social--menu {
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

/* ==========================================================================
   TREND PACK — grain, vignette, magnetic/tilt, glass, marquee, type
   ========================================================================== */

/* ---- Film grain + vignette (injected: .fx-layer) ---- */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 50;               /* above content, below header/menus/buttons */
  pointer-events: none;
}
.fx-grain {
  position: absolute;
  inset: -60%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: fx-grain 0.7s steps(4) infinite;
}
.fx-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 95% at 50% 38%, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
}
@keyframes fx-grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-6%, -4%); }
  50%  { transform: translate(4%, -7%); }
  75%  { transform: translate(-4%, 5%); }
  100% { transform: translate(5%, 4%); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-grain { animation: none; }
}

/* ---- Magnetic / tilt easing (JS sets inline transform) ---- */
.is-interactive {
  transition: transform 0.3s var(--ease-out);
  will-change: transform;
}
.video-facade {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-standard), filter 0.3s var(--ease-standard);
  transform-style: preserve-3d;
}
.video-facade:hover {
  box-shadow: var(--glow-violet);
  filter: brightness(1.05) saturate(1.05);
}

/* ---- Glass panels (frosted overlays) ---- */
.to-top,
.share-menu {
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.glass {
  background: rgba(14, 14, 24, 0.55);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--color-line);
}

/* ---- Typography punch + gradient accents ---- */
.display { text-wrap: balance; }
.eyebrow {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   About page — balanced media + bio
   ========================================================================== */
.about-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: start;
}
.about-portrait-col {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.about-portrait {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
}
.about-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  overflow: hidden;
}
.about-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.7rem 0.95rem;
  background: var(--color-surface);
  font-size: 0.9rem;
}
.about-fact b { font-weight: 600; text-align: right; }

.about-bio .display--lg { margin-bottom: var(--space-md); }
.about-bio .btn-row {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.pullquote {
  margin: var(--space-lg) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.5vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pullquote--center {
  text-align: center;
  border: none;
  padding: 0;
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(1.8rem, 1.2rem + 3vw, 3.4rem);
}

.name-card-index {
  display: block;
  color: var(--color-accent-2);
  margin-bottom: var(--space-sm);
}

/* ---- The studio — wide photo + concept cards in interactive 3D ---- */
.studio-stage {
  perspective: 1300px;
}
.studio-scene {
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease-out);
  display: grid;
  gap: var(--space-lg);
}
.studio-photo {
  aspect-ratio: 2 / 1;               /* matches the wide studio shot */
  border-radius: 16px;
  transform: translateZ(0);
}
.studio-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  transform: translateZ(55px);       /* floats in front → depth on tilt */
}
.studio-card {
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: rgba(14, 14, 24, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.95);
}
.studio-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: var(--space-sm);
}
.studio-card p { color: var(--color-muted); }
.studio-card--machine {
  border-color: var(--color-accent-dim);
  box-shadow: inset 0 0 0 1px var(--color-accent-dim), 0 24px 60px -34px rgba(0, 0, 0, 0.95);
}
@media (max-width: 760px) {
  .studio-stage { perspective: none; }
  .studio-scene { transform: none !important; }
  .studio-cards { grid-template-columns: minmax(0, 1fr); transform: none; }
}

@media (max-width: 900px) {
  .about-feature { grid-template-columns: minmax(0, 1fr); }
  .about-portrait-col { position: static; }
  .about-portrait { max-width: 26rem; }
  .about-block { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
}

/* ---- Signal chain — 3D DNA helix block ---- */
.chain-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
  min-height: 560px;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 82% 8%, rgba(157, 92, 255, 0.14), transparent 60%),
    linear-gradient(160deg, var(--color-surface), var(--color-bg-deep));
}
.chain-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  z-index: 0;
}
.chain-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
}
.chain-tag { margin-bottom: var(--space-sm); }
.chain-title { margin-bottom: var(--space-lg); }
.chain-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space-lg);
  padding: 0;
}
.chain-steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.72rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
}
.chain-steps li span { color: var(--color-accent-2); font-size: 0.72rem; }
.chain-step--machine {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-dim), 0 0 18px -6px var(--color-accent);
}
.chain-step--machine span { color: var(--color-accent); }
.chain-body p { color: var(--color-text); }
@media (max-width: 760px) {
  .chain-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .chain-canvas { order: -1; min-height: 300px; }
  .chain-content { border-bottom: 1px solid var(--color-line); }
}