:root {
  --bg: #020303;
  --panel: rgba(8, 10, 10, 0.76);
  --line: rgba(255, 255, 255, 0.28);
  --line-strong: rgba(255, 255, 255, 0.48);
  --gold: #dca743;
  --gold-bright: #ffe08a;
  --gold-deep: #8c5f18;
  --text: #f8f5ed;
  --muted: #bcb7ad;
  --radius: 8px;
  --glow: 0 0 28px rgba(224, 164, 58, 0.32);
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 71% 2%, rgba(218, 162, 53, 0.22), transparent 32rem),
    radial-gradient(circle at 18% 38%, rgba(213, 169, 75, 0.08), transparent 30rem),
    linear-gradient(180deg, #020303 0%, #030404 58%, #020202 100%);
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
}

body::before {
  z-index: -2;
  background:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 52% 22%, black, transparent 74%);
}

body::after {
  z-index: -1;
  background: radial-gradient(circle at center, transparent 0 52%, rgba(0, 0, 0, 0.78) 100%);
}

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

button {
  font: inherit;
}

.site-shell {
  width: min(1220px, calc(100% - 48px));
  margin: 26px auto 28px;
}

.topbar {
  position: sticky;
  top: 22px;
  z-index: 20;
  display: grid;
  grid-template-columns: 270px 1fr auto;
  align-items: center;
  min-height: 73px;
  padding: 12px 25px 12px 30px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(4, 5, 5, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 22px 70px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
}

.brand,
.footer-brand span {
  color: var(--gold-bright);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.58em;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 1.9vw, 32px);
  color: #f2f0ec;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  white-space: nowrap;
  transition: color 180ms ease;
}

.nav-links a[data-page-link="library"] {
  font-size: 12px;
  letter-spacing: 0.01em;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold-bright);
}

.nav-links a.active::after {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 46px;
  height: 2px;
  content: "";
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 14px var(--gold);
}

.socials,
.footer-socials {
  display: flex;
  gap: 10px;
  align-items: center;
}

.socials a,
.footer-socials a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.055);
}

.socials svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.socials a:nth-child(3) svg,
.socials a:nth-child(4) svg {
  fill: #f3f3f3;
  stroke: none;
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: 575px;
  padding: 56px 32px 88px 32px;
  overflow: visible;
}

.hero-art {
  position: absolute;
  top: -96px;
  right: -20px;
  bottom: 18px;
  z-index: 0;
  width: min(890px, 76vw);
  background:
    radial-gradient(ellipse at 68% 78%, var(--bg) 0 160px, rgba(2, 3, 3, 0.72) 190px, transparent 245px),
    linear-gradient(180deg, var(--bg) 0 28px, rgba(2, 3, 3, 0.02) 130px, rgba(2, 3, 3, 0.1) 62%, var(--bg) 96%),
    linear-gradient(90deg, var(--bg) 0%, rgba(2, 3, 3, 0.18) 20%, rgba(2, 3, 3, 0.02) 72%, rgba(2, 3, 3, 0.9) 100%),
    url("assets/hero-portrait.png") 34px 22px / 650px auto no-repeat;
  filter: contrast(1.08) saturate(1.04);
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(540px, 100%);
  padding-top: 48px;
}

.hero h1 {
  width: max-content;
  margin: 0;
  color: transparent;
  background: linear-gradient(90deg, #ffe39a 0%, #d49a37 78%, #875a15 100%);
  background-clip: text;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(150px, 15vw, 210px);
  font-weight: 900;
  line-height: 0.72;
  text-transform: uppercase;
  text-shadow: 0 18px 48px rgba(218, 157, 48, 0.16);
  transform: scaleX(0.46);
  transform-origin: left center;
}

.tagline {
  margin: 24px 0 20px;
  color: #f8f7f4;
  font-size: clamp(17px, 2vw, 25px);
  letter-spacing: 0.31em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.sound-rule,
.mini-wave {
  display: flex;
  align-items: center;
  color: var(--gold);
}

.sound-rule {
  gap: 5px;
  width: min(390px, 100%);
  margin-bottom: 36px;
}

.sound-rule span {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.72;
}

.sound-rule i,
.mini-wave i {
  display: block;
  width: 2px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  transform-origin: center;
  animation: signalBarPulse 1.35s ease-in-out infinite;
}

.sound-rule i:nth-of-type(1) { height: 8px; }
.sound-rule i:nth-of-type(2) { height: 15px; }
.sound-rule i:nth-of-type(3) { height: 23px; }
.sound-rule i:nth-of-type(4) { height: 12px; }
.sound-rule i:nth-of-type(5) { height: 17px; }

.sound-rule i:nth-of-type(2),
.mini-wave i:nth-child(2) { animation-delay: 120ms; }

.sound-rule i:nth-of-type(3),
.mini-wave i:nth-child(3) { animation-delay: 240ms; }

.sound-rule i:nth-of-type(4),
.mini-wave i:nth-child(4) { animation-delay: 360ms; }

.sound-rule i:nth-of-type(5),
.mini-wave i:nth-child(5) { animation-delay: 480ms; }

.mini-wave i:nth-child(6) { animation-delay: 600ms; }
.mini-wave i:nth-child(7) { animation-delay: 720ms; }
.mini-wave i:nth-child(8) { animation-delay: 840ms; }
.mini-wave i:nth-child(9) { animation-delay: 960ms; }

@keyframes signalBarPulse {
  0%, 100% {
    opacity: 0.62;
    transform: scaleY(0.62);
  }

  45% {
    opacity: 1;
    transform: scaleY(1.18);
  }

  70% {
    opacity: 0.82;
    transform: scaleY(0.9);
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.button,
.platform {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button {
  gap: 11px;
  min-width: 186px;
  min-height: 59px;
  padding: 0 22px;
  font-size: 15px;
}

.button:hover,
.platform:hover,
.now-playing button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 226, 158, 0.72);
  box-shadow: var(--glow);
}

.button.primary {
  background: linear-gradient(135deg, rgba(255, 221, 133, 0.88), rgba(112, 72, 18, 0.54) 58%, rgba(12, 9, 4, 0.86));
  box-shadow: 0 0 30px rgba(229, 169, 58, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.button.secondary,
.platform {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 0 19px rgba(255, 255, 255, 0.045);
}

.button.compact {
  min-width: 144px;
  min-height: 46px;
  color: var(--gold-bright);
  font-size: 13px;
}

.play-icon {
  display: inline-grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.play-icon::before {
  width: 0;
  height: 0;
  margin-left: 2px;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
}

.now-playing {
  position: absolute;
  right: 66px;
  bottom: 58px;
  z-index: 3;
  width: 250px;
  padding: 22px 20px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(5, 6, 6, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 34px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.player-top,
.track-line {
  display: flex;
  align-items: center;
}

.player-top {
  justify-content: space-between;
  margin-bottom: 19px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-top svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.mini-wave {
  gap: 4px;
  height: 25px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(218, 167, 67, 0.3);
}

.mini-wave i:nth-child(1) { height: 6px; }
.mini-wave i:nth-child(2) { height: 12px; }
.mini-wave i:nth-child(3) { height: 19px; }
.mini-wave i:nth-child(4) { height: 10px; }
.mini-wave i:nth-child(5) { height: 24px; }
.mini-wave i:nth-child(6) { height: 13px; }
.mini-wave i:nth-child(7) { height: 22px; }
.mini-wave i:nth-child(8) { height: 9px; }
.mini-wave i:nth-child(9) { height: 17px; }

.track-line {
  gap: 14px;
}

.track-line div {
  flex: 1;
}

.track-line strong,
.track-line span {
  display: block;
}

.track-line strong {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
}

.track-line span {
  font-size: 11px;
}

.track-line .time {
  color: var(--gold);
  font-size: 11px;
}

.now-playing button {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  cursor: pointer;
}

.now-playing button .play-icon {
  border: 0;
}

.scroll-cue {
  position: absolute;
  left: 10px;
  bottom: 18px;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.scroll-cue i {
  width: 1px;
  height: 52px;
  background: linear-gradient(var(--gold), var(--gold));
}

.scroll-cue i::after {
  display: block;
  width: 7px;
  height: 7px;
  margin: 45px 0 0 -3px;
  content: "";
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
}

.glass-panel {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.016)), var(--panel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 24px 70px rgba(0, 0, 0, 0.44);
}

.release {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 52px;
  align-items: center;
  width: min(940px, calc(100% - 96px));
  min-height: 254px;
  margin: -34px auto 34px;
  padding: 24px 44px 24px 24px;
}

.release::before {
  position: absolute;
  inset: -1px 44px auto auto;
  width: 310px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, #fff, var(--gold), transparent);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.55);
}

.release::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 7% 98%, rgba(224, 164, 58, 0.16), transparent 12rem), linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.42));
}

.cover,
.release-copy {
  position: relative;
  z-index: 1;
}

.cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(218, 167, 67, 0.62);
  border-radius: 8px;
}

.section-label {
  margin: 0 0 14px;
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.release h2 {
  margin: 0;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(46px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 0.95;
  text-transform: uppercase;
}

.gold-line {
  width: min(310px, 100%);
  height: 1px;
  margin: 28px 0 28px;
  background: linear-gradient(90deg, var(--gold), rgba(218, 167, 67, 0.18));
}

.platforms {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 18px;
}

.platform {
  gap: 10px;
  min-height: 53px;
  padding: 0 13px;
  font-size: 12px;
}

.platform svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}

.platform.spotify span,
.platform.youtube span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-bright);
}

.platform.youtube span {
  border-radius: 6px;
  background: #f2f2f2;
}

.platform.amazon span {
  color: var(--gold);
  font-size: 11px;
  line-height: 1;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: min(940px, calc(100% - 100px));
  margin: 0 auto 30px;
}

.feature-card {
  position: relative;
  min-height: 280px;
  padding: 35px 30px 28px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #070808;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.feature-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.84)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.24)),
    var(--card-image) center / cover no-repeat;
  filter: brightness(0.72) saturate(0.88);
  transition: transform 240ms ease, filter 240ms ease;
}

.feature-card:hover::before {
  transform: scale(1.04);
  filter: brightness(0.88) saturate(1);
}

.feature-card > * {
  position: relative;
  z-index: 1;
}

.feature-icon {
  display: grid;
  width: 74px;
  height: 74px;
  margin-bottom: 30px;
  place-items: center;
  border: 1px solid rgba(218, 167, 67, 0.66);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218, 167, 67, 0.14), rgba(0, 0, 0, 0.12));
  color: var(--gold-bright);
}

.feature-icon svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.feature-card:first-child .feature-icon svg {
  fill: currentColor;
  stroke: none;
}

.feature-card h3 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 400;
  text-transform: uppercase;
}

.feature-card p {
  margin: 0 0 24px;
  color: #f0ece4;
  font-size: 16px;
  line-height: 1.48;
}

.feature-card a {
  color: var(--gold-bright);
  font-size: 25px;
}

.about {
  position: relative;
  display: grid;
  grid-template-columns: 330px 1fr 210px;
  align-items: center;
  width: min(980px, calc(100% - 100px));
  min-height: 250px;
  margin: 0 auto 38px;
  overflow: hidden;
}

.about-copy {
  position: relative;
  z-index: 2;
  padding: 30px 30px 30px 34px;
}

.about-copy p:not(.section-label) {
  margin: 0 0 24px;
  color: #f2eee7;
  font-size: 15px;
  line-height: 1.45;
}

.about-art {
  position: absolute;
  inset: 0 0 0 34%;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.15) 28%, rgba(0, 0, 0, 0.38) 68%, rgba(0, 0, 0, 0.74)),
    url("assets/about-portrait.png") center / cover no-repeat;
}

.signature {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: end;
  padding: 0 36px 48px 0;
  color: var(--gold-bright);
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 48px;
  font-style: italic;
  transform: rotate(-6deg);
}

.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 0 26px 10px;
  color: #d8d2c8;
}

.footer-brand {
  display: grid;
  gap: 14px;
}

.footer-brand small {
  color: #ded7cc;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-copyright {
  width: min(1220px, calc(100% - 48px));
  margin: 28px auto 24px;
  color: rgba(248, 245, 237, 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.footer-socials {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.footer-socials a {
  width: 38px;
  height: 38px;
  color: #fff;
}

.footer-socials svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.footer-socials a:nth-child(3) svg,
.footer-socials a:nth-child(4) svg,
.footer-socials a:nth-child(5) svg {
  fill: currentColor;
  stroke: none;
}

address {
  justify-self: end;
  font-style: normal;
  line-height: 1.9;
  text-align: right;
  text-transform: uppercase;
}

address strong {
  display: block;
  color: var(--gold);
  font-weight: 500;
}

.subpage {
  padding: 54px 0 58px;
}

.page-hero {
  position: relative;
  display: grid;
  min-height: 360px;
  align-items: end;
  margin-bottom: 32px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(2, 3, 3, 0.94), rgba(2, 3, 3, 0.38) 58%, rgba(2, 3, 3, 0.78)),
    var(--page-image, url("assets/hero-portrait.png")) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 24px 70px rgba(0, 0, 0, 0.44);
}

.page-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--gold), #fff, transparent);
  box-shadow: 0 0 18px rgba(255, 224, 138, 0.52);
}

.page-hero > div {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  padding: 48px;
}

.page-hero h1,
.contact-copy h1,
.about-story h1 {
  margin: 0;
  color: transparent;
  background: linear-gradient(90deg, #ffe39a 0%, #d49a37 78%, #875a15 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(64px, 8vw, 112px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 0.92;
  text-transform: uppercase;
}

.about-story h1 {
  max-width: 100%;
  background: linear-gradient(90deg, #ffe39a 0%, #e4ad43 72%, #c98922 100%);
  background-clip: text;
  font-size: clamp(48px, 4vw, 56px);
  letter-spacing: 0.03em;
  overflow-wrap: normal;
}

.page-hero p,
.content-card p,
.shop-card p,
.video-tile p,
.contact-copy p,
.about-story p {
  color: #f0ece4;
  font-size: 17px;
  line-height: 1.55;
}

.music-page {
  --page-image: url("assets/card-music.png");
  grid-template-columns: 1fr 260px;
  align-items: center;
}

.music-page img {
  position: relative;
  z-index: 1;
  width: 210px;
  margin-right: 48px;
  border: 1px solid rgba(218, 167, 67, 0.72);
  border-radius: 8px;
  box-shadow: var(--glow);
}

.video-page {
  --page-image: url("assets/card-videos.png");
}

.merch-page {
  --page-image: url("assets/card-merch.png");
}

.page-release {
  width: 100%;
  margin: 0 0 30px;
}

.content-grid,
.video-grid,
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.content-card,
.shop-card,
.video-tile,
.contact-copy,
.contact-form,
.about-page-panel,
.library-hero,
.library-controlbar,
.continue-strip,
.lesson-card {
  position: relative;
  overflow: hidden;
}

.content-card,
.shop-card {
  min-height: 260px;
  padding: 30px;
}

.content-card h2,
.shop-card h2,
.video-tile h2 {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 500;
  text-transform: uppercase;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-bright);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text-link::after {
  content: "->";
}

.video-tile {
  display: grid;
  min-height: 360px;
  align-content: end;
  padding: 30px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.92)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.12)),
    var(--card-image) center / cover no-repeat;
}

.play-badge {
  display: grid;
  width: 70px;
  height: 70px;
  margin-bottom: 88px;
  place-items: center;
  border: 1px solid rgba(218, 167, 67, 0.72);
  border-radius: 50%;
  color: var(--gold-bright);
  background: rgba(218, 167, 67, 0.08);
}

.shop-image {
  min-height: 210px;
  margin: -30px -30px 24px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.68)),
    var(--card-image) center / cover no-repeat;
}

.about-page-panel {
  display: grid;
  grid-template-columns: minmax(340px, 0.85fr) 1.15fr;
  min-height: 560px;
}

.about-story {
  position: relative;
  z-index: 2;
  padding: 50px 68px 50px 50px;
}

.about-page-art {
  min-height: 480px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.1) 28%, rgba(0, 0, 0, 0.38)),
    url("assets/about-portrait.png") center / cover no-repeat;
}

.about-page-panel .signature {
  position: absolute;
  right: 44px;
  bottom: 42px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 28px;
  align-items: start;
}

.contact-copy,
.contact-form {
  padding: 38px;
}

.contact-form {
  display: grid;
  gap: 18px;
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.36);
  color: #fff;
  font: inherit;
  padding: 14px 16px;
  outline: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(255, 226, 158, 0.72);
  box-shadow: var(--glow);
}

.form-status {
  min-height: 22px;
  margin: 0;
  color: var(--gold-bright);
  font-size: 13px;
}

.library-shell {
  display: grid;
  gap: 30px;
}

.library-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 30px;
  align-items: stretch;
  min-height: 505px;
  padding: 32px;
  background:
    radial-gradient(circle at 77% 10%, rgba(255, 224, 138, 0.16), transparent 24rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.02)),
    rgba(4, 5, 5, 0.66);
  backdrop-filter: blur(20px);
}

.library-hero-copy {
  display: grid;
  align-content: end;
  padding: 26px 8px 18px 18px;
}

.library-hero-copy h1 {
  margin: 0;
  color: transparent;
  background: linear-gradient(90deg, #ffe39a 0%, #d49a37 78%, #875a15 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(70px, 8.8vw, 126px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.88;
  text-transform: uppercase;
}

.library-hero-copy p:not(.section-label) {
  max-width: 560px;
  color: #f0ece4;
  font-size: 18px;
  line-height: 1.6;
}

.library-hero-media {
  display: grid;
  min-height: 390px;
}

.glass-video-poster {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.9)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.06)),
    var(--card-image) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 58px rgba(255, 224, 138, 0.1);
}

.glass-video-poster::after {
  position: absolute;
  inset: auto 10% 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, #fff, var(--gold), transparent);
  box-shadow: 0 0 18px rgba(255, 224, 138, 0.65);
}

.glass-video-poster .play-badge {
  position: absolute;
  top: 32px;
  right: 32px;
  margin: 0;
}

.glass-video-poster div {
  position: relative;
  z-index: 1;
  padding: 32px;
}

.glass-video-poster span,
.lesson-thumb small {
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.glass-video-poster strong {
  display: block;
  margin-top: 8px;
  font-size: 34px;
  font-weight: 500;
  text-transform: uppercase;
}

.library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 28px;
}

.library-meta span,
.library-filter {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #f3eee5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.library-meta span {
  padding: 9px 12px;
}

.library-controlbar {
  position: sticky;
  top: 105px;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) 1fr;
  gap: 18px;
  align-items: center;
  padding: 15px;
  background: rgba(4, 5, 5, 0.72);
  backdrop-filter: blur(18px);
}

.library-search {
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
}

.library-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.8;
}

.library-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  outline: none;
}

.library-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.library-filter {
  min-height: 40px;
  padding: 0 16px;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.library-filter:hover,
.library-filter.active {
  border-color: rgba(255, 226, 158, 0.72);
  color: var(--gold-bright);
  box-shadow: var(--glow);
}

.continue-strip {
  display: grid;
  grid-template-columns: minmax(220px, 0.4fr) 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 20px 24px;
}

.continue-strip h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
}

.progress-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.progress-track span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(90deg, var(--gold-deep), #9f58ff 46%, var(--gold-bright));
  box-shadow: var(--glow), 0 0 22px rgba(159, 88, 255, 0.28);
  animation: progressPulse 3.8s ease-in-out infinite;
}

.progress-track span::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.42) 48%, transparent 72%);
  opacity: 0.65;
  transform: translateX(-115%);
  animation: progressSheen 2.8s ease-in-out infinite;
}

@keyframes progressSheen {
  0%,
  22% {
    transform: translateX(-115%);
  }

  72%,
  100% {
    transform: translateX(115%);
  }
}

@keyframes progressPulse {
  0%,
  100% {
    filter: saturate(1) brightness(1);
  }

  50% {
    filter: saturate(1.18) brightness(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-track span,
  .progress-track span::after {
    animation: none;
  }
}

.library-shelf {
  display: grid;
  gap: 16px;
}

.shelf-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 4px;
}

.shelf-heading h2 {
  margin: 0;
  font-size: clamp(23px, 2.3vw, 34px);
  font-weight: 500;
  text-transform: uppercase;
}

.shelf-row {
  display: grid;
  grid-auto-columns: minmax(250px, 1fr);
  grid-auto-flow: column;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 18px 3px 34px;
  scroll-snap-type: inline mandatory;
}

.compact-row {
  grid-auto-columns: minmax(220px, 0.33fr);
}

.media-tile {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 272px;
  align-content: start;
  padding: 0 0 20px;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)), rgba(5, 6, 6, 0.68);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.media-tile:hover {
  z-index: 5;
  transform: translateY(-12px) scale(1.08);
  border-color: rgba(255, 226, 158, 0.62);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.024)), rgba(5, 6, 6, 0.82);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.54), var(--glow);
}

.lesson-card[hidden],
.topic-tile[hidden] {
  display: none;
}

.lesson-thumb {
  position: relative;
  display: grid;
  min-height: 150px;
  margin-bottom: 16px;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.82)),
    var(--card-image) center / cover no-repeat;
  transition: min-height 220ms ease, filter 220ms ease;
}

.media-tile:hover .lesson-thumb {
  min-height: 166px;
  filter: brightness(1.08);
}

.lesson-thumb .play-badge {
  margin: 0;
  opacity: 0.96;
  transform: scale(0.78);
}

.doc-tile .lesson-thumb .play-badge {
  display: none;
}

.doc-tile .lesson-thumb::after {
  content: "";
  width: 46px;
  height: 58px;
  border: 2px solid rgba(255, 226, 158, 0.78);
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 10px, rgba(255, 226, 158, 0.55) 10px 12px, transparent 12px) 13px 17px / 20px 3px no-repeat,
    linear-gradient(90deg, transparent 0 10px, rgba(255, 226, 158, 0.42) 10px 12px, transparent 12px) 13px 27px / 20px 3px no-repeat,
    linear-gradient(135deg, rgba(255, 226, 158, 0.18), transparent);
  box-shadow: 0 0 28px rgba(220, 167, 67, 0.24);
}

.lesson-thumb small {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(10px);
}

.lesson-card h3 {
  margin: 0 18px 8px;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
}

.lesson-card p {
  margin: 0 18px;
  color: #f0ece4;
  font-size: 14px;
  line-height: 1.45;
}

.tile-actions {
  display: flex;
  gap: 10px;
  margin: 16px 18px 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.media-tile:hover .tile-actions,
.media-tile:focus-within .tile-actions {
  opacity: 1;
  transform: translateY(0);
}

.tile-actions button,
.tile-actions a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tile-actions button:first-child {
  border-color: rgba(255, 226, 158, 0.62);
  color: var(--gold-bright);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.topic-tile {
  min-height: 116px;
  padding: 24px;
  border-radius: var(--radius);
  color: var(--gold-bright);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
}

.coming-soon-strip {
  border-color: rgba(255, 226, 158, 0.28);
  background:
    linear-gradient(120deg, rgba(255, 226, 158, 0.12), transparent 48%),
    rgba(10, 10, 10, 0.64);
}

.coming-soon-card {
  position: relative;
  display: grid;
  min-height: 272px;
  align-content: end;
  gap: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 226, 158, 0.24);
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 226, 158, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.018)),
    rgba(5, 6, 6, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 24px 70px rgba(0, 0, 0, 0.28);
}

.coming-soon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 226, 158, 0.08), transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 56px);
  opacity: 0.55;
}

.coming-soon-card > * {
  position: relative;
  z-index: 1;
}

.coming-soon-card span {
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid rgba(255, 226, 158, 0.42);
  border-radius: 999px;
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.coming-soon-card strong {
  max-width: 11ch;
  color: #fff;
  font-size: 24px;
  line-height: 1.02;
}

.coming-soon-card small {
  max-width: 24ch;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}

.library-empty {
  padding: 24px;
  color: var(--gold-bright);
  text-align: center;
}

.library-empty[hidden],
.youtube-feature-panel[hidden],
.youtube-feature-card[hidden],
.youtube-feed-card[hidden] {
  display: none !important;
}

.video-modal {
  width: min(850px, calc(100% - 42px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: rgba(5, 6, 6, 0.82);
  color: var(--text);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.78), var(--glow);
  backdrop-filter: blur(22px);
}

.video-modal [data-modal-save] {
  display: none !important;
}

.video-modal::backdrop {
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(6px);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.56);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
}

.modal-poster {
  display: grid;
  min-height: 360px;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.88)),
    var(--card-image) center / cover no-repeat;
}

.modal-poster .play-badge {
  margin: 0;
  transform: scale(1.05);
}

.modal-body {
  padding: 30px;
}

.modal-body h2 {
  margin: 0 0 14px;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 0.96;
  text-transform: uppercase;
}

.modal-body p:not(.section-label) {
  max-width: 680px;
  color: #f0ece4;
  font-size: 16px;
  line-height: 1.55;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.episode-page {
  display: grid;
  gap: 24px;
}

.episode-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 34px;
  align-items: stretch;
  padding: 28px;
}

.episode-video {
  display: grid;
  min-height: 430px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.88)),
    var(--card-image) center / cover no-repeat;
}

.episode-video .play-badge {
  margin: 0;
}

.episode-copy {
  display: grid;
  align-content: center;
}

.episode-copy h1 {
  margin: 0;
  color: transparent;
  background: linear-gradient(90deg, #ffe39a 0%, #d49a37 78%, #875a15 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(52px, 6vw, 86px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 0.92;
  text-transform: uppercase;
}

.episode-copy p:not(.section-label) {
  color: #f0ece4;
  font-size: 17px;
  line-height: 1.55;
}

.episode-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.streaming-shell {
  gap: 24px;
}

.stream-hero {
  position: relative;
  display: grid;
  min-height: min(720px, calc(100vh - 142px));
  align-items: end;
  overflow: hidden;
  border-radius: 14px;
  isolation: isolate;
  padding: clamp(28px, 5vw, 60px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 38%, rgba(0, 0, 0, 0.1) 74%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 48%, #020303 100%),
    var(--hero-image) 76% center / cover no-repeat;
  box-shadow: inset 0 -120px 110px #020303, 0 28px 90px rgba(0, 0, 0, 0.5);
}

.stream-hero::before,
.stream-hero::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.stream-hero::before {
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 74% 28%, rgba(255, 226, 158, 0.22), transparent 22rem);
}

.stream-hero::after {
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 158, 0.8), transparent);
  box-shadow: 0 0 28px rgba(255, 226, 158, 0.85);
}

.stream-hero-copy {
  width: min(610px, 100%);
  padding-top: 120px;
}

.stream-hero h1 {
  margin: 0;
  color: transparent;
  background: linear-gradient(90deg, #ffe39a 0%, #d49a37 78%, #875a15 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(64px, 8vw, 124px);
  font-weight: 400;
  letter-spacing: 0.045em;
  line-height: 0.88;
  text-transform: uppercase;
}

.stream-hero-copy > p:not(.section-label) {
  max-width: 560px;
  color: #f5f0e8;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.58;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

.stream-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0;
}

.stream-meta span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  color: #f7eedc;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-preview-card {
  position: absolute;
  right: clamp(22px, 4vw, 58px);
  bottom: clamp(26px, 5vw, 72px);
  width: min(300px, 28vw);
  min-height: 168px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: rgba(4, 5, 5, 0.62);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.54), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
}

.hero-preview-card strong {
  display: block;
  margin-top: 18px;
  font-size: 17px;
  text-transform: uppercase;
}

.hero-preview-card p {
  margin: 8px 0 0;
  color: #e8e0d2;
  font-size: 13px;
  line-height: 1.5;
}

.mini-player-wave {
  display: flex;
  height: 42px;
  align-items: center;
  gap: 5px;
}

.mini-player-wave span {
  width: 5px;
  height: 15px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  animation: wavePulse 1.2s ease-in-out infinite;
}

.mini-player-wave span:nth-child(2) { animation-delay: 120ms; height: 30px; }
.mini-player-wave span:nth-child(3) { animation-delay: 240ms; height: 22px; }
.mini-player-wave span:nth-child(4) { animation-delay: 360ms; height: 36px; }
.mini-player-wave span:nth-child(5) { animation-delay: 480ms; height: 18px; }
.mini-player-wave span:nth-child(6) { animation-delay: 600ms; height: 28px; }

@keyframes wavePulse {
  0%, 100% { transform: scaleY(0.72); opacity: 0.58; }
  50% { transform: scaleY(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sound-rule i,
  .mini-wave i,
  .mini-player-wave span {
    animation: none;
    transform: none;
  }
}

.rail-controls {
  display: flex;
  gap: 8px;
}

.rail-controls button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-bright);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.rail-controls button:hover {
  border-color: rgba(255, 226, 158, 0.72);
  transform: translateY(-2px);
  box-shadow: var(--glow);
}

.stream-rail .shelf-row {
  grid-auto-columns: minmax(255px, 296px);
  margin-inline: -22px;
  padding-inline: 22px;
  scrollbar-width: none;
}

.stream-rail .shelf-row::-webkit-scrollbar {
  display: none;
}

.stream-rail .compact-row {
  grid-auto-columns: minmax(230px, 270px);
}

.stream-rail .media-tile:hover {
  transform: translateY(-14px) scale(1.12);
}

.card-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.13);
}

.card-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: var(--glow);
  transition: width 260ms ease;
}

.media-tile.is-started .lesson-thumb small {
  border-color: rgba(255, 226, 158, 0.54);
  color: var(--gold-bright);
}

.topic-poster {
  display: grid;
  min-height: 272px;
  align-items: end;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.84)),
    radial-gradient(circle at 24% 20%, rgba(255, 226, 158, 0.22), transparent 11rem),
    rgba(5, 6, 6, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.stream-modal {
  width: min(980px, calc(100% - 44px));
}

.modal-player {
  position: relative;
  display: grid;
  min-height: 420px;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.88)),
    var(--card-image) center / cover no-repeat;
}

.modal-player.has-embed {
  min-height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

.modal-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
}

.music-coming-page {
  min-height: calc(100vh - 220px);
  align-content: center;
}

.music-coming-soon {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.75fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: center;
  min-height: 610px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 71% 28%, rgba(35, 211, 195, 0.18), transparent 25rem),
    radial-gradient(circle at 82% 68%, rgba(167, 20, 35, 0.22), transparent 25rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(3, 5, 6, 0.58);
}

.music-coming-soon::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(3, 5, 6, 0.74), transparent 48%),
    linear-gradient(180deg, transparent 62%, rgba(3, 5, 6, 0.78));
}

.music-coming-copy {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 6vw, 74px);
}

.music-coming-copy h1 {
  max-width: 780px;
  margin: 0;
  color: transparent;
  background: linear-gradient(92deg, #f3fff9 0%, #29d8cb 34%, #f3d0c1 64%, #a71423 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(76px, 12vw, 158px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.86;
  text-transform: uppercase;
  text-shadow: 0 22px 60px rgba(35, 211, 195, 0.14);
}

.music-coming-copy p:not(.section-label) {
  max-width: 560px;
  margin: 26px 0;
  color: rgba(251, 248, 243, 0.88);
  font-size: clamp(18px, 2.2vw, 25px);
  line-height: 1.42;
}

.music-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}

.music-status-list span {
  padding: 10px 13px;
  border: 1px solid rgba(123, 236, 226, 0.24);
  border-radius: 999px;
  color: #dffffa;
  background: rgba(35, 211, 195, 0.075);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.music-coming-art {
  position: relative;
  z-index: 1;
  min-height: 100%;
  align-self: stretch;
  background:
    radial-gradient(ellipse at 55% 45%, rgba(0, 0, 0, 0) 0 120px, rgba(3, 5, 6, 0.34) 210px, rgba(3, 5, 6, 0.9) 430px),
    linear-gradient(90deg, rgba(3, 5, 6, 0.6), rgba(3, 5, 6, 0.06) 42%, rgba(3, 5, 6, 0.7)),
    url("assets/metamorph-hero.jpg") center center / cover no-repeat;
  filter: saturate(1.14) contrast(1.08);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}

.video-coming-soon .music-coming-art {
  background:
    radial-gradient(ellipse at 54% 44%, rgba(0, 0, 0, 0) 0 118px, rgba(3, 5, 6, 0.3) 214px, rgba(3, 5, 6, 0.9) 430px),
    linear-gradient(90deg, rgba(3, 5, 6, 0.64), rgba(3, 5, 6, 0.04) 46%, rgba(3, 5, 6, 0.76)),
    url("assets/card-videos.png") center center / cover no-repeat;
}

.video-soon-page {
  display: grid;
  gap: 28px;
  padding-top: 42px;
}

body[data-page="videos"] {
  --gold: #23d3c3;
  --gold-bright: #ecfffb;
  --gold-deep: #a71423;
  --text: #fbf8f3;
  --muted: #b9d6d3;
  --line: rgba(123, 236, 226, 0.28);
  --line-strong: rgba(244, 117, 110, 0.45);
  --glow: 0 0 34px rgba(35, 211, 195, 0.26), 0 0 54px rgba(167, 20, 35, 0.16);
  background:
    radial-gradient(circle at 22% 20%, rgba(35, 211, 195, 0.2), transparent 30rem),
    radial-gradient(circle at 82% 42%, rgba(167, 20, 35, 0.18), transparent 34rem),
    linear-gradient(180deg, #050909 0%, #030606 58%, #050303 100%);
}

body[data-page="videos"] .brand,
body[data-page="videos"] .footer-brand span,
body[data-page="videos"] .nav-links a:hover,
body[data-page="videos"] .nav-links a.active {
  color: #dffffa;
}

body[data-page="videos"] .topbar {
  border-color: rgba(139, 245, 236, 0.22);
  background:
    linear-gradient(100deg, rgba(27, 197, 185, 0.08), rgba(169, 24, 36, 0.045)),
    rgba(2, 5, 6, 0.6);
}

body[data-page="videos"] .button.primary {
  border-color: rgba(125, 250, 239, 0.58);
  background:
    linear-gradient(135deg, rgba(216, 255, 249, 0.92), rgba(35, 211, 195, 0.72) 42%, rgba(117, 14, 26, 0.76)),
    rgba(3, 8, 8, 0.5);
  box-shadow: 0 20px 56px rgba(35, 211, 195, 0.22), 0 0 44px rgba(167, 20, 35, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.52);
  color: #020606;
}

body[data-page="about"] {
  --gold: #23d3c3;
  --gold-bright: #ecfffb;
  --gold-deep: #a71423;
  --text: #fbf8f3;
  --muted: #b9d6d3;
  --line: rgba(123, 236, 226, 0.28);
  --line-strong: rgba(244, 117, 110, 0.45);
  --glow: 0 0 34px rgba(35, 211, 195, 0.26), 0 0 54px rgba(167, 20, 35, 0.16);
  background:
    radial-gradient(circle at 18% 28%, rgba(35, 211, 195, 0.2), transparent 30rem),
    radial-gradient(circle at 78% 42%, rgba(167, 20, 35, 0.18), transparent 34rem),
    linear-gradient(180deg, #050909 0%, #030606 58%, #050303 100%);
}

body[data-page="about"] .brand,
body[data-page="about"] .footer-brand span,
body[data-page="about"] .nav-links a:hover,
body[data-page="about"] .nav-links a.active {
  color: #dffffa;
}

body[data-page="about"] .topbar {
  border-color: rgba(139, 245, 236, 0.22);
  background:
    linear-gradient(100deg, rgba(27, 197, 185, 0.08), rgba(169, 24, 36, 0.045)),
    rgba(2, 5, 6, 0.6);
}

body[data-page="about"] .button.primary {
  border-color: rgba(125, 250, 239, 0.58);
  background:
    linear-gradient(135deg, rgba(216, 255, 249, 0.92), rgba(35, 211, 195, 0.72) 42%, rgba(117, 14, 26, 0.76)),
    rgba(3, 8, 8, 0.5);
  box-shadow: 0 20px 56px rgba(35, 211, 195, 0.22), 0 0 44px rgba(167, 20, 35, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.52);
  color: #020606;
}

.about-redesign {
  display: grid;
  gap: 28px;
  padding-top: 42px;
}

.about-hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(430px, 0.95fr) minmax(380px, 1.05fr);
  min-height: clamp(560px, calc(100vh - 180px), 760px);
  overflow: hidden;
  border: 1px solid rgba(123, 236, 226, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 36%, rgba(35, 211, 195, 0.18), transparent 28rem),
    radial-gradient(circle at 90% 52%, rgba(167, 20, 35, 0.18), transparent 32rem),
    rgba(2, 5, 6, 0.68);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

.about-hero-panel::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 52% 40%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 52% 40%, #000, transparent 72%);
  opacity: 0.7;
}

.about-hero-panel .about-story {
  display: grid;
  align-content: center;
  padding: clamp(38px, 6vw, 76px);
}

.about-hero-panel .about-story h1 {
  max-width: 680px;
  margin: 0 0 26px;
  color: transparent;
  background: linear-gradient(92deg, #f3fff9 0%, #2bd8cc 34%, #f0c8bd 66%, #a71423 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(62px, 7.5vw, 118px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.84;
  text-transform: uppercase;
}

.about-hero-panel .about-story p:not(.section-label) {
  max-width: 560px;
  color: rgba(251, 248, 243, 0.86);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.48;
}

.about-hero-panel .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.about-hero-panel .about-page-art {
  position: relative;
  min-height: inherit;
  background:
    radial-gradient(ellipse at 56% 42%, rgba(0, 0, 0, 0) 0 150px, rgba(3, 5, 6, 0.34) 250px, rgba(3, 5, 6, 0.92) 520px),
    linear-gradient(90deg, rgba(3, 6, 7, 0.88), rgba(3, 6, 7, 0.08) 34%, rgba(3, 6, 7, 0.72) 100%),
    url("assets/metamorph-hero.jpg") center center / cover no-repeat;
  filter: contrast(1.16) saturate(1.16);
}

.about-hero-panel .signature {
  right: 42px;
  bottom: 42px;
  color: #dffffa;
  text-shadow: 0 0 24px rgba(35, 211, 195, 0.26);
}

.about-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.about-principles article {
  min-height: 168px;
  padding: 24px;
  border: 1px solid rgba(123, 236, 226, 0.17);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(35, 211, 195, 0.08), rgba(167, 20, 35, 0.045)),
    rgba(3, 6, 7, 0.52);
  box-shadow: var(--glass-inset);
}

.about-principles span,
.about-principles strong {
  display: block;
}

.about-principles span {
  margin-bottom: 28px;
  color: #23d3c3;
  font-size: 12px;
  font-weight: 900;
}

.about-principles strong {
  margin-bottom: 10px;
  color: #fff;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
}

.about-principles p {
  max-width: 30ch;
  margin: 0;
  color: rgba(251, 248, 243, 0.72);
  font-size: 14px;
  line-height: 1.45;
}

.video-soon-hero {
  position: relative;
  min-height: clamp(590px, calc(100vh - 170px), 780px);
  overflow: hidden;
  border: 1px solid rgba(123, 236, 226, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 34%, rgba(35, 211, 195, 0.18), transparent 28rem),
    radial-gradient(circle at 90% 52%, rgba(167, 20, 35, 0.18), transparent 32rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(2, 5, 6, 0.68);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

.video-soon-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(3, 6, 7, 0.9) 0%, rgba(3, 6, 7, 0.76) 34%, rgba(3, 6, 7, 0.1) 64%, rgba(3, 6, 7, 0.82) 100%),
    linear-gradient(180deg, rgba(3, 6, 7, 0.5), transparent 34%, rgba(3, 6, 7, 0.92)),
    url("assets/card-videos.png") 72% center / cover no-repeat;
  filter: contrast(1.16) saturate(0.92);
}

.video-soon-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 54% 40%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 54% 40%, #000, transparent 72%);
  opacity: 0.8;
}

.video-soon-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  width: min(610px, 58%);
  min-height: inherit;
  padding: clamp(36px, 7vw, 86px);
}

.video-soon-copy h1 {
  max-width: 720px;
  margin: 0;
  color: transparent;
  background: linear-gradient(92deg, #f3fff9 0%, #2bd8cc 34%, #f0c8bd 66%, #a71423 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(76px, 10.5vw, 150px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.82;
  text-transform: uppercase;
}

.video-soon-copy p:not(.section-label) {
  max-width: 520px;
  margin: 24px 0 28px;
  color: rgba(251, 248, 243, 0.86);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.44;
}

.video-soon-copy .sound-rule {
  color: #23d3c3;
}

.video-status-list span {
  border-color: rgba(123, 236, 226, 0.3);
  color: #dffffa;
  background: rgba(35, 211, 195, 0.08);
}

.video-stage {
  position: absolute;
  right: clamp(28px, 6vw, 84px);
  bottom: clamp(28px, 5vw, 70px);
  z-index: 2;
  display: grid;
  width: min(360px, 30vw);
  min-height: 150px;
  align-content: end;
  padding: 22px;
  border: 1px solid rgba(123, 236, 226, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.02)),
    rgba(3, 6, 7, 0.58);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.video-stage span {
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
  border: 1px solid rgba(236, 255, 251, 0.7);
  border-radius: 50%;
}

.video-stage span::before {
  display: block;
  width: 0;
  height: 0;
  margin: 19px 0 0 22px;
  content: "";
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #ecfffb;
}

.video-stage strong {
  color: #ecfffb;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.video-stage a {
  display: grid;
  color: inherit;
}

.video-soon-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.video-soon-rail article {
  min-height: 154px;
  padding: 22px;
  border: 1px solid rgba(123, 236, 226, 0.17);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(35, 211, 195, 0.08), rgba(167, 20, 35, 0.045)),
    rgba(3, 6, 7, 0.52);
  box-shadow: var(--glass-inset);
}

.video-soon-rail span,
.video-soon-rail strong,
.video-soon-rail small {
  display: block;
}

.video-soon-rail span {
  margin-bottom: 26px;
  color: #23d3c3;
  font-size: 12px;
  font-weight: 900;
}

.video-soon-rail strong {
  margin-bottom: 10px;
  color: #fff;
  font-size: 24px;
  line-height: 1.05;
  text-transform: uppercase;
}

.video-soon-rail small {
  max-width: 30ch;
  color: rgba(251, 248, 243, 0.72);
  font-size: 14px;
  line-height: 1.4;
}

.youtube-feed-section {
  display: grid;
  gap: 22px;
  padding: 30px;
  border: 1px solid rgba(255, 224, 138, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(220, 167, 67, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(5, 5, 5, 0.58);
  box-shadow: var(--glass-inset);
}

.youtube-feed-section[hidden] {
  display: none;
}

.feed-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.feed-heading h2 {
  margin: 4px 0 0;
  color: #fff5d8;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(42px, 6vw, 82px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 0.95;
  text-transform: uppercase;
}

.youtube-feed-status {
  color: rgba(251, 248, 243, 0.72);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.youtube-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.youtube-feature-panel {
  min-width: 0;
}

.youtube-feature-card {
  display: grid;
  width: 100%;
  min-height: 100%;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 224, 138, 0.18);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(5, 5, 5, 0.76);
  color: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--glass-inset), 0 22px 60px rgba(0, 0, 0, 0.34);
}

.youtube-feature-art {
  position: relative;
  min-width: 0;
  min-height: 280px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.56)),
    var(--card-image) center / cover no-repeat;
}

.youtube-feature-art .play-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 224, 138, 0.64);
  border-radius: 50%;
  color: #ffe39a;
  background: rgba(5, 5, 5, 0.62);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
}

.youtube-feature-copy {
  display: grid;
  align-content: end;
  gap: 16px;
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
}

.youtube-feature-copy small,
.youtube-feature-copy em,
.youtube-feed-card small,
.youtube-feed-card .tile-open {
  color: #dca743;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.youtube-feature-copy strong {
  display: block;
  max-width: 100%;
  min-width: 0;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 700;
  line-height: 0.98;
  text-transform: uppercase;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

.youtube-feed-card {
  overflow: hidden;
  border: 1px solid rgba(255, 224, 138, 0.16);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    rgba(5, 5, 5, 0.64);
  box-shadow: var(--glass-inset);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.youtube-feed-card:hover,
.youtube-feed-card:focus-within,
.youtube-feature-card:hover,
.youtube-feature-card:focus-visible {
  border-color: rgba(255, 224, 138, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(8, 8, 8, 0.76);
  transform: translateY(-3px);
}

.youtube-feed-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.46)),
    var(--card-image) center / cover no-repeat;
}

.youtube-feed-thumb .play-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 224, 138, 0.58);
  border-radius: 50%;
  color: #ffe39a;
  background: rgba(5, 5, 5, 0.58);
}

.youtube-feed-card div {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.youtube-feed-card h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.06;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
}

.youtube-feed-card .tile-open {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.modal-play {
  display: inline-flex;
  min-height: 62px;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border: 1px solid rgba(255, 226, 158, 0.72);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--glow);
  backdrop-filter: blur(12px);
  transition: transform 180ms ease, background 180ms ease;
}

.modal-play:hover {
  transform: scale(1.04);
  background: rgba(220, 167, 67, 0.2);
}

.modal-play.is-playing {
  border-color: rgba(255, 255, 255, 0.34);
}

.fake-player-controls {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  color: #f7f0e1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fake-player-controls div {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.fake-player-controls div span {
  display: block;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

.modal-titlebar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
}

.modal-tabs {
  display: flex;
  gap: clamp(12px, 2vw, 22px);
  align-items: stretch;
  margin: 22px 0 18px;
  min-height: 56px;
  padding: 8px 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  overflow-y: visible;
}

.modal-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 2px 15px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}

.modal-tabs button.active {
  color: var(--gold-bright);
}

.modal-tabs button.active::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  content: "";
  background: var(--gold-bright);
  box-shadow: var(--glow);
}

.modal-panel {
  display: none;
}

.modal-panel.active {
  display: block;
}

[data-modal-description] {
  white-space: pre-line;
}

.modal-episode-list,
.resource-list {
  display: grid;
  gap: 10px;
}

.modal-episode-list a,
.resource-list a {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  transition: border-color 180ms ease, background 180ms ease;
}

.resource-list a {
  grid-template-columns: 1fr auto;
}

.modal-episode-list a:hover,
.resource-list a:hover {
  border-color: rgba(255, 226, 158, 0.54);
  background: rgba(255, 255, 255, 0.08);
}

.modal-episode-list span {
  color: var(--gold-bright);
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: 25px;
  letter-spacing: 0.06em;
}

.modal-episode-list strong,
.resource-list span {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

.modal-episode-list small,
.resource-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-video-browser {
  display: grid;
  grid-auto-columns: minmax(238px, 34%);
  grid-auto-flow: column;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scroll-padding-left: 2px;
  scroll-snap-type: x proximity;
}

.modal-video-browser::-webkit-scrollbar {
  height: 6px;
}

.modal-video-browser::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.modal-video-browser::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 226, 158, 0.42);
}

.modal-video-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(7, 9, 15, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  scroll-snap-align: start;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.modal-video-card:hover,
.modal-video-card:focus-visible,
.modal-video-card.active {
  border-color: rgba(255, 226, 158, 0.68);
  box-shadow: 0 0 28px rgba(220, 167, 67, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

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

.modal-video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(180deg, rgba(3, 5, 10, 0.05), rgba(3, 5, 10, 0.58)),
    var(--browser-image) center / cover no-repeat;
}

.modal-video-thumb .play-badge {
  position: absolute;
  left: 18px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(255, 226, 158, 0.82);
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgba(5, 7, 12, 0.36);
  box-shadow: 0 0 22px rgba(220, 167, 67, 0.18);
}

.modal-video-copy {
  display: grid;
  gap: 9px;
  min-height: 176px;
  padding: 16px 16px 18px;
}

.modal-video-copy small {
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.modal-video-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.modal-video-copy em {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(248, 245, 237, 0.68);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 720px) {
  .modal-video-browser {
    grid-auto-columns: minmax(242px, 86%);
  }

  .modal-video-copy {
    min-height: 148px;
  }

  .modal-video-copy strong {
    font-size: 14px;
    line-height: 1.14;
  }

  .modal-video-copy em {
    font-size: 12px;
    -webkit-line-clamp: 4;
  }
}

.episode-shell .topbar {
  margin-bottom: 24px;
}

.episode-video {
  position: relative;
}

.episode-video::after {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  height: 5px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, var(--gold) 0 38%, rgba(255, 255, 255, 0.16) 38% 100%);
}

.episode-copy .stream-meta {
  margin-bottom: 24px;
}

.episode-watchlist {
  display: grid;
  gap: 12px;
}

.episode-watchlist a {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.episode-watchlist span {
  color: var(--gold-bright);
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: 28px;
}

.episode-watchlist strong {
  text-transform: uppercase;
}

.episode-watchlist small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .mini-player-wave span {
    animation: none;
  }
}

@media (max-width: 1080px) {
  .site-shell {
    width: min(920px, calc(100% - 32px));
  }

  .topbar {
    grid-template-columns: 1fr auto;
  }

  .menu-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    place-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
  }

  .menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
  }

  .nav-links,
  .socials {
    display: none;
  }

  .topbar.nav-open .nav-links,
  .topbar.nav-open .socials {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 20px;
  }

  .topbar.nav-open .nav-links {
    flex-wrap: wrap;
    gap: 18px 28px;
  }

  .hero {
    min-height: 660px;
  }

  .hero-art {
    width: 82vw;
    opacity: 0.72;
  }

  .now-playing {
    right: 22px;
  }

  .release,
  .cards,
  .about {
    width: 100%;
  }

  .release {
    grid-template-columns: 210px 1fr;
    gap: 36px;
  }

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

  .cards {
    gap: 16px;
  }

  .about {
    grid-template-columns: 300px 1fr;
  }

  .content-grid,
  .video-grid,
  .shop-grid,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .library-hero,
  .library-controlbar,
  .continue-strip,
  .episode-layout {
    grid-template-columns: 1fr;
  }

  .stream-hero {
    min-height: 620px;
    background-position: 64% center;
  }

  .hero-preview-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 420px);
    margin-top: 28px;
  }

  .modal-titlebar {
    grid-template-columns: 1fr;
  }

  .library-toolbar {
    justify-content: flex-start;
  }

  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .episode-notes {
    grid-template-columns: 1fr;
  }

  .about-page-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-shell {
    width: min(560px, calc(100% - 44px));
    margin-top: 14px;
  }

  .topbar {
    top: 10px;
    min-height: 66px;
    padding: 13px 14px 13px 18px;
  }

  .brand,
  .footer-brand span {
    font-size: 17px;
    letter-spacing: 0.28em;
  }

  .hero {
    min-height: 540px;
    padding: 58px 0 26px;
    overflow: hidden;
  }

  .hero-copy {
    padding-top: 54px;
  }

  .hero h1 {
    width: auto;
    max-width: 100%;
    font-size: clamp(42px, 14vw, 66px);
    line-height: 0.92;
    transform: none;
  }

  .tagline {
    max-width: 330px;
    font-size: clamp(11px, 3.6vw, 15px);
    letter-spacing: 0.14em;
    line-height: 1.5;
    white-space: normal;
  }

  .hero-art {
    top: 58px;
    right: -72px;
    bottom: auto;
    width: min(560px, 132vw);
    height: 420px;
    opacity: 0.62;
    background:
      radial-gradient(ellipse at 72% 76%, var(--bg) 0 112px, rgba(2, 3, 3, 0.72) 142px, transparent 196px),
      linear-gradient(180deg, var(--bg) 0 28px, rgba(2, 3, 3, 0.02) 130px, rgba(2, 3, 3, 0.1) 62%, var(--bg) 96%),
      linear-gradient(90deg, var(--bg) 0%, rgba(2, 3, 3, 0.18) 20%, rgba(2, 3, 3, 0.02) 72%, rgba(2, 3, 3, 0.9) 100%),
      url("assets/hero-portrait.png") 42% top / auto 360px no-repeat;
  }

  .hero-actions {
    gap: 13px;
  }

  .button {
    width: 100%;
    min-height: 54px;
  }

  .now-playing,
  .scroll-cue {
    display: none;
  }

  .release {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 0;
    padding: 22px;
  }

  .cover {
    width: min(100%, 260px);
    justify-self: center;
  }

  .release h2 {
    font-size: clamp(34px, 10vw, 40px);
    letter-spacing: 0.06em;
    overflow-wrap: normal;
  }

  .platforms {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .platform.amazon {
    grid-column: auto;
  }

  .platform {
    min-width: 0;
    padding-inline: 10px;
    gap: 7px;
    font-size: 11px;
    text-align: center;
    white-space: normal;
  }

  .cards {
    grid-template-columns: 1fr;
    width: 100%;
    margin-inline: 0;
  }

  .feature-card {
    min-height: 245px;
  }

  .about {
    grid-template-columns: 1fr;
    min-height: 460px;
  }

  .about-art {
    inset: 38% 0 0;
  }

  .signature {
    padding: 0 30px 38px 0;
    font-size: 40px;
  }

  .footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .subpage {
    padding-top: 26px;
  }

  .page-hero {
    min-height: 310px;
  }

  .page-hero > div {
    padding: 30px 24px;
  }

  .page-hero h1,
  .contact-copy h1,
  .about-story h1 {
    font-size: clamp(48px, 15vw, 70px);
  }

  .about-story h1 {
    font-size: clamp(44px, 13.5vw, 66px);
  }

  .music-page {
    grid-template-columns: 1fr;
  }

  .music-page img {
    display: none;
  }

  .content-card,
  .shop-card,
  .video-tile,
  .contact-copy,
  .contact-form,
  .about-story {
    padding: 24px;
  }

  .library-hero {
    min-height: 0;
    padding: 20px;
  }

  .stream-hero {
    min-height: 610px;
    padding: 28px 20px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.82) 58%, #020303 100%),
      var(--hero-image) 68% top / auto 68% no-repeat;
  }

  .stream-hero-copy {
    padding-top: 245px;
  }

  .stream-hero h1 {
    font-size: clamp(50px, 15vw, 72px);
  }

  .stream-hero-copy > p:not(.section-label) {
    font-size: 15px;
  }

  .stream-meta {
    gap: 7px;
  }

  .stream-meta span {
    font-size: 10px;
  }

  .hero-preview-card {
    display: none;
  }

  .library-hero-copy {
    padding: 8px 4px;
  }

  .library-hero-copy h1 {
    font-size: clamp(52px, 14vw, 76px);
  }

  .library-hero-media {
    min-height: 260px;
  }

  .glass-video-poster strong {
    font-size: 25px;
  }

  .library-controlbar {
    position: static;
  }

  .library-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .library-filter {
    flex: 0 0 auto;
  }

  .continue-strip {
    gap: 16px;
  }

  .shelf-heading {
    align-items: flex-start;
  }

  .shelf-row {
    grid-auto-columns: minmax(238px, 84vw);
  }

  .stream-rail .shelf-row,
  .stream-rail .compact-row {
    grid-auto-columns: minmax(236px, 78vw);
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .rail-controls {
    display: none;
  }

  .media-tile:hover {
    transform: none;
  }

  .media-tile:hover .lesson-thumb {
    min-height: 150px;
  }

  .tile-actions {
    opacity: 1;
    transform: none;
  }

  .video-modal {
    width: min(100% - 22px, 560px);
  }

  .modal-poster {
    min-height: 250px;
  }

  .modal-player {
    min-height: 270px;
  }

  .modal-body {
    padding: 22px;
  }

  .modal-tabs {
    overflow-x: auto;
    overflow-y: visible;
    padding-inline: 12px;
  }

  .modal-episode-list a,
  .episode-watchlist a {
    grid-template-columns: 34px 1fr;
  }

  .modal-episode-list small,
  .episode-watchlist small {
    grid-column: 2;
  }

  .resource-list a {
    grid-template-columns: 1fr;
  }

  .episode-layout {
    padding: 18px;
  }

  .episode-video {
    min-height: 260px;
  }

  .topic-grid {
    grid-template-columns: 1fr;
  }

  .topic-tile {
    min-height: 96px;
  }

  .video-tile {
    min-height: 300px;
  }

  .shop-image {
    margin: -24px -24px 22px;
  }

  .about-page-art {
    min-height: 330px;
  }

  address {
    justify-self: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Full-site streaming polish */
.topbar {
  grid-template-columns: minmax(190px, 245px) 1fr auto;
  gap: 16px;
}

.socials a,
.footer-socials a,
.platform,
.feature-card,
.content-card,
.shop-card,
.video-tile {
  will-change: transform;
}

.socials a,
.footer-socials a {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.socials a:hover,
.footer-socials a:hover {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(255, 226, 158, 0.72);
  box-shadow: var(--glow);
}

.socials a:nth-child(3) svg,
.socials a:nth-child(4) svg,
.socials a:nth-child(5) svg {
  fill: #f3f3f3;
  stroke: none;
}

.platform svg.logo-spotify {
  fill: #1ed760;
}

.platform svg.logo-spotify path {
  fill: none;
  stroke: #050505;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.platform svg.logo-youtube path:first-child {
  fill: #ff0033;
}

.platform svg.logo-youtube path:last-child {
  fill: #fff;
  stroke: none;
}

.platform svg.logo-amazon {
  width: 34px;
  height: 26px;
  fill: none;
}

.platform svg.logo-amazon text {
  fill: var(--gold-bright);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
}

.platform svg.logo-amazon path {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.platform.spotify span,
.platform.youtube span,
.platform.amazon span {
  display: none;
}

.cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1100px, calc(100% - 72px));
  gap: 18px;
}

.feature-card {
  min-height: 305px;
  transform-origin: center bottom;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.feature-card:hover {
  z-index: 6;
  transform: translateY(-14px) scale(1.08);
  border-color: rgba(255, 226, 158, 0.66);
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.6), var(--glow);
}

.feature-card a svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-hero {
  min-height: min(590px, calc(100vh - 150px));
  margin-bottom: 22px;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(90deg, rgba(2, 3, 3, 0.96), rgba(2, 3, 3, 0.5) 42%, rgba(2, 3, 3, 0.08) 76%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 48%, #020303 100%),
    var(--page-image, url("assets/hero-portrait.png")) 72% center / cover no-repeat;
  box-shadow: inset 0 -120px 110px #020303, 0 28px 90px rgba(0, 0, 0, 0.52);
}

.page-hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle at 72% 24%, rgba(255, 226, 158, 0.2), transparent 24rem);
}

.page-hero > div {
  width: min(660px, 100%);
  padding: clamp(28px, 5vw, 62px);
}

.page-hero h1,
.contact-copy h1,
.about-story h1 {
  font-size: clamp(72px, 10vw, 140px);
  letter-spacing: 0.04em;
}

.about-story h1 {
  background: linear-gradient(90deg, #ffe39a 0%, #e4ad43 72%, #c98922 100%);
  background-clip: text;
  font-size: clamp(48px, 4vw, 56px);
  letter-spacing: 0.03em;
}

.contact-copy h1 {
  background: linear-gradient(90deg, #ffe39a 0%, #e2aa3f 74%, #bd7b1e 100%);
  background-clip: text;
  font-size: clamp(56px, 6.4vw, 88px);
  letter-spacing: 0.025em;
}

.music-page {
  grid-template-columns: 1fr;
}

.music-page img {
  position: absolute;
  right: clamp(30px, 6vw, 88px);
  bottom: clamp(30px, 5vw, 68px);
  width: min(245px, 24vw);
  margin: 0;
}

.content-grid,
.video-grid,
.shop-grid {
  grid-auto-flow: column;
  grid-auto-columns: minmax(255px, 1fr);
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 20px 3px 38px;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.content-grid::-webkit-scrollbar,
.video-grid::-webkit-scrollbar,
.shop-grid::-webkit-scrollbar {
  display: none;
}

.content-card,
.shop-card,
.video-tile {
  min-width: 0;
  scroll-snap-align: start;
  transform-origin: center bottom;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.content-card:hover,
.shop-card:hover,
.video-tile:hover {
  z-index: 5;
  transform: translateY(-13px) scale(1.06);
  border-color: rgba(255, 226, 158, 0.62);
  box-shadow: 0 28px 74px rgba(0, 0, 0, 0.58), var(--glow);
}

.content-card {
  display: grid;
  align-content: end;
  min-height: 310px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.9)),
    radial-gradient(circle at 70% 18%, rgba(255, 226, 158, 0.18), transparent 11rem),
    rgba(5, 6, 6, 0.78);
}

.content-card::before {
  position: absolute;
  top: 26px;
  left: 26px;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 226, 158, 0.58);
  border-radius: 50%;
  color: var(--gold-bright);
  content: "♪";
  font-size: 29px;
  background: rgba(218, 167, 67, 0.08);
}

.content-card:nth-child(2)::before {
  content: "▶";
  font-size: 22px;
}

.content-card:nth-child(3)::before {
  content: "★";
  font-size: 24px;
}

.shop-card {
  display: grid;
  align-content: end;
}

.shop-image {
  min-height: 245px;
  transition: transform 240ms ease, filter 240ms ease;
}

.shop-card:hover .shop-image {
  transform: scale(1.04);
  filter: brightness(1.08);
}

body[data-page="merch"] .subpage {
  padding-top: 38px;
}

.merch-shop {
  display: grid;
  gap: 28px;
}

.merch-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) 1.18fr;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(3, 3, 3, 0.94), rgba(3, 3, 3, 0.46) 48%, rgba(3, 3, 3, 0.2)),
    url("assets/card-merch.png") 72% center / cover no-repeat,
    #050505;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 34px 90px rgba(0, 0, 0, 0.56);
}

.merch-hero::after,
.featured-product::after,
.drop-panel::after {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 158, 0.62), #fff, transparent);
  box-shadow: 0 0 20px rgba(255, 224, 138, 0.38);
}

.merch-hero-copy {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: clamp(28px, 5vw, 64px);
}

.merch-hero-copy h1 {
  max-width: 620px;
  margin: 0 0 18px;
  color: #f3efe8;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(62px, 8vw, 118px);
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 0.88;
  text-transform: uppercase;
}

.merch-hero-copy p:not(.section-label) {
  max-width: 500px;
  margin: 0 0 28px;
  color: #d7d1c7;
  font-size: 18px;
  line-height: 1.55;
}

.merch-actions,
.shop-tabs,
.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.merch-hero-product {
  position: absolute;
  right: clamp(22px, 4vw, 58px);
  bottom: clamp(22px, 4vw, 58px);
  z-index: 2;
  display: grid;
  min-width: 190px;
  gap: 9px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(5, 6, 6, 0.66);
  backdrop-filter: blur(14px);
}

.merch-hero-product span,
.product-info p,
.product-meta span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.merch-hero-product strong {
  color: #f8f4ed;
  font-size: 19px;
  text-transform: uppercase;
}

.shop-toolbar {
  position: sticky;
  top: 108px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(3, 4, 4, 0.82);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.shop-toolbar .section-label {
  margin-bottom: 4px;
}

.shop-toolbar h2 {
  margin: 0;
  color: #f4efe7;
  font-size: 18px;
  text-transform: uppercase;
}

.shop-tabs a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #f4efe7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.035);
}

.shop-tabs a:hover {
  border-color: rgba(255, 226, 158, 0.55);
  color: var(--gold-bright);
}

.featured-product {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 1.1fr) minmax(280px, 0.9fr);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: #050606;
}

.featured-media {
  min-height: 520px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.46)),
    var(--card-image) center / cover no-repeat;
}

.featured-copy {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(28px, 5vw, 58px);
  background:
    radial-gradient(circle at 100% 0%, rgba(218, 167, 67, 0.18), transparent 13rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.016));
}

.featured-copy h2,
.drop-panel h2 {
  margin: 0;
  color: #f5f0e8;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-transform: uppercase;
}

.featured-copy p:not(.section-label) {
  margin: 0;
  color: #d9d2c8;
  font-size: 17px;
  line-height: 1.55;
}

.product-meta span {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.product-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: #070808;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.product-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 226, 158, 0.5);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.52), var(--glow);
}

.product-image {
  min-height: clamp(290px, 34vw, 420px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.5)),
    var(--card-image) center / cover no-repeat;
  transition: transform 260ms ease, filter 260ms ease;
}

.product-card:hover .product-image {
  transform: scale(1.035);
  filter: brightness(1.05);
}

.product-info {
  display: grid;
  gap: 7px;
  padding: 18px 18px 20px;
}

.product-info h2 {
  margin: 0;
  color: #f6f1e9;
  font-size: 20px;
  text-transform: uppercase;
}

.product-info span {
  color: #bcb5aa;
  font-size: 14px;
}

.product-card > a {
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.drop-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 0.92fr);
  gap: 28px;
  align-items: center;
  overflow: hidden;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 110%, rgba(218, 167, 67, 0.24), transparent 16rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.016)),
    #060707;
}

.drop-panel form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.drop-panel input {
  min-height: 50px;
  min-width: 0;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
}

.drop-panel input::placeholder {
  color: #aaa39b;
}

.merch-store {
  width: min(1280px, 100%);
  margin-inline: auto;
  color: #f6f1e6;
}

.store-masthead,
.store-controls,
.store-grid,
.product-dialog,
.bag-drawer {
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
}

.store-masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 310px;
  margin-bottom: 0;
  padding: clamp(34px, 6vw, 76px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(90deg, #050505 0%, rgba(5, 5, 5, 0.98) 46%, rgba(5, 5, 5, 0.86) 72%, rgba(5, 5, 5, 0.56)),
    radial-gradient(circle at 78% 8%, rgba(255, 219, 137, 0.26), transparent 25rem),
    url("assets/card-merch.png") right 45% / auto 108% no-repeat,
    #050505;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 218, 126, 0.18), 0 38px 110px rgba(0, 0, 0, 0.48);
}

.store-masthead p,
.store-product-meta small,
.product-detail-copy > p,
.store-controls a,
.store-controls button,
.bag-button,
.product-detail-copy label,
.product-detail-copy summary,
.bag-summary,
.bag-drawer small {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.store-masthead p {
  margin: 0 0 8px;
  color: var(--gold-bright);
}

.store-masthead span:not([data-bag-count]) {
  display: block;
  max-width: 410px;
  margin-top: 18px;
  color: rgba(246, 241, 230, 0.72);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

.store-masthead h1 {
  margin: 0;
  max-width: 780px;
  color: #fff8e5;
  font-size: clamp(44px, 8vw, 112px);
  font-weight: 400;
  letter-spacing: 0.11em;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 0 38px rgba(217, 158, 55, 0.16);
}

.bag-button,
.store-controls button {
  min-height: 46px;
  border: 1px solid rgba(255, 224, 138, 0.3);
  color: #fff4d0;
  background: rgba(0, 0, 0, 0.36);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.bag-button {
  padding: 0 18px;
  backdrop-filter: blur(16px);
}

.bag-button:hover,
.store-controls button:hover {
  border-color: rgba(255, 224, 138, 0.7);
  background: rgba(220, 167, 67, 0.14);
  transform: translateY(-1px);
}

.bag-button span {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  margin-left: 8px;
  place-items: center;
  border-radius: 50%;
  color: #050505;
  background: var(--gold-bright);
}

.store-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 72px;
  margin: 18px 0 24px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(6, 7, 7, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.store-controls nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 52px);
}

.store-controls a {
  position: relative;
  color: rgba(246, 241, 230, 0.76);
  transition: color 160ms ease;
}

.store-controls a::after {
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 0;
  height: 1px;
  background: var(--gold-bright);
  content: "";
  transition: width 160ms ease;
}

.store-controls a:hover {
  color: var(--gold-bright);
}

.store-controls a:hover::after {
  width: 100%;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0 0 44px;
  background: transparent;
}

.store-product {
  display: grid;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: #050505;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.store-product-open {
  position: relative;
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.store-product-image {
  display: block;
  min-height: clamp(430px, 52vw, 700px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.5)),
    radial-gradient(circle at 50% 10%, rgba(255, 224, 138, 0.1), transparent 22rem),
    var(--card-image) center / cover no-repeat,
    #0a0a0a;
  transition: filter 240ms ease, transform 260ms ease;
}

.store-product-open:hover .store-product-image,
.store-product-open:focus-visible .store-product-image {
  filter: brightness(1.08) saturate(1.05);
  transform: scale(1.018);
}

.store-product-meta {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  min-height: 136px;
  padding: 28px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9) 34%, rgba(0, 0, 0, 0.98));
}

.store-product-meta small,
.product-detail-copy > p {
  color: var(--gold-bright);
}

.store-product-meta small {
  grid-column: 1 / -1;
}

.store-product-meta strong {
  color: #fff8ec;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.store-product-meta em {
  align-self: end;
  color: rgba(246, 241, 230, 0.76);
  font-style: normal;
  font-size: 18px;
}

.store-product-meta b {
  grid-column: 1 / -1;
  width: max-content;
  margin-top: 10px;
  border-bottom: 1px solid rgba(255, 224, 138, 0.68);
  color: rgba(255, 224, 138, 0.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.store-product-open:hover .store-product-meta b,
.store-product-open:focus-visible .store-product-meta b {
  opacity: 1;
  transform: translateY(0);
}

.product-dialog,
.bag-drawer {
  border: 1px solid rgba(255, 224, 138, 0.24);
  color: #f6f1e6;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 224, 138, 0.12), transparent 18rem),
    #070707;
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.72);
}

.product-dialog::backdrop,
.bag-drawer::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
}

.product-dialog {
  width: min(1180px, calc(100vw - 34px));
  max-height: calc(100dvh - 34px);
  padding: 0;
}

.product-dialog[open] {
  display: grid;
  grid-template-columns: minmax(340px, 1.1fr) minmax(360px, 0.9fr);
}

.dialog-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 0;
  color: #fff4d0;
  font-size: 28px;
  line-height: 1;
  background: transparent;
  cursor: pointer;
}

.product-detail-image {
  min-height: min(820px, calc(100dvh - 34px));
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.42)),
    var(--detail-image) center / cover no-repeat,
    #0a0a0a;
}

.product-detail-copy {
  display: grid;
  align-content: center;
  gap: 20px;
  padding: clamp(28px, 5vw, 62px);
}

.product-detail-copy h2 {
  margin: 0;
  color: #fff8ec;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.product-detail-copy > strong {
  color: rgba(246, 241, 230, 0.76);
  font-size: 18px;
  font-weight: 400;
}

.product-detail-copy label {
  display: grid;
  gap: 9px;
  color: rgba(246, 241, 230, 0.72);
}

.product-detail-copy select,
.drop-panel input {
  appearance: none;
}

.product-detail-copy select {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff8ec;
  background: rgba(255, 255, 255, 0.04);
}

.add-cart-button {
  min-height: 58px;
  border: 1px solid rgba(255, 224, 138, 0.42);
  color: #050505;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff0b1, #dca743 55%, #9f6d1f);
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(220, 167, 67, 0.24);
  transition: filter 160ms ease, transform 160ms ease;
}

.add-cart-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.product-detail-copy > p:last-of-type {
  margin: 4px 0 10px;
  color: rgba(246, 241, 230, 0.78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  letter-spacing: 0.01em;
  line-height: 1.55;
  text-transform: none;
}

.product-detail-copy details {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 16px;
}

.product-detail-copy details p {
  color: rgba(246, 241, 230, 0.68);
  font-size: 15px;
  line-height: 1.55;
}

.bag-drawer {
  width: min(460px, 100vw);
  min-height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 32px;
}

.bag-drawer[open] {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 22px;
}

.bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bag-head h2 {
  margin: 0;
  color: #fff8ec;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bag-head .dialog-close {
  position: static;
}

.bag-items {
  display: grid;
  align-content: start;
  gap: 18px;
  overflow: auto;
}

.bag-items > p {
  color: rgba(246, 241, 230, 0.66);
}

.bag-line {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.bag-line-image {
  min-height: 102px;
  background: var(--line-image) center / cover no-repeat #0a0a0a;
}

.bag-line strong {
  display: block;
  margin-bottom: 5px;
  color: #fff8ec;
}

.bag-line span {
  display: block;
  color: rgba(246, 241, 230, 0.68);
  font-size: 14px;
  line-height: 1.45;
}

.bag-summary {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff8ec;
}

.checkout-form {
  display: grid;
  gap: 12px;
}

.checkout-form input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff8ec;
  background: rgba(255, 255, 255, 0.04);
}

.checkout-form input::placeholder {
  color: rgba(246, 241, 230, 0.48);
}

.checkout-form small {
  color: rgba(246, 241, 230, 0.66);
  line-height: 1.35;
}

.contact-layout {
  min-height: 540px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.3)),
    url("assets/hero-portrait.png") right center / auto 100% no-repeat,
    rgba(4, 5, 5, 0.74);
  box-shadow: inset 0 -120px 110px #020303, 0 28px 90px rgba(0, 0, 0, 0.52);
}

.about-page-panel {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 -120px 110px rgba(2, 3, 3, 0.7), 0 28px 90px rgba(0, 0, 0, 0.52);
}

.about-page-art {
  transition: transform 280ms ease, filter 280ms ease;
}

.about-page-panel:hover .about-page-art {
  transform: scale(1.025);
  filter: brightness(1.05);
}

@media (max-width: 1180px) {
  .cards {
    grid-auto-flow: column;
    grid-auto-columns: minmax(245px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 34px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .cards::-webkit-scrollbar {
    display: none;
  }

  .feature-card {
    scroll-snap-align: start;
  }
}

@media (max-width: 760px) {
  .page-hero {
    min-height: 520px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.82) 58%, #020303 100%),
      var(--page-image, url("assets/hero-portrait.png")) 64% top / auto 68% no-repeat;
  }

  .page-hero h1,
  .contact-copy h1,
  .about-story h1 {
    font-size: clamp(52px, 15vw, 76px);
  }

  .about-story h1 {
    font-size: clamp(44px, 13.5vw, 66px);
  }

  .contact-copy h1 {
    font-size: clamp(48px, 12vw, 64px);
    letter-spacing: 0.02em;
  }

  .music-page img {
    display: none;
  }

  .cards,
  .content-grid,
  .video-grid,
  .shop-grid {
    grid-auto-columns: minmax(236px, 78vw);
    width: auto;
    margin-inline: 0;
  }

  .cards {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .feature-card {
    min-height: 250px;
    width: 100%;
    scroll-snap-align: none;
  }

  .feature-card:hover,
  .content-card:hover,
  .shop-card:hover,
  .video-tile:hover {
    transform: none;
  }

  .contact-layout {
    padding: 0;
    border: 0;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.88)),
      url("assets/hero-portrait.png") 70% top / auto 55% no-repeat;
  }

  body[data-page="merch"] .subpage {
    padding-top: 22px;
  }

  .merch-shop {
    gap: 20px;
  }

  .merch-hero {
    grid-template-columns: 1fr;
    min-height: 610px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9) 68%, #050505),
      url("assets/card-merch.png") 58% top / auto 72% no-repeat,
      #050505;
  }

  .merch-hero-copy {
    align-self: end;
    padding: 28px 22px;
  }

  .merch-hero-copy h1 {
    font-size: clamp(48px, 15vw, 66px);
  }

  .merch-hero-copy p:not(.section-label) {
    font-size: 15px;
  }

  .merch-actions .button {
    width: 100%;
  }

  .merch-hero-product {
    display: none;
  }

  .shop-toolbar {
    position: relative;
    top: auto;
    display: grid;
    padding: 16px;
  }

  .shop-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .shop-tabs::-webkit-scrollbar {
    display: none;
  }

  .shop-tabs a {
    flex: 0 0 auto;
  }

  .featured-product {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .featured-media {
    min-height: 380px;
  }

  .featured-copy {
    padding: 26px 22px 30px;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card:hover {
    transform: none;
  }

  .product-image {
    min-height: 380px;
  }

  .drop-panel {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .drop-panel form {
    grid-template-columns: 1fr;
  }

  .store-masthead {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 20px;
  }

  .store-masthead h1 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .bag-button {
    justify-self: start;
    min-height: 36px;
  }

  .store-controls {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 20px;
  }

  .store-controls nav {
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 4px;
  }

  .store-controls a {
    flex: 0 0 auto;
  }

  .store-controls button {
    justify-self: start;
  }

  .store-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .store-product-image {
    min-height: 430px;
  }

  .store-product-meta {
    min-height: 96px;
    padding: 14px 0 24px;
  }

  .product-dialog {
    width: 100vw;
    max-height: 100dvh;
  }

  .product-dialog[open] {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .product-detail-image {
    min-height: 430px;
  }

  .product-detail-copy {
    padding: 26px 22px 34px;
  }

  .bag-drawer {
    width: 100vw;
    padding: 24px 20px;
  }
}

/* Premium glassmorphism system */
:root {
  --glass-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.155), rgba(255, 255, 255, 0.038) 42%, rgba(218, 167, 67, 0.055));
  --glass-fill-deep: linear-gradient(145deg, rgba(18, 20, 20, 0.78), rgba(7, 8, 8, 0.42) 48%, rgba(125, 91, 31, 0.1));
  --glass-edge: rgba(255, 255, 255, 0.34);
  --glass-edge-soft: rgba(255, 255, 255, 0.18);
  --glass-top: rgba(255, 255, 255, 0.58);
  --glass-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), 0 0 42px rgba(220, 167, 67, 0.09);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.055);
}

body {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.035), transparent 26rem),
    linear-gradient(245deg, rgba(220, 167, 67, 0.14), transparent 34rem),
    linear-gradient(180deg, #020303 0%, #050606 46%, #020202 100%);
}

body::before {
  opacity: 0.62;
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(120deg, transparent 0 44%, rgba(255, 255, 255, 0.035) 50%, transparent 56%);
  background-size: 56px 56px, 56px 56px, 620px 620px;
}

.topbar,
.glass-panel,
.now-playing,
.feature-card,
.content-card,
.video-tile,
.contact-copy,
.contact-form,
.about-page-panel,
.library-controlbar,
.continue-strip,
.video-modal,
.stream-modal,
.episode-layout,
.episode-watchlist,
.store-masthead,
.store-controls,
.store-product-open,
.product-dialog,
.bag-drawer,
.footer-socials,
.platform,
.button.secondary,
.library-filter,
.modal-tabs,
.modal-episode-list a,
.resource-list a,
.product-detail-copy select,
.contact-form input,
.contact-form select,
.contact-form textarea,
.checkout-form input,
.drop-panel input {
  border-color: var(--glass-edge-soft);
  background: var(--glass-fill), rgba(4, 5, 5, 0.58);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}

.topbar,
.glass-panel,
.now-playing,
.feature-card,
.content-card,
.video-tile,
.contact-copy,
.contact-form,
.about-page-panel,
.library-controlbar,
.continue-strip,
.episode-layout,
.episode-watchlist,
.store-masthead,
.store-controls,
.store-product-open,
.bag-drawer {
  position: relative;
}

.topbar::before,
.glass-panel::before,
.now-playing::before,
.feature-card::after,
.content-card::after,
.video-tile::after,
.contact-copy::before,
.contact-form::before,
.about-page-panel::before,
.library-controlbar::before,
.continue-strip::before,
.episode-layout::before,
.episode-watchlist::before,
.store-masthead::before,
.store-controls::before,
.store-product-open::before,
.bag-drawer::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), transparent 34%),
    linear-gradient(100deg, transparent 0 12%, rgba(255, 255, 255, 0.055) 28%, transparent 48%);
  opacity: 0.68;
}

.topbar > *,
.glass-panel > *,
.now-playing > *,
.feature-card > *,
.content-card > *,
.video-tile > *,
.contact-copy > *,
.contact-form > *,
.about-page-panel > *,
.library-controlbar > *,
.continue-strip > *,
.episode-layout > *,
.episode-watchlist > *,
.store-masthead > *,
.store-controls > *,
.store-product-open > *,
.bag-drawer > * {
  position: relative;
  z-index: 1;
}

.topbar {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(2, 3, 3, 0.48);
  box-shadow: 0 28px 95px rgba(0, 0, 0, 0.64), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.socials a,
.footer-socials a,
.bag-button,
.rail-controls button,
.dialog-close,
.modal-close {
  border-color: rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
    rgba(8, 9, 9, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 28px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

.socials a:hover,
.footer-socials a:hover,
.bag-button:hover,
.rail-controls button:hover,
.dialog-close:hover,
.modal-close:hover {
  border-color: rgba(255, 224, 138, 0.58);
  background:
    linear-gradient(145deg, rgba(255, 224, 138, 0.23), rgba(255, 255, 255, 0.055)),
    rgba(8, 9, 9, 0.68);
}

.button.primary,
.add-cart-button {
  border-color: rgba(255, 232, 160, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 232, 163, 0.92), rgba(220, 167, 67, 0.78) 42%, rgba(90, 61, 18, 0.72)),
    rgba(10, 9, 6, 0.5);
  box-shadow: 0 18px 52px rgba(220, 167, 67, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.54);
  color: #080706;
}

.button.secondary,
.platform,
.library-filter,
.modal-tabs button,
.store-controls a,
.store-controls button {
  color: rgba(255, 252, 244, 0.96);
}

.release,
.about,
.page-hero,
.stream-hero,
.store-masthead {
  border: 1px solid var(--glass-edge-soft);
  background:
    var(--glass-fill-deep),
    rgba(2, 3, 3, 0.46);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
}

.release {
  border-radius: 14px;
}

.cards {
  grid-template-columns: repeat(4, 1fr);
  width: min(1060px, calc(100% - 84px));
}

.feature-card {
  min-height: 300px;
  border-radius: 14px;
  background: var(--glass-fill), rgba(3, 4, 4, 0.48);
}

.feature-card::before,
.video-tile::before,
.store-product-image,
.product-detail-image,
.modal-player,
.episode-video {
  filter: brightness(0.86) saturate(0.96) contrast(1.08);
}

.feature-card:hover,
.content-card:hover,
.video-tile:hover,
.store-product-open:hover,
.library-filter:hover,
.platform:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 224, 138, 0.52);
  box-shadow: 0 34px 95px rgba(0, 0, 0, 0.64), 0 0 42px rgba(220, 167, 67, 0.16), var(--glass-inset);
}

.content-card,
.video-tile,
.contact-copy,
.contact-form {
  border-radius: 16px;
}

.page-hero {
  overflow: hidden;
  border-radius: 18px;
}

.page-hero::after,
.stream-hero::after,
.store-masthead::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 22%, rgba(220, 167, 67, 0.12) 62%, transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%);
  opacity: 0.72;
}

.stream-hero {
  border-radius: 18px;
}

.stream-hero::before {
  opacity: 0.92;
}

.library-controlbar,
.continue-strip,
.library-shelf .media-tile,
.topic-tile,
.modal-player,
.modal-tabs,
.modal-episode-list a,
.resource-list a {
  border-radius: 14px;
}

.library-search input,
.contact-form input,
.contact-form select,
.contact-form textarea,
.checkout-form input,
.product-detail-copy select {
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.34);
}

.library-search input::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.checkout-form input::placeholder {
  color: rgba(248, 245, 237, 0.58);
}

.stream-modal,
.product-dialog,
.bag-drawer {
  border-color: rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(3, 4, 4, 0.72);
}

.video-modal::backdrop,
.product-dialog::backdrop,
.bag-drawer::backdrop {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body[data-page="merch"] {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.055), transparent 28rem),
    linear-gradient(245deg, rgba(220, 167, 67, 0.11), transparent 36rem),
    #030303;
}

.merch-store {
  gap: 28px;
}

.store-masthead,
.store-controls {
  border-radius: 18px;
}

.store-product-open {
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(3, 4, 4, 0.5);
}

.store-product-meta {
  padding-inline: 4px;
}

.product-dialog {
  border-radius: 18px;
}

.footer {
  margin-top: 24px;
  padding: 18px 26px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.018)),
    rgba(3, 4, 4, 0.42);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar,
  .glass-panel,
  .now-playing,
  .feature-card,
  .content-card,
  .video-tile,
  .contact-copy,
  .contact-form,
  .about-page-panel,
  .library-controlbar,
  .continue-strip,
  .stream-modal,
  .product-dialog,
  .bag-drawer,
  .store-masthead,
  .store-controls,
  .store-product-open,
  .footer {
    background-color: rgba(7, 8, 8, 0.9);
  }
}

@media (max-width: 1180px) {
  .youtube-feature-card {
    grid-template-columns: 1fr;
  }

  .youtube-feature-art {
    min-height: 260px;
  }
}

@media (max-width: 980px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .music-coming-soon {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .music-coming-art {
    min-height: 360px;
    order: -1;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  }

  .video-soon-copy {
    width: min(690px, 78%);
  }

  .video-stage {
    width: min(300px, 38vw);
  }

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

  .youtube-feature-card {
    grid-template-columns: 1fr;
  }

  .youtube-feature-art {
    min-height: 240px;
  }

  .video-soon-rail {
    grid-template-columns: 1fr;
  }

  .about-hero-panel {
    grid-template-columns: 1fr;
  }

  .about-hero-panel .about-page-art {
    min-height: 360px;
    order: -1;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
  }

  .about-principles {
    grid-template-columns: 1fr;
  }

  .topbar.nav-open .nav-links,
  .topbar.nav-open .socials {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
      rgba(4, 5, 5, 0.78);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    backdrop-filter: blur(22px) saturate(1.25);
  }
}

@media (max-width: 640px) {
  .topbar,
  .release,
  .about,
  .page-hero,
  .stream-hero,
  .store-masthead,
  .store-controls,
  .footer,
  .contact-copy,
  .contact-form,
  .about-page-panel,
  .product-dialog,
  .bag-drawer {
    border-radius: 12px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .music-coming-page {
    min-height: auto;
  }

  .music-coming-soon {
    border-radius: 12px;
  }

  .music-coming-copy {
    padding: 24px;
  }

  .music-coming-copy h1 {
    font-size: clamp(54px, 17vw, 82px);
  }

  .music-coming-copy p:not(.section-label) {
    font-size: 17px;
  }

  .music-coming-art {
    min-height: 290px;
  }

  .video-soon-page {
    padding-top: 26px;
  }

  .video-soon-hero {
    min-height: 720px;
    border-radius: 12px;
  }

  .video-soon-hero::before {
    background:
      linear-gradient(180deg, rgba(3, 6, 7, 0.18) 0%, rgba(3, 6, 7, 0.72) 46%, rgba(3, 6, 7, 0.96) 100%),
      url("assets/card-videos.png") center top / auto 54% no-repeat;
  }

  .video-soon-copy {
    width: 100%;
    align-content: end;
    padding: 300px 24px 28px;
  }

  .video-soon-copy h1 {
    font-size: clamp(62px, 18vw, 86px);
  }

  .video-soon-copy p:not(.section-label) {
    font-size: 17px;
  }

  .video-stage {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 2;
    width: calc(100% - 48px);
    min-height: 112px;
    margin: -18px auto 24px;
  }

  .video-stage span {
    width: 46px;
    height: 46px;
    margin-bottom: 20px;
  }

  .video-stage span::before {
    margin: 14px 0 0 18px;
  }

  .video-soon-rail article {
    border-radius: 12px;
  }

  .feed-heading {
    align-items: start;
    flex-direction: column;
  }

  .youtube-feed-section {
    padding: 22px;
    border-radius: 12px;
  }

  .youtube-feed-grid {
    grid-template-columns: 1fr;
  }

  .youtube-feature-art {
    min-height: 190px;
  }

  .about-redesign {
    padding-top: 26px;
  }

  .about-hero-panel {
    min-height: auto;
    border-radius: 12px;
  }

  .about-hero-panel .about-story {
    padding: 26px;
  }

  .about-hero-panel .about-story h1 {
    font-size: clamp(52px, 15vw, 76px);
  }

  .about-hero-panel .about-story p:not(.section-label) {
    font-size: 16px;
  }

  .about-hero-panel .about-page-art {
    min-height: 360px;
    background:
      radial-gradient(ellipse at 62% 42%, rgba(0, 0, 0, 0) 0 112px, rgba(3, 5, 6, 0.3) 182px, rgba(3, 5, 6, 0.9) 360px),
      linear-gradient(180deg, rgba(3, 6, 7, 0.04), rgba(3, 6, 7, 0.8)),
      url("assets/metamorph-hero.jpg") center center / cover no-repeat;
  }

  .about-hero-panel .signature {
    right: 24px;
    bottom: 26px;
    font-size: 36px;
  }

  .about-principles article {
    min-height: 150px;
    border-radius: 12px;
  }

  .feature-card,
  .content-card,
  .video-tile,
  .store-product-open {
    border-radius: 12px;
  }

  .footer {
    padding: 20px 16px;
  }
}

.hero .now-playing {
  position: absolute;
  right: 66px;
  bottom: 58px;
  z-index: 3;
}

body[data-page="home"] {
  --gold: #23d3c3;
  --gold-bright: #ecfffb;
  --gold-deep: #a71423;
  --text: #fbf8f3;
  --muted: #b9d6d3;
  --line: rgba(123, 236, 226, 0.28);
  --line-strong: rgba(244, 117, 110, 0.45);
  --glow: 0 0 34px rgba(35, 211, 195, 0.26), 0 0 54px rgba(167, 20, 35, 0.16);
  background:
    radial-gradient(circle at 28% 24%, rgba(25, 208, 194, 0.24), transparent 30rem),
    radial-gradient(circle at 72% 34%, rgba(190, 24, 37, 0.2), transparent 28rem),
    linear-gradient(180deg, #050909 0%, #030606 54%, #050303 100%);
}

body[data-page="home"] .topbar {
  border-color: rgba(139, 245, 236, 0.22);
  background:
    linear-gradient(100deg, rgba(27, 197, 185, 0.08), rgba(169, 24, 36, 0.045)),
    rgba(2, 5, 6, 0.6);
}

body[data-page="home"] .brand,
body[data-page="home"] .footer-brand span,
body[data-page="home"] .nav-links a:hover,
body[data-page="home"] .nav-links a.active {
  color: #dffffa;
}

body[data-page="home"] .hero-art {
  top: -98px;
  right: -64px;
  bottom: -4px;
  width: min(980px, 82vw);
  background:
    radial-gradient(ellipse at 74% 56%, rgba(0, 0, 0, 0) 0 170px, rgba(3, 5, 6, 0.42) 255px, rgba(3, 5, 6, 0.9) 520px),
    linear-gradient(90deg, rgba(3, 7, 7, 0) 0%, rgba(3, 7, 7, 0.3) 18%, rgba(3, 7, 7, 0.02) 52%, rgba(3, 7, 7, 0.64) 100%),
    linear-gradient(180deg, #030707 0%, rgba(3, 7, 7, 0.02) 24%, rgba(3, 7, 7, 0.04) 68%, #030707 100%),
    url("assets/metamorph-hero.jpg") center center / cover no-repeat;
  filter: contrast(1.1) saturate(1.16);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 92%, transparent 100%);
}

body[data-page="home"] .hero h1 {
  background: linear-gradient(92deg, #f3fff9 0%, #29d8cb 32%, #f3d0c1 64%, #a71423 100%);
  background-clip: text;
  text-shadow: 0 20px 54px rgba(35, 211, 195, 0.16), 0 8px 34px rgba(167, 20, 35, 0.14);
}

body[data-page="home"] .tagline {
  color: #f7fffc;
  text-shadow: 0 0 24px rgba(35, 211, 195, 0.22);
}

body[data-page="home"] .sound-rule,
body[data-page="home"] .mini-wave {
  color: #23d3c3;
}

body[data-page="home"] .button.primary {
  border-color: rgba(125, 250, 239, 0.58);
  background:
    linear-gradient(135deg, rgba(216, 255, 249, 0.92), rgba(35, 211, 195, 0.72) 42%, rgba(117, 14, 26, 0.76)),
    rgba(3, 8, 8, 0.5);
  box-shadow: 0 20px 56px rgba(35, 211, 195, 0.22), 0 0 44px rgba(167, 20, 35, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.52);
  color: #020606;
}

body[data-page="home"] .button.secondary,
body[data-page="home"] .now-playing,
body[data-page="home"] .feature-card {
  border-color: rgba(123, 236, 226, 0.22);
  background:
    linear-gradient(135deg, rgba(35, 211, 195, 0.1), rgba(167, 20, 35, 0.06)),
    rgba(3, 6, 7, 0.58);
}

body[data-page="home"] .now-playing {
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.58), 0 0 34px rgba(35, 211, 195, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body[data-page="home"] .time {
  color: #23d3c3;
}

body[data-page="home"] .release {
  border-color: rgba(123, 236, 226, 0.2);
  background:
    linear-gradient(135deg, rgba(35, 211, 195, 0.08), rgba(167, 20, 35, 0.055)),
    rgba(2, 4, 5, 0.58);
}

body[data-page="home"] .site-shell {
  width: min(1320px, calc(100% - 48px));
}

body[data-page="home"] main {
  display: grid;
  gap: 42px;
}

body[data-page="home"] .hero {
  min-height: clamp(640px, calc(100vh - 92px), 820px);
  padding: clamp(70px, 8vw, 112px) 42px 108px;
  overflow: hidden;
}

body[data-page="home"] .hero::before {
  position: absolute;
  inset: 112px auto 58px 32px;
  width: min(520px, 44vw);
  content: "";
  pointer-events: none;
  border-left: 1px solid rgba(123, 236, 226, 0.24);
  background: linear-gradient(90deg, rgba(35, 211, 195, 0.09), transparent 72%);
  opacity: 0.75;
}

body[data-page="home"] .hero-copy {
  width: min(780px, calc(100vw - 160px));
  padding-top: clamp(54px, 8vh, 110px);
}

body[data-page="home"] .hero h1 {
  width: auto;
  max-width: 100%;
  font-size: clamp(92px, 10.4vw, 142px);
  line-height: 0.78;
  transform: none;
}

body[data-page="home"] .tagline {
  max-width: 720px;
  margin-top: 28px;
  font-size: clamp(20px, 2.2vw, 31px);
  letter-spacing: 0.38em;
}

body[data-page="home"] .sound-rule {
  width: min(430px, 100%);
  margin-bottom: 42px;
}

body[data-page="home"] .hero-actions {
  gap: 18px;
}

body[data-page="home"] .button {
  min-height: 58px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

body[data-page="home"] .hero .button.secondary {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.018)),
    rgba(3, 7, 8, 0.42);
}

body[data-page="home"] .hero-art {
  top: 34px;
  right: -40px;
  bottom: 0;
  width: min(1040px, 74vw);
  opacity: 0.98;
  background:
    radial-gradient(ellipse at 73% 50%, rgba(0, 0, 0, 0) 0 190px, rgba(3, 5, 6, 0.28) 285px, rgba(3, 5, 6, 0.92) 610px),
    linear-gradient(90deg, #030707 0%, rgba(3, 7, 7, 0.5) 16%, rgba(3, 7, 7, 0.02) 54%, rgba(3, 7, 7, 0.72) 100%),
    linear-gradient(180deg, #030707 0%, rgba(3, 7, 7, 0.01) 22%, rgba(3, 7, 7, 0.04) 73%, #030707 100%),
    url("assets/metamorph-hero.jpg") center center / cover no-repeat;
  filter: contrast(1.16) saturate(1.18);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

body[data-page="home"] .hero .now-playing {
  right: clamp(34px, 7vw, 96px);
  bottom: 92px;
  width: 286px;
  border-radius: 12px;
}

body[data-page="home"] .track-line strong {
  color: #fff;
  font-weight: 700;
}

body[data-page="home"] .scroll-cue {
  left: 32px;
  bottom: 62px;
  color: #dffffa;
}

body[data-page="home"] .home-release {
  grid-template-columns: minmax(190px, 260px) 1fr;
  width: min(1040px, calc(100% - 132px));
  min-height: 250px;
  margin: -84px auto 0;
  padding: 24px;
  border-radius: 18px;
  transform: translateX(-5%);
}

body[data-page="home"] .home-release::before {
  inset: -1px 16% auto auto;
  width: 44%;
  background: linear-gradient(90deg, transparent, rgba(123, 236, 226, 0.9), rgba(167, 20, 35, 0.55), transparent);
}

body[data-page="home"] .home-release::after {
  background:
    radial-gradient(circle at 12% 100%, rgba(35, 211, 195, 0.12), transparent 15rem),
    radial-gradient(circle at 95% 12%, rgba(167, 20, 35, 0.16), transparent 19rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42));
}

body[data-page="home"] .home-release .cover {
  border-color: rgba(123, 236, 226, 0.32);
  border-radius: 12px;
  filter: saturate(0.9) contrast(1.08);
}

body[data-page="home"] .release h2 {
  background: linear-gradient(92deg, #f3fff9 0%, #36d7ca 36%, #f2c7be 72%, #a71423 100%);
  background-clip: text;
  color: transparent;
  font-size: clamp(58px, 7vw, 92px);
  letter-spacing: 0;
}

body[data-page="home"] .release-note {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgba(251, 248, 243, 0.82);
  font-size: 18px;
  line-height: 1.45;
}

body[data-page="home"] .launch-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="home"] .launch-status span,
body[data-page="home"] .pathway-status {
  width: fit-content;
  padding: 8px 11px;
  border: 1px solid rgba(123, 236, 226, 0.24);
  border-radius: 999px;
  color: #dffffa;
  background: rgba(35, 211, 195, 0.075);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body[data-page="home"] .home-pathways {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 18px;
  width: min(1040px, calc(100% - 132px));
  margin: 0 auto;
  transform: translateX(-5%);
}

body[data-page="home"] .home-pathway {
  display: grid;
  min-height: 330px;
  align-content: end;
  padding: 28px;
  border-radius: 18px;
  border-color: rgba(123, 236, 226, 0.2);
}

body[data-page="home"] .home-pathway::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.84)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.28)),
    var(--card-image) center / cover no-repeat;
  filter: brightness(0.68) saturate(1.04);
}

body[data-page="home"] .home-pathway .feature-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 72px;
  border-color: rgba(123, 236, 226, 0.34);
  color: #dffffa;
}

body[data-page="home"] .home-pathway h3 {
  margin-top: 12px;
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.04;
}

body[data-page="home"] .home-pathway p {
  min-height: 48px;
  color: rgba(251, 248, 243, 0.82);
  font-size: 16px;
}

body[data-page="home"] .home-pathway a {
  color: #dffffa;
}

body[data-page="home"] .home-about {
  grid-template-columns: minmax(300px, 0.75fr) 1fr minmax(180px, 0.3fr);
  width: min(1100px, calc(100% - 96px));
  min-height: 320px;
  margin-top: 8px;
  border-radius: 18px;
}

body[data-page="home"] .home-about .about-art {
  inset: 0 0 0 28%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.24) 34%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0.74)),
    url("assets/metamorph-hero.jpg") center center / cover no-repeat;
  filter: saturate(1.1) contrast(1.1);
}

body[data-page="home"] .home-about .about-copy {
  padding: 38px 40px;
}

body[data-page="home"] .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body[data-page="home"] .home-about .signature {
  color: #dffffa;
}

.mobile-journey {
  display: none;
}

@media (max-width: 980px) {
  .hero .now-playing {
    right: 22px;
  }

  body[data-page="home"] .site-shell {
    width: min(920px, calc(100% - 32px));
  }

  body[data-page="home"] .hero {
    min-height: 680px;
    padding-inline: 24px;
  }

  body[data-page="home"] .hero-copy {
    width: min(620px, 100%);
  }

  body[data-page="home"] .hero-art {
    width: min(880px, 100vw);
    opacity: 0.76;
  }

  body[data-page="home"] .home-release,
  body[data-page="home"] .home-pathways {
    width: 100%;
    transform: none;
  }

  body[data-page="home"] .home-pathways {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .home-pathway {
    min-height: 250px;
  }

  body[data-page="home"] .home-pathway .feature-icon {
    margin-bottom: 28px;
  }

  body[data-page="home"] .home-about {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] main {
    gap: 24px;
  }

  body[data-page="home"] .topbar {
    margin-bottom: 0;
  }

  body[data-page="home"] .hero {
    min-height: 720px;
    padding: 34px 0 34px;
  }

  body[data-page="home"] .hero::before {
    display: none;
  }

  body[data-page="home"] .hero-copy {
    width: 100%;
    padding-top: 330px;
  }

  body[data-page="home"] .hero h1 {
    font-size: clamp(64px, 19vw, 92px);
  }

  body[data-page="home"] .tagline {
    max-width: 320px;
    font-size: 13px;
    letter-spacing: 0.16em;
  }

  body[data-page="home"] .hero-art {
    top: 28px;
    right: -92px;
    width: min(620px, 142vw);
    height: 410px;
    opacity: 0.86;
    background:
      radial-gradient(ellipse at 78% 56%, rgba(0, 0, 0, 0) 0 112px, rgba(3, 5, 6, 0.38) 178px, rgba(3, 5, 6, 0.9) 350px),
      linear-gradient(90deg, rgba(3, 7, 7, 0) 0%, rgba(3, 7, 7, 0.26) 28%, rgba(3, 7, 7, 0.1) 58%, rgba(3, 7, 7, 0.78) 100%),
      linear-gradient(180deg, #030707 0%, rgba(3, 7, 7, 0.02) 18%, rgba(3, 7, 7, 0.08) 68%, #030707 100%),
      url("assets/metamorph-hero.jpg") center center / cover no-repeat;
  }

  .hero .now-playing {
    display: none;
  }

  body[data-page="home"] .home-release {
    grid-template-columns: 1fr;
    margin-top: -12px;
    padding: 20px;
    border-radius: 12px;
  }

  body[data-page="home"] .home-release .cover {
    width: min(100%, 260px);
    justify-self: center;
  }

  body[data-page="home"] .release h2 {
    font-size: clamp(48px, 16vw, 70px);
  }

  body[data-page="home"] .release-note {
    font-size: 16px;
  }

  body[data-page="home"] .home-pathway {
    min-height: 260px;
    padding: 24px;
    border-radius: 12px;
  }

  body[data-page="home"] .home-pathway h3 {
    font-size: 30px;
  }

  body[data-page="home"] .home-about {
    min-height: 430px;
    border-radius: 12px;
  }

  body[data-page="home"] .home-about .about-copy {
    padding: 26px;
  }

  body[data-page="home"] .home-about .about-art {
    inset: 42% 0 0;
  }
}

body[data-page="library"] .exodus-hero {
  min-height: min(760px, calc(100vh - 142px));
  align-items: center;
  border-color: rgba(123, 236, 226, 0.24);
  background:
    radial-gradient(circle at 24% 58%, rgba(35, 211, 195, 0.16), transparent 28rem),
    radial-gradient(circle at 77% 52%, rgba(167, 20, 35, 0.14), transparent 26rem),
    linear-gradient(90deg, rgba(3, 8, 9, 0.98) 0%, rgba(3, 8, 9, 0.82) 42%, rgba(3, 8, 9, 0.38) 74%, rgba(3, 8, 9, 0.88) 100%),
    url("assets/metamorph-hero.jpg") 76% 48% / cover no-repeat;
  box-shadow:
    inset 0 -160px 130px #020303,
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 34px 100px rgba(0, 0, 0, 0.62),
    0 0 68px rgba(35, 211, 195, 0.08);
}

body[data-page="library"] .exodus-hero::before {
  inset: 0;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%),
    linear-gradient(90deg, rgba(123, 236, 226, 0.1), transparent 24%, rgba(167, 20, 35, 0.14) 82%, transparent),
    radial-gradient(ellipse at 78% 48%, rgba(0, 0, 0, 0) 0 170px, rgba(2, 5, 6, 0.36) 300px, rgba(2, 5, 6, 0.9) 620px);
}

body[data-page="library"] .exodus-hero::after {
  left: clamp(28px, 5vw, 68px);
  right: auto;
  bottom: clamp(94px, 10vw, 126px);
  width: min(420px, 42vw);
  height: 1px;
  background: linear-gradient(90deg, rgba(123, 236, 226, 0.08), rgba(123, 236, 226, 0.72), rgba(167, 20, 35, 0.34), transparent);
  box-shadow: 0 0 28px rgba(35, 211, 195, 0.36);
}

body[data-page="library"] .exodus-hero .stream-hero-copy {
  position: relative;
  z-index: 2;
  width: min(700px, 58%);
  padding-top: 0;
}

body[data-page="library"] .exodus-hero .section-label {
  color: #70e6db;
}

body[data-page="library"] .exodus-hero h1 {
  max-width: 620px;
  background: linear-gradient(92deg, #f3fff9 0%, #36d7cb 34%, #f2d0c5 66%, #aa1726 100%);
  background-clip: text;
  font-size: clamp(66px, 8.3vw, 138px);
  letter-spacing: 0;
  text-shadow: 0 26px 72px rgba(0, 0, 0, 0.66);
}

body[data-page="library"] .exodus-hero .stream-meta {
  margin: 18px 0 22px;
}

body[data-page="library"] .exodus-hero .stream-meta span {
  border-color: rgba(123, 236, 226, 0.32);
  background: rgba(5, 13, 14, 0.62);
  color: #e8fffb;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body[data-page="library"] .exodus-hero .stream-hero-copy > p:not(.section-label) {
  max-width: 560px;
  color: rgba(247, 252, 249, 0.9);
}

body[data-page="library"] .exodus-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

body[data-page="library"] .exodus-hero .button.primary {
  border-color: rgba(153, 255, 245, 0.48);
  background:
    linear-gradient(100deg, rgba(200, 255, 248, 0.95), rgba(49, 218, 205, 0.86) 58%, rgba(167, 20, 35, 0.72));
  color: #031111;
  box-shadow: 0 18px 42px rgba(35, 211, 195, 0.18);
}

body[data-page="library"] .exodus-hero .button.secondary {
  border-color: rgba(123, 236, 226, 0.24);
  background: rgba(3, 8, 9, 0.68);
  color: #f5fffd;
}

body[data-page="library"] .exodus-hero .hero-preview-card {
  right: clamp(28px, 5vw, 70px);
  bottom: clamp(42px, 7vw, 90px);
  width: min(360px, 31vw);
  min-height: 196px;
  border-color: rgba(123, 236, 226, 0.26);
  background:
    linear-gradient(145deg, rgba(123, 236, 226, 0.08), rgba(167, 20, 35, 0.08)),
    rgba(4, 8, 9, 0.74);
  box-shadow:
    0 28px 78px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 42px rgba(35, 211, 195, 0.08);
}

body[data-page="library"] .exodus-hero .mini-player-wave {
  color: #45e0d2;
}

body[data-page="library"] .exodus-hero .hero-preview-card strong {
  color: #f8fffd;
  font-size: 22px;
  letter-spacing: 0.02em;
}

body[data-page="library"] .exodus-hero .hero-preview-card p {
  color: rgba(232, 255, 251, 0.76);
}

@media (max-width: 980px) {
  body[data-page="library"] .exodus-hero {
    min-height: 760px;
    align-items: end;
    background:
      radial-gradient(circle at 26% 62%, rgba(35, 211, 195, 0.16), transparent 22rem),
      radial-gradient(circle at 74% 36%, rgba(167, 20, 35, 0.14), transparent 22rem),
      linear-gradient(180deg, rgba(3, 8, 9, 0.28) 0%, rgba(3, 8, 9, 0.84) 48%, rgba(3, 8, 9, 0.98) 100%),
      url("assets/metamorph-hero.jpg") center top / cover no-repeat;
  }

  body[data-page="library"] .exodus-hero .stream-hero-copy {
    width: 100%;
    padding-top: 250px;
  }

  body[data-page="library"] .exodus-hero .hero-preview-card {
    display: block;
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 2;
    width: min(100%, 420px);
    margin-top: 24px;
  }
}

@media (max-width: 640px) {
  body[data-page="library"] .exodus-hero {
    min-height: auto;
    padding: 26px 22px;
  }

  body[data-page="library"] .exodus-hero::after {
    bottom: 246px;
    width: 64%;
  }

  body[data-page="library"] .exodus-hero .stream-hero-copy {
    padding-top: 300px;
  }

  body[data-page="library"] .exodus-hero h1 {
    font-size: clamp(58px, 18vw, 86px);
  }

  body[data-page="library"] .exodus-hero .stream-hero-copy > p:not(.section-label) {
    font-size: 16px;
  }

  body[data-page="library"] .exodus-hero .hero-actions {
    gap: 10px;
  }

  body[data-page="library"] .exodus-hero .button {
    width: 100%;
  }
}

body[data-page="music"],
body[data-page="videos"],
body[data-page="about"],
body[data-page="library"] {
  --gold: #dca743;
  --gold-bright: #ffe39a;
  --gold-deep: #8a5b19;
  --text: #f6f0e5;
  --muted: #b8b0a3;
  --line: rgba(255, 224, 138, 0.2);
  --line-strong: rgba(255, 224, 138, 0.42);
  --glow: 0 0 34px rgba(220, 167, 67, 0.2);
  background:
    radial-gradient(circle at 78% 22%, rgba(220, 167, 67, 0.12), transparent 30rem),
    linear-gradient(180deg, #050403 0%, #020202 58%, #050403 100%);
}

body[data-page="videos"] .brand,
body[data-page="videos"] .footer-brand span,
body[data-page="videos"] .nav-links a:hover,
body[data-page="videos"] .nav-links a.active,
body[data-page="about"] .brand,
body[data-page="about"] .footer-brand span,
body[data-page="about"] .nav-links a:hover,
body[data-page="about"] .nav-links a.active {
  color: #ffe39a;
}

body[data-page="videos"] .topbar,
body[data-page="about"] .topbar {
  border-color: rgba(255, 224, 138, 0.22);
  background:
    linear-gradient(100deg, rgba(220, 167, 67, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(5, 5, 5, 0.64);
}

body[data-page="music"] .music-coming-soon,
body[data-page="videos"] .video-soon-hero,
body[data-page="about"] .about-hero-panel {
  border-color: rgba(255, 224, 138, 0.2);
  background:
    radial-gradient(circle at 22% 34%, rgba(220, 167, 67, 0.16), transparent 28rem),
    radial-gradient(circle at 84% 56%, rgba(255, 224, 138, 0.1), transparent 28rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012)),
    rgba(4, 4, 3, 0.72);
}

body[data-page="music"] .music-coming-copy h1,
body[data-page="videos"] .video-soon-copy h1,
body[data-page="about"] .about-hero-panel .about-story h1,
body[data-page="library"] .exodus-hero h1 {
  background: linear-gradient(92deg, #ffe9a8 0%, #dca743 58%, #8a5b19 100%);
  background-clip: text;
  color: transparent;
  text-shadow: 0 22px 60px rgba(220, 167, 67, 0.14);
}

body[data-page="music"] .section-label,
body[data-page="videos"] .section-label,
body[data-page="about"] .section-label,
body[data-page="library"] .exodus-hero .section-label,
body[data-page="videos"] .video-soon-copy .sound-rule,
body[data-page="videos"] .video-soon-rail span,
body[data-page="about"] .about-principles span {
  color: #dca743;
}

body[data-page="music"] .music-status-list span,
body[data-page="videos"] .video-status-list span,
body[data-page="library"] .exodus-hero .stream-meta span {
  border-color: rgba(255, 224, 138, 0.28);
  background: rgba(220, 167, 67, 0.075);
  color: #fff0c2;
}

body[data-page="music"] .button.primary,
body[data-page="videos"] .button.primary,
body[data-page="about"] .button.primary,
body[data-page="library"] .exodus-hero .button.primary {
  border-color: rgba(255, 224, 138, 0.58);
  background:
    linear-gradient(135deg, rgba(255, 235, 169, 0.94), rgba(220, 167, 67, 0.78) 52%, rgba(105, 67, 18, 0.82)),
    rgba(5, 5, 5, 0.5);
  box-shadow: 0 20px 56px rgba(220, 167, 67, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.42);
  color: #090704;
}

body[data-page="library"] .exodus-hero .button.secondary {
  border-color: rgba(255, 224, 138, 0.26);
  background: rgba(5, 5, 5, 0.66);
  color: #fff4d4;
}

body[data-page="music"] .music-coming-art,
body[data-page="about"] .about-hero-panel .about-page-art {
  background:
    radial-gradient(ellipse at 56% 42%, rgba(0, 0, 0, 0) 0 150px, rgba(4, 4, 3, 0.34) 250px, rgba(4, 4, 3, 0.92) 520px),
    linear-gradient(90deg, rgba(4, 4, 3, 0.88), rgba(4, 4, 3, 0.08) 34%, rgba(4, 4, 3, 0.72) 100%),
    url("assets/hero-portrait.png") center center / cover no-repeat;
  filter: contrast(1.08) saturate(0.82) sepia(0.32);
}

body[data-page="videos"] .video-soon-hero::before {
  background:
    linear-gradient(90deg, rgba(4, 4, 3, 0.9) 0%, rgba(4, 4, 3, 0.76) 34%, rgba(4, 4, 3, 0.1) 64%, rgba(4, 4, 3, 0.82) 100%),
    linear-gradient(180deg, rgba(4, 4, 3, 0.5), transparent 34%, rgba(4, 4, 3, 0.92)),
    url("assets/card-videos.png") 72% center / cover no-repeat;
  filter: contrast(1.12) saturate(0.72) sepia(0.28);
}

body[data-page="videos"] .video-stage,
body[data-page="videos"] .video-soon-rail article,
body[data-page="about"] .about-principles article,
body[data-page="library"] .exodus-hero .hero-preview-card {
  border-color: rgba(255, 224, 138, 0.2);
  background:
    linear-gradient(135deg, rgba(220, 167, 67, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(5, 5, 5, 0.6);
  box-shadow: var(--glass-inset);
}

body[data-page="about"] .about-hero-panel .signature {
  color: #ffe39a;
  text-shadow: 0 0 24px rgba(220, 167, 67, 0.26);
}

body[data-page="library"] .exodus-hero {
  border-color: rgba(255, 224, 138, 0.2);
  background:
    radial-gradient(circle at 24% 58%, rgba(220, 167, 67, 0.13), transparent 28rem),
    radial-gradient(circle at 76% 36%, rgba(255, 224, 138, 0.1), transparent 26rem),
    linear-gradient(90deg, rgba(5, 5, 4, 0.98) 0%, rgba(5, 5, 4, 0.82) 42%, rgba(5, 5, 4, 0.38) 74%, rgba(5, 5, 4, 0.9) 100%),
    url("assets/hero-portrait.png") 76% 48% / cover no-repeat;
  box-shadow:
    inset 0 -160px 130px #020202,
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 34px 100px rgba(0, 0, 0, 0.62),
    0 0 68px rgba(220, 167, 67, 0.08);
}

body[data-page="library"] .exodus-hero::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 28%),
    linear-gradient(90deg, rgba(255, 224, 138, 0.08), transparent 24%, rgba(220, 167, 67, 0.1) 82%, transparent),
    radial-gradient(ellipse at 78% 48%, rgba(0, 0, 0, 0) 0 170px, rgba(3, 3, 3, 0.36) 300px, rgba(3, 3, 3, 0.9) 620px);
}

body[data-page="library"] .exodus-hero::after {
  background: linear-gradient(90deg, rgba(255, 224, 138, 0.04), rgba(255, 224, 138, 0.72), rgba(220, 167, 67, 0.34), transparent);
  box-shadow: 0 0 28px rgba(220, 167, 67, 0.36);
}

body[data-page="library"] .exodus-hero .mini-player-wave {
  color: #dca743;
}

@media (max-width: 980px) {
  body[data-page="library"] .exodus-hero {
    background:
      radial-gradient(circle at 26% 62%, rgba(220, 167, 67, 0.14), transparent 22rem),
      radial-gradient(circle at 74% 36%, rgba(255, 224, 138, 0.1), transparent 22rem),
      linear-gradient(180deg, rgba(5, 5, 4, 0.28) 0%, rgba(5, 5, 4, 0.84) 48%, rgba(5, 5, 4, 0.98) 100%),
      url("assets/hero-portrait.png") center top / cover no-repeat;
  }
}

@media (max-width: 640px) {
  body[data-page="about"] .about-hero-panel .about-page-art {
    background:
      radial-gradient(ellipse at 62% 42%, rgba(0, 0, 0, 0) 0 112px, rgba(4, 4, 3, 0.3) 182px, rgba(4, 4, 3, 0.9) 360px),
      linear-gradient(180deg, rgba(4, 4, 3, 0.04), rgba(4, 4, 3, 0.8)),
      url("assets/hero-portrait.png") center center / cover no-repeat;
  }
}

body[data-page="home"] {
  --signal-bg: #030406;
  --signal-panel: rgba(14, 16, 20, 0.58);
  --signal-line: rgba(255, 255, 255, 0.16);
  --signal-line-soft: rgba(255, 255, 255, 0.08);
  --signal-text: #f3f4f3;
  --signal-muted: rgba(242, 244, 244, 0.64);
  --signal-purple: #9a5be8;
  --signal-purple-soft: rgba(154, 91, 232, 0.24);
  --gold: #9a5be8;
  --gold-bright: #f3f4f3;
  --gold-deep: #3d1b5e;
  --text: var(--signal-text);
  --muted: var(--signal-muted);
  --line: var(--signal-line);
  --line-strong: rgba(255, 255, 255, 0.2);
  --glow: 0 0 44px rgba(154, 91, 232, 0.18), 0 0 90px rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 130, 140, 0.18), transparent 32rem),
    radial-gradient(circle at 20% 72%, rgba(154, 91, 232, 0.08), transparent 34rem),
    linear-gradient(180deg, #05070a 0%, #020305 46%, #030305 100%);
}

body[data-page="home"]::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 18%, black, transparent 72%);
}

body[data-page="home"] .site-shell {
  width: 100%;
  margin: 0;
}

body[data-page="home"] .topbar {
  position: fixed;
  top: 18px;
  left: 28px;
  right: 28px;
  z-index: 40;
  display: grid;
  grid-template-columns: 260px 1fr auto;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="home"] .brand,
body[data-page="home"] .footer-brand span {
  color: #f4f4f4;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.68em;
}

body[data-page="home"] .nav-links {
  display: flex;
  gap: clamp(22px, 3vw, 52px);
  color: rgba(246, 246, 246, 0.9);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
}

body[data-page="home"] .nav-links a:hover,
body[data-page="home"] .nav-links a.active {
  color: #fff;
}

body[data-page="home"] .nav-links a.active::after {
  bottom: -10px;
  width: 32px;
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
}

body[data-page="home"] .socials a {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .socials svg {
  width: 17px;
  height: 17px;
}

body[data-page="home"] .socials {
  display: flex;
}

body[data-page="home"] .menu-toggle {
  display: none;
}

body[data-page="home"] .signal-home {
  display: grid;
  gap: 0;
}

body[data-page="home"] .signal-hero {
  min-height: 690px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--signal-line-soft);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), #040506 100%),
    radial-gradient(circle at 45% 0%, rgba(255, 255, 255, 0.14), transparent 18rem);
}

body[data-page="home"] .signal-hero::before {
  position: absolute;
  inset: 0;
  width: auto;
  border: 0;
  background:
    linear-gradient(90deg, rgba(3, 4, 6, 0.34), rgba(3, 4, 6, 0.12) 48%, rgba(3, 4, 6, 0.5)),
    linear-gradient(180deg, rgba(3, 4, 6, 0.04), rgba(3, 4, 6, 0.88)),
    url("assets/about-portrait.png") center 34% / cover no-repeat;
  filter: grayscale(1) contrast(1.2) brightness(0.58);
  opacity: 0.94;
}

body[data-page="home"] .signal-hero::after {
  position: absolute;
  left: -5vw;
  bottom: -12px;
  z-index: 1;
  width: 42vw;
  min-width: 360px;
  height: 620px;
  content: "";
  background:
    radial-gradient(ellipse at 46% 50%, rgba(0, 0, 0, 0) 0 92px, rgba(2, 3, 5, 0.42) 168px, rgba(2, 3, 5, 0.94) 420px),
    url("assets/about-portrait.png") center bottom / auto 82% no-repeat;
  filter: grayscale(1) contrast(1.18) brightness(0.5);
  opacity: 0.88;
}

body[data-page="home"] .hero-art {
  display: none;
}

body[data-page="home"] .signal-hero .hero-copy {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  width: min(560px, calc(100% - 48px));
  padding: 44px 54px 38px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(16, 18, 22, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 80px rgba(0, 0, 0, 0.52),
    0 0 42px rgba(255, 255, 255, 0.06);
  text-align: center;
  backdrop-filter: blur(16px);
}

body[data-page="home"] .signal-mark {
  display: grid;
  width: 34px;
  height: 42px;
  place-items: center;
  margin-bottom: 22px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: rgba(255, 255, 255, 0.78);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 18px;
  letter-spacing: 0;
}

body[data-page="home"] .signal-hero h1 {
  max-width: none;
  margin: 0;
  color: #f6f6f6;
  background: none;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(52px, 6.6vw, 86px);
  font-weight: 400;
  letter-spacing: 0.28em;
  line-height: 1;
  text-indent: 0.28em;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.26);
}

body[data-page="home"] .signal-hero .tagline {
  max-width: none;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(17px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: 0.28em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: normal;
}

body[data-page="home"] .signal-role {
  margin: 22px 0 24px;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

body[data-page="home"] .signal-hero .hero-actions {
  justify-content: center;
  gap: 0;
}

body[data-page="home"] .signal-hero .button {
  min-width: 190px;
  min-height: 44px;
  border-radius: 4px;
  border-color: rgba(255, 255, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(10, 11, 14, 0.64);
  color: #fff;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body[data-page="home"] .signal-hero .button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

body[data-page="home"] .scroll-cue {
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  writing-mode: horizontal-tb;
}

body[data-page="home"] .scroll-cue span {
  display: none;
}

body[data-page="home"] .scroll-cue i {
  display: grid;
  width: 22px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: transparent;
}

body[data-page="home"] .scroll-cue i::after {
  width: 4px;
  height: 4px;
  margin: 0;
  border-color: #fff;
}

body[data-page="home"] .signal-manifesto,
body[data-page="home"] .signal-transmission,
body[data-page="home"] .signal-archive,
body[data-page="home"] .signal-timeline,
body[data-page="home"] .signal-community {
  width: min(1060px, calc(100% - 108px));
  margin: 0 auto;
  border-bottom: 1px solid var(--signal-line-soft);
}

body[data-page="home"] .section-label {
  color: var(--signal-purple);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

body[data-page="home"] .signal-manifesto {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  gap: 72px;
  align-items: center;
  min-height: 270px;
  padding: 42px 44px;
}

body[data-page="home"] .manifesto-head {
  min-width: 0;
}

body[data-page="home"] .manifesto-head h2,
body[data-page="home"] .manifesto-head strong,
body[data-page="home"] .signal-community h2 {
  display: block;
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(31px, 3.4vw, 48px);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.02;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-transform: uppercase;
}

body[data-page="home"] .manifesto-head strong {
  margin-top: 24px;
  color: var(--signal-purple);
}

body[data-page="home"] .manifesto-card {
  min-height: 190px;
  padding: 28px 34px;
  border: 1px solid var(--signal-line);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(5, 6, 9, 0.86), rgba(5, 6, 9, 0.48)),
    url("assets/about-portrait.png") right center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="home"] .manifesto-card p,
body[data-page="home"] .signal-community p {
  margin: 0 0 16px;
  color: var(--signal-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.8;
}

body[data-page="home"] .manifesto-card strong {
  color: var(--signal-purple);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body[data-page="home"] .signal-transmission {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) 270px minmax(300px, 1fr);
  gap: 44px;
  align-items: center;
  min-height: 300px;
  padding: 38px 44px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body[data-page="home"] .signal-transmission::before,
body[data-page="home"] .signal-transmission::after {
  display: none;
}

body[data-page="home"] .signal-transmission .release-copy {
  display: grid;
  align-content: center;
}

body[data-page="home"] .signal-transmission h2 {
  margin: 0 0 16px;
  color: #fff;
  background: none;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.06;
  text-transform: uppercase;
}

body[data-page="home"] .signal-transmission .release-note {
  max-width: 30ch;
  margin: 0 0 22px;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.16em;
  line-height: 1.65;
  text-transform: uppercase;
}

body[data-page="home"] .signal-transmission .button {
  width: fit-content;
  min-width: 172px;
  min-height: 42px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.18em;
}

body[data-page="home"] .signal-transmission .cover {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  filter: grayscale(0.55) contrast(1.14) saturate(0.72);
  box-shadow: 0 0 44px rgba(154, 91, 232, 0.15);
}

body[data-page="home"] .signal-transmission .now-playing {
  position: static;
  width: 100%;
  min-height: 150px;
  border-radius: 5px;
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(8, 9, 12, 0.58);
}

body[data-page="home"] .signal-transmission .mini-wave,
body[data-page="home"] .signal-transmission .time {
  color: var(--signal-purple);
}

body[data-page="home"] .signal-archive {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 34px 44px 44px;
  transform: none;
}

body[data-page="home"] .signal-archive > .release-copy {
  grid-column: 1 / -1;
}

body[data-page="home"] .signal-archive .home-pathway {
  min-height: 148px;
  align-content: end;
  padding: 18px;
  border-radius: 5px;
  border-color: rgba(255, 255, 255, 0.17);
  background: #090a0d;
  box-shadow: none;
}

body[data-page="home"] .signal-archive .home-pathway::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.84)),
    var(--card-image) center / cover no-repeat;
  filter: grayscale(1) contrast(1.12) brightness(0.55);
}

body[data-page="home"] .signal-archive .home-pathway h3 {
  margin: 0;
  color: #fff;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body[data-page="home"] .signal-archive .home-pathway a {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 18px;
  color: #fff;
}

body[data-page="home"] .signal-timeline {
  padding: 34px 44px 42px;
}

body[data-page="home"] .timeline-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 24px;
}

body[data-page="home"] .timeline-grid::before {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 22px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
}

body[data-page="home"] .timeline-grid article {
  position: relative;
  display: grid;
  min-height: 118px;
  justify-items: center;
  padding: 4px 20px 18px;
  text-align: center;
}

body[data-page="home"] .timeline-grid article::before {
  width: 8px;
  height: 8px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: #030406;
  content: "";
}

body[data-page="home"] .timeline-grid article.active {
  border: 1px solid rgba(154, 91, 232, 0.48);
  border-radius: 5px;
  background: rgba(154, 91, 232, 0.035);
}

body[data-page="home"] .timeline-grid span,
body[data-page="home"] .timeline-grid strong {
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body[data-page="home"] .timeline-grid span {
  color: #fff;
  font-size: 18px;
}

body[data-page="home"] .timeline-grid strong {
  margin-top: 18px;
  color: #fff;
  font-size: 14px;
}

body[data-page="home"] .timeline-grid p {
  margin: 10px 0 0;
  color: var(--signal-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.6;
}

body[data-page="home"] .signal-community {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) 1.12fr;
  min-height: 230px;
  margin-top: 36px;
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(5, 6, 9, 0.94), rgba(5, 6, 9, 0.64) 45%, rgba(5, 6, 9, 0.2)),
    url("assets/about-portrait.png") right center / cover no-repeat;
}

body[data-page="home"] .signal-community .about-copy {
  position: relative;
  z-index: 2;
  padding: 34px 44px;
}

body[data-page="home"] .signal-community .about-art {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 9, 0.82), transparent 45%, rgba(5, 6, 9, 0.28)),
    url("assets/about-portrait.png") center / cover no-repeat;
  filter: grayscale(1) contrast(1.15) brightness(0.58);
}

body[data-page="home"] .signal-community .about-actions {
  margin-top: 26px;
}

body[data-page="home"] .signal-community .button {
  min-width: 220px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.16em;
}

body[data-page="home"] .footer {
  width: min(1060px, calc(100% - 108px));
  margin: 0 auto;
  padding: 22px 44px 32px;
  border-top: 1px solid var(--signal-line-soft);
}

@media (max-width: 980px) {
  body[data-page="home"] .topbar {
    left: 16px;
    right: 16px;
    grid-template-columns: 1fr auto;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(4, 5, 7, 0.72);
    backdrop-filter: blur(16px);
  }

  body[data-page="home"] .menu-toggle {
    display: grid;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.04);
  }

  body[data-page="home"] .nav-links,
  body[data-page="home"] .socials {
    display: none;
  }

  body[data-page="home"] .topbar.nav-open .nav-links,
  body[data-page="home"] .topbar.nav-open .socials {
    display: flex;
  }

  body[data-page="home"] .signal-hero {
    min-height: 640px;
  }

  body[data-page="home"] .signal-hero::after {
    opacity: 0.36;
  }

  body[data-page="home"] .signal-manifesto,
  body[data-page="home"] .signal-transmission,
  body[data-page="home"] .signal-archive,
  body[data-page="home"] .signal-timeline,
  body[data-page="home"] .signal-community,
  body[data-page="home"] .footer {
    width: min(720px, calc(100% - 32px));
    padding-inline: 24px;
  }

  body[data-page="home"] .signal-manifesto,
  body[data-page="home"] .signal-transmission,
  body[data-page="home"] .signal-community {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .signal-transmission {
    gap: 24px;
  }

  body[data-page="home"] .signal-transmission .cover {
    width: min(260px, 100%);
  }

  body[data-page="home"] .signal-archive {
    grid-template-columns: repeat(2, 1fr);
  }

  body[data-page="home"] .timeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body[data-page="home"] .timeline-grid::before {
    display: none;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .brand,
  body[data-page="home"] .footer-brand span {
    font-size: 13px;
    letter-spacing: 0.42em;
  }

  body[data-page="home"] .signal-hero {
    min-height: 620px;
    padding-top: 78px;
  }

  body[data-page="home"] .signal-hero .hero-copy {
    width: calc(100% - 34px);
    padding: 34px 22px 30px;
  }

  body[data-page="home"] .signal-hero h1 {
    font-size: clamp(33px, 10vw, 42px);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }

  body[data-page="home"] .signal-hero .tagline {
    font-size: 15px;
    letter-spacing: 0.16em;
  }

  body[data-page="home"] .signal-role {
    font-size: 11px;
    letter-spacing: 0.16em;
    line-height: 1.7;
  }

  body[data-page="home"] .signal-manifesto,
  body[data-page="home"] .signal-transmission,
  body[data-page="home"] .signal-archive,
  body[data-page="home"] .signal-timeline,
  body[data-page="home"] .signal-community,
  body[data-page="home"] .footer {
    width: calc(100% - 28px);
    padding: 28px 18px;
  }

  body[data-page="home"] .manifesto-head h2,
  body[data-page="home"] .manifesto-head strong,
  body[data-page="home"] .signal-community h2 {
    font-size: clamp(26px, 8vw, 32px);
    letter-spacing: 0.08em;
  }

  body[data-page="home"] .manifesto-card {
    padding: 18px;
  }

  body[data-page="home"] .manifesto-card p {
    font-size: 12px;
    overflow-wrap: break-word;
  }

  body[data-page="home"] .signal-archive,
  body[data-page="home"] .timeline-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .signal-community {
    min-height: 330px;
  }

  body[data-page="home"] .footer {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Signal aesthetic system: keeps every public page in the monochrome/purple world. */
body[data-page] {
  --signal-bg: #030406;
  --signal-panel: rgba(14, 16, 20, 0.58);
  --signal-line: rgba(255, 255, 255, 0.16);
  --signal-line-soft: rgba(255, 255, 255, 0.08);
  --signal-text: #f3f4f3;
  --signal-muted: rgba(242, 244, 244, 0.64);
  --signal-purple: #9a5be8;
  --signal-purple-soft: rgba(154, 91, 232, 0.24);
  --gold: var(--signal-purple);
  --gold-bright: var(--signal-text);
  --gold-deep: #3d1b5e;
  --text: var(--signal-text);
  --muted: var(--signal-muted);
  --line: var(--signal-line);
  --line-strong: rgba(255, 255, 255, 0.22);
  --glow: 0 0 44px rgba(154, 91, 232, 0.18), 0 0 90px rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 130, 140, 0.16), transparent 34rem),
    radial-gradient(circle at 22% 78%, rgba(154, 91, 232, 0.08), transparent 36rem),
    linear-gradient(180deg, #05070a 0%, #020305 46%, #030305 100%);
}

body[data-page]::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 18%, black, transparent 72%);
}

body[data-page] .topbar {
  border-color: rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(5, 6, 8, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 72px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
}

body[data-page] .brand,
body[data-page] .footer-brand span,
body[data-page] .nav-links a:hover,
body[data-page] .nav-links a.active {
  color: #f4f4f4;
}

body[data-page] .brand,
body[data-page] .footer-brand span,
body[data-page] .nav-links,
body[data-page] .section-label,
body[data-page] .button,
body[data-page] .stream-meta span,
body[data-page] .music-status-list span,
body[data-page] .video-status-list span,
body[data-page] .pathway-status {
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body[data-page] .brand,
body[data-page] .footer-brand span {
  font-size: 16px;
  letter-spacing: 0.68em;
}

body[data-page] .topbar .nav-links {
  font-size: 12px;
}

body[data-page] .nav-links a.active::after {
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.58);
}

body[data-page] .socials a,
body[data-page] .footer-socials a,
body[data-page] .button,
body[data-page] .glass-panel,
body[data-page] .media-tile,
body[data-page] .topic-tile,
body[data-page] .store-product-open,
body[data-page] .contact-copy,
body[data-page] .contact-form,
body[data-page] .video-stage,
body[data-page] .video-soon-rail article,
body[data-page] .about-principles article,
body[data-page] .library-controlbar,
body[data-page] .continue-strip,
body[data-page] .hero-preview-card {
  border-color: var(--signal-line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(8, 9, 12, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 80px rgba(0, 0, 0, 0.34);
}

body[data-page] .button.primary,
body[data-page] .button.secondary {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(10, 11, 14, 0.64);
}

body[data-page] .button.primary:hover,
body[data-page] .button.secondary:hover {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 34px rgba(154, 91, 232, 0.16);
}

body[data-page] .section-label,
body[data-page] .stream-meta span,
body[data-page] .music-status-list span,
body[data-page] .video-status-list span,
body[data-page] .video-soon-rail span,
body[data-page] .about-principles span,
body[data-page] .mini-wave,
body[data-page] .time {
  color: var(--signal-purple);
}

body[data-page] .music-coming-copy h1,
body[data-page] .video-soon-copy h1,
body[data-page] .stream-hero h1,
body[data-page] .about-story h1,
body[data-page] .contact-copy h1,
body[data-page] .store-hero h1,
body[data-page] .release h2,
body[data-page] .shelf-heading h2 {
  color: #f6f6f6;
  background: none;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.02;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.18);
  text-transform: uppercase;
}

body[data-page] .music-coming-copy p:not(.section-label),
body[data-page] .video-soon-copy p:not(.section-label),
body[data-page] .stream-hero-copy > p:not(.section-label),
body[data-page] .about-story p,
body[data-page] .contact-copy p,
body[data-page] .lesson-card p,
body[data-page] .coming-soon-card small,
body[data-page] .store-product-meta small {
  color: var(--signal-muted);
}

body[data-page] .music-coming-art,
body[data-page] .about-page-art,
body[data-page] .about-hero-panel .about-page-art,
body[data-page] .hero-preview-card,
body[data-page] .lesson-thumb,
body[data-page] .topic-poster::before,
body[data-page] .store-product-image {
  filter: grayscale(1) contrast(1.13) brightness(0.62);
}

body[data-page] .sound-rule {
  color: var(--signal-purple);
}

body[data-page] .sound-rule span,
body[data-page] .progress-track span,
body[data-page] .card-progress span {
  background: linear-gradient(90deg, transparent, var(--signal-purple), rgba(255, 255, 255, 0.72), transparent);
  box-shadow: 0 0 22px rgba(154, 91, 232, 0.28);
}

body[data-page="home"] .signal-hero .hero-copy {
  box-sizing: border-box;
  width: min(760px, calc(100% - 48px));
  padding: clamp(34px, 4.4vw, 54px) clamp(28px, 4.8vw, 64px) clamp(30px, 4vw, 42px);
}

body[data-page="home"] .signal-hero h1 {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  font-size: clamp(42px, 4.7vw, 72px);
  letter-spacing: clamp(0.1em, 1.1vw, 0.18em);
  text-indent: 0;
  white-space: nowrap;
}

body[data-page="home"] .signal-hero .tagline {
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(16px, 1.65vw, 24px);
  letter-spacing: clamp(0.12em, 1.1vw, 0.24em);
  line-height: 1.25;
}

body[data-page="music"] .music-coming-soon,
body[data-page="videos"] .video-soon-hero,
body[data-page="about"] .about-hero-panel,
body[data-page="library"] .exodus-hero {
  border-color: var(--signal-line);
  background:
    linear-gradient(90deg, rgba(3, 4, 6, 0.86), rgba(3, 4, 6, 0.46)),
    radial-gradient(circle at 42% 0%, rgba(255, 255, 255, 0.10), transparent 22rem),
    rgba(5, 6, 8, 0.72);
}

body[data-page="music"] .music-coming-art,
body[data-page="about"] .about-hero-panel .about-page-art {
  background:
    radial-gradient(ellipse at 56% 42%, rgba(0, 0, 0, 0) 0 150px, rgba(4, 5, 7, 0.34) 250px, rgba(4, 5, 7, 0.92) 520px),
    linear-gradient(90deg, rgba(4, 5, 7, 0.88), rgba(4, 5, 7, 0.08) 34%, rgba(4, 5, 7, 0.72) 100%),
    url("assets/about-portrait.png") center center / cover no-repeat;
}

body[data-page="videos"] .video-soon-hero::before,
body[data-page="library"] .exodus-hero {
  background:
    linear-gradient(90deg, rgba(3, 4, 6, 0.92) 0%, rgba(3, 4, 6, 0.72) 36%, rgba(3, 4, 6, 0.26) 70%, rgba(3, 4, 6, 0.9) 100%),
    linear-gradient(180deg, rgba(3, 4, 6, 0.38), transparent 34%, rgba(3, 4, 6, 0.92)),
    url("assets/about-portrait.png") 72% center / cover no-repeat;
  filter: grayscale(1) contrast(1.18) brightness(0.68);
}

body[data-page="library"] .exodus-hero {
  filter: none;
  box-shadow:
    inset 0 -160px 130px #020305,
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 34px 100px rgba(0, 0, 0, 0.62);
}

body[data-page="library"] .exodus-hero::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 28%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 24%, rgba(154, 91, 232, 0.12) 82%, transparent),
    radial-gradient(ellipse at 78% 48%, rgba(0, 0, 0, 0) 0 170px, rgba(3, 4, 6, 0.36) 300px, rgba(3, 4, 6, 0.9) 620px);
}

body[data-page="library"] .exodus-hero::after {
  background: linear-gradient(90deg, transparent, rgba(154, 91, 232, 0.76), rgba(255, 255, 255, 0.48), transparent);
  box-shadow: 0 0 28px rgba(154, 91, 232, 0.34);
}

body[data-page="contact"] .contact-layout {
  align-items: stretch;
}

body[data-page="contact"] .contact-form input,
body[data-page="contact"] .contact-form select,
body[data-page="contact"] .contact-form textarea {
  border-color: var(--signal-line);
  background: rgba(5, 6, 8, 0.64);
  color: var(--signal-text);
}

@media (max-width: 980px) {
  body[data-page] .brand,
  body[data-page] .footer-brand span {
    font-size: 13px;
    letter-spacing: 0.42em;
  }

  body[data-page="home"] .signal-hero h1 {
    font-size: clamp(38px, 7.2vw, 58px);
    letter-spacing: 0.1em;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .signal-hero .hero-copy {
    width: calc(100% - 34px);
    padding-inline: 20px;
  }

  body[data-page="home"] .signal-hero h1 {
    font-size: clamp(31px, 9.6vw, 42px);
    letter-spacing: 0.08em;
  }

  body[data-page="home"] .signal-hero .tagline {
    font-size: 14px;
    letter-spacing: 0.1em;
  }

  body[data-page] .music-coming-copy h1,
  body[data-page] .video-soon-copy h1,
  body[data-page] .stream-hero h1,
  body[data-page] .about-story h1,
  body[data-page] .contact-copy h1 {
    letter-spacing: 0.08em;
  }
}

/* About page final pass: remove the older gold treatment and keep the signal aesthetic. */
body[data-page="about"] {
  --gold: var(--signal-purple);
  --gold-bright: var(--signal-text);
  --line: var(--signal-line);
  --line-strong: rgba(255, 255, 255, 0.22);
}

body[data-page="about"] .about-hero-panel {
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  min-height: min(720px, calc(100vh - 130px));
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(7, 8, 11, 0.9), rgba(7, 8, 11, 0.42)),
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.11), transparent 26rem),
    rgba(4, 5, 7, 0.78);
}

body[data-page="about"] .about-hero-panel::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%),
    radial-gradient(circle at 22% 74%, rgba(154, 91, 232, 0.13), transparent 24rem);
}

body[data-page="about"] .about-hero-panel .about-story {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: clamp(42px, 6vw, 72px);
}

body[data-page="about"] .about-hero-panel .section-label {
  color: var(--signal-purple);
}

body[data-page="about"] .about-hero-panel .about-story h1 {
  max-width: 100%;
  color: #f5f5f3;
  background: none;
  background-clip: border-box;
  font-size: clamp(54px, 5.7vw, 86px);
  font-weight: 400;
  letter-spacing: clamp(0.12em, 1.05vw, 0.22em);
  line-height: 1.05;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.16), 0 22px 70px rgba(0, 0, 0, 0.52);
  transform: none;
}

body[data-page="about"] .about-hero-panel .about-story p:not(.section-label) {
  max-width: 520px;
  color: rgba(242, 244, 244, 0.72);
}

body[data-page="about"] .about-hero-panel .button.primary,
body[data-page="about"] .about-hero-panel .button.secondary {
  border-color: rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025)),
    rgba(8, 9, 12, 0.62);
  color: #f5f5f3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 54px rgba(0, 0, 0, 0.28);
}

body[data-page="about"] .about-hero-panel .about-page-art {
  min-height: 100%;
  background:
    radial-gradient(ellipse at 48% 48%, rgba(0, 0, 0, 0) 0 150px, rgba(4, 5, 7, 0.32) 270px, rgba(4, 5, 7, 0.92) 600px),
    linear-gradient(90deg, rgba(4, 5, 7, 0.86), rgba(4, 5, 7, 0.04) 34%, rgba(4, 5, 7, 0.7) 100%),
    url("assets/about-portrait.png") 48% center / cover no-repeat;
  filter: grayscale(1) contrast(1.2) brightness(0.64);
}

body[data-page="about"] .about-hero-panel .signature {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.22);
}

body[data-page="about"] .about-principles article {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(7, 8, 11, 0.58);
}

body[data-page="about"] .about-principles span {
  color: var(--signal-purple);
}

@media (max-width: 980px) {
  body[data-page="about"] .about-hero-panel {
    grid-template-columns: 1fr;
  }

  body[data-page="about"] .about-hero-panel .about-story h1 {
    font-size: clamp(44px, 10vw, 72px);
    letter-spacing: 0.12em;
  }

  body[data-page="about"] .about-hero-panel .about-page-art {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  body[data-page="about"] .about-hero-panel .about-story {
    padding: 28px 22px;
  }

  body[data-page="about"] .about-hero-panel .about-story h1 {
    font-size: clamp(35px, 12vw, 52px);
    letter-spacing: 0.08em;
  }
}

/* Contact page final pass: keep the large title inside its panel. */
body[data-page="contact"] .contact-layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
}

body[data-page="contact"] .contact-copy {
  min-width: 0;
  overflow: hidden;
}

body[data-page="contact"] .contact-copy h1 {
  max-width: 100%;
  color: #f5f5f3;
  background: none;
  font-size: clamp(48px, 5.3vw, 78px);
  font-weight: 400;
  letter-spacing: clamp(0.1em, 0.9vw, 0.16em);
  line-height: 1.18;
  overflow-wrap: normal;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.16), 0 22px 70px rgba(0, 0, 0, 0.52);
  word-break: normal;
}

body[data-page="contact"] .contact-copy p {
  max-width: 620px;
}

body[data-page="contact"] .contact-copy .text-link {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 980px) {
  body[data-page="contact"] .contact-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="contact"] .contact-copy h1 {
    font-size: clamp(44px, 9vw, 72px);
    letter-spacing: 0.1em;
  }
}

@media (max-width: 640px) {
body[data-page="contact"] .contact-copy h1 {
    font-size: clamp(34px, 11vw, 50px);
    letter-spacing: 0.07em;
  }
}

/* Exodus Project blog */
body[data-page="library"] .exodus-blog-shell {
  gap: 46px;
}

body[data-page="library"] .exodus-blog-shell .stream-hero {
  align-items: end;
  min-height: min(680px, calc(100vh - 120px));
  border: 0;
  background:
    linear-gradient(90deg, rgba(2, 3, 3, 0.98) 0%, rgba(2, 3, 3, 0.78) 43%, rgba(2, 3, 3, 0.24) 100%),
    var(--hero-image) center/cover;
  box-shadow: inset 0 -160px 140px rgba(2, 3, 3, 0.95);
}

body[data-page="library"] .exodus-blog-shell .stream-copy {
  max-width: 780px;
}

body[data-page="library"] .exodus-blog-shell .stream-copy h1 {
  max-width: 11ch;
  font-size: clamp(54px, 8vw, 112px);
  line-height: 0.94;
}

body[data-page="library"] .exodus-blog-shell .hero-preview {
  align-self: end;
  border-color: rgba(229, 219, 188, 0.2);
  background: rgba(10, 10, 8, 0.74);
}

body[data-page="library"] .exodus-blog-index {
  padding: 2px 0 44px;
}

body[data-page="library"] .exodus-blog-shell .library-controlbar {
  position: relative;
  top: auto;
  z-index: 1;
  margin-bottom: 28px;
}

body[data-page="library"] .exodus-playlist-section,
body[data-page="videos"] .exodus-playlist-section {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 0.58fr);
  align-items: center;
  margin-top: 8px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 4px;
}

body[data-page="library"] .exodus-playlist-section .youtube-feed-copy,
body[data-page="videos"] .exodus-playlist-section .youtube-feed-copy {
  display: grid;
  gap: 14px;
}

body[data-page="library"] .exodus-playlist-section h2,
body[data-page="videos"] .exodus-playlist-section h2 {
  margin: 0;
  color: #f5f5f1;
  font-family: var(--display-font);
  font-size: clamp(32px, 4.8vw, 64px);
  font-weight: 600;
  line-height: 1;
}

body[data-page="library"] .exodus-playlist-section p,
body[data-page="videos"] .exodus-playlist-section p {
  margin: 0;
  color: rgba(245, 245, 241, 0.72);
  line-height: 1.6;
}

body[data-page="library"] .exodus-playlist-section .youtube-feed-status,
body[data-page="library"] .exodus-playlist-section .youtube-feed-grid,
body[data-page="videos"] .exodus-playlist-section .youtube-feed-status,
body[data-page="videos"] .exodus-playlist-section .youtube-feed-grid {
  grid-column: 1 / -1;
}

body[data-page="library"] .exodus-blog-index .rail-header h2 {
  font-size: clamp(28px, 4vw, 52px);
}

body[data-page="library"] .exodus-blog-index .rail-controls {
  display: none;
}

body[data-page="library"] .exodus-blog-index .media-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  overflow: visible;
}

body[data-page="library"] .exodus-blog-index .exodus-publish-row {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

body[data-page="library"] .exodus-publish-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(190px, 240px);
  min-height: 760px;
  overflow: hidden;
  border: 1px solid rgba(229, 219, 188, 0.14);
  border-radius: 4px;
  background:
    radial-gradient(circle at 72% 0%, rgba(107, 76, 34, 0.12), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(20, 20, 19, 0.9);
}

body[data-page="library"] .exodus-publish-sidebar,
body[data-page="library"] .exodus-publish-outline {
  min-width: 0;
  padding: 24px 20px;
  background: rgba(10, 10, 9, 0.46);
}

body[data-page="library"] .exodus-publish-sidebar {
  border-right: 1px solid rgba(229, 219, 188, 0.12);
}

body[data-page="library"] .exodus-publish-outline {
  border-left: 1px solid rgba(229, 219, 188, 0.12);
}

body[data-page="library"] .exodus-publish-brand {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
}

body[data-page="library"] .exodus-publish-brand strong {
  color: #f5f5f1;
  font-family: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.1;
}

body[data-page="library"] .exodus-publish-brand small,
body[data-page="library"] .exodus-publish-search span,
body[data-page="library"] .exodus-publish-tree small,
body[data-page="library"] .exodus-publish-outline p {
  color: rgba(245, 245, 241, 0.52);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-publish-search {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

body[data-page="library"] .exodus-publish-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(229, 219, 188, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.055);
  color: #f5f5f1;
  padding: 0 12px;
}

body[data-page="library"] .exodus-publish-tree {
  display: grid;
  gap: 2px;
}

body[data-page="library"] .exodus-publish-folder {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px 0 8px 2px;
  color: rgba(245, 245, 241, 0.86);
}

body[data-page="library"] .exodus-publish-folder span {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

body[data-page="library"] .exodus-publish-folder strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="library"] .exodus-publish-tree button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px 10px 25px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: rgba(245, 245, 241, 0.72);
  cursor: pointer;
  text-align: left;
}

body[data-page="library"] .exodus-publish-tree button[hidden],
body[data-page="library"] .exodus-publish-empty[hidden] {
  display: none !important;
}

body[data-page="library"] .exodus-publish-tree button:hover,
body[data-page="library"] .exodus-publish-tree button.active {
  border-left-color: #b56cff;
  background: rgba(181, 108, 255, 0.08);
  color: #f5f5f1;
}

body[data-page="library"] .exodus-publish-tree span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="library"] .exodus-publish-empty {
  margin: 10px 0 0 25px;
  color: rgba(245, 245, 241, 0.46);
  font-size: 0.84rem;
  font-weight: 800;
}

body[data-page="library"] .exodus-publish-reader {
  min-width: 0;
  padding: clamp(28px, 5vw, 64px);
}

body[data-page="library"] .exodus-publish-reader > h2 {
  max-width: 12ch;
  margin: 8px 0 28px;
  color: #f5f5f1;
  font-family: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 6vw, 82px);
  line-height: 0.98;
}

body[data-page="library"] .exodus-publish-body {
  max-width: 76ch;
}

body[data-page="library"] .exodus-publish-outline {
  display: grid;
  align-content: start;
  gap: 14px;
}

body[data-page="library"] .exodus-publish-outline nav {
  display: grid;
  gap: 12px;
}

body[data-page="library"] .exodus-publish-outline a,
body[data-page="library"] .exodus-publish-outline span {
  color: rgba(245, 245, 241, 0.62);
  font-size: 0.9rem;
  line-height: 1.35;
  text-decoration: none;
}

body[data-page="library"] .exodus-publish-outline a:hover {
  color: #e5dbbc;
}

@media (max-width: 1180px) {
  body[data-page="library"] .exodus-publish-shell {
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  }

  body[data-page="library"] .exodus-publish-outline {
    display: none;
  }
}

@media (max-width: 760px) {
  body[data-page="library"] .exodus-publish-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  body[data-page="library"] .exodus-publish-sidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(229, 219, 188, 0.12);
  }

  body[data-page="library"] .exodus-publish-sidebar,
  body[data-page="library"] .exodus-publish-outline {
    padding: 18px;
  }

  body[data-page="library"] .exodus-publish-tree {
    max-height: 280px;
    overflow: auto;
  }

  body[data-page="library"] .exodus-publish-reader {
    padding: 24px 18px 32px;
  }

  body[data-page="library"] .exodus-publish-reader > h2 {
    max-width: 100%;
    font-size: clamp(34px, 12vw, 58px);
  }
}

body[data-page="library"] .article-tile {
  display: grid;
  min-height: 360px;
  padding: 24px;
  border: 1px solid rgba(229, 219, 188, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(10, 10, 8, 0.74);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

body[data-page="library"] .article-tile:hover,
body[data-page="library"] .article-tile:focus-visible {
  border-color: rgba(229, 219, 188, 0.34);
  transform: translateY(-4px);
}

body[data-page="library"] .article-tile .tile-thumb {
  min-height: 118px;
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(229, 219, 188, 0.16), rgba(141, 43, 53, 0.14)),
    var(--thumb-image) center/cover;
}

body[data-page="library"] .article-tile .tile-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0 0;
}

body[data-page="library"] .article-tile .section-label {
  color: rgba(229, 219, 188, 0.74);
}

body[data-page="library"] .article-tile h3 {
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.04;
}

body[data-page="library"] .article-tile p {
  color: rgba(245, 245, 241, 0.72);
  font-size: 0.98rem;
  line-height: 1.62;
}

body[data-page="library"] .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  color: rgba(245, 245, 241, 0.58);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="library"] .article-modal .video-modal-dialog {
  width: min(1040px, calc(100vw - 30px));
}

body[data-page="library"] .article-modal {
  width: min(1080px, calc(100% - 32px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  border-color: rgba(229, 219, 188, 0.26);
  border-radius: 4px;
  background:
    radial-gradient(circle at 82% 8%, rgba(142, 111, 55, 0.16), transparent 24rem),
    linear-gradient(180deg, rgba(22, 22, 20, 0.96), rgba(5, 5, 4, 0.98));
}

body[data-page="library"] .article-modal .modal-player,
body[data-page="library"] .article-modal .modal-tabs,
body[data-page="library"] .article-modal .modal-actions {
  display: none;
}

body[data-page="library"] .article-modal .modal-body {
  display: grid;
  gap: 30px;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 76px) clamp(22px, 5vw, 64px);
}

body[data-page="library"] .article-modal .modal-titlebar {
  display: block;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(229, 219, 188, 0.16);
}

body[data-page="library"] .article-modal .modal-titlebar h2 {
  max-width: 12ch;
  margin: 10px 0 0;
  color: #f5f5f1;
  font-family: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 7vw, 94px);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 0.96;
}

body[data-page="library"] .article-modal [data-modal-description] {
  display: block;
}

body[data-page="library"] .blog-article-body {
  display: grid;
  gap: 24px;
  color: rgba(245, 245, 241, 0.82);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.82;
}

body[data-page="library"] .blog-article-body h2,
body[data-page="library"] .blog-article-body h3,
body[data-page="library"] .blog-article-body h4 {
  margin-top: 10px;
  color: #f5f5f1;
  font-family: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

body[data-page="library"] .blog-article-body h2 {
  font-size: clamp(30px, 4vw, 52px);
}

body[data-page="library"] .blog-article-body h3 {
  font-size: clamp(24px, 3vw, 38px);
}

body[data-page="library"] .blog-article-body p {
  margin: 0;
}

body[data-page="library"] .blog-article-body a {
  color: #e5dbbc;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

body[data-page="library"] .blog-article-body blockquote {
  margin: 0;
  padding: 18px 22px;
  border-left: 2px solid rgba(229, 219, 188, 0.5);
  background: rgba(255, 255, 255, 0.04);
  color: #f5f5f1;
}

body[data-page="library"] .blog-article-body ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.2em;
}

body[data-page="library"] .blog-article-body figure {
  margin: 8px 0;
}

body[data-page="library"] .blog-article-body img {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  border: 1px solid rgba(229, 219, 188, 0.14);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.32);
}

body[data-page="library"] .modal-episode-list button,
body[data-page="library"] .resource-list button {
  width: 100%;
  border: 1px solid rgba(229, 219, 188, 0.12);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 720px) {
  body[data-page="library"] .exodus-blog-shell .stream-hero {
    min-height: auto;
    padding-top: 64px;
  }

  body[data-page="library"] .exodus-blog-shell .stream-copy h1 {
    max-width: 100%;
    font-size: clamp(42px, 14vw, 72px);
  }

  body[data-page="library"] .exodus-playlist-section,
  body[data-page="videos"] .exodus-playlist-section {
    grid-template-columns: 1fr;
  }

  body[data-page="library"] .article-tile {
    min-height: 0;
  }

  body[data-page="library"] .article-modal .video-modal-copy {
    max-height: none;
    padding-right: 0;
  }
}

/* Exodus typography final pass */
.nav-links a[data-page-link="library"],
body[data-page="library"] .stream-hero h1,
body[data-page="library"] .exodus-playlist-section h2,
body[data-page="videos"] .exodus-playlist-section h2,
body[data-page="library"] .article-tile h3,
body[data-page="library"] .blog-article-body h2,
body[data-page="library"] .blog-article-body h3,
body[data-page="library"] .blog-article-body h4 {
  font-family: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

.nav-links a[data-page-link="library"] {
  font-weight: 700;
  letter-spacing: 0.08em;
}

body[data-page="library"] .stream-hero h1 {
  max-width: 12ch;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.02;
}

body[data-page="library"] .exodus-blog-shell .stream-copy h1 {
  max-width: 12ch;
  line-height: 1.02;
}

body[data-page="library"] .article-tile h3 {
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

/* Exodus publish reader glassmorphism + imported Obsidian prose reset */
body[data-page="library"] .exodus-publish-shell {
  --reader-text-size: clamp(1rem, 1.05vw, 1.12rem);
  --reader-line-height: 1.78;
  --reader-nav-size: 1rem;
  --reader-label-size: 0.72rem;
  --reader-brand-size: 1.25rem;
  --reader-folder-size: 0.75rem;
  --reader-title-size: clamp(42px, 5vw, 74px);
  --reader-h2-size: clamp(1.65rem, 2vw, 2.35rem);
  --reader-h3-size: clamp(1.32rem, 1.55vw, 1.75rem);
  --reader-h4-size: clamp(1.1rem, 1.2vw, 1.32rem);
  position: relative;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(220px, 280px);
  grid-template-rows: 60px minmax(0, 1fr);
  height: min(86vh, 920px);
  min-height: 640px;
  border-color: rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(circle at 52% 0%, rgba(181, 108, 255, 0.16), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(229, 219, 188, 0.1), transparent 24rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035)),
    rgba(9, 10, 12, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 34px 110px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(24px) saturate(1.28);
}

body[data-page="library"] .exodus-publish-shell[data-reader-size="small"] {
  --reader-text-size: 0.96rem;
  --reader-line-height: 1.68;
  --reader-nav-size: 0.9rem;
  --reader-label-size: 0.66rem;
  --reader-brand-size: 1.08rem;
  --reader-folder-size: 0.68rem;
  --reader-title-size: clamp(36px, 4.4vw, 64px);
  --reader-h2-size: clamp(1.42rem, 1.72vw, 2rem);
  --reader-h3-size: clamp(1.18rem, 1.34vw, 1.48rem);
  --reader-h4-size: clamp(1rem, 1.08vw, 1.14rem);
}

body[data-page="library"] .exodus-publish-shell[data-reader-size="large"] {
  --reader-text-size: 1.24rem;
  --reader-line-height: 1.82;
  --reader-nav-size: 1.12rem;
  --reader-label-size: 0.8rem;
  --reader-brand-size: 1.4rem;
  --reader-folder-size: 0.84rem;
  --reader-title-size: clamp(50px, 5.7vw, 86px);
  --reader-h2-size: clamp(1.92rem, 2.3vw, 2.72rem);
  --reader-h3-size: clamp(1.52rem, 1.85vw, 2rem);
  --reader-h4-size: clamp(1.24rem, 1.4vw, 1.5rem);
}

body[data-page="library"] .exodus-publish-sidebar,
body[data-page="library"] .exodus-publish-outline,
body[data-page="library"] .exodus-publish-reader {
  grid-row: 2;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
}

body[data-page="library"] .exodus-publish-sidebar {
  grid-column: 1;
}

body[data-page="library"] .exodus-publish-reader {
  grid-column: 2;
}

body[data-page="library"] .exodus-publish-outline {
  grid-column: 3;
}

body[data-page="library"] .exodus-publish-sidebar,
body[data-page="library"] .exodus-publish-outline {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(8, 9, 11, 0.54);
  backdrop-filter: blur(18px);
}

body[data-page="library"] .exodus-publish-reader {
  padding: clamp(28px, 4vw, 56px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.024)),
    rgba(16, 17, 17, 0.42);
}

body[data-page="library"] .exodus-publish-reader > h2 {
  width: 100%;
  max-width: 100%;
  margin-bottom: clamp(22px, 3vw, 40px);
  font-size: var(--reader-title-fit-size, var(--reader-title-size));
  letter-spacing: 0.01em;
  overflow: visible;
  overflow-wrap: normal;
  text-wrap: nowrap;
  white-space: nowrap;
  word-break: normal;
}

body[data-page="library"] .exodus-reader-controls {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  z-index: 8;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
    rgba(5, 6, 7, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="library"] .exodus-font-controls {
  display: inline-grid;
  grid-template-columns: 42px 82px 42px;
  gap: 5px;
}

body[data-page="library"] .exodus-reader-controls button {
  min-height: 32px;
  border: 1px solid rgba(229, 219, 188, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(245, 245, 241, 0.74);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body[data-page="library"] .exodus-reader-controls button:hover,
body[data-page="library"] .exodus-reader-controls button:focus-visible,
body[data-page="library"] .exodus-reader-controls button.active {
  border-color: rgba(229, 219, 188, 0.48);
  background: rgba(181, 108, 255, 0.14);
  color: #f8f5ed;
}

body[data-page="library"] .exodus-reader-controls button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

body[data-page="library"] .exodus-publish-body {
  display: block;
  max-width: 74ch;
  min-width: 0;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 0%, rgba(181, 108, 255, 0.09), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.026)),
    rgba(5, 6, 7, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 22px 70px rgba(0, 0, 0, 0.22);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--reader-text-size);
  line-height: var(--reader-line-height);
  overflow-wrap: anywhere;
}

body[data-page="library"] .exodus-publish-brand strong {
  font-size: var(--reader-brand-size);
}

body[data-page="library"] .exodus-publish-brand small,
body[data-page="library"] .exodus-publish-search span,
body[data-page="library"] .exodus-publish-tree small,
body[data-page="library"] .exodus-publish-outline p,
body[data-page="library"] .exodus-publish-empty {
  font-size: var(--reader-label-size);
}

body[data-page="library"] .exodus-publish-search input,
body[data-page="library"] .exodus-publish-tree button {
  font-size: var(--reader-nav-size);
}

body[data-page="library"] .exodus-publish-folder strong {
  font-size: var(--reader-folder-size);
}

body[data-page="library"] .exodus-publish-body > * + * {
  margin-top: 1.08em;
}

body[data-page="library"] .exodus-publish-body h2,
body[data-page="library"] .exodus-publish-body h3,
body[data-page="library"] .exodus-publish-body h4 {
  max-width: 100%;
  margin: 1.85em 0 0.55em;
  color: #f7f4ec;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.18;
  overflow-wrap: break-word;
  text-transform: none;
}

body[data-page="library"] .exodus-publish-body h2 {
  font-size: var(--reader-h2-size);
}

body[data-page="library"] .exodus-publish-body h3 {
  font-size: var(--reader-h3-size);
}

body[data-page="library"] .exodus-publish-body h4 {
  color: rgba(245, 245, 241, 0.92);
  font-size: var(--reader-h4-size);
}

body[data-page="library"] .exodus-publish-body p,
body[data-page="library"] .exodus-publish-body li {
  color: rgba(245, 245, 241, 0.78);
}

body[data-page="library"] .obsidian-color {
  font-weight: 750;
  text-shadow: 0 0 18px color-mix(in srgb, currentColor 38%, transparent);
}

body[data-page="library"] .obsidian-center {
  display: block;
  text-align: center;
}

body[data-page="library"] .obsidian-embed {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 70px rgba(0, 0, 0, 0.28);
}

body[data-page="library"] .obsidian-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

body[data-page="library"] .exodus-publish-body ul,
body[data-page="library"] .exodus-publish-body ol {
  padding-left: 1.35em;
}

body[data-page="library"] .exodus-publish-body blockquote {
  border-left-color: rgba(181, 108, 255, 0.72);
  border-radius: 0 8px 8px 0;
  background: rgba(181, 108, 255, 0.08);
}

body[data-page="library"] .exodus-publish-outline nav {
  gap: 10px;
}

body[data-page="library"] .exodus-publish-outline a,
body[data-page="library"] .exodus-publish-outline span {
  display: block;
  padding: 8px 0 8px 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 245, 241, 0.58);
  font-size: var(--reader-nav-size);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

body[data-page="library"] .exodus-publish-outline a:hover {
  border-left-color: rgba(181, 108, 255, 0.78);
  color: #f5f5f1;
}

body[data-page="library"] .exodus-publish-outline a.is-read {
  border-left-color: rgba(181, 108, 255, 0.54);
  background: linear-gradient(90deg, rgba(181, 108, 255, 0.12), transparent 72%);
  color: rgba(245, 245, 241, 0.76);
}

body[data-page="library"] .exodus-publish-outline a.is-active {
  border-left-color: #b56cff;
  background:
    linear-gradient(90deg, rgba(181, 108, 255, 0.22), rgba(181, 108, 255, 0.055) 72%, transparent),
    rgba(255, 255, 255, 0.025);
  color: #f7f4ec;
  text-shadow: 0 0 18px rgba(181, 108, 255, 0.24);
}

body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(circle at 52% 0%, rgba(181, 108, 255, 0.14), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(229, 219, 188, 0.34), transparent 24rem),
    linear-gradient(135deg, rgba(245, 240, 226, 0.9), rgba(216, 207, 188, 0.72)),
    rgba(238, 232, 216, 0.78);
}

body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-reader,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-sidebar,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-outline,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-reader-controls,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.34)),
    rgba(247, 242, 230, 0.62);
}

body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-brand strong,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-reader > h2,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-body h2,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-body h3,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-body h4 {
  color: #17140f;
}

body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .section-label,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-brand small,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-search span,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-tree small,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-outline p {
  color: rgba(23, 20, 15, 0.56);
}

body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-body p,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-body li,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-tree button,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-outline a,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-outline span {
  color: rgba(23, 20, 15, 0.76);
}

body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-search input,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-reader-controls button {
  border-color: rgba(23, 20, 15, 0.18);
  background: rgba(255, 255, 255, 0.56);
  color: rgba(23, 20, 15, 0.74);
}

body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-tree button:hover,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-tree button.active,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-reader-controls button:hover,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-reader-controls button:focus-visible,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-reader-controls button.active {
  background: rgba(181, 108, 255, 0.13);
  color: #17140f;
}

body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .obsidian-embed,
body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-body blockquote {
  border-color: rgba(23, 20, 15, 0.14);
  background: rgba(255, 255, 255, 0.5);
}

/* Exodus library archive polish */
body[data-page="library"] .exodus-blog-index {
  position: relative;
  width: min(1380px, calc(100% - 48px));
  margin-inline: auto;
}

body[data-page="library"] .exodus-blog-index .shelf-heading h2 {
  max-width: none;
  margin: 0 0 16px;
  color: rgba(245, 245, 241, 0.82);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 400;
  letter-spacing: 0.34em;
  line-height: 1.1;
  opacity: 1;
}

body[data-page="library"] .exodus-blog-index .exodus-publish-row {
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(181, 108, 255, 0.13), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(4, 5, 7, 0.34);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.45);
}

body[data-page="library"] .exodus-publish-shell {
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) minmax(210px, 250px);
  grid-template-rows: auto minmax(0, 1fr);
  height: min(82vh, 840px);
  min-height: 640px;
  overflow: hidden;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025) 42%, rgba(255, 255, 255, 0.065)),
    radial-gradient(circle at 52% 0%, rgba(181, 108, 255, 0.18), transparent 26rem),
    rgba(9, 10, 12, 0.62);
}

body[data-page="library"] .exodus-publish-shell::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px) 0 0 / calc((100% - 560px) / 2) 100% no-repeat,
    radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%, rgba(0, 0, 0, 0.26) 100%);
  opacity: 0.72;
}

body[data-page="library"] .exodus-reader-controls {
  grid-column: 2;
  justify-self: center;
  margin: 18px 0 6px;
  padding: 5px;
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(2, 3, 5, 0.42);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

body[data-page="library"] .exodus-font-controls {
  grid-template-columns: 40px 78px 40px;
}

body[data-page="library"] .exodus-reader-controls button {
  min-height: 30px;
  border-radius: 999px;
}

body[data-page="library"] .exodus-publish-sidebar,
body[data-page="library"] .exodus-publish-outline,
body[data-page="library"] .exodus-publish-reader {
  position: relative;
  z-index: 1;
}

body[data-page="library"] .exodus-publish-sidebar {
  padding: 32px 20px 26px 24px;
  border-right-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(5, 6, 8, 0.5);
}

body[data-page="library"] .exodus-publish-brand {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body[data-page="library"] .exodus-publish-brand strong {
  max-width: 11ch;
  font-size: clamp(20px, 1.55vw, 26px);
}

body[data-page="library"] .exodus-publish-search {
  margin-bottom: 22px;
}

body[data-page="library"] .exodus-publish-search input {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-page="library"] .exodus-publish-search input::placeholder {
  color: rgba(245, 245, 241, 0.38);
}

body[data-page="library"] .exodus-publish-tree {
  gap: 6px;
  padding-right: 3px;
}

body[data-page="library"] .exodus-publish-folder {
  margin-bottom: 4px;
  padding: 10px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

body[data-page="library"] .exodus-publish-tree button {
  position: relative;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  min-height: 58px;
  padding: 11px 12px 11px 18px;
  border: 1px solid transparent;
  border-left: 0;
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}

body[data-page="library"] .exodus-publish-tree button::before {
  position: absolute;
  inset: 9px auto 9px 0;
  width: 2px;
  content: "";
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

body[data-page="library"] .exodus-publish-tree button:hover,
body[data-page="library"] .exodus-publish-tree button.active {
  border-color: rgba(181, 108, 255, 0.22);
  background:
    linear-gradient(90deg, rgba(181, 108, 255, 0.18), rgba(181, 108, 255, 0.045) 68%, transparent),
    rgba(255, 255, 255, 0.035);
}

body[data-page="library"] .exodus-publish-tree button:hover::before,
body[data-page="library"] .exodus-publish-tree button.active::before {
  background: #b56cff;
  box-shadow: 0 0 18px rgba(181, 108, 255, 0.64);
}

body[data-page="library"] .exodus-publish-tree button span {
  grid-column: 1 / -1;
}

body[data-page="library"] .exodus-publish-tree button small {
  justify-self: start;
}

body[data-page="library"] .exodus-publish-reader {
  padding: clamp(28px, 4vw, 52px) clamp(34px, 5vw, 72px) 52px;
  background:
    radial-gradient(circle at 50% 18%, rgba(181, 108, 255, 0.09), transparent 24rem),
    rgba(14, 15, 17, 0.22);
}

body[data-page="library"] .exodus-publish-reader .section-label {
  margin-bottom: 16px;
  color: #b56cff;
}

body[data-page="library"] .exodus-publish-reader > h2 {
  max-width: min(100%, 15ch);
  margin-top: 0;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  font-size: var(--reader-title-fit-size, clamp(38px, 4.1vw, 66px));
  letter-spacing: 0.035em;
  text-wrap: balance;
  white-space: normal;
}

body[data-page="library"] .exodus-publish-body {
  max-width: 72ch;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(90deg, rgba(181, 108, 255, 0.52) 0 2px, transparent 2px),
    radial-gradient(circle at 0% 0%, rgba(181, 108, 255, 0.1), transparent 22rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.028)),
    rgba(7, 8, 11, 0.44);
}

body[data-page="library"] .exodus-publish-body p,
body[data-page="library"] .exodus-publish-body li {
  color: rgba(245, 245, 241, 0.82);
}

body[data-page="library"] .exodus-publish-body blockquote {
  padding: 20px 24px;
}

body[data-page="library"] .exodus-publish-outline {
  padding: 32px 22px 26px 20px;
  border-left-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(5, 6, 8, 0.42);
}

body[data-page="library"] .exodus-publish-outline p {
  margin-bottom: 14px;
}

body[data-page="library"] .exodus-publish-outline nav {
  gap: 8px;
}

body[data-page="library"] .exodus-publish-outline a,
body[data-page="library"] .exodus-publish-outline span {
  padding: 10px 12px;
  border-left: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
}

body[data-page="library"] .exodus-publish-outline a.is-read,
body[data-page="library"] .exodus-publish-outline a.is-active {
  background:
    linear-gradient(90deg, rgba(181, 108, 255, 0.18), rgba(181, 108, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
}

body[data-page="library"] .exodus-publish-shell[data-reader-theme="light"] .exodus-publish-body {
  background:
    linear-gradient(90deg, rgba(135, 79, 210, 0.55) 0 2px, transparent 2px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.46)),
    rgba(247, 242, 230, 0.7);
}

@media (max-width: 1180px) {
  body[data-page="library"] .exodus-publish-shell {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  }

  body[data-page="library"] .exodus-publish-outline {
    display: none;
  }
}

@media (max-width: 760px) {
  body[data-page="library"] .exodus-blog-index {
    padding-bottom: 30px;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading {
    padding-inline: 0;
  }

  body[data-page="library"] .exodus-blog-index .exodus-publish-row {
    width: 100%;
    margin-inline: 0;
  }

  body[data-page="library"] .exodus-publish-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
  }

  body[data-page="library"] .exodus-reader-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-self: start;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin: 12px 12px 0;
  }

  body[data-page="library"] .exodus-publish-sidebar,
  body[data-page="library"] .exodus-publish-reader {
    grid-column: 1;
    max-height: none;
    min-width: 0;
  }

  body[data-page="library"] .exodus-publish-sidebar {
    grid-row: 2;
    border-right: 0;
    border-bottom: 1px solid rgba(229, 219, 188, 0.12);
  }

  body[data-page="library"] .exodus-publish-search input {
    min-height: 44px;
    font-size: 16px;
  }

  body[data-page="library"] .exodus-publish-tree button {
    min-height: 48px;
  }

  body[data-page="library"] .exodus-publish-reader {
    grid-row: 3;
    padding: 22px 16px 28px;
  }

  body[data-page="library"] .exodus-publish-reader > h2 {
    max-width: 100%;
    font-size: var(--reader-title-fit-size, clamp(2.35rem, 12vw, 3.5rem));
  }

  body[data-page="library"] .exodus-reader-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page="library"] .exodus-font-controls {
    width: 100%;
  }

  body[data-page="library"] .exodus-publish-body {
    width: 100%;
    padding: 18px 14px;
  }

  body[data-page="library"] .exodus-publish-body img,
  body[data-page="library"] .obsidian-embed {
    border-radius: 6px;
  }
}

@media (min-width: 821px) {
  body[data-page] .topbar {
    position: fixed;
    top: 18px;
    left: 50%;
    right: auto;
    z-index: 40;
    display: grid;
    grid-template-columns: 260px 1fr auto;
    width: min(1220px, calc(100% - 96px));
    min-height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(-50%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body[data-page] .topbar::before {
    inset: -18px -28px -12px;
    border-radius: 999px;
    background:
      linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.065) 18%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.065) 82%, transparent 100%),
      radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.11), transparent 58%);
    opacity: 0.58;
    mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  }

  body[data-page] .brand,
  body[data-page] .footer-brand span {
    color: #f4f4f4;
    font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.68em;
  }

  body[data-page] .nav-links {
    display: flex;
    gap: clamp(22px, 3vw, 52px);
    color: rgba(246, 246, 246, 0.9);
    font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
  }

  body[data-page] .nav-links a:hover,
  body[data-page] .nav-links a.active {
    color: #fff;
  }

  body[data-page] .nav-links a.active::after {
    bottom: -10px;
    width: 32px;
    background: #fff;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
  }

  body[data-page] .socials {
    display: flex;
  }

  body[data-page] .socials a {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page] .socials svg {
    width: 17px;
    height: 17px;
  }

  body[data-page] .menu-toggle {
    display: none;
  }

  body[data-page]:not([data-page="home"]) .topbar + main {
    padding-top: 56px;
  }
}

@media (max-width: 720px) {
  body[data-page="library"] .stream-hero h1,
  body[data-page="library"] .exodus-blog-shell .stream-copy h1 {
    max-width: 100%;
    letter-spacing: 0.025em;
  }
}

/* Mobile optimization safety pass */
@media (max-width: 820px) {
  .site-shell {
    width: min(100% - 28px, 1220px);
    margin-top: 14px;
  }

  .topbar,
  body[data-page] .topbar,
  body[data-page="home"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 62px;
    padding: 10px 12px;
  }

  .brand,
  body[data-page] .brand {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    letter-spacing: 0.32em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar.nav-open .nav-links,
  body[data-page] .topbar.nav-open .nav-links,
  body[data-page="home"] .topbar.nav-open .nav-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
  }

  .topbar.nav-open .nav-links a,
  body[data-page] .topbar.nav-open .nav-links a {
    display: block;
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    letter-spacing: 0.12em;
    white-space: normal;
  }

  .topbar.nav-open .socials,
  body[data-page] .topbar.nav-open .socials,
  body[data-page="home"] .topbar.nav-open .socials {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 10px;
    margin-top: 10px;
  }

  .hero-actions,
  .modal-actions,
  .about-actions,
  .store-actions,
  .publish-actions,
  .form-actions {
    flex-wrap: wrap;
  }

  .button,
  .button.compact,
  body[data-page] .button {
    min-width: 0;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .music-coming-soon,
  .video-soon-hero,
  .about-hero-panel,
  .contact-layout,
  .episode-layout,
  .product-grid,
  .store-grid,
  .featured-product,
  .library-controlbar,
  .continue-strip,
  body[data-page="library"] .exodus-playlist-section,
  body[data-page="videos"] .exodus-playlist-section {
    grid-template-columns: 1fr !important;
  }

  .music-coming-copy,
  .video-soon-copy,
  .stream-hero-copy,
  .about-story,
  .contact-copy,
  .contact-form,
  .episode-copy,
  .featured-copy,
  .store-hero-copy {
    min-width: 0;
  }

  .music-coming-copy h1,
  .video-soon-copy h1,
  .stream-hero h1,
  .about-story h1,
  .contact-copy h1,
  .store-hero h1,
  .episode-copy h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .library-toolbar,
  .stream-meta,
  .article-meta,
  .filter-row {
    flex-wrap: wrap;
  }

  .library-search,
  .library-search input,
  .library-toolbar .library-filter {
    min-width: 0;
    width: 100%;
  }

  .video-stage,
  .music-coming-art,
  .about-page-art,
  .featured-media,
  .episode-video {
    width: 100%;
    min-width: 0;
  }

  .video-stage,
  .episode-video {
    aspect-ratio: 16 / 9;
  }

  .video-modal-dialog,
  body[data-page="library"] .article-modal .video-modal-dialog {
    width: min(100% - 18px, 1040px);
    max-height: calc(100dvh - 22px);
    overflow: auto;
  }

  .video-modal-copy,
  body[data-page="library"] .article-modal .video-modal-copy {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .blog-article-body,
  body[data-page="library"] .blog-article-body {
    font-size: 1rem;
    line-height: 1.72;
  }
}

@media (max-width: 520px) {
  .site-shell {
    width: min(100% - 20px, 1220px);
    margin-bottom: 18px;
  }

  .brand,
  body[data-page] .brand {
    font-size: 12px;
    letter-spacing: 0.22em;
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
  }

  .hero,
  .signal-hero,
  .stream-hero,
  .music-coming-soon,
  .video-soon-hero,
  .about-hero-panel {
    min-height: auto !important;
  }

  .hero-copy,
  body[data-page="home"] .signal-hero .hero-copy,
  .stream-hero-copy,
  .music-coming-copy,
  .video-soon-copy,
  .about-story,
  .contact-copy,
  .contact-form {
    padding: 24px 18px !important;
  }

  .hero-actions,
  .modal-actions,
  .about-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hero-actions .button,
  .modal-actions .button,
  .about-actions .button {
    width: 100%;
  }

  .music-coming-copy h1,
  .video-soon-copy h1,
  .stream-hero h1,
  .about-story h1,
  .contact-copy h1,
  .store-hero h1,
  .episode-copy h1 {
    font-size: clamp(32px, 11vw, 48px) !important;
    letter-spacing: 0.06em !important;
    line-height: 1.08;
  }

  body[data-page="library"] .stream-hero h1,
  body[data-page="library"] .exodus-blog-shell .stream-copy h1 {
    font-size: clamp(34px, 12vw, 52px) !important;
  }

  .section-label,
  body[data-page] .section-label,
  .stream-meta span,
  .article-meta {
    letter-spacing: 0.1em;
  }

  .footer {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: left;
  }

  .footer-socials {
    justify-content: flex-start;
  }
}

body[data-page="library"] .exodus-publish-shell .exodus-publish-body {
  font-size: var(--reader-text-size);
  line-height: var(--reader-line-height);
}

body[data-page="library"] .exodus-publish-shell .exodus-publish-reader > h2 {
  font-size: var(--reader-title-fit-size, var(--reader-title-size));
}

body[data-page] .progress-track span {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--gold-deep), #9f58ff 46%, rgba(255, 255, 255, 0.74), var(--gold-bright));
  box-shadow: var(--glow), 0 0 22px rgba(159, 88, 255, 0.28);
  animation: progressPulse 3.8s ease-in-out infinite;
}

@media (max-width: 760px) {
  body[data-page="library"] .exodus-publish-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    height: auto;
    min-height: 0;
  }

  body[data-page="library"] .exodus-reader-controls,
  body[data-page="library"] .exodus-publish-sidebar,
  body[data-page="library"] .exodus-publish-reader,
  body[data-page="library"] .exodus-publish-outline {
    grid-column: 1 / -1 !important;
    width: auto;
  }

  body[data-page="library"] .exodus-reader-controls {
    grid-row: 1;
  }

  body[data-page="library"] .exodus-publish-sidebar {
    grid-row: 2;
  }

  body[data-page="library"] .exodus-publish-reader {
    grid-row: 3;
  }

  body[data-page="library"] .exodus-publish-body {
    max-width: 100%;
  }
}

body[data-page] .progress-track span::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.48) 48%, transparent 72%);
  opacity: 0.7;
  transform: translateX(-115%);
  animation: progressSheen 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] .progress-track span,
  body[data-page] .progress-track span::after {
    animation: none;
  }
}

body[data-page="music"] {
  --music-purple: #8b19ff;
  --music-purple-hot: #a335ff;
  --music-white: #f7f2ff;
  --music-muted: rgba(245, 239, 255, 0.76);
  --music-stage: min(100% - 96px, 1480px);
  min-height: 100vh;
  color: var(--music-white);
  background: #020104;
}

body[data-page="music"]::before,
body[data-page="music"]::after {
  display: none;
}

body[data-page="music"] .music-launch-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.26), transparent 18rem),
    radial-gradient(circle at 64% 52%, rgba(136, 25, 255, 0.18), transparent 36rem),
    linear-gradient(90deg, rgba(2, 1, 4, 0.96) 0%, rgba(2, 1, 4, 0.72) 34%, rgba(2, 1, 4, 0.36) 72%, rgba(2, 1, 4, 0.16) 100%),
    url("assets/music-realm-bg.png?v=20260615") center center / cover no-repeat,
    #020104;
}

body[data-page="music"] .music-launch-shell::before {
  position: absolute;
  inset: 0;
  z-index: -3;
  content: "";
  background: url("assets/music-realm-bg.png?v=20260615") right center / auto 100% no-repeat;
  filter: saturate(1.1) contrast(1.08);
}

body[data-page="music"] .music-launch-shell::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(2, 1, 4, 0.94) 0%, rgba(2, 1, 4, 0.82) 28%, rgba(2, 1, 4, 0.42) 54%, rgba(2, 1, 4, 0.08) 100%),
    linear-gradient(180deg, rgba(2, 1, 4, 0.18) 0%, transparent 34%, rgba(2, 1, 4, 0.58) 86%, rgba(2, 1, 4, 0.94) 100%),
    radial-gradient(circle at 24% 53%, rgba(2, 1, 4, 0.72), transparent 25rem),
    radial-gradient(circle at 25% 82%, rgba(139, 25, 255, 0.18), transparent 20rem);
}

body[data-page="music"] .music-launch-topbar {
  position: sticky;
  top: 22px;
  z-index: 3;
  display: grid;
  grid-template-columns: 270px 1fr auto;
  align-items: center;
  width: var(--music-stage);
  min-height: 73px;
  margin: 26px auto 0;
  padding: 12px 25px 12px 30px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(4, 5, 8, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 22px 70px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
}

body[data-page="music"] .music-launch-topbar .brand {
  color: #f7f2ff;
}

body[data-page="music"] .music-launch-topbar .nav-links a.active,
body[data-page="music"] .music-launch-topbar .nav-links a:hover {
  color: var(--music-purple-hot);
}

body[data-page="music"] .music-launch-topbar .nav-links a.active::after {
  background: linear-gradient(90deg, transparent, var(--music-purple), transparent);
  box-shadow: 0 0 14px rgba(139, 25, 255, 0.88);
}

body[data-page="music"] .music-launch-topbar .socials a:hover {
  border-color: rgba(139, 25, 255, 0.74);
  box-shadow: 0 0 24px rgba(139, 25, 255, 0.28), inset 0 0 18px rgba(255, 255, 255, 0.055);
}

body[data-page="music"] .music-launch-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  color: var(--music-purple);
}

body[data-page="music"] .music-launch-mark span,
body[data-page="music"] .music-launch-rule b i {
  display: block;
  width: 4px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 16px rgba(139, 25, 255, 0.9);
}

body[data-page="music"] .music-launch-mark span:nth-child(1),
body[data-page="music"] .music-launch-mark span:nth-child(5) {
  height: 18px;
}

body[data-page="music"] .music-launch-mark span:nth-child(2),
body[data-page="music"] .music-launch-mark span:nth-child(4) {
  height: 28px;
}

body[data-page="music"] .music-launch-mark span:nth-child(3) {
  height: 36px;
}

body[data-page="music"] .music-launch-socials {
  display: flex;
  align-items: center;
  gap: 24px;
}

body[data-page="music"] .music-launch-socials a {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: rgba(255, 255, 255, 0.94);
  transition: color 180ms ease, filter 180ms ease, transform 180ms ease;
}

body[data-page="music"] .music-launch-socials a:hover {
  color: var(--music-purple-hot);
  filter: drop-shadow(0 0 14px rgba(139, 25, 255, 0.72));
  transform: translateY(-1px);
}

body[data-page="music"] .music-launch-socials svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

body[data-page="music"] .music-launch-socials a:nth-child(2) svg,
body[data-page="music"] .music-launch-socials a:nth-child(3) svg {
  fill: currentColor;
  stroke: none;
}

body[data-page="music"] .music-launch-page {
  display: grid;
  min-height: calc(100vh - 76px);
}

body[data-page="music"] .music-launch-hero {
  display: grid;
  align-items: center;
  width: var(--music-stage);
  margin: 0 auto;
  padding: 42px 0 96px;
}

body[data-page="music"] .music-launch-copy {
  width: min(560px, 42vw);
  margin-top: -2px;
}

body[data-page="music"] .music-launch-kicker {
  display: flex;
  align-items: center;
  gap: 34px;
  width: min(410px, 100%);
  margin: 0 0 24px 18px;
  color: var(--music-purple);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 700;
  letter-spacing: 0.48em;
  text-transform: uppercase;
}

body[data-page="music"] .music-launch-kicker i,
body[data-page="music"] .music-launch-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--music-purple), transparent);
  box-shadow: 0 0 14px rgba(139, 25, 255, 0.55);
}

body[data-page="music"] .music-launch-copy h1 {
  margin: 0 0 24px;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #f7f1ff 38%, #ab8def 64%, #6500db 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(88px, 7vw, 132px);
  font-weight: 900;
  letter-spacing: 0.015em;
  line-height: 0.88;
  text-transform: uppercase;
  text-shadow: 0 20px 70px rgba(93, 0, 213, 0.36);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
}

body[data-page="music"] .music-launch-rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  width: min(470px, 100%);
  margin: 0 0 32px;
  color: var(--music-purple);
}

body[data-page="music"] .music-launch-rule b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
  border-radius: 999px;
  background: rgba(72, 0, 145, 0.22);
  box-shadow: 0 0 28px rgba(139, 25, 255, 0.7);
}

body[data-page="music"] .music-launch-rule b i:nth-child(1),
body[data-page="music"] .music-launch-rule b i:nth-child(5) {
  height: 17px;
}

body[data-page="music"] .music-launch-rule b i:nth-child(2),
body[data-page="music"] .music-launch-rule b i:nth-child(4) {
  height: 28px;
}

body[data-page="music"] .music-launch-rule b i:nth-child(3) {
  height: 36px;
}

body[data-page="music"] .music-launch-copy p {
  max-width: 535px;
  margin: 0 0 34px;
  color: var(--music-muted);
  font-size: clamp(19px, 1.35vw, 24px);
  line-height: 1.45;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62);
}

body[data-page="music"] .music-launch-copy p strong {
  color: var(--music-purple-hot);
}

body[data-page="music"] .music-status-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin: 0 0 34px;
}

body[data-page="music"] .music-status-list span {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.92);
  background: none;
  box-shadow: none;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="music"] .music-status-list span + span {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

body[data-page="music"] .music-status-list svg {
  width: 31px;
  height: 31px;
  color: var(--music-purple);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(139, 25, 255, 0.72));
}

body[data-page="music"] .music-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

body[data-page="music"] .music-launch-actions .button {
  min-width: 246px;
  min-height: 66px;
  gap: 15px;
  padding: 0 28px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.23);
  color: #fff;
  background: rgba(9, 7, 13, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="music"] .music-launch-actions .button.primary {
  border-color: rgba(139, 25, 255, 0.92);
  background:
    radial-gradient(circle at 25% 0%, rgba(139, 25, 255, 0.52), transparent 62%),
    rgba(21, 5, 42, 0.78);
  box-shadow: 0 0 36px rgba(139, 25, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-page="music"] .music-launch-actions .button:hover {
  border-color: rgba(166, 76, 255, 0.92);
  box-shadow: 0 0 42px rgba(139, 25, 255, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body[data-page="music"] .music-launch-actions svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="music"] .site-copyright {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 3;
  width: var(--music-stage);
  transform: translateX(-50%);
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.74);
}

@media (max-width: 980px) {
  body[data-page="music"] {
    --music-stage: min(100% - 48px, 1390px);
  }

  body[data-page="music"] .music-launch-shell::before {
    opacity: 0.82;
    background-size: auto 100%;
    background-position: right top;
  }

  body[data-page="music"] .music-launch-shell::after {
    background:
      linear-gradient(90deg, #020104 0%, rgba(2, 1, 4, 0.88) 54%, rgba(2, 1, 4, 0.32) 100%),
      linear-gradient(180deg, rgba(2, 1, 4, 0.32) 0%, rgba(2, 1, 4, 0.64) 100%);
  }

  body[data-page="music"] .music-launch-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-page="music"] .music-launch-topbar.nav-open .nav-links,
  body[data-page="music"] .music-launch-topbar.nav-open .socials {
    grid-column: 1 / -1;
  }

  body[data-page="music"] .music-launch-copy {
    width: min(690px, 100%);
  }

  body[data-page="music"] .site-copyright {
    position: relative;
    left: auto;
    bottom: auto;
    width: var(--music-stage);
    margin: -56px auto 34px;
    transform: none;
  }
}

/* Mobile alignment polish: keep every page shell on the same visual axis. */
@media (max-width: 640px) {
  html,
  body,
  .site-shell,
  body[data-page="home"] .site-shell {
    width: 100%;
    max-width: 100% !important;
    margin-inline: auto !important;
    overflow-x: clip;
  }

  .topbar,
  body[data-page] .topbar,
  body[data-page] .subpage,
  body[data-page="home"] .signal-home,
  body[data-page="home"] .signal-hero.hero {
    width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box;
  }

  body[data-page] .subpage > *,
  body[data-page="contact"] .contact-layout,
  body[data-page="videos"] .library-controlbar,
  body[data-page="videos"] .youtube-feed-section,
  body[data-page="library"] .library-shelf {
    margin-inline: auto !important;
  }

  body[data-page="contact"] .contact-copy,
  body[data-page="contact"] .contact-copy h1,
  body[data-page="contact"] .contact-copy .section-label,
  body[data-page="videos"] .youtube-feed-copy,
  body[data-page="videos"] .youtube-feed-copy h2,
  body[data-page="videos"] .youtube-feed-copy .section-label,
  body[data-page="library"] .library-heading,
  body[data-page="library"] .library-heading h2 {
    text-align: center !important;
  }

  body[data-page="contact"] .contact-copy > *,
  body[data-page="videos"] .youtube-feed-copy > *,
  body[data-page="library"] .library-heading > * {
    margin-inline: auto !important;
  }

  body[data-page="contact"] .contact-form,
  body[data-page="videos"] .youtube-feed-copy,
  body[data-page="library"] .library-panel,
  body[data-page="library"] .exodus-blog-index {
    justify-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="videos"] .youtube-feed-copy .button,
  body[data-page="library"] .hero-actions,
  body[data-page="library"] .library-toolbar {
    margin-inline: auto !important;
    justify-content: center !important;
  }
}

@media (max-width: 620px) {
  body[data-page="music"] .music-launch-topbar {
    margin-top: 24px;
  }

  body[data-page="music"] .music-launch-socials {
    gap: 14px;
  }

  body[data-page="music"] .music-launch-socials svg {
    width: 24px;
    height: 24px;
  }

  body[data-page="music"] .music-launch-hero {
    padding: 58px 0 112px;
  }

  body[data-page="music"] .music-launch-kicker {
    gap: 18px;
    margin-left: 0;
    font-size: 13px;
    letter-spacing: 0.28em;
  }

  body[data-page="music"] .music-launch-copy h1 {
    font-size: clamp(72px, 23vw, 118px);
    line-height: 0.88;
  }

  body[data-page="music"] .music-launch-rule {
    gap: 16px;
    margin-bottom: 28px;
  }

  body[data-page="music"] .music-launch-copy p {
    margin-bottom: 32px;
    font-size: 20px;
  }

  body[data-page="music"] .music-status-list {
    display: grid;
    gap: 18px;
  }

  body[data-page="music"] .music-status-list span + span {
    padding-left: 0;
    border-left: 0;
  }

  body[data-page="music"] .music-launch-actions {
    display: grid;
    gap: 16px;
  }

  body[data-page="music"] .music-launch-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    font-size: 16px;
  }
}

body[data-page="about"] {
  --about-purple: #9f4cff;
  --about-purple-deep: #5c1cba;
  --about-white: #f4f1f7;
  --about-muted: rgba(244, 241, 247, 0.68);
  min-height: 100vh;
  color: var(--about-white);
  background: #030205;
}

body[data-page="about"]::before,
body[data-page="about"]::after {
  display: none;
}

body[data-page="about"] .about-launch-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: #020104;
}

body[data-page="about"] .about-launch-shell::before {
  position: absolute;
  inset: 96px 0 0 0;
  z-index: -3;
  content: "";
  background: url("assets/about-remnant-bg.png?v=20260615") right bottom / auto 84% no-repeat;
  filter: saturate(1.06) contrast(1.08);
}

body[data-page="about"] .about-launch-shell::after {
  position: absolute;
  inset: 96px 0 0 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, #020104 0%, rgba(2, 1, 4, 0.98) 29%, rgba(2, 1, 4, 0.74) 47%, rgba(2, 1, 4, 0.12) 72%),
    linear-gradient(180deg, rgba(2, 1, 4, 0.1) 0%, transparent 52%, rgba(2, 1, 4, 0.84) 100%),
    radial-gradient(circle at 75% 33%, rgba(159, 76, 255, 0.24), transparent 26rem);
}

body[data-page="about"] .about-launch-topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 94px;
  padding: 0 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(2, 2, 3, 0.82);
  box-shadow: 0 20px 90px rgba(0, 0, 0, 0.48);
}

body[data-page="about"] .about-launch-brand,
body[data-page="about"] .about-launch-nav a,
body[data-page="about"] .about-launch-actions .button {
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

body[data-page="about"] .about-launch-brand {
  color: #f8f6fb;
  font-size: 20px;
  letter-spacing: 0.58em;
  white-space: nowrap;
}

body[data-page="about"] .about-launch-nav {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 3.4vw, 62px);
}

body[data-page="about"] .about-launch-nav a {
  position: relative;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  transition: color 180ms ease, text-shadow 180ms ease;
}

body[data-page="about"] .about-launch-nav a:hover,
body[data-page="about"] .about-launch-nav a.active {
  color: #bd7bff;
  text-shadow: 0 0 18px rgba(159, 76, 255, 0.58);
}

body[data-page="about"] .about-launch-nav a.active::after {
  position: absolute;
  left: 50%;
  bottom: -36px;
  width: 56px;
  height: 3px;
  content: "";
  transform: translateX(-50%);
  background: var(--about-purple);
  box-shadow: 0 0 18px rgba(159, 76, 255, 0.88);
}

body[data-page="about"] .about-launch-socials {
  display: flex;
  gap: 12px;
  align-items: center;
}

body[data-page="about"] .about-launch-socials a {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

body[data-page="about"] .about-launch-socials a:hover {
  border-color: rgba(159, 76, 255, 0.72);
  color: #fff;
  box-shadow: 0 0 24px rgba(159, 76, 255, 0.24);
  transform: translateY(-1px);
}

body[data-page="about"] .about-launch-socials svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

body[data-page="about"] .about-launch-socials a:nth-child(2) svg,
body[data-page="about"] .about-launch-socials a:nth-child(3) svg,
body[data-page="about"] .about-launch-socials a:nth-child(4) svg,
body[data-page="about"] .about-launch-socials a:nth-child(5) svg {
  fill: currentColor;
  stroke: none;
}

body[data-page="about"] .about-launch-menu {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

body[data-page="about"] .about-launch-menu span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
}

body[data-page="about"] .about-launch-page {
  display: grid;
  min-height: calc(100vh - 138px);
}

body[data-page="about"] .about-launch-hero {
  display: grid;
  align-items: center;
  width: min(100% - 120px, 980px);
  margin: 0 auto;
  padding: 26px 0 54px;
}

body[data-page="about"] .about-launch-copy {
  width: min(395px, 36vw);
}

body[data-page="about"] .about-launch-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(230px, 100%);
  margin: 0 0 16px;
  color: var(--about-purple);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

body[data-page="about"] .about-launch-kicker i,
body[data-page="about"] .about-launch-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--about-purple), transparent);
  box-shadow: 0 0 12px rgba(159, 76, 255, 0.58);
}

body[data-page="about"] .about-launch-copy h1 {
  margin: 0;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #d9d5de 48%, #7d42dd 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(48px, 4.2vw, 68px);
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 0.92;
  text-transform: uppercase;
  text-shadow: 0 18px 62px rgba(0, 0, 0, 0.55);
}

body[data-page="about"] .about-launch-copy h1 strong {
  color: transparent;
  background: linear-gradient(180deg, #b47cff 0%, #8439e8 100%);
  background-clip: text;
  font: inherit;
}

body[data-page="about"] .about-launch-rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  width: min(260px, 100%);
  margin: 18px 0 22px;
  color: var(--about-purple);
}

body[data-page="about"] .about-launch-rule b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
}

body[data-page="about"] .about-launch-rule b i {
  display: block;
  width: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 16px rgba(159, 76, 255, 0.8);
}

body[data-page="about"] .about-launch-rule b i:nth-child(1),
body[data-page="about"] .about-launch-rule b i:nth-child(3) {
  height: 12px;
}

body[data-page="about"] .about-launch-rule b i:nth-child(2) {
  height: 19px;
}

body[data-page="about"] .about-launch-copy p {
  max-width: 395px;
  margin: 0 0 18px;
  color: var(--about-muted);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.36;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.62);
}

body[data-page="about"] .about-launch-copy p strong {
  color: #f3f0f7;
  font-weight: 500;
}

body[data-page="about"] .about-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

body[data-page="about"] .about-launch-actions .button {
  min-width: 158px;
  min-height: 48px;
  gap: 12px;
  padding: 0 22px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.23);
  color: #fff;
  background: rgba(8, 7, 12, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 12px;
  letter-spacing: 0.24em;
}

body[data-page="about"] .about-launch-actions .button.primary {
  border-color: rgba(159, 76, 255, 0.88);
  background:
    radial-gradient(circle at 25% 0%, rgba(159, 76, 255, 0.36), transparent 62%),
    rgba(20, 5, 42, 0.72);
  box-shadow: 0 0 30px rgba(159, 76, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

body[data-page="about"] .about-launch-actions .button:hover {
  border-color: rgba(188, 126, 255, 0.9);
  box-shadow: 0 0 34px rgba(159, 76, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

body[data-page="about"] .about-launch-actions svg {
  width: 17px;
  height: 17px;
  color: var(--about-purple);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="about"] .site-copyright {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  width: min(1326px, calc(100% - 96px));
  margin: 0;
  transform: translateX(-50%);
  text-align: left;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.74);
}

/* Reference-matched library redesign */
body[data-page="library"] .exodus-blog-index {
  width: min(1460px, calc(100% - 40px));
}

body[data-page="library"] .exodus-blog-index::before,
body[data-page="library"] .exodus-blog-index::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
  filter: blur(24px);
}

body[data-page="library"] .exodus-blog-index::before {
  inset: -60px auto auto -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 126, 104, 0.34), transparent 68%);
}

body[data-page="library"] .exodus-blog-index::after {
  right: -90px;
  bottom: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 119, 91, 0.24), transparent 70%);
}

body[data-page="library"] .exodus-blog-index .shelf-heading h2 {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(16px, 1.28vw, 21px);
  letter-spacing: 0.48em;
  text-shadow: 0 0 26px rgba(170, 117, 255, 0.32);
}

body[data-page="library"] .exodus-blog-index .exodus-publish-row {
  padding: 18px 22px 20px;
  border: 1px solid rgba(206, 188, 255, 0.44);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 135, 116, 0.22), transparent 22rem),
    radial-gradient(circle at 100% 88%, rgba(255, 131, 105, 0.16), transparent 22rem),
    linear-gradient(135deg, rgba(128, 98, 185, 0.22), rgba(28, 34, 83, 0.7) 42%, rgba(22, 26, 62, 0.8)),
    rgba(16, 22, 58, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 34px 120px rgba(10, 8, 38, 0.54),
    0 0 54px rgba(154, 99, 255, 0.2);
}

body[data-page="library"] .exodus-publish-shell {
  grid-template-columns: minmax(235px, 310px) minmax(0, 1fr) minmax(220px, 280px);
  grid-template-rows: 74px minmax(0, 1fr);
  gap: 12px;
  height: min(78vh, 790px);
  min-height: 650px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="library"] .exodus-publish-shell::before {
  display: none;
}

body[data-page="library"] .exodus-reader-controls {
  grid-column: 2;
  margin: 8px auto 10px;
  padding: 7px 8px;
  border-color: rgba(187, 160, 255, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(37, 43, 104, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 36px rgba(0, 0, 0, 0.22);
}

body[data-page="library"] .exodus-font-controls {
  grid-template-columns: 58px 92px 58px;
  gap: 7px;
}

body[data-page="library"] .exodus-reader-controls button {
  min-height: 40px;
  border-color: rgba(196, 176, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(31, 38, 92, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
}

body[data-page="library"] .exodus-reader-controls button.active,
body[data-page="library"] .exodus-reader-controls button:hover,
body[data-page="library"] .exodus-reader-controls button:focus-visible {
  border-color: rgba(186, 111, 255, 0.78);
  background:
    radial-gradient(circle at 20% 0%, rgba(190, 116, 255, 0.5), transparent 70%),
    linear-gradient(180deg, rgba(146, 83, 225, 0.7), rgba(83, 57, 155, 0.58));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 28px rgba(172, 91, 255, 0.42);
  color: #fff;
}

body[data-page="library"] .exodus-publish-sidebar,
body[data-page="library"] .exodus-publish-reader,
body[data-page="library"] .exodus-publish-outline {
  grid-row: 2;
  border: 1px solid rgba(198, 181, 255, 0.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.105), transparent 16rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.028)),
    rgba(28, 35, 86, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 24px 72px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(22px) saturate(1.22);
}

body[data-page="library"] .exodus-publish-sidebar {
  grid-column: 1;
  padding: 34px 24px 24px;
}

body[data-page="library"] .exodus-publish-brand {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom-color: rgba(214, 202, 255, 0.13);
}

body[data-page="library"] .exodus-publish-brand strong {
  color: #fff;
  font-size: clamp(24px, 1.85vw, 34px);
  line-height: 0.98;
  text-shadow: 0 8px 36px rgba(255, 255, 255, 0.12);
}

body[data-page="library"] .exodus-publish-brand small,
body[data-page="library"] .exodus-publish-search span,
body[data-page="library"] .exodus-publish-outline p {
  color: #b987ff;
}

body[data-page="library"] .exodus-publish-search {
  position: relative;
  gap: 10px;
}

body[data-page="library"] .exodus-publish-search i {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: rgba(255, 255, 255, 0.76);
}

body[data-page="library"] .exodus-publish-search svg,
body[data-page="library"] .exodus-publish-tree button svg,
body[data-page="library"] .exodus-publish-outline a svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="library"] .exodus-publish-search input {
  min-height: 50px;
  padding: 0 18px 0 46px;
  border-color: rgba(213, 201, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(15, 20, 54, 0.5);
}

body[data-page="library"] .exodus-publish-folder {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(210, 198, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(42, 49, 105, 0.54);
}

body[data-page="library"] .exodus-publish-tree {
  gap: 8px;
}

body[data-page="library"] .exodus-publish-tree button {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  min-height: 70px;
  padding: 13px 16px;
  border: 1px solid rgba(205, 195, 255, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(33, 41, 96, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="library"] .exodus-publish-tree button::before {
  inset: 10px auto 10px 0;
  width: 3px;
  opacity: 0;
}

body[data-page="library"] .exodus-publish-tree button svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: rgba(224, 215, 255, 0.76);
}

body[data-page="library"] .exodus-publish-tree button span {
  grid-column: 2;
  color: currentColor;
}

body[data-page="library"] .exodus-publish-tree button small {
  grid-column: 2;
}

body[data-page="library"] .exodus-publish-tree button:hover,
body[data-page="library"] .exodus-publish-tree button.active {
  border-color: rgba(178, 101, 255, 0.86);
  background:
    radial-gradient(circle at 20% 0%, rgba(190, 116, 255, 0.4), transparent 70%),
    linear-gradient(180deg, rgba(91, 72, 170, 0.82), rgba(57, 48, 120, 0.7));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 28px rgba(165, 85, 255, 0.32);
  color: #fff;
}

body[data-page="library"] .exodus-publish-tree button:hover::before,
body[data-page="library"] .exodus-publish-tree button.active::before {
  opacity: 1;
}

body[data-page="library"] .exodus-publish-reader {
  grid-column: 2;
  padding: 58px clamp(38px, 4vw, 58px) 58px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(165, 104, 255, 0.14), transparent 24rem),
    linear-gradient(180deg, rgba(60, 55, 130, 0.58), rgba(20, 28, 78, 0.66)),
    rgba(24, 31, 82, 0.6);
}

body[data-page="library"] .exodus-publish-reader .section-label {
  color: #a666ff;
  font-size: 0.96rem;
  letter-spacing: 0.26em;
}

body[data-page="library"] .exodus-publish-reader > h2 {
  max-width: 12ch;
  margin-bottom: 24px;
  color: #fff;
  font-family: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 2.9vw, 48px) !important;
  line-height: 0.98;
  text-shadow: 0 8px 36px rgba(255, 255, 255, 0.1);
}

body[data-page="library"] .exodus-publish-body {
  max-width: 62ch;
  margin: 0 auto;
  padding: clamp(30px, 4.2vw, 52px);
  border-color: rgba(178, 145, 255, 0.58);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(172, 91, 255, 0.82) 0 3px, transparent 3px),
    radial-gradient(circle at 0% 0%, rgba(190, 116, 255, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(54, 49, 104, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 24px 80px rgba(0, 0, 0, 0.24);
}

body[data-page="library"] .exodus-publish-body p,
body[data-page="library"] .exodus-publish-body li {
  color: rgba(255, 255, 255, 0.88);
}

body[data-page="library"] .exodus-publish-body img {
  border-color: rgba(186, 111, 255, 0.5);
  border-radius: 14px;
}

body[data-page="library"] .exodus-publish-outline {
  grid-column: 3;
  padding: 42px 24px 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.09), transparent 16rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(31, 39, 92, 0.56);
}

body[data-page="library"] .exodus-publish-outline p {
  margin-bottom: 24px;
  letter-spacing: 0.18em;
}

body[data-page="library"] .exodus-publish-outline nav {
  gap: 10px;
}

body[data-page="library"] .exodus-publish-outline a,
body[data-page="library"] .exodus-publish-outline span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid rgba(205, 195, 255, 0.1);
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(44, 52, 112, 0.54);
}

body[data-page="library"] .exodus-publish-outline a svg {
  width: 19px;
  height: 19px;
  color: rgba(229, 222, 255, 0.82);
}

body[data-page="library"] .exodus-publish-outline a.is-read,
body[data-page="library"] .exodus-publish-outline a.is-active,
body[data-page="library"] .exodus-publish-outline a:hover {
  border-color: rgba(178, 101, 255, 0.7);
  background:
    radial-gradient(circle at 24% 0%, rgba(193, 126, 255, 0.44), transparent 72%),
    linear-gradient(180deg, rgba(91, 72, 170, 0.84), rgba(57, 48, 120, 0.68));
  box-shadow: 0 0 28px rgba(165, 85, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fff;
}

@media (max-width: 1180px) {
  body[data-page="library"] .exodus-publish-shell {
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  body[data-page="library"] .exodus-blog-index {
    width: min(100% - 20px, 1460px);
  }

  body[data-page="library"] .exodus-blog-index .exodus-publish-row {
    padding: 12px;
  }

  body[data-page="library"] .exodus-publish-shell {
    gap: 10px;
    height: auto;
  }

  body[data-page="library"] .exodus-reader-controls {
    margin: 0;
  }

  body[data-page="library"] .exodus-publish-sidebar,
  body[data-page="library"] .exodus-publish-reader {
    padding: 24px 20px;
  }

  body[data-page="library"] .exodus-publish-reader > h2 {
    max-width: 100%;
  }

  body[data-page="library"] .exodus-publish-body {
    padding: 24px 20px;
  }
}

@media (max-width: 1120px) {
  body[data-page="about"] .about-launch-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 0 28px;
  }

  body[data-page="about"] .about-launch-menu {
    display: block;
    order: 3;
  }

  body[data-page="about"] .about-launch-nav,
  body[data-page="about"] .about-launch-socials {
    display: none;
  }

  body[data-page="about"] .about-launch-topbar.nav-open {
    align-items: start;
    padding-top: 24px;
    padding-bottom: 22px;
  }

  body[data-page="about"] .about-launch-topbar.nav-open .about-launch-nav,
  body[data-page="about"] .about-launch-topbar.nav-open .about-launch-socials {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body[data-page="about"] .about-launch-topbar.nav-open .about-launch-nav {
    flex-direction: column;
    gap: 18px;
    margin-top: 18px;
  }

  body[data-page="about"] .about-launch-topbar.nav-open .about-launch-nav a.active::after {
    display: none;
  }

  body[data-page="about"] .about-launch-topbar.nav-open .about-launch-socials {
    flex-wrap: wrap;
    margin-top: 8px;
  }

  body[data-page="about"] .about-launch-hero {
    width: min(100% - 64px, 1326px);
  }

  body[data-page="about"] .about-launch-copy {
    width: min(620px, 100%);
  }

  body[data-page="about"] .site-copyright {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(100% - 64px, 1326px);
    margin: -42px auto 26px;
    transform: none;
  }
}

@media (max-width: 700px) {
  body[data-page="about"] .about-launch-shell {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  body[data-page="about"] .about-launch-shell::before {
    opacity: 0.7;
    background-size: cover;
    background-position: 57% bottom;
  }

  body[data-page="about"] .about-launch-shell::after {
    background:
      linear-gradient(90deg, #020104 0%, rgba(2, 1, 4, 0.9) 60%, rgba(2, 1, 4, 0.34) 100%),
      linear-gradient(180deg, rgba(2, 1, 4, 0.2) 0%, rgba(2, 1, 4, 0.82) 100%);
  }

  body[data-page="about"] .about-launch-topbar {
    min-height: 78px;
    padding: 0 20px;
  }

  body[data-page="about"] .about-launch-brand {
    font-size: 15px;
    letter-spacing: 0.36em;
  }

  body[data-page="about"] .about-launch-hero {
    width: min(100% - 40px, 1326px);
    padding: 54px 0 72px;
  }

  body[data-page="about"] .about-launch-kicker {
    width: min(250px, 100%);
    font-size: 13px;
    letter-spacing: 0.26em;
  }

  body[data-page="about"] .about-launch-copy h1 {
    font-size: clamp(48px, 15vw, 76px);
    letter-spacing: 0.055em;
  }

  body[data-page="about"] .about-launch-copy p {
    margin-bottom: 24px;
    font-size: 18px;
  }

  body[data-page="about"] .about-launch-actions {
    display: grid;
    gap: 14px;
    margin-top: 32px;
  }

  body[data-page="about"] .about-launch-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    justify-content: center;
  }
}

/* Exodus Project dark archive direction, 2026-06-16 */
body[data-page="library"] {
  background:
    radial-gradient(circle at 50% -8%, rgba(138, 87, 255, 0.18), transparent 30rem),
    radial-gradient(circle at 8% 92%, rgba(97, 44, 164, 0.11), transparent 24rem),
    linear-gradient(180deg, #02050d 0%, #030612 52%, #010309 100%);
}

body[data-page="library"] .site-shell {
  width: min(1540px, calc(100% - 40px));
  min-height: 100dvh;
  padding-top: 20px;
}

body[data-page="library"] .topbar {
  width: 100%;
  margin: 0 auto;
  border-color: rgba(139, 127, 190, 0.34);
  border-radius: 13px 13px 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(160, 92, 255, 0.16), transparent 26rem),
    linear-gradient(180deg, rgba(18, 24, 46, 0.86), rgba(5, 8, 17, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 36px rgba(119, 77, 255, 0.12);
}

body[data-page="library"] .topbar::after {
  background: linear-gradient(90deg, transparent, rgba(156, 86, 255, 0.96), transparent);
}

@media (min-width: 821px) {
  body[data-page="library"] .topbar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) auto;
    width: 100%;
    min-height: 70px;
    padding: 0 24px 0 28px;
    border: 1px solid rgba(139, 127, 190, 0.34);
    border-radius: 13px 13px 0 0;
    transform: none;
  }

  body[data-page="library"] .topbar::before {
    display: none;
  }
}

body[data-page="library"] .subpage {
  padding-top: 0;
}

body[data-page="library"] .stream-hero,
body[data-page="library"] .continue-strip,
body[data-page="library"] .library-shelf:not(.exodus-blog-index),
body[data-page="library"] .library-empty,
body[data-page="library"] .footer {
  display: none !important;
}

body[data-page="library"] .exodus-blog-index {
  position: relative;
  width: 100%;
  margin: 0 auto 28px;
  padding: 0;
}

body[data-page="library"] .exodus-blog-index .shelf-heading {
  position: absolute;
  top: -112px;
  left: 50%;
  z-index: 5;
  display: grid;
  width: min(520px, calc(100% - 48px));
  min-height: 96px;
  padding: 20px 34px 22px;
  transform: translateX(-50%);
  place-items: center;
  border: 1px solid rgba(181, 145, 255, 0.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(156, 92, 255, 0.32), transparent 64%),
    linear-gradient(135deg, rgba(26, 31, 64, 0.72), rgba(10, 13, 29, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 22px 70px rgba(0, 0, 0, 0.45),
    0 0 44px rgba(142, 87, 255, 0.2);
  overflow: hidden;
  pointer-events: none;
}

body[data-page="library"] .exodus-blog-index .shelf-heading::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(circle at 50% 100%, rgba(177, 120, 255, 0.22), transparent 58%);
  opacity: 0.72;
  content: "";
}

body[data-page="library"] .exodus-blog-index .shelf-heading::after {
  position: absolute;
  right: 38px;
  bottom: 17px;
  left: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177, 120, 255, 0.78), transparent);
  box-shadow: 0 0 18px rgba(169, 93, 255, 0.54);
  content: "";
}

body[data-page="library"] .exodus-blog-index .shelf-heading h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.96);
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(20px, 1.8vw, 31px);
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(183, 124, 255, 0.42),
    0 2px 18px rgba(0, 0, 0, 0.68);
}

body[data-page="library"] .exodus-blog-index .shelf-heading h2::before {
  display: block;
  margin: 0 0 8px;
  color: rgba(183, 124, 255, 0.88);
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.42em;
  line-height: 1;
  text-shadow: 0 0 18px rgba(157, 84, 255, 0.52);
  content: "ARCHIVE LIBRARY";
}

body[data-page="library"] .exodus-blog-index .shelf-heading .rail-controls {
  display: none;
}

body[data-page="library"] .exodus-blog-index .exodus-publish-row {
  min-height: calc(100dvh - 142px);
  padding: 0;
  border: 1px solid rgba(143, 132, 195, 0.36);
  border-top: 0;
  border-radius: 0 0 13px 13px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 73, 255, 0.13), transparent 26rem),
    radial-gradient(circle at 0% 100%, rgba(69, 41, 130, 0.14), transparent 26rem),
    linear-gradient(105deg, rgba(14, 21, 40, 0.9), rgba(6, 10, 22, 0.96) 48%, rgba(12, 17, 34, 0.92)),
    #030712;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(179, 144, 255, 0.025),
    0 34px 110px rgba(0, 0, 0, 0.56);
}

body[data-page="library"] .exodus-project-archive {
  display: grid;
  grid-template-columns: minmax(280px, 430px) minmax(0, 1fr) minmax(260px, 365px);
  grid-template-rows: 78px minmax(0, 1fr);
  gap: 0;
  height: calc(100dvh - 142px);
  min-height: 720px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="library"] .exodus-project-archive .exodus-pane-resizer {
  display: none;
}

body[data-page="library"] .exodus-project-archive::before,
body[data-page="library"] .exodus-project-archive::after {
  display: none;
}

body[data-page="library"] .exodus-project-archive .exodus-reader-controls {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-panel {
  position: fixed;
  right: max(28px, calc((100vw - min(94vw, 1660px)) / 2 + 28px));
  top: 148px;
  bottom: 34px;
  z-index: 40;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(410px, 28vw);
  max-height: none;
  border: 1px solid rgba(170, 104, 255, 0.42);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(160, 92, 255, 0.2), transparent 19rem),
    radial-gradient(circle at 100% 10%, rgba(78, 102, 255, 0.13), transparent 17rem),
    linear-gradient(180deg, rgba(18, 25, 50, 0.94), rgba(5, 9, 20, 0.965));
  box-shadow:
    -24px 26px 90px rgba(0, 0, 0, 0.58),
    0 0 42px rgba(142, 80, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(22px) saturate(1.22);
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-panel[hidden] {
  display: none;
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(154, 142, 211, 0.18);
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-head span {
  display: block;
  margin-bottom: 7px;
  color: rgba(225, 223, 239, 0.52);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-head strong {
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-head button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(154, 142, 211, 0.28);
  border-radius: 999px;
  color: rgba(244, 242, 255, 0.78);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 18px;
  overflow: auto;
  scrollbar-color: rgba(176, 164, 214, 0.46) rgba(255, 255, 255, 0.04);
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-list button {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 70px;
  padding: 13px 16px;
  border: 1px solid rgba(158, 146, 203, 0.16);
  border-radius: 12px;
  color: rgba(232, 229, 247, 0.8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.012)),
    rgba(8, 13, 28, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  text-align: left;
  cursor: pointer;
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-list button::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #b987ff;
  box-shadow: 0 0 16px rgba(185, 135, 255, 0.9);
  opacity: 0;
  transform: translateY(-50%);
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-list svg {
  grid-row: 1 / span 2;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: rgba(214, 207, 238, 0.62);
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-list span {
  grid-column: 2;
  padding-right: 14px;
  overflow: hidden;
  color: currentColor;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-list small {
  grid-column: 2;
  color: rgba(224, 218, 245, 0.56);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-list button:hover,
body[data-page="library"] .exodus-project-archive .exodus-all-writings-list button.active {
  border-color: rgba(170, 104, 255, 0.62);
  color: #e8d7ff;
  background:
    radial-gradient(circle at 0% 50%, rgba(150, 77, 255, 0.34), transparent 82%),
    linear-gradient(90deg, rgba(104, 64, 177, 0.42), rgba(26, 21, 56, 0.76)),
    rgba(11, 15, 33, 0.9);
  box-shadow:
    0 0 24px rgba(137, 74, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-list button:hover::after,
body[data-page="library"] .exodus-project-archive .exodus-all-writings-list button.active::after {
  opacity: 1;
}

body[data-page="library"] .exodus-project-archive .exodus-font-controls {
  display: grid;
  grid-template-columns: 66px 106px 66px;
  gap: 7px;
  padding: 4px;
  border: 1px solid rgba(154, 142, 211, 0.23);
  border-radius: 999px;
  background: rgba(10, 15, 31, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 34px rgba(0, 0, 0, 0.28);
}

body[data-page="library"] .exodus-project-archive .exodus-reader-controls button {
  min-height: 38px;
  border: 1px solid rgba(154, 142, 211, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.84);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(12, 18, 37, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

body[data-page="library"] .exodus-project-archive .exodus-reader-controls button.active,
body[data-page="library"] .exodus-project-archive .exodus-reader-controls button:hover,
body[data-page="library"] .exodus-project-archive .exodus-reader-controls button:focus-visible {
  border-color: rgba(169, 101, 255, 0.68);
  background:
    radial-gradient(circle at 50% 0%, rgba(160, 92, 255, 0.34), transparent 70%),
    rgba(28, 20, 56, 0.86);
  box-shadow: 0 0 22px rgba(150, 83, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar,
body[data-page="library"] .exodus-project-archive .exodus-publish-reader,
body[data-page="library"] .exodus-project-archive .exodus-publish-outline {
  grid-row: 1 / span 2;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  scrollbar-color: rgba(176, 164, 214, 0.42) rgba(255, 255, 255, 0.04);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar {
  grid-column: 1;
  padding: 82px 32px 34px 30px;
  border-right: 1px solid rgba(143, 132, 195, 0.24);
  background:
    radial-gradient(circle at 0% 58%, rgba(123, 76, 255, 0.08), transparent 18rem),
    linear-gradient(90deg, rgba(13, 20, 38, 0.72), rgba(5, 8, 17, 0.22));
}

body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar::before {
  content: "";
  display: block;
  width: 58px;
  height: 58px;
  margin: -54px 0 24px 4px;
  opacity: 0.14;
  background:
    linear-gradient(60deg, transparent 39%, currentColor 40% 43%, transparent 44%),
    linear-gradient(-60deg, transparent 39%, currentColor 40% 43%, transparent 44%);
  color: rgba(205, 188, 255, 0.8);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-brand {
  margin: 0 0 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(154, 142, 211, 0.18);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-brand strong {
  display: block;
  max-width: 10ch;
  color: #fff;
  font-family: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 2.4vw, 44px);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.03;
  text-transform: none;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-brand small {
  display: block;
  margin-top: 12px;
  color: #aa79ff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-search {
  position: relative;
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-search span {
  color: rgba(225, 223, 239, 0.52);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-search i {
  left: 18px;
  bottom: 17px;
  width: 17px;
  height: 17px;
  color: rgba(222, 221, 236, 0.62);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-search input {
  min-height: 54px;
  padding: 0 18px 0 48px;
  border: 1px solid rgba(158, 146, 203, 0.24);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)),
    rgba(8, 13, 28, 0.78);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-search input::placeholder {
  color: rgba(221, 219, 235, 0.5);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-folder {
  min-height: 54px;
  margin-bottom: 12px;
  padding: 0 16px;
  grid-template-columns: 20px minmax(0, 1fr) 14px;
  border: 1px solid rgba(158, 146, 203, 0.2);
  border-radius: 10px;
  color: rgba(244, 242, 255, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(10, 15, 31, 0.78);
  cursor: pointer;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-folder span {
  width: 16px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transform: none;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-folder span::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 4px;
  margin: -5px 0 0 1px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-folder::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(244, 242, 255, 0.68);
  border-bottom: 1.5px solid rgba(244, 242, 255, 0.68);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-folder:hover,
body[data-page="library"] .exodus-project-archive .exodus-publish-folder[aria-expanded="true"] {
  border-color: rgba(170, 104, 255, 0.58);
  color: #eadbff;
  background:
    radial-gradient(circle at 20% 0%, rgba(160, 92, 255, 0.22), transparent 72%),
    rgba(24, 20, 51, 0.84);
  box-shadow: 0 0 22px rgba(150, 83, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-folder[aria-expanded="true"]::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-folder strong {
  color: rgba(244, 242, 255, 0.9);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree {
  display: grid;
  gap: 8px;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree button {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 76px;
  padding: 14px 18px;
  border: 1px solid rgba(158, 146, 203, 0.13);
  border-radius: 10px;
  color: rgba(232, 229, 247, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.01)),
    rgba(7, 12, 26, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree button::before {
  inset: 0 auto 0 0;
  width: 2px;
  border-radius: 999px;
  opacity: 0;
  background: #a767ff;
  box-shadow: 0 0 28px rgba(170, 104, 255, 0.75);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree button::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #b987ff;
  box-shadow: 0 0 16px rgba(185, 135, 255, 0.9);
  opacity: 0;
  transform: translateY(-50%);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree button svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: rgba(214, 207, 238, 0.62);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree button span {
  grid-column: 2;
  padding-right: 16px;
  color: currentColor;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree button small {
  grid-column: 2;
  color: rgba(224, 218, 245, 0.56);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree button:hover,
body[data-page="library"] .exodus-project-archive .exodus-publish-tree button.active {
  border-color: rgba(170, 104, 255, 0.62);
  color: #e8d7ff;
  background:
    radial-gradient(circle at 0% 50%, rgba(150, 77, 255, 0.36), transparent 82%),
    linear-gradient(90deg, rgba(104, 64, 177, 0.46), rgba(26, 21, 56, 0.76)),
    rgba(11, 15, 33, 0.9);
  box-shadow:
    0 0 26px rgba(137, 74, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree button:hover::before,
body[data-page="library"] .exodus-project-archive .exodus-publish-tree button.active::before,
body[data-page="library"] .exodus-project-archive .exodus-publish-tree button:hover::after,
body[data-page="library"] .exodus-project-archive .exodus-publish-tree button.active::after {
  opacity: 1;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-reader {
  grid-column: 2;
  padding: 92px clamp(42px, 5vw, 76px) 64px;
  border-left: 1px solid rgba(143, 132, 195, 0.16);
  border-right: 1px solid rgba(143, 132, 195, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 72, 255, 0.12), transparent 22rem),
    linear-gradient(180deg, rgba(10, 14, 30, 0.12), rgba(4, 8, 18, 0.34));
}

body[data-page="library"] .exodus-project-archive .exodus-publish-reader .section-label {
  margin: 0 auto 20px;
  max-width: 650px;
  color: rgba(168, 111, 255, 0.96);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-reader > h2 {
  max-width: 650px;
  margin: 0 auto 28px;
  color: #f7f1ff;
  font-family: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3.05vw, 48px) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-wrap: balance;
  text-transform: none;
  text-shadow: 0 12px 34px rgba(255, 255, 255, 0.08);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-body {
  max-width: 650px;
  margin: 0 auto;
  padding: clamp(30px, 3.6vw, 46px);
  border: 1px solid rgba(169, 147, 255, 0.58);
  border-radius: 12px;
  color: rgba(245, 244, 255, 0.84);
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 82, 221, 0.16), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(6, 10, 23, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 62px rgba(0, 0, 0, 0.24);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-body::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: -51px auto 24px;
  border: 1px solid rgba(181, 116, 255, 0.9);
  transform: rotate(45deg);
  background: #0b1023;
  box-shadow: 0 0 16px rgba(181, 116, 255, 0.72);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-body p,
body[data-page="library"] .exodus-project-archive .exodus-publish-body li {
  color: rgba(246, 244, 255, 0.86);
  font-size: var(--reader-text-size);
  line-height: 1.68;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-body strong,
body[data-page="library"] .exodus-project-archive .exodus-publish-body b {
  color: #b987ff;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-body img {
  border: 1px solid rgba(169, 147, 255, 0.36);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.32);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-outline {
  grid-column: 3;
  padding: 110px 34px 34px;
  background:
    radial-gradient(circle at 100% 30%, rgba(79, 54, 161, 0.11), transparent 18rem),
    linear-gradient(270deg, rgba(9, 15, 32, 0.72), rgba(5, 8, 17, 0.1));
}

body[data-page="library"] .exodus-project-archive .exodus-publish-outline p {
  margin: 0 0 24px;
  color: rgba(226, 222, 244, 0.56);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-outline nav {
  display: grid;
  gap: 9px;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-outline a,
body[data-page="library"] .exodus-project-archive .exodus-publish-outline span {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 18px;
  border: 1px solid rgba(158, 146, 203, 0.12);
  border-radius: 9px;
  color: rgba(225, 221, 242, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(8, 13, 28, 0.74);
  text-decoration: none;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-outline a::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #b987ff;
  box-shadow: 0 0 16px rgba(185, 135, 255, 0.86);
  opacity: 0;
  transform: translateY(-50%);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-outline a svg {
  width: 17px;
  height: 17px;
  color: rgba(216, 209, 240, 0.58);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-outline a span {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-outline a.is-read,
body[data-page="library"] .exodus-project-archive .exodus-publish-outline a.is-active,
body[data-page="library"] .exodus-project-archive .exodus-publish-outline a:hover {
  border-color: rgba(170, 104, 255, 0.42);
  color: #dfcaff;
  background:
    radial-gradient(circle at 100% 50%, rgba(169, 104, 255, 0.32), transparent 74%),
    linear-gradient(90deg, rgba(95, 57, 166, 0.36), rgba(24, 20, 51, 0.72)),
    rgba(9, 13, 28, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-outline a.is-read::after,
body[data-page="library"] .exodus-project-archive .exodus-publish-outline a.is-active::after,
body[data-page="library"] .exodus-project-archive .exodus-publish-outline a:hover::after {
  opacity: 1;
}

@media (min-width: 1181px) {
  body[data-page="library"] .exodus-project-archive {
    --exodus-left-pane: 360px;
    --exodus-right-pane: 315px;
    grid-template-columns:
      minmax(245px, var(--exodus-left-pane))
      14px
      minmax(520px, 1fr)
      14px
      minmax(225px, var(--exodus-right-pane));
  }

  body[data-page="library"] .exodus-project-archive .exodus-reader-controls {
    grid-column: 5;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    width: min(100% - 28px, 252px);
    margin-top: 48px;
    z-index: 6;
  }

  body[data-page="library"] .exodus-project-archive .exodus-reader-controls .exodus-font-controls {
    grid-template-columns: minmax(48px, 1fr) minmax(82px, 1.42fr) minmax(48px, 1fr);
    width: 100%;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar {
    grid-column: 1;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-reader {
    grid-column: 3;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-outline {
    grid-column: 5;
    padding-top: 138px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-pane-resizer {
    position: relative;
    z-index: 4;
    display: block;
    grid-row: 1 / span 2;
    width: 14px;
    min-height: 100%;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
  }

  body[data-page="library"] .exodus-project-archive .exodus-pane-resizer-left {
    grid-column: 2;
  }

  body[data-page="library"] .exodus-project-archive .exodus-pane-resizer-right {
    grid-column: 4;
  }

  body[data-page="library"] .exodus-project-archive .exodus-pane-resizer::before {
    content: "";
    position: absolute;
    inset: 78px 5px 0;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(203, 194, 237, 0.34), rgba(92, 83, 128, 0.2)),
      rgba(255, 255, 255, 0.035);
    box-shadow:
      inset 0 0 0 1px rgba(186, 172, 235, 0.12),
      0 0 0 1px rgba(15, 19, 38, 0.36);
    opacity: 0.62;
    transition: opacity 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  body[data-page="library"] .exodus-project-archive .exodus-pane-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 76px;
    border-radius: 999px;
    background: rgba(202, 193, 232, 0.46);
    box-shadow: 0 0 16px rgba(168, 112, 255, 0.18);
    transform: translate(-50%, -50%);
    transition: background 160ms ease, box-shadow 160ms ease, height 160ms ease;
  }

  body[data-page="library"] .exodus-project-archive .exodus-pane-resizer:hover::before,
  body[data-page="library"] .exodus-project-archive .exodus-pane-resizer:focus-visible::before,
  body[data-page="library"] .exodus-project-archive.is-resizing .exodus-pane-resizer::before {
    background:
      linear-gradient(180deg, rgba(199, 171, 255, 0.52), rgba(120, 86, 195, 0.28)),
      rgba(126, 76, 255, 0.08);
    box-shadow:
      inset 0 0 0 1px rgba(195, 156, 255, 0.28),
      0 0 22px rgba(151, 90, 255, 0.22);
    opacity: 1;
  }

  body[data-page="library"] .exodus-project-archive .exodus-pane-resizer:hover::after,
  body[data-page="library"] .exodus-project-archive .exodus-pane-resizer:focus-visible::after,
  body[data-page="library"] .exodus-project-archive.is-resizing .exodus-pane-resizer::after {
    height: 112px;
    background: rgba(204, 178, 255, 0.92);
    box-shadow: 0 0 22px rgba(170, 104, 255, 0.52);
  }
}

body.exodus-pane-resizing {
  cursor: col-resize;
  user-select: none;
}

@media (max-width: 1180px) {
  body[data-page="library"] .site-shell {
    width: min(100% - 24px, 1540px);
  }

  body[data-page="library"] .exodus-project-archive {
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-outline {
    display: none;
  }
}

@media (max-width: 760px) {
  body[data-page="library"] .site-shell {
    width: 100%;
    padding-top: 0;
  }

  body[data-page="library"] .topbar {
    border-radius: 0;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 28px);
    min-height: 82px;
    margin: 18px auto 14px;
    padding: 16px 22px 18px;
    transform: none;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading h2 {
    font-size: clamp(18px, 6vw, 24px);
    letter-spacing: 0.08em;
  }

  body[data-page="library"] .exodus-blog-index .exodus-publish-row {
    min-height: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  body[data-page="library"] .exodus-project-archive {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    height: auto;
    min-height: 0;
  }

  body[data-page="library"] .exodus-project-archive .exodus-reader-controls,
  body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar,
  body[data-page="library"] .exodus-project-archive .exodus-publish-reader,
  body[data-page="library"] .exodus-project-archive .exodus-publish-outline {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    display: block;
    max-height: none;
    overflow: visible;
  }

  body[data-page="library"] .exodus-project-archive .exodus-reader-controls {
    padding: 18px 18px 4px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-font-controls {
    grid-template-columns: 1fr 1.4fr 1fr;
    width: min(100%, 320px);
    margin: 0 auto;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar,
  body[data-page="library"] .exodus-project-archive .exodus-publish-reader,
  body[data-page="library"] .exodus-project-archive .exodus-publish-outline {
    padding: 28px 20px;
    border: 0;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar::before {
    display: none;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-tree {
    max-height: 310px;
    overflow: auto;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-reader > h2 {
    font-size: clamp(30px, 9vw, 44px) !important;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-body {
    padding: 26px 20px;
  }
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-folder {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(160, 147, 214, 0.28);
  border-radius: 12px;
  color: rgba(244, 242, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(10, 15, 31, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  cursor: pointer;
  text-align: left;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-folder::before {
  display: none;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-folder::after {
  content: "";
  position: static;
  display: block;
  width: 9px;
  height: 9px;
  border: 0;
  border-right: 2px solid rgba(244, 242, 255, 0.72);
  border-bottom: 2px solid rgba(244, 242, 255, 0.72);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-folder[aria-expanded="true"]::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-folder > span {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: block;
  width: 20px;
  height: 15px;
  padding: 0;
  border: 1.8px solid currentColor;
  border-radius: 3px;
  color: rgba(226, 220, 250, 0.88);
  transform: none;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-folder > span::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -7px;
  width: 9px;
  height: 6px;
  margin: 0;
  border: 1.8px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-folder > strong {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  overflow: visible;
  color: rgba(244, 242, 255, 0.94);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-folder:hover,
body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-folder[aria-expanded="true"] {
  border-color: rgba(170, 104, 255, 0.64);
  color: #eadbff;
  background:
    radial-gradient(circle at 20% 0%, rgba(160, 92, 255, 0.22), transparent 72%),
    rgba(24, 20, 51, 0.88);
  box-shadow: 0 0 22px rgba(150, 83, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-explore {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(170, 104, 255, 0.42);
  border-radius: 12px;
  color: #f4ecff;
  background:
    radial-gradient(circle at 12% 0%, rgba(172, 98, 255, 0.3), transparent 68%),
    linear-gradient(180deg, rgba(77, 48, 143, 0.72), rgba(31, 24, 64, 0.76));
  box-shadow: 0 0 24px rgba(137, 74, 255, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.11);
  cursor: pointer;
  text-align: left;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-explore::before,
body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-explore::after {
  display: none;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-explore svg {
  grid-column: 1;
  grid-row: 1;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: rgba(230, 216, 255, 0.94);
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-explore strong {
  grid-column: 2;
  grid-row: 1;
  color: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="library"] .exodus-project-archive .exodus-publish-tree .exodus-publish-explore:hover {
  border-color: rgba(194, 134, 255, 0.78);
  background:
    radial-gradient(circle at 12% 0%, rgba(185, 110, 255, 0.42), transparent 68%),
    linear-gradient(180deg, rgba(91, 55, 166, 0.82), rgba(40, 28, 79, 0.82));
  box-shadow: 0 0 30px rgba(158, 82, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@media (max-width: 1180px) {
  body[data-page="library"] .exodus-project-archive .exodus-all-writings-panel {
    right: 22px;
    width: min(390px, calc(100vw - 44px));
  }
}

@media (max-width: 760px) {
  body[data-page="library"] .exodus-project-archive .exodus-all-writings-panel {
    inset: auto 14px 14px;
    width: auto;
    max-height: min(620px, calc(100vh - 96px));
    border-radius: 16px;
  }
}

/* Reality Unveiled archive redesign, 2026-06-16 */
body[data-page="videos"] {
  --reality-bg: #030711;
  --reality-panel: rgba(10, 17, 34, 0.78);
  --reality-panel-strong: rgba(13, 19, 38, 0.9);
  --reality-edge: rgba(186, 198, 225, 0.18);
  --reality-edge-strong: rgba(237, 196, 101, 0.42);
  --reality-gold: #f1c96a;
  --reality-text: rgba(248, 249, 255, 0.96);
  --reality-muted: rgba(223, 226, 241, 0.7);
  background:
    radial-gradient(circle at 12% 18%, rgba(70, 84, 130, 0.26), transparent 21rem),
    radial-gradient(circle at 64% 100%, rgba(54, 65, 108, 0.24), transparent 24rem),
    linear-gradient(180deg, #050915 0%, #02040a 100%);
  color: var(--reality-text);
  min-height: 100vh;
}

body[data-page="videos"] .site-shell {
  width: min(96vw, 1680px);
  min-height: 100vh;
  padding: 26px 0 34px;
}

body[data-page="videos"] .topbar {
  display: grid;
  width: min(100%, 1580px);
  margin: 0 auto 14px;
  min-height: 86px;
  padding: 14px 28px 14px 34px;
  border: 1px solid rgba(186, 198, 225, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.024)),
    rgba(6, 11, 24, 0.72);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(22px) saturate(1.25);
}

body[data-page="videos"] .topbar .brand {
  color: rgba(248, 249, 255, 0.94);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.1);
}

body[data-page="videos"] .topbar .nav-links a {
  color: rgba(248, 249, 255, 0.78);
}

body[data-page="videos"] .topbar .nav-links a:hover,
body[data-page="videos"] .topbar .nav-links a.active {
  color: #fff;
}

body[data-page="videos"] .topbar .nav-links a.active::after {
  bottom: -24px;
  background: linear-gradient(90deg, transparent, #a45cff, transparent);
  box-shadow: 0 0 18px rgba(164, 92, 255, 0.9);
}

body[data-page="videos"] .topbar .socials a {
  width: 48px;
  height: 48px;
  border-color: rgba(186, 198, 225, 0.2);
  border-radius: 12px;
  color: rgba(248, 249, 255, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.018)),
    rgba(8, 12, 24, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.24);
}

body[data-page="videos"] .topbar .socials a:hover {
  border-color: rgba(164, 92, 255, 0.72);
  color: #fff;
  box-shadow:
    0 0 24px rgba(164, 92, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-page="videos"] .video-soon-page {
  display: grid;
  gap: 0;
  min-height: auto;
  padding: 0;
  border: 1px solid var(--reality-edge);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 255, 255, 0.08), transparent 16rem),
    linear-gradient(135deg, rgba(15, 25, 46, 0.78), rgba(4, 8, 18, 0.86));
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.22);
}

body[data-page="videos"] .library-controlbar {
  position: relative;
  top: auto;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(280px, 470px) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 92px;
  padding: 20px 36px;
  border: 0;
  border-bottom: 1px solid rgba(186, 198, 225, 0.14);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006)),
    rgba(7, 13, 28, 0.82);
  box-shadow: none;
}

body[data-page="videos"] .library-controlbar::before {
  display: none;
}

body[data-page="videos"] .video-library-brand {
  display: none;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.44em;
  text-decoration: none;
}

body[data-page="videos"] .library-search {
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid rgba(186, 198, 225, 0.17);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(15, 20, 35, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="videos"] .library-search svg {
  width: 24px;
  height: 24px;
  color: rgba(248, 249, 255, 0.9);
}

body[data-page="videos"] .library-search input {
  color: var(--reality-text);
  font-size: 1.02rem;
  letter-spacing: 0;
}

body[data-page="videos"] .library-search input::placeholder {
  color: rgba(223, 226, 241, 0.72);
}

body[data-page="videos"] .library-toolbar {
  justify-content: end;
  gap: 16px;
}

body[data-page="videos"] .library-filter {
  min-height: 50px;
  padding: 0 29px;
  border: 1px solid rgba(186, 198, 225, 0.17);
  border-radius: 999px;
  color: rgba(248, 249, 255, 0.86);
  background: rgba(3, 7, 18, 0.34);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  box-shadow: none;
}

body[data-page="videos"] .library-filter.active,
body[data-page="videos"] .library-filter:hover {
  border-color: rgba(241, 201, 106, 0.72);
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(241, 201, 106, 0.24), transparent 78%),
    rgba(14, 17, 26, 0.8);
  box-shadow:
    0 0 26px rgba(241, 201, 106, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="videos"] .exodus-playlist-section {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.58fr);
  gap: 22px;
  padding: 14px 30px 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="videos"] .exodus-playlist-section[hidden] {
  display: none;
}

body[data-page="videos"] .exodus-playlist-section::before {
  display: none;
}

body[data-page="videos"] .youtube-feed-copy {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  align-content: start;
  min-height: 370px;
  padding: 26px 18px 0 18px;
}

body[data-page="videos"] .youtube-feed-copy .section-label {
  display: none;
}

body[data-page="videos"] .youtube-feed-copy h2 {
  max-width: 7.5ch;
  margin: 0;
  color: #f8f9ff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.6vw, 72px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 0.96;
  text-transform: capitalize;
  text-shadow: 0 16px 44px rgba(0, 0, 0, 0.38);
}

body[data-page="videos"] .youtube-feed-copy h2::after {
  display: block;
  width: 150px;
  height: 2px;
  margin: 25px 0 19px;
  background:
    radial-gradient(circle at right, #fff4bd 0 3px, transparent 4px),
    linear-gradient(90deg, var(--reality-gold), rgba(241, 201, 106, 0.1));
  box-shadow: 0 0 24px rgba(241, 201, 106, 0.62);
  content: "";
}

body[data-page="videos"] .youtube-feed-copy p:not(.section-label) {
  margin: 0 0 22px;
  color: rgba(231, 234, 246, 0.76);
  font-size: 1.02rem;
}

body[data-page="videos"] .video-browse-archive {
  display: inline-flex;
  width: min(100%, 420px);
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  border: 1px solid rgba(186, 198, 225, 0.22);
  border-radius: 10px;
  color: rgba(248, 249, 255, 0.86);
  background: rgba(10, 15, 29, 0.62);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}

body[data-page="videos"] .video-browse-archive svg {
  width: 22px;
  height: 22px;
  margin-right: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="videos"] .video-browse-archive::after {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  content: "";
}

body[data-page="videos"] .youtube-feature-panel {
  grid-column: 2;
  grid-row: 1;
}

body[data-page="videos"] .youtube-feature-card {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.78fr);
  min-height: 370px;
  border-color: rgba(241, 201, 106, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(6, 11, 24, 0.3), rgba(17, 21, 42, 0.82)),
    rgba(8, 13, 28, 0.74);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="videos"] .youtube-feature-art {
  min-height: 370px;
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0.16), rgba(3, 7, 18, 0.68)),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .youtube-feature-art::after,
body[data-page="videos"] .youtube-feed-thumb::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 7, 18, 0.04), rgba(3, 7, 18, 0.58));
  content: "";
}

body[data-page="videos"] .youtube-feature-art .play-badge {
  left: 64px;
  top: 50%;
  bottom: auto;
  z-index: 2;
  width: 76px;
  height: 76px;
  border-color: rgba(241, 201, 106, 0.92);
  color: var(--reality-gold);
  background: rgba(3, 7, 18, 0.34);
  box-shadow: 0 0 36px rgba(241, 201, 106, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
}

body[data-page="videos"] .youtube-feature-art::before {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 2;
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: var(--reality-gold);
  box-shadow: 42px 0 0 rgba(255, 255, 255, 0.24), 0 0 18px rgba(241, 201, 106, 0.6);
  content: "";
  transform: translateX(-50%);
}

body[data-page="videos"] .youtube-feature-copy {
  align-content: center;
  gap: 22px;
  padding: clamp(34px, 4vw, 54px);
  border-left: 1px solid rgba(241, 201, 106, 0.18);
  background:
    radial-gradient(circle at 100% 0%, rgba(62, 72, 130, 0.2), transparent 16rem),
    rgba(7, 10, 24, 0.46);
}

body[data-page="videos"] .youtube-feature-copy small,
body[data-page="videos"] .youtube-feed-card small {
  color: var(--reality-gold);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

body[data-page="videos"] .youtube-feature-copy strong {
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(28px, 2.5vw, 42px);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: normal;
}

body[data-page="videos"] .youtube-feature-copy > span {
  max-width: 28ch;
  color: var(--reality-muted);
  font-size: 1.05rem;
  line-height: 1.45;
}

body[data-page="videos"] .youtube-feature-copy em {
  display: inline-flex;
  width: fit-content;
  min-height: 62px;
  align-items: center;
  gap: 14px;
  padding: 0 34px;
  border: 1px solid rgba(241, 201, 106, 0.68);
  border-radius: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 0% 0%, rgba(241, 201, 106, 0.2), transparent 72%),
    rgba(6, 9, 19, 0.78);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  box-shadow: 0 0 30px rgba(241, 201, 106, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="videos"] .youtube-feature-copy em::before,
body[data-page="videos"] .youtube-feed-card .tile-open::before {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(241, 201, 106, 0.72);
  border-radius: 999px;
  color: var(--reality-gold);
  content: "▶";
  font-size: 0.62rem;
  line-height: 1;
}

body[data-page="videos"] .youtube-feed-status {
  grid-column: 1 / -1;
  color: rgba(231, 234, 246, 0.7);
}

body[data-page="videos"] .youtube-feed-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

body[data-page="videos"] .youtube-feed-card {
  border-color: rgba(186, 198, 225, 0.18);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 88%, rgba(255, 255, 255, 0.06), transparent 9rem),
    linear-gradient(180deg, rgba(24, 30, 48, 0.82), rgba(5, 9, 20, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-page="videos"] .youtube-feed-thumb {
  aspect-ratio: 1.82 / 0.68;
  min-height: 178px;
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0.04), rgba(3, 7, 18, 0.42)),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .youtube-feed-thumb .play-badge {
  left: 28px;
  bottom: auto;
  top: 50%;
  z-index: 2;
  width: 66px;
  height: 66px;
  border-color: rgba(241, 201, 106, 0.88);
  color: var(--reality-gold);
  background: rgba(3, 7, 18, 0.28);
  transform: translateY(-50%);
}

body[data-page="videos"] .youtube-feed-card div {
  gap: 14px;
  min-height: 238px;
  padding: 24px 28px 26px;
}

body[data-page="videos"] .youtube-feed-card h3 {
  color: #fff;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: 0.018em;
  line-height: 1.1;
}

body[data-page="videos"] .youtube-feed-card p {
  min-height: 54px;
  margin: 0;
  color: var(--reality-muted);
  font-size: 1rem;
  line-height: 1.42;
}

body[data-page="videos"] .youtube-feed-card .tile-open {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 0 18px;
  border: 1px solid rgba(241, 201, 106, 0.58);
  border-radius: 8px;
  color: #fff;
  background: rgba(5, 8, 18, 0.66);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

body[data-page="videos"] .youtube-feed-card .tile-open::before {
  width: auto;
  height: auto;
  border: 0;
  color: var(--reality-gold);
}

body[data-page="videos"] .youtube-feed-card:hover,
body[data-page="videos"] .youtube-feed-card:focus-within,
body[data-page="videos"] .youtube-feature-card:hover,
body[data-page="videos"] .youtube-feature-card:focus-visible {
  border-color: rgba(241, 201, 106, 0.44);
  background:
    radial-gradient(circle at 70% 86%, rgba(241, 201, 106, 0.1), transparent 11rem),
    linear-gradient(180deg, rgba(28, 35, 56, 0.9), rgba(7, 11, 23, 0.9));
  transform: translateY(-2px);
}

body[data-page="videos"] .library-empty {
  grid-column: 1 / -1;
  border-color: rgba(186, 198, 225, 0.18);
  background: rgba(8, 13, 28, 0.74);
}

body[data-page="videos"] .footer {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1fr) minmax(280px, 0.88fr);
  gap: 34px;
  align-items: center;
  margin: 0;
  padding: 20px 36px;
  border: 1px solid rgba(186, 198, 225, 0.16);
  border-radius: 0 0 18px 18px;
  background:
    radial-gradient(circle at 60% 0%, rgba(255, 255, 255, 0.06), transparent 14rem),
    rgba(8, 13, 28, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="videos"] .footer::before {
  display: none;
}

body[data-page="videos"] .footer-brand span {
  font-size: 1.05rem;
  letter-spacing: 0.46em;
}

body[data-page="videos"] .footer-brand small {
  max-width: 24ch;
  margin-top: 8px;
  color: rgba(231, 234, 246, 0.72);
  line-height: 1.35;
}

body[data-page="videos"] .footer-socials {
  justify-self: start;
  min-width: min(100%, 530px);
  justify-content: center;
  gap: 26px;
  padding: 0 0 0 70px;
  border: 0;
  border-left: 1px solid rgba(186, 198, 225, 0.2);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="videos"] .footer-socials a {
  width: 54px;
  height: 54px;
  border-color: rgba(186, 198, 225, 0.2);
  border-radius: 10px;
  background: rgba(12, 17, 31, 0.62);
}

body[data-page="videos"] .footer address {
  justify-self: end;
  color: rgba(231, 234, 246, 0.7);
}

@media (max-width: 1180px) {
  body[data-page="videos"] .library-controlbar {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body[data-page="videos"] .library-toolbar {
    justify-content: start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  body[data-page="videos"] .exodus-playlist-section {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feed-copy,
  body[data-page="videos"] .youtube-feature-panel {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-page="videos"] .youtube-feed-copy {
    min-height: auto;
  }
}

@media (max-width: 860px) {
  body[data-page="videos"] .site-shell {
    width: 100%;
    padding: 0;
  }

  body[data-page="videos"] .video-soon-page,
  body[data-page="videos"] .footer {
    border-radius: 0;
  }

  body[data-page="videos"] .library-controlbar,
  body[data-page="videos"] .exodus-playlist-section,
  body[data-page="videos"] .footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  body[data-page="videos"] .youtube-feature-card {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feature-copy {
    border-left: 0;
    border-top: 1px solid rgba(241, 201, 106, 0.18);
  }

  body[data-page="videos"] .youtube-feed-grid,
  body[data-page="videos"] .footer {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .footer-socials {
    justify-self: stretch;
    justify-content: flex-start;
    padding: 0;
    border-left: 0;
  }

  body[data-page="videos"] .footer address {
    justify-self: start;
  }
}

/* Shared glass header restoration */
body[data-page] .topbar {
  width: min(100%, 1540px);
  min-height: 70px;
  margin: 0 auto 72px;
  padding: 0 22px 0 28px;
  border: 1px solid rgba(139, 127, 190, 0.34);
  border-radius: 13px 13px 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(160, 92, 255, 0.16), transparent 26rem),
    linear-gradient(180deg, rgba(18, 24, 46, 0.84), rgba(5, 8, 17, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 36px rgba(119, 77, 255, 0.12);
  backdrop-filter: blur(18px) saturate(1.18);
}

body[data-page] .topbar .brand {
  color: rgba(248, 249, 255, 0.94);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.1);
}

body[data-page] .topbar .nav-links a {
  color: rgba(248, 249, 255, 0.78);
}

body[data-page] .topbar .nav-links a:hover,
body[data-page] .topbar .nav-links a.active {
  color: #fff;
}

body[data-page] .topbar .nav-links a.active::after {
  bottom: -16px;
  background: linear-gradient(90deg, transparent, #a45cff, transparent);
  box-shadow: 0 0 18px rgba(164, 92, 255, 0.9);
}

body[data-page] .topbar .socials a {
  width: 34px;
  height: 34px;
  border-color: transparent;
  border-radius: 7px;
  color: rgba(248, 249, 255, 0.94);
  background: rgba(8, 12, 24, 0.2);
  box-shadow: none;
}

body[data-page] .topbar .socials a:hover {
  border-color: rgba(164, 92, 255, 0.72);
  color: #fff;
  box-shadow:
    0 0 24px rgba(164, 92, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-page="library"] .site-shell,
body[data-page="videos"] .site-shell {
  width: min(1540px, calc(100% - 40px));
}

body[data-page="library"] .exodus-blog-index,
body[data-page="videos"] .video-soon-page,
body[data-page="videos"] .footer {
  width: min(100%, 1540px);
  margin-left: auto;
  margin-right: auto;
}

body[data-page="library"] .exodus-project-archive .exodus-all-writings-panel {
  right: max(20px, calc((100vw - min(1540px, calc(100vw - 40px))) / 2 + 20px));
}

body[data-page="videos"] .topbar {
  margin-bottom: 14px;
}

/* Reality Unveiled media-suite exacting pass */
body[data-page="videos"] .library-controlbar {
  display: none;
}

body[data-page="videos"] .video-soon-page {
  border-color: rgba(173, 181, 212, 0.18);
  border-radius: 0;
  overflow: visible;
  background:
    radial-gradient(circle at 8% 12%, rgba(119, 151, 214, 0.16), transparent 18rem),
    radial-gradient(circle at 76% 16%, rgba(229, 184, 92, 0.08), transparent 18rem),
    linear-gradient(180deg, rgba(5, 10, 21, 0.86), rgba(3, 6, 13, 0.96));
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="videos"] .exodus-playlist-section {
  grid-template-columns: minmax(340px, 0.48fr) minmax(0, 1fr);
  gap: 28px;
  padding: 0;
}

body[data-page="videos"] .youtube-feed-copy {
  min-height: 0;
  padding: 0 6px 0 0;
}

body[data-page="videos"] .youtube-feed-copy h2 {
  max-width: 6.7ch;
  font-size: clamp(54px, 5vw, 88px);
  letter-spacing: 0.01em;
  line-height: 0.91;
}

body[data-page="videos"] .youtube-feed-copy h2::after {
  width: 144px;
  margin: 30px 0 24px;
}

body[data-page="videos"] .youtube-feed-copy p:not(.section-label) {
  margin-bottom: 24px;
  color: rgba(231, 234, 246, 0.78);
  font-size: 1.22rem;
}

body[data-page="videos"] .video-browse-archive {
  width: min(100%, 405px);
  min-height: 58px;
  border-color: rgba(186, 198, 225, 0.2);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(11, 17, 32, 0.74);
  font-size: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="videos"] .youtube-feature-card {
  grid-template-columns: minmax(0, 1.42fr) minmax(330px, 0.68fr);
  min-height: 356px;
  border-color: rgba(241, 201, 106, 0.28);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 12, 24, 0.34), rgba(14, 17, 34, 0.92)),
    rgba(8, 12, 24, 0.84);
}

body[data-page="videos"] .youtube-feature-art {
  min-height: 356px;
  background:
    linear-gradient(180deg, rgba(4, 8, 16, 0.08), rgba(4, 8, 16, 0.72)),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .youtube-feature-art .play-badge {
  left: 82px;
  width: 82px;
  height: 82px;
  border-color: rgba(241, 201, 106, 0.94);
  background: rgba(4, 8, 16, 0.28);
}

body[data-page="videos"] .youtube-feature-copy {
  gap: 26px;
  padding: 54px 50px;
  border-left-color: rgba(241, 201, 106, 0.18);
}

body[data-page="videos"] .youtube-feature-copy small {
  font-size: 0.88rem;
  letter-spacing: 0.085em;
}

body[data-page="videos"] .youtube-feature-copy strong {
  font-size: clamp(34px, 2.9vw, 46px);
  letter-spacing: 0.02em;
}

body[data-page="videos"] .youtube-feature-copy > span {
  max-width: 24ch;
  font-size: 1.18rem;
}

body[data-page="videos"] .youtube-feature-copy em {
  min-height: 66px;
  padding: 0 34px;
  border-radius: 12px;
  font-size: 1rem;
}

body[data-page="videos"] .youtube-feed-grid {
  gap: 24px;
  margin-top: 4px;
}

body[data-page="videos"] .youtube-feed-card {
  border-color: rgba(241, 201, 106, 0.18);
  border-radius: 14px;
}

body[data-page="videos"] .youtube-feed-thumb {
  aspect-ratio: 1.76 / 0.66;
  min-height: 186px;
}

body[data-page="videos"] .youtube-feed-card div {
  min-height: 236px;
  padding: 24px 28px 26px;
}

body[data-page="videos"] .youtube-feed-card h3 {
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 400;
  letter-spacing: 0.015em;
}

body[data-page="videos"] .youtube-feed-card p {
  max-width: 23ch;
  font-size: 1.1rem;
}

body[data-page="videos"] .video-catalog-panel {
  position: fixed;
  top: 96px;
  right: max(20px, calc((100vw - min(1540px, calc(100vw - 40px))) / 2 + 20px));
  bottom: 28px;
  z-index: 80;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(620px, calc(100vw - 40px));
  border: 1px solid rgba(241, 201, 106, 0.22);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(241, 201, 106, 0.12), transparent 18rem),
    radial-gradient(circle at 100% 12%, rgba(79, 104, 176, 0.22), transparent 18rem),
    linear-gradient(180deg, rgba(10, 16, 31, 0.94), rgba(4, 8, 18, 0.98));
  box-shadow:
    -28px 30px 90px rgba(0, 0, 0, 0.56),
    0 0 54px rgba(241, 201, 106, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(1.2);
}

body[data-page="videos"] .video-catalog-panel[hidden] {
  display: none;
}

body[data-page="videos"] .video-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 26px 28px 18px;
  border-bottom: 1px solid rgba(186, 198, 225, 0.12);
}

body[data-page="videos"] .video-catalog-head span,
body[data-page="videos"] .video-catalog-row-head span {
  display: block;
  color: rgba(241, 201, 106, 0.78);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body[data-page="videos"] .video-catalog-head strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body[data-page="videos"] .video-catalog-head button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(186, 198, 225, 0.18);
  border-radius: 999px;
  color: rgba(248, 249, 255, 0.82);
  background: rgba(12, 17, 31, 0.62);
  font-size: 1.4rem;
  cursor: pointer;
}

body[data-page="videos"] .video-catalog-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 54px;
  margin: 18px 28px;
  padding: 0 18px;
  border: 1px solid rgba(186, 198, 225, 0.16);
  border-radius: 999px;
  background: rgba(4, 8, 18, 0.72);
}

body[data-page="videos"] .video-catalog-search svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  color: rgba(248, 249, 255, 0.72);
}

body[data-page="videos"] .video-catalog-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: 1rem;
}

body[data-page="videos"] .video-catalog-rows {
  display: grid;
  gap: 28px;
  overflow: auto;
  padding: 0 28px 30px;
}

body[data-page="videos"] .video-catalog-row {
  display: grid;
  gap: 14px;
}

body[data-page="videos"] .video-catalog-row-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

body[data-page="videos"] .video-catalog-row-head h3 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="videos"] .video-catalog-track {
  display: grid;
  grid-auto-columns: minmax(220px, 48%);
  grid-auto-flow: column;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scroll-snap-type: x proximity;
}

body[data-page="videos"] .video-catalog-card {
  scroll-snap-align: start;
  min-width: 0;
  border: 1px solid rgba(186, 198, 225, 0.16);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(8, 13, 28, 0.72);
  cursor: pointer;
}

body[data-page="videos"] .video-catalog-card button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background:
    linear-gradient(180deg, rgba(4, 8, 16, 0.1), rgba(4, 8, 16, 0.62)),
    var(--card-image) center / cover no-repeat;
  cursor: pointer;
}

body[data-page="videos"] .video-catalog-card .play-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-color: rgba(241, 201, 106, 0.88);
  color: var(--reality-gold);
  background: rgba(4, 8, 18, 0.38);
}

body[data-page="videos"] .video-catalog-card div {
  display: grid;
  gap: 8px;
  padding: 16px 18px 18px;
}

body[data-page="videos"] .video-catalog-card small {
  color: var(--reality-gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="videos"] .video-catalog-card strong {
  overflow: hidden;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="videos"] .video-catalog-card span {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(231, 234, 246, 0.68);
  font-size: 0.86rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 980px) {
  body[data-page="videos"] .exodus-playlist-section {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feature-card,
  body[data-page="videos"] .youtube-feed-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .video-catalog-panel {
    inset: auto 14px 14px;
    max-height: min(720px, calc(100vh - 28px));
    width: auto;
  }
}

/* Reality Unveiled full media-suite pass */
body[data-page="videos"] {
  background:
    radial-gradient(circle at 10% 8%, rgba(105, 135, 205, 0.18), transparent 22rem),
    radial-gradient(circle at 78% 16%, rgba(241, 201, 106, 0.1), transparent 20rem),
    radial-gradient(circle at 52% 100%, rgba(23, 42, 82, 0.38), transparent 34rem),
    linear-gradient(180deg, #030711 0%, #02040a 100%);
}

body[data-page="videos"] .site-shell {
  width: min(1540px, calc(100% - 42px));
  padding: 20px 0 28px;
}

body[data-page="videos"] .topbar {
  margin-bottom: 0;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 54% 0%, rgba(153, 105, 255, 0.22), transparent 30rem),
    linear-gradient(180deg, rgba(26, 34, 58, 0.86), rgba(5, 9, 20, 0.9));
}

body[data-page="videos"] .video-soon-page {
  display: grid;
  gap: 0;
  border: 1px solid rgba(173, 181, 212, 0.2);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(119, 151, 214, 0.16), transparent 20rem),
    radial-gradient(circle at 94% 8%, rgba(241, 201, 106, 0.09), transparent 20rem),
    linear-gradient(180deg, rgba(6, 12, 26, 0.94), rgba(3, 6, 14, 0.98));
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-page="videos"] .library-controlbar {
  display: grid;
  grid-template-columns: minmax(260px, 430px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 92px;
  padding: 18px 34px;
  border: 0;
  border-bottom: 1px solid rgba(173, 181, 212, 0.14);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(8, 14, 30, 0.72);
  box-shadow: none;
}

body[data-page="videos"] .library-search {
  min-height: 56px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)),
    rgba(8, 13, 27, 0.84);
}

body[data-page="videos"] .library-toolbar {
  justify-content: end;
  overflow-x: auto;
  padding-bottom: 2px;
}

body[data-page="videos"] .library-filter {
  min-height: 48px;
  border-radius: 999px;
}

body[data-page="videos"] .exodus-playlist-section {
  display: grid;
  grid-template-columns: minmax(310px, 0.42fr) minmax(0, 1fr);
  gap: 28px;
  padding: 36px 36px 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="videos"] .youtube-feed-copy {
  position: sticky;
  top: 18px;
  align-self: start;
  min-height: auto;
  padding: 18px 0 0;
}

body[data-page="videos"] .youtube-feed-copy h2 {
  max-width: 6.4ch;
  font-size: clamp(52px, 5.4vw, 94px);
  line-height: 0.9;
}

body[data-page="videos"] .youtube-feature-panel {
  align-self: start;
}

body[data-page="videos"] .youtube-feature-card {
  grid-template-columns: minmax(0, 1.38fr) minmax(290px, 0.62fr);
  min-height: 350px;
  border-radius: 18px;
}

body[data-page="videos"] .youtube-feature-art {
  min-height: 350px;
}

body[data-page="videos"] .youtube-feature-copy {
  gap: 20px;
  padding: clamp(30px, 3.2vw, 48px);
}

body[data-page="videos"] .youtube-feed-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  margin-top: 6px;
}

body[data-page="videos"] .video-main-row {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body[data-page="videos"] .video-main-row-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

body[data-page="videos"] .video-main-row-head h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.98);
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body[data-page="videos"] .video-main-row-head span {
  color: var(--reality-gold);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="videos"] .video-main-track {
  display: grid;
  grid-auto-columns: minmax(280px, 31%);
  grid-auto-flow: column;
  gap: 22px;
  overflow-x: auto;
  padding: 2px 2px 18px;
  scroll-snap-type: x proximity;
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar,
body[data-page="videos"] .video-catalog-track::-webkit-scrollbar,
body[data-page="videos"] .library-toolbar::-webkit-scrollbar {
  height: 9px;
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar-track,
body[data-page="videos"] .video-catalog-track::-webkit-scrollbar-track,
body[data-page="videos"] .library-toolbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar-thumb,
body[data-page="videos"] .video-catalog-track::-webkit-scrollbar-thumb,
body[data-page="videos"] .library-toolbar::-webkit-scrollbar-thumb {
  background: rgba(241, 201, 106, 0.52);
  border-radius: 999px;
}

body[data-page="videos"] .youtube-feed-card {
  scroll-snap-align: start;
  min-width: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 80% 96%, rgba(241, 201, 106, 0.08), transparent 10rem),
    linear-gradient(180deg, rgba(18, 27, 48, 0.86), rgba(4, 8, 19, 0.92));
}

body[data-page="videos"] .youtube-feed-thumb {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

body[data-page="videos"] .youtube-feed-card div {
  min-height: 164px;
  padding: 18px 22px 20px;
}

body[data-page="videos"] .youtube-feed-card h3 {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(20px, 1.55vw, 27px);
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="videos"] .youtube-feed-card p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 0;
  font-size: 0.98rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="videos"] .youtube-feed-card .tile-open {
  min-height: 38px;
  padding: 0 15px;
  font-size: 0.72rem;
}

body[data-page="videos"] .video-catalog-panel {
  width: min(760px, calc(100vw - 40px));
}

@media (max-width: 1180px) {
  body[data-page="videos"] .library-controlbar,
  body[data-page="videos"] .exodus-playlist-section {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feed-copy {
    position: relative;
    top: auto;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    max-width: 12ch;
    font-size: clamp(44px, 8vw, 74px);
  }
}

@media (max-width: 760px) {
  body[data-page="videos"] .site-shell {
    width: 100%;
    padding: 0;
  }

  body[data-page="videos"] .topbar,
  body[data-page="videos"] .video-soon-page {
    border-radius: 0;
  }

  body[data-page="videos"] .library-controlbar,
  body[data-page="videos"] .exodus-playlist-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  body[data-page="videos"] .youtube-feature-card {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .video-main-track {
    grid-auto-columns: minmax(250px, 82%);
  }
}

/* Home redesign: Remnant glass suite, 2026-06-16 */
body[data-page="home"] {
  --home-bg: #030712;
  --home-panel: rgba(10, 15, 32, 0.68);
  --home-line: rgba(188, 178, 231, 0.28);
  --home-soft-line: rgba(188, 178, 231, 0.14);
  --home-purple: #a66cff;
  --home-purple-soft: rgba(166, 108, 255, 0.22);
  --home-text: rgba(248, 249, 255, 0.96);
  --home-muted: rgba(225, 226, 240, 0.72);
  background:
    radial-gradient(circle at 88% 8%, rgba(139, 75, 255, 0.22), transparent 20rem),
    radial-gradient(circle at 12% 6%, rgba(180, 190, 255, 0.14), transparent 22rem),
    linear-gradient(180deg, #02050d 0%, #030714 54%, #02040a 100%);
  color: var(--home-text);
}

body[data-page="home"] .site-shell {
  width: min(1540px, calc(100% - 34px));
  margin: 18px auto 24px;
  padding: 0;
  border: 1px solid rgba(188, 178, 231, 0.25);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 96% 5%, rgba(160, 92, 255, 0.18), transparent 24rem),
    rgba(3, 7, 18, 0.48);
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="home"] .topbar {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  width: calc(100% - 18px);
  min-height: 88px;
  margin: 8px auto 0;
  padding: 0 20px 0 32px;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) auto;
  column-gap: 22px;
  border: 1px solid rgba(188, 178, 231, 0.26);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0%, rgba(166, 108, 255, 0.18), transparent 19rem),
    linear-gradient(180deg, rgba(29, 35, 58, 0.8), rgba(5, 9, 21, 0.84));
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(22px) saturate(1.22);
}

body[data-page="home"] .brand,
body[data-page="home"] .footer-brand span {
  color: var(--home-text);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: 0.42em;
}

body[data-page="home"] .topbar .brand {
  position: relative;
  color: #fff;
}

body[data-page="home"] .topbar .brand::after {
  position: absolute;
  left: 50%;
  bottom: -27px;
  width: 68px;
  height: 2px;
  content: "";
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--home-purple), transparent);
  box-shadow: 0 0 18px rgba(166, 108, 255, 0.9);
}

body[data-page="home"] .nav-links {
  gap: clamp(20px, 2.8vw, 50px);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

body[data-page="home"] .nav-links a {
  color: rgba(248, 249, 255, 0.82);
}

body[data-page="home"] .nav-links a[data-page-link="about"]::after {
  content: none;
}

body[data-page="home"] .socials {
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(188, 178, 231, 0.16);
  border-radius: 16px;
  background: rgba(18, 24, 44, 0.72);
}

body[data-page="home"] .socials a {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(188, 178, 231, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

body[data-page="home"] .socials svg {
  width: 20px;
  height: 20px;
}

body[data-page="home"] .signal-home {
  gap: 24px;
}

body[data-page="home"] .signal-hero {
  min-height: 560px;
  padding: 66px 0 44px;
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(3, 7, 18, 0.12), rgba(3, 7, 18, 0.66) 50%, rgba(3, 7, 18, 0.18)),
    url("assets/about-portrait.png") left 38% / 53% auto no-repeat,
    url("assets/about-portrait.png") right 30% / 49% auto no-repeat,
    radial-gradient(circle at 50% 4%, rgba(208, 213, 255, 0.22), transparent 22rem),
    #030712;
}

body[data-page="home"] .signal-hero::before {
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0), rgba(3, 7, 18, 0.72) 88%),
    radial-gradient(circle at 16% 44%, rgba(188, 201, 255, 0.28), transparent 17rem),
    radial-gradient(circle at 96% 12%, rgba(166, 108, 255, 0.22), transparent 16rem);
  filter: none;
  opacity: 1;
}

body[data-page="home"] .signal-hero::after {
  display: none;
}

body[data-page="home"] .signal-hero .hero-copy {
  width: min(760px, calc(100% - 56px));
  padding: 36px 54px 42px;
  border-color: rgba(218, 213, 255, 0.48);
  border-radius: 18px;
  background:
    radial-gradient(circle at 28% 0%, rgba(255, 255, 255, 0.12), transparent 18rem),
    linear-gradient(135deg, rgba(75, 84, 119, 0.58), rgba(9, 14, 29, 0.66));
  box-shadow:
    0 0 42px rgba(166, 108, 255, 0.22),
    0 26px 110px rgba(0, 0, 0, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(24px) saturate(1.25);
}

body[data-page="home"] .signal-mark {
  width: 58px;
  height: 58px;
  margin-bottom: 28px;
  border-color: rgba(218, 213, 255, 0.34);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.45rem;
}

body[data-page="home"] .signal-hero h1 {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(56px, 5.3vw, 86px);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.34);
}

body[data-page="home"] .signal-hero .tagline {
  color: #c7a6ff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: 0.34em;
}

body[data-page="home"] .signal-role {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.26em;
}

body[data-page="home"] .signal-hero .button {
  min-width: 290px;
  min-height: 62px;
  border-color: rgba(199, 166, 255, 0.78);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(199, 166, 255, 0.3), transparent 80%),
    rgba(19, 25, 45, 0.76);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  box-shadow: 0 0 26px rgba(166, 108, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-page="home"] .scroll-cue {
  bottom: 10px;
}

body[data-page="home"] .scroll-cue i {
  width: 28px;
  height: 46px;
  border-color: rgba(218, 213, 255, 0.56);
  background: rgba(8, 12, 25, 0.42);
}

body[data-page="home"] .signal-manifesto,
body[data-page="home"] .signal-transmission,
body[data-page="home"] .signal-timeline,
body[data-page="home"] .signal-community,
body[data-page="home"] .footer {
  width: min(1380px, calc(100% - 128px));
  border: 1px solid rgba(188, 178, 231, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 2% 4%, rgba(199, 166, 255, 0.16), transparent 18rem),
    linear-gradient(180deg, rgba(15, 22, 42, 0.78), rgba(7, 12, 26, 0.86));
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.16);
}

body[data-page="home"] .section-label {
  color: var(--home-purple);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

body[data-page="home"] .signal-manifesto {
  grid-template-columns: minmax(470px, 0.92fr) minmax(480px, 1fr);
  gap: 42px;
  min-height: 330px;
  padding: 42px 54px;
}

body[data-page="home"] .manifesto-head h2,
body[data-page="home"] .manifesto-head strong,
body[data-page="home"] .signal-community h2 {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(34px, 3.15vw, 54px);
  font-weight: 400;
  letter-spacing: 0.105em;
  line-height: 1.08;
}

body[data-page="home"] .manifesto-head strong {
  display: inline;
  color: #fff;
}

body[data-page="home"] .manifesto-head strong span {
  color: var(--home-purple);
}

body[data-page="home"] .manifesto-head p:not(.section-label) {
  margin: 10px 0 0;
  color: rgba(248, 249, 255, 0.78);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.3;
}

body[data-page="home"] .manifesto-head p:nth-of-type(2) {
  margin-top: 24px;
}

body[data-page="home"] .manifesto-head p:last-child::after {
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 16px;
  background: var(--home-purple);
  content: "";
}

body[data-page="home"] .manifesto-card {
  display: grid;
  align-content: center;
  min-height: 230px;
  padding: 46px 42px;
  border-color: rgba(188, 178, 231, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(7, 11, 23, 0.9), rgba(7, 11, 23, 0.38)),
    url("assets/about-portrait.png") right 42% / cover no-repeat;
}

body[data-page="home"] .manifesto-card .mini-wave {
  width: 52px;
  margin-bottom: 24px;
}

body[data-page="home"] .manifesto-card p {
  margin: 0 0 9px;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.35;
}

body[data-page="home"] .manifesto-card .button {
  width: fit-content;
  min-width: 190px;
  min-height: 48px;
  margin-top: 22px;
  border-radius: 8px;
  color: #fff;
  gap: 14px;
}

body[data-page="home"] .signal-timeline {
  padding: 34px 52px 38px;
}

body[data-page="home"] .timeline-grid {
  gap: 30px;
}

body[data-page="home"] .timeline-grid article {
  min-height: 132px;
  padding: 2px 20px 18px;
}

body[data-page="home"] .timeline-grid article.active {
  border-color: rgba(166, 108, 255, 0.72);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 0%, rgba(166, 108, 255, 0.34), rgba(58, 35, 111, 0.3));
  box-shadow: 0 0 34px rgba(166, 108, 255, 0.26);
}

body[data-page="home"] .timeline-grid article::before {
  width: 16px;
  height: 16px;
  border-color: rgba(207, 197, 255, 0.7);
  background: rgba(57, 56, 84, 0.9);
  box-shadow: 0 0 18px rgba(166, 108, 255, 0.24);
}

body[data-page="home"] .timeline-grid span {
  font-size: 1.28rem;
}

body[data-page="home"] .signal-transmission {
  grid-template-columns: minmax(280px, 0.8fr) minmax(190px, 300px) minmax(310px, 0.92fr);
  min-height: 300px;
  padding: 42px 54px;
}

body[data-page="home"] .signal-transmission h2 {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 400;
  letter-spacing: 0.14em;
}

body[data-page="home"] .signal-transmission .release-note {
  color: rgba(248, 249, 255, 0.86);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1.75;
  text-transform: none;
}

body[data-page="home"] .signal-transmission .cover {
  max-width: 280px;
  justify-self: center;
  border-radius: 8px;
  filter: none;
}

body[data-page="home"] .signal-transmission .now-playing {
  padding: 28px;
  border-color: rgba(188, 178, 231, 0.18);
  border-radius: 12px;
  background: rgba(11, 16, 31, 0.62);
}

body[data-page="home"] .signal-transmission .button,
body[data-page="home"] .signal-community .button {
  border-color: rgba(188, 178, 231, 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(199, 166, 255, 0.2), transparent 78%),
    rgba(19, 25, 45, 0.72);
}

body[data-page="home"] .signal-community {
  grid-template-columns: minmax(360px, 0.62fr) minmax(0, 1fr);
  min-height: 245px;
  margin-top: 0;
  margin-bottom: 18px;
  background:
    linear-gradient(90deg, rgba(7, 11, 23, 0.94), rgba(7, 11, 23, 0.76) 42%, rgba(41, 20, 85, 0.25)),
    url("assets/music-realm-bg.png") right 58% / cover no-repeat;
}

body[data-page="home"] .signal-community .about-copy {
  padding: 40px 54px;
}

body[data-page="home"] .signal-community .about-art {
  background: none;
  filter: none;
}

body[data-page="home"] .signal-community p {
  color: #fff;
  font-size: 1rem;
}

body[data-page="home"] .footer {
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1fr) minmax(270px, 0.82fr);
  align-items: center;
  margin-bottom: 18px;
  padding: 20px 32px;
  border-radius: 14px;
}

body[data-page="home"] .footer-socials {
  justify-content: center;
}

body[data-page="home"] .footer address strong {
  color: var(--home-purple);
}

@media (max-width: 980px) {
  body[data-page="home"] .site-shell {
    width: min(100% - 18px, 760px);
  }

  body[data-page="home"] .topbar {
    grid-template-columns: 1fr auto;
    min-height: 70px;
    margin-top: 8px;
  }

  body[data-page="home"] .nav-links,
  body[data-page="home"] .socials {
    display: none;
  }

  body[data-page="home"] .topbar.nav-open .nav-links,
  body[data-page="home"] .topbar.nav-open .socials {
    display: flex;
  }

  body[data-page="home"] .signal-manifesto,
  body[data-page="home"] .signal-transmission,
  body[data-page="home"] .signal-timeline,
  body[data-page="home"] .signal-community,
  body[data-page="home"] .footer {
    width: min(calc(100% - 32px), 720px);
  }

  body[data-page="home"] .signal-manifesto {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .signal-hero {
    min-height: 590px;
    background:
      linear-gradient(180deg, rgba(3, 7, 18, 0.2), rgba(3, 7, 18, 0.78)),
      url("assets/about-portrait.png") center top / auto 78% no-repeat,
      #030712;
  }

  body[data-page="home"] .signal-hero .hero-copy {
    width: calc(100% - 28px);
    padding: 30px 20px;
  }

  body[data-page="home"] .signal-hero h1 {
    font-size: clamp(34px, 11vw, 48px);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }

  body[data-page="home"] .signal-hero .button {
    min-width: min(100%, 260px);
  }

  body[data-page="home"] .signal-manifesto,
  body[data-page="home"] .signal-transmission,
  body[data-page="home"] .signal-community,
  body[data-page="home"] .footer {
    grid-template-columns: 1fr;
    padding: 28px 20px;
  }

  body[data-page="home"] .timeline-grid {
    grid-template-columns: 1fr;
  }
}

/* About redesign: Remnant split suite, 2026-06-16 */
body[data-page="about"] {
  --about-panel: rgba(13, 17, 35, 0.76);
  --about-panel-strong: rgba(23, 24, 45, 0.8);
  --about-line: rgba(199, 181, 255, 0.28);
  --about-purple: #a86cff;
  --about-purple-bright: #b87cff;
  --about-text: rgba(249, 248, 255, 0.96);
  --about-muted: rgba(229, 225, 239, 0.72);
  min-height: 100dvh;
  background:
    radial-gradient(circle at 92% 8%, rgba(142, 76, 255, 0.2), transparent 26rem),
    radial-gradient(circle at 5% 90%, rgba(142, 76, 255, 0.14), transparent 24rem),
    linear-gradient(180deg, #02040b 0%, #030511 58%, #010207 100%);
}

body[data-page="about"] .about-launch-shell {
  position: relative;
  display: block;
  width: min(1540px, calc(100% - 72px));
  min-height: auto;
  margin: 28px auto 34px;
  padding: 0 26px 18px;
  overflow: hidden;
  border: 1px solid rgba(189, 169, 255, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 52% 0%, rgba(171, 108, 255, 0.22), transparent 25rem),
    linear-gradient(180deg, rgba(12, 18, 36, 0.82), rgba(4, 7, 16, 0.92));
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-page="about"] .topbar + main.about-launch-page {
  padding-top: 0;
}

body[data-page="about"] .about-launch-shell::before,
body[data-page="about"] .about-launch-shell::after {
  display: none;
}

body[data-page="about"] .topbar {
  position: relative;
  box-sizing: border-box;
  top: auto;
  left: auto;
  right: auto;
  width: calc(100% + 52px);
  min-height: 78px;
  margin: 0 -26px 20px;
  padding: 0 34px;
  transform: none;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) auto;
  column-gap: 28px;
  border: 0;
  border-bottom: 1px solid rgba(189, 169, 255, 0.22);
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(168, 108, 255, 0.24), transparent 18rem),
    radial-gradient(circle at 92% 0%, rgba(168, 108, 255, 0.15), transparent 22rem),
    linear-gradient(180deg, rgba(31, 30, 58, 0.86), rgba(8, 11, 24, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 50px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(22px) saturate(1.18);
}

body[data-page="about"] .topbar .brand {
  color: var(--about-text);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.42em;
}

body[data-page="about"] .topbar .nav-links {
  gap: clamp(28px, 4vw, 64px);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.11em;
}

body[data-page="about"] .topbar .nav-links a {
  color: rgba(249, 248, 255, 0.82);
}

body[data-page="about"] .topbar .nav-links a.active {
  color: #fff;
  text-shadow: 0 0 18px rgba(168, 108, 255, 0.7);
}

body[data-page="about"] .topbar .nav-links a.active::after {
  bottom: -25px;
  width: 42px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--about-purple), transparent);
  box-shadow: 0 0 18px rgba(168, 108, 255, 0.9);
}

body[data-page="about"] .topbar .socials {
  gap: 18px;
}

body[data-page="about"] .topbar .socials a,
body[data-page="about"] .about-launch-footer .footer-socials a {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(218, 207, 255, 0.22);
  border-radius: 8px;
  color: rgba(249, 248, 255, 0.9);
  background: rgba(10, 13, 26, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="about"] .topbar .socials svg,
body[data-page="about"] .about-launch-footer .footer-socials svg {
  width: 19px;
  height: 19px;
}

body[data-page="about"] .about-launch-page {
  display: block;
  min-height: 0;
  padding: 0;
}

body[data-page="about"] .about-launch-hero {
  display: grid;
  grid-template-columns: minmax(450px, 0.83fr) minmax(560px, 1.1fr);
  gap: 18px;
  align-items: stretch;
  width: 100%;
  height: 590px;
  min-height: 0;
  margin: 0;
  padding: 0;
}

body[data-page="about"] .about-launch-copy,
body[data-page="about"] .about-launch-visual {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--about-line);
  border-radius: 16px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(1.14);
}

body[data-page="about"] .about-launch-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  min-width: 0;
  padding: clamp(28px, 2.7vw, 42px);
  background:
    radial-gradient(circle at 18% 6%, rgba(184, 124, 255, 0.18), transparent 20rem),
    radial-gradient(circle at 95% 50%, rgba(255, 255, 255, 0.06), transparent 18rem),
    linear-gradient(180deg, rgba(38, 39, 67, 0.78), rgba(12, 15, 32, 0.84));
}

body[data-page="about"] .about-launch-kicker {
  width: min(100%, 410px);
  gap: 16px;
  margin-bottom: 18px;
  color: var(--about-purple-bright);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.36em;
}

body[data-page="about"] .about-launch-kicker b {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--about-purple);
  box-shadow: 0 0 18px rgba(168, 108, 255, 0.9);
}

body[data-page="about"] .about-launch-kicker i {
  max-width: 92px;
}

body[data-page="about"] .about-launch-copy h1 {
  max-width: 9.8ch;
  margin: 0;
  color: transparent;
  background:
    linear-gradient(180deg, #fff 0%, #f2eef8 42%, #b991ff 66%, #7831da 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(48px, 4.5vw, 66px);
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 0.94;
  text-transform: uppercase;
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.56);
}

body[data-page="about"] .about-launch-rule {
  width: min(100%, 410px);
  margin: 20px 0 22px;
  color: var(--about-purple);
}

body[data-page="about"] .about-launch-rule span {
  background: linear-gradient(90deg, var(--about-purple), transparent);
}

body[data-page="about"] .about-launch-copy p {
  max-width: 520px;
  margin-bottom: 16px;
  color: var(--about-muted);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 1.35;
  letter-spacing: 0;
}

body[data-page="about"] .about-launch-copy p strong {
  color: var(--about-purple-bright);
  font-weight: 800;
}

body[data-page="about"] .about-launch-actions {
  display: grid;
  gap: 14px;
  width: min(100%, 390px);
  margin-top: 12px;
}

body[data-page="about"] .about-launch-actions .button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  justify-content: stretch;
  width: 100%;
  min-height: 54px;
  padding: 0 24px;
  border-color: rgba(219, 209, 255, 0.28);
  border-radius: 9px;
  color: #fff;
  background: rgba(6, 9, 20, 0.44);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.22em;
}

body[data-page="about"] .about-launch-actions .button.primary {
  border-color: rgba(168, 108, 255, 0.9);
  background:
    radial-gradient(circle at 0% 0%, rgba(168, 108, 255, 0.4), transparent 65%),
    linear-gradient(180deg, rgba(93, 53, 162, 0.82), rgba(56, 28, 107, 0.66));
  box-shadow:
    0 0 30px rgba(168, 108, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body[data-page="about"] .about-launch-actions svg {
  width: 18px;
  height: 18px;
  color: var(--about-purple-bright);
}

body[data-page="about"] .about-launch-actions em {
  color: rgba(255, 255, 255, 0.86);
  font-style: normal;
  letter-spacing: 0;
}

body[data-page="about"] .about-launch-visual {
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(4, 6, 14, 0.05), rgba(4, 6, 14, 0.28) 72%, rgba(4, 6, 14, 0.78)),
    radial-gradient(circle at 52% 20%, rgba(183, 123, 255, 0.2), transparent 24rem),
    url("assets/music-realm-bg.png") center 42% / cover no-repeat;
  filter: saturate(1.06) contrast(1.04);
}

body[data-page="about"] .about-launch-footer {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr);
  align-items: center;
  gap: 26px;
  min-height: 70px;
  margin-top: 18px;
  padding: 0 38px;
  border: 1px solid rgba(199, 181, 255, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(168, 108, 255, 0.14), transparent 24rem),
    linear-gradient(180deg, rgba(18, 24, 46, 0.68), rgba(6, 9, 20, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 55px rgba(0, 0, 0, 0.28);
}

body[data-page="about"] .about-launch-footer small {
  color: rgba(249, 248, 255, 0.72);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

body[data-page="about"] .about-footer-mark {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(168, 108, 255, 0.72);
  border-radius: 9px;
  color: var(--about-purple);
  background: rgba(73, 39, 128, 0.54);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.45rem;
  box-shadow: 0 0 24px rgba(168, 108, 255, 0.28);
}

body[data-page="about"] .about-footer-mark::before,
body[data-page="about"] .about-footer-mark::after {
  position: absolute;
  top: 50%;
  width: 74px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(168, 108, 255, 0.62), transparent);
}

body[data-page="about"] .about-footer-mark::before {
  right: calc(100% + 26px);
}

body[data-page="about"] .about-footer-mark::after {
  left: calc(100% + 26px);
}

body[data-page="about"] .about-launch-footer .footer-socials {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 1120px) {
  body[data-page="about"] .about-launch-shell {
    width: min(100% - 28px, 860px);
    padding: 0 16px 16px;
  }

  body[data-page="about"] .topbar {
    width: calc(100% + 32px);
    margin-inline: -16px;
    grid-template-columns: 1fr auto;
    min-height: 74px;
    padding: 0 24px;
  }

  body[data-page="about"] .topbar .nav-links,
  body[data-page="about"] .topbar .socials {
    display: none;
  }

  body[data-page="about"] .topbar.nav-open .nav-links,
  body[data-page="about"] .topbar.nav-open .socials {
    display: flex;
  }

  body[data-page="about"] .about-launch-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  body[data-page="about"] .about-launch-visual {
    min-height: 520px;
  }

  body[data-page="about"] .about-launch-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 24px;
    text-align: center;
  }

  body[data-page="about"] .about-launch-footer .footer-socials {
    justify-content: center;
  }
}

@media (max-width: 700px) {
  body[data-page="about"] .about-launch-shell {
    width: min(100% - 18px, 520px);
    margin: 9px auto 18px;
    border-radius: 16px;
  }

  body[data-page="about"] .topbar .brand {
    font-size: 0.9rem;
    letter-spacing: 0.32em;
  }

  body[data-page="about"] .about-launch-copy {
    padding: 32px 22px;
  }

  body[data-page="about"] .about-launch-kicker {
    letter-spacing: 0.22em;
  }

  body[data-page="about"] .about-launch-copy h1 {
    max-width: 10.5ch;
    font-size: clamp(46px, 13vw, 64px);
  }

  body[data-page="about"] .about-launch-copy p {
    font-size: 16px;
  }

  body[data-page="about"] .about-launch-visual {
    min-height: 430px;
    background-position: center bottom;
  }

  body[data-page="about"] .about-footer-mark::before,
  body[data-page="about"] .about-footer-mark::after {
    width: 44px;
  }
}

/* Home mockup exact pass, 2026-06-16 */
body[data-page="home"] {
  --home-purple: #a875ff;
  --home-text: rgba(248, 248, 255, 0.96);
  --home-muted: rgba(226, 229, 244, 0.78);
  background:
    radial-gradient(circle at 2% 0%, rgba(134, 154, 210, 0.12), transparent 22rem),
    radial-gradient(circle at 96% 8%, rgba(156, 96, 255, 0.18), transparent 24rem),
    linear-gradient(180deg, #02050d 0%, #030611 56%, #010309 100%);
}

body[data-page="home"] .site-shell {
  width: min(1510px, calc(100% - 34px));
  margin: 18px auto 22px;
  border-color: rgba(185, 179, 225, 0.3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(153, 98, 255, 0.16), transparent 22rem),
    linear-gradient(180deg, rgba(7, 12, 24, 0.62), rgba(2, 5, 12, 0.88));
}

body[data-page="home"] .topbar {
  width: calc(100% - 14px);
  min-height: 72px;
  margin: 7px auto 0;
  padding: 0 18px 0 28px;
  grid-template-columns: minmax(240px, 292px) minmax(0, 1fr) auto;
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(151, 132, 214, 0.14), transparent 18rem),
    radial-gradient(circle at 92% 0%, rgba(168, 117, 255, 0.16), transparent 17rem),
    linear-gradient(180deg, rgba(24, 30, 51, 0.78), rgba(6, 10, 22, 0.84));
}

body[data-page="home"] .brand {
  font-size: 1.12rem;
  letter-spacing: 0.43em;
}

body[data-page="home"] .topbar .brand::after {
  bottom: -21px;
  width: 58px;
}

body[data-page="home"] .nav-links {
  gap: clamp(28px, 4vw, 66px);
  font-size: 0.78rem;
}

body[data-page="home"] .socials {
  gap: 14px;
  padding: 11px 16px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 0%, rgba(190, 194, 236, 0.12), transparent 80%),
    rgba(20, 25, 44, 0.72);
}

body[data-page="home"] .socials a {
  width: 42px;
  height: 42px;
  border-radius: 9px;
}

body[data-page="home"] .signal-home {
  gap: 16px;
}

body[data-page="home"] .signal-hero {
  min-height: 472px;
  padding: 58px 0 34px;
  background:
    linear-gradient(90deg, rgba(3, 7, 18, 0.08), rgba(3, 7, 18, 0.62) 43%, rgba(3, 7, 18, 0.18)),
    linear-gradient(180deg, rgba(2, 6, 14, 0), rgba(2, 6, 14, 0.86) 91%),
    radial-gradient(circle at 18% 31%, rgba(191, 203, 255, 0.24), transparent 16rem),
    radial-gradient(circle at 90% 14%, rgba(163, 112, 255, 0.2), transparent 18rem),
    url("assets/about-portrait.png") left 43% / 35% auto no-repeat,
    url("assets/hero-portrait.png") right 37% / 44% auto no-repeat,
    #030711;
}

body[data-page="home"] .signal-hero::before {
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0), rgba(3, 7, 18, 0.9) 94%),
    linear-gradient(90deg, rgba(181, 196, 255, 0.1), rgba(118, 77, 190, 0.04) 52%, rgba(154, 108, 255, 0.14));
  opacity: 1;
}

body[data-page="home"] .signal-hero .hero-copy {
  width: min(730px, calc(100% - 56px));
  padding: 32px 48px 38px;
  border-color: rgba(218, 214, 255, 0.58);
  border-radius: 15px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.15), transparent 15rem),
    radial-gradient(circle at 93% 0%, rgba(170, 119, 255, 0.12), transparent 16rem),
    linear-gradient(135deg, rgba(77, 86, 117, 0.5), rgba(10, 15, 30, 0.72));
}

body[data-page="home"] .signal-mark {
  width: 54px;
  height: 54px;
  margin-bottom: 26px;
}

body[data-page="home"] .signal-hero h1 {
  font-size: clamp(54px, 4.8vw, 78px);
  letter-spacing: 0.23em;
}

body[data-page="home"] .signal-hero .tagline {
  font-size: clamp(17px, 1.45vw, 22px);
  letter-spacing: 0.34em;
}

body[data-page="home"] .signal-role {
  margin-top: 22px;
  font-size: 0.76rem;
}

body[data-page="home"] .signal-hero .button {
  min-width: 280px;
  min-height: 58px;
  margin-top: 22px;
}

body[data-page="home"] .scroll-cue {
  bottom: -4px;
}

body[data-page="home"] .scroll-cue i {
  width: 28px;
  height: 42px;
}

body[data-page="home"] .signal-manifesto,
body[data-page="home"] .signal-transmission,
body[data-page="home"] .signal-timeline,
body[data-page="home"] .signal-community,
body[data-page="home"] .footer {
  width: min(1288px, calc(100% - 112px));
  border-color: rgba(198, 187, 255, 0.29);
  border-radius: 16px;
  background:
    radial-gradient(circle at 4% 0%, rgba(181, 139, 255, 0.15), transparent 18rem),
    radial-gradient(circle at 96% 2%, rgba(150, 98, 255, 0.1), transparent 22rem),
    linear-gradient(180deg, rgba(14, 22, 42, 0.74), rgba(6, 11, 25, 0.85));
}

body[data-page="home"] .signal-manifesto {
  grid-template-columns: minmax(420px, 0.86fr) minmax(430px, 1fr);
  gap: 48px;
  min-height: 320px;
  padding: 38px 46px;
}

body[data-page="home"] .manifesto-head h2,
body[data-page="home"] .manifesto-head strong {
  font-size: clamp(32px, 3vw, 48px);
  letter-spacing: 0.12em;
}

body[data-page="home"] .manifesto-card {
  min-height: 230px;
  padding: 40px 40px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(6, 10, 22, 0.94), rgba(6, 10, 22, 0.5) 55%, rgba(6, 10, 22, 0.08)),
    radial-gradient(circle at 92% 0%, rgba(175, 117, 255, 0.25), transparent 18rem),
    url("assets/about-portrait.png") right 40% / cover no-repeat;
}

body[data-page="home"] .signal-timeline {
  padding: 30px 48px 34px;
}

body[data-page="home"] .timeline-grid article {
  min-height: 116px;
}

body[data-page="home"] .signal-transmission {
  grid-template-columns: minmax(250px, 0.8fr) minmax(180px, 260px) minmax(280px, 0.9fr);
  min-height: 292px;
  padding: 38px 46px;
}

body[data-page="home"] .signal-transmission .cover {
  max-width: 240px;
}

body[data-page="home"] .signal-community {
  min-height: 255px;
  background:
    linear-gradient(90deg, rgba(6, 10, 22, 0.92), rgba(8, 12, 29, 0.55) 45%, rgba(52, 27, 96, 0.14)),
    radial-gradient(circle at 78% 20%, rgba(162, 93, 255, 0.32), transparent 19rem),
    url("assets/music-realm-bg.png") right 56% / cover no-repeat;
}

body[data-page="home"] .signal-community h2 {
  font-size: clamp(34px, 3.1vw, 52px);
}

body[data-page="home"] .footer {
  min-height: 82px;
  margin-bottom: 16px;
  padding: 18px 28px;
}

/* Home mockup final alignment, 2026-06-16 */
body[data-page="home"] {
  background:
    radial-gradient(circle at 7% 2%, rgba(157, 174, 230, 0.12), transparent 22rem),
    radial-gradient(circle at 92% 9%, rgba(154, 97, 255, 0.2), transparent 26rem),
    linear-gradient(180deg, #01040b 0%, #020511 45%, #01030a 100%);
}

body[data-page="home"] .site-shell {
  width: min(1438px, calc(100% - 34px));
  margin: 18px auto 20px;
  border-color: rgba(196, 188, 239, 0.32);
  border-radius: 18px;
  background:
    radial-gradient(circle at 98% 0%, rgba(151, 91, 255, 0.16), transparent 24rem),
    linear-gradient(180deg, rgba(7, 12, 25, 0.58), rgba(2, 5, 13, 0.91));
}

body[data-page="home"] .topbar {
  width: calc(100% - 12px);
  min-height: 68px;
  margin: 6px auto 0;
  padding: 0 16px 0 38px;
  grid-template-columns: minmax(225px, 272px) minmax(0, 1fr) auto;
  border-radius: 15px;
  background:
    radial-gradient(circle at 0% 0%, rgba(183, 174, 238, 0.12), transparent 18rem),
    radial-gradient(circle at 96% 0%, rgba(168, 118, 255, 0.18), transparent 18rem),
    linear-gradient(180deg, rgba(26, 32, 54, 0.74), rgba(4, 8, 20, 0.84));
  box-shadow: 0 18px 66px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

body[data-page="home"] .brand {
  font-size: 1.18rem;
  letter-spacing: 0.45em;
}

body[data-page="home"] .topbar .brand::after {
  bottom: -20px;
  width: 52px;
}

body[data-page="home"] .nav-links {
  gap: clamp(30px, 4.3vw, 70px);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

body[data-page="home"] .socials {
  gap: 12px;
  padding: 10px 14px;
  border-radius: 15px;
}

body[data-page="home"] .socials a {
  width: 40px;
  height: 40px;
  border-radius: 9px;
}

body[data-page="home"] .signal-home {
  gap: 14px;
}

body[data-page="home"] .signal-hero {
  min-height: 492px;
  padding: 40px 0 48px;
  background:
    linear-gradient(90deg, rgba(2, 5, 13, 0.2), rgba(2, 5, 13, 0.55) 37%, rgba(2, 5, 13, 0.16) 68%, rgba(2, 5, 13, 0.72)),
    linear-gradient(180deg, rgba(2, 5, 13, 0), rgba(2, 5, 13, 0.88) 92%),
    radial-gradient(circle at 14% 30%, rgba(203, 211, 255, 0.24), transparent 14rem),
    radial-gradient(circle at 88% 11%, rgba(169, 112, 255, 0.22), transparent 18rem),
    url("assets/about-portrait.png") left 35% / 35% auto no-repeat,
    url("assets/hero-portrait.png") right 35% / 42% auto no-repeat,
    #020611;
}

body[data-page="home"] .signal-hero::before {
  background:
    linear-gradient(180deg, rgba(2, 5, 13, 0), rgba(2, 5, 13, 0.95) 95%),
    radial-gradient(circle at 18% 38%, rgba(198, 210, 255, 0.1), transparent 18rem),
    radial-gradient(circle at 92% 7%, rgba(165, 108, 255, 0.14), transparent 18rem);
}

body[data-page="home"] .signal-hero .hero-copy {
  width: min(690px, calc(100% - 64px));
  padding: 28px 44px 34px;
  border-color: rgba(220, 216, 255, 0.58);
  border-radius: 14px;
  background:
    radial-gradient(circle at 19% 0%, rgba(255, 255, 255, 0.18), transparent 14rem),
    radial-gradient(circle at 95% 0%, rgba(173, 123, 255, 0.14), transparent 15rem),
    linear-gradient(135deg, rgba(77, 87, 121, 0.5), rgba(7, 12, 27, 0.74));
  box-shadow: 0 0 42px rgba(174, 130, 255, 0.18), 0 28px 94px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

body[data-page="home"] .signal-mark {
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  border-radius: 9px;
  font-size: 1.24rem;
}

body[data-page="home"] .signal-hero h1 {
  font-size: clamp(48px, 4.25vw, 66px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

body[data-page="home"] .signal-hero .tagline {
  margin-top: 18px;
  font-size: clamp(15px, 1.35vw, 19px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

body[data-page="home"] .signal-role {
  margin-top: 19px;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
}

body[data-page="home"] .signal-hero .button {
  min-width: 270px;
  min-height: 52px;
  margin-top: 20px;
  font-size: 0.76rem;
}

body[data-page="home"] .scroll-cue {
  bottom: 22px;
}

body[data-page="home"] .scroll-cue i {
  width: 26px;
  height: 38px;
}

body[data-page="home"] .signal-manifesto,
body[data-page="home"] .signal-transmission,
body[data-page="home"] .signal-timeline,
body[data-page="home"] .signal-community,
body[data-page="home"] .footer {
  width: min(1288px, calc(100% - 112px));
  border-radius: 15px;
}

body[data-page="home"] .signal-manifesto {
  grid-template-columns: minmax(420px, 0.88fr) minmax(430px, 1fr);
  gap: 48px;
  min-height: 304px;
  padding: 34px 44px;
}

body[data-page="home"] .manifesto-head h2,
body[data-page="home"] .manifesto-head strong {
  font-size: clamp(31px, 2.8vw, 44px);
  letter-spacing: 0.12em;
}

body[data-page="home"] .manifesto-head p:not(.section-label) {
  font-size: 0.82rem;
}

body[data-page="home"] .manifesto-card {
  min-height: 220px;
  padding: 36px 38px;
  border-radius: 10px;
}

body[data-page="home"] .signal-timeline {
  padding: 28px 46px 32px;
}

body[data-page="home"] .timeline-grid article {
  min-height: 110px;
}

body[data-page="home"] .signal-transmission {
  grid-template-columns: minmax(250px, 0.78fr) minmax(170px, 245px) minmax(280px, 0.9fr);
  min-height: 274px;
  padding: 34px 44px;
}

body[data-page="home"] .signal-transmission .cover {
  max-width: 220px;
}

body[data-page="home"] .signal-community {
  min-height: 238px;
  margin-bottom: 16px;
}

body[data-page="home"] .signal-community .about-copy {
  padding: 34px 44px;
}

body[data-page="home"] .signal-community h2 {
  font-size: clamp(31px, 2.85vw, 46px);
}

body[data-page="home"] .footer {
  min-height: 78px;
  padding: 16px 28px;
}

@media (max-width: 980px) {
  body[data-page="home"] .signal-hero {
    min-height: 540px;
    padding: 40px 0 54px;
  }

  body[data-page="home"] .signal-manifesto,
  body[data-page="home"] .signal-transmission,
  body[data-page="home"] .signal-timeline,
  body[data-page="home"] .signal-community,
  body[data-page="home"] .footer {
    width: min(calc(100% - 32px), 720px);
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .signal-hero {
    width: calc(100vw - 34px) !important;
    max-width: calc(100vw - 34px) !important;
    justify-self: center;
    min-height: 560px;
    padding: 32px 0 30px;
    background:
      linear-gradient(180deg, rgba(3, 7, 18, 0.18), rgba(3, 7, 18, 0.84)),
      url("assets/about-portrait.png") center top / auto 65% no-repeat,
      #030712;
  }

  body[data-page="home"] .signal-hero .hero-copy {
    width: calc(100vw - 62px) !important;
    max-width: calc(100vw - 62px) !important;
    padding: 26px 18px 28px;
  }

  body[data-page="home"] .signal-hero h1 {
    font-size: clamp(33px, 10vw, 46px);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }

  body[data-page="home"] .signal-hero .tagline {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }

  body[data-page="home"] .signal-manifesto,
  body[data-page="home"] .signal-transmission,
  body[data-page="home"] .signal-timeline,
  body[data-page="home"] .signal-community,
  body[data-page="home"] .footer {
    width: calc(100vw - 68px) !important;
    max-width: calc(100vw - 68px) !important;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    transform: none !important;
  }

  body[data-page="home"] .signal-manifesto,
  body[data-page="home"] .signal-transmission,
  body[data-page="home"] .signal-community,
  body[data-page="home"] .footer {
    grid-template-columns: 1fr !important;
    gap: 22px;
    padding: 28px 20px !important;
  }

  body[data-page="home"] .manifesto-head h2,
  body[data-page="home"] .manifesto-head strong,
  body[data-page="home"] .signal-community h2,
  body[data-page="home"] .signal-transmission h2 {
    display: block;
    max-width: 100%;
    font-size: clamp(24px, 8.6vw, 31px) !important;
    letter-spacing: 0.06em !important;
    line-height: 1.08;
    overflow-wrap: normal;
  }

  body[data-page="home"] .manifesto-head p:not(.section-label),
  body[data-page="home"] .signal-transmission .release-note,
  body[data-page="home"] .signal-community p {
    max-width: 100%;
    font-size: 0.78rem !important;
  }

  body[data-page="home"] .manifesto-card {
    min-height: 184px;
    width: 100%;
    padding: 26px 20px;
  }

  body[data-page="home"] .signal-transmission .cover {
    width: min(100%, 190px);
    justify-self: center;
  }

  body[data-page="home"] .signal-transmission .now-playing {
    width: 100%;
    min-width: 0;
  }

  body[data-page="home"] .signal-community .button,
  body[data-page="home"] .signal-transmission .button {
    width: 100%;
  }
}

/* Music mockup exact pass, 2026-06-16 */
body[data-page="music"] {
  --music-purple: #9b55ff;
  --music-purple-hot: #b575ff;
  --music-white: rgba(252, 250, 255, 0.96);
  --music-muted: rgba(230, 228, 240, 0.78);
  --music-stage: min(1936px, calc(100vw - 112px));
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 2%, rgba(121, 153, 215, 0.09), transparent 26rem),
    radial-gradient(circle at 87% 4%, rgba(138, 82, 255, 0.16), transparent 28rem),
    linear-gradient(180deg, #030711 0%, #02040a 100%);
}

body[data-page="music"] .music-launch-shell {
  position: relative;
  width: var(--music-stage);
  height: min(970px, calc(100dvh - 70px));
  min-height: 760px;
  margin: 34px auto;
  overflow: hidden;
  border: 1px solid rgba(205, 199, 237, 0.38);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(4, 8, 18, 0.98) 0%, rgba(4, 8, 18, 0.88) 28%, rgba(4, 8, 18, 0.2) 56%, rgba(4, 8, 18, 0.08) 100%),
    linear-gradient(180deg, rgba(4, 8, 18, 0.08), rgba(4, 8, 18, 0.82) 90%),
    url("assets/music-realm-bg.png") right center / auto 100% no-repeat,
    #030712;
  box-shadow: 0 28px 120px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-page="music"] .music-launch-shell::before {
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(3, 7, 17, 0.97) 0%, rgba(3, 7, 17, 0.76) 34%, rgba(3, 7, 17, 0.08) 62%, rgba(3, 7, 17, 0.02) 100%),
    url("assets/music-realm-bg.png") right center / auto 100% no-repeat;
  filter: saturate(1.04) contrast(1.08);
}

body[data-page="music"] .music-launch-shell::after {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 7, 17, 0.08) 0%, rgba(3, 7, 17, 0.04) 42%, rgba(3, 7, 17, 0.88) 100%),
    radial-gradient(circle at 76% 23%, rgba(230, 219, 255, 0.2), transparent 18rem),
    radial-gradient(circle at 52% 38%, rgba(151, 82, 255, 0.18), transparent 30rem),
    linear-gradient(90deg, rgba(3, 7, 17, 0.98) 0%, rgba(3, 7, 17, 0.76) 34%, rgba(3, 7, 17, 0.1) 66%, rgba(3, 7, 17, 0.34) 100%);
}

body[data-page="music"] .topbar {
  position: relative;
  top: auto;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(250px, 328px) minmax(0, 1fr) auto;
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 0 46px 0 54px;
  border: 0;
  border-bottom: 1px solid rgba(205, 199, 237, 0.18);
  border-radius: 0;
  background:
    radial-gradient(circle at 83% 0%, rgba(157, 101, 255, 0.13), transparent 22rem),
    linear-gradient(180deg, rgba(12, 17, 31, 0.78), rgba(5, 8, 18, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.2);
}

body[data-page="music"] .brand {
  color: var(--music-white);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.45em;
}

body[data-page="music"] .nav-links {
  gap: clamp(34px, 4.5vw, 82px);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

body[data-page="music"] .nav-links a {
  color: rgba(245, 244, 252, 0.82);
}

body[data-page="music"] .nav-links a[data-page-link="music"] {
  color: #fff;
}

body[data-page="music"] .nav-links a[data-page-link="music"]::after {
  bottom: -23px;
  width: 52px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--music-purple), transparent);
  box-shadow: 0 0 16px rgba(155, 85, 255, 0.9);
}

body[data-page="music"] .socials {
  gap: 20px;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-page="music"] .socials a {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(205, 199, 237, 0.24);
  border-radius: 8px;
  color: #fff;
  background: rgba(8, 12, 25, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="music"] .socials a:hover {
  border-color: rgba(155, 85, 255, 0.86);
  box-shadow: 0 0 26px rgba(155, 85, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-page="music"] .socials svg {
  width: 20px;
  height: 20px;
}

body[data-page="music"] .music-launch-page {
  display: block;
  min-height: 0;
  padding-top: 0 !important;
}

body[data-page="music"] .music-launch-hero {
  position: relative;
  display: grid;
  width: 100%;
  height: calc(100% - 88px);
  min-height: 0;
  margin: 0;
  padding: 20px 32px 106px;
  align-items: stretch;
}

body[data-page="music"] .music-launch-hero::before {
  position: absolute;
  inset: 0 50% 96px 0;
  content: "";
  pointer-events: none;
  border-right: 1px solid rgba(198, 175, 255, 0.28);
  background:
    radial-gradient(circle at 72% 50%, rgba(144, 73, 255, 0.18), transparent 24rem),
    linear-gradient(90deg, rgba(5, 9, 20, 0.2), rgba(5, 9, 20, 0.08));
}

body[data-page="music"] .music-launch-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(888px, 51.6%);
  min-height: 0;
  margin: 0;
  padding: 48px 58px 56px;
  border: 1px solid rgba(170, 115, 255, 0.58);
  border-radius: 16px 16px 0 0;
  background:
    radial-gradient(circle at 92% 38%, rgba(151, 82, 255, 0.16), transparent 20rem),
    radial-gradient(circle at 7% 8%, rgba(255, 255, 255, 0.1), transparent 16rem),
    linear-gradient(135deg, rgba(25, 31, 52, 0.58), rgba(4, 8, 18, 0.58));
  box-shadow: 0 0 42px rgba(155, 85, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(14px) saturate(1.12);
}

body[data-page="music"] .music-launch-kicker {
  gap: 17px;
  width: auto;
  margin: 0 0 28px;
  color: var(--music-purple);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.34em;
}

body[data-page="music"] .music-launch-kicker::before {
  width: 10px;
  height: 10px;
  content: "";
  border-radius: 999px;
  background: var(--music-purple);
  box-shadow: 0 0 18px rgba(155, 85, 255, 0.86);
}

body[data-page="music"] .music-launch-kicker i {
  display: none;
}

body[data-page="music"] .music-launch-copy h1 {
  max-width: 540px;
  margin: 0 0 28px;
  background: linear-gradient(180deg, #fff 0%, #f6efff 32%, #c8b3ff 56%, #7f39f0 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(86px, 6.2vw, 126px);
  letter-spacing: 0.02em;
  line-height: 0.9;
  text-shadow: 0 28px 80px rgba(115, 49, 255, 0.38);
}

body[data-page="music"] .music-launch-rule {
  display: block;
  width: 230px;
  height: 26px;
  margin: 0 0 28px;
  color: var(--music-purple);
  background:
    linear-gradient(90deg, transparent, rgba(155, 85, 255, 0.74), transparent) center / 100% 1px no-repeat;
}

body[data-page="music"] .music-launch-rule span {
  display: none;
}

body[data-page="music"] .music-launch-rule b {
  width: 160px;
  height: 26px;
  gap: 3px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="music"] .music-launch-rule b i {
  width: 3px;
  background: var(--music-purple);
}

body[data-page="music"] .music-launch-copy p {
  max-width: 470px;
  margin: 0 0 28px;
  color: var(--music-muted);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(17px, 1.16vw, 21px);
  line-height: 1.45;
}

body[data-page="music"] .music-launch-copy p strong {
  color: var(--music-purple-hot);
  font-weight: 900;
}

body[data-page="music"] .music-status-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.38fr);
  gap: 0;
  width: min(760px, 100%);
  margin: 0 0 32px;
  padding: 20px 26px;
  border: 1px solid rgba(205, 199, 237, 0.22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 5% 0%, rgba(155, 85, 255, 0.18), transparent 16rem),
    rgba(18, 22, 40, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

body[data-page="music"] .music-status-list span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  min-width: 0;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

body[data-page="music"] .music-status-list span + span {
  padding-left: 25px;
  border-left: 1px solid rgba(205, 199, 237, 0.25);
}

body[data-page="music"] .music-status-list em {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-style: normal;
}

body[data-page="music"] .music-status-list strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="music"] .music-status-list small {
  color: rgba(230, 228, 240, 0.74);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="music"] .music-status-list svg {
  width: 30px;
  height: 30px;
  color: var(--music-purple);
  stroke-width: 1.7;
}

body[data-page="music"] .music-launch-actions {
  gap: 22px;
}

body[data-page="music"] .music-launch-actions .button {
  min-width: 280px;
  min-height: 64px;
  border-radius: 8px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

body[data-page="music"] .music-launch-actions .button.primary {
  border-color: rgba(155, 85, 255, 0.92);
  background:
    radial-gradient(circle at 28% 0%, rgba(155, 85, 255, 0.6), transparent 66%),
    linear-gradient(180deg, rgba(82, 38, 151, 0.84), rgba(55, 20, 103, 0.82));
  box-shadow: 0 0 34px rgba(155, 85, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-page="music"] .music-launch-actions .button.secondary {
  background: rgba(8, 12, 25, 0.48);
}

body[data-page="music"] .music-launch-actions svg {
  width: 24px;
  height: 24px;
}

body[data-page="music"] .music-launch-footer {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: auto;
  min-height: 94px;
  margin: 0;
  padding: 18px 44px 18px 52px;
  transform: none;
  border: 1px solid rgba(205, 199, 237, 0.22);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background:
    radial-gradient(circle at 96% 0%, rgba(155, 85, 255, 0.14), transparent 20rem),
    linear-gradient(180deg, rgba(18, 23, 41, 0.78), rgba(8, 12, 24, 0.8));
  box-shadow: 0 -20px 68px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.15);
  text-shadow: none;
}

body[data-page="music"] .music-launch-footer .footer-brand {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  align-items: center;
  gap: 38px;
}

body[data-page="music"] .music-launch-footer .footer-brand span {
  color: var(--music-purple-hot);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.36em;
}

body[data-page="music"] .music-launch-footer .footer-brand::after {
  width: 1px;
  height: 42px;
  content: "";
  grid-column: 2;
  grid-row: 1;
  background: rgba(205, 199, 237, 0.28);
}

body[data-page="music"] .music-launch-footer .footer-brand small {
  grid-column: 3;
  max-width: 390px;
  color: rgba(244, 242, 252, 0.86);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
}

body[data-page="music"] .music-launch-footer .footer-socials {
  display: flex;
  justify-content: end;
  gap: 18px;
}

body[data-page="music"] .music-launch-footer .footer-socials a {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  color: #fff;
  background: rgba(8, 12, 25, 0.52);
}

body[data-page="music"] .music-launch-footer .footer-socials svg {
  width: 19px;
  height: 19px;
}

@media (max-width: 1180px) {
  body[data-page="music"] {
    --music-stage: min(100vw - 36px, 1020px);
  }

  body[data-page="music"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 72px;
    padding: 10px 16px 10px 26px;
  }

  body[data-page="music"] .nav-links,
  body[data-page="music"] .socials {
    display: none;
  }

  body[data-page="music"] .topbar.nav-open .nav-links,
  body[data-page="music"] .topbar.nav-open .socials {
    display: flex;
  }

  body[data-page="music"] .music-launch-shell {
    height: auto;
    min-height: auto;
    margin: 18px auto;
  }

  body[data-page="music"] .music-launch-hero {
    min-height: auto;
    padding: 22px 20px 24px;
  }

  body[data-page="music"] .music-launch-copy {
    width: 100%;
    min-height: 680px;
  }

  body[data-page="music"] .music-launch-footer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 20px 20px;
    padding: 24px;
    border: 1px solid rgba(205, 199, 237, 0.22);
    border-radius: 14px;
  }
}

@media (max-width: 680px) {
  body[data-page="music"] {
    --music-stage: min(100vw - 24px, 520px);
  }

  body[data-page="music"] .music-launch-shell {
    border-radius: 16px;
  }

  body[data-page="music"] .music-launch-copy {
    min-height: auto;
    padding: 34px 22px;
    border-radius: 14px;
  }

  body[data-page="music"] .music-launch-copy h1 {
    font-size: clamp(62px, 18vw, 86px);
  }

  body[data-page="music"] .music-status-list {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  body[data-page="music"] .music-status-list span + span {
    padding: 18px 0 0;
    border-top: 1px solid rgba(205, 199, 237, 0.22);
    border-left: 0;
  }

  body[data-page="music"] .music-launch-actions {
    display: grid;
  }

  body[data-page="music"] .music-launch-actions .button {
    width: 100%;
    min-width: 0;
  }

  body[data-page="music"] .music-launch-footer .footer-brand {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-page="music"] .music-launch-footer .footer-brand::after {
    display: none;
  }

  body[data-page="music"] .music-launch-footer .footer-brand small {
    grid-column: auto;
  }

  body[data-page="music"] .music-launch-footer .footer-socials {
    justify-content: start;
    gap: 8px;
  }

  body[data-page="music"] .music-launch-footer .footer-socials a {
    width: 42px;
    height: 42px;
  }
}

/* Reality Unveiled full Netflix treatment, 2026-06-16 */
body[data-page="videos"] {
  --reality-bg: #040506;
  --reality-red: #e50914;
  --reality-red-deep: #9b050b;
  --reality-gold: #f0ca69;
  --reality-text: #f7f7f7;
  --reality-muted: rgba(245, 245, 245, 0.7);
  --reality-soft: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(5, 6, 9, 0.38) 0, rgba(5, 6, 9, 0.9) 620px, #040506 900px),
    #040506;
  color: var(--reality-text);
  overflow-x: hidden;
}

body[data-page="videos"] .site-shell {
  width: 100%;
  max-width: none;
  padding: 0;
}

body[data-page="videos"] .topbar {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  min-height: 70px;
  margin: 0;
  padding: 0 clamp(18px, 4vw, 58px);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.48) 74%, rgba(0, 0, 0, 0));
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

body[data-page="videos"] .topbar .brand {
  color: rgba(248, 249, 255, 0.94);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0.43em;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.1);
}

body[data-page="videos"] .topbar .nav-links a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

body[data-page="videos"] .topbar .nav-links a:hover,
body[data-page="videos"] .topbar .nav-links a.active {
  color: #fff;
}

body[data-page="videos"] .topbar .nav-links a.active::after {
  bottom: -20px;
  height: 2px;
  background: var(--reality-red);
  box-shadow: 0 0 18px rgba(229, 9, 20, 0.72);
}

body[data-page="videos"] .topbar .socials a {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
}

body[data-page="videos"] .topbar .socials a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

body[data-page="videos"] .video-soon-page,
body[data-page="videos"] .footer {
  width: 100%;
  margin: 0;
}

body[data-page="videos"] .video-soon-page {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

body[data-page="videos"] .library-controlbar {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 35;
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  gap: 18px;
  min-height: 58px;
  padding: 0 clamp(18px, 4vw, 58px) 10px;
  border: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
  pointer-events: none;
}

body[data-page="videos"] .library-search,
body[data-page="videos"] .library-toolbar {
  pointer-events: auto;
}

body[data-page="videos"] .library-search {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.56);
  box-shadow: none;
}

body[data-page="videos"] .library-search svg {
  width: 19px;
  height: 19px;
  color: rgba(255, 255, 255, 0.7);
}

body[data-page="videos"] .library-search input {
  color: #fff;
  font-size: 0.92rem;
}

body[data-page="videos"] .library-search input::placeholder {
  color: rgba(255, 255, 255, 0.54);
}

body[data-page="videos"] .library-toolbar {
  justify-content: end;
  gap: 8px;
  overflow-x: auto;
}

body[data-page="videos"] .library-filter {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body[data-page="videos"] .library-filter.active,
body[data-page="videos"] .library-filter:hover {
  color: #fff;
  background: var(--reality-red);
  box-shadow: none;
}

body[data-page="videos"] .exodus-playlist-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 42px);
  padding: 0 0 clamp(42px, 6vw, 86px);
  border: 0;
  background: transparent;
}

body[data-page="videos"] .youtube-feature-panel {
  order: 1;
  width: 100%;
  min-height: clamp(580px, 78vh, 860px);
}

body[data-page="videos"] .youtube-feature-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(580px, 78vh, 860px);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #050505;
  box-shadow: none;
  text-align: left;
  transform: none;
}

body[data-page="videos"] .youtube-feature-card:hover,
body[data-page="videos"] .youtube-feature-card:focus-visible {
  transform: none;
  background: #050505;
}

body[data-page="videos"] .youtube-feature-art {
  position: absolute;
  inset: 0;
  min-height: 0;
  background:
    linear-gradient(90deg, rgba(4, 5, 6, 0.96) 0%, rgba(4, 5, 6, 0.72) 28%, rgba(4, 5, 6, 0.18) 62%, rgba(4, 5, 6, 0.66) 100%),
    linear-gradient(180deg, rgba(4, 5, 6, 0.08) 0%, rgba(4, 5, 6, 0.16) 44%, #040506 100%),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .youtube-feature-art::after {
  background:
    linear-gradient(180deg, rgba(4, 5, 6, 0) 52%, #040506 100%),
    radial-gradient(circle at 82% 20%, rgba(229, 9, 20, 0.1), transparent 22rem);
}

body[data-page="videos"] .youtube-feature-art::before {
  display: none;
}

body[data-page="videos"] .youtube-feature-art .play-badge {
  display: none;
}

body[data-page="videos"] .youtube-feature-copy {
  position: absolute;
  left: clamp(18px, 4vw, 58px);
  bottom: clamp(92px, 14vh, 158px);
  z-index: 2;
  display: grid;
  width: min(620px, calc(100% - 36px));
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-page="videos"] .youtube-feature-copy small,
body[data-page="videos"] .youtube-feed-card small {
  color: var(--reality-gold);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="videos"] .youtube-feature-copy small::before {
  content: "PRAUSPER PRESENTS / ";
}

body[data-page="videos"] .youtube-feature-copy strong {
  max-width: 10ch;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(48px, 7.6vw, 112px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.88;
  text-transform: uppercase;
  text-shadow: 0 9px 34px rgba(0, 0, 0, 0.7);
}

body[data-page="videos"] .youtube-feature-copy > span {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.42;
}

body[data-page="videos"] .youtube-feature-copy em,
body[data-page="videos"] .video-browse-archive {
  display: inline-flex;
  width: fit-content;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--reality-red);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

body[data-page="videos"] .youtube-feature-copy em::before,
body[data-page="videos"] .youtube-feed-card .tile-open::before {
  width: auto;
  height: auto;
  border: 0;
  color: #fff;
  content: "▶";
  font-size: 0.72rem;
}

body[data-page="videos"] .youtube-feed-copy {
  position: absolute;
  right: clamp(18px, 4vw, 58px);
  top: calc(clamp(580px, 78vh, 860px) - 128px);
  bottom: auto;
  z-index: 3;
  display: block;
  min-height: 0;
  padding: 0;
}

body[data-page="videos"] .youtube-feed-copy h2,
body[data-page="videos"] .youtube-feed-copy p,
body[data-page="videos"] .youtube-feed-copy .section-label {
  display: none;
}

body[data-page="videos"] .video-browse-archive {
  background: rgba(109, 109, 110, 0.78);
  cursor: pointer;
}

body[data-page="videos"] .video-browse-archive:hover {
  background: rgba(109, 109, 110, 0.96);
}

body[data-page="videos"] .video-browse-archive svg {
  width: 20px;
  height: 20px;
  margin: 0;
}

body[data-page="videos"] .video-browse-archive::after {
  display: none;
}

body[data-page="videos"] .youtube-feed-grid {
  order: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 54px);
  margin-top: clamp(-92px, -7vw, -54px);
  padding: 0 clamp(18px, 4vw, 58px);
  z-index: 5;
}

body[data-page="videos"] .video-main-row {
  gap: 12px;
}

body[data-page="videos"] .video-main-row-head h3 {
  color: #fff;
  font-size: clamp(1.24rem, 2vw, 1.9rem);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="videos"] .video-main-row-head span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
}

body[data-page="videos"] .video-main-track {
  grid-auto-columns: clamp(240px, 22vw, 360px);
  gap: 8px;
  overflow-y: visible;
  padding: 6px 0 28px;
  scrollbar-color: rgba(255, 255, 255, 0.36) rgba(255, 255, 255, 0.08);
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar,
body[data-page="videos"] .video-catalog-track::-webkit-scrollbar,
body[data-page="videos"] .library-toolbar::-webkit-scrollbar {
  height: 6px;
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar-track,
body[data-page="videos"] .video-catalog-track::-webkit-scrollbar-track,
body[data-page="videos"] .library-toolbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar-thumb,
body[data-page="videos"] .video-catalog-track::-webkit-scrollbar-thumb,
body[data-page="videos"] .library-toolbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.44);
}

body[data-page="videos"] .youtube-feed-card {
  border: 0;
  border-radius: 4px;
  overflow: visible;
  background: #141414;
  box-shadow: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

body[data-page="videos"] .youtube-feed-card:hover,
body[data-page="videos"] .youtube-feed-card:focus-within {
  z-index: 8;
  background: #181818;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
  transform: translateY(-6px) scale(1.035);
}

body[data-page="videos"] .youtube-feed-thumb {
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18)),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .youtube-feed-thumb::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.34));
}

body[data-page="videos"] .youtube-feed-thumb .play-badge {
  left: 14px;
  top: auto;
  bottom: 12px;
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  color: #fff;
  background: rgba(0, 0, 0, 0.36);
  transform: none;
}

body[data-page="videos"] .youtube-feed-card div {
  min-height: 154px;
  gap: 8px;
  padding: 14px 14px 16px;
  background: #141414;
}

body[data-page="videos"] .youtube-feed-card h3 {
  color: #fff;
  font-size: clamp(1rem, 1.35vw, 1.32rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.08;
}

body[data-page="videos"] .youtube-feed-card p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.35;
}

body[data-page="videos"] .youtube-feed-card .tile-open {
  min-height: 34px;
  margin-top: auto;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
}

body[data-page="videos"] .youtube-feed-card .tile-open:hover {
  border-color: var(--reality-red);
  background: var(--reality-red);
}

body[data-page="videos"] .video-catalog-panel {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(980px, 100vw);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(4, 5, 6, 0.99)),
    #141414;
  box-shadow: -34px 0 80px rgba(0, 0, 0, 0.62);
}

body[data-page="videos"] .video-catalog-head button,
body[data-page="videos"] .video-catalog-search,
body[data-page="videos"] .video-catalog-card {
  border-radius: 4px;
}

body[data-page="videos"] .footer {
  grid-template-columns: minmax(240px, 1fr) auto minmax(220px, 0.8fr);
  padding: 32px clamp(18px, 4vw, 58px);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: #040506;
}

body[data-page="videos"] .footer-brand span {
  color: rgba(255, 255, 255, 0.86);
}

body[data-page="videos"] .footer-socials {
  min-width: 0;
  padding: 0;
  border: 0;
}

body[data-page="videos"] .footer-socials a {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 980px) {
  body[data-page="videos"] .library-controlbar {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    padding: 8px 18px 18px;
    background: #040506;
  }

  body[data-page="videos"] .library-toolbar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
  }

  body[data-page="videos"] .library-filter {
    flex: 0 0 auto;
  }

  body[data-page="videos"] .youtube-feature-panel,
  body[data-page="videos"] .youtube-feature-card {
    min-height: 620px;
  }

  body[data-page="videos"] .youtube-feature-copy {
    bottom: 100px;
  }

  body[data-page="videos"] .youtube-feed-copy {
    left: 18px;
    right: auto;
    top: 486px;
    bottom: auto;
  }

  body[data-page="videos"] .youtube-feed-grid {
    margin-top: -34px;
  }

  body[data-page="videos"] .footer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body[data-page="videos"] .topbar {
    padding: 0 14px;
  }

  body[data-page="videos"] .youtube-feature-panel,
  body[data-page="videos"] .youtube-feature-card {
    min-height: 560px;
  }

  body[data-page="videos"] .youtube-feature-art {
    background:
      linear-gradient(180deg, rgba(4, 5, 6, 0.08) 0%, rgba(4, 5, 6, 0.58) 44%, #040506 100%),
      var(--card-image) center top / cover no-repeat;
  }

  body[data-page="videos"] .youtube-feature-copy {
    left: 16px;
    right: 16px;
    bottom: 134px;
    width: auto;
  }

  body[data-page="videos"] .youtube-feed-copy {
    left: 16px;
    top: 476px;
  }

  body[data-page="videos"] .youtube-feature-copy strong {
    max-width: 9ch;
    font-size: clamp(42px, 15vw, 74px);
  }

  body[data-page="videos"] .youtube-feature-copy > span {
    font-size: 0.98rem;
  }

  body[data-page="videos"] .youtube-feed-grid {
    padding: 0 16px 44px;
  }

  body[data-page="videos"] .video-main-track {
    grid-auto-columns: minmax(230px, 78vw);
  }

  body[data-page="videos"] .video-catalog-panel {
    inset: 0;
    width: 100vw;
    max-height: none;
  }
}

/* Exodus Project image lightbox, 2026-06-16 */
body[data-page="library"] .exodus-publish-body img,
body[data-page="library"] .article-modal .blog-article-body img {
  cursor: zoom-in;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-page="library"] .exodus-publish-body img:hover,
body[data-page="library"] .article-modal .blog-article-body img:hover,
body[data-page="library"] .exodus-publish-body img:focus-visible,
body[data-page="library"] .article-modal .blog-article-body img:focus-visible {
  border-color: rgba(229, 219, 188, 0.58);
  box-shadow: 0 0 0 1px rgba(169, 147, 255, 0.42), 0 18px 48px rgba(0, 0, 0, 0.34);
  transform: translateY(-1px);
}

body[data-page="library"] .exodus-image-lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 3vw, 40px);
  border: 0;
  background: rgba(2, 3, 8, 0.84);
  color: #f7f1ff;
}

body[data-page="library"] .exodus-image-lightbox::backdrop {
  background:
    radial-gradient(circle at 50% 15%, rgba(169, 147, 255, 0.18), transparent 24rem),
    rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
}

body[data-page="library"] .exodus-image-lightbox[open] {
  display: grid;
  place-items: center;
}

body[data-page="library"] .exodus-image-lightbox figure {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  width: min(94vw, 1500px);
  max-width: 94vw;
  max-height: calc(100dvh - 80px);
  margin: 0;
  place-items: center;
}

body[data-page="library"] .exodus-image-lightbox img {
  display: block;
  width: min(94vw, 1500px);
  height: auto;
  max-height: calc(100dvh - 150px);
  border: 1px solid rgba(229, 219, 188, 0.26);
  border-radius: 10px;
  object-fit: contain;
  background: #020308;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.64), 0 0 0 1px rgba(169, 147, 255, 0.18);
}

body[data-page="library"] .exodus-image-lightbox figcaption {
  max-width: min(900px, calc(100vw - 44px));
  color: rgba(247, 241, 255, 0.76);
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: center;
}

body[data-page="library"] .exodus-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(229, 219, 188, 0.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 10, 23, 0.76);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

body[data-page="library"] .exodus-lightbox-close:hover,
body[data-page="library"] .exodus-lightbox-close:focus-visible {
  border-color: rgba(229, 219, 188, 0.58);
  background: rgba(169, 147, 255, 0.28);
}

@media (max-width: 640px) {
  body[data-page="library"] .exodus-image-lightbox {
    padding: 12px;
  }

  body[data-page="library"] .exodus-image-lightbox img {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 92px);
    border-radius: 7px;
  }

  body[data-page="library"] .exodus-lightbox-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
}

/* Contact page mockup match, 2026-06-16 */
body[data-page="contact"] {
  --contact-bg: #02040a;
  --contact-panel: rgba(12, 15, 29, 0.66);
  --contact-panel-strong: rgba(16, 18, 34, 0.76);
  --contact-line: rgba(174, 145, 255, 0.34);
  --contact-line-soft: rgba(204, 206, 231, 0.14);
  --contact-purple: #b276ff;
  --contact-purple-bright: #cf9dff;
  --contact-text: rgba(249, 248, 255, 0.94);
  --contact-muted: rgba(222, 220, 235, 0.66);
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(2, 4, 10, 0.38), rgba(2, 4, 10, 0.88) 76%, #02040a),
    radial-gradient(circle at 48% 10%, rgba(188, 176, 255, 0.15), transparent 22rem),
    radial-gradient(circle at 78% 20%, rgba(122, 88, 212, 0.11), transparent 30rem),
    url("assets/about-remnant-bg.png") center top / cover no-repeat fixed,
    #02040a;
  color: var(--contact-text);
}

html:has(body[data-page="contact"]) {
  overflow-x: hidden;
}

body[data-page="contact"]::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.32;
  mask-image: radial-gradient(circle at 50% 32%, black, transparent 72%);
  pointer-events: none;
  content: "";
}

body[data-page="contact"] .site-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 10px 10px 8px;
}

body[data-page="contact"] .topbar {
  position: relative;
  top: 0;
  left: auto;
  width: 100%;
  min-height: 84px;
  margin: 0;
  padding: 0 34px;
  border: 1px solid var(--contact-line);
  border-radius: 14px 14px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(6, 8, 18, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 34px rgba(178, 118, 255, 0.12);
  backdrop-filter: blur(18px) saturate(1.2);
  transform: none;
}

body[data-page="contact"] .brand {
  color: #f7f4ff;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.58em;
}

body[data-page="contact"] .nav-links {
  gap: clamp(34px, 4vw, 66px);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 13px;
  letter-spacing: 0.15em;
}

body[data-page="contact"] .nav-links a {
  color: rgba(248, 246, 255, 0.78);
  font-weight: 600;
}

body[data-page="contact"] .nav-links a.active,
body[data-page="contact"] .nav-links a:hover {
  color: #e4c4ff;
}

body[data-page="contact"] .nav-links a.active::after {
  bottom: -23px;
  width: 42px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--contact-purple-bright), transparent);
  box-shadow: 0 0 16px rgba(178, 118, 255, 0.9);
}

body[data-page="contact"] .socials {
  gap: 14px;
}

body[data-page="contact"] .socials a,
body[data-page="contact"] .footer-socials a {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(190, 177, 232, 0.34);
  border-radius: 10px;
  color: rgba(250, 248, 255, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.018)),
    rgba(12, 15, 30, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.26);
}

body[data-page="contact"] .socials svg,
body[data-page="contact"] .footer-socials svg {
  width: 22px;
  height: 22px;
}

body[data-page="contact"] .subpage {
  padding: 40px 62px 48px;
  border-right: 1px solid rgba(174, 145, 255, 0.14);
  border-left: 1px solid rgba(174, 145, 255, 0.14);
  background:
    radial-gradient(circle at 44% 0%, rgba(255, 255, 255, 0.1), transparent 18rem),
    linear-gradient(180deg, rgba(7, 9, 18, 0.24), rgba(2, 4, 10, 0.86));
}

body[data-page="contact"] .topbar + main.subpage {
  padding: 40px 62px 48px;
}

body[data-page="contact"] .contact-layout {
  display: grid;
  grid-template-columns: minmax(560px, 0.88fr) minmax(650px, 1.08fr);
  gap: 36px;
  min-height: 720px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="contact"] .contact-copy,
body[data-page="contact"] .contact-form {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--contact-line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.028)),
    var(--contact-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(205, 164, 255, 0.18),
    0 26px 72px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(174, 145, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.16);
}

body[data-page="contact"] .contact-copy {
  display: grid;
  align-content: start;
  padding: 55px 48px 48px;
  background:
    linear-gradient(180deg, rgba(12, 15, 29, 0.5), rgba(9, 12, 24, 0.62)),
    radial-gradient(circle at 52% 2%, rgba(255, 255, 255, 0.16), transparent 12rem),
    radial-gradient(circle at 72% 40%, rgba(141, 102, 218, 0.18), transparent 14rem),
    linear-gradient(180deg, transparent 0 45%, rgba(3, 5, 11, 0.18) 57%, rgba(3, 5, 11, 0.82) 100%);
}

body[data-page="contact"] .contact-copy::before,
body[data-page="contact"] .contact-form::before,
body[data-page="contact"] .footer::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 28%),
    radial-gradient(circle at 95% 100%, rgba(178, 118, 255, 0.22), transparent 16rem);
  opacity: 0.7;
  pointer-events: none;
  content: "";
}

body[data-page="contact"] .contact-copy::after {
  position: absolute;
  inset: 52% 12% 0;
  background: url("assets/about-remnant-bg.png") center bottom / contain no-repeat;
  opacity: 0.72;
  mask-image: radial-gradient(ellipse at 50% 76%, black 0 42%, rgba(0, 0, 0, 0.68) 54%, transparent 78%);
  pointer-events: none;
  content: "";
}

body[data-page="contact"] .contact-copy > *,
body[data-page="contact"] .contact-form > *,
body[data-page="contact"] .footer > * {
  position: relative;
  z-index: 1;
}

body[data-page="contact"] .contact-copy .section-label {
  margin: 0 0 20px;
  color: var(--contact-purple);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body[data-page="contact"] .contact-copy h1 {
  max-width: 560px;
  margin: 0;
  color: #fbfbff;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: clamp(60px, 5.1vw, 76px);
  font-weight: 300;
  letter-spacing: 0.16em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.18), 0 22px 70px rgba(0, 0, 0, 0.6);
}

body[data-page="contact"] .contact-copy h1::after {
  display: block;
  width: 188px;
  height: 2px;
  margin: 24px 0 26px;
  background:
    radial-gradient(circle at 100%, #f0caff 0 3px, transparent 4px),
    linear-gradient(90deg, var(--contact-purple), rgba(178, 118, 255, 0.58), transparent);
  box-shadow: 0 0 18px rgba(178, 118, 255, 0.68);
  content: "";
}

body[data-page="contact"] .contact-copy p:not(.section-label) {
  max-width: 430px;
  margin: 0 0 36px;
  color: var(--contact-muted);
  font-size: clamp(17px, 1.34vw, 21px);
  line-height: 1.72;
}

body[data-page="contact"] .contact-copy .text-link {
  display: inline-grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  justify-self: start;
  gap: 16px;
  width: min(100%, 430px);
  min-height: 62px;
  padding: 0 20px;
  border: 1px solid rgba(178, 118, 255, 0.34);
  border-radius: 8px;
  color: #f5efff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.018)),
    rgba(22, 18, 43, 0.66);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 28px rgba(178, 118, 255, 0.12);
}

body[data-page="contact"] .contact-copy .text-link span {
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="contact"] .contact-copy .text-link svg,
body[data-page="contact"] .field-shell svg,
body[data-page="contact"] .contact-form .button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--contact-purple-bright);
}

body[data-page="contact"] .contact-form {
  display: grid;
  align-content: start;
  gap: 30px;
  padding: 40px 48px 38px;
}

body[data-page="contact"] .contact-form label {
  display: grid;
  gap: 11px;
  color: #f5f2ff;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

body[data-page="contact"] .field-shell {
  position: relative;
  display: grid;
  align-items: center;
}

body[data-page="contact"] .field-shell svg {
  position: absolute;
  right: 24px;
  pointer-events: none;
}

body[data-page="contact"] .contact-form input,
body[data-page="contact"] .contact-form select,
body[data-page="contact"] .contact-form textarea {
  width: 100%;
  min-height: 60px;
  padding: 0 64px 0 24px;
  border: 1px solid rgba(195, 198, 225, 0.18);
  border-radius: 8px;
  color: #f7f5ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(12, 15, 28, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(178, 118, 255, 0.035);
  font: 500 18px/1.3 Inter, "Helvetica Neue", Arial, sans-serif;
  outline: none;
  appearance: none;
}

body[data-page="contact"] .contact-form textarea {
  min-height: 144px;
  padding: 22px 24px;
  resize: vertical;
}

body[data-page="contact"] .contact-form input::placeholder,
body[data-page="contact"] .contact-form textarea::placeholder {
  color: rgba(222, 220, 235, 0.58);
}

body[data-page="contact"] .contact-form input:focus,
body[data-page="contact"] .contact-form select:focus,
body[data-page="contact"] .contact-form textarea:focus {
  border-color: rgba(178, 118, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(178, 118, 255, 0.34), 0 0 28px rgba(178, 118, 255, 0.16);
}

body[data-page="contact"] .contact-form .button {
  display: inline-flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: -2px;
  border: 1px solid rgba(178, 118, 255, 0.52);
  border-radius: 9px;
  color: #f9f5ff;
  background:
    radial-gradient(circle at 35% 0%, rgba(178, 118, 255, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.014)),
    rgba(26, 21, 48, 0.74);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 28px rgba(178, 118, 255, 0.22);
}

body[data-page="contact"] .contact-form .button:hover {
  border-color: rgba(207, 157, 255, 0.8);
  background:
    radial-gradient(circle at 35% 0%, rgba(178, 118, 255, 0.34), transparent 70%),
    rgba(34, 26, 60, 0.84);
}

body[data-page="contact"] .form-status {
  min-height: 20px;
  margin: -10px 0 0;
  color: var(--contact-purple-bright);
  font-size: 0.88rem;
}

body[data-page="contact"] .footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(280px, auto) minmax(330px, 0.8fr);
  gap: 32px;
  align-items: center;
  margin: 0 26px 0;
  padding: 27px 44px;
  border: 1px solid var(--contact-line);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.016)),
    rgba(8, 11, 23, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 36px rgba(178, 118, 255, 0.12);
  backdrop-filter: blur(18px) saturate(1.14);
}

body[data-page="contact"] .footer-brand {
  display: grid;
  gap: 18px;
}

body[data-page="contact"] .footer-brand span {
  color: #f7f4ff;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 17px;
  letter-spacing: 0.66em;
}

body[data-page="contact"] .footer-brand small {
  max-width: 270px;
  color: rgba(222, 220, 235, 0.7);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.5;
}

body[data-page="contact"] .footer-socials {
  justify-self: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="contact"] .footer address {
  justify-self: end;
  color: rgba(249, 248, 255, 0.9);
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  font-style: normal;
  text-align: right;
  text-transform: uppercase;
}

body[data-page="contact"] .footer address strong {
  display: block;
  margin-bottom: 18px;
  color: var(--contact-purple-bright);
  font-size: 17px;
  letter-spacing: 0.17em;
}

body[data-page="contact"] .footer address a {
  color: #f8f5ff;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-decoration: none;
}

@media (max-width: 1180px) {
  body[data-page="contact"] .contact-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  body[data-page="contact"] .footer {
    grid-template-columns: 1fr;
  }

  body[data-page="contact"] .footer-socials,
  body[data-page="contact"] .footer address {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 760px) {
  body[data-page="contact"] .site-shell {
    padding: 0;
  }

  body[data-page="contact"] .topbar {
    border-radius: 0;
  }

  body[data-page="contact"] .subpage {
    padding: 26px 16px 34px;
  }

  body[data-page="contact"] .topbar + main.subpage {
    padding: 26px 16px 34px;
  }

  body[data-page="contact"] .contact-copy,
  body[data-page="contact"] .contact-form {
    padding: 34px 24px;
  }

  body[data-page="contact"] .contact-copy h1 {
    font-size: clamp(42px, 12vw, 62px);
    letter-spacing: 0.11em;
  }

  body[data-page="contact"] .contact-copy .text-link {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  body[data-page="contact"] .contact-form {
    gap: 22px;
  }

  body[data-page="contact"] .footer {
    margin: 0;
    border-radius: 0;
    padding: 30px 22px;
  }
}

/* Contact page one-screen condensation, 2026-06-17 */
@media (min-width: 1181px) {
  body[data-page="contact"] {
    height: 100dvh;
    min-height: 700px;
    overflow: hidden;
  }

  body[data-page="contact"] .site-shell {
    display: grid;
    grid-template-rows: 84px minmax(0, 1fr) clamp(100px, 12.6dvh, 132px);
    gap: clamp(16px, 3.8dvh, 40px);
    height: 100dvh;
    min-height: 700px;
    padding: 10px;
  }

  body[data-page="contact"] .topbar {
    min-height: 84px;
  }

  body[data-page="contact"] .topbar + main.subpage,
  body[data-page="contact"] .subpage {
    min-height: 0;
    padding: 0 62px;
  }

  body[data-page="contact"] .contact-layout {
    grid-template-columns: minmax(470px, 0.88fr) minmax(540px, 1.08fr);
    gap: clamp(28px, 2.8vw, 36px);
    height: 100%;
    min-height: 0;
  }

  body[data-page="contact"] .contact-copy,
  body[data-page="contact"] .contact-form {
    min-height: 0;
    height: 100%;
  }

  body[data-page="contact"] .contact-copy {
    padding:
      clamp(34px, 5.2dvh, 55px)
      clamp(34px, 3.3vw, 48px)
      clamp(28px, 4.6dvh, 48px);
  }

  body[data-page="contact"] .contact-copy .section-label {
    margin-bottom: clamp(14px, 1.9dvh, 20px);
  }

  body[data-page="contact"] .contact-copy h1 {
    font-size: clamp(54px, 5vw, 76px);
    line-height: 1.04;
  }

  body[data-page="contact"] .contact-copy h1::after {
    margin: clamp(16px, 2.35dvh, 24px) 0 clamp(18px, 2.55dvh, 26px);
  }

  body[data-page="contact"] .contact-copy p:not(.section-label) {
    max-width: 440px;
    margin-bottom: clamp(24px, 3.5dvh, 36px);
    font-size: clamp(16px, 1.22vw, 21px);
    line-height: 1.65;
  }

  body[data-page="contact"] .contact-copy .text-link {
    min-height: clamp(52px, 5.9dvh, 62px);
  }

  body[data-page="contact"] .contact-copy::after {
    inset: 52% 12% 0;
  }

  body[data-page="contact"] .contact-form {
    gap: clamp(14px, 2.8dvh, 30px);
    padding:
      clamp(24px, 3.85dvh, 40px)
      clamp(30px, 3.3vw, 48px)
      clamp(22px, 3.65dvh, 38px);
  }

  body[data-page="contact"] .contact-form label {
    gap: clamp(7px, 1.05dvh, 11px);
  }

  body[data-page="contact"] .contact-form input,
  body[data-page="contact"] .contact-form select {
    min-height: clamp(46px, 5.75dvh, 60px);
  }

  body[data-page="contact"] .contact-form textarea {
    min-height: clamp(90px, 13.8dvh, 144px);
    padding-top: clamp(14px, 2.1dvh, 22px);
    padding-bottom: clamp(14px, 2.1dvh, 22px);
  }

  body[data-page="contact"] .contact-form .button {
    min-height: clamp(52px, 7.25dvh, 76px);
  }

  body[data-page="contact"] .form-status {
    min-height: 0;
    margin: calc(clamp(8px, 1.4dvh, 10px) * -1) 0 0;
  }

  body[data-page="contact"] .footer {
    grid-template-columns: minmax(310px, 0.85fr) minmax(260px, auto) minmax(330px, 0.85fr);
    gap: clamp(24px, 2.8vw, 42px);
    min-height: 0;
    height: 100%;
    margin: 0 26px;
    padding:
      clamp(18px, 2.6dvh, 27px)
      clamp(32px, 3vw, 44px);
  }

  body[data-page="contact"] .footer-brand {
    gap: clamp(10px, 1.8dvh, 18px);
  }

  body[data-page="contact"] .footer-socials a {
    width: clamp(44px, 4.8dvh, 50px);
    height: clamp(44px, 4.8dvh, 50px);
  }

  body[data-page="contact"] .footer address strong {
    margin-bottom: clamp(8px, 1.8dvh, 18px);
  }
}

@media (min-width: 1181px) and (max-height: 800px) {
  body[data-page="contact"] .contact-form {
    gap: 10px;
    padding: 18px 34px 18px;
  }

  body[data-page="contact"] .contact-form label {
    gap: 5px;
    font-size: 12px;
  }

  body[data-page="contact"] .contact-form input,
  body[data-page="contact"] .contact-form select {
    min-height: 38px;
    padding-left: 20px;
    font-size: 16px;
  }

  body[data-page="contact"] .contact-form textarea {
    min-height: 70px;
    padding: 12px 20px;
    font-size: 16px;
  }

  body[data-page="contact"] .contact-form .button {
    min-height: 44px;
    font-size: 15px;
  }

  body[data-page="contact"] .field-shell svg,
  body[data-page="contact"] .contact-form .button svg {
    width: 20px;
    height: 20px;
  }
}

/* Contact form darkness and clipped-button fix, 2026-06-17 */
body[data-page="contact"] .contact-form {
  background:
    linear-gradient(135deg, rgba(34, 37, 52, 0.66), rgba(7, 9, 19, 0.92) 42%, rgba(5, 7, 16, 0.96)),
    rgba(5, 7, 16, 0.94);
  overflow: visible;
}

body[data-page="contact"] .contact-form::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.055), transparent 26%),
    radial-gradient(circle at 98% 100%, rgba(178, 118, 255, 0.12), transparent 14rem);
  opacity: 0.46;
}

body[data-page="contact"] .contact-form input,
body[data-page="contact"] .contact-form select,
body[data-page="contact"] .contact-form textarea {
  border-color: rgba(151, 154, 188, 0.2);
  background:
    linear-gradient(180deg, rgba(24, 27, 42, 0.46), rgba(6, 8, 18, 0.94)),
    rgba(5, 7, 16, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 1px rgba(178, 118, 255, 0.025);
}

body[data-page="contact"] .contact-form .button {
  flex-shrink: 0;
  margin-bottom: 52px;
}

@media (min-width: 1181px) and (max-height: 760px) {
  body[data-page="contact"] {
    min-height: 620px;
  }

  body[data-page="contact"] .site-shell {
    grid-template-rows: 76px minmax(0, 1fr) clamp(72px, 10.6dvh, 92px);
    gap: clamp(10px, 2.1dvh, 18px);
    min-height: 620px;
  }

  body[data-page="contact"] .topbar {
    min-height: 76px;
  }

  body[data-page="contact"] .topbar + main.subpage,
  body[data-page="contact"] .subpage {
    padding-inline: 54px;
  }

  body[data-page="contact"] .contact-copy h1 {
    font-size: clamp(48px, 4.7vw, 64px);
  }

  body[data-page="contact"] .contact-copy p:not(.section-label) {
    margin-bottom: 18px;
    line-height: 1.5;
  }

  body[data-page="contact"] .contact-copy .text-link {
    min-height: 46px;
  }

  body[data-page="contact"] .contact-form {
    gap: 6px;
    padding: 12px 32px 70px;
  }

  body[data-page="contact"] .contact-form input,
  body[data-page="contact"] .contact-form select {
    min-height: 32px;
  }

  body[data-page="contact"] .contact-form textarea {
    min-height: 50px;
    height: clamp(88px, 16dvh, 118px);
  }

  body[data-page="contact"] .contact-form .button {
    min-height: 38px;
    margin-bottom: 38px;
  }
}

/* Music page mockup correction, 2026-06-16 */
html:has(body[data-page="music"]) {
  overflow-x: hidden;
}

body[data-page="music"] {
  --music-purple: #9b50ff;
  --music-purple-hot: #b86dff;
  --music-line: rgba(202, 190, 245, 0.34);
  --music-text: rgba(253, 251, 255, 0.97);
  --music-muted: rgba(236, 232, 245, 0.78);
  --music-stage: min(1968px, calc(100vw - 80px));
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 57% 2%, rgba(141, 78, 255, 0.26), transparent 34rem),
    radial-gradient(circle at 82% 16%, rgba(122, 85, 220, 0.2), transparent 40rem),
    linear-gradient(180deg, #050512 0%, #02040a 100%);
  color: var(--music-text);
}

body[data-page="music"] .music-launch-shell {
  position: relative;
  display: block;
  width: var(--music-stage);
  height: calc(100dvh - 80px);
  min-height: 930px;
  margin: 40px auto;
  overflow: hidden;
  border: 1px solid rgba(204, 194, 240, 0.42);
  border-radius: 38px;
  background:
    radial-gradient(circle at 61% 6%, rgba(168, 104, 255, 0.33), transparent 32rem),
    linear-gradient(180deg, rgba(17, 18, 43, 0.84), rgba(4, 7, 17, 0.96) 72%),
    #050712;
  box-shadow: 0 0 80px rgba(108, 68, 190, 0.22), 0 38px 130px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body[data-page="music"] .music-launch-shell::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, rgba(140, 85, 255, 0.17), transparent 26rem),
    radial-gradient(circle at 76% 10%, rgba(219, 206, 255, 0.14), transparent 30rem),
    linear-gradient(90deg, rgba(3, 5, 15, 0.86), rgba(4, 7, 18, 0.28) 58%, rgba(6, 8, 20, 0.26));
}

body[data-page="music"] .music-launch-shell > * {
  position: relative;
  z-index: 1;
}

body[data-page="music"] .topbar {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(330px, 420px) minmax(640px, 1fr) minmax(300px, 430px);
  width: 100%;
  min-height: 102px;
  margin: 0;
  padding: 0 70px;
  border: 0;
  border-bottom: 1px solid rgba(204, 194, 240, 0.28);
  border-radius: 0;
  background:
    radial-gradient(circle at 60% 0%, rgba(155, 85, 255, 0.22), transparent 30rem),
    linear-gradient(180deg, rgba(28, 24, 61, 0.64), rgba(7, 9, 24, 0.64));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(22px) saturate(1.14);
}

body[data-page="music"] .brand {
  justify-self: start;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, 1.03vw, 1.32rem);
  font-weight: 600;
  letter-spacing: 0.52em;
}

body[data-page="music"] .nav-links {
  justify-self: stretch;
  align-self: center;
  justify-content: space-between;
  gap: 28px;
  height: 72px;
  padding: 0 54px;
  border: 1px solid rgba(204, 194, 240, 0.12);
  border-radius: 16px;
  background: rgba(35, 28, 76, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="music"] .nav-links a {
  position: relative;
  color: rgba(246, 242, 255, 0.9);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.7rem, 0.72vw, 0.94rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

body[data-page="music"] .nav-links a[data-page-link="music"] {
  color: #fff;
}

body[data-page="music"] .nav-links a[data-page-link="music"]::after {
  bottom: -20px;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--music-purple), transparent);
  box-shadow: 0 0 20px rgba(155, 80, 255, 0.95);
}

body[data-page="music"] .socials {
  justify-self: end;
  gap: clamp(24px, 2vw, 48px);
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-page="music"] .socials a {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

body[data-page="music"] .socials a:hover {
  color: var(--music-purple-hot);
  border-color: transparent;
  box-shadow: none;
}

body[data-page="music"] .socials svg {
  width: clamp(18px, 1.15vw, 24px);
  height: clamp(18px, 1.15vw, 24px);
  stroke-width: 2.1;
}

body[data-page="music"] .music-launch-page {
  display: block;
  min-height: 0;
  padding: 0 !important;
}

body[data-page="music"] .music-launch-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(560px, 0.86fr) minmax(620px, 1.08fr);
  gap: 28px;
  height: calc(100dvh - 310px);
  min-height: 748px;
  margin: 0;
  padding: 44px 18px 140px 54px;
  align-items: stretch;
}

body[data-page="music"] .music-launch-hero::before {
  display: none;
}

body[data-page="music"] .music-launch-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: clamp(820px, calc(100dvh - 353px), 930px);
  margin: 0;
  padding: clamp(46px, 3.2vw, 64px) clamp(46px, 3.1vw, 58px);
  border: 1px solid rgba(201, 181, 255, 0.76);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 7%, rgba(255, 255, 255, 0.16), transparent 16rem),
    radial-gradient(circle at 98% 51%, rgba(155, 80, 255, 0.16), transparent 26rem),
    linear-gradient(135deg, rgba(37, 35, 70, 0.72), rgba(9, 11, 28, 0.78));
  box-shadow: 0 0 42px rgba(155, 80, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.16);
}

body[data-page="music"] .music-launch-kicker {
  margin: 0 0 clamp(24px, 2vw, 36px);
  color: var(--music-purple);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.82rem, 0.95vw, 1.12rem);
  font-weight: 900;
  letter-spacing: 0.46em;
}

body[data-page="music"] .music-launch-kicker::before,
body[data-page="music"] .music-launch-kicker i {
  display: none;
}

body[data-page="music"] .music-launch-copy h1 {
  max-width: 520px;
  margin: 0 0 clamp(38px, 3.2vw, 58px);
  background: linear-gradient(180deg, #fff 0%, #f6efff 34%, #c9b5ff 57%, #7d35f0 100%);
  background-clip: text;
  font-family: Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size: clamp(96px, 7.7vw, 168px);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 0.84;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
  text-shadow: 0 28px 82px rgba(120, 56, 255, 0.44);
}

body[data-page="music"] .music-launch-rule {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 98px minmax(80px, 1fr);
  align-items: center;
  gap: 22px;
  width: min(680px, 100%);
  height: 82px;
  margin: 0 0 clamp(30px, 3vw, 52px);
  color: var(--music-purple);
  background: transparent;
}

body[data-page="music"] .music-launch-rule span {
  display: block;
  height: 2px;
  background: linear-gradient(90deg, rgba(155, 80, 255, 0.96), rgba(155, 80, 255, 0.38), transparent);
}

body[data-page="music"] .music-launch-rule span:last-child {
  background: linear-gradient(90deg, transparent, rgba(155, 80, 255, 0.38), rgba(155, 80, 255, 0.96));
}

body[data-page="music"] .music-launch-rule b {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 98px;
  height: 98px;
  padding: 0;
  border: 1px solid rgba(197, 174, 255, 0.22);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(155, 80, 255, 0.28), rgba(40, 26, 83, 0.46) 55%, rgba(12, 10, 34, 0.58));
  box-shadow: 0 0 36px rgba(155, 80, 255, 0.28), inset 0 0 16px rgba(255, 255, 255, 0.08);
}

body[data-page="music"] .music-launch-rule b i {
  width: 6px;
  border-radius: 999px;
  background: var(--music-purple);
  box-shadow: 0 0 12px rgba(155, 80, 255, 0.95);
}

body[data-page="music"] .music-launch-rule b i:nth-child(1),
body[data-page="music"] .music-launch-rule b i:nth-child(5) {
  height: 26px;
}

body[data-page="music"] .music-launch-rule b i:nth-child(2),
body[data-page="music"] .music-launch-rule b i:nth-child(4) {
  height: 42px;
}

body[data-page="music"] .music-launch-rule b i:nth-child(3) {
  height: 54px;
}

body[data-page="music"] .music-launch-copy p {
  max-width: 640px;
  margin: 0 0 clamp(26px, 2.2vw, 34px);
  color: var(--music-muted);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(20px, 1.45vw, 30px);
  font-weight: 600;
  line-height: 1.44;
}

body[data-page="music"] .music-launch-copy p strong {
  color: var(--music-purple-hot);
  font-weight: 900;
}

body[data-page="music"] .music-status-list {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1.35fr;
  align-items: stretch;
  width: 100%;
  min-height: 78px;
  margin: 0 0 clamp(30px, 2.4vw, 40px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(204, 194, 240, 0.18);
  border-radius: 10px;
  background: rgba(15, 17, 38, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-page="music"] .music-status-list span {
  display: grid;
  grid-template-columns: clamp(26px, 1.8vw, 34px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 1vw, 18px);
  min-width: 0;
  min-height: 78px;
  padding: 0 clamp(14px, 1.25vw, 24px);
  position: static;
  width: auto;
  height: auto;
  background: transparent;
}

body[data-page="music"] .music-status-list span + span {
  border-left: 1px solid rgba(204, 194, 240, 0.2);
}

body[data-page="music"] .music-status-list svg {
  width: clamp(26px, 1.65vw, 34px);
  height: clamp(26px, 1.65vw, 34px);
  color: var(--music-purple);
  stroke-width: 1.75;
}

body[data-page="music"] .music-status-list em {
  min-width: 0;
  font-style: normal;
}

body[data-page="music"] .music-status-list strong {
  display: block;
  overflow: visible;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.68rem, 0.72vw, 0.9rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="music"] .music-status-list small {
  display: none;
}

body[data-page="music"] .music-launch-actions {
  display: grid;
  grid-template-columns: minmax(220px, 338px) minmax(220px, 354px);
  gap: 24px;
}

body[data-page="music"] .music-launch-actions .button {
  min-width: 0;
  min-height: 92px;
  border-radius: 10px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.86rem, 0.96vw, 1.08rem);
  font-weight: 900;
  letter-spacing: 0.14em;
}

body[data-page="music"] .music-launch-actions .button.primary {
  border-color: rgba(164, 89, 255, 0.98);
  background: radial-gradient(circle at 24% 0%, rgba(179, 100, 255, 0.62), transparent 64%), linear-gradient(180deg, rgba(94, 43, 172, 0.92), rgba(58, 22, 112, 0.92));
  box-shadow: 0 0 38px rgba(155, 80, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body[data-page="music"] .music-launch-actions .button.secondary {
  border-color: rgba(204, 194, 240, 0.38);
  background: rgba(14, 16, 37, 0.62);
}

body[data-page="music"] .music-launch-actions svg {
  width: clamp(24px, 1.55vw, 32px);
  height: clamp(24px, 1.55vw, 32px);
}

body[data-page="music"] .music-launch-art {
  position: absolute;
  top: 0;
  right: 18px;
  bottom: -20px;
  left: calc(47.3% + 2px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: 1px solid rgba(204, 194, 240, 0.26);
  border-radius: 18px 0 0 18px;
  background:
    linear-gradient(90deg, rgba(19, 13, 48, 0.22), rgba(8, 7, 23, 0.02) 38%),
    url("assets/music-realm-bg.png") center center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 60px rgba(116, 74, 210, 0.16);
}

body[data-page="music"] .music-player {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 14px;
  z-index: 5;
  display: grid;
  grid-template-columns: 108px 450px minmax(430px, 1fr) 190px minmax(420px, 560px);
  align-items: center;
  min-height: 128px;
  margin: 0;
  padding: 18px 54px 18px 64px;
  border: 1px solid rgba(204, 194, 240, 0.4);
  border-radius: 24px;
  background: radial-gradient(circle at 87% 14%, rgba(155, 80, 255, 0.34), transparent 22rem), linear-gradient(90deg, rgba(15, 19, 42, 0.86), rgba(8, 11, 29, 0.84) 52%, rgba(31, 20, 64, 0.86));
  box-shadow: 0 -18px 70px rgba(0, 0, 0, 0.28), 0 0 42px rgba(155, 80, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(1.18);
}

body[data-page="music"] .music-player-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
}

body[data-page="music"] .music-player-mark i {
  width: 5px;
  border-radius: 999px;
  background: currentColor;
}

body[data-page="music"] .music-player-mark i:nth-child(1),
body[data-page="music"] .music-player-mark i:nth-child(5) {
  height: 36px;
}

body[data-page="music"] .music-player-mark i:nth-child(2),
body[data-page="music"] .music-player-mark i:nth-child(4) {
  height: 54px;
}

body[data-page="music"] .music-player-mark i:nth-child(3) {
  height: 70px;
}

body[data-page="music"] .music-player-copyright {
  margin: 0;
  color: rgba(246, 243, 255, 0.78);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.72rem, 0.74vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
}

body[data-page="music"] .music-player-track {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  min-width: 0;
  padding-left: 34px;
  border-left: 1px solid rgba(204, 194, 240, 0.18);
}

body[data-page="music"] .music-player-track img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 0 28px rgba(155, 80, 255, 0.28);
}

body[data-page="music"] .music-player-track div {
  display: grid;
  min-width: 0;
  gap: 7px;
}

body[data-page="music"] .music-player-track strong,
body[data-page="music"] .music-player-track span {
  overflow: hidden;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="music"] .music-player-track strong {
  font-size: clamp(0.92rem, 0.95vw, 1.15rem);
  font-weight: 900;
}

body[data-page="music"] .music-player-track span {
  color: rgba(238, 233, 247, 0.76);
  font-size: clamp(0.78rem, 0.8vw, 1rem);
  font-weight: 700;
}

body[data-page="music"] .music-player-track b {
  position: relative;
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(72, 70, 110, 0.72);
}

body[data-page="music"] .music-player-track b i {
  display: block;
  width: 66%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9b50ff, #cb8cff);
  box-shadow: 0 0 14px rgba(155, 80, 255, 0.8);
}

body[data-page="music"] .music-player-time {
  justify-self: center;
  color: rgba(238, 233, 247, 0.78);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.74rem, 0.76vw, 0.96rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}

body[data-page="music"] .music-player-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(24px, 2.2vw, 44px);
}

body[data-page="music"] .music-player-controls button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.94);
  background: transparent;
  cursor: pointer;
}

body[data-page="music"] .music-player-controls svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="music"] .music-player-play {
  width: 72px !important;
  height: 72px !important;
  border: 1px solid rgba(203, 140, 255, 0.62) !important;
  color: #fff !important;
  background: radial-gradient(circle, rgba(178, 94, 255, 0.68), rgba(80, 36, 153, 0.78) 70%) !important;
  box-shadow: 0 0 34px rgba(155, 80, 255, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body[data-page="music"] .music-player-play svg {
  width: 34px;
  height: 34px;
}

@media (max-width: 1280px) {
  body[data-page="music"] {
    --music-stage: min(100vw - 32px, 1120px);
  }

  body[data-page="music"] .music-launch-shell {
    height: auto;
    min-height: 0;
    margin: 16px auto;
  }

  body[data-page="music"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 78px;
    padding: 10px 22px 10px 30px;
  }

  body[data-page="music"] .nav-links,
  body[data-page="music"] .socials {
    display: none;
  }

  body[data-page="music"] .topbar.nav-open .nav-links,
  body[data-page="music"] .topbar.nav-open .socials {
    display: flex;
  }

  body[data-page="music"] .music-launch-hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    padding: 24px;
  }

  body[data-page="music"] .music-launch-art {
    position: static;
    min-height: 520px;
    border-radius: 22px;
  }

  body[data-page="music"] .music-player {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 20px;
    margin: 0 24px 24px;
    padding: 24px;
  }

  body[data-page="music"] .music-player-copyright,
  body[data-page="music"] .music-player-time {
    display: none;
  }

  body[data-page="music"] .music-player-track {
    padding-left: 0;
    border-left: 0;
  }

  body[data-page="music"] .music-player-controls {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (max-width: 680px) {
  body[data-page="music"] {
    --music-stage: min(100vw - 20px, 520px);
  }

  body[data-page="music"] .music-launch-shell {
    border-radius: 18px;
  }

  body[data-page="music"] .brand {
    font-size: 0.8rem;
    letter-spacing: 0.42em;
  }

  body[data-page="music"] .music-launch-hero {
    padding: 16px;
  }

  body[data-page="music"] .music-launch-copy {
    padding: 34px 24px;
    border-radius: 18px;
  }

  body[data-page="music"] .music-launch-copy h1 {
    font-size: clamp(70px, 22vw, 112px);
  }

  body[data-page="music"] .music-launch-rule {
    grid-template-columns: 1fr 74px 1fr;
    gap: 12px;
    height: 74px;
  }

  body[data-page="music"] .music-launch-rule b {
    width: 74px;
    height: 74px;
  }

  body[data-page="music"] .music-status-list,
  body[data-page="music"] .music-launch-actions {
    grid-template-columns: 1fr;
  }

  body[data-page="music"] .music-status-list span + span {
    border-top: 1px solid rgba(204, 194, 240, 0.2);
    border-left: 0;
  }

  body[data-page="music"] .music-launch-actions .button {
    min-height: 68px;
  }

  body[data-page="music"] .music-launch-art {
    min-height: 360px;
  }

  body[data-page="music"] .music-player {
    grid-template-columns: 1fr;
    margin: 0 16px 16px;
  }

  body[data-page="music"] .music-player-mark {
    display: none;
  }

  body[data-page="music"] .music-player-track {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  body[data-page="music"] .music-player-track img {
    width: 64px;
    height: 64px;
  }

body[data-page="music"] .music-player-controls {
    gap: 18px;
  }
}

/* Music page mockup parity correction, 2026-06-17 */
@media (min-width: 1281px) {
  body[data-page="music"] {
    --music-stage: min(1488px, calc(100vw - 72px));
    display: grid;
    place-items: center;
    padding: 0;
  }

  body[data-page="music"] .music-launch-shell {
    width: var(--music-stage);
    height: min(936px, calc(100dvh - 72px));
    min-height: 0;
    margin: 0 auto;
    border-radius: 32px;
  }

  body[data-page="music"] .topbar {
    grid-template-columns: 296px minmax(676px, 1fr) 318px;
    min-height: 80px;
    padding: 0 52px;
  }

  body[data-page="music"] .brand {
    font-size: 16px;
    letter-spacing: 0.48em;
  }

  body[data-page="music"] .nav-links {
    justify-self: center;
    width: min(760px, 100%);
    height: 56px;
    padding: 0 42px;
    gap: 36px;
  }

  body[data-page="music"] .nav-links a[data-page-link="music"]::after {
    bottom: -16px;
  }

  body[data-page="music"] .nav-links a {
    font-size: 12px;
    letter-spacing: 0.17em;
  }

  body[data-page="music"] .socials {
    gap: 34px;
  }

  body[data-page="music"] .music-launch-hero {
    grid-template-columns: 638px minmax(0, 1fr);
    gap: 22px;
    height: calc(100% - 80px);
    min-height: 0;
    padding: 34px 36px 112px 42px;
  }

  body[data-page="music"] .music-launch-copy {
    justify-content: flex-start;
    min-height: 0;
    height: 700px;
    padding: 46px 40px 32px;
    border-radius: 24px;
  }

  body[data-page="music"] .music-launch-kicker {
    margin-bottom: 21px;
    font-size: 15px;
    letter-spacing: 0.47em;
  }

  body[data-page="music"] .music-launch-copy h1 {
    max-width: 470px;
    margin-bottom: 27px;
    font-size: 124px;
    line-height: 0.84;
  }

  body[data-page="music"] .music-launch-rule {
    width: 100%;
    height: 76px;
    margin-bottom: 24px;
  }

  body[data-page="music"] .music-launch-rule b {
    width: 78px;
    height: 78px;
  }

  body[data-page="music"] .music-launch-copy p {
    max-width: 520px;
    margin-bottom: 21px;
    font-size: 21px;
    line-height: 1.45;
  }

  body[data-page="music"] .music-status-list {
    min-height: 62px;
    margin-bottom: 24px;
  }

  body[data-page="music"] .music-status-list span {
    min-height: 62px;
    padding: 0 18px;
  }

  body[data-page="music"] .music-status-list strong {
    font-size: clamp(0.64rem, 0.68vw, 0.72rem);
  }

  body[data-page="music"] .music-launch-actions {
    grid-template-columns: 264px 274px;
    gap: 20px;
  }

  body[data-page="music"] .music-launch-actions .button {
    min-height: 70px;
    font-size: 14px;
  }

  body[data-page="music"] .music-launch-art {
    position: static;
    width: 100%;
    height: 760px;
    border-radius: 16px 0 0 16px;
    background:
      linear-gradient(90deg, rgba(19, 13, 48, 0.2), rgba(8, 7, 23, 0.02) 38%),
      url("assets/music-realm-bg.png") center 46% / cover no-repeat;
  }

  body[data-page="music"] .music-player {
    left: 18px;
    right: 18px;
    bottom: 12px;
    grid-template-columns: 78px 342px minmax(360px, 1fr) 142px 300px;
    min-height: 92px;
    padding: 12px 44px;
    border-radius: 20px;
  }

  body[data-page="music"] .music-player-mark i:nth-child(1),
  body[data-page="music"] .music-player-mark i:nth-child(5) {
    height: 30px;
  }

  body[data-page="music"] .music-player-mark i:nth-child(2),
  body[data-page="music"] .music-player-mark i:nth-child(4) {
    height: 46px;
  }

  body[data-page="music"] .music-player-mark i:nth-child(3) {
    height: 58px;
  }

  body[data-page="music"] .music-player-track {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    padding-left: 28px;
  }

  body[data-page="music"] .music-player-track img {
    width: 64px;
    height: 64px;
  }

  body[data-page="music"] .music-player-controls {
    gap: 26px;
  }

  body[data-page="music"] .music-player-controls button {
    width: 34px;
    height: 34px;
  }

  body[data-page="music"] .music-player-controls svg {
    width: 25px;
    height: 25px;
  }

  body[data-page="music"] .music-player-play {
    width: 58px !important;
    height: 58px !important;
  }
}

/* About page artwork crop fix, 2026-06-17 */
body[data-page="about"] .about-launch-visual {
  background:
    linear-gradient(180deg, rgba(4, 6, 14, 0.05), rgba(4, 6, 14, 0.28) 72%, rgba(4, 6, 14, 0.78)),
    radial-gradient(circle at 52% 20%, rgba(183, 123, 255, 0.2), transparent 24rem),
    url("assets/music-realm-bg.png") center 20% / cover no-repeat;
}

/* About mockup rebuild, 2026-06-17 */
body[data-page="about"] {
  --about-purple: #a663ff;
  --about-purple-bright: #b97aff;
  --about-glass: rgba(22, 18, 54, 0.64);
  --about-glass-deep: rgba(8, 8, 27, 0.78);
  --about-line: rgba(188, 168, 255, 0.34);
  --about-text: rgba(251, 250, 255, 0.96);
  --about-muted: rgba(231, 228, 244, 0.82);
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 86% 3%, rgba(148, 77, 255, 0.28), transparent 31rem),
    radial-gradient(circle at 4% 86%, rgba(93, 70, 174, 0.2), transparent 30rem),
    linear-gradient(180deg, rgba(5, 4, 18, 0.38), rgba(4, 3, 14, 0.9)),
    url("assets/about-remnant-bg.png") center center / cover fixed no-repeat,
    #050315;
  color: var(--about-text);
}

body[data-page="about"] .about-launch-shell {
  width: min(1475px, calc(100% - 86px));
  margin: 31px auto 35px;
  padding: 0 36px 26px;
  border: 1px solid rgba(199, 179, 255, 0.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 0%, rgba(153, 86, 255, 0.22), transparent 32rem),
    linear-gradient(180deg, rgba(22, 20, 54, 0.74), rgba(7, 7, 27, 0.9));
  box-shadow:
    0 40px 130px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body[data-page="about"] .topbar {
  width: calc(100% + 72px);
  min-height: 82px;
  margin: 0 -36px 24px;
  padding: 0 38px;
  grid-template-columns: 246px minmax(680px, 1fr) 324px;
  column-gap: 24px;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="about"] .topbar::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 308px;
  border-radius: 28px 0 26px 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 201, 255, 0.08), transparent 80%),
    linear-gradient(180deg, rgba(39, 36, 79, 0.68), rgba(16, 14, 45, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  content: "";
}

body[data-page="about"] .topbar .brand {
  position: relative;
  z-index: 1;
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0.48em;
}

body[data-page="about"] .topbar .nav-links {
  justify-self: stretch;
  height: 82px;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3.35vw, 66px);
  border: 1px solid rgba(188, 168, 255, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 75% 0%, rgba(162, 99, 255, 0.18), transparent 25rem),
    linear-gradient(180deg, rgba(35, 26, 80, 0.54), rgba(13, 12, 40, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 48px rgba(0, 0, 0, 0.22);
}

body[data-page="about"] .topbar .nav-links a {
  color: rgba(251, 250, 255, 0.88);
  font-size: clamp(0.68rem, 0.82vw, 0.82rem);
  letter-spacing: 0.15em;
}

body[data-page="about"] .topbar .nav-links a.active::after {
  bottom: -14px;
  width: 52px;
  height: 2px;
  background: var(--about-purple);
  box-shadow: 0 0 16px rgba(166, 99, 255, 0.98);
}

body[data-page="about"] .topbar .socials {
  justify-self: end;
  gap: clamp(10px, 1vw, 16px);
  height: 82px;
  padding: 0 clamp(14px, 1.55vw, 24px);
  width: 324px;
  border: 1px solid rgba(188, 168, 255, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(213, 197, 255, 0.1), transparent 85%),
    linear-gradient(180deg, rgba(67, 47, 122, 0.58), rgba(35, 27, 79, 0.54));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 52px rgba(0, 0, 0, 0.22);
}

body[data-page="about"] .topbar .socials a,
body[data-page="about"] .about-launch-footer .footer-socials a {
  width: 42px;
  height: 42px;
  border-color: rgba(206, 191, 255, 0.13);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.13), transparent 88%),
    rgba(71, 51, 132, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.18);
}

body[data-page="about"] .about-launch-hero {
  grid-template-columns: minmax(520px, 0.79fr) minmax(640px, 1fr);
  gap: 22px;
  height: 732px;
}

body[data-page="about"] .about-launch-copy,
body[data-page="about"] .about-launch-visual {
  border-color: rgba(202, 185, 255, 0.34);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 0 70px rgba(166, 99, 255, 0.08),
    0 24px 85px rgba(0, 0, 0, 0.34);
}

body[data-page="about"] .about-launch-copy {
  justify-content: flex-start;
  padding: 42px 46px 34px;
  background:
    linear-gradient(90deg, rgba(12, 10, 35, 0.9), rgba(17, 13, 46, 0.74) 54%, rgba(38, 24, 82, 0.35)),
    radial-gradient(circle at 86% 24%, rgba(160, 95, 255, 0.16), transparent 16rem),
    rgba(12, 11, 37, 0.78);
}

body[data-page="about"] .about-launch-kicker {
  width: min(100%, 330px);
  gap: 22px;
  margin: 0 0 18px;
  font-size: 0.88rem;
  letter-spacing: 0.34em;
}

body[data-page="about"] .about-launch-kicker b {
  display: none;
}

body[data-page="about"] .about-launch-kicker i {
  max-width: 72px;
}

body[data-page="about"] .about-launch-copy h1 {
  max-width: 7.6ch;
  font-size: clamp(72px, 6.1vw, 93px);
  letter-spacing: 0.035em;
  line-height: 0.88;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f5fb 48%, #9b63f0 49%, #8737df 100%);
  background-clip: text;
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.64);
}

body[data-page="about"] .about-launch-copy h1 span {
  color: transparent;
}

body[data-page="about"] .about-launch-rule {
  width: min(100%, 300px);
  margin: 31px 0 26px;
}

body[data-page="about"] .about-launch-rule b {
  width: 34px;
  height: 34px;
}

body[data-page="about"] .about-launch-copy p {
  max-width: 440px;
  margin: 0 0 24px;
  font-size: 1.22rem;
  line-height: 1.43;
}

body[data-page="about"] .about-launch-actions {
  grid-template-columns: minmax(190px, 210px) minmax(250px, 1fr);
  gap: 18px;
  width: min(100%, 536px);
  margin-top: auto;
}

body[data-page="about"] .about-launch-actions .button {
  grid-template-columns: 20px minmax(0, auto);
  gap: 16px;
  min-height: 64px;
  padding: 0 28px;
  border-radius: 8px;
  font-size: 0.84rem;
  letter-spacing: 0.24em;
}

body[data-page="about"] .about-launch-actions .button.primary {
  background:
    radial-gradient(circle at 50% 0%, rgba(181, 111, 255, 0.46), transparent 72%),
    linear-gradient(180deg, rgba(92, 49, 171, 0.88), rgba(67, 25, 141, 0.68));
  box-shadow:
    0 0 36px rgba(166, 99, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body[data-page="about"] .about-launch-actions em {
  display: none;
}

body[data-page="about"] .about-launch-actions svg {
  width: 18px;
  height: 18px;
}

body[data-page="about"] .about-launch-visual {
  position: relative;
  background:
    linear-gradient(180deg, rgba(14, 7, 38, 0.06), rgba(12, 7, 33, 0.18) 64%, rgba(6, 4, 19, 0.46)),
    radial-gradient(circle at 54% 30%, rgba(198, 160, 255, 0.16), transparent 20rem),
    url("assets/about-remnant-bg.png") center 47% / cover no-repeat;
  filter: saturate(1.16) contrast(1.06) brightness(1.06);
}

body[data-page="about"] .about-launch-visual::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 10% 58%, rgba(187, 159, 255, 0.2), transparent 3.2rem),
    radial-gradient(circle at 97% 30%, rgba(235, 225, 255, 0.22), transparent 2.9rem),
    linear-gradient(90deg, rgba(11, 8, 34, 0.18), transparent 44%, rgba(20, 9, 49, 0.1));
  pointer-events: none;
  content: "";
}

body[data-page="about"] .about-launch-footer {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 94px;
  margin-top: 24px;
  margin-right: -36px;
  margin-left: -36px;
  padding: 0 60px;
  border-color: rgba(199, 181, 255, 0.3);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(151, 100, 255, 0.24), transparent 20rem),
    radial-gradient(circle at 100% 0%, rgba(164, 105, 255, 0.18), transparent 26rem),
    linear-gradient(180deg, rgba(41, 31, 86, 0.74), rgba(23, 18, 61, 0.76));
}

body[data-page="about"] .about-launch-footer small {
  grid-column: 2;
  justify-self: start;
  max-width: 410px;
  font-size: 0.76rem;
  line-height: 1.65;
  letter-spacing: 0.14em;
}

body[data-page="about"] .about-footer-mark {
  grid-column: 1;
  grid-row: 1;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  color: transparent;
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 122, 255, 0.42), transparent 70%),
    rgba(78, 48, 143, 0.62);
  box-shadow:
    0 0 28px rgba(166, 99, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body[data-page="about"] .about-footer-mark::before,
body[data-page="about"] .about-footer-mark::after {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 28px;
  border-radius: 999px;
  background: var(--about-purple-bright);
  box-shadow: -10px 0 0 var(--about-purple-bright), 10px 0 0 var(--about-purple-bright), 0 0 14px rgba(185, 122, 255, 0.8);
  transform: translate(-50%, -50%);
  content: "";
}

body[data-page="about"] .about-footer-mark::after {
  display: none;
}

body[data-page="about"] .about-launch-footer .footer-socials {
  grid-column: 3;
  gap: 26px;
}

@media (max-width: 1120px) {
  body[data-page="about"] .about-launch-shell {
    width: min(100% - 28px, 860px);
    padding: 0 16px 16px;
  }

  body[data-page="about"] .topbar {
    width: calc(100% + 32px);
    min-height: 74px;
    margin: 0 -16px 20px;
    padding: 0 24px;
    grid-template-columns: 1fr auto;
  }

  body[data-page="about"] .topbar::before {
    width: 100%;
  }

  body[data-page="about"] .about-launch-hero {
    grid-template-columns: 1fr;
    height: auto;
  }

  body[data-page="about"] .about-launch-copy {
    min-height: 640px;
  }

  body[data-page="about"] .about-launch-visual {
    min-height: 640px;
  }
}

@media (max-width: 700px) {
  body[data-page="about"] .about-launch-shell {
    width: min(100% - 18px, 520px);
    margin: 9px auto 18px;
    border-radius: 16px;
  }

  body[data-page="about"] .about-launch-copy {
    min-height: auto;
    padding: 32px 22px;
  }

  body[data-page="about"] .about-launch-copy h1 {
    max-width: 8ch;
    font-size: clamp(56px, 18vw, 74px);
  }

  body[data-page="about"] .about-launch-actions {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  body[data-page="about"] .about-launch-visual {
    min-height: 430px;
  }

  body[data-page="about"] .about-launch-footer {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px;
  }

  body[data-page="about"] .about-launch-footer small,
  body[data-page="about"] .about-footer-mark,
  body[data-page="about"] .about-launch-footer .footer-socials {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }
}

/* Reality Unveiled page as Media Suite browser, 2026-06-16 */
html:has(body[data-page="videos"]) {
  overflow-x: hidden;
}

body[data-page="videos"] {
  --suite-bg: #060a13;
  --suite-panel: #080e1a;
  --suite-card: #070c18;
  --suite-line: rgba(93, 105, 135, 0.42);
  --suite-line-soft: rgba(93, 105, 135, 0.24);
  --suite-gold: #d9b85d;
  --suite-text: #fbfbfd;
  --suite-muted: rgba(209, 213, 226, 0.68);
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 90% 0%, rgba(34, 51, 89, 0.62), transparent 34rem),
    radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.04), transparent 26rem),
    linear-gradient(180deg, #12161f 0%, #070c17 28%, #040812 100%);
  color: var(--suite-text);
}

body[data-page="videos"] .site-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
}

body[data-page="videos"] .topbar,
body[data-page="videos"] .footer {
  display: none;
}

body[data-page="videos"] .video-soon-page.video-media-suite {
  display: block;
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0 0 74px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 0%, rgba(29, 48, 88, 0.65), transparent 32rem),
    linear-gradient(180deg, rgba(20, 24, 34, 0.96) 0%, rgba(7, 12, 23, 0.98) 18%, #050914 100%);
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="videos"] .topbar + main.video-media-suite,
body[data-page="videos"] main.video-media-suite.subpage {
  padding-top: 0 !important;
}

body[data-page="videos"] .video-suite-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 186px;
  padding: 40px 54px 34px;
  border-bottom: 1px solid var(--suite-line-soft);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025), rgba(22, 39, 72, 0.26)),
    rgba(17, 22, 32, 0.5);
}

body[data-page="videos"] .video-suite-hero p {
  margin: 0 0 16px;
  color: var(--suite-gold);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(19px, 2.2vw, 31px);
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-page="videos"] .video-suite-hero h1 {
  margin: 0;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(50px, 5.1vw, 76px);
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}

body[data-page="videos"] .video-suite-hero a {
  display: grid;
  width: clamp(74px, 8vw, 96px);
  height: clamp(74px, 8vw, 96px);
  place-items: center;
  border: 2px solid rgba(101, 113, 145, 0.44);
  border-radius: 999px;
  color: rgba(248, 249, 255, 0.94);
  background: rgba(8, 13, 26, 0.42);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

body[data-page="videos"] .library-controlbar {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  min-height: 178px;
  padding: 38px 54px;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(14, 22, 42, 0.74), rgba(7, 12, 23, 0.82));
  box-shadow: none;
}

body[data-page="videos"] .library-controlbar::before {
  display: none;
}

body[data-page="videos"] .library-search {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 22px;
  min-height: 108px;
  padding: 0 42px;
  border: 2px solid rgba(91, 103, 134, 0.42);
  border-radius: 999px;
  background: rgba(4, 9, 19, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 54px rgba(0, 0, 0, 0.22);
}

body[data-page="videos"] .library-search svg {
  width: 42px;
  height: 42px;
  color: rgba(224, 228, 238, 0.86);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

body[data-page="videos"] .library-search input {
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(26px, 2.7vw, 40px);
  font-weight: 700;
  letter-spacing: 0;
}

body[data-page="videos"] .library-search input::placeholder {
  color: rgba(246, 247, 250, 0.5);
}

body[data-page="videos"] .library-toolbar {
  display: none;
}

body[data-page="videos"] .exodus-playlist-section {
  display: block;
  padding: 0 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="videos"] .exodus-playlist-section[hidden] {
  display: none;
}

body[data-page="videos"] .youtube-feed-copy,
body[data-page="videos"] .youtube-feature-panel {
  display: none !important;
}

body[data-page="videos"] .youtube-feed-status {
  margin: 10px 54px 36px;
  color: rgba(236, 239, 248, 0.72);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
}

body[data-page="videos"] .youtube-feed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 58px;
  margin: 0;
  padding: 0 0 24px;
}

body[data-page="videos"] .video-main-row {
  display: grid;
  gap: 34px;
  min-width: 0;
}

body[data-page="videos"] .video-main-row-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 54px;
}

body[data-page="videos"] .video-main-row-head h3 {
  margin: 0;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 950;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-page="videos"] .video-main-row-head span {
  color: var(--suite-gold);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="videos"] .video-main-track {
  display: grid;
  grid-auto-columns: clamp(420px, 36vw, 510px);
  grid-auto-flow: column;
  gap: 28px;
  overflow-x: auto;
  padding: 0 54px 26px;
  scroll-padding-left: 54px;
  scroll-snap-type: x proximity;
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar {
  height: 0;
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar-track,
body[data-page="videos"] .video-main-track::-webkit-scrollbar-thumb {
  background: transparent;
}

body[data-page="videos"] .youtube-feed-card {
  scroll-snap-align: start;
  min-width: 0;
  overflow: hidden;
  border: 2px solid rgba(77, 89, 119, 0.46);
  border-radius: 26px;
  background: var(--suite-card);
  box-shadow: none;
}

body[data-page="videos"] .youtube-feed-card:hover,
body[data-page="videos"] .youtube-feed-card:focus-within {
  border-color: rgba(217, 184, 93, 0.52);
  background: #09101f;
  transform: translateY(-2px);
}

body[data-page="videos"] .youtube-feed-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border: 0;
  background:
    linear-gradient(180deg, rgba(4, 8, 16, 0.14), rgba(4, 8, 16, 0.58)),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .youtube-feed-thumb::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(3, 7, 16, 0.46));
}

body[data-page="videos"] .youtube-feed-thumb .play-badge {
  position: absolute;
  left: 40px;
  top: 0;
  z-index: 2;
  width: 88px;
  height: 88px;
  border: 2px solid rgba(217, 184, 93, 0.92);
  color: var(--suite-gold);
  background: rgba(5, 9, 18, 0.2);
  transform: translateY(-48%);
}

body[data-page="videos"] .youtube-feed-card div {
  display: grid;
  gap: 18px;
  min-height: 292px;
  padding: 34px 36px 38px;
}

body[data-page="videos"] .youtube-feed-card small {
  color: var(--suite-gold);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 950;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-page="videos"] .youtube-feed-card h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(29px, 2.75vw, 42px);
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="videos"] .youtube-feed-card p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 0;
  margin: 0;
  color: var(--suite-muted);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="videos"] .youtube-feed-card .tile-open {
  display: none;
}

body[data-page="videos"] .library-empty {
  margin: 0 54px;
  border-color: var(--suite-line-soft);
  border-radius: 18px;
  background: rgba(7, 12, 23, 0.86);
  color: rgba(236, 239, 248, 0.72);
}

body[data-page="videos"] .video-catalog-panel {
  display: none !important;
}

@media (max-width: 760px) {
  body[data-page="videos"] .video-suite-hero {
    min-height: 148px;
    padding: 28px 24px;
  }

  body[data-page="videos"] .video-suite-hero h1 {
    font-size: clamp(38px, 12vw, 54px);
  }

  body[data-page="videos"] .video-suite-hero a {
    width: 62px;
    height: 62px;
    font-size: 25px;
  }

  body[data-page="videos"] .library-controlbar {
    min-height: auto;
    padding: 28px 18px 34px;
  }

  body[data-page="videos"] .library-search {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 76px;
    padding: 0 24px;
  }

  body[data-page="videos"] .library-search svg {
    width: 30px;
    height: 30px;
  }

  body[data-page="videos"] .library-search input {
    font-size: 21px;
  }

  body[data-page="videos"] .youtube-feed-grid {
    gap: 46px;
  }

  body[data-page="videos"] .video-main-row-head {
    padding: 0 18px;
  }

  body[data-page="videos"] .video-main-row-head h3 {
    font-size: 25px;
  }

  body[data-page="videos"] .video-main-row-head span {
    font-size: 15px;
  }

  body[data-page="videos"] .video-main-track {
    grid-auto-columns: minmax(300px, 84vw);
    gap: 18px;
    padding: 0 18px 22px;
    scroll-padding-left: 18px;
  }

  body[data-page="videos"] .youtube-feed-card {
    border-radius: 18px;
  }

  body[data-page="videos"] .youtube-feed-thumb .play-badge {
    left: 28px;
    width: 62px;
    height: 62px;
  }

  body[data-page="videos"] .youtube-feed-card div {
    min-height: 218px;
    padding: 26px 26px 30px;
  }
}

/* Reality Unveiled playlist mockup restore, 2026-06-17 */
body[data-page="videos"] {
  --playlist-bg: #050811;
  --playlist-panel: rgba(15, 20, 34, 0.78);
  --playlist-card: rgba(13, 18, 30, 0.9);
  --playlist-line: rgba(154, 167, 209, 0.22);
  --playlist-line-strong: rgba(171, 150, 255, 0.42);
  --playlist-purple: #a06cff;
  --playlist-gold: #e2c25f;
  --playlist-text: #f7f7fb;
  --playlist-muted: rgba(226, 229, 241, 0.72);
  min-height: 100dvh;
  background:
    radial-gradient(circle at 76% 0%, rgba(75, 66, 132, 0.35), transparent 36rem),
    radial-gradient(circle at 15% 34%, rgba(255, 255, 255, 0.06), transparent 28rem),
    linear-gradient(180deg, #090d18 0%, #050813 52%, #03060d 100%);
}

body[data-page="videos"] .site-shell {
  width: calc(100vw - 40px) !important;
  max-width: none !important;
  min-height: auto;
  margin: 20px auto 34px;
  padding: 0;
}

body[data-page="videos"] .topbar {
  display: grid;
  min-height: 80px;
  padding-inline: 36px;
  margin: 0;
  border-color: rgba(166, 151, 255, 0.24);
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(180deg, rgba(27, 31, 48, 0.9), rgba(11, 15, 28, 0.92)),
    rgba(9, 12, 22, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="videos"] .footer {
  display: grid;
  margin-top: 24px;
}

body[data-page="videos"] .video-suite-hero {
  display: none;
}

body[data-page="videos"] .video-soon-page.video-playlist-suite,
body[data-page="videos"] main.video-playlist-suite.subpage,
body[data-page="videos"] .topbar + main.video-playlist-suite {
  display: block;
  min-height: auto;
  margin: 0;
  padding: 0 36px 46px;
  overflow: hidden;
  border: 1px solid rgba(155, 169, 210, 0.2);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.06), transparent 25rem),
    radial-gradient(circle at 82% 4%, rgba(93, 72, 163, 0.18), transparent 32rem),
    linear-gradient(180deg, rgba(14, 20, 35, 0.96), rgba(5, 9, 18, 0.98) 70%, rgba(3, 6, 13, 1));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

body[data-page="videos"] .library-controlbar {
  position: relative;
  top: auto;
  z-index: 3;
  display: grid;
  grid-template-columns: 184px minmax(300px, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 92px;
  margin: 0 -36px;
  padding: 22px 24px;
  border: 0;
  border-bottom: 1px solid rgba(154, 167, 209, 0.18);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(35, 40, 59, 0.78), rgba(13, 17, 29, 0.9)),
    rgba(12, 16, 27, 0.9);
  box-shadow: none;
}

body[data-page="videos"] .library-controlbar::before {
  display: none;
}

body[data-page="videos"] .video-library-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(166, 151, 255, 0.22);
  border-radius: 10px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)),
    rgba(21, 26, 40, 0.78);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

body[data-page="videos"] .library-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 16px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(154, 167, 209, 0.22);
  border-radius: 10px;
  background: rgba(10, 14, 25, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-page="videos"] .library-search svg {
  width: 22px;
  height: 22px;
  color: rgba(228, 231, 242, 0.82);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

body[data-page="videos"] .library-search input {
  border: 0;
  color: #fff;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  outline: 0;
}

body[data-page="videos"] .library-search input::placeholder {
  color: rgba(226, 229, 241, 0.66);
}

body[data-page="videos"] .library-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  justify-content: flex-end;
}

body[data-page="videos"] .library-filter {
  min-width: 94px;
  min-height: 46px;
  border: 1px solid rgba(154, 167, 209, 0.2);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(13, 18, 31, 0.78);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="videos"] .library-filter.active,
body[data-page="videos"] .library-filter:hover,
body[data-page="videos"] .library-filter:focus-visible {
  border-color: rgba(166, 115, 255, 0.62);
  background:
    linear-gradient(180deg, rgba(128, 87, 226, 0.34), rgba(27, 30, 49, 0.86)),
    rgba(18, 22, 35, 0.9);
  box-shadow: 0 0 30px rgba(138, 86, 255, 0.18);
}

body[data-page="videos"] .exodus-playlist-section {
  display: grid;
  grid-template-columns: minmax(360px, 0.48fr) minmax(0, 1.52fr);
  gap: 24px;
  margin: 0;
  padding: 28px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="videos"] .exodus-playlist-section[hidden] {
  display: none;
}

body[data-page="videos"] .youtube-feed-copy {
  display: grid !important;
  align-content: start;
  gap: 22px;
  min-width: 0;
  padding: 28px 14px 0 24px;
}

body[data-page="videos"] .youtube-feed-copy .section-label,
body[data-page="videos"] .video-browse-archive {
  display: none;
}

body[data-page="videos"] .youtube-feed-copy h2 {
  max-width: 390px;
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 4.9vw, 82px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.93;
  text-transform: none;
}

body[data-page="videos"] .youtube-feed-copy h2::after {
  display: block;
  width: 176px;
  height: 3px;
  margin-top: 34px;
  content: "";
  background:
    radial-gradient(circle at 96% 50%, var(--playlist-purple) 0 3px, transparent 4px),
    linear-gradient(90deg, var(--playlist-purple), rgba(154, 167, 209, 0.16));
}

body[data-page="videos"] .youtube-feed-copy p {
  margin: 0;
  color: var(--playlist-muted);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

body[data-page="videos"] .youtube-feature-panel {
  display: block !important;
  min-width: 0;
}

body[data-page="videos"] .youtube-feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.58fr);
  width: 100%;
  min-height: 348px;
  overflow: hidden;
  border: 1px solid rgba(154, 167, 209, 0.28);
  border-radius: 10px;
  background: var(--playlist-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-align: left;
}

body[data-page="videos"] .youtube-feature-art {
  position: relative;
  display: block;
  min-height: 348px;
  background:
    linear-gradient(180deg, rgba(5, 8, 15, 0.1), rgba(5, 8, 15, 0.58)),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .youtube-feature-art::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 44% 52%, transparent 0 13rem, rgba(3, 6, 13, 0.4) 22rem);
}

body[data-page="videos"] .youtube-feature-art .play-badge {
  position: absolute;
  left: 58px;
  top: 50%;
  z-index: 2;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(166, 115, 255, 0.82);
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 10, 18, 0.34);
  box-shadow: 0 0 34px rgba(155, 94, 255, 0.22);
  transform: translateY(-50%);
}

body[data-page="videos"] .youtube-feature-copy {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 42px 36px;
  border-left: 1px solid rgba(154, 167, 209, 0.18);
}

body[data-page="videos"] .youtube-feature-copy small {
  color: #b99aff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="videos"] .youtube-feature-copy strong {
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(26px, 2.25vw, 34px);
  font-weight: 850;
  letter-spacing: 0.02em;
  line-height: 1.08;
  text-transform: uppercase;
}

body[data-page="videos"] .youtube-feature-copy > span {
  color: var(--playlist-muted);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}

body[data-page="videos"] .youtube-feature-copy em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 54px;
  margin-top: 12px;
  padding: 0 30px;
  border: 1px solid rgba(166, 115, 255, 0.5);
  border-radius: 9px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    rgba(54, 48, 78, 0.72);
  box-shadow: 0 0 28px rgba(141, 90, 255, 0.17);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="videos"] .youtube-feed-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--playlist-muted);
}

body[data-page="videos"] .youtube-feed-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
}

body[data-page="videos"] .video-main-row,
body[data-page="videos"] .video-main-track {
  display: contents;
}

body[data-page="videos"] .video-main-row-head {
  display: none;
}

body[data-page="videos"] .youtube-feed-card {
  display: grid;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(154, 167, 209, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--playlist-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="videos"] .youtube-feed-card:hover,
body[data-page="videos"] .youtube-feed-card:focus-within {
  border-color: rgba(166, 115, 255, 0.56);
  background: rgba(17, 22, 36, 0.94);
  transform: translateY(-2px);
}

body[data-page="videos"] .youtube-feed-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6.45;
  min-height: 0;
  border: 0;
  background:
    linear-gradient(180deg, rgba(5, 8, 15, 0.05), rgba(5, 8, 15, 0.58)),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .youtube-feed-thumb::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(3, 6, 13, 0.45));
}

body[data-page="videos"] .youtube-feed-thumb .play-badge {
  position: absolute;
  left: 30px;
  top: 50%;
  z-index: 2;
  width: 58px;
  height: 58px;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 8, 15, 0.28);
  transform: translateY(-50%);
}

body[data-page="videos"] .youtube-feed-card > div {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 218px;
  padding: 24px 28px 28px;
}

body[data-page="videos"] .youtube-feed-card small {
  color: #b99aff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-page="videos"] .youtube-feed-card h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="videos"] .youtube-feed-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--playlist-muted);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="videos"] .youtube-feed-card .tile-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  margin-top: 10px;
  padding: 0 18px;
  border: 1px solid rgba(166, 115, 255, 0.42);
  border-radius: 8px;
  color: #fff;
  background: rgba(59, 52, 88, 0.72);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body[data-page="videos"] .library-empty {
  grid-column: 1 / -1;
  margin: 0;
  border-color: var(--playlist-line);
  border-radius: 10px;
  background: rgba(11, 15, 27, 0.76);
  color: var(--playlist-muted);
}

body[data-page="videos"] .video-catalog-panel {
  display: none !important;
}

@media (max-width: 1120px) {
  body[data-page="videos"] .library-controlbar {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .library-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  body[data-page="videos"] .exodus-playlist-section {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feed-copy {
    padding: 12px 0 0;
  }
}

@media (max-width: 900px) {
  body[data-page="videos"] .site-shell {
    width: min(100% - 24px, 1540px);
    margin-top: 12px;
  }

  body[data-page="videos"] .video-soon-page.video-playlist-suite,
  body[data-page="videos"] main.video-playlist-suite.subpage,
  body[data-page="videos"] .topbar + main.video-playlist-suite {
    padding: 0 18px 30px;
  }

  body[data-page="videos"] .library-controlbar {
    margin-inline: -18px;
  }

  body[data-page="videos"] .youtube-feature-card,
  body[data-page="videos"] .youtube-feed-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feature-copy {
    border-left: 0;
    border-top: 1px solid rgba(154, 167, 209, 0.18);
  }
}

/* Immersive mobile archive system, 2026-07-10 */
@media (max-width: 640px) {
  :root {
    --mobile-gutter: 18px;
  }

  body {
    background: #02030a;
  }

  .site-shell,
  body[data-page="home"] .site-shell {
    width: 100%;
    margin: 0;
  }

  .topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    min-height: 72px;
    margin: 0;
    padding: 12px var(--mobile-gutter);
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(2, 3, 10, 0.88), rgba(2, 3, 10, 0));
    box-shadow: none;
    backdrop-filter: none;
  }

  .brand,
  .footer-brand span {
    font-size: 18px;
    font-weight: 650;
    letter-spacing: 0.42em;
  }

  .menu-toggle {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 12px;
    place-items: center;
    justify-self: end;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 10px;
    background: rgba(6, 7, 18, 0.52);
    backdrop-filter: blur(14px);
  }

  .menu-toggle span {
    width: 23px;
  }

  .topbar.nav-open {
    border-bottom: 1px solid rgba(176, 125, 255, 0.28);
    background: rgba(4, 5, 15, 0.96);
    backdrop-filter: blur(20px);
  }

  .topbar.nav-open .nav-links {
    top: 72px;
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
    width: auto;
    padding: 10px;
    border: 1px solid rgba(176, 125, 255, 0.28);
    border-radius: 10px;
    background: rgba(5, 6, 18, 0.96);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.68);
  }

  .nav-links a {
    min-height: 48px;
    padding: 14px 12px;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .topbar .socials {
    display: none;
  }

  .subpage {
    padding: 92px var(--mobile-gutter) 30px;
  }

  body[data-page="home"] main {
    display: block;
  }

  body[data-page="home"] .signal-hero {
    min-height: 730px;
    padding: 0 var(--mobile-gutter) 28px;
    display: flex;
    align-items: flex-end;
    border: 0;
    border-radius: 0;
    background: #02030a;
  }

  body[data-page="home"] .signal-hero::before {
    display: block;
    inset: auto 0 0;
    width: auto;
    height: 52%;
    border: 0;
    background: linear-gradient(180deg, transparent, rgba(2, 3, 10, 0.7) 38%, #02030a 92%);
    opacity: 1;
  }

  body[data-page="home"] .hero-art {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background:
      linear-gradient(180deg, rgba(2, 3, 10, 0.04) 0%, rgba(2, 3, 10, 0.02) 54%, #02030a 92%),
      url("assets/rise-remnant-hero.jpg") center top / cover no-repeat;
    filter: saturate(0.92) contrast(1.08) brightness(0.8);
    -webkit-mask-image: none;
    mask-image: none;
  }

  body[data-page="home"] .hero-copy {
    width: 100%;
    padding: 0;
    text-align: center;
  }

  body[data-page="home"] .signal-mark {
    display: none;
  }

  body[data-page="home"] .hero h1 {
    width: 100%;
    margin: 0;
    color: #fff;
    background: none;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(42px, 13vw, 58px);
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1;
    text-indent: 0.22em;
    text-shadow: 0 12px 36px rgba(0, 0, 0, 0.88);
  }

  body[data-page="home"] .tagline {
    max-width: none;
    margin: 22px 0 28px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.9);
  }

  body[data-page="home"] .hero-actions {
    display: block;
  }

  body[data-page="home"] .signal-hero .button.primary {
    min-height: 58px;
    border: 1px solid rgba(183, 115, 255, 0.76);
    border-radius: 10px;
    color: #fff;
    background: rgba(78, 39, 129, 0.7);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 12px 30px rgba(126, 66, 219, 0.28);
    backdrop-filter: blur(16px);
  }

  body[data-page="home"] .signal-hero .button .button-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.13em;
  }

  .mobile-journey {
    display: block;
    padding: 24px 0 30px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: #02030a;
  }

  .mobile-journey-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 var(--mobile-gutter) 18px;
  }

  .mobile-journey-heading h2,
  .mobile-journey-heading a {
    margin: 0;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .mobile-journey-heading h2 {
    color: rgba(255, 255, 255, 0.62);
  }

  .mobile-journey-heading a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b778ff;
  }

  .mobile-journey-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 76vw);
    gap: 12px;
    overflow-x: auto;
    padding: 0 var(--mobile-gutter) 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .mobile-journey-rail::-webkit-scrollbar {
    display: none;
  }

  .mobile-journey-card {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    scroll-snap-align: start;
    background-position: center;
    background-size: cover;
  }

  .mobile-journey-card::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(1, 2, 8, 0.04), rgba(1, 2, 8, 0.88));
  }

  .mobile-journey-card.reality-card {
    background-image: url("assets/reality-unveiled-archive-bg.jpg");
  }

  .mobile-journey-card.exodus-card {
    background-image: url("assets/exodus/images-Image-4-11-26-at-3.15-AM.jpg");
  }

  .mobile-journey-card.contact-card {
    background-image: url("assets/metamorph-hero.jpg");
  }

  .mobile-journey-card-copy {
    position: absolute;
    inset: auto 18px 18px;
    z-index: 1;
    display: grid;
    gap: 13px;
  }

  .mobile-journey-card strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 0.98;
  }

  .mobile-journey-card small {
    color: #f4c451;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .footer,
  body[data-page="home"] .footer,
  body[data-page="videos"] .footer,
  body[data-page="contact"] .footer {
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 0;
    padding: 30px var(--mobile-gutter) 36px;
    border-radius: 0;
    justify-items: center;
    text-align: center;
  }

  .footer-brand {
    gap: 10px;
  }

  .footer-brand small {
    font-size: 9px;
    line-height: 1.5;
  }

  .footer address {
    max-width: 100%;
    font-size: 12px;
  }

  .footer address a {
    overflow-wrap: anywhere;
  }

  body[data-page="videos"] .library-controlbar {
    position: static;
    display: grid;
    gap: 14px;
    padding: 14px;
    border-radius: 10px;
  }

  body[data-page="videos"] .video-library-brand {
    display: none;
  }

  body[data-page="videos"] .library-toolbar {
    display: flex;
    gap: 8px;
    margin: 0 -14px;
    padding: 0 14px 4px;
  }

  body[data-page="videos"] .library-filter {
    min-width: auto;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  body[data-page="videos"] .youtube-feed-section {
    border-radius: 10px;
  }

  body[data-page="videos"] .youtube-feed-copy {
    min-height: 440px;
    padding: 28px 22px;
    align-content: end;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    max-width: 100%;
    font-size: clamp(44px, 14vw, 62px);
    line-height: 0.93;
  }

  body[data-page="videos"] .video-browse-archive {
    width: 100%;
    min-height: 52px;
  }

  body[data-page="library"] .exodus-hero {
    min-height: 610px;
    margin: 0;
    padding: 24px 18px;
    border-radius: 10px;
  }

  body[data-page="library"] .exodus-hero .stream-hero-copy {
    padding-top: 270px;
  }

  body[data-page="library"] .exodus-hero h1 {
    font-size: clamp(46px, 14vw, 62px);
    line-height: 0.94;
  }

  body[data-page="library"] .continue-strip {
    padding: 20px;
    border-radius: 10px;
  }

  body[data-page="contact"] .contact-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body[data-page="contact"] .contact-copy,
  body[data-page="contact"] .contact-form {
    padding: 24px 20px;
    border-radius: 10px;
  }

  body[data-page="contact"] .contact-copy {
    min-height: 420px;
  }

  body[data-page="contact"] .contact-copy h1 {
    max-width: 100%;
    font-size: clamp(44px, 14vw, 62px);
    line-height: 0.95;
    overflow-wrap: normal;
  }

  body[data-page="contact"] .contact-copy p:not(.section-label) {
    font-size: 16px;
    line-height: 1.6;
  }

  body[data-page="contact"] .text-link {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    gap: 8px;
  }

  body[data-page="contact"] .text-link span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  body[data-page="contact"] .contact-form label {
    gap: 8px;
  }

  body[data-page="contact"] .contact-form input,
  body[data-page="contact"] .contact-form select {
    min-height: 52px;
  }

  body[data-page="contact"] .contact-form textarea {
    min-height: 150px;
  }

  body[data-page="contact"] .contact-form .button {
    min-height: 54px;
  }
}

@media (max-width: 560px) {
  body[data-page="videos"] .library-controlbar {
    padding: 16px;
  }

  body[data-page="videos"] .video-library-brand,
  body[data-page="videos"] .library-search,
  body[data-page="videos"] .library-filter {
    min-height: 42px;
  }

  body[data-page="videos"] .library-filter {
    min-width: 82px;
    font-size: 12px;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    font-size: clamp(42px, 14vw, 58px);
  }

  body[data-page="videos"] .youtube-feature-art {
    min-height: 230px;
  }

  body[data-page="videos"] .youtube-feature-copy,
  body[data-page="videos"] .youtube-feed-card > div {
    padding: 24px;
  }
}

/* Reality Unveiled playlist collision resets, 2026-06-17 */
body[data-page="videos"] .youtube-feature-panel {
  order: initial;
  grid-column: 2;
  grid-row: auto;
  width: auto;
  min-height: 0;
  z-index: auto;
}

body[data-page="videos"] .youtube-feature-card {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.58fr);
  min-height: 348px;
  border: 1px solid rgba(154, 167, 209, 0.28);
  border-radius: 10px;
  overflow: hidden;
  background: var(--playlist-card);
}

body[data-page="videos"] .youtube-feature-art {
  position: relative;
  inset: auto;
  min-height: 348px;
}

body[data-page="videos"] .youtube-feature-art .play-badge {
  display: grid;
}

body[data-page="videos"] .youtube-feature-copy {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: auto;
  display: grid;
  width: auto;
  max-width: none;
  padding: 42px 36px;
  border-left: 1px solid rgba(154, 167, 209, 0.18);
  background: transparent;
}

body[data-page="videos"] .youtube-feature-copy small::before {
  content: none;
}

body[data-page="videos"] .youtube-feature-copy strong {
  max-width: none;
  font-size: clamp(26px, 2.25vw, 34px);
  line-height: 1.08;
}

body[data-page="videos"] .youtube-feature-copy > span {
  max-width: 34ch;
  font-size: 17px;
}

body[data-page="videos"] .youtube-feature-copy em {
  min-height: 54px;
  border: 1px solid rgba(166, 115, 255, 0.5);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    rgba(54, 48, 78, 0.72);
}

body[data-page="videos"] .youtube-feed-copy {
  position: static;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: auto;
  display: grid !important;
  min-height: 0;
}

body[data-page="videos"] .youtube-feed-copy h2,
body[data-page="videos"] .youtube-feed-copy p {
  display: block;
}

body[data-page="videos"] .youtube-feed-copy .section-label,
body[data-page="videos"] .video-browse-archive {
  display: none;
}

body[data-page="videos"] .youtube-feed-grid {
  order: initial;
  z-index: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 0;
  padding: 0;
}

@media (max-width: 900px) {
  body[data-page="videos"] .youtube-feature-panel {
    grid-column: 1;
  }

  body[data-page="videos"] .youtube-feature-card,
  body[data-page="videos"] .youtube-feed-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feature-copy {
    border-left: 0;
    border-top: 1px solid rgba(154, 167, 209, 0.18);
  }
}

/* Reality Unveiled Netflix glass browse polish, 2026-06-17 */
body[data-page="videos"] {
  --playlist-gold: #f0c45f;
  --playlist-gold-soft: rgba(240, 196, 95, 0.34);
  --playlist-glass: rgba(13, 18, 31, 0.72);
  --playlist-ink: #f8f8fb;
  --playlist-muted: rgba(229, 231, 241, 0.74);
  background:
    radial-gradient(circle at 76% 8%, rgba(94, 82, 145, 0.28), transparent 34rem),
    radial-gradient(circle at 15% 72%, rgba(240, 196, 95, 0.08), transparent 28rem),
    linear-gradient(180deg, #070b14 0%, #050813 52%, #03050c 100%);
}

body[data-page="videos"] .site-shell {
  width: min(1508px, calc(100vw - 44px)) !important;
  margin: 24px auto 28px;
  border: 1px solid rgba(178, 188, 222, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.055), transparent 18rem),
    linear-gradient(180deg, rgba(18, 24, 40, 0.86), rgba(5, 8, 17, 0.92));
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

body[data-page="videos"] .topbar {
  min-height: 82px;
  padding-inline: 32px;
  border: 0;
  border-bottom: 1px solid rgba(178, 188, 222, 0.13);
  border-radius: 0;
  background:
    radial-gradient(circle at 14% 0%, rgba(220, 231, 255, 0.06), transparent 18rem),
    linear-gradient(180deg, rgba(21, 27, 43, 0.88), rgba(11, 15, 28, 0.82));
}

body[data-page="videos"] .topbar .nav-links a.active::after {
  bottom: -22px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--playlist-gold), transparent);
  box-shadow: 0 0 18px rgba(240, 196, 95, 0.65);
}

body[data-page="videos"] .topbar .socials a {
  border-radius: 8px;
  color: rgba(248, 249, 255, 0.88);
  background: rgba(9, 13, 25, 0.18);
}

body[data-page="videos"] .video-soon-page.video-playlist-suite,
body[data-page="videos"] main.video-playlist-suite.subpage,
body[data-page="videos"] .topbar + main.video-playlist-suite {
  padding: 0 40px 18px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.065), transparent 22rem),
    radial-gradient(circle at 78% 15%, rgba(55, 63, 108, 0.22), transparent 28rem),
    linear-gradient(180deg, rgba(10, 15, 29, 0.92), rgba(4, 7, 15, 0.98));
  box-shadow: none;
}

body[data-page="videos"] .library-controlbar {
  grid-template-columns: minmax(280px, 435px) minmax(520px, 1fr);
  gap: 28px;
  min-height: 88px;
  margin: 0 -40px;
  padding: 22px 42px;
  border-bottom: 1px solid rgba(178, 188, 222, 0.12);
  background:
    radial-gradient(circle at 96% 0%, rgba(240, 196, 95, 0.075), transparent 20rem),
    linear-gradient(180deg, rgba(18, 23, 38, 0.82), rgba(10, 14, 26, 0.9));
  backdrop-filter: blur(18px) saturate(1.1);
}

body[data-page="videos"] .video-library-brand {
  display: none;
}

body[data-page="videos"] .library-search {
  min-height: 50px;
  padding: 0 20px;
  border-color: rgba(197, 207, 236, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)),
    rgba(15, 20, 34, 0.78);
}

body[data-page="videos"] .library-search:focus-within {
  border-color: rgba(240, 196, 95, 0.58);
  box-shadow: 0 0 0 1px rgba(240, 196, 95, 0.2), 0 0 28px rgba(240, 196, 95, 0.12);
}

body[data-page="videos"] .library-search svg {
  color: rgba(250, 250, 255, 0.9);
}

body[data-page="videos"] .library-toolbar {
  gap: 16px;
  justify-content: end;
}

body[data-page="videos"] .library-filter {
  min-width: 100px;
  min-height: 46px;
  border-color: rgba(197, 207, 236, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(10, 14, 26, 0.72);
  box-shadow: none;
  font-size: 13px;
  letter-spacing: 0.05em;
}

body[data-page="videos"] .library-filter.active,
body[data-page="videos"] .library-filter:hover,
body[data-page="videos"] .library-filter:focus-visible {
  border-color: rgba(240, 196, 95, 0.76);
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 196, 95, 0.24), transparent 90%),
    rgba(16, 19, 28, 0.88);
  box-shadow: 0 0 30px rgba(240, 196, 95, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-page="videos"] .exodus-playlist-section {
  grid-template-columns: minmax(340px, 0.44fr) minmax(0, 1.56fr);
  gap: 30px;
  padding-top: 26px;
}

body[data-page="videos"] .youtube-feed-copy {
  gap: 18px;
  padding: 14px 12px 0 22px;
}

body[data-page="videos"] .youtube-feed-copy h2 {
  max-width: 390px;
  font-size: clamp(58px, 4.95vw, 78px);
  font-weight: 500;
  line-height: 0.96;
  text-shadow: 0 20px 54px rgba(0, 0, 0, 0.55);
}

body[data-page="videos"] .youtube-feed-copy h2::after {
  width: 142px;
  height: 2px;
  margin-top: 26px;
  background:
    radial-gradient(circle at 100% 50%, var(--playlist-gold) 0 3px, transparent 4px),
    linear-gradient(90deg, var(--playlist-gold), rgba(240, 196, 95, 0.18));
  box-shadow: 0 0 18px rgba(240, 196, 95, 0.58);
}

body[data-page="videos"] .youtube-feed-copy p {
  color: var(--playlist-muted);
  font-size: 18px;
}

body[data-page="videos"] .youtube-feed-copy .section-label {
  display: none;
}

body[data-page="videos"] .video-browse-archive {
  display: inline-grid;
  grid-template-columns: 24px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 14px;
  width: min(100%, 380px);
  min-height: 52px;
  margin-top: 4px;
  padding: 0 20px;
  border: 1px solid rgba(197, 207, 236, 0.18);
  border-radius: 11px;
  color: rgba(248, 249, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(13, 18, 31, 0.76);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="videos"] .video-browse-archive::after {
  color: rgba(248, 249, 255, 0.86);
  content: "⌄";
}

body[data-page="videos"] .video-browse-archive:hover,
body[data-page="videos"] .video-browse-archive:focus-visible {
  border-color: rgba(240, 196, 95, 0.58);
  box-shadow: 0 0 24px rgba(240, 196, 95, 0.13);
}

body[data-page="videos"] .youtube-feature-card {
  grid-template-columns: minmax(0, 1.34fr) minmax(320px, 0.66fr);
  min-height: 336px;
  border-color: rgba(240, 196, 95, 0.3);
  border-radius: 14px;
  background:
    radial-gradient(circle at 86% 0%, rgba(83, 72, 126, 0.25), transparent 18rem),
    rgba(8, 11, 20, 0.88);
}

body[data-page="videos"] .youtube-feature-art {
  min-height: 336px;
}

body[data-page="videos"] .youtube-feature-art::after {
  background:
    linear-gradient(90deg, rgba(3, 6, 13, 0.12), rgba(3, 6, 13, 0.44) 92%),
    linear-gradient(180deg, rgba(3, 6, 13, 0.04), rgba(3, 6, 13, 0.56));
}

body[data-page="videos"] .youtube-feature-art .play-badge,
body[data-page="videos"] .youtube-feed-thumb .play-badge {
  border-color: rgba(240, 196, 95, 0.94);
  color: var(--playlist-gold);
  background: rgba(6, 9, 17, 0.25);
  box-shadow: 0 0 28px rgba(240, 196, 95, 0.2);
}

body[data-page="videos"] .youtube-feature-copy {
  gap: 18px;
  padding: 38px 40px;
  border-left-color: rgba(240, 196, 95, 0.18);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.045), transparent 12rem),
    rgba(7, 9, 18, 0.6);
}

body[data-page="videos"] .youtube-feature-copy small,
body[data-page="videos"] .youtube-feed-card small {
  color: var(--playlist-gold);
}

body[data-page="videos"] .youtube-feature-copy strong {
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 600;
  letter-spacing: 0.01em;
}

body[data-page="videos"] .youtube-feature-copy > span {
  max-width: 28ch;
  color: var(--playlist-muted);
  font-size: 18px;
}

body[data-page="videos"] .youtube-feature-copy em {
  min-height: 62px;
  padding: 0 34px;
  border-color: rgba(240, 196, 95, 0.72);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 50%, rgba(240, 196, 95, 0.16), transparent 52%),
    rgba(16, 18, 27, 0.86);
  box-shadow: 0 0 26px rgba(240, 196, 95, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="videos"] .youtube-feature-copy em::before,
body[data-page="videos"] .youtube-feed-card .tile-open::before {
  margin-right: 10px;
  color: var(--playlist-gold);
  content: "▶";
}

body[data-page="videos"] .youtube-feed-grid {
  gap: 20px;
}

body[data-page="videos"] .youtube-feed-card {
  border-color: rgba(197, 207, 236, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 84% 0%, rgba(255, 255, 255, 0.05), transparent 12rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(10, 14, 25, 0.76);
  backdrop-filter: blur(14px) saturate(1.1);
}

body[data-page="videos"] .youtube-feed-card:hover,
body[data-page="videos"] .youtube-feed-card:focus-within {
  border-color: rgba(240, 196, 95, 0.5);
  background:
    radial-gradient(circle at 84% 0%, rgba(240, 196, 95, 0.1), transparent 12rem),
    rgba(13, 17, 28, 0.88);
  transform: translateY(-3px);
}

body[data-page="videos"] .youtube-feed-thumb {
  aspect-ratio: 16 / 6;
}

body[data-page="videos"] .youtube-feed-card > div {
  gap: 12px;
  min-height: 224px;
  padding: 22px 26px 26px;
}

body[data-page="videos"] .youtube-feed-card h3 {
  font-size: clamp(22px, 1.65vw, 28px);
  font-weight: 500;
  line-height: 1.12;
}

body[data-page="videos"] .youtube-feed-card p {
  min-height: 48px;
  color: var(--playlist-muted);
  font-size: 17px;
  line-height: 1.35;
}

body[data-page="videos"] .youtube-feed-card .tile-open {
  min-height: 40px;
  margin-top: auto;
  border-color: rgba(240, 196, 95, 0.55);
  color: #fff;
  background: rgba(17, 18, 27, 0.78);
}

body[data-page="videos"] .footer {
  grid-template-columns: minmax(260px, 0.72fr) minmax(300px, 0.72fr) 1fr;
  gap: 34px;
  margin: 18px 28px 22px;
  padding: 22px 32px;
  border-color: rgba(197, 207, 236, 0.14);
  border-radius: 14px;
  background:
    radial-gradient(circle at 62% 0%, rgba(240, 196, 95, 0.06), transparent 22rem),
    rgba(8, 12, 23, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="videos"] .footer address {
  display: none;
}

@media (max-width: 1180px) {
  body[data-page="videos"] .library-controlbar {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .library-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  body[data-page="videos"] .exodus-playlist-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-page="videos"] .site-shell {
    width: min(100vw - 18px, 1508px) !important;
    margin-top: 9px;
    border-radius: 14px;
  }

  body[data-page="videos"] .video-soon-page.video-playlist-suite,
  body[data-page="videos"] main.video-playlist-suite.subpage,
  body[data-page="videos"] .topbar + main.video-playlist-suite {
    padding: 0 16px 20px;
  }

  body[data-page="videos"] .library-controlbar {
    margin-inline: -16px;
    padding: 16px;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    font-size: clamp(44px, 14vw, 62px);
  }

  body[data-page="videos"] .youtube-feature-card,
  body[data-page="videos"] .youtube-feed-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feature-art {
    min-height: 230px;
  }

  body[data-page="videos"] .youtube-feature-copy {
    border-left: 0;
    border-top: 1px solid rgba(240, 196, 95, 0.16);
  }
}

/* Reality Unveiled compact browse shell, 2026-06-17 */
@media (min-width: 901px) {
  body[data-page="videos"] .topbar {
    position: relative;
    z-index: 70;
    min-height: 90px;
    padding-inline: 34px;
    border-bottom: 1px solid rgba(178, 188, 222, 0.13);
    background:
      radial-gradient(circle at 14% 0%, rgba(220, 231, 255, 0.06), transparent 18rem),
      linear-gradient(180deg, rgba(21, 27, 43, 0.88), rgba(11, 15, 28, 0.82));
  }

  body[data-page="videos"] .topbar .brand {
    justify-self: start;
    position: relative;
    z-index: 60;
  }

  body[data-page="videos"] .library-controlbar {
    grid-template-columns: minmax(350px, 435px) minmax(520px, 1fr);
    z-index: 45;
    min-height: 90px;
    margin: 0 -40px;
    padding: 20px 34px;
    background:
      radial-gradient(circle at 96% 0%, rgba(240, 196, 95, 0.08), transparent 20rem),
      linear-gradient(180deg, rgba(19, 24, 39, 0.58), rgba(10, 14, 26, 0.68));
  }

  body[data-page="videos"] .video-soon-page.video-playlist-suite,
  body[data-page="videos"] main.video-playlist-suite.subpage,
  body[data-page="videos"] .topbar + main.video-playlist-suite {
    overflow: visible;
  }

  body[data-page="videos"] .library-filter {
    min-width: 86px;
  }

  body[data-page="videos"] .library-filter[data-filter="leadership"] {
    min-width: 128px;
  }

  body[data-page="videos"] .exodus-playlist-section {
    grid-template-columns: minmax(318px, 0.42fr) minmax(0, 1.58fr);
    gap: 24px;
    padding-top: 22px;
  }

  body[data-page="videos"] .youtube-feed-copy {
    gap: 14px;
    padding-top: 10px;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    max-width: 352px;
    font-size: clamp(52px, 4.4vw, 68px);
  }

  body[data-page="videos"] .youtube-feed-copy h2::after {
    margin-top: 22px;
  }

  body[data-page="videos"] .video-browse-archive {
    min-height: 48px;
    margin-top: 2px;
  }

  body[data-page="videos"] .youtube-feature-card,
  body[data-page="videos"] .youtube-feature-art {
    min-height: 300px;
  }

  body[data-page="videos"] .youtube-feature-copy {
    padding: 34px 36px;
  }

  body[data-page="videos"] .youtube-feature-copy em {
    min-height: 58px;
  }

  body[data-page="videos"] .youtube-feed-grid {
    display: grid;
    grid-auto-columns: calc((100% - 36px) / 3);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-padding-left: 0;
    scroll-snap-type: x proximity;
  }

  body[data-page="videos"] .youtube-feed-grid::-webkit-scrollbar {
    height: 6px;
  }

  body[data-page="videos"] .youtube-feed-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
  }

  body[data-page="videos"] .youtube-feed-grid::-webkit-scrollbar-thumb {
    background: rgba(240, 196, 95, 0.34);
    border-radius: 999px;
  }

  body[data-page="videos"] .youtube-feed-card {
    scroll-snap-align: start;
  }

  body[data-page="videos"] .youtube-feed-card > div {
    min-height: 166px;
    padding: 20px 24px 22px;
  }

  body[data-page="videos"] .youtube-feed-card p {
    min-height: 42px;
  }
}

/* Reality Unveiled rail arrow controls, 2026-06-17 */
.video-rail-arrow {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(240, 196, 95, 0.48);
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 196, 95, 0.18), transparent 72%),
    rgba(8, 11, 19, 0.78);
  box-shadow: 0 0 26px rgba(240, 196, 95, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.video-rail-arrow:hover,
.video-rail-arrow:focus-visible {
  border-color: rgba(240, 196, 95, 0.86);
  box-shadow: 0 0 34px rgba(240, 196, 95, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.video-rail-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.modal-video-browser-shell {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  gap: 12px;
  align-items: center;
}

.modal-video-browser-shell .video-rail-arrow {
  align-self: center;
}

body[data-page="videos"] .youtube-feed-grid {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  grid-auto-columns: initial;
  grid-auto-flow: initial;
  align-items: center;
  gap: 14px;
  overflow: visible;
  padding-bottom: 0;
}

body[data-page="videos"] .video-rail-viewport {
  min-width: 0;
  overflow: hidden;
}

body[data-page="videos"] .video-main-track {
  display: grid;
  grid-auto-columns: calc((100% - 36px) / 3);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-padding-left: 0;
  scroll-snap-type: x proximity;
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar {
  height: 6px;
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(240, 196, 95, 0.34);
}

@media (max-width: 900px) {
  .modal-video-browser-shell,
  body[data-page="videos"] .youtube-feed-grid {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .video-rail-arrow {
    width: 40px;
    height: 40px;
  }

  body[data-page="videos"] .video-main-track {
    grid-auto-columns: minmax(242px, 86%);
  }
}

@media (max-width: 560px) {
  .modal-video-browser-shell {
    grid-template-columns: 1fr 1fr;
  }

  .modal-video-browser-shell .modal-video-browser {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .modal-video-browser-shell .video-rail-arrow {
    grid-row: 2;
    justify-self: center;
    margin-top: 8px;
  }

  body[data-page="videos"] .youtube-feed-grid {
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="videos"] .video-rail-viewport {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body[data-page="videos"] .youtube-feed-grid > .video-rail-arrow {
    grid-row: 2;
    justify-self: center;
  }
}

/* Reality Unveiled premium streaming archive, 2026-06-17 */
html:has(body[data-page="videos"]) {
  background: #02040b;
}

body[data-page="videos"] {
  --ru-bg: #02040b;
  --ru-bg-2: #070b17;
  --ru-panel: rgba(10, 15, 29, 0.68);
  --ru-panel-strong: rgba(12, 17, 31, 0.84);
  --ru-card: rgba(9, 13, 24, 0.74);
  --ru-line: rgba(205, 216, 255, 0.15);
  --ru-line-strong: rgba(240, 196, 95, 0.44);
  --ru-gold: #f1c85d;
  --ru-gold-soft: rgba(241, 200, 93, 0.22);
  --ru-purple: #a77bff;
  --ru-purple-soft: rgba(167, 123, 255, 0.24);
  --ru-ink: #fbfbff;
  --ru-muted: rgba(229, 233, 249, 0.72);
  --ru-dim: rgba(229, 233, 249, 0.52);
  min-height: 100dvh;
  color: var(--ru-ink);
  background:
    radial-gradient(circle at 18% -12%, rgba(167, 123, 255, 0.2), transparent 34rem),
    radial-gradient(circle at 86% 8%, rgba(241, 200, 93, 0.12), transparent 31rem),
    radial-gradient(circle at 50% 78%, rgba(38, 56, 127, 0.24), transparent 42rem),
    linear-gradient(180deg, #01030a 0%, #070b17 46%, #02040b 100%);
  overflow-x: hidden;
}

body[data-page="videos"]::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.065) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 42%, rgba(255, 255, 255, 0.052) 0 1px, transparent 1.4px),
    linear-gradient(115deg, rgba(167, 123, 255, 0.08), transparent 34%, rgba(241, 200, 93, 0.045) 68%, transparent);
  background-size: 180px 180px, 260px 260px, 100% 100%;
  opacity: 0.6;
}

body[data-page="videos"]::after {
  position: fixed;
  inset: auto 0 0;
  z-index: -1;
  height: 46vh;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(2, 4, 11, 0.88));
}

body[data-page="videos"] .site-shell {
  width: min(1556px, calc(100vw - 38px)) !important;
  max-width: none !important;
  margin: 20px auto 28px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 216, 255, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 8%, rgba(167, 123, 255, 0.12), transparent 24rem),
    radial-gradient(circle at 92% 0%, rgba(241, 200, 93, 0.08), transparent 26rem),
    linear-gradient(180deg, rgba(14, 20, 37, 0.82), rgba(3, 6, 14, 0.94));
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-page="videos"] .topbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(560px, 1.45fr) minmax(250px, 0.62fr);
  min-height: 92px;
  margin: 0;
  padding: 0 34px;
  border: 0;
  border-bottom: 1px solid rgba(205, 216, 255, 0.13);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(21, 27, 45, 0.78), rgba(8, 12, 24, 0.62)),
    rgba(6, 9, 18, 0.42);
  backdrop-filter: blur(22px) saturate(1.1);
}

body[data-page="videos"] .topbar::after {
  position: absolute;
  inset: auto 36px 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(167, 123, 255, 0.42), rgba(241, 200, 93, 0.26), transparent);
}

body[data-page="videos"] .brand {
  color: var(--ru-ink);
  text-shadow: 0 0 22px rgba(167, 123, 255, 0.2);
}

body[data-page="videos"] .nav-links {
  justify-self: center;
  gap: clamp(24px, 3vw, 54px);
  width: auto;
  min-height: 100%;
}

body[data-page="videos"] .nav-links a {
  color: rgba(248, 249, 255, 0.76);
  font-size: 12px;
  letter-spacing: 0.16em;
  transition: color 180ms ease, text-shadow 180ms ease;
}

body[data-page="videos"] .nav-links a:hover,
body[data-page="videos"] .nav-links a.active,
body[data-page="videos"] .nav-links a[data-page-link="videos"] {
  color: #fff;
  text-shadow: 0 0 18px rgba(241, 200, 93, 0.22);
}

body[data-page="videos"] .nav-links a.active::after,
body[data-page="videos"] .nav-links a[data-page-link="videos"]::after {
  bottom: -25px;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ru-gold), var(--ru-purple), transparent);
  box-shadow: 0 0 18px rgba(241, 200, 93, 0.5), 0 0 26px rgba(167, 123, 255, 0.32);
}

body[data-page="videos"] .socials {
  gap: 12px;
  justify-self: end;
}

body[data-page="videos"] .socials a,
body[data-page="videos"] .footer-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(205, 216, 255, 0.14);
  border-radius: 12px;
  color: rgba(251, 251, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(10, 14, 27, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body[data-page="videos"] .socials a:hover,
body[data-page="videos"] .footer-socials a:hover {
  border-color: rgba(241, 200, 93, 0.54);
  box-shadow: 0 0 24px rgba(241, 200, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

body[data-page="videos"] .video-soon-page.video-playlist-suite,
body[data-page="videos"] main.video-playlist-suite.subpage,
body[data-page="videos"] .topbar + main.video-playlist-suite {
  display: block;
  min-height: auto;
  margin: 0;
  padding: 0 40px 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 14% 20%, rgba(167, 123, 255, 0.13), transparent 28rem),
    radial-gradient(circle at 83% 34%, rgba(241, 200, 93, 0.075), transparent 30rem),
    linear-gradient(180deg, rgba(7, 12, 26, 0.9), rgba(3, 6, 14, 0.98));
  box-shadow: none;
}

body[data-page="videos"] .library-controlbar {
  position: sticky;
  top: 0;
  z-index: 16;
  display: grid;
  grid-template-columns: minmax(310px, 500px) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  min-height: 94px;
  margin: 0 -40px;
  padding: 20px 40px;
  border: 0;
  border-bottom: 1px solid rgba(205, 216, 255, 0.12);
  border-radius: 0;
  background:
    radial-gradient(circle at 94% 0%, rgba(241, 200, 93, 0.09), transparent 22rem),
    linear-gradient(180deg, rgba(14, 19, 35, 0.82), rgba(7, 11, 23, 0.76));
  backdrop-filter: blur(22px) saturate(1.15);
}

body[data-page="videos"] .video-library-brand {
  display: none;
}

body[data-page="videos"] .library-search {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
  min-height: 56px;
  padding: 0 20px;
  border: 1px solid rgba(205, 216, 255, 0.18);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(11, 16, 30, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 48px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

body[data-page="videos"] .library-search:focus-within {
  border-color: rgba(241, 200, 93, 0.62);
  box-shadow: 0 0 0 1px rgba(241, 200, 93, 0.2), 0 0 34px rgba(241, 200, 93, 0.13);
}

body[data-page="videos"] .library-search svg {
  width: 23px;
  height: 23px;
  color: rgba(251, 251, 255, 0.9);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

body[data-page="videos"] .library-search input {
  color: var(--ru-ink);
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
  outline: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

body[data-page="videos"] .library-search input::placeholder {
  color: rgba(229, 233, 249, 0.62);
}

body[data-page="videos"] .library-toolbar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

body[data-page="videos"] .library-filter {
  min-width: 96px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(205, 216, 255, 0.17);
  border-radius: 999px;
  color: rgba(251, 251, 255, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
    rgba(8, 12, 23, 0.68);
  box-shadow: none;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body[data-page="videos"] .library-filter[data-filter="leadership"] {
  min-width: 138px;
}

body[data-page="videos"] .library-filter.active,
body[data-page="videos"] .library-filter:hover,
body[data-page="videos"] .library-filter:focus-visible {
  border-color: rgba(241, 200, 93, 0.68);
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(241, 200, 93, 0.26), transparent 75%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
    rgba(14, 18, 29, 0.86);
  box-shadow: 0 0 30px rgba(241, 200, 93, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

body[data-page="videos"] .exodus-playlist-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1.58fr);
  gap: 30px;
  margin: 0;
  padding: 34px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="videos"] .exodus-playlist-section[hidden] {
  display: none;
}

body[data-page="videos"] .youtube-feed-copy {
  position: relative;
  display: grid !important;
  align-content: center;
  gap: 18px;
  min-width: 0;
  min-height: 420px;
  padding: 34px 24px;
  overflow: hidden;
  border: 1px solid rgba(205, 216, 255, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 10%, rgba(167, 123, 255, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.012)),
    rgba(8, 12, 23, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(1.12);
}

body[data-page="videos"] .youtube-feed-copy::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(180deg, rgba(4, 6, 13, 0.12), rgba(4, 6, 13, 0.56)),
    url("assets/card-videos.png") center bottom / cover no-repeat;
  opacity: 0.34;
}

body[data-page="videos"] .youtube-feed-copy .section-label {
  display: block;
  margin: 0;
  color: var(--ru-purple);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body[data-page="videos"] .youtube-feed-copy h2 {
  max-width: 9ch;
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(50px, 4.65vw, 78px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.96;
  text-transform: none;
  text-shadow: 0 22px 54px rgba(0, 0, 0, 0.6);
}

body[data-page="videos"] .youtube-feed-copy h2::after {
  display: block;
  width: 154px;
  height: 2px;
  margin-top: 25px;
  content: "";
  background:
    radial-gradient(circle at 100% 50%, var(--ru-gold) 0 3px, transparent 4px),
    linear-gradient(90deg, var(--ru-gold), var(--ru-purple), transparent);
  box-shadow: 0 0 18px rgba(241, 200, 93, 0.46), 0 0 22px rgba(167, 123, 255, 0.24);
}

body[data-page="videos"] .youtube-feed-copy p:not(.section-label) {
  max-width: 29ch;
  margin: 0;
  color: var(--ru-muted);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

body[data-page="videos"] .video-browse-archive {
  display: inline-grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: min(100%, 360px);
  min-height: 54px;
  margin-top: 10px;
  padding: 0 22px;
  border: 1px solid rgba(241, 200, 93, 0.44);
  border-radius: 13px;
  color: #fff;
  background:
    radial-gradient(circle at 20% 0%, rgba(241, 200, 93, 0.16), transparent 65%),
    rgba(8, 12, 23, 0.66);
  box-shadow: 0 0 30px rgba(241, 200, 93, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body[data-page="videos"] .video-browse-archive:hover,
body[data-page="videos"] .video-browse-archive:focus-visible {
  border-color: rgba(241, 200, 93, 0.78);
  box-shadow: 0 0 36px rgba(241, 200, 93, 0.2), 0 0 28px rgba(167, 123, 255, 0.12);
  transform: translateY(-1px);
}

body[data-page="videos"] .video-browse-archive::after {
  content: none;
}

body[data-page="videos"] .video-browse-archive svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ru-gold);
  stroke-width: 1.8;
}

body[data-page="videos"] .youtube-feature-panel {
  display: block !important;
  grid-column: 2;
  min-width: 0;
}

body[data-page="videos"] .youtube-feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(330px, 0.66fr);
  width: 100%;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(241, 200, 93, 0.32);
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 12%, rgba(167, 123, 255, 0.17), transparent 20rem),
    rgba(5, 8, 16, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 90px rgba(0, 0, 0, 0.34);
  text-align: left;
  backdrop-filter: blur(20px) saturate(1.1);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body[data-page="videos"] .youtube-feature-card:hover,
body[data-page="videos"] .youtube-feature-card:focus-visible {
  border-color: rgba(241, 200, 93, 0.62);
  box-shadow: 0 0 38px rgba(241, 200, 93, 0.18), 0 28px 90px rgba(0, 0, 0, 0.38);
  transform: translateY(-2px);
}

body[data-page="videos"] .youtube-feature-art {
  position: relative;
  display: block;
  min-height: 420px;
  background:
    linear-gradient(90deg, rgba(3, 5, 11, 0.08), rgba(3, 5, 11, 0.36) 82%),
    linear-gradient(180deg, rgba(3, 5, 11, 0.02), rgba(3, 5, 11, 0.58)),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .youtube-feature-art::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 26% 44%, rgba(241, 200, 93, 0.12), transparent 14rem),
    linear-gradient(180deg, transparent 42%, rgba(2, 4, 10, 0.56));
}

body[data-page="videos"] .youtube-feature-art .play-badge,
body[data-page="videos"] .youtube-feed-thumb .play-badge,
body[data-page="videos"] .modal-video-thumb .play-badge {
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(241, 200, 93, 0.92);
  color: var(--ru-gold);
  background: rgba(5, 8, 16, 0.34);
  box-shadow: 0 0 30px rgba(241, 200, 93, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
}

body[data-page="videos"] .youtube-feature-art .play-badge {
  position: absolute;
  left: 52px;
  top: 50%;
  z-index: 2;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  transform: translateY(-50%);
}

body[data-page="videos"] .youtube-feature-copy {
  position: static;
  display: grid;
  align-content: center;
  gap: 19px;
  width: auto;
  max-width: none;
  padding: 44px 42px;
  border-left: 1px solid rgba(241, 200, 93, 0.18);
  background:
    radial-gradient(circle at 20% 0%, rgba(167, 123, 255, 0.14), transparent 16rem),
    rgba(5, 7, 15, 0.56);
}

body[data-page="videos"] .youtube-feature-copy small,
body[data-page="videos"] .youtube-feed-card small,
body[data-page="videos"] .video-catalog-card small {
  color: var(--ru-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-page="videos"] .youtube-feature-copy strong {
  max-width: 12ch;
  color: #fff;
  font-size: clamp(30px, 2.25vw, 42px);
  font-weight: 650;
  letter-spacing: 0.012em;
  line-height: 1.04;
  text-transform: uppercase;
}

body[data-page="videos"] .youtube-feature-copy > span {
  max-width: 30ch;
  color: var(--ru-muted);
  font-size: 18px;
  line-height: 1.48;
}

body[data-page="videos"] .youtube-feature-copy em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 62px;
  margin-top: 8px;
  padding: 0 34px;
  border: 1px solid rgba(241, 200, 93, 0.7);
  border-radius: 13px;
  color: #fff;
  background:
    radial-gradient(circle at 14% 50%, rgba(241, 200, 93, 0.2), transparent 50%),
    rgba(10, 13, 23, 0.78);
  box-shadow: 0 0 28px rgba(241, 200, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="videos"] .youtube-feed-status,
body[data-page="videos"] .library-empty {
  grid-column: 1 / -1;
  color: var(--ru-muted);
}

body[data-page="videos"] .youtube-feed-grid {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  padding: 8px 0 0;
  overflow: visible;
}

body[data-page="videos"] .video-rail-viewport {
  min-width: 0;
  overflow: hidden;
}

body[data-page="videos"] .video-main-track {
  display: grid;
  grid-auto-columns: minmax(330px, calc((100% - 44px) / 3));
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 22px;
  overflow-x: auto;
  padding: 4px 0 14px;
  scroll-padding-left: 0;
  scroll-snap-type: x proximity;
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar,
body[data-page="videos"] .modal-video-browser::-webkit-scrollbar {
  height: 7px;
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar-track,
body[data-page="videos"] .modal-video-browser::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

body[data-page="videos"] .video-main-track::-webkit-scrollbar-thumb,
body[data-page="videos"] .modal-video-browser::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(241, 200, 93, 0.46), rgba(167, 123, 255, 0.36));
}

body[data-page="videos"] .youtube-feed-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 216, 255, 0.16);
  border-radius: 17px;
  background:
    radial-gradient(circle at 85% 0%, rgba(167, 123, 255, 0.1), transparent 15rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
    var(--ru-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 52px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px) saturate(1.08);
  scroll-snap-align: start;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

body[data-page="videos"] .youtube-feed-card:hover,
body[data-page="videos"] .youtube-feed-card:focus-within {
  border-color: rgba(241, 200, 93, 0.52);
  background:
    radial-gradient(circle at 85% 0%, rgba(241, 200, 93, 0.12), transparent 15rem),
    rgba(11, 16, 30, 0.86);
  box-shadow: 0 0 32px rgba(241, 200, 93, 0.13), 0 24px 64px rgba(0, 0, 0, 0.32);
  transform: translateY(-4px);
}

body[data-page="videos"] .youtube-feed-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.15;
  min-height: 0;
  border: 0;
  background:
    linear-gradient(180deg, rgba(3, 5, 11, 0.03), rgba(3, 5, 11, 0.62)),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .youtube-feed-thumb::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 18% 50%, rgba(241, 200, 93, 0.08), transparent 9rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(2, 4, 10, 0.48));
}

body[data-page="videos"] .youtube-feed-thumb .play-badge {
  position: absolute;
  left: 26px;
  top: 50%;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  transform: translateY(-50%);
}

body[data-page="videos"] .youtube-feed-card > div {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 214px;
  padding: 23px 26px 26px;
}

body[data-page="videos"] .youtube-feed-card h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: clamp(23px, 1.75vw, 30px);
  font-weight: 650;
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="videos"] .youtube-feed-card p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 46px;
  margin: 0;
  color: var(--ru-muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.42;
  text-transform: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="videos"] .youtube-feed-card .tile-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  margin-top: auto;
  padding: 0 20px;
  border: 1px solid rgba(241, 200, 93, 0.5);
  border-radius: 11px;
  color: #fff;
  background: rgba(9, 12, 22, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body[data-page="videos"] .youtube-feed-card .tile-open:hover,
body[data-page="videos"] .youtube-feed-card .tile-open:focus-visible {
  border-color: rgba(241, 200, 93, 0.82);
  box-shadow: 0 0 22px rgba(241, 200, 93, 0.16);
  transform: translateY(-1px);
}

body[data-page="videos"] .video-rail-arrow {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(241, 200, 93, 0.48);
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(241, 200, 93, 0.22), transparent 74%),
    rgba(6, 9, 18, 0.76);
  box-shadow: 0 0 26px rgba(241, 200, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
}

body[data-page="videos"] .video-rail-arrow:not(:disabled):hover,
body[data-page="videos"] .video-rail-arrow:not(:disabled):focus-visible {
  border-color: rgba(241, 200, 93, 0.86);
  box-shadow: 0 0 34px rgba(241, 200, 93, 0.24), 0 0 24px rgba(167, 123, 255, 0.12);
  transform: translateY(-2px);
}

body[data-page="videos"] .video-rail-arrow:disabled {
  cursor: default;
  opacity: 0.38;
  transform: none;
}

body[data-page="videos"] .video-catalog-panel {
  position: fixed;
  top: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(520px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid rgba(205, 216, 255, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 0%, rgba(167, 123, 255, 0.18), transparent 18rem),
    rgba(6, 10, 20, 0.86);
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.12);
}

body[data-page="videos"] .video-catalog-panel[hidden] {
  display: none !important;
}

body[data-page="videos"] .video-catalog-head {
  border-bottom-color: rgba(205, 216, 255, 0.13);
}

body[data-page="videos"] .video-catalog-head span {
  color: var(--ru-purple);
}

body[data-page="videos"] .video-catalog-head strong {
  color: #fff;
}

body[data-page="videos"] .video-catalog-head button,
body[data-page="videos"] .modal-close {
  border-color: rgba(205, 216, 255, 0.16);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

body[data-page="videos"] .video-catalog-search {
  border-color: rgba(205, 216, 255, 0.16);
  border-radius: 14px;
  background: rgba(8, 12, 23, 0.7);
}

body[data-page="videos"] .video-catalog-card {
  border-color: rgba(205, 216, 255, 0.14);
  border-radius: 15px;
  background: rgba(10, 15, 29, 0.72);
}

body[data-page="videos"] .stream-modal.video-modal {
  width: min(1180px, calc(100vw - 34px));
  max-height: min(900px, calc(100dvh - 34px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 216, 255, 0.16);
  border-radius: 22px;
  color: var(--ru-ink);
  background:
    radial-gradient(circle at 80% 0%, rgba(167, 123, 255, 0.16), transparent 22rem),
    rgba(5, 8, 16, 0.9);
  box-shadow: 0 34px 130px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.08);
}

body[data-page="videos"] .video-modal::backdrop {
  background:
    radial-gradient(circle at 50% 28%, rgba(167, 123, 255, 0.22), transparent 36rem),
    rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(9px);
}

body[data-page="videos"] .modal-player {
  min-height: min(54vw, 520px);
  background:
    linear-gradient(180deg, rgba(3, 5, 11, 0.04), rgba(3, 5, 11, 0.66)),
    var(--card-image) center / cover no-repeat;
}

body[data-page="videos"] .modal-body {
  background:
    radial-gradient(circle at 92% 0%, rgba(241, 200, 93, 0.06), transparent 18rem),
    rgba(6, 9, 18, 0.78);
}

body[data-page="videos"] .modal-tabs {
  border-color: rgba(205, 216, 255, 0.14);
}

body[data-page="videos"] .modal-tabs button {
  color: var(--ru-muted);
}

body[data-page="videos"] .modal-tabs button.active {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--ru-gold);
}

body[data-page="videos"] .modal-video-browser-shell {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 14px;
}

body[data-page="videos"] .modal-video-browser {
  display: grid;
  grid-auto-columns: minmax(250px, 32%);
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-snap-type: x proximity;
}

body[data-page="videos"] .modal-video-card {
  overflow: hidden;
  border: 1px solid rgba(205, 216, 255, 0.14);
  border-radius: 15px;
  background: rgba(10, 15, 29, 0.7);
  scroll-snap-align: start;
}

body[data-page="videos"] .modal-video-card.active {
  border-color: rgba(241, 200, 93, 0.62);
  box-shadow: 0 0 24px rgba(241, 200, 93, 0.16);
}

body[data-page="videos"] .footer {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(250px, 0.6fr) minmax(280px, 0.65fr);
  align-items: center;
  gap: 28px;
  margin: 0 28px 28px;
  padding: 24px 32px;
  border: 1px solid rgba(205, 216, 255, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 72% 0%, rgba(167, 123, 255, 0.1), transparent 24rem),
    rgba(8, 12, 23, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px) saturate(1.08);
}

body[data-page="videos"] .footer-brand span {
  color: #fff;
  letter-spacing: 0.42em;
}

body[data-page="videos"] .footer-brand small {
  color: var(--ru-muted);
}

body[data-page="videos"] .footer-socials {
  justify-self: center;
}

body[data-page="videos"] .footer address {
  display: grid;
  justify-items: end;
  gap: 8px;
  color: var(--ru-muted);
  font-style: normal;
  text-transform: uppercase;
}

body[data-page="videos"] .footer address strong {
  color: var(--ru-purple);
  letter-spacing: 0.11em;
}

body[data-page="videos"] .footer address a {
  color: #fff;
  letter-spacing: 0.08em;
}

@media (max-width: 1200px) {
  body[data-page="videos"] .topbar {
    grid-template-columns: auto 1fr auto;
  }

  body[data-page="videos"] .library-controlbar {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body[data-page="videos"] .library-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  body[data-page="videos"] .exodus-playlist-section {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feed-copy {
    min-height: 320px;
  }

  body[data-page="videos"] .youtube-feature-panel {
    grid-column: 1;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    max-width: 12ch;
  }
}

@media (max-width: 900px) {
  body[data-page="videos"] .site-shell {
    width: min(100vw - 18px, 1556px) !important;
    margin-top: 9px;
    border-radius: 16px;
  }

  body[data-page="videos"] .topbar {
    min-height: 76px;
    padding-inline: 18px;
  }

  body[data-page="videos"] .video-soon-page.video-playlist-suite,
  body[data-page="videos"] main.video-playlist-suite.subpage,
  body[data-page="videos"] .topbar + main.video-playlist-suite {
    padding: 0 16px 22px;
  }

  body[data-page="videos"] .library-controlbar {
    margin-inline: -16px;
    padding: 16px;
  }

  body[data-page="videos"] .youtube-feature-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body[data-page="videos"] .youtube-feature-art {
    min-height: 260px;
  }

  body[data-page="videos"] .youtube-feature-copy {
    border-left: 0;
    border-top: 1px solid rgba(241, 200, 93, 0.16);
    padding: 30px;
  }

  body[data-page="videos"] .youtube-feed-grid {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 10px;
  }

  body[data-page="videos"] .video-main-track {
    grid-auto-columns: minmax(260px, 86%);
    gap: 16px;
  }

  body[data-page="videos"] .video-rail-arrow {
    width: 42px;
    height: 42px;
  }

  body[data-page="videos"] .footer {
    grid-template-columns: 1fr;
    justify-items: start;
    margin: 0 16px 18px;
  }

  body[data-page="videos"] .footer-socials,
  body[data-page="videos"] .footer address {
    justify-self: start;
    justify-items: start;
  }
}

@media (max-width: 560px) {
  body[data-page="videos"] .topbar {
    padding-inline: 14px;
  }

  body[data-page="videos"] .library-search {
    min-height: 50px;
  }

  body[data-page="videos"] .library-filter {
    min-width: 84px;
    min-height: 42px;
    padding: 0 16px;
    font-size: 12px;
  }

  body[data-page="videos"] .library-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    padding-bottom: 0;
  }

  body[data-page="videos"] .library-filter,
  body[data-page="videos"] .library-filter[data-filter="leadership"] {
    width: 100%;
    min-width: 0;
  }

  body[data-page="videos"] .library-filter[data-filter="leadership"] {
    grid-column: 1 / -1;
  }

  body[data-page="videos"] .youtube-feed-copy {
    width: 100%;
    margin-inline: 0 !important;
    min-height: 300px;
    padding: 26px 22px;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    font-size: clamp(42px, 13vw, 58px);
  }

  body[data-page="videos"] .youtube-feature-art {
    min-height: 220px;
  }

  body[data-page="videos"] .youtube-feature-art .play-badge {
    left: 26px;
    width: 64px;
    height: 64px;
  }

  body[data-page="videos"] .youtube-feature-copy strong {
    max-width: none;
    font-size: 28px;
  }

  body[data-page="videos"] .youtube-feed-grid {
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="videos"] .video-rail-viewport {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body[data-page="videos"] .youtube-feed-grid > .video-rail-arrow {
    grid-row: 2;
    justify-self: center;
  }

  body[data-page="videos"] .modal-video-browser-shell {
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="videos"] .modal-video-browser {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-auto-columns: minmax(240px, 88%);
  }

  body[data-page="videos"] .modal-video-browser-shell .video-rail-arrow {
    grid-row: 2;
    justify-self: center;
  }
}

/* Reality Unveiled header alignment refinement, 2026-06-17 */
body[data-page="videos"] .topbar {
  align-items: center;
}

body[data-page="videos"] .topbar .brand,
body[data-page="videos"] .topbar .nav-links,
body[data-page="videos"] .topbar .socials {
  align-self: center;
}

body[data-page="videos"] .topbar .nav-links {
  align-items: center;
  height: 92px;
  min-height: 0;
  padding: 0;
}

body[data-page="videos"] .topbar .nav-links a {
  display: inline-flex;
  align-items: center;
  height: 92px;
  position: relative;
}

body[data-page="videos"] .topbar .nav-links a.active::after,
body[data-page="videos"] .topbar .nav-links a[data-page-link="videos"]::after {
  bottom: 0;
}

@media (max-width: 900px) {
  body[data-page="videos"] .topbar .nav-links,
  body[data-page="videos"] .topbar .nav-links a {
    height: auto;
  }
}

/* PRAUSPER premium music hub redesign, 2026-06-17 */
html:has(body[data-page="music"]) {
  background: #02040b;
  overflow-x: hidden;
}

body[data-page="music"] {
  --hub-bg: #02040b;
  --hub-panel: rgba(10, 15, 29, 0.68);
  --hub-panel-strong: rgba(13, 18, 33, 0.86);
  --hub-card: rgba(8, 12, 23, 0.72);
  --hub-line: rgba(207, 218, 255, 0.15);
  --hub-line-strong: rgba(241, 200, 93, 0.46);
  --hub-gold: #f1c85d;
  --hub-purple: #a77bff;
  --hub-purple-soft: rgba(167, 123, 255, 0.24);
  --hub-ink: #fbfbff;
  --hub-muted: rgba(230, 234, 249, 0.74);
  --music-stage: min(1556px, calc(100vw - 38px));
  display: block;
  min-height: 100dvh;
  padding: 0;
  color: var(--hub-ink);
  background:
    radial-gradient(circle at 20% -12%, rgba(167, 123, 255, 0.22), transparent 36rem),
    radial-gradient(circle at 82% 10%, rgba(241, 200, 93, 0.12), transparent 32rem),
    radial-gradient(circle at 48% 82%, rgba(37, 58, 130, 0.24), transparent 42rem),
    linear-gradient(180deg, #01030a 0%, #070b17 45%, #02040b 100%);
  overflow-x: hidden;
}

body[data-page="music"]::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 38%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1.4px),
    linear-gradient(120deg, rgba(167, 123, 255, 0.08), transparent 32%, rgba(241, 200, 93, 0.045) 72%, transparent);
  background-size: 190px 190px, 270px 270px, 100% 100%;
  opacity: 0.62;
}

body[data-page="music"] .music-launch-shell {
  position: relative;
  display: block;
  width: var(--music-stage);
  height: auto;
  min-height: 0;
  margin: 20px auto 28px;
  overflow: hidden;
  border: 1px solid rgba(207, 218, 255, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 8%, rgba(167, 123, 255, 0.13), transparent 24rem),
    radial-gradient(circle at 94% 2%, rgba(241, 200, 93, 0.08), transparent 28rem),
    linear-gradient(180deg, rgba(14, 20, 37, 0.82), rgba(3, 6, 14, 0.96));
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-page="music"] .music-launch-shell::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 22% 28%, rgba(167, 123, 255, 0.12), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 34%);
}

body[data-page="music"] .music-launch-shell > * {
  position: relative;
  z-index: 1;
}

body[data-page="music"] .topbar {
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(560px, 1.45fr) minmax(250px, 0.62fr);
  align-items: center;
  width: 100%;
  min-height: 92px;
  margin: 0;
  padding: 0 34px;
  border: 0;
  border-bottom: 1px solid rgba(207, 218, 255, 0.13);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(21, 27, 45, 0.78), rgba(8, 12, 24, 0.62)),
    rgba(6, 9, 18, 0.42);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(1.12);
}

body[data-page="music"] .brand {
  justify-self: start;
  color: #fff;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.48em;
  text-shadow: 0 0 20px rgba(167, 123, 255, 0.22);
}

body[data-page="music"] .nav-links {
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 54px);
  width: auto;
  height: 92px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="music"] .nav-links a {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 92px;
  color: rgba(248, 249, 255, 0.76);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.16em;
  white-space: nowrap;
  transition: color 180ms ease, text-shadow 180ms ease;
}

body[data-page="music"] .nav-links a:hover,
body[data-page="music"] .nav-links a.active,
body[data-page="music"] .nav-links a[data-page-link="music"] {
  color: #fff;
  text-shadow: 0 0 18px rgba(241, 200, 93, 0.22);
}

body[data-page="music"] .nav-links a[data-page-link="music"]::after,
body[data-page="music"] .nav-links a.active::after {
  bottom: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hub-gold), var(--hub-purple), transparent);
  box-shadow: 0 0 18px rgba(241, 200, 93, 0.5), 0 0 26px rgba(167, 123, 255, 0.32);
}

body[data-page="music"] .socials {
  justify-self: end;
  display: flex;
  gap: 12px;
}

body[data-page="music"] .socials a,
body[data-page="music"] .music-platform-grid a,
body[data-page="music"] .music-player-controls button {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease, color 180ms ease;
}

body[data-page="music"] .socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(207, 218, 255, 0.14);
  border-radius: 12px;
  color: rgba(251, 251, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(10, 14, 27, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-page="music"] .socials a:hover {
  border-color: rgba(241, 200, 93, 0.54);
  color: #fff;
  box-shadow: 0 0 24px rgba(241, 200, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

body[data-page="music"] .socials svg {
  width: 18px;
  height: 18px;
}

body[data-page="music"] .music-launch-page {
  display: grid;
  gap: 28px;
  min-height: 0;
  padding: 34px 40px 28px !important;
}

body[data-page="music"] .music-launch-hero {
  display: grid;
  grid-template-columns: minmax(430px, 0.86fr) minmax(0, 1.14fr);
  align-items: stretch;
  gap: 28px;
  height: auto;
  min-height: 660px;
  margin: 0;
  padding: 0;
}

body[data-page="music"] .music-launch-copy,
body[data-page="music"] .music-launch-art,
body[data-page="music"] .music-featured-release,
body[data-page="music"] .music-card,
body[data-page="music"] .music-lyrics-panel,
body[data-page="music"] .music-player {
  border: 1px solid rgba(207, 218, 255, 0.15);
  background:
    radial-gradient(circle at 16% 6%, rgba(167, 123, 255, 0.14), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.012)),
    rgba(8, 12, 23, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(1.12);
}

body[data-page="music"] .music-launch-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  min-height: 660px;
  margin: 0;
  padding: clamp(34px, 3.2vw, 58px);
  border-color: rgba(167, 123, 255, 0.34);
  border-radius: 20px;
}

body[data-page="music"] .music-launch-kicker,
body[data-page="music"] .music-section-label {
  margin: 0 0 18px;
  color: var(--hub-purple);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body[data-page="music"] .music-launch-copy h1 {
  max-width: 100%;
  margin: 0 0 28px;
  background: linear-gradient(180deg, #fff 0%, #f7efff 38%, #d8c7ff 64%, #f1c85d 100%);
  background-clip: text;
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(62px, 6.4vw, 108px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.9;
  text-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
  -webkit-text-stroke: 0;
}

body[data-page="music"] .music-launch-rule {
  grid-template-columns: minmax(80px, 1fr) 78px minmax(80px, 1fr);
  width: 100%;
  height: 78px;
  margin: 0 0 26px;
  gap: 18px;
}

body[data-page="music"] .music-launch-rule span {
  height: 2px;
  background: linear-gradient(90deg, var(--hub-gold), var(--hub-purple), transparent);
  box-shadow: 0 0 16px rgba(241, 200, 93, 0.4);
}

body[data-page="music"] .music-launch-rule span:last-child {
  background: linear-gradient(90deg, transparent, var(--hub-purple), var(--hub-gold));
}

body[data-page="music"] .music-launch-rule b {
  width: 78px;
  height: 78px;
  border: 1px solid rgba(241, 200, 93, 0.36);
  background: radial-gradient(circle, rgba(241, 200, 93, 0.22), rgba(54, 35, 96, 0.5) 62%, rgba(8, 10, 22, 0.7));
  box-shadow: 0 0 30px rgba(241, 200, 93, 0.18), inset 0 0 16px rgba(255, 255, 255, 0.08);
}

body[data-page="music"] .music-launch-rule b i {
  background: var(--hub-gold);
  box-shadow: 0 0 12px rgba(241, 200, 93, 0.82);
}

body[data-page="music"] .music-launch-copy p {
  max-width: 560px;
  margin: 0 0 26px;
  color: var(--hub-muted);
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 550;
  line-height: 1.48;
}

body[data-page="music"] .music-launch-copy p strong {
  color: #fff;
  font-weight: 850;
}

body[data-page="music"] .music-status-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 72px;
  margin: 0 0 26px;
  border-color: rgba(207, 218, 255, 0.14);
  border-radius: 14px;
  background: rgba(4, 8, 18, 0.44);
}

body[data-page="music"] .music-status-list span {
  min-height: 72px;
  padding: 0 16px;
}

body[data-page="music"] .music-status-list svg {
  color: var(--hub-gold);
}

body[data-page="music"] .music-status-list strong {
  color: #fff;
  font-size: 11px;
}

body[data-page="music"] .music-launch-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="music"] .music-launch-actions .button {
  min-height: 58px;
  border-radius: 13px;
  font-size: 13px;
  letter-spacing: 0.12em;
}

body[data-page="music"] .music-launch-actions .button.primary {
  border-color: rgba(241, 200, 93, 0.5);
  background:
    radial-gradient(circle at 24% 0%, rgba(241, 200, 93, 0.2), transparent 58%),
    rgba(9, 12, 22, 0.76);
  box-shadow: 0 0 26px rgba(241, 200, 93, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-page="music"] .music-launch-actions .button.secondary {
  border-color: rgba(167, 123, 255, 0.38);
  background:
    radial-gradient(circle at 24% 0%, rgba(167, 123, 255, 0.2), transparent 58%),
    rgba(9, 12, 22, 0.66);
}

body[data-page="music"] .music-launch-actions .button:hover {
  transform: translateY(-2px);
}

body[data-page="music"] .music-launch-art {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 660px;
  margin: 0;
  overflow: hidden;
  border-color: rgba(241, 200, 93, 0.22);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(3, 5, 12, 0.14), rgba(3, 5, 12, 0.02) 42%),
    linear-gradient(180deg, rgba(3, 5, 12, 0.04), rgba(3, 5, 12, 0.6)),
    url("assets/music-realm-bg.png") center 46% / cover no-repeat;
}

body[data-page="music"] .music-launch-art::after {
  position: absolute;
  inset: 24px;
  content: "";
  border: 1px solid rgba(241, 200, 93, 0.2);
  border-radius: 16px;
  box-shadow: inset 0 0 42px rgba(167, 123, 255, 0.12);
}

body[data-page="music"] .music-featured-release {
  display: grid;
  grid-template-columns: minmax(240px, 0.48fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 28px;
  border-color: rgba(241, 200, 93, 0.24);
  border-radius: 20px;
}

body[data-page="music"] .music-release-art {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(4, 8, 18, 0.7);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), 0 0 32px rgba(241, 200, 93, 0.13);
}

body[data-page="music"] .music-release-art img,
body[data-page="music"] .music-card img {
  display: block;
  width: 100%;
  object-fit: cover;
}

body[data-page="music"] .music-release-art img {
  aspect-ratio: 1 / 1;
}

body[data-page="music"] .music-release-copy h2,
body[data-page="music"] .music-section-head h2,
body[data-page="music"] .music-lyrics-panel h2 {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

body[data-page="music"] .music-release-copy h2 {
  max-width: 12ch;
  font-size: clamp(44px, 5vw, 84px);
}

body[data-page="music"] .music-release-copy > p:not(.music-section-label),
body[data-page="music"] .music-lyrics-panel > p {
  max-width: 54ch;
  color: var(--hub-muted);
  font-size: 18px;
  line-height: 1.58;
}

body[data-page="music"] .music-platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

body[data-page="music"] .music-platform-grid a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  border: 1px solid rgba(207, 218, 255, 0.15);
  border-radius: 13px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(8, 12, 23, 0.62);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

body[data-page="music"] .music-platform-grid a:hover {
  border-color: rgba(241, 200, 93, 0.6);
  box-shadow: 0 0 28px rgba(241, 200, 93, 0.15);
  transform: translateY(-2px);
}

body[data-page="music"] .music-release-library {
  display: grid;
  gap: 18px;
}

body[data-page="music"] .music-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

body[data-page="music"] .music-section-head h2,
body[data-page="music"] .music-lyrics-panel h2 {
  font-size: clamp(34px, 3.3vw, 56px);
}

body[data-page="music"] .music-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body[data-page="music"] .music-card {
  overflow: hidden;
  border-radius: 18px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body[data-page="music"] .music-card:hover {
  border-color: rgba(241, 200, 93, 0.46);
  box-shadow: 0 0 32px rgba(241, 200, 93, 0.13), 0 24px 64px rgba(0, 0, 0, 0.32);
  transform: translateY(-4px);
}

body[data-page="music"] .music-card img {
  aspect-ratio: 16 / 9;
}

body[data-page="music"] .music-card div {
  display: grid;
  gap: 8px;
  padding: 22px;
}

body[data-page="music"] .music-card small {
  color: var(--hub-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-page="music"] .music-card h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
}

body[data-page="music"] .music-card p {
  margin: 0;
  color: var(--hub-muted);
}

body[data-page="music"] .music-lyrics-panel {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
  padding: 34px;
  border-color: rgba(167, 123, 255, 0.28);
  border-radius: 20px;
}

body[data-page="music"] .music-player {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: grid;
  grid-template-columns: 78px minmax(230px, 0.72fr) minmax(320px, 1fr) 120px minmax(250px, 0.72fr);
  align-items: center;
  gap: 22px;
  min-height: 104px;
  margin: 0 40px 34px;
  padding: 18px 28px;
  border-color: rgba(241, 200, 93, 0.22);
  border-radius: 20px;
}

body[data-page="music"] .music-player-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-page="music"] .music-player-mark i {
  width: 5px;
  background: var(--hub-gold);
  box-shadow: 0 0 12px rgba(241, 200, 93, 0.68);
}

body[data-page="music"] .music-player-copyright {
  color: var(--hub-muted);
  font-size: 11px;
  line-height: 1.55;
}

body[data-page="music"] .music-player-track {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding-left: 22px;
  border-left: 1px solid rgba(207, 218, 255, 0.14);
}

body[data-page="music"] .music-player-track img {
  width: 66px;
  height: 66px;
  border-radius: 10px;
}

body[data-page="music"] .music-player-track strong {
  color: #fff;
}

body[data-page="music"] .music-player-track span,
body[data-page="music"] .music-player-time {
  color: var(--hub-muted);
}

body[data-page="music"] .music-player-track b i {
  background: linear-gradient(90deg, var(--hub-gold), var(--hub-purple));
  box-shadow: 0 0 14px rgba(241, 200, 93, 0.42);
}

body[data-page="music"] .music-player-controls {
  justify-content: flex-end;
  gap: 16px;
}

body[data-page="music"] .music-player-controls button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(207, 218, 255, 0.12);
  background: rgba(5, 8, 16, 0.45);
}

body[data-page="music"] .music-player-controls button:hover {
  border-color: rgba(241, 200, 93, 0.5);
  transform: translateY(-1px);
}

body[data-page="music"] .music-player-play {
  width: 58px !important;
  height: 58px !important;
  border-color: rgba(241, 200, 93, 0.64) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(241, 200, 93, 0.24), transparent 72%),
    rgba(8, 11, 20, 0.82) !important;
  box-shadow: 0 0 30px rgba(241, 200, 93, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@media (max-width: 1200px) {
  body[data-page="music"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 78px;
    padding: 10px 22px 10px 30px;
  }

  body[data-page="music"] .nav-links,
  body[data-page="music"] .socials {
    display: none;
    height: auto;
  }

  body[data-page="music"] .topbar.nav-open .nav-links,
  body[data-page="music"] .topbar.nav-open .socials {
    display: flex;
  }

  body[data-page="music"] .music-launch-hero,
  body[data-page="music"] .music-featured-release,
  body[data-page="music"] .music-lyrics-panel {
    grid-template-columns: 1fr;
  }

  body[data-page="music"] .music-launch-copy,
  body[data-page="music"] .music-launch-art {
    min-height: 480px;
  }

  body[data-page="music"] .music-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="music"] .music-player {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body[data-page="music"] .music-player-track {
    padding-left: 0;
    border-left: 0;
  }

  body[data-page="music"] .music-player-copyright,
  body[data-page="music"] .music-player-time {
    display: none;
  }

  body[data-page="music"] .music-player-controls {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  body[data-page="music"] {
    --music-stage: min(100vw - 18px, 520px);
  }

  body[data-page="music"] .music-launch-shell {
    margin-top: 9px;
    border-radius: 16px;
  }

  body[data-page="music"] .topbar {
    padding-inline: 14px;
  }

  body[data-page="music"] .brand {
    font-size: 13px;
    letter-spacing: 0.38em;
  }

  body[data-page="music"] .music-launch-page {
    gap: 18px;
    padding: 16px !important;
  }

  body[data-page="music"] .music-launch-copy,
  body[data-page="music"] .music-featured-release,
  body[data-page="music"] .music-lyrics-panel {
    padding: 24px;
  }

  body[data-page="music"] .music-launch-copy {
    min-height: 0;
  }

  body[data-page="music"] .music-launch-art {
    min-height: 340px;
  }

  body[data-page="music"] .music-launch-copy h1 {
    font-size: clamp(58px, 17vw, 86px);
  }

  body[data-page="music"] .music-status-list,
  body[data-page="music"] .music-launch-actions,
  body[data-page="music"] .music-platform-grid,
  body[data-page="music"] .music-card-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="music"] .music-status-list span + span {
    border-top: 1px solid rgba(207, 218, 255, 0.14);
    border-left: 0;
  }

  body[data-page="music"] .music-section-head {
    display: grid;
  }

  body[data-page="music"] .music-release-copy h2 {
    font-size: clamp(38px, 12vw, 54px);
  }

  body[data-page="music"] .music-player {
    grid-template-columns: 1fr;
    margin: 0 16px 16px;
  }

  body[data-page="music"] .music-player-mark {
    display: none;
  }

  body[data-page="music"] .music-player-track {
    grid-template-columns: 64px minmax(0, 1fr);
  }
}

/* Reality Unveiled archive title fit fix, 2026-06-17 */
body[data-page="videos"] .youtube-feed-copy h2 {
  width: min-content;
  max-width: 100%;
  font-size: clamp(42px, 3.55vw, 62px);
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
}

@media (max-width: 1200px) {
  body[data-page="videos"] .youtube-feed-copy h2 {
    font-size: clamp(40px, 5.8vw, 62px);
  }
}

@media (max-width: 560px) {
  body[data-page="videos"] .youtube-feed-copy h2 {
    width: auto;
    font-size: clamp(36px, 10.5vw, 48px);
  }
}

/* Canonical PRAUSPER glass header across all public pages, 2026-06-17 */
body[data-page] .site-shell {
  width: min(100% - 36px, 1980px);
}

body[data-page] .topbar {
  position: sticky;
  top: 18px;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(210px, 0.62fr) minmax(560px, 1.3fr) minmax(230px, 0.52fr);
  align-items: center;
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 0 36px;
  overflow: visible;
  border: 1px solid rgba(144, 126, 210, 0.36);
  border-radius: 14px 14px 0 0;
  color: rgba(246, 247, 255, 0.86);
  background:
    radial-gradient(circle at 62% -160%, rgba(165, 102, 255, 0.28), transparent 28rem),
    linear-gradient(180deg, rgba(14, 19, 35, 0.86), rgba(6, 9, 19, 0.74)),
    rgba(3, 5, 13, 0.68);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(165, 102, 255, 0.16);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

body[data-page] .topbar::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 24%, rgba(165, 102, 255, 0.07) 58%, transparent 82%),
    radial-gradient(circle at 73% 100%, rgba(171, 100, 255, 0.12), transparent 19rem);
}

body[data-page] .topbar .brand {
  justify-self: start;
  color: #f7f8ff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.54em;
  text-shadow: 0 0 22px rgba(181, 140, 255, 0.18);
}

body[data-page] .topbar .nav-links {
  justify-self: center;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 4vw, 72px);
  width: auto;
  min-height: 0;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(241, 242, 250, 0.74);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-page] .topbar .nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 88px;
  color: inherit;
  white-space: nowrap;
  transition: color 180ms ease, text-shadow 180ms ease;
}

body[data-page] .topbar .nav-links a[data-page-link="library"] {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

body[data-page] .topbar .nav-links a:hover,
body[data-page] .topbar .nav-links a.active {
  color: #fff;
  text-shadow: 0 0 18px rgba(178, 118, 255, 0.42);
}

body[data-page] .topbar .nav-links a.active::after {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 46px;
  height: 2px;
  content: "";
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #b47cff 28%, #9b55ff 72%, transparent);
  box-shadow: 0 0 14px rgba(179, 111, 255, 0.78), 0 0 28px rgba(131, 70, 255, 0.38);
}

body[data-page] .topbar .socials {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-page] .topbar .socials a {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border: 1px solid rgba(155, 168, 219, 0.08);
  border-radius: 9px;
  color: rgba(246, 247, 255, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(16, 22, 39, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-page] .topbar .socials a:hover {
  border-color: rgba(180, 124, 255, 0.46);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(180, 124, 255, 0.12), rgba(255, 255, 255, 0.018)),
    rgba(18, 22, 40, 0.56);
  box-shadow: 0 0 22px rgba(164, 96, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

body[data-page] .topbar .socials svg {
  width: 18px;
  height: 18px;
}

body[data-page] .topbar .socials a:nth-child(3) svg,
body[data-page] .topbar .socials a:nth-child(4) svg,
body[data-page] .topbar .socials a:nth-child(5) svg {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 1180px) {
  body[data-page] .topbar {
    grid-template-columns: minmax(170px, 0.4fr) minmax(480px, 1fr) minmax(190px, 0.35fr);
    padding-inline: 24px;
  }

  body[data-page] .topbar .nav-links {
    gap: clamp(20px, 3vw, 42px);
    font-size: 12px;
  }

  body[data-page] .topbar .socials {
    gap: 8px;
  }
}

@media (max-width: 900px) {
  body[data-page] .site-shell {
    width: min(100% - 22px, 620px);
  }

  body[data-page] .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 72px;
    padding: 0 18px;
    border-radius: 14px;
  }

  body[data-page] .menu-toggle {
    display: inline-flex;
    justify-self: end;
  }

  body[data-page] .topbar .nav-links,
  body[data-page] .topbar .socials {
    display: none;
    height: auto;
  }

  body[data-page] .topbar.nav-open .nav-links,
  body[data-page] .topbar.nav-open .socials {
    grid-column: 1 / -1;
    justify-self: stretch;
    display: flex;
  }

  body[data-page] .topbar.nav-open .nav-links {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 14px 0 4px;
  }

  body[data-page] .topbar.nav-open .nav-links a {
    height: auto;
    padding: 14px 0;
  }

  body[data-page] .topbar.nav-open .nav-links a.active::after {
    bottom: 6px;
    left: 0;
    transform: none;
  }

  body[data-page] .topbar.nav-open .socials {
    justify-content: flex-start;
    padding: 10px 0 18px;
  }
}

/* Premium mobile optimization pass, 2026-06-18 */
@media (max-width: 760px) {
  html,
  body[data-page] {
    max-width: 100%;
    overflow-x: hidden;
  }

  body[data-page] {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body[data-page] .site-shell,
  body[data-page="music"] .music-launch-shell,
  body[data-page="about"] .about-launch-shell {
    width: min(100% - 16px, 520px);
    margin: 8px auto 18px;
  }

  body[data-page] .topbar {
    top: 8px;
    min-height: 64px;
    padding: 0 14px 0 17px;
    border-radius: 15px;
    border-color: rgba(173, 150, 255, 0.34);
    background:
      radial-gradient(circle at 82% 0%, rgba(169, 96, 255, 0.2), transparent 12rem),
      linear-gradient(180deg, rgba(15, 20, 37, 0.92), rgba(5, 8, 17, 0.8)),
      rgba(3, 5, 12, 0.78);
    box-shadow:
      0 16px 46px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  body[data-page] .topbar .brand {
    max-width: min-content;
    font-size: 14px;
    letter-spacing: 0.42em;
  }

  body[data-page] .menu-toggle {
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(185, 160, 255, 0.24);
    border-radius: 12px;
    color: #f8f7ff;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
      rgba(19, 22, 40, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 18px rgba(147, 91, 255, 0.12);
  }

  body[data-page] .menu-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 10px rgba(183, 125, 255, 0.5);
  }

  body[data-page] .topbar.nav-open {
    align-content: start;
    padding-bottom: 2px;
  }

  body[data-page] .topbar.nav-open .nav-links {
    gap: 4px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(194, 174, 255, 0.15);
    border-radius: 14px;
    background:
      radial-gradient(circle at 92% 10%, rgba(168, 103, 255, 0.14), transparent 12rem),
      rgba(7, 10, 22, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  }

  body[data-page] .topbar.nav-open .nav-links a {
    min-height: 44px;
    padding: 13px 12px;
    border-radius: 10px;
    color: rgba(245, 245, 252, 0.84);
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  body[data-page] .topbar.nav-open .nav-links a.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(169, 103, 255, 0.18), rgba(241, 200, 93, 0.06));
  }

  body[data-page] .topbar.nav-open .nav-links a.active::after {
    left: 12px;
    bottom: 7px;
    width: 42px;
  }

  body[data-page] .topbar.nav-open .socials {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 0 14px;
  }

  body[data-page] .topbar.nav-open .socials a {
    width: 100%;
    min-height: 42px;
  }

  body[data-page] main,
  body[data-page] .subpage,
  body[data-page] .signal-home,
  body[data-page] .music-launch-page,
  body[data-page] .about-launch-page {
    gap: 16px;
  }

  body[data-page] .button,
  body[data-page] .button.compact,
  body[data-page] button,
  body[data-page] input,
  body[data-page] select,
  body[data-page] textarea {
    max-width: 100%;
  }

  body[data-page] .button,
  body[data-page] .button.compact {
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }

  body[data-page] .hero-actions,
  body[data-page] .about-actions,
  body[data-page] .music-launch-actions,
  body[data-page] .modal-actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  body[data-page] .footer,
  body[data-page="music"] .music-player,
  body[data-page="about"] .about-launch-footer {
    margin-top: 18px;
    padding: 18px;
    border-radius: 16px;
    text-align: center;
  }

  body[data-page] .footer-brand,
  body[data-page] .footer address,
  body[data-page="music"] .music-player-track {
    justify-items: center;
    text-align: center;
  }

  body[data-page] .footer-socials {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .signal-hero {
    min-height: calc(100svh - 92px);
    padding: clamp(28px, 8vw, 44px) 18px;
    border-radius: 18px;
    background-position: center top, center top;
  }

  body[data-page="home"] .signal-hero::after {
    opacity: 0.54;
    background-position: center bottom;
    background-size: auto 68%;
  }

  body[data-page="home"] .signal-hero .hero-copy {
    width: 100%;
    max-width: 100%;
    padding-top: min(25svh, 160px);
    text-align: center;
    align-items: center;
  }

  body[data-page="home"] .signal-hero h1 {
    font-size: clamp(56px, 18vw, 82px);
    line-height: 0.92;
    word-break: normal;
  }

  body[data-page="home"] .signal-hero .tagline,
  body[data-page="home"] .signal-role {
    max-width: 22rem;
    margin-inline: auto;
  }

  body[data-page="home"] .signal-manifesto,
  body[data-page="home"] .signal-timeline,
  body[data-page="home"] .home-release,
  body[data-page="home"] .home-about {
    border-radius: 18px;
    padding: 22px;
  }

  body[data-page="home"] .timeline-grid,
  body[data-page="home"] .home-release,
  body[data-page="home"] .home-about {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-page="videos"] .video-soon-page.video-playlist-suite,
  body[data-page="videos"] main.video-playlist-suite.subpage,
  body[data-page="videos"] .topbar + main.video-playlist-suite {
    width: 100%;
    gap: 16px;
    padding: 14px 0 0;
  }

  body[data-page="videos"] .library-controlbar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  body[data-page="videos"] .video-library-brand {
    justify-self: stretch;
    text-align: center;
  }

  body[data-page="videos"] .library-search {
    min-width: 0;
    width: 100%;
  }

  body[data-page="videos"] .library-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    overflow: visible;
  }

  body[data-page="videos"] .library-filter,
  body[data-page="videos"] .library-filter[data-filter="leadership"] {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  body[data-page="videos"] .library-filter[data-filter="leadership"] {
    grid-column: 1 / -1;
  }

  body[data-page="videos"] .youtube-feed-section {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
  }

  body[data-page="videos"] .youtube-feed-copy {
    min-height: 0;
    padding: 24px 20px;
    text-align: center;
    justify-items: center;
    border-radius: 16px;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    width: auto;
    max-width: 9ch;
    margin-inline: auto;
    font-size: clamp(40px, 13vw, 54px);
    line-height: 0.98;
  }

  body[data-page="videos"] .youtube-feed-copy p:not(.section-label) {
    font-size: 16px;
    line-height: 1.55;
  }

  body[data-page="videos"] .video-browse-archive {
    width: 100%;
    min-height: 54px;
  }

  body[data-page="videos"] .youtube-feature-card,
  body[data-page="videos"] .youtube-feature-panel,
  body[data-page="videos"] .youtube-feature-art,
  body[data-page="videos"] .youtube-feature-copy {
    border-radius: 16px;
  }

  body[data-page="videos"] .youtube-feature-card {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feature-art {
    min-height: 220px;
  }

  body[data-page="videos"] .youtube-feature-copy {
    padding: 20px;
  }

  body[data-page="videos"] .youtube-feature-copy strong {
    font-size: clamp(24px, 8vw, 34px);
  }

  body[data-page="videos"] .video-rail-viewport,
  body[data-page="videos"] .modal-video-browser {
    scroll-padding-inline: 4px;
  }

  body[data-page="videos"] .video-card,
  body[data-page="videos"] .modal-video-card {
    min-width: min(82vw, 320px);
    border-radius: 16px;
  }

  body[data-page="videos"] .video-rail-arrow {
    width: 44px;
    height: 44px;
  }

  body[data-page="videos"] .video-modal {
    width: min(100% - 16px, 560px);
    max-height: calc(100svh - 18px);
    border-radius: 18px;
  }
}

@media (max-width: 760px) {
  body[data-page="music"] .music-launch-shell {
    border-radius: 18px;
  }

  body[data-page="music"] .music-launch-page {
    padding: 14px !important;
  }

  body[data-page="music"] .music-launch-hero,
  body[data-page="music"] .music-featured-release,
  body[data-page="music"] .music-lyrics-panel,
  body[data-page="music"] .music-player {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  body[data-page="music"] .music-launch-copy,
  body[data-page="music"] .music-featured-release,
  body[data-page="music"] .music-lyrics-panel {
    padding: 22px;
  }

  body[data-page="music"] .music-launch-copy h1 {
    font-size: clamp(54px, 18vw, 82px);
    line-height: 0.9;
  }

  body[data-page="music"] .music-launch-rule {
    max-width: 100%;
  }

  body[data-page="music"] .music-status-list,
  body[data-page="music"] .music-platform-grid,
  body[data-page="music"] .music-card-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="music"] .music-launch-art {
    min-height: 300px;
    order: -1;
  }

  body[data-page="music"] .music-release-art img,
  body[data-page="music"] .music-card img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  body[data-page="music"] .music-release-copy h2,
  body[data-page="music"] .music-section-head h2,
  body[data-page="music"] .music-lyrics-panel h2 {
    font-size: clamp(34px, 11vw, 48px);
  }

  body[data-page="music"] .music-player {
    position: sticky;
    bottom: 8px;
    z-index: 30;
    margin: 0 8px 8px;
    padding: 12px;
    text-align: left;
  }

  body[data-page="music"] .music-player-track {
    grid-template-columns: 54px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  body[data-page="music"] .music-player-controls {
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 760px) {
  body[data-page="about"] .about-launch-page,
  body[data-page="contact"] .subpage,
  body[data-page="merch"] .subpage,
  body[data-page="library"] .subpage {
    padding-inline: 0;
  }

  body[data-page="about"] .about-launch-hero,
  body[data-page="about"] .about-launch-copy,
  body[data-page="about"] .about-launch-visual,
  body[data-page="contact"] .contact-layout,
  body[data-page="merch"] .merch-hero,
  body[data-page="library"] .exodus-hero {
    border-radius: 18px;
  }

  body[data-page="about"] .about-launch-hero,
  body[data-page="contact"] .contact-layout,
  body[data-page="merch"] .merch-hero,
  body[data-page="library"] .exodus-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body[data-page="about"] .about-launch-copy,
  body[data-page="contact"] .contact-layout,
  body[data-page="merch"] .merch-hero-copy,
  body[data-page="library"] .exodus-hero .stream-hero-copy {
    padding: 24px 20px;
  }

  body[data-page="about"] .about-launch-copy h1,
  body[data-page="contact"] .contact-layout h1,
  body[data-page="merch"] .merch-hero-copy h1,
  body[data-page="library"] .exodus-hero h1 {
    max-width: 100%;
    font-size: clamp(42px, 13vw, 64px);
    line-height: 0.98;
  }

  body[data-page="contact"] .contact-form,
  body[data-page="contact"] .contact-card,
  body[data-page="contact"] input,
  body[data-page="contact"] select,
  body[data-page="contact"] textarea {
    width: 100%;
  }

  body[data-page="contact"] textarea {
    min-height: 150px;
  }

  body[data-page="merch"] .merch-actions,
  body[data-page="library"] .exodus-hero .hero-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  body[data-page] .site-shell,
  body[data-page="music"] .music-launch-shell,
  body[data-page="about"] .about-launch-shell {
    width: calc(100% - 12px);
  }

  body[data-page] .topbar {
    min-height: 60px;
    padding-inline: 12px;
  }

  body[data-page] .topbar .brand {
    font-size: 12px;
    letter-spacing: 0.36em;
  }

  body[data-page] .topbar.nav-open .nav-links a {
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    font-size: clamp(36px, 12vw, 46px);
  }

  body[data-page="home"] .signal-hero h1,
  body[data-page="music"] .music-launch-copy h1 {
    font-size: clamp(48px, 17vw, 68px);
  }
}

/* Shared header overflow repair, 2026-06-18 */
html,
body[data-page] {
  max-width: 100%;
  overflow-x: hidden;
}

body[data-page] .site-shell,
body[data-page="music"] .music-launch-shell,
body[data-page="about"] .about-launch-shell {
  max-width: calc(100vw - 24px);
}

body[data-page] .topbar {
  box-sizing: border-box;
  grid-template-columns: minmax(150px, 0.58fr) minmax(0, 1.72fr) max-content;
  column-gap: clamp(14px, 2vw, 34px);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

body[data-page] .topbar .brand,
body[data-page] .topbar .nav-links,
body[data-page] .topbar .socials {
  min-width: 0;
}

body[data-page] .topbar .brand {
  width: auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

body[data-page] .topbar .nav-links {
  justify-self: center;
  width: 100%;
  max-width: 980px;
  gap: clamp(18px, 2.8vw, 58px);
  overflow: hidden;
}

body[data-page] .topbar .nav-links a {
  flex: 0 1 auto;
  min-width: 0;
}

body[data-page] .topbar .socials {
  width: auto;
  max-width: max-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 1360px) {
  body[data-page] .topbar {
    grid-template-columns: minmax(132px, 0.42fr) minmax(0, 1fr) max-content;
    padding-inline: 22px;
    column-gap: 16px;
  }

  body[data-page] .topbar .brand {
    font-size: 14px;
    letter-spacing: 0.44em;
  }

  body[data-page] .topbar .nav-links {
    gap: clamp(14px, 2vw, 28px);
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  body[data-page] .topbar .nav-links a[data-page-link="library"] {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  body[data-page] .topbar .socials {
    gap: 7px;
  }

  body[data-page] .topbar .socials a {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 1120px) and (min-width: 901px) {
  body[data-page] .topbar {
    grid-template-columns: minmax(130px, 0.34fr) minmax(0, 1fr);
    padding-inline: 20px;
  }

  body[data-page] .topbar .socials {
    display: none;
  }

  body[data-page] .topbar .nav-links {
    justify-self: end;
    max-width: 100%;
    gap: clamp(14px, 2.4vw, 30px);
  }
}

@media (max-width: 900px) {
  body[data-page] .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: visible;
  }

  body[data-page] .topbar .nav-links {
    max-width: none;
    overflow: visible;
  }
}

/* Music page header hard reset, 2026-06-18 */
html:has(body[data-page="music"]),
body[data-page="music"] {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body[data-page="music"] .music-launch-shell {
  width: min(100% - 24px, 1980px) !important;
  max-width: calc(100vw - 24px) !important;
  margin-inline: auto !important;
  overflow-x: hidden;
}

body[data-page="music"] .topbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 56px);
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  padding-inline: clamp(22px, 2.8vw, 42px);
  transform: none !important;
}

body[data-page="music"] .topbar .brand {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 220px;
  overflow: visible;
}

body[data-page="music"] .topbar .menu-toggle {
  flex: 0 0 auto;
}

body[data-page="music"] .topbar .nav-links {
  flex: 1 1 auto;
  justify-self: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  justify-content: center;
  gap: clamp(22px, 3.6vw, 68px);
  overflow: hidden;
}

body[data-page="music"] .topbar .socials {
  flex: 0 0 auto;
  justify-self: auto;
  width: auto;
  min-width: max-content;
}

@media (max-width: 1280px) and (min-width: 901px) {
  body[data-page="music"] .topbar {
    gap: 18px;
    padding-inline: 22px;
  }

  body[data-page="music"] .topbar .brand {
    max-width: 180px;
    font-size: 14px;
    letter-spacing: 0.42em;
  }

  body[data-page="music"] .topbar .nav-links {
    justify-content: flex-end;
    gap: clamp(14px, 2vw, 28px);
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  body[data-page="music"] .topbar .nav-links a[data-page-link="library"] {
    font-size: 11px;
    letter-spacing: 0.05em;
  }

  body[data-page="music"] .topbar .socials {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body[data-page="music"] .music-launch-shell {
    width: min(100% - 16px, 560px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  body[data-page="music"] .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    padding-inline: 16px;
    overflow: visible;
  }

  body[data-page="music"] .topbar .brand {
    max-width: 100%;
    font-size: 14px;
    letter-spacing: 0.4em;
  }

  body[data-page="music"] .topbar .nav-links,
  body[data-page="music"] .topbar .socials {
    display: none !important;
    width: 100%;
  }

  body[data-page="music"] .topbar.nav-open .nav-links {
    display: flex !important;
    max-width: none;
    overflow: visible;
  }

  body[data-page="music"] .topbar.nav-open .socials {
    display: grid !important;
    min-width: 0;
  }
}

/* Exodus Project heading clearance, 2026-06-18 */
body[data-page="library"] .exodus-blog-index {
  padding-top: 24px;
}

body[data-page="library"] .exodus-blog-index .shelf-heading {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  width: min(720px, calc(100% - 48px));
  min-height: 0;
  margin: 0 auto 28px;
  transform: none;
  text-align: center;
}

body[data-page="library"] .exodus-blog-index .shelf-heading h2 {
  width: 100%;
  max-width: 100%;
  line-height: 0.94;
  text-align: center;
}

body[data-page="library"] .exodus-blog-index .shelf-heading h2::before {
  width: 100%;
  text-align: center;
}

body[data-page="library"] .exodus-blog-index .exodus-publish-row {
  margin-top: 0;
}

@media (max-width: 760px) {
  body[data-page="library"] .exodus-blog-index {
    padding-top: 14px;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading {
    width: calc(100% - 20px);
    margin-bottom: 16px;
  }
}

/* Reality Unveiled modal video browser restore, 2026-06-18 */
body[data-page="videos"] .stream-modal.video-modal {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(241, 200, 93, 0.48) rgba(255, 255, 255, 0.06);
}

body[data-page="videos"] .stream-modal.video-modal::-webkit-scrollbar {
  width: 8px;
}

body[data-page="videos"] .stream-modal.video-modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

body[data-page="videos"] .stream-modal.video-modal::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(241, 200, 93, 0.48);
}

body[data-page="videos"] .stream-modal.video-modal .modal-player {
  min-height: clamp(300px, 38vw, 460px);
}

body[data-page="videos"] .modal-now-playing-rail {
  position: relative;
  padding: 18px 24px 16px;
  border-top: 1px solid rgba(205, 216, 255, 0.14);
  border-bottom: 1px solid rgba(205, 216, 255, 0.1);
  background:
    radial-gradient(circle at 14% 0%, rgba(241, 200, 93, 0.12), transparent 20rem),
    radial-gradient(circle at 86% 14%, rgba(167, 123, 255, 0.16), transparent 24rem),
    rgba(5, 8, 16, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(1.08);
}

body[data-page="videos"] .modal-now-playing-rail[hidden],
body[data-page="videos"] .modal-now-playing-rail:empty {
  display: none;
}

body[data-page="videos"] .modal-now-playing-rail::before {
  display: block;
  margin: 0 0 12px 62px;
  color: var(--ru-purple, #a77bff);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  content: "More Reality Unveiled";
}

body[data-page="videos"] .modal-now-playing-rail .modal-video-browser {
  grid-auto-columns: minmax(220px, 28%);
  padding-bottom: 10px;
}

body[data-page="videos"] .modal-now-playing-rail .modal-video-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(167, 123, 255, 0.12), transparent 16rem),
    rgba(10, 15, 29, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body[data-page="videos"] .modal-now-playing-rail .modal-video-card:hover {
  border-color: rgba(241, 200, 93, 0.58);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34), 0 0 22px rgba(167, 123, 255, 0.12);
  transform: translateY(-2px);
}

body[data-page="videos"] .modal-now-playing-rail .modal-video-card.active {
  border-color: rgba(241, 200, 93, 0.78);
  box-shadow: 0 0 28px rgba(241, 200, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@media (max-width: 760px) {
  body[data-page="videos"] .stream-modal.video-modal .modal-player {
    min-height: clamp(230px, 56vw, 330px);
  }

  body[data-page="videos"] .modal-now-playing-rail {
    padding: 16px 14px 14px;
  }

  body[data-page="videos"] .modal-now-playing-rail::before {
    margin-left: 0;
    font-size: 11px;
  }

body[data-page="videos"] .modal-now-playing-rail .modal-video-browser {
    grid-auto-columns: minmax(230px, 86%);
  }
}

/* Unified PRAUSPER cinematic design system, 2026-06-18 */
:root {
  --prausper-bg: #02040b;
  --prausper-bg-2: #070b18;
  --prausper-panel: rgba(10, 15, 29, 0.68);
  --prausper-panel-strong: rgba(12, 17, 31, 0.88);
  --prausper-card: rgba(9, 13, 25, 0.72);
  --prausper-card-soft: rgba(15, 19, 35, 0.58);
  --prausper-border: rgba(205, 216, 255, 0.16);
  --prausper-border-strong: rgba(185, 157, 255, 0.38);
  --prausper-gold: #f1c85d;
  --prausper-gold-soft: rgba(241, 200, 93, 0.18);
  --prausper-purple: #a77bff;
  --prausper-purple-soft: rgba(167, 123, 255, 0.22);
  --prausper-ink: #fbfbff;
  --prausper-muted: rgba(229, 234, 250, 0.72);
  --prausper-dim: rgba(229, 234, 250, 0.52);
  --prausper-radius: 18px;
  --prausper-radius-sm: 12px;
  --prausper-shadow: 0 30px 110px rgba(0, 0, 0, 0.54);
  --prausper-glow: 0 0 34px rgba(167, 123, 255, 0.2), 0 0 48px rgba(241, 200, 93, 0.08);
  --prausper-stage: min(100% - 36px, 1640px);
  --prausper-section: clamp(22px, 3vw, 46px);
}

html:has(body[data-page]) {
  background: var(--prausper-bg);
}

body[data-page] {
  --gold: var(--prausper-gold);
  --gold-bright: #ffe89c;
  --text: var(--prausper-ink);
  --muted: var(--prausper-muted);
  min-width: 320px;
  color: var(--prausper-ink);
  background:
    radial-gradient(circle at 16% -8%, rgba(167, 123, 255, 0.24), transparent 36rem),
    radial-gradient(circle at 86% 4%, rgba(241, 200, 93, 0.12), transparent 32rem),
    radial-gradient(circle at 48% 78%, rgba(40, 58, 128, 0.22), transparent 42rem),
    linear-gradient(180deg, #01030a 0%, #070b18 46%, #02040b 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body[data-page]::before {
  z-index: -2;
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.055) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 36%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1.4px),
    linear-gradient(115deg, rgba(167, 123, 255, 0.075), transparent 34%, rgba(241, 200, 93, 0.045) 70%, transparent);
  background-size: 190px 190px, 290px 290px, 100% 100%;
  mask-image: radial-gradient(circle at 50% 20%, black, transparent 82%);
  opacity: 0.88;
}

body[data-page]::after {
  z-index: -1;
  background:
    radial-gradient(circle at center, transparent 0 48%, rgba(0, 0, 0, 0.66) 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.28) 100%);
}

body[data-page] .site-shell,
body[data-page="music"] .music-launch-shell,
body[data-page="about"] .about-launch-shell {
  position: relative;
  width: var(--prausper-stage) !important;
  max-width: calc(100vw - 36px) !important;
  margin: 18px auto 28px !important;
  overflow: hidden;
  border: 1px solid rgba(205, 216, 255, 0.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 9% 6%, rgba(167, 123, 255, 0.13), transparent 26rem),
    radial-gradient(circle at 96% 3%, rgba(241, 200, 93, 0.07), transparent 30rem),
    linear-gradient(180deg, rgba(13, 19, 36, 0.84), rgba(4, 7, 16, 0.96));
  box-shadow: var(--prausper-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-page] .site-shell::before,
body[data-page="music"] .music-launch-shell::before,
body[data-page="about"] .about-launch-shell::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 22%, rgba(167, 123, 255, 0.045), transparent 74%),
    radial-gradient(circle at 64% 0%, rgba(167, 123, 255, 0.12), transparent 24rem);
}

body[data-page] .site-shell > *,
body[data-page="music"] .music-launch-shell > *,
body[data-page="about"] .about-launch-shell > * {
  position: relative;
  z-index: 1;
}

body[data-page] .topbar,
body[data-page="music"] .topbar {
  position: sticky !important;
  top: 18px;
  z-index: 80;
  display: grid !important;
  grid-template-columns: minmax(160px, 0.46fr) minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: clamp(16px, 2.4vw, 38px) !important;
  width: calc(100% - 34px) !important;
  max-width: calc(100% - 34px) !important;
  min-height: 78px;
  margin: 16px auto 0;
  padding: 0 clamp(20px, 2.8vw, 42px) !important;
  overflow: visible !important;
  border: 1px solid rgba(168, 151, 229, 0.36);
  border-radius: 16px;
  color: rgba(246, 247, 255, 0.86);
  background:
    radial-gradient(circle at 62% -145%, rgba(167, 123, 255, 0.34), transparent 28rem),
    linear-gradient(180deg, rgba(15, 20, 37, 0.88), rgba(5, 8, 18, 0.72)),
    rgba(4, 6, 15, 0.7);
  box-shadow:
    0 24px 74px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(167, 123, 255, 0.16);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  transform: none !important;
}

body[data-page] .topbar .brand,
body[data-page="music"] .topbar .brand,
body[data-page] .footer-brand span {
  justify-self: start;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  overflow: visible;
  color: #f7f8ff;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 520;
  letter-spacing: clamp(0.34em, 0.55vw, 0.54em);
  line-height: 1;
  text-shadow: 0 0 24px rgba(181, 140, 255, 0.22);
}

body[data-page] .topbar .nav-links,
body[data-page="music"] .topbar .nav-links {
  justify-self: center !important;
  align-self: stretch;
  display: flex !important;
  flex: initial !important;
  align-items: center;
  justify-content: center !important;
  gap: clamp(18px, 3vw, 56px) !important;
  width: 100% !important;
  max-width: 980px !important;
  height: auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(241, 242, 250, 0.72);
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 780;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-page] .topbar .nav-links a,
body[data-page="music"] .topbar .nav-links a {
  display: inline-flex;
  align-items: center;
  height: 78px;
  min-width: 0;
  color: inherit;
  white-space: nowrap;
  transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
}

body[data-page] .topbar .nav-links a[data-page-link="library"] {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
}

body[data-page] .topbar .nav-links a:hover,
body[data-page] .topbar .nav-links a.active,
body[data-page="music"] .topbar .nav-links a:hover,
body[data-page="music"] .topbar .nav-links a.active,
body[data-page="music"] .topbar .nav-links a[data-page-link="music"] {
  color: #fff;
  text-shadow: 0 0 18px rgba(178, 118, 255, 0.44);
}

body[data-page] .topbar .nav-links a.active::after,
body[data-page="music"] .topbar .nav-links a[data-page-link="music"]::after,
body[data-page="videos"] .topbar .nav-links a[data-page-link="videos"]::after {
  bottom: 9px;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--prausper-purple) 28%, var(--prausper-gold) 72%, transparent);
  box-shadow: 0 0 14px rgba(179, 111, 255, 0.76), 0 0 24px rgba(241, 200, 93, 0.24);
}

body[data-page] .topbar .socials,
body[data-page="music"] .topbar .socials {
  justify-self: end !important;
  display: flex !important;
  flex: initial !important;
  align-items: center;
  gap: 10px;
  width: auto;
  min-width: max-content;
  max-width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page] .topbar .socials a,
body[data-page] .footer-socials a,
body[data-page="music"] .topbar .socials a,
body[data-page="music"] .music-platform-grid a,
body[data-page="music"] .music-player-controls button,
body[data-page] .rail-controls button,
body[data-page] .video-rail-arrow {
  border: 1px solid rgba(205, 216, 255, 0.14);
  color: rgba(246, 247, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(16, 22, 39, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-page] .topbar .socials a:hover,
body[data-page] .footer-socials a:hover,
body[data-page="music"] .music-platform-grid a:hover,
body[data-page="music"] .music-player-controls button:hover,
body[data-page] .rail-controls button:hover,
body[data-page] .video-rail-arrow:hover {
  border-color: rgba(241, 200, 93, 0.48);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(167, 123, 255, 0.14), rgba(241, 200, 93, 0.035)),
    rgba(18, 22, 40, 0.62);
  box-shadow: 0 0 24px rgba(167, 123, 255, 0.18), 0 0 28px rgba(241, 200, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

body[data-page] main,
body[data-page] .subpage,
body[data-page] .signal-home,
body[data-page="music"] .music-launch-page,
body[data-page="about"] .about-launch-page {
  padding: var(--prausper-section);
}

body[data-page] .glass-panel,
body[data-page] .contact-copy,
body[data-page] .contact-form,
body[data-page] .content-card,
body[data-page] .media-tile,
body[data-page] .topic-tile,
body[data-page] .coming-soon-card,
body[data-page] .store-product-open,
body[data-page] .library-controlbar,
body[data-page] .continue-strip,
body[data-page] .hero-preview-card,
body[data-page] .video-catalog-panel,
body[data-page="music"] .music-launch-copy,
body[data-page="music"] .music-launch-art,
body[data-page="music"] .music-featured-release,
body[data-page="music"] .music-card,
body[data-page="music"] .music-lyrics-panel,
body[data-page="music"] .music-player,
body[data-page="about"] .about-launch-hero,
body[data-page="about"] .about-launch-copy,
body[data-page="about"] .about-launch-visual,
body[data-page="contact"] .contact-layout,
body[data-page="videos"] .youtube-feed-section,
body[data-page="videos"] .youtube-feed-copy,
body[data-page="videos"] .youtube-feature-card,
body[data-page="videos"] .youtube-feature-panel,
body[data-page="library"] .exodus-hero,
body[data-page="library"] .library-shelf,
body[data-page="merch"] .merch-hero,
body[data-page="merch"] .product-card,
body[data-page="merch"] .bag-dialog,
body[data-page="library"] .episode-layout,
body[data-page="library"] .episode-watchlist {
  border: 1px solid var(--prausper-border);
  border-radius: var(--prausper-radius);
  background:
    radial-gradient(circle at 12% 0%, rgba(167, 123, 255, 0.13), transparent 21rem),
    radial-gradient(circle at 86% 12%, rgba(241, 200, 93, 0.07), transparent 20rem),
    linear-gradient(180deg, rgba(15, 20, 37, 0.72), rgba(5, 8, 17, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 22px 64px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

body[data-page] :where(.media-tile, .topic-tile, .store-product-open, .music-card, .content-card, .coming-soon-card, .video-card, .modal-video-card) {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, filter 180ms ease;
}

body[data-page] :where(.media-tile, .topic-tile, .store-product-open, .music-card, .content-card, .coming-soon-card, .video-card, .modal-video-card):hover {
  border-color: rgba(241, 200, 93, 0.46);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34), var(--prausper-glow);
  transform: translateY(-3px);
}

body[data-page] .button,
body[data-page] button.button,
body[data-page] a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  border: 1px solid rgba(241, 200, 93, 0.28);
  color: #fff;
  background:
    radial-gradient(circle at 30% 0%, rgba(167, 123, 255, 0.26), transparent 13rem),
    linear-gradient(180deg, rgba(241, 200, 93, 0.14), rgba(167, 123, 255, 0.08)),
    rgba(14, 18, 32, 0.72);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

body[data-page] .button.primary {
  border-color: rgba(241, 200, 93, 0.5);
  background:
    radial-gradient(circle at 32% 0%, rgba(255, 232, 156, 0.24), transparent 12rem),
    linear-gradient(135deg, rgba(241, 200, 93, 0.32), rgba(167, 123, 255, 0.18) 58%, rgba(13, 18, 33, 0.88));
}

body[data-page] .button.secondary {
  border-color: rgba(167, 123, 255, 0.36);
  background:
    radial-gradient(circle at 72% 0%, rgba(167, 123, 255, 0.18), transparent 13rem),
    rgba(10, 15, 29, 0.66);
}

body[data-page] .button:hover {
  border-color: rgba(241, 200, 93, 0.72);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34), 0 0 30px rgba(167, 123, 255, 0.18), 0 0 32px rgba(241, 200, 93, 0.1);
  transform: translateY(-2px);
}

body[data-page] .section-label,
body[data-page="music"] .music-section-label,
body[data-page="music"] .music-launch-kicker,
body[data-page="about"] .about-launch-kicker,
body[data-page] .stream-meta span,
body[data-page] .pathway-status,
body[data-page] .library-filter,
body[data-page] .music-status-list span,
body[data-page] .video-status-list span {
  color: var(--prausper-purple);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

body[data-page] :where(h1, h2, h3, .manifesto-head strong, .youtube-feed-copy h2, .music-launch-copy h1, .about-launch-copy h1, .contact-copy h1, .merch-hero-copy h1, .stream-hero h1, .shelf-heading h2) {
  color: var(--prausper-ink);
  text-wrap: balance;
  text-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), 0 0 26px rgba(167, 123, 255, 0.12);
}

body[data-page] :where(p, small, address, .release-note, .music-release-copy > p, .about-launch-copy p, .contact-copy p, .lesson-card p, .topic-tile small) {
  color: var(--prausper-muted);
}

body[data-page] img,
body[data-page] .hero-art,
body[data-page] .about-art,
body[data-page] .music-launch-art,
body[data-page] .about-launch-visual,
body[data-page] .store-product-image,
body[data-page] .lesson-thumb,
body[data-page] .youtube-feature-art,
body[data-page] .modal-player,
body[data-page] .episode-video {
  filter: saturate(0.94) contrast(1.08);
}

body[data-page] .footer,
body[data-page="about"] .about-launch-footer,
body[data-page="music"] .music-player,
body[data-page] .site-copyright {
  display: grid;
  align-items: center;
  gap: 22px;
  margin: 0 var(--prausper-section) var(--prausper-section);
  padding: 22px 28px;
  border: 1px solid var(--prausper-border);
  border-radius: var(--prausper-radius);
  color: var(--prausper-muted);
  background:
    radial-gradient(circle at 72% 0%, rgba(167, 123, 255, 0.12), transparent 22rem),
    rgba(8, 12, 23, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

body[data-page] .footer-brand small,
body[data-page] .site-copyright {
  color: var(--prausper-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-page] .footer address strong {
  color: var(--prausper-purple);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body[data-page] .footer address a {
  color: #fff;
}

body[data-page="home"] .signal-hero {
  min-height: clamp(620px, 78vh, 820px);
  border: 1px solid rgba(205, 216, 255, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 22% 14%, rgba(167, 123, 255, 0.14), transparent 25rem),
    radial-gradient(circle at 74% 28%, rgba(241, 200, 93, 0.08), transparent 30rem),
    linear-gradient(180deg, rgba(8, 12, 24, 0.42), rgba(2, 4, 11, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="home"] .signal-hero h1,
body[data-page="music"] .music-launch-copy h1,
body[data-page="about"] .about-launch-copy h1 {
  letter-spacing: 0.1em;
  background: linear-gradient(90deg, #fff 0%, #f4f0ff 34%, #c6a7ff 63%, #f1c85d 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

body[data-page="home"] .signal-hero .tagline,
body[data-page="home"] .signal-role {
  color: rgba(248, 248, 255, 0.86);
}

body[data-page="home"] .signal-manifesto,
body[data-page="home"] .signal-transmission,
body[data-page="home"] .signal-archive,
body[data-page="home"] .signal-timeline,
body[data-page="home"] .signal-community {
  border-color: var(--prausper-border);
  background:
    radial-gradient(circle at 12% 0%, rgba(167, 123, 255, 0.12), transparent 22rem),
    linear-gradient(180deg, rgba(12, 17, 31, 0.68), rgba(5, 8, 17, 0.82));
}

body[data-page="music"] .music-launch-page {
  padding: var(--prausper-section) !important;
}

body[data-page="music"] .music-launch-hero,
body[data-page="music"] .music-featured-release {
  gap: clamp(22px, 3vw, 44px);
}

body[data-page="music"] .music-launch-art {
  min-height: clamp(420px, 42vw, 640px);
  border-color: rgba(241, 200, 93, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 42px rgba(167, 123, 255, 0.12);
}

body[data-page="music"] .music-platform-grid a {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="music"] .music-card {
  overflow: hidden;
}

body[data-page="videos"] .library-controlbar {
  position: sticky;
  top: 108px;
  z-index: 35;
}

body[data-page="videos"] .library-search,
body[data-page="videos"] .video-catalog-search,
body[data-page="contact"] .field-shell,
body[data-page="contact"] input,
body[data-page="contact"] select,
body[data-page="contact"] textarea {
  border-color: rgba(205, 216, 255, 0.16);
  background: rgba(5, 8, 17, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body[data-page="videos"] .library-filter {
  border-radius: 12px;
  border-color: rgba(205, 216, 255, 0.16);
  color: rgba(246, 247, 255, 0.86);
  background: rgba(10, 15, 29, 0.58);
}

body[data-page="videos"] .library-filter.active,
body[data-page="videos"] .library-filter:hover {
  border-color: rgba(241, 200, 93, 0.54);
  color: #fff;
  box-shadow: 0 0 24px rgba(241, 200, 93, 0.11), 0 0 28px rgba(167, 123, 255, 0.14);
}

body[data-page="videos"] .youtube-feed-copy h2 {
  max-width: 10ch;
  font-size: clamp(58px, 7vw, 112px);
  line-height: 0.95;
}

body[data-page="videos"] .video-card,
body[data-page="videos"] .modal-video-card,
body[data-page="videos"] .youtube-feature-card {
  overflow: hidden;
}

body[data-page="library"] .streaming-shell {
  gap: clamp(24px, 3vw, 44px);
}

body[data-page="library"] .exodus-hero,
body[data-page="merch"] .merch-hero,
body[data-page="about"] .about-launch-hero,
body[data-page="contact"] .contact-layout {
  overflow: hidden;
  border-color: rgba(185, 157, 255, 0.26);
}

body[data-page="library"] .exodus-blog-index .shelf-heading {
  background:
    radial-gradient(circle at 50% 0%, rgba(167, 123, 255, 0.28), transparent 20rem),
    rgba(10, 15, 29, 0.58);
  border: 1px solid rgba(185, 157, 255, 0.3);
  border-radius: 18px;
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 22px 64px rgba(0, 0, 0, 0.24);
}

body[data-page="contact"] .contact-layout {
  gap: clamp(22px, 3vw, 44px);
  align-items: stretch;
}

body[data-page="contact"] .contact-copy,
body[data-page="contact"] .contact-form {
  min-width: 0;
}

body[data-page="contact"] .contact-copy h1 {
  font-size: clamp(56px, 7vw, 110px);
  line-height: 0.98;
}

body[data-page="contact"] label {
  color: rgba(248, 248, 255, 0.9);
  letter-spacing: 0.18em;
}

body[data-page="contact"] input,
body[data-page="contact"] select,
body[data-page="contact"] textarea {
  color: #fff;
}

/* Contact desktop breathing-room repair, 2026-06-18 */
@media (min-width: 1181px) {
  body[data-page="contact"] {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-page="contact"] .site-shell {
    display: block;
    height: auto;
    min-height: 100dvh;
    padding: clamp(18px, 2vw, 32px);
  }

  body[data-page="contact"] .topbar + main.subpage,
  body[data-page="contact"] .subpage {
    padding: clamp(24px, 2.5vw, 42px) clamp(34px, 4vw, 76px);
  }

  body[data-page="contact"] .contact-layout {
    grid-template-columns: minmax(460px, 0.9fr) minmax(560px, 1.1fr);
    gap: clamp(34px, 3vw, 58px);
    min-height: clamp(560px, 62vh, 680px);
    height: auto;
    padding: 0;
    align-items: stretch;
  }

  body[data-page="contact"] .contact-copy,
  body[data-page="contact"] .contact-form {
    height: auto;
    min-height: clamp(560px, 62vh, 680px);
  }

  body[data-page="contact"] .contact-copy {
    padding: clamp(42px, 4vw, 64px) clamp(46px, 4.2vw, 72px);
  }

  body[data-page="contact"] .contact-copy h1 {
    max-width: 8.6ch;
    font-size: clamp(58px, 5.5vw, 96px);
    line-height: 1.04;
    letter-spacing: 0.14em;
    overflow-wrap: normal;
  }

  body[data-page="contact"] .contact-copy p:not(.section-label) {
    max-width: 510px;
    font-size: clamp(18px, 1.35vw, 24px);
    line-height: 1.7;
  }

  body[data-page="contact"] .contact-copy::after {
    inset: auto 16% 0 25%;
    height: 42%;
    background-size: cover;
    background-position: center bottom;
  }

  body[data-page="contact"] .contact-form {
    gap: clamp(16px, 1.6vw, 26px);
    padding: clamp(34px, 3.4vw, 54px) clamp(44px, 4.5vw, 76px);
  }

  body[data-page="contact"] .contact-form input,
  body[data-page="contact"] .contact-form select {
    min-height: 58px;
  }

  body[data-page="contact"] .contact-form textarea {
    min-height: clamp(142px, 17vh, 210px);
  }

  body[data-page="contact"] .contact-form .button {
    min-height: 68px;
    margin-bottom: 0;
  }

  body[data-page="contact"] .footer {
    margin: 0 clamp(34px, 4vw, 76px) clamp(28px, 3vw, 48px);
  }
}

body[data-page="merch"] .merch-store,
body[data-page="library"] .episode-page {
  gap: clamp(22px, 3vw, 42px);
}

body[data-page="merch"] .store-product-image,
body[data-page="library"] .episode-video,
body[data-page="library"] .modal-player,
body[data-page="videos"] .modal-player {
  border-color: rgba(241, 200, 93, 0.2);
}

body[data-page] .modal-close {
  border-color: rgba(205, 216, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 15, 29, 0.72);
  box-shadow: 0 0 24px rgba(167, 123, 255, 0.18);
}

body[data-page] .stream-modal {
  border-color: rgba(185, 157, 255, 0.3);
  background:
    radial-gradient(circle at 80% 0%, rgba(167, 123, 255, 0.18), transparent 25rem),
    rgba(5, 8, 16, 0.92);
}

@media (max-width: 1360px) {
  body[data-page] .topbar,
  body[data-page="music"] .topbar {
    grid-template-columns: minmax(128px, 0.34fr) minmax(0, 1fr) max-content !important;
    gap: 14px !important;
    padding-inline: 22px !important;
  }

  body[data-page] .topbar .nav-links,
  body[data-page="music"] .topbar .nav-links {
    gap: clamp(13px, 1.75vw, 28px) !important;
    font-size: 10.5px;
    letter-spacing: 0.13em;
  }

  body[data-page] .topbar .socials a {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 1120px) and (min-width: 901px) {
  body[data-page] .topbar,
  body[data-page="music"] .topbar {
    grid-template-columns: minmax(124px, 0.28fr) minmax(0, 1fr) !important;
  }

  body[data-page] .topbar .socials,
  body[data-page="music"] .topbar .socials {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body[data-page] .site-shell,
  body[data-page="music"] .music-launch-shell,
  body[data-page="about"] .about-launch-shell {
    width: min(100% - 16px, 620px) !important;
    max-width: calc(100vw - 16px) !important;
    margin-top: 8px !important;
    border-radius: 18px;
  }

  body[data-page] .topbar,
  body[data-page="music"] .topbar {
    top: 8px;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    min-height: 64px;
    margin-top: 8px;
    padding: 0 14px 0 17px !important;
    border-radius: 15px;
  }

  body[data-page] .topbar .brand,
  body[data-page="music"] .topbar .brand {
    max-width: 100%;
    font-size: 13px;
    letter-spacing: 0.38em;
  }

  body[data-page] .topbar .nav-links,
  body[data-page] .topbar .socials,
  body[data-page="music"] .topbar .nav-links,
  body[data-page="music"] .topbar .socials {
    display: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    overflow: visible;
  }

  body[data-page] .topbar.nav-open .nav-links,
  body[data-page="music"] .topbar.nav-open .nav-links {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4px !important;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(194, 174, 255, 0.15);
    border-radius: 14px;
    background:
      radial-gradient(circle at 92% 10%, rgba(168, 103, 255, 0.14), transparent 12rem),
      rgba(7, 10, 22, 0.76);
  }

  body[data-page] .topbar.nav-open .nav-links a,
  body[data-page="music"] .topbar.nav-open .nav-links a {
    height: auto;
    min-height: 44px;
    padding: 13px 12px;
    border-radius: 10px;
    font-size: 11px;
    letter-spacing: 0.15em;
  }

  body[data-page] .topbar.nav-open .socials,
  body[data-page="music"] .topbar.nav-open .socials {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 0 14px;
  }

  body[data-page] .topbar.nav-open .socials a,
  body[data-page="music"] .topbar.nav-open .socials a {
    width: 100%;
    min-height: 42px;
  }

  body[data-page] main,
  body[data-page] .subpage,
  body[data-page] .signal-home,
  body[data-page="music"] .music-launch-page,
  body[data-page="about"] .about-launch-page {
    padding: 14px !important;
  }

  body[data-page] .footer,
  body[data-page="about"] .about-launch-footer,
  body[data-page="music"] .music-player,
  body[data-page] .site-copyright {
    margin: 0 14px 14px;
    padding: 18px;
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
  }

  body[data-page="videos"] .library-controlbar {
    position: relative;
    top: auto;
  }

  body[data-page="contact"] .contact-copy h1,
  body[data-page="videos"] .youtube-feed-copy h2 {
    font-size: clamp(42px, 13vw, 62px);
  }
}

@media (max-width: 520px) {
  body[data-page] .site-shell,
  body[data-page="music"] .music-launch-shell,
  body[data-page="about"] .about-launch-shell {
    width: calc(100% - 10px) !important;
    max-width: calc(100vw - 10px) !important;
  }

  body[data-page] .topbar,
  body[data-page="music"] .topbar {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
  }

  body[data-page] .topbar .brand,
  body[data-page="music"] .topbar .brand {
    font-size: 12px;
    letter-spacing: 0.34em;
  }

  body[data-page] .button,
  body[data-page] a.button {
    width: 100%;
    min-height: 50px;
    padding-inline: 16px;
  }

  body[data-page="home"] .signal-hero,
  body[data-page="music"] .music-launch-copy,
  body[data-page="music"] .music-featured-release,
  body[data-page="music"] .music-lyrics-panel,
  body[data-page="about"] .about-launch-copy,
  body[data-page="contact"] .contact-layout,
  body[data-page="merch"] .merch-hero-copy,
  body[data-page="library"] .exodus-hero .stream-hero-copy {
    padding: 22px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] *,
  body[data-page] *::before,
  body[data-page] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Unified system visual QA repairs, 2026-06-18 */
body[data-page="home"] .signal-hero {
  border-color: rgba(205, 216, 255, 0.1);
  background:
    radial-gradient(circle at 18% 20%, rgba(167, 123, 255, 0.16), transparent 25rem),
    radial-gradient(circle at 78% 32%, rgba(241, 200, 93, 0.1), transparent 28rem),
    linear-gradient(90deg, rgba(4, 7, 16, 0.88), rgba(4, 7, 16, 0.26) 48%, rgba(4, 7, 16, 0.86)),
    linear-gradient(180deg, rgba(4, 7, 16, 0.08), rgba(2, 4, 11, 0.82)),
    url("assets/hero-portrait.png") center 42% / cover no-repeat,
    linear-gradient(180deg, rgba(8, 12, 24, 0.44), rgba(2, 4, 11, 0.92));
}

body[data-page="home"] .signal-hero .hero-copy {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 16rem),
    rgba(8, 12, 24, 0.46);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

body[data-page="music"] .music-launch-art {
  background:
    linear-gradient(90deg, rgba(3, 5, 12, 0.16), rgba(3, 5, 12, 0.03) 44%),
    linear-gradient(180deg, rgba(3, 5, 12, 0.02), rgba(3, 5, 12, 0.58)),
    url("assets/music-realm-bg.png") center 46% / cover no-repeat;
}

body[data-page="videos"] .youtube-feed-section {
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 2.2fr);
}

body[data-page="videos"] .youtube-feed-copy {
  overflow: hidden;
}

body[data-page="videos"] .youtube-feed-copy h2 {
  width: 100%;
  max-width: 7.8ch;
  font-size: clamp(46px, 4.8vw, 74px);
  line-height: 0.98;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 900px) {
  body[data-page="home"] .signal-hero {
    background:
      radial-gradient(circle at 50% 0%, rgba(167, 123, 255, 0.18), transparent 19rem),
      linear-gradient(180deg, rgba(4, 7, 16, 0.5), rgba(4, 7, 16, 0.92)),
      url("assets/hero-portrait.png") center bottom / auto 64% no-repeat,
      linear-gradient(180deg, rgba(8, 12, 24, 0.44), rgba(2, 4, 11, 0.92));
  }

  body[data-page="videos"] .youtube-feed-section {
    grid-template-columns: 1fr;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    max-width: 9ch;
    font-size: clamp(42px, 13vw, 58px);
  }
}

/* iPhone home hero containment repair, 2026-06-18 */
@media (max-width: 520px) {
  body[data-page="home"] .signal-hero {
    min-height: auto;
    padding: 20px 16px 26px !important;
    overflow: hidden;
  }

  body[data-page="home"] .signal-hero .hero-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 28px 20px !important;
    overflow: hidden;
    justify-items: center;
    text-align: center;
  }

  body[data-page="home"] .signal-mark {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  body[data-page="home"] .signal-hero h1 {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(40px, 12vw, 50px);
    line-height: 1;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    transform: none;
  }

  body[data-page="home"] .signal-hero .tagline,
  body[data-page="home"] .signal-role {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(10px, 3.2vw, 13px);
    line-height: 1.55;
    letter-spacing: 0.16em;
    white-space: normal;
    overflow-wrap: normal;
    text-align: center;
  }

  body[data-page="home"] .signal-role {
    max-width: 21ch;
  }

  body[data-page="home"] .signal-hero .hero-actions {
    width: 100%;
    min-width: 0;
  }

  body[data-page="home"] .signal-hero .button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 14px;
    gap: 10px;
    font-size: clamp(10px, 3.1vw, 12px);
    letter-spacing: 0.14em;
    white-space: normal;
  }

  body[data-page="home"] .signal-manifesto,
  body[data-page="home"] .signal-transmission,
  body[data-page="home"] .signal-archive,
  body[data-page="home"] .signal-timeline,
  body[data-page="home"] .signal-community {
    overflow: hidden;
  }

  body[data-page="home"] .manifesto-head h2,
  body[data-page="home"] .manifesto-head strong,
  body[data-page="home"] .signal-community h2 {
    font-size: clamp(38px, 12vw, 56px);
    line-height: 1.08;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
  }

  body[data-page="home"] .manifesto-head h2 {
    font-size: clamp(34px, 10.2vw, 42px);
    letter-spacing: 0.035em;
    overflow-wrap: normal;
  }

  body[data-page="home"] .manifesto-head {
    min-width: 0;
  }

  body[data-page="home"] .manifesto-head p:not(.section-label) {
    width: 100%;
    max-width: 28ch;
    margin-inline: 0;
    font-size: clamp(15px, 4.1vw, 18px);
    line-height: 1.65;
    letter-spacing: 0.04em;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* About/Rise page hero repair, 2026-06-18 */
body[data-page="about"] .about-launch-page {
  overflow: visible;
}

body[data-page="about"] .about-launch-hero {
  grid-template-columns: minmax(500px, 0.92fr) minmax(560px, 1.08fr);
  gap: clamp(24px, 2.8vw, 46px);
  height: auto;
  min-height: clamp(660px, 72vh, 820px);
  overflow: visible;
}

body[data-page="about"] .about-launch-copy,
body[data-page="about"] .about-launch-visual {
  min-height: clamp(660px, 72vh, 820px);
  overflow: hidden;
}

body[data-page="about"] .about-launch-copy {
  justify-content: center;
  padding: clamp(42px, 4.6vw, 70px) clamp(40px, 4vw, 68px);
}

body[data-page="about"] .about-launch-copy h1 {
  max-width: 9.4ch;
  font-size: clamp(62px, 5vw, 90px);
  line-height: 0.96;
  letter-spacing: 0.045em;
  overflow: visible;
  text-wrap: balance;
}

body[data-page="about"] .about-launch-copy h1 span {
  display: block;
  color: transparent;
}

body[data-page="about"] .about-launch-rule {
  margin: clamp(22px, 2.2vw, 34px) 0 clamp(18px, 2vw, 30px);
}

body[data-page="about"] .about-launch-copy p {
  max-width: 560px;
  margin-bottom: clamp(14px, 1.4vw, 22px);
  font-size: clamp(17px, 1.22vw, 22px);
  line-height: 1.54;
}

body[data-page="about"] .about-launch-actions {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(230px, 1.15fr);
  gap: 16px;
  width: min(100%, 560px);
  margin-top: clamp(18px, 2vw, 30px);
}

body[data-page="about"] .about-launch-actions .button {
  min-height: 58px;
  padding-inline: 22px;
  white-space: nowrap;
}

body[data-page="about"] .about-launch-visual {
  position: relative;
  background:
    radial-gradient(circle at 54% 26%, rgba(245, 226, 168, 0.18), transparent 18rem),
    linear-gradient(90deg, rgba(5, 7, 17, 0.18), rgba(5, 7, 17, 0.02) 44%, rgba(5, 7, 17, 0.64)),
    linear-gradient(180deg, rgba(5, 7, 17, 0.06), rgba(5, 7, 17, 0.74)),
    url("assets/about-portrait.png") center center / cover no-repeat;
  filter: saturate(1.04) contrast(1.08) brightness(1.08);
}

body[data-page="about"] .about-launch-visual::after {
  background:
    radial-gradient(circle at 18% 70%, rgba(167, 123, 255, 0.18), transparent 7rem),
    radial-gradient(circle at 90% 20%, rgba(241, 200, 93, 0.16), transparent 8rem),
    linear-gradient(90deg, rgba(5, 7, 17, 0.08), transparent 45%, rgba(5, 7, 17, 0.24));
}

@media (max-width: 1180px) {
  body[data-page="about"] .about-launch-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  body[data-page="about"] .about-launch-copy,
  body[data-page="about"] .about-launch-visual {
    min-height: auto;
  }

  body[data-page="about"] .about-launch-visual {
    min-height: clamp(360px, 62vw, 620px);
  }
}

@media (max-width: 620px) {
  body[data-page="about"] .about-launch-copy h1 {
    max-width: 100%;
    font-size: clamp(44px, 13vw, 62px);
    line-height: 1;
    letter-spacing: 0.035em;
  }

  body[data-page="about"] .about-launch-actions {
    grid-template-columns: 1fr;
  }

  body[data-page="about"] .about-launch-actions .button {
    width: 100%;
    white-space: normal;
  }
}

/* Videos footer containment repair, 2026-06-18 */
body[data-page="videos"] .footer {
  width: calc(100% - 56px);
  max-width: calc(100vw - 56px);
  grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1fr);
  overflow: hidden;
}

body[data-page="videos"] .footer-brand,
body[data-page="videos"] .footer address {
  min-width: 0;
}

body[data-page="videos"] .footer-socials {
  min-width: max-content;
}

body[data-page="videos"] .footer address {
  justify-items: end;
  max-width: 100%;
  text-align: right;
}

body[data-page="videos"] .footer address strong,
body[data-page="videos"] .footer address a {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

body[data-page="videos"] .footer address a {
  display: block;
  font-size: clamp(13px, 1.25vw, 18px);
  line-height: 1.35;
}

@media (max-width: 1200px) {
  body[data-page="videos"] .footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  body[data-page="videos"] .footer address {
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 620px) {
  body[data-page="videos"] .footer {
    width: calc(100% - 28px);
    max-width: calc(100vw - 28px);
  }

  body[data-page="videos"] .footer-socials {
    min-width: 0;
    width: 100%;
  }
}

/* Home footer centering repair, 2026-06-22 */
body[data-page="home"] .footer {
  width: calc(100% - 92px);
  max-width: none;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(360px, auto) minmax(0, 1fr);
  justify-items: stretch;
}

body[data-page="home"] .footer-brand,
body[data-page="home"] .footer address {
  min-width: 0;
}

body[data-page="home"] .footer-socials {
  justify-self: center;
  width: auto;
  min-width: max-content;
}

body[data-page="home"] .footer address {
  justify-self: end;
  text-align: right;
}

@media (max-width: 980px) {
  body[data-page="home"] .footer {
    width: calc(100% - 28px);
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  body[data-page="home"] .footer address {
    justify-self: center;
    text-align: center;
  }

  body[data-page="home"] .footer-socials {
    min-width: 0;
    width: 100%;
  }
}

/* Rise of the Remnant hero refresh, 2026-07-04 */
body[data-page="home"] {
  --signal-purple: #a66dff;
  --signal-purple-soft: rgba(166, 109, 255, 0.28);
  --glow: 0 0 52px rgba(166, 109, 255, 0.24), 0 0 110px rgba(94, 44, 180, 0.2);
  background:
    radial-gradient(circle at 50% 8%, rgba(166, 109, 255, 0.18), transparent 34rem),
    radial-gradient(circle at 12% 76%, rgba(88, 53, 171, 0.14), transparent 34rem),
    linear-gradient(180deg, #02020a 0%, #030306 48%, #020203 100%);
}

body[data-page="home"] .signal-hero {
  min-height: clamp(720px, 94vh, 900px);
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 44%, rgba(135, 80, 255, 0.2), transparent 32rem),
    linear-gradient(180deg, rgba(3, 4, 12, 0.08), rgba(3, 4, 12, 0.82) 78%, #030306 100%);
}

body[data-page="home"] .signal-hero::before {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(1, 2, 9, 0.72), rgba(1, 2, 9, 0.08) 32%, rgba(1, 2, 9, 0.08) 68%, rgba(1, 2, 9, 0.72)),
    linear-gradient(180deg, rgba(1, 2, 9, 0.2), rgba(1, 2, 9, 0.02) 24%, rgba(1, 2, 9, 0.3) 62%, rgba(1, 2, 9, 0.96) 100%),
    url("assets/rise-remnant-hero.jpg") center top / 100% auto no-repeat;
  filter: saturate(1.08) contrast(1.08) brightness(0.78);
  opacity: 1;
}

body[data-page="home"] .signal-hero::after {
  inset: 0;
  z-index: 1;
  width: auto;
  min-width: 0;
  height: auto;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(174, 114, 255, 0.14), transparent 28rem),
    radial-gradient(ellipse at 50% 103%, #020205 0 11rem, rgba(2, 2, 5, 0.78) 26rem, transparent 42rem);
  filter: none;
  opacity: 1;
}

body[data-page="home"] .signal-hero .hero-copy {
  align-self: end;
  display: grid;
  justify-items: center;
  text-align: center;
  width: min(560px, calc(100% - 48px));
  margin-bottom: 92px;
  padding: 30px 40px 32px;
  border-color: rgba(205, 183, 255, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(166, 109, 255, 0.05)),
    rgba(6, 7, 17, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 24px 90px rgba(0, 0, 0, 0.66),
    0 0 72px rgba(120, 68, 255, 0.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
}

body[data-page="home"] .signal-mark {
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-color: rgba(205, 183, 255, 0.42);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body[data-page="home"] .signal-hero h1 {
  justify-self: center;
  width: auto;
  max-width: 100%;
  font-size: clamp(38px, 4vw, 56px);
  letter-spacing: 0.3em;
  text-align: center;
  text-indent: 0;
}

body[data-page="home"] .signal-hero .tagline {
  justify-self: center;
  width: auto;
  max-width: 100%;
  margin-top: 18px;
  color: rgba(236, 228, 255, 0.84);
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: 0.22em;
}

body[data-page="home"] .signal-role {
  justify-self: center;
  width: auto;
  max-width: 100%;
  margin: 14px 0 22px;
  color: rgba(236, 228, 255, 0.68);
  font-size: 11px;
  text-align: center;
}

body[data-page="home"] .signal-hero .hero-actions {
  justify-content: center;
  justify-self: center;
  width: auto;
  max-width: 100%;
}

body[data-page="home"] .signal-hero .button {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 230px;
  min-height: 50px;
  margin-inline: auto;
  padding-inline: 34px;
  border-color: rgba(205, 183, 255, 0.36);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(190, 153, 255, 0.2), rgba(255, 255, 255, 0.05)),
    rgba(11, 12, 25, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 28px rgba(166, 109, 255, 0.16);
}

body[data-page="home"] .signal-hero .button:hover {
  border-color: rgba(221, 208, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 36px rgba(166, 109, 255, 0.32);
}

body[data-page="home"] .scroll-cue {
  z-index: 4;
}

@media (max-width: 980px) {
  body[data-page="home"] .signal-hero {
    min-height: 780px;
  }

  body[data-page="home"] .signal-hero::before {
    background:
      linear-gradient(90deg, rgba(1, 2, 9, 0.58), rgba(1, 2, 9, 0.02) 50%, rgba(1, 2, 9, 0.58)),
      linear-gradient(180deg, rgba(1, 2, 9, 0.12), rgba(1, 2, 9, 0.08) 34%, rgba(1, 2, 9, 0.92) 100%),
      url("assets/rise-remnant-hero.jpg") center top / 100% auto no-repeat;
  }

  body[data-page="home"] .signal-hero .hero-copy {
    margin-bottom: 86px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] main.signal-home > .signal-hero#home {
    height: 700px !important;
    min-height: 700px !important;
    padding: 76px 16px 82px !important;
    place-items: end center;
    background:
      linear-gradient(90deg, rgba(1, 2, 9, 0.48), rgba(1, 2, 9, 0.02) 52%, rgba(1, 2, 9, 0.48)),
      linear-gradient(180deg, rgba(1, 2, 9, 0.01), rgba(1, 2, 9, 0.1) 35%, rgba(1, 2, 9, 0.88) 65%, rgba(1, 2, 9, 0.98) 100%),
      url("assets/rise-remnant-hero.jpg") center top / 100% auto no-repeat,
      radial-gradient(circle at 50% 44%, rgba(135, 80, 255, 0.16), transparent 28rem),
      linear-gradient(180deg, rgba(3, 4, 12, 0.08), rgba(3, 4, 12, 0.82) 78%, #030306 100%);
  }

  body[data-page="home"] main.signal-home > .signal-hero#home::before {
    background: none;
    filter: none;
  }

  body[data-page="home"] main.signal-home > .signal-hero#home::after {
    background:
      radial-gradient(ellipse at 50% 29%, rgba(166, 109, 255, 0.2), transparent 14rem),
      radial-gradient(ellipse at 50% 94%, #020205 0 9rem, rgba(2, 2, 5, 0.86) 21rem, transparent 34rem);
  }

  body[data-page="home"] main.signal-home > .signal-hero#home .hero-copy {
    width: calc(100% - 32px);
    max-width: 360px;
    margin-bottom: 0;
    padding: 22px 20px 24px !important;
    border-radius: 16px;
  }

  body[data-page="home"] main.signal-home > .signal-hero#home .signal-mark {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    font-size: 18px;
  }

  body[data-page="home"] main.signal-home > .signal-hero#home h1 {
    width: 100%;
    font-size: clamp(28px, 8.4vw, 36px);
    line-height: 1.08;
    letter-spacing: 0.2em;
    text-indent: 0;
    white-space: nowrap;
  }

  body[data-page="home"] main.signal-home > .signal-hero#home .tagline {
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  body[data-page="home"] main.signal-home > .signal-hero#home .signal-role {
    margin: 10px 0 18px;
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  body[data-page="home"] main.signal-home > .signal-hero#home .button {
    width: 100%;
    min-height: 46px;
    min-width: 0;
    padding-inline: 18px;
  }
}

body[data-page="home"] .signal-hero .button .button-label {
  justify-self: center;
  text-align: center;
}

body[data-page="home"] .signal-hero .button svg {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

/* Reality Unveiled navigation and desktop filter polish, 2026-07-09 */
body[data-page] .topbar .nav-links a[data-page-link="videos"] {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-stretch: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

@media (min-width: 981px) {
  body[data-page="videos"] .library-controlbar {
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 14px 18px;
  }

  body[data-page="videos"] .library-toolbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(88px, 1fr));
    justify-self: end;
    width: min(100%, 720px);
    gap: 10px;
    overflow: visible;
  }

  body[data-page="videos"] .library-filter,
  body[data-page="videos"] .library-filter[data-filter="leadership"] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.2;
  }
}

/* Dedicated full-bleed Reality Unveiled archive artwork, 2026-07-09 */
body[data-page="videos"] .youtube-feed-copy::before {
  inset: -2px;
  background:
    linear-gradient(90deg, rgba(3, 4, 12, 0.82) 0%, rgba(3, 4, 12, 0.58) 48%, rgba(3, 4, 12, 0.16) 100%),
    linear-gradient(180deg, rgba(4, 5, 14, 0.08), rgba(4, 5, 14, 0.48)),
    url("assets/reality-unveiled-archive-bg.jpg") 62% center / cover no-repeat;
  opacity: 0.92;
  transform: scale(1.015);
}

@media (max-width: 900px) {
  body[data-page="videos"] .youtube-feed-copy::before {
    background:
      linear-gradient(90deg, rgba(3, 4, 12, 0.84) 0%, rgba(3, 4, 12, 0.6) 54%, rgba(3, 4, 12, 0.2) 100%),
      linear-gradient(180deg, rgba(4, 5, 14, 0.08), rgba(4, 5, 14, 0.52)),
      url("assets/reality-unveiled-archive-bg.jpg") 66% center / cover no-repeat;
  }
}

/* Final mobile cascade: selected immersive archive direction */
@media (max-width: 640px) {
  .site-shell,
  body[data-page="home"] .site-shell {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .topbar,
  body[data-page] .topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 12px 18px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(2, 3, 10, 0.9), rgba(2, 3, 10, 0));
    box-shadow: none;
    backdrop-filter: none;
  }

  .topbar.nav-open,
  body[data-page] .topbar.nav-open {
    background: rgba(4, 5, 15, 0.97);
    backdrop-filter: blur(20px);
  }

  .topbar .brand {
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.38em;
  }

  .topbar .menu-toggle {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 11px;
    border-radius: 10px;
  }

  .topbar .menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
  }

  .topbar.nav-open .nav-links {
    top: 72px;
    left: 18px;
    right: 18px;
    width: auto;
  }

  body[data-page="home"] .signal-home {
    display: block;
    padding: 0;
  }

  body[data-page="home"] .signal-hero.hero {
    display: flex;
    min-height: 780px;
    margin: 0;
    padding: 0 18px 30px;
    align-items: flex-end;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #02030a;
  }

  body[data-page="home"] .signal-hero.hero::before {
    display: block;
    inset: auto 0 0;
    width: 100%;
    height: 55%;
    border: 0;
    background: linear-gradient(180deg, transparent, rgba(2, 3, 10, 0.68) 38%, #02030a 94%);
    opacity: 1;
  }

  body[data-page="home"] .signal-hero .hero-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background:
      linear-gradient(180deg, rgba(2, 3, 10, 0.02) 0%, transparent 52%, #02030a 94%),
      url("assets/rise-remnant-hero.jpg") center top / cover no-repeat;
    filter: saturate(0.92) contrast(1.08) brightness(0.82);
    -webkit-mask-image: none;
    mask-image: none;
  }

  body[data-page="home"] .signal-hero .hero-copy {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0;
    text-align: center;
  }

  body[data-page="home"] .signal-hero .hero-copy h1 {
    width: 100%;
    margin: 0;
    color: #fff;
    background: none;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(42px, 13vw, 56px);
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1;
    text-indent: 0.2em;
    text-shadow: 0 12px 36px rgba(0, 0, 0, 0.9);
    transform: none;
  }

  body[data-page="home"] .signal-hero .tagline {
    max-width: none;
    margin: 20px 0 27px;
    font-size: 12px;
    letter-spacing: 0.16em;
    line-height: 1.4;
  }

  body[data-page="home"] .signal-hero .hero-actions {
    display: block;
  }

  body[data-page="home"] .signal-hero .button.primary {
    width: 100%;
    min-height: 58px;
    border-color: rgba(183, 115, 255, 0.78);
    border-radius: 10px;
    color: #fff;
    background: rgba(77, 39, 128, 0.72);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 12px 30px rgba(126, 66, 219, 0.3);
  }

  body[data-page="home"] .mobile-journey {
    display: block;
  }

  body[data-page] .subpage {
    padding-top: 92px;
  }

  body[data-page="contact"] .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="contact"] .contact-copy h1,
  body[data-page="videos"] .youtube-feed-copy h2,
  body[data-page="library"] .exodus-hero h1 {
    max-width: 100%;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(44px, 14vw, 60px);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 0.98;
    transform: none;
  }
}

/* Exodus Project reader viewport fit — keep the original archive, but make desktop feel like a proper reading app. */
@media (min-width: 1181px) {
  body[data-page="library"] .site-shell {
    width: min(100% - 28px, 1780px);
    margin-top: 20px;
    margin-bottom: 20px;
  }

  body[data-page="library"] .topbar {
    min-height: 64px;
    padding-block: 8px;
  }

  body[data-page="library"] .streaming-shell {
    gap: 14px;
  }

  body[data-page="library"] .exodus-blog-index {
    margin-top: 0;
    margin-bottom: 18px;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading {
    position: relative;
    top: auto;
    left: auto;
    width: min(620px, calc(100% - 40px));
    min-height: 72px;
    margin: 14px auto -1px;
    padding: 14px 28px 16px;
    transform: none;
    border-radius: 16px 16px 0 0;
    pointer-events: none;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading h2 {
    font-size: clamp(20px, 1.55vw, 28px);
    letter-spacing: 0.1em;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading h2::before {
    margin-bottom: 6px;
    font-size: 9px;
  }

  body[data-page="library"] .exodus-blog-index .exodus-publish-row {
    min-height: 0;
  }

  body[data-page="library"] .exodus-project-archive {
    height: min(780px, calc(100dvh - 172px));
    min-height: 540px;
    grid-template-rows: 52px minmax(0, 1fr);
    grid-template-columns:
      minmax(240px, var(--exodus-left-pane, 335px))
      12px
      minmax(500px, 1fr)
      12px
      minmax(220px, var(--exodus-right-pane, 300px));
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar {
    padding: 56px 24px 24px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar::before {
    width: 44px;
    height: 44px;
    margin: -38px 0 18px 4px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-brand {
    margin-bottom: 18px;
    padding-bottom: 16px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-brand strong {
    font-size: clamp(28px, 2vw, 36px);
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-search {
    margin-bottom: 12px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-search input,
  body[data-page="library"] .exodus-project-archive .exodus-publish-folder {
    min-height: 46px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-tree {
    gap: 7px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-tree button {
    min-height: 62px;
    padding: 10px 14px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-tree button span {
    font-size: 0.76rem;
  }

  body[data-page="library"] .exodus-project-archive .exodus-reader-controls {
    grid-column: 5;
    grid-row: 1;
    align-self: center;
    width: min(100% - 20px, 244px);
    margin-top: 0;
  }

  body[data-page="library"] .exodus-project-archive .exodus-font-controls {
    grid-template-columns: minmax(42px, 1fr) minmax(78px, 1.35fr) minmax(42px, 1fr);
  }

  body[data-page="library"] .exodus-project-archive .exodus-reader-controls button {
    min-height: 34px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-reader {
    padding: 54px clamp(30px, 4vw, 60px) 42px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-reader .section-label {
    margin-bottom: 14px;
    font-size: 0.78rem;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-reader > h2 {
    margin-bottom: 18px;
    font-size: clamp(30px, 2.65vw, 42px) !important;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-body {
    max-width: 720px;
    padding: clamp(24px, 2.6vw, 38px);
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-body::before {
    margin-top: -43px;
    margin-bottom: 18px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-body p,
  body[data-page="library"] .exodus-project-archive .exodus-publish-body li {
    line-height: 1.6;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-outline {
    padding: 68px 24px 24px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-outline p {
    margin-bottom: 14px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-outline nav {
    gap: 7px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-outline a,
  body[data-page="library"] .exodus-project-archive .exodus-publish-outline span {
    min-height: 54px;
    padding: 10px 14px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-outline a span {
    font-size: 0.76rem;
  }

  body[data-page="library"] .exodus-project-archive .exodus-pane-resizer::before {
    inset: 52px 5px 0;
  }
}

@media (min-width: 1181px) and (max-height: 780px) {
  body[data-page="library"] .site-shell {
    margin-top: 14px;
  }

  body[data-page="library"] .topbar {
    min-height: 58px;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading {
    min-height: 64px;
    margin-top: 10px;
    padding-block: 10px 12px;
  }

  body[data-page="library"] .exodus-project-archive {
    height: calc(100dvh - 146px);
    min-height: 500px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar {
    padding-top: 48px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-reader {
    padding-top: 46px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-outline {
    padding-top: 60px;
  }
}