/* =====================================================
   THE LORD RAZU
   MASTER STYLESHEET — REFACTORED
   -----------------------------------------------------
   Cascade-safe component order

   01. Media and Galleries
   02. Countdown and Theme Audio
   03. Lyrics Application
   04. Journal Drawer and Journal Page
   05. Homepage and Current Release
   06. Album Framework, Player, Lyrics, and Typography
   07. Live, Dojo, Twitch, and Stream Sections
   08. Discography
   09. Full Radio and Stream Mini Radio
   10. Videos, Photos, and Shared Utilities

   Refactor notes:
   - Current visual cascade is preserved.
   - Exact duplicate rules and declarations were removed.
   - Later component overrides remain in dependency order.
   ===================================================== */

/* =====================================================
   MEDIA V2
===================================================== */

.media-section {
  width: 100%;
}

/* ==========================
   EACH GALLERY
========================== */

.media-carousel {
  margin-bottom: 60px;
}

.media-carousel:last-child {
  margin-bottom: 0;
}

/* ==========================
   SWIPER
========================== */

.media-swiper {
  width: 100%;
  padding: 15px 0;
  overflow: hidden;
}

.media-swiper .swiper-wrapper {
  align-items: flex-start;
}

.media-swiper .swiper-slide {
  height: auto;
  transition: 0.35s ease;
  overflow: hidden;
  border-radius: 14px;
}

.media-swiper .swiper-slide:hover {
  transform: translateY(-8px);
}

/* ==========================
   IMAGES
========================== */

.media-swiper img {
  width: 100%;
  aspect-ratio: 16/10;

  object-fit: cover;

  display: block;

  border-radius: 14px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);

  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

.media-swiper .swiper-slide:hover img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

/* ==========================
   SPOTIFY
========================== */

.media-swiper iframe {
  width: 100%;
  height: 352px;

  border: none;

  border-radius: 14px;

  display: block;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* ==========================
   HEADERS
========================== */

.gallery-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 0 0 25px;
}

.media-carousel + .media-carousel .gallery-header {
  margin-top: 40px;
}

.gallery-header h2 {
  margin: 0;

  font-size: 32px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

/* ==========================
   NAVIGATION
========================== */

.gallery-nav {
  display: flex;

  gap: 12px;
}

.gallery-nav button {
  width: 46px;

  height: 46px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.25);

  background: rgba(255, 255, 255, 0.03);

  color: #fff;

  cursor: pointer;

  transition: all 0.3s ease;

  font-size: 18px;
}

.gallery-nav button:hover {
  border-color: #c8a85d;

  color: #c8a85d;

  background: rgba(200, 168, 93, 0.08);
}

/* ==========================
   HIDE SWIPER DEFAULT ARROWS
========================== */

.swiper-button-prev,
.swiper-button-next {
  display: none !important;
}

/* ==========================
   MOBILE
========================== */

@media (max-width: 768px) {
  .gallery-header h2 {
    font-size: 24px;
  }

  .gallery-nav button {
    width: 40px;
    height: 40px;
  }

  .media-swiper iframe {
    height: 232px;
  }
}

/* ==========================
   Countdown
========================== */

.countdown {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;

  color: white;

  margin: 80px auto;
}

.count-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 140px;
}

.count-item span {
  display: block;

  font-size: 250px;

  line-height: 0.82;

  font-weight: 700;

  letter-spacing: 2px;

  font-family: "Teko", sans-serif;

  margin-bottom: 18px;
}

.count-item small {
  display: block;

  color: #2e7bff;

  font-size: 15px;

  letter-spacing: 6px;

  text-transform: uppercase;
}

.separator {
  font-size: 90px;

  line-height: 1;

  color: rgba(255, 255, 255, 0.35);

  margin-top: 8px;
}

.count-item span {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}

/* ==========================
  Theme Song Play
========================== */

#music-toggle {
  position: fixed;

  top: 30px;
  right: 30px;

  width: 56px;
  height: 56px;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);

  color: #ffffff;

  font-size: 26px;
  line-height: 56px;
  text-align: center;

  cursor: pointer;

  z-index: 9999;

  transition: all 0.35s ease;
}

#music-toggle:hover {
  transform: scale(1.08);

  color: #ffffff;

  background: rgba(255, 255, 255, 0.12);

  border-color: rgba(255, 255, 255, 0.4);

  box-shadow: 0 0 18px rgba(255, 255, 255, 0.25);
}

#music-toggle.playing {
  color: #ffffff;

  background: rgba(40, 80, 255, 0.18);

  border-color: rgba(79, 140, 255, 0.6);

  box-shadow: 0 0 22px rgba(79, 140, 255, 0.65);
}

/* ==========================
   MOBILE COUNTDOWN
========================== */

@media screen and (max-width: 768px) {
  .countdown {
    flex-wrap: wrap;

    justify-content: center;

    gap: 15px;

    margin: 40px auto;
  }

  .count-item {
    min-width: 70px;
  }

  .count-item span {
    font-size: 52px;

    line-height: 0.9;

    letter-spacing: 1px;
  }

  .count-item small {
    font-size: 10px;

    letter-spacing: 2px;
  }

  .separator {
    font-size: 36px;

    margin-top: 8px;
  }
}

/* ===========================================
   LYRICS APP
=========================================== */

#lyrics-app {
  max-width: 1400px;

  margin: 60px auto;

  color: #fff;

  font-family: inherit;
}

/* ===========================================
   HEADER
=========================================== */

.lyrics-header {
  margin-bottom: 50px;
}

.lyrics-header h1 {
  font-size: 56px;

  letter-spacing: 0.18em;

  font-weight: 700;

  margin: 0;
}

.lyrics-header p {
  margin-top: 12px;

  color: #8d8d8d;

  font-size: 16px;

  letter-spacing: 0.08em;
}

/* ===========================================
   ALBUM HERO
=========================================== */

.album-art {
  width: 100%;
}

#album-cover {
  width: 100%;
  display: block;
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

#album-cover:hover {
  transform: scale(1.015);
}

.album-label {
  display: block;
  color: #2d7dff;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.album-info h2 {
  font-size: 44px;
  margin: 0 0 18px;
}

.album-info p {
  max-width: 520px;
  color: #a9a9a9;
  line-height: 1.9;
  margin: 0;
}

/* ===========================================
   ERA BUTTONS
=========================================== */

.album-nav {
  display: flex;

  gap: 18px;

  margin-bottom: 40px;
}

.album {
  background: none;

  border: none;

  color: #666;

  cursor: pointer;

  font-size: 15px;

  letter-spacing: 0.18em;

  padding: 12px 0;

  transition: 0.3s;
}

.album:hover {
  color: #fff;
}

.album.active {
  color: #fff;

  border-bottom: 2px solid #2d7dff;
}

/* ===========================================
   MAIN LAYOUT
=========================================== */

.lyrics-layout {
  display: grid;

  grid-template-columns: 300px 1fr;

  gap: 60px;
}

/* ===========================================
   SONG LIST
=========================================== */

.song-list {
  display: flex;

  flex-direction: column;

  gap: 14px;

  border-right: 1px solid rgba(255, 255, 255, 0.08);

  padding-right: 40px;
}

.song {
  background: none;

  border: none;

  color: #777;

  cursor: pointer;

  text-align: left;

  font-size: 15px;

  letter-spacing: 0.08em;

  padding: 10px 0;

  transition: 0.3s;
}

.song:hover {
  color: #fff;

  padding-left: 12px;
}

.song.active {
  color: #fff;

  font-weight: 600;
}

/* ===========================================
   LYRICS PANEL
=========================================== */

.lyrics-panel {
  min-height: 650px;
}

.song-meta {
  display: flex;

  gap: 25px;

  color: #2d7dff;

  font-size: 12px;

  letter-spacing: 0.2em;

  margin-bottom: 25px;
}

.lyrics-panel h2 {
  font-size: 48px;

  margin-bottom: 40px;

  letter-spacing: 0.05em;
}

/* ===========================================
   MOBILE
=========================================== */

@media (max-width: 991px) {
  #lyrics-app {
    padding: 20px;
    margin: 20px auto;
  }

  .album-art {
    display: flex;
    justify-content: center;
  }

  #album-cover {
    max-width: 320px;
  }

  .album-info {
    width: 100%;
  }

  .album-info h2 {
    font-size: 34px;
  }

  .lyrics-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .song-list {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-right: 0;
    padding-bottom: 30px;
  }

  .lyrics-header h1 {
    font-size: 42px;
  }

  .lyrics-panel h2 {
    font-size: 34px;
  }
}

/* ==========================================
   LYRICS STYLING
========================================== */

.lyrics-body {
  max-width: 800px;

  line-height: 2;

  color: #d9d9d9;

  font-size: 17px;
}

.lyrics-body h3 {
  margin-top: 50px;

  margin-bottom: 18px;

  color: #2d7dff;

  font-size: 13px;

  letter-spacing: 0.28em;

  font-weight: 700;

  text-transform: uppercase;
}

.lyrics-body p {
  margin: 0 0 35px;

  white-space: normal;
}

.lyrics-body br {
  line-height: 2;
}

/* ==========================================
   SCROLLBAR
========================================== */

.lyrics-panel {
  max-height: 75vh;

  overflow-y: auto;

  padding-right: 20px;
}

.lyrics-panel::-webkit-scrollbar {
  width: 8px;
}

.lyrics-panel::-webkit-scrollbar-track {
  background: #111;
}

.lyrics-panel::-webkit-scrollbar-thumb {
  background: #333;

  border-radius: 20px;
}

.lyrics-panel::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ==========================================
   JOURNAL TAB
========================================== */

#journal-tab {
  position: fixed !important;

  left: 0 !important;

  top: 42% !important;

  transform: translateY(-50%) !important;

  width: 42px;

  height: 140px;

  display: flex;

  justify-content: center;

  align-items: center;

  background: rgba(12, 12, 18, 0.32);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-right: 1px solid rgba(30, 71, 255, 0.48);

  border-top: 1px solid rgba(30, 71, 255, 0.18);

  border-bottom: 1px solid rgba(30, 71, 255, 0.18);

  border-left: 0;

  padding: 0;

  border-radius: 0 14px 14px 0;

  cursor: pointer;

  z-index: 2147483647 !important;

  isolation: isolate;

  pointer-events: auto !important;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(30, 71, 255, 0.1);
}

#journal-tab:hover {
  background: rgba(22, 22, 30, 0.42);

  border-right: 1px solid rgba(30, 71, 255, 0.75);

  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(30, 71, 255, 0.18);

  transform: translateY(-50%) translateX(4px);
}

.journal-text {
  writing-mode: vertical-rl;

  transform: rotate(180deg);

  color: #1e47ff;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.35em;

  text-transform: uppercase;

  pointer-events: none;

  text-shadow: 0 0 10px rgba(30, 71, 255, 0.22);
}

/* ======================================================
   JOURNAL DRAWER
====================================================== */

#journal-panel {
  position: fixed;

  top: 0;
  left: -420px;

  width: 420px;
  max-width: 90vw;

  height: 100vh;

  background: rgba(8, 8, 8, 0.92);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-right: 1px solid rgba(255, 255, 255, 0.06);

  overflow-y: auto;

  transition: left 0.45s cubic-bezier(0.77, 0, 0.18, 1);

  z-index: 99999;

  display: flex;
  flex-direction: column;
}

/* ======================================================
   OPEN STATE
====================================================== */

#journal-panel.open {
  left: 0;
}

/* ======================================================
   HEADER
====================================================== */

.journal-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  padding: 40px 36px 18px;
}

.journal-label {
  margin: 0 0 12px;

  color: #1e47ff;

  font-size: 11px;

  letter-spacing: 0.3em;

  text-transform: uppercase;
}

.journal-header h2 {
  margin: 0 0 8px;

  color: #fff;

  font-size: 42px;

  font-weight: 300;

  line-height: 1.05;
}

#journal-close {
  background: none;

  border: none;

  color: #777;

  cursor: pointer;

  font-size: 24px;

  transition: 0.3s;
}

#journal-close:hover {
  color: white;
}

/* ======================================================
   JOURNAL PREVIEW
====================================================== */

.journal-preview {
  padding: 0 36px 10px;
}

.chapter-number {
  display: none;
}

.journal-preview h3 {
  margin: 0;

  color: #fff;

  font-size: 34px;

  line-height: 1.1;

  font-weight: 300;
}

.journal-date {
  color: #8c8c8c;

  margin: 14px 0 26px;

  text-transform: uppercase;

  font-size: 12px;

  letter-spacing: 0.18em;
}

.journal-excerpt {
  color: #d6d6d6;

  font-size: 16px;

  line-height: 1.9;

  margin-bottom: 35px;
}

.journal-read-more {
  display: inline-flex;

  margin-top: 8px;

  color: #1e47ff;

  text-decoration: none;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  transition: 0.3s;
}

.journal-read-more:hover {
  color: white;

  padding-left: 10px;
}

/* ======================================================
   DIVIDER
====================================================== */

.journal-divider {
  margin: 34px 36px;

  height: 1px;

  background: rgba(255, 255, 255, 0.08);
}

/* ======================================================
   RECENT CHAPTERS
====================================================== */

.recent-chapters {
  padding: 0 36px 36px;
}

.recent-chapters h4 {
  color: #777;

  margin-bottom: 18px;

  text-transform: uppercase;

  letter-spacing: 0.25em;

  font-size: 11px;
}

.recent-chapters a {
  display: block;

  padding: 14px 0;

  color: white;

  text-decoration: none;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  transition: 0.3s;
}

.recent-chapters a:hover {
  color: #1e47ff;

  padding-left: 10px;
}

/* ======================================================
   OVERLAY
====================================================== */

#journal-overlay {
  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.15);

  opacity: 0;

  visibility: hidden;

  transition: 0.35s;

  z-index: 99998;
}

#journal-overlay.show {
  opacity: 1;

  visibility: visible;
}

/* ======================================================
   SCROLLBAR
====================================================== */

#journal-panel::-webkit-scrollbar {
  width: 6px;
}

#journal-panel::-webkit-scrollbar-thumb {
  background: #1e47ff;
}

/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 768px) {
  #journal-panel {
    width: 90vw;

    left: -90vw;
  }

  #journal-panel.open {
    left: 0;
  }

  .journal-header {
    padding: 30px 24px 18px;
  }

  .journal-preview {
    padding: 0 24px 8px;
  }

  .journal-divider {
    margin: 28px 24px;
  }

  .recent-chapters {
    padding: 0 24px 28px;
  }
}

/* ==========================================
   JOURNAL FEED
========================================== */

#journal-preview img {
  width: 100%;

  border-radius: 12px;

  margin-bottom: 22px;
}

#journal-preview h3 {
  color: #fff;

  font-size: 28px;

  font-weight: 300;

  margin-bottom: 12px;
}

#journal-preview time {
  display: block;

  color: #777;

  margin-bottom: 22px;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

#journal-preview p {
  color: #ddd;

  line-height: 1.8;
}

#journal-preview a {
  color: #1e47ff;

  text-decoration: none;
}

.journal-loading {
  color: #888;

  padding: 40px 0;
}

/* =====================================================
   HOMEPAGE HERO — CURRENT SITE TYPOGRAPHY
   Bebas Neue display + Space Grotesk supporting copy
===================================================== */

/* =====================================================
   THREE ERAS
===================================================== */

#block-73defb65f2be82d024f8 h1,
#block-73defb65f2be82d024f8 h1 * {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(92px, 9.2vw, 172px) !important;
  font-weight: 400 !important;
  line-height: 0.82 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-align: center !important;
}

/* =====================================================
   ONE SOUL
===================================================== */

#block-c0afab18abdcd91cfcba h1,
#block-c0afab18abdcd91cfcba h1 * {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(92px, 9.2vw, 172px) !important;
  font-weight: 400 !important;
  line-height: 0.82 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  color: #2f6fff !important;
  margin-top: -34px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  text-shadow: 0 0 30px rgba(47, 111, 255, 0.10);
}

/* =====================================================
   HERO SUBTITLE
   A JOURNEY THROUGH TIME TRUTH AND TRANSFORMATION
===================================================== */

#block-91d854dea35be303f484 h3,
#block-91d854dea35be303f484 h3 * {
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: clamp(11px, 1.05vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 0 !important;
  text-align: center !important;
}

/* =====================================================
   THE JOURNEY BEGINS
===================================================== */

#block-106aaaa394df025d26d0 h1,
#block-106aaaa394df025d26d0 h1 *,
#block-106aaaa394df025d26d0 h2,
#block-106aaaa394df025d26d0 h2 *,
#block-106aaaa394df025d26d0 h3,
#block-106aaaa394df025d26d0 h3 *,
#block-106aaaa394df025d26d0 p,
#block-106aaaa394df025d26d0 p * {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(48px, 5vw, 82px) !important;
  font-weight: 400 !important;
  line-height: 0.92 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  color: #2f6fff !important;
  text-align: center !important;
  margin: 0 !important;
}

/* =====================================================
   RELEASE SECTION SPACING
===================================================== */

#block-106aaaa394df025d26d0 {
  margin-bottom: -48px !important;
}

#block-yui_3_17_2_1_1784142919220_1560 {
  margin-top: -48px !important;
}

/* =====================================================
   RELEASE DATE
===================================================== */

#block-yui_3_17_2_1_1784142919220_1560 h2,
#block-yui_3_17_2_1_1784142919220_1560 h2 * {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(86px, 8vw, 138px) !important;
  font-weight: 400 !important;
  line-height: 0.84 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-align: center !important;
  margin: 0 !important;
}

/* =====================================================
   HOMEPAGE HERO — MOBILE
===================================================== */

@media screen and (max-width: 767px) {
  #block-73defb65f2be82d024f8 h1,
  #block-73defb65f2be82d024f8 h1 *,
  #block-c0afab18abdcd91cfcba h1,
  #block-c0afab18abdcd91cfcba h1 * {
    font-size: clamp(64px, 21vw, 104px) !important;
    line-height: 0.84 !important;
  }

  #block-c0afab18abdcd91cfcba h1,
  #block-c0afab18abdcd91cfcba h1 * {
    margin-top: -18px !important;
  }

  #block-91d854dea35be303f484 h3,
  #block-91d854dea35be303f484 h3 * {
    font-size: 10px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.18em !important;
  }

  #block-106aaaa394df025d26d0 h1,
  #block-106aaaa394df025d26d0 h1 *,
  #block-106aaaa394df025d26d0 h2,
  #block-106aaaa394df025d26d0 h2 *,
  #block-106aaaa394df025d26d0 h3,
  #block-106aaaa394df025d26d0 h3 *,
  #block-106aaaa394df025d26d0 p,
  #block-106aaaa394df025d26d0 p * {
    font-size: clamp(38px, 12vw, 58px) !important;
    letter-spacing: 0.035em !important;
  }

  #block-yui_3_17_2_1_1784142919220_1560 h2,
  #block-yui_3_17_2_1_1784142919220_1560 h2 * {
    font-size: clamp(66px, 19vw, 96px) !important;
  }

  #block-106aaaa394df025d26d0 {
    margin-bottom: -72px !important;
  }

  #block-yui_3_17_2_1_1784142919220_1560 {
    margin-top: -72px !important;
  }
}

/* ==========================================
   HIDE JOURNAL TAB WHEN DRAWER IS OPEN
========================================== */

#journal-tab {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

#journal-tab.hidden {
  opacity: 0;

  pointer-events: none;

  transform: translateX(-40px);
}

/* ==========================
   Album Pages
========================== */

:root {
  --blue: #2f6fff;
  --bg: #050505;
  --text: #f2f2f2;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #050505;
  color: #f2f2f2;
  font-family: Arial, sans-serif;
}
.album-hero {
  display: grid;
  grid-template-columns: 320px 520px 1fr;
  align-items: center;
  gap: 40px;
  max-width: 1650px;
  margin: auto;
  padding: 70px 60px;
  overflow: hidden;
}
.hero-left,
.hero-center,
.hero-right {
  position: relative;
}
.hero-left,
.hero-center {
  z-index: 2;
}
.hero-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: hidden;
}
.album-cover {
  width: 100%;
  border: 1px solid #333;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.55);
}
.album-info {
  padding-right: 20px;
  background: linear-gradient(to right, rgba(5, 5, 5, 0.88), rgba(5, 5, 5, 0.45), rgba(5, 5, 5, 0));
}
.eyebrow {
  color: var(--blue);
  letter-spacing: 0.22em;
  font-size: 0.8rem;
}
h1 {
  font-size: 4.4rem;
  line-height: 1.05;
  letter-spacing: 0.08em;
  margin: 0.2em 0 0.35em;
}
.meta {
  margin: 38px 0;
  color: #aaa;
  line-height: 1.8;
}
.buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.buttons button {
  background: none;
  color: #fff;
  border: 1px solid #444;
  padding: 16px 24px;
}
.buttons button.is-confirmed {
  border-color: var(--blue);
  background: rgba(47, 111, 255, 0.12);
}
.album-portrait {
  width: 100%;
  max-width: 720px;
}
.album-portrait img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-120px);
}
.tabs {
  padding: 20px 4vw;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  max-width: 1650px;
  margin: auto;
}
.tab {
  background: none;
  border: none;
  color: #888;
  padding: 14px 0;
}
.tab.active {
  color: #fff;
  border-bottom: 2px solid var(--blue);
}
.panel {
  display: none;
  max-width: 1650px;
  margin: auto;
  padding: 40px 4vw;
}
.panel.active {
  display: block;
}
.track {
  display: flex;
  justify-content: space-between;
  padding: 22px 0;
  border-bottom: 1px solid #1c1c1c;
  letter-spacing: 0.12em;
}

/* =====================================================
   VIDEOS
===================================================== */

.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.video-card {
  display: block;
  background: #101010;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: 0.35s ease;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.video-card:hover {
  transform: translateY(-6px);
  border-color: #2d7dff;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(45, 125, 255, 0.22);
}

.video-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s ease;
}

.video-card:hover .video-thumb img {
  transform: scale(1.08);
}

.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.65));
  opacity: 0.65;
  transition: 0.35s ease;
}

.video-card:hover .video-thumb::after {
  opacity: 0.95;
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  backdrop-filter: blur(10px);
  transition: 0.35s ease;
  z-index: 2;
}

.video-card:hover .play-overlay {
  transform: translate(-50%, -50%) scale(1.12);
  background: #2d7dff;
  border-color: #5a9bff;
}

.video-card h3 {
  margin: 1rem 1.2rem 0.25rem;
  font-size: 1.2rem;
  transition: 0.3s ease;
}

.video-card p {
  margin: 0 1.2rem 1.2rem;
  color: #b8b8b8;
  line-height: 1.5;
}

.video-card:hover h3 {
  color: #2d7dff;
}

/* Restored Story Overlay */
.story-overlay {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}

.story-overlay.active {
  display: flex;
}

/* =====================================================
   PHOTOS
===================================================== */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.photo-grid a {
  display: block;
  position: relative;
  overflow: hidden;

  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);

  background: #111;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.photo-grid a:hover {
  transform: translateY(-4px);

  border-color: rgba(255, 255, 255, 0.18);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}

.photo-grid img {
  width: 100%;
  display: block;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

.photo-grid a:hover img {
  transform: scale(1.06);

  filter: brightness(1.08) contrast(1.04);
}

/* Optional subtle dark overlay */

.photo-grid a::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));

  opacity: 0;

  transition: opacity 0.35s ease;
}

.photo-grid a:hover::after {
  opacity: 1;
}

/* Mobile */

@media (max-width: 768px) {
  .photo-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }
}

/* =====================================================
   ALBUM FRAMEWORK PATCH v1
   Temporary compatibility layer for current album HTML.
   ===================================================== */

.album-page {
  max-width: 1650px;
  margin: 0 auto;
}

.hero-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.album-title {
  display: block;
  margin: 0.2em 0 0.35em;
  font-size: clamp(2.4rem, 3.8vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: 0.08em;
}

.album-title-long {
  font-size: clamp(2.1rem, 3vw, 3rem);
  letter-spacing: 0.045em;
  text-wrap: balance;
}

.album-description {
  display: block;
  max-width: 640px;
  color: #b5b5b5;
  line-height: 1.8;
}

.tabs {
  display: flex;
  gap: 48px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

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

.tab {
  flex: 0 0 auto;
}

@media (max-width: 991px) {
  .album-hero {
    grid-template-columns: 1fr !important;
    padding: 40px 20px !important;
    gap: 28px !important;
  }

  .hero-left,
  .hero-center,
  .hero-right {
    width: 100%;
  }

  .hero-center {
    order: 2;
    text-align: left;
  }

  .hero-right {
    order: 3;
  }

  .album-cover {
    max-width: 320px;
    margin: 0 auto;
    display: block;
  }

  .album-title,
  .album-description,
  .meta,
  .buttons {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .album-title-long {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
  }

  .tabs {
    gap: 24px;
    padding: 18px 20px;
  }
}

/* =====================================================
   Live
===================================================== */

.dojo-live {
  display: grid;
  grid-template-columns: 2fr 1fr;

  gap: 50px;

  align-items: center;
}

.dojo-player {
  background: #0d0d0d;

  border: 1px solid rgba(255, 255, 255, 0.08);

  overflow: hidden;
}

.live-header {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 20px 28px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  letter-spacing: 0.18em;

  font-size: 13px;
}

.live-dot {
  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: #2d7dff;

  animation: pulse 2s infinite;
}

.player-frame {
  aspect-ratio: 16/9;
}

#offline-thumb {
  object-fit: cover;
}

#twitch-player {
  display: none;

  height: 100%;
}

.dojo-info h2 {
  font-size: 52px;

  line-height: 1.05;

  margin: 20px 0;
}

.dojo-info small {
  color: #2d7dff;

  letter-spacing: 0.25em;
}

.divider {
  width: 80px;

  height: 2px;

  background: #2d7dff;

  margin: 30px 0;
}

.dojo-info p {
  opacity: 0.8;

  line-height: 1.8;
}

.dojo-info a {
  display: inline-block;

  margin-top: 40px;

  color: white;

  text-decoration: none;

  border-bottom: 1px solid #2d7dff;
}

@keyframes pulse {
  0% {
    transform: scale(1);

    opacity: 1;
  }

  50% {
    transform: scale(1.4);

    opacity: 0.5;
  }

  100% {
    transform: scale(1);

    opacity: 1;
  }
}

@media (max-width: 900px) {
  .dojo-live {
    grid-template-columns: 1fr;
  }
}

#twitch-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* =====================================================
   DISCOGRAPHY V2
   The Lord Razu Framework
===================================================== */

.discography {
  position: relative;
  max-width: 1650px;
  margin: 0 auto;
  padding: 120px 60px;
  overflow: hidden;
}

/* =====================================================
   HEADER
===================================================== */

.discography-header {
  text-align: center;
  margin-bottom: 70px;
}

.discography-header .eyebrow {
  display: block;
  margin-bottom: 18px;
}

.discography-header h2 {
  margin: 0;
  color: #fff;
}

/* =====================================================
   CAROUSEL
===================================================== */

.discography-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================
   EMBLA
===================================================== */

.embla {
  width: 100%;
}

.embla__viewport {
  overflow: hidden;
  width: 100%;
}

.embla__container {
  display: flex;
  align-items: stretch;
}

.embla__slide {
  flex: 0 0 34%;
  min-width: 0;
  display: flex;

  padding: 0 18px;

  transition:
    transform 0.45s ease,
    opacity 0.45s ease;
}

/* =====================================================
   CARD
===================================================== */

.discography-card {
  position: relative;

  display: flex;

  flex-direction: column;

  width: 100%;

  height: 100%;

  overflow: hidden;

  background: #111;

  border-radius: 22px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}

.discography-cover {
  aspect-ratio: 1/1;

  overflow: hidden;

  background: #080808;
}

.discography-cover img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.6s ease;
}

.discography-card:hover img {
  transform: scale(1.05);
}

/* =====================================================
   CONTENT
===================================================== */

.discography-content {
  display: flex;

  flex: 1;

  flex-direction: column;

  padding: 30px;
}

.discography-title {
  margin: 0;

  color: #fff;

  font-size: 1.6rem;

  min-height: 2.16em;

  overflow-wrap: normal;

  word-break: normal;

  hyphens: none;

  text-wrap: balance;
}

.discography-title--long {
  font-size: 1.42rem;
}
.discography-title--extra-long {
  font-size: 1.24rem;
}

.discography-subtitle {
  margin: 0.5rem 0 1.4rem;

  color: #999;

  text-transform: uppercase;

  font-size: 0.78rem;
}

.discography-meta {
  color: #bcbcbc;

  line-height: 1.7;

  margin-bottom: 2rem;
}

/* =====================================================
   BUTTON
===================================================== */

.discography-button {
  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  margin-top: auto;

  padding: 16px;

  text-decoration: none;

  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.15);

  transition: 0.3s;
}

.discography-button:hover {
  background: var(--blue);

  border-color: var(--blue);
}

/* =====================================================
   ACTIVE SLIDE
===================================================== */

.embla__slide {
  opacity: 0.45;

  transform: scale(0.82);
}

.embla__slide.is-selected {
  opacity: 1;

  transform: scale(1);
}

/* =====================================================
   ARROWS
===================================================== */

.discography-arrow {
  width: 58px;
  height: 58px;

  border-radius: 50%;

  border: none;

  cursor: pointer;

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  transition: 0.3s;

  z-index: 20;
}

.discography-arrow:hover {
  background: var(--blue);

  transform: scale(1.08);
}

.discography-prev {
  margin-right: 18px;
}

.discography-next {
  margin-left: 18px;
}

/* =====================================================
   DOTS
===================================================== */

.discography-dots {
  display: flex;

  justify-content: center;

  gap: 12px;

  margin-top: 45px;
}

.discography-dot {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  padding: 0;

  border: 0;

  background: #444;

  cursor: pointer;

  transition: 0.3s;
}

.discography-dot.active {
  background: var(--blue);

  transform: scale(1.4);
}

.discography-dot:focus-visible,
.discography-arrow:focus-visible,
.discography-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

/* =====================================================
   FOOTER
===================================================== */

.discography-footer {
  margin-top: 90px;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {
  .embla__slide {
    flex: 0 0 50%;
  }
}

@media (max-width: 768px) {
  .discography {
    padding: 90px 24px;
  }

  .embla__slide {
    flex: 0 0 88%;

    padding: 0 10px;
  }

  .discography-title {
    font-size: clamp(1.35rem, 6vw, 1.6rem);
  }
  .discography-title--long {
    font-size: clamp(1.22rem, 5.4vw, 1.42rem);
  }
  .discography-title--extra-long {
    font-size: clamp(1.08rem, 4.8vw, 1.28rem);
  }

  .discography-arrow {
    display: none;
  }
}

/* CURRENT PAGE */
.discography-card.current-page {
  border-color: var(--blue);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(47, 111, 255, 0.22);
}

.discography-card.current-page::before {
  content: "CURRENT";
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--blue);
  background: rgba(47, 111, 255, 0.14);
  border: 1px solid rgba(47, 111, 255, 0.35);
  backdrop-filter: blur(10px);
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  z-index: 10;
}

/* =====================================================
   Album Tracks
===================================================== */

.album-player {
  max-width: 1650px;
  margin: 30px auto;
  padding: 0 4vw;
}

.album-player audio {
  width: 100%;
}

.track {
  cursor: pointer;
}

.track.playing {
  color: #2d7dff;
  border-left: 3px solid #2d7dff;
  padding-left: 20px;
}

/* =====================================================
   ALBUM PLAYER v1.1 — HYBRID CINEMATIC COMMAND CONSOLE
   ===================================================== */
#global-player.lr-album-player-v11 {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  display: grid;
  grid-template-columns: 88px minmax(220px, 1fr) auto;
  grid-template-areas: "cover info controls" "cover utility utility";
  align-items: center;
  gap: 12px 22px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 14px 18px;
  color: #fff;
  background: linear-gradient(110deg, rgba(8, 8, 10, 0.97), rgba(14, 17, 24, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(47, 111, 255, 0.5);
  border-radius: 16px;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(47, 111, 255, 0.08);
  backdrop-filter: blur(18px);
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.35s ease;
}
#global-player.lr-album-player-v11.visible,
#global-player.lr-album-player-v11.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
#global-player.lr-album-player-v11 .player-cover {
  grid-area: cover;
  position: relative;
}
#global-player.lr-album-player-v11 .player-cover::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(47, 111, 255, 0.36);
  border-radius: 13px;
  opacity: 0.65;
}
#global-player.lr-album-player-v11 #player-cover {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 10px;
  background: #111;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.48),
    0 0 18px rgba(47, 111, 255, 0.13);
}
#global-player.lr-album-player-v11.is-playing #player-cover {
  animation: lr-cover-breathe 3.2s ease-in-out infinite;
}
@keyframes lr-cover-breathe {
  50% {
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.55),
      0 0 28px rgba(47, 111, 255, 0.28);
  }
}
#global-player.lr-album-player-v11 .player-info {
  grid-area: info;
  min-width: 0;
}
#global-player.lr-album-player-v11 #player-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.045em;
}
#global-player.lr-album-player-v11 #player-album {
  margin-top: 4px;
  color: #8caeff;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#global-player.lr-album-player-v11 .progress {
  display: grid;
  grid-template-columns: 42px minmax(120px, 1fr) 42px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
#global-player.lr-album-player-v11 #current-time,
#global-player.lr-album-player-v11 #duration {
  color: #aaa;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
#global-player.lr-album-player-v11 input[type="range"] {
  accent-color: #2f6fff;
  cursor: pointer;
}
#global-player.lr-album-player-v11 #progress-bar {
  width: 100%;
  height: 4px;
}
#global-player.lr-album-player-v11 .player-controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lr-player-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  cursor: pointer;
  transition: 0.22s ease;
}
.lr-player-button:hover {
  border-color: #2f6fff;
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(47, 111, 255, 0.22);
}
.lr-player-button--main {
  position: relative;
  width: 52px;
  height: 52px;
  background: #2f6fff;
  border-color: #5d91ff;
  font-size: 1.08rem;
  box-shadow: 0 0 24px rgba(47, 111, 255, 0.28);
}
.lr-player-utility {
  grid-area: utility;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 10px;
}
.lr-player-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  min-width: 0;
}
.lr-player-status span {
  color: #2f6fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  white-space: nowrap;
}
.lr-player-status strong {
  color: #aaa;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lr-player-tool {
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: transparent;
  color: #888;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: 0.2s ease;
}
.lr-player-tool:hover,
.lr-player-tool.is-active {
  color: #fff;
  border-color: #2f6fff;
  background: rgba(47, 111, 255, 0.12);
}
.lr-player-tool.is-confirmed {
  color: #fff;
  border-color: #2f6fff;
  background: rgba(47, 111, 255, 0.2);
  box-shadow: 0 0 16px rgba(47, 111, 255, 0.16);
}
.lr-player-volume {
  width: 90px;
}
.lr-player-tool[hidden] {
  display: none;
}
.track[data-audio] {
  position: relative;
  transition:
    padding 0.25s ease,
    color 0.25s ease,
    background 0.25s ease;
}
.track[data-audio]:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(47, 111, 255, 0.08), transparent);
}
.track[data-audio].is-active,
.track[data-audio].playing,
.track[data-audio].is-playing {
  color: #6d9cff;
  border-left: 3px solid #2f6fff;
  padding-left: 20px;
  background: linear-gradient(90deg, rgba(47, 111, 255, 0.13), transparent 55%);
}
.track[data-audio].is-playing::before {
  content: "NOW PLAYING";
  position: absolute;
  right: 92px;
  top: 50%;
  transform: translateY(-50%);
  color: #2f6fff;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  animation: lr-signal 1.6s ease-in-out infinite;
}
.track[data-audio].is-shared {
  outline: 1px solid rgba(47, 111, 255, 0.35);
  outline-offset: -1px;
  background: linear-gradient(90deg, rgba(47, 111, 255, 0.16), transparent 65%);
}
@keyframes lr-signal {
  50% {
    opacity: 0.35;
  }
}
body:has(#global-player.lr-album-player-v11.visible) {
  padding-bottom: 145px;
}
@media (max-width: 760px) {
  #global-player.lr-album-player-v11 {
    left: 8px;
    right: 8px;
    bottom: 8px;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    grid-template-areas: "cover info controls" "utility utility utility";
    gap: 8px 12px;
    padding: 10px;
    border-radius: 13px;
  }
  #global-player.lr-album-player-v11 #player-cover {
    width: 58px;
    height: 58px;
    border-radius: 8px;
  }
  #global-player.lr-album-player-v11 .progress {
    grid-template-columns: 34px minmax(70px, 1fr) 34px;
    gap: 5px;
    margin-top: 6px;
  }
  #global-player.lr-album-player-v11 .player-controls {
    gap: 4px;
  }
  .lr-player-button {
    width: 32px;
    height: 32px;
    font-size: 0.68rem;
  }
  .lr-player-button--main {
    width: 42px;
    height: 42px;
    font-size: 0.9rem;
  }
  .lr-player-status span {
    font-size: 0.52rem;
    letter-spacing: 0.14em;
  }
  .lr-player-tool {
    padding: 6px;
    font-size: 0.5rem;
  }
  .lr-player-volume {
    width: 58px;
  }
  .track[data-audio].is-playing::before {
    display: none;
  }
  body:has(#global-player.lr-album-player-v11.visible) {
    padding-bottom: 135px;
  }
}
@media (max-width: 480px) {
  .lr-player-utility {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lr-player-status {
    margin-right: 6px;
  }
  .lr-player-status span {
    display: none;
  }
  #album-shuffle,
  #album-repeat {
    display: none;
  }
  .lr-player-volume {
    width: 54px;
  }
}

/* =====================================================
   ALBUM PAGE LYRICS
   Scoped so the standalone Lyrics App remains separate.
   ===================================================== */
.album-page #lyrics .album-lyrics-view {
  max-width: 900px;
  padding: 10px 0 40px;
}
.album-page #lyrics .album-lyrics-heading {
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.album-page #lyrics .album-lyrics-label {
  display: block;
  margin-bottom: 10px;
  color: #2f6fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.album-page #lyrics #album-lyrics-title {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.25rem);
}
.album-page #lyrics .album-lyrics-body {
  max-width: 800px;
  color: #d9d9d9;
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 2;
}
.album-page #lyrics .album-lyrics-body h3 {
  margin: 42px 0 16px;
  color: #2f6fff;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.album-page #lyrics .album-lyrics-body p {
  margin: 0 0 30px;
}
@media (max-width: 760px) {
  .album-page #lyrics .album-lyrics-view {
    padding-top: 0;
  }
  .album-page #lyrics .album-lyrics-heading {
    margin-bottom: 22px;
  }
}

/* ==========================================
   Stream & Purchase
========================================== */

.stream-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}

.stream-links a {
  display: flex;
  align-items: center;
  gap: 14px;

  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;

  transition: opacity 0.25s ease;
}

.stream-links a:hover {
  opacity: 0.75;
}

.stream-links img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;

  /* Makes black SVGs appear white */
  filter: brightness(0) invert(1);

  transition: opacity 0.25s ease;
}

/* ==========================================
   Home Hero 
========================================== */

.hero-copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(90%, 1100px);

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

/* THE WORLD OF */

.hero-kicker {
  margin: 0 0 22px;

  font-family: Montserrat, sans-serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.55em;
  text-transform: uppercase;

  color: #fff;
}

/* THE LORD RAZU */

.hero-title {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(110px, 11vw, 210px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: #d6d6d6;
}

/* Description */

.hero-description {
  margin: 40px 0 60px;

  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;

  color: #b89654;
}

/* Button */

.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 320px;
  height: 70px;

  border: 1px solid #8b6b32;

  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;

  color: #fff;
  text-decoration: none;

  transition: 0.3s ease;
}

.hero-button:hover {
  background: #8b6b32;
}

/* ==========================================
   Current Release
========================================== */

.current-release {
  padding: 120px 20px;
  text-align: center;
}

.section-kicker {
  margin: 0 0 20px;

  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.75em;
  text-transform: uppercase;

  color: #ffffff;
}

.release-title {
  margin: 0 0 30px;

  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: #e6e6e6;
}

.release-description {
  margin: 0 0 50px;

  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.08em;

  color: #c7c7c7;
}

.release-buttons {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

.release-button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 240px;
  height: 70px;

  border: 1px solid #8b6b32;

  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;

  color: #fff;
  text-decoration: none;

  transition: 0.3s ease;
}

.release-button:hover {
  background: #8b6b32;
}

/* =====================================================
   THE LORD RAZU RADIO v2
   Fully scoped component. No html/body/global selectors.
===================================================== */

#lord-razu-radio,
#lord-razu-radio * {
  box-sizing: border-box;
}

#lord-razu-radio {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 64px);
  overflow: hidden;
  color: var(--lrr-text);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

#lord-razu-radio::before,
#lord-razu-radio::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#lord-razu-radio::before {
  z-index: -2;
  filter: blur(0.2px);
}

#lord-razu-radio::after {
  z-index: -1;
}

#lord-razu-radio button,
#lord-razu-radio input,
#lord-razu-radio a {
  font: inherit;
}

#lord-razu-radio button {
  color: inherit;
}

#lord-razu-radio .lrr__ambient {
  position: absolute;
  inset: -25%;
  z-index: -1;
  filter: blur(70px);
  animation: lrrDrift 18s linear infinite;
}

#lord-razu-radio .lrr__masthead {
  text-align: center;
  margin-bottom: 34px;
}
#lord-razu-radio .lrr__brand {
  margin: 0 0 6px;
  font-family: Georgia, serif;
  letter-spacing: 0.58em;
  font-size: clamp(12px, 1.3vw, 20px);
}
#lord-razu-radio .lrr__title {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(64px, 8.5vw, 132px);
  line-height: 0.88;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}
#lord-razu-radio .lrr__tagline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 20px 0 10px;
  letter-spacing: 0.34em;
  font-size: 12px;
}
#lord-razu-radio .lrr__tagline span {
  width: 46px;
  height: 1px;
}
#lord-razu-radio .lrr__tagline span:last-child {
  transform: scaleX(-1);
}
#lord-razu-radio .lrr__masthead blockquote {
  margin: 0;
  font:
    italic clamp(15px, 1.4vw, 20px)/1.45 Georgia,
    serif;
}
#lord-razu-radio .lrr__live {
  margin-top: 14px;
  letter-spacing: 0.12em;
}
#lord-razu-radio .lrr__live i {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-radius: 50%;
  animation: lrrPulse 1.7s ease-in-out infinite;
}

#lord-razu-radio .lrr__layout {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(320px, 0.95fr);
  gap: 18px;
}
#lord-razu-radio .lrr__main {
  min-width: 0;
}
#lord-razu-radio .lrr__now {
  display: grid;
  grid-template-columns: minmax(260px, 0.88fr) minmax(360px, 1.12fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: 8px 18px 38px;
}
#lord-razu-radio .lrr__art-wrap {
  position: relative;
}
#lord-razu-radio .lrr__art-wrap::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(126, 210, 255, 0.34);
}
#lord-razu-radio .lrr__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1/1.18;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.52);
}

#lord-razu-radio .lrr__player {
  min-width: 0;
}
#lord-razu-radio .lrr__eyebrow {
  margin: 0 0 14px;
  letter-spacing: 0.38em;
  font-size: 13px;
}
#lord-razu-radio .lrr__player h2 {
  margin: 0;
  font:
    400 clamp(46px, 5vw, 76px)/0.95 Georgia,
    serif;
  letter-spacing: 0.07em;
}
#lord-razu-radio .lrr__album {
  margin: 12px 0 24px;
  font:
    italic clamp(21px, 2vw, 31px) Georgia,
    serif;
}

#lord-razu-radio .lrr__wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 64px;
  margin: 12px 0 8px;
  overflow: hidden;
  border-bottom: 1px solid rgba(105, 192, 247, 0.2);
}
#lord-razu-radio .lrr__wave i {
  flex: 1 1 2px;
  min-width: 1px;
  height: var(--h);
  transform-origin: center;
  animation: lrrWave 1.25s ease-in-out infinite alternate;
  animation-delay: var(--d);
}
#lord-razu-radio:not(.is-playing) .lrr__wave i {
  animation-play-state: paused;
  opacity: 0.65;
}

#lord-razu-radio .lrr__timeline {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 14px;
  align-items: center;
  font-family: Georgia, serif;
  font-size: 14px;
}
#lord-razu-radio input[type="range"] {
  width: 100%;
  accent-color: var(--lrr-blue);
  cursor: pointer;
}
#lord-razu-radio .lrr__timeline input {
  height: 3px;
}

#lord-razu-radio .lrr__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(35px, 5vw, 72px);
  margin: 26px 0 18px;
}
#lord-razu-radio .lrr__controls button {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: 0.25s ease;
}
#lord-razu-radio .lrr__controls button:hover {
  transform: scale(1.08);
}
#lord-razu-radio .lrr__controls svg {
  width: 36px;
  stroke: none;
}
#lord-razu-radio .lrr__controls .lrr__play {
  width: 86px;
  height: 86px;
  border: 1px solid rgba(214, 239, 255, 0.85);
  border-radius: 50%;
}
#lord-razu-radio .lrr__play svg {
  width: 38px;
}
#lord-razu-radio .lrr__pause-icon {
  display: none;
}
#lord-razu-radio.is-playing .lrr__play-icon {
  display: none;
}
#lord-razu-radio.is-playing .lrr__pause-icon {
  display: block;
}

#lord-razu-radio .lrr__utility {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 28px;
  align-items: center;
}
#lord-razu-radio .lrr__mode {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
#lord-razu-radio .lrr__mode svg {
  width: 29px;
  fill: none;
  stroke: #e7f5ff;
  stroke-width: 1.5;
}
#lord-razu-radio .lrr__mode span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#lord-razu-radio .lrr__mode small {
  letter-spacing: 0.1em;
  font-size: 10px;
}
#lord-razu-radio .lrr__mode strong {
  color: #8f9aa3;
  font-weight: 400;
  font-size: 11px;
}
#lord-razu-radio .lrr__volume {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: center;
}
#lord-razu-radio .lrr__volume svg {
  width: 26px;
  fill: none;
  stroke: #cbd6dd;
  stroke-width: 1.5;
}

#lord-razu-radio .lrr__transmission-panel {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 0.72fr;
  min-height: 210px;
  margin-top: 16px;
  border: 1px solid var(--lrr-line);
  background: rgba(2, 7, 11, 0.56);
}
#lord-razu-radio .lrr__transmission-panel > div {
  padding: 28px;
}
#lord-razu-radio .lrr__panel-head {
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.16em;
  font:
    13px Georgia,
    serif;
}
#lord-razu-radio .lrr__log-copy blockquote {
  margin: 38px 0 0 24px;
  font:
    italic 18px/1.55 Georgia,
    serif;
}
#lord-razu-radio .lrr__orb {
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
#lord-razu-radio .lrr__orb::before,
#lord-razu-radio .lrr__orb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}
#lord-razu-radio .lrr__orb::after {
  transform: translateY(-50%) scaleY(18);
  opacity: 0.12;
  filter: blur(6px);
}
#lord-razu-radio .lrr__orb span {
  width: 118px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #b6e5ff;
  animation: lrrOrb 4s ease-in-out infinite;
}
#lord-razu-radio .lrr__station {
  border-left: 1px solid var(--lrr-line);
  text-align: center;
}
#lord-razu-radio .lrr__station p {
  margin: 0 0 24px;
  color: #a5b0b8;
  letter-spacing: 0.14em;
  font-family: Georgia, serif;
}
#lord-razu-radio .lrr__station small {
  display: block;
  color: #9da7ae;
  font-size: 11px;
  line-height: 1.55;
}
#lord-razu-radio .lrr__station strong {
  display: block;
  margin: 9px 0 13px;
  color: var(--lrr-blue);
  font:
    13px Georgia,
    serif;
  letter-spacing: 0.08em;
}
#lord-razu-radio .lrr__station b {
  display: block;
  margin-top: 16px;
  color: var(--lrr-cream);
  font-size: 22px;
}

#lord-razu-radio .lrr__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#lord-razu-radio .lrr__card {
  border: 1px solid var(--lrr-line);
  background: linear-gradient(145deg, rgba(4, 9, 14, 0.88), rgba(2, 6, 9, 0.78));
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.18);
}
#lord-razu-radio .lrr__card h3 {
  margin: 0;
  padding: 24px 28px 16px;
  color: var(--lrr-cream);
  font:
    400 16px Georgia,
    serif;
  letter-spacing: 0.1em;
}
#lord-razu-radio .lrr__status {
  min-height: 198px;
}
#lord-razu-radio .lrr__status ul {
  list-style: none;
  margin: 0;
  padding: 6px 28px 22px;
}
#lord-razu-radio .lrr__status li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 15px 0;
  color: #d4d9dd;
  font-size: 14px;
}
#lord-razu-radio .lrr__status li span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--lrr-blue);
  border-radius: 50%;
  color: var(--lrr-blue);
  font-size: 13px;
}

#lord-razu-radio .lrr__history {
  padding-bottom: 4px;
}
#lord-razu-radio .lrr__history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 65px;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

#lord-razu-radio .lrr__history-item strong {
  min-width: 0;
}

#lord-razu-radio .lrr__history-item > span {
  white-space: nowrap;
  text-align: right;
}
#lord-razu-radio .lrr__history-item img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
#lord-razu-radio .lrr__history-item strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
#lord-razu-radio .lrr__history-item.is-current strong {
  color: var(--lrr-blue);
}
#lord-razu-radio .lrr__history-item em {
  display: block;
  margin-top: 5px;
  color: #9aa1a7;
  font:
    italic 13px Georgia,
    serif;
}
#lord-razu-radio .lrr__history-item > span {
  color: #b7bcc0;
  font:
    14px Georgia,
    serif;
}
#lord-razu-radio .lrr__history-button {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 36px);
  margin: 0 18px 12px;
  padding: 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  color: var(--lrr-cream);
  letter-spacing: 0.08em;
  font-size: 11px;
  cursor: pointer;
}

#lord-razu-radio .lrr__discover {
  padding-bottom: 22px;
}
#lord-razu-radio .lrr__discover-grid {
  display: grid;
  grid-template-columns: 138px 1fr;
  gap: 18px;
  padding: 4px 28px 0;
  align-items: center;
}
#lord-razu-radio .lrr__discover-grid img {
  width: 100%;
  aspect-ratio: 0.78;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
#lord-razu-radio .lrr__discover h4 {
  margin: 0 0 12px;
  font:
    400 16px Georgia,
    serif;
  letter-spacing: 0.08em;
}
#lord-razu-radio .lrr__discover p {
  margin: 0 0 18px;
  color: #aaa;
  font:
    italic 15px/1.55 Georgia,
    serif;
}
#lord-razu-radio .lrr__discover a {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid rgba(226, 212, 183, 0.34);
  color: var(--lrr-cream);
  text-decoration: none;
  letter-spacing: 0.09em;
  font-size: 11px;
  transition: 0.25s ease;
}
#lord-razu-radio .lrr__discover a:hover {
  border-color: var(--lrr-blue);
  color: var(--lrr-blue);
}

#lord-razu-radio .lrr__footer {
  justify-content: center;
  margin-top: 24px;
  color: #8d969d;
  letter-spacing: 0.38em;
  font:
    12px Georgia,
    serif;
  text-align: center;
}
#lord-razu-radio .lrr__footer > span {
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8b744d);
}

#lord-razu-radio .lrr__footer > span:last-child {
  transform: scaleX(-1);
}
#lord-razu-radio .lrr__footer b {
  color: #8b744d;
}

#lord-razu-radio .lrr__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#lord-razu-radio :focus-visible {
  outline: 2px solid var(--lrr-blue);
  outline-offset: 3px;
}

@keyframes lrrPulse {
  50% {
    opacity: 0.35;
    transform: scale(0.78);
  }
}
@keyframes lrrWave {
  from {
    transform: scaleY(0.45);
    opacity: 0.55;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes lrrOrb {
  50% {
    transform: scale(1.06);
    box-shadow:
      inset 0 0 32px rgba(86, 183, 243, 0.5),
      0 0 28px rgba(86, 183, 243, 0.75),
      0 0 72px rgba(86, 183, 243, 0.3);
  }
}
@keyframes lrrDrift {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1080px) {
  #lord-razu-radio .lrr__layout {
    grid-template-columns: 1fr;
  }
  #lord-razu-radio .lrr__side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #lord-razu-radio .lrr__discover {
    grid-column: 1/-1;
  }
}

@media (max-width: 760px) {
  #lord-razu-radio {
    padding: 28px 18px;
  }
  #lord-razu-radio .lrr__title {
    letter-spacing: 0.08em;
    text-indent: 0.08em;
  }
  #lord-razu-radio .lrr__tagline {
    letter-spacing: 0.18em;
    font-size: 10px;
  }
  #lord-razu-radio .lrr__now {
    grid-template-columns: 1fr;
    padding: 8px 0 30px;
  }
  #lord-razu-radio .lrr__art-wrap {
    max-width: 360px;
    margin: 0 auto;
  }
  #lord-razu-radio .lrr__player {
    text-align: center;
  }
  #lord-razu-radio .lrr__timeline {
    text-align: left;
  }
  #lord-razu-radio .lrr__utility {
    grid-template-columns: 1fr;
  }
  #lord-razu-radio .lrr__mode {
    justify-content: center;
  }
  #lord-razu-radio .lrr__transmission-panel {
    grid-template-columns: 1fr;
  }
  #lord-razu-radio .lrr__orb {
    min-height: 190px;
  }
  #lord-razu-radio .lrr__station {
    border-left: 0;
    border-top: 1px solid var(--lrr-line);
  }
  #lord-razu-radio .lrr__side {
    grid-template-columns: 1fr;
  }
  #lord-razu-radio .lrr__discover {
    grid-column: auto;
  }
  #lord-razu-radio .lrr__footer {
    letter-spacing: 0.18em;
    font-size: 9px;
  }
  #lord-razu-radio .lrr__footer > span {
    width: 28px;
  }
}

@media (max-width: 430px) {
  #lord-razu-radio .lrr__discover-grid {
    grid-template-columns: 105px 1fr;
    padding-inline: 18px;
  }
  #lord-razu-radio .lrr__history-item {
    padding-inline: 18px;
  }
  #lord-razu-radio .lrr__controls {
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #lord-razu-radio *,
  #lord-razu-radio *::before,
  #lord-razu-radio *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =====================================================
   RADIO FOOTER + STREAMING LINKS
   ===================================================== */

#lord-razu-radio .lrr__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 28px 32px 34px;
}

#lord-razu-radio .lrr__footer-tagline {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  align-items: center;
  gap: 22px;
}

#lord-razu-radio .lrr__footer-tagline > span {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 93, 0.55));
}

#lord-razu-radio .lrr__footer-tagline > span:last-child {
  background: linear-gradient(90deg, rgba(200, 168, 93, 0.55), transparent);
}

#lord-razu-radio .lrr__footer-tagline p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-align: center;
  white-space: nowrap;
}

#lord-razu-radio .lrr__footer-tagline b {
  margin: 0 12px;
  color: #c8a85d;
  font-weight: 400;
}

#lord-razu-radio .lrr__streaming-links {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 26px;
}

#lord-razu-radio .lrr__streaming-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

#lord-razu-radio .lrr__streaming-links a:hover {
  color: #fff;
  transform: translateY(-2px);
}

#lord-razu-radio .lrr__streaming-links img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 1;
}

#lord-razu-radio .lrr__streaming-links .featured-store {
  color: #c8a85d;
  font-weight: 700;
}

#lord-razu-radio .lrr__streaming-links .featured-store img {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  #lord-razu-radio .lrr__footer {
    gap: 20px;
    padding: 24px 18px 30px;
  }

  #lord-razu-radio .lrr__footer-tagline {
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    gap: 12px;
  }

  #lord-razu-radio .lrr__footer-tagline p {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    white-space: normal;
    line-height: 1.8;
  }

  #lord-razu-radio .lrr__footer-tagline b {
    margin: 0 6px;
  }

  #lord-razu-radio .lrr__streaming-links {
    gap: 14px 18px;
  }

  #lord-razu-radio .lrr__streaming-links a {
    font-size: 0.72rem;
  }
}

/* =====================================================
   RADIO HISTORY EMPTY STATE
   ===================================================== */

#lord-razu-radio .lrr__history-empty {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 18px 28px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =====================================================
   THE LORD RAZU — STREAM HERO
   Standalone Hero
===================================================== */

#lord-razu-stream-hero,
#lord-razu-stream-hero * {
  box-sizing: border-box;
}

#lord-razu-stream-hero {
  --lrs-blue: #2f7cff;
  --lrs-text: #f5f5f5;
  --lrs-muted: #d7d9de;

  position: relative;
  width: 100%;
  min-height: 620px;

  display: flex;
  align-items: center;

  overflow: hidden;

  margin: 0;
  padding: clamp(72px, 8vw, 120px) clamp(32px, 6vw, 90px);

  background: transparent !important;
  background-color: transparent !important;

  color: var(--lrs-text);
}

#lord-razu-stream-hero .lrs-hero__inner {
  width: min(760px, 100%);
  position: relative;
  z-index: 2;
}

#lord-razu-stream-hero .lrs-hero__eyebrow {
  margin: 0 0 14px;

  color: var(--lrs-blue);

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 0.28em;
  text-transform: uppercase;
}

#lord-razu-stream-hero .lrs-hero__title {
  margin: 0 !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(5rem, 10vw, 10rem) !important;

  line-height: 0.82 !important;

  letter-spacing: 0.02em;

  color: #fff !important;

  text-transform: uppercase;

  text-align: left;
}

#lord-razu-stream-hero .lrs-hero__rule {
  width: 120px;
  height: 3px;

  margin: 38px 0 34px;

  background: var(--lrs-blue);

  box-shadow: 0 0 18px rgba(47, 124, 255, 0.45);
}

#lord-razu-stream-hero .lrs-hero__description {
  margin: 0 0 38px;

  color: var(--lrs-muted);

  font-size: 17px;

  line-height: 1.9;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}

#lord-razu-stream-hero .lrs-hero__actions {
  display: flex;

  gap: 18px;

  flex-wrap: wrap;
}

#lord-razu-stream-hero .lrs-hero__button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-width: 190px;
  min-height: 54px;

  padding: 0 28px;

  border: 1px solid var(--lrs-blue);

  background: rgba(0, 0, 0, 0.18);

  color: #fff;

  text-decoration: none;

  text-transform: uppercase;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.13em;

  transition: 0.25s ease;
}

#lord-razu-stream-hero .lrs-hero__button:hover {
  background: rgba(47, 124, 255, 0.12);

  transform: translateY(-2px);

  box-shadow: 0 0 20px rgba(47, 124, 255, 0.25);
}

#lord-razu-stream-hero .lrs-hero__button--primary {
  background: rgba(47, 124, 255, 0.08);
}

@media (max-width: 768px) {
  #lord-razu-stream-hero {
    min-height: 560px;

    padding: 80px 24px 60px;
  }

  #lord-razu-stream-hero .lrs-hero__title {
    font-size: clamp(4.3rem, 22vw, 7rem) !important;
  }

  #lord-razu-stream-hero .lrs-hero__description {
    font-size: 14px;

    letter-spacing: 0.08em;
  }

  #lord-razu-stream-hero .lrs-hero__actions {
    flex-direction: column;

    gap: 14px;
  }

  #lord-razu-stream-hero .lrs-hero__button {
    width: 100%;
  }
}

/* =====================================================
   THE LORD RAZU — LIVE NOW SECTION
===================================================== */

#lord-razu-live-section,
#lord-razu-live-section * {
  box-sizing: border-box;
}

#lord-razu-live-section {
  --lrz-blue: #2f7cff;
  --lrz-panel: rgba(7, 9, 13, 0.96);
  --lrz-border: rgba(255, 255, 255, 0.13);
  --lrz-text: #ffffff;
  --lrz-muted: #a6aab3;

  width: min(1500px, calc(100% - 64px));
  margin: 0 auto 100px;

  color: var(--lrz-text);
  background: var(--lrz-panel);
  border: 1px solid var(--lrz-border);
}

/* HEADER */

#lord-razu-live-section .lrz-live__header {
  min-height: 76px;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 0 28px;

  border-bottom: 1px solid var(--lrz-border);
}

#lord-razu-live-section .lrz-live__bolt {
  color: var(--lrz-blue);
  font-size: 27px;
  line-height: 1;
}

#lord-razu-live-section .lrz-live__header h2 {
  margin: 0 !important;

  color: #ffffff !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* TWO-COLUMN LAYOUT */

#lord-razu-live-section .lrz-live__grid {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1.75fr)
    minmax(340px, 0.85fr);

  align-items: stretch;
}

/* LEFT VIDEO COLUMN */

#lord-razu-live-section .lrz-live__video-column {
  min-width: 0;

  padding: 18px;

  border-right: 1px solid var(--lrz-border);
}

#lord-razu-live-section .lrz-live__video-frame {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

#lord-razu-live-section .lrz-live__thumbnail,
#lord-razu-live-section .lrz-live__twitch-player,
#lord-razu-live-section .lrz-live__twitch-player iframe {
  width: 100%;
  height: 100%;
}

#lord-razu-live-section .lrz-live__thumbnail {
  display: block;
  object-fit: cover;
}

#lord-razu-live-section .lrz-live__twitch-player {
  display: none;
}

#lord-razu-live-section .lrz-live__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;

  padding: 7px 10px;

  color: #ffffff;
  background: #ff173f;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

#lord-razu-live-section .lrz-live__play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;

  width: 76px;
  height: 76px;

  display: grid;
  place-items: center;

  transform: translate(-50%, -50%);

  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;

  cursor: pointer;
  font-size: 24px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

#lord-razu-live-section .lrz-live__play-button:hover {
  transform: translate(-50%, -50%) scale(1.08);

  background: var(--lrz-blue);
  border-color: #8db1ff;

  box-shadow: 0 0 28px rgba(47, 124, 255, 0.4);
}

/* CHANNEL INFORMATION UNDER VIDEO */

#lord-razu-live-section .lrz-live__channel {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;

  padding: 16px 2px 0;
}

#lord-razu-live-section .lrz-live__avatar {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;

  background: #0c0e13;
  color: #ffffff;

  font-size: 17px;
  font-weight: 700;
}

#lord-razu-live-section .lrz-live__channel-copy {
  min-width: 0;
}

#lord-razu-live-section .lrz-live__channel-copy strong,
#lord-razu-live-section .lrz-live__channel-copy span,
#lord-razu-live-section .lrz-live__channel-copy small {
  display: block;
}

#lord-razu-live-section .lrz-live__channel-copy strong {
  color: #ffffff;
  font-size: 15px;
}

#lord-razu-live-section .lrz-live__channel-copy span {
  margin-top: 3px;

  overflow: hidden;

  color: #ffffff;

  font-size: 10px;
  letter-spacing: 0.06em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

#lord-razu-live-section .lrz-live__channel-copy small {
  margin-top: 4px;

  color: #8e939e;
  font-size: 11px;
}

#lord-razu-live-section .lrz-live__platform {
  color: #ffffff;

  font-size: 12px;
  letter-spacing: 0.1em;
}

/* RIGHT INFORMATION PANEL */

#lord-razu-live-section .lrz-live__info {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 50px 42px;
}

#lord-razu-live-section .lrz-live__eyebrow {
  margin: 0 0 16px;

  color: var(--lrz-blue);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;

  text-transform: uppercase;
}

#lord-razu-live-section .lrz-live__info h3 {
  margin: 0 !important;

  color: #ffffff !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(42px, 4vw, 68px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;

  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
}

#lord-razu-live-section .lrz-live__rule {
  width: 68px;
  height: 2px;

  margin: 28px 0 24px;

  background: var(--lrz-blue);

  box-shadow: 0 0 16px rgba(47, 124, 255, 0.5);
}

#lord-razu-live-section .lrz-live__description {
  margin: 0 0 28px;

  color: var(--lrz-muted);

  font-size: 15px;
  line-height: 1.8;
}

/* BUTTONS */

#lord-razu-live-section .lrz-live__button {
  width: 100%;
  min-height: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0 24px;

  border: 1px solid var(--lrz-blue);

  background: transparent;
  color: #ffffff !important;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;

  text-decoration: none !important;
  text-transform: uppercase;

  transition:
    transform 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

#lord-razu-live-section .lrz-live__button:hover {
  transform: translateY(-2px);

  background: rgba(47, 124, 255, 0.12);

  box-shadow: 0 0 20px rgba(47, 124, 255, 0.22);
}

#lord-razu-live-section .lrz-live__button--primary {
  background: rgba(47, 124, 255, 0.07);
}

#lord-razu-live-section .lrz-live__button--secondary {
  border-color: rgba(255, 255, 255, 0.23);

  background: rgba(255, 255, 255, 0.025);
  color: #d8dae0 !important;
}

#lord-razu-live-section .lrz-live__secondary-label {
  margin: 28px 0 12px;

  color: #7d828c;

  font-size: 10px;
  letter-spacing: 0.16em;

  text-transform: uppercase;
}

/* TABLET */

@media (max-width: 1000px) {
  #lord-razu-live-section .lrz-live__grid {
    grid-template-columns: 1fr;
  }

  #lord-razu-live-section .lrz-live__video-column {
    border-right: 0;
    border-bottom: 1px solid var(--lrz-border);
  }
}

/* MOBILE */

@media (max-width: 767px) {
  #lord-razu-live-section {
    width: calc(100% - 24px);
    margin-bottom: 70px;
  }

  #lord-razu-live-section .lrz-live__header {
    min-height: 64px;
    padding: 0 18px;
  }

  #lord-razu-live-section .lrz-live__video-column {
    padding: 10px;
  }

  #lord-razu-live-section .lrz-live__info {
    padding: 36px 22px;
  }

  #lord-razu-live-section .lrz-live__info h3 {
    font-size: 48px !important;
  }

  #lord-razu-live-section .lrz-live__channel {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  #lord-razu-live-section .lrz-live__platform {
    display: none;
  }
}

/* Separator links */
.header-menu-nav-item a[href="#_______________"] {
  pointer-events: none;
  cursor: default;
  display: block;
  padding: 16px 0;
  line-height: 1;
  opacity: 0.75;
}

/* =====================================================
   PROFESSIONAL LYRIC FORMATTING
   ===================================================== */

.album-page #lyrics .song-lyrics {
  width: 100%;
  max-width: 800px;
}

/* Individual song sections */

.album-page #lyrics .lyric-section {
  position: relative;
  margin: 0 0 58px;
}

.album-page #lyrics .lyric-section:last-child {
  margin-bottom: 0;
}

/* Intro, Verse, Hook labels */

.album-page #lyrics .lyric-section h3 {
  display: flex;
  align-items: center;
  gap: 14px;

  margin: 0 0 20px;

  color: #2f6fff;

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.album-page #lyrics .lyric-section h3::after {
  content: "";

  width: 48px;
  height: 1px;

  background: rgba(47, 111, 255, 0.55);
}

/* Lyric paragraphs */

.album-page #lyrics .lyric-section p {
  margin: 0 0 28px;

  color: #d8d8d8;

  font-size: 1.05rem;
  font-weight: 400;
  line-height: 2.05;

  letter-spacing: 0.012em;
}

.album-page #lyrics .lyric-section p:last-child {
  margin-bottom: 0;
}

/* Spoken introduction */

.album-page #lyrics .lyric-intro {
  max-width: 760px;

  padding: 28px 30px;

  background: linear-gradient(120deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));

  border-left: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 12px 12px 0;
}

.album-page #lyrics .lyric-intro p {
  color: #aaa;

  font-size: 0.98rem;
  line-height: 1.9;

  font-style: italic;
}

/* Hook presentation */

.album-page #lyrics .lyric-hook {
  max-width: 760px;

  padding: 30px 34px;

  background: linear-gradient(
    115deg,
    rgba(47, 111, 255, 0.14),
    rgba(47, 111, 255, 0.035) 60%,
    transparent
  );

  border-left: 3px solid #2f6fff;
  border-radius: 0 14px 14px 0;

  box-shadow: inset 0 0 40px rgba(47, 111, 255, 0.025);
}

.album-page #lyrics .lyric-hook p {
  color: #f2f2f2;
  font-weight: 500;
}

/* Final hook receives slightly stronger emphasis */

.album-page #lyrics .lyric-hook-final {
  background: linear-gradient(
    115deg,
    rgba(47, 111, 255, 0.2),
    rgba(47, 111, 255, 0.055) 65%,
    transparent
  );

  box-shadow:
    inset 0 0 45px rgba(47, 111, 255, 0.04),
    0 16px 40px rgba(0, 0, 0, 0.18);
}

/* Repeat notation */

.album-page #lyrics .lyric-repeat {
  display: inline-block;

  margin-left: 8px;
  padding: 3px 8px;

  color: #8caeff;
  background: rgba(47, 111, 255, 0.12);

  border: 1px solid rgba(47, 111, 255, 0.28);
  border-radius: 999px;

  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.12em;
  vertical-align: middle;
}

/* Subtle section entrance */

.album-page #lyrics.panel.active .song-lyrics {
  animation: album-lyrics-enter 0.45s ease both;
}

@keyframes album-lyrics-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 760px) {
  .album-page #lyrics .lyric-section {
    margin-bottom: 44px;
  }

  .album-page #lyrics .lyric-section p {
    font-size: 1rem;
    line-height: 1.9;
  }

  .album-page #lyrics .lyric-intro,
  .album-page #lyrics .lyric-hook {
    padding: 24px 20px;
  }

  .album-page #lyrics .lyric-section h3 {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
  }

  .album-page #lyrics .lyric-section h3::after {
    width: 32px;
  }
}

/* =====================================================
   THE LORD RAZU — JOURNAL PAGE
   Add this section to the Master Stylesheet.
===================================================== */

#lr-journal-page {
  --journal-blue: #1e47ff;
  --journal-black: #030303;
  --journal-panel: #090a0d;
  --journal-line: rgba(255, 255, 255, 0.11);
  --journal-muted: #8e929d;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 3%, rgba(30, 71, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #020203 0%, #050608 55%, #020203 100%);
  color: #f4f4f5;
  font-family: "Space Grotesk", Arial, sans-serif;
}

#lr-journal-page * {
  box-sizing: border-box;
}
#lr-journal-page a {
  color: inherit;
  text-decoration: none;
}
#lr-journal-page button,
#lr-journal-page input {
  font: inherit;
}
#lr-journal-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lr-journal-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: end;
  min-height: 650px;
  max-width: 1650px;
  margin: 0 auto;
  padding: 110px clamp(28px, 6vw, 96px) 74px;
  border-bottom: 1px solid var(--journal-line);
  isolation: isolate;
}

.lr-journal-hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #020203 0%,
      rgba(2, 2, 3, 0.82) 35%,
      rgba(2, 2, 3, 0.18) 72%,
      #020203 100%
    ),
    repeating-linear-gradient(
      112deg,
      transparent 0 110px,
      rgba(255, 255, 255, 0.012) 111px,
      transparent 112px 220px
    );
}

.lr-journal-hero__atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.32;
  mix-blend-mode: screen;
  background:
    linear-gradient(124deg, transparent 49.3%, rgba(92, 128, 255, 0.34) 49.7%, transparent 50.1%)
      72% 18%/280px 260px no-repeat,
    linear-gradient(53deg, transparent 49.3%, rgba(92, 128, 255, 0.28) 49.7%, transparent 50.1%) 85%
      35%/220px 300px no-repeat;
}

.lr-journal-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: 20px;
}
.lr-journal-kicker {
  display: block;
  color: #7092ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.lr-journal-hero h1 {
  margin: 18px 0 8px;
  max-width: 760px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(5.5rem, 9.4vw, 10rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.lr-journal-hero__content > p {
  margin: 28px 0 38px;
  color: #b8bbc4;
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.lr-journal-timeline {
  display: flex;
  align-items: center;
  width: min(520px, 90%);
}
.lr-journal-timeline::before {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.25);
  order: 2;
}
.lr-journal-timeline span {
  position: relative;
  z-index: 1;
  order: 3;
  width: 8px;
  height: 8px;
  margin-left: 56px;
  border-radius: 50%;
  background: #8b8e96;
  box-shadow: 0 0 0 4px #030304;
}
.lr-journal-timeline span:first-child {
  order: 1;
  margin: 0;
}
.lr-journal-timeline span.is-active {
  background: #fff;
  box-shadow:
    0 0 0 5px rgba(30, 71, 255, 0.35),
    0 0 20px var(--journal-blue);
}

.lr-journal-hero__media {
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0;
  width: 65%;
  height: 100%;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, #020203 0%, transparent 42%, rgba(2, 2, 3, 0.16) 72%, #020203 100%),
    linear-gradient(0deg, #020203 0%, transparent 38%),
    var(
      --lr-journal-hero-image,
      radial-gradient(
        ellipse at 67% 38%,
        rgba(93, 105, 128, 0.72),
        rgba(13, 16, 24, 0.55) 28%,
        #030405 67%
      )
    );
  background-size: cover;
  background-position: center;
  filter: grayscale(0.92) contrast(1.12);
}
.lr-journal-feature,
.lr-journal-archive {
  max-width: 1480px;
  margin: 0 auto;
  padding-left: clamp(24px, 5vw, 72px);
  padding-right: clamp(24px, 5vw, 72px);
}
.lr-journal-feature {
  padding-top: 58px;
}
.lr-journal-feature__card {
  min-height: 330px;
  border: 1px solid var(--journal-line);
  background: rgba(7, 8, 11, 0.8);
}
.lr-journal-feature__link {
  display: grid;
  grid-template-columns: minmax(320px, 0.88fr) 1.12fr;
  min-height: 330px;
}
.lr-journal-feature__image {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background: #0b0c10;
}
.lr-journal-feature__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(7, 8, 11, 0.9));
}
.lr-journal-feature__image-source,
.lr-journal-card__image-source {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.72) contrast(1.12);
  transition: 0.55s ease;
}
.lr-journal-feature__image-source.is-placeholder,
.lr-journal-card__image-source.is-placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(30, 71, 255, 0.2), transparent 32%),
    linear-gradient(135deg, #0e1015, #040405);
}
.lr-journal-feature__image-source.is-placeholder span,
.lr-journal-card__image-source.is-placeholder span {
  color: rgba(255, 255, 255, 0.12);
  font-size: 6rem;
}
.lr-journal-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(34px, 5vw, 78px);
}
.lr-journal-chapter {
  display: block;
  margin: 22px 0 10px;
  color: #b6b8c0;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
}
.lr-journal-feature h2 {
  margin: 0 0 8px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lr-journal-feature time {
  color: var(--journal-muted);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lr-journal-feature p {
  max-width: 650px;
  margin: 24px 0 0;
  color: #b8bac1;
  line-height: 1.8;
}
.lr-journal-link {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  margin-top: 30px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--journal-blue);
  color: #8ba5ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.lr-journal-feature__link:hover .lr-journal-feature__image-source {
  transform: scale(1.025);
  filter: grayscale(0.35) contrast(1.14);
}

.lr-journal-archive {
  padding-top: 64px;
  padding-bottom: 120px;
}
.lr-journal-archive__bar {
  display: grid;
  grid-template-columns: auto 1fr minmax(260px, 420px);
  align-items: end;
  gap: 46px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--journal-line);
}
.lr-journal-archive__heading h2 {
  margin: 5px 0 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
}
.lr-journal-sort {
  display: flex;
  gap: 28px;
}
.lr-journal-sort button,
.lr-journal-filters button,
.lr-journal-pagination button {
  border: 0;
  background: none;
  color: #737781;
  cursor: pointer;
  text-transform: uppercase;
  transition: 0.25s ease;
}
.lr-journal-sort button {
  padding: 0 0 8px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  border-bottom: 1px solid transparent;
}
.lr-journal-sort button:hover,
.lr-journal-sort button.is-active {
  color: #fff;
  border-color: var(--journal-blue);
}
.lr-journal-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--journal-line);
}
.lr-journal-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lr-journal-search input::placeholder {
  color: #70747e;
  opacity: 1;
}
.lr-journal-search span:last-child {
  color: #a3a6ae;
  font-size: 1.35rem;
}

.lr-journal-filters {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 22px 0 8px;
  scrollbar-width: none;
}
.lr-journal-filters::-webkit-scrollbar {
  display: none;
}
.lr-journal-filters button {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid var(--journal-line);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}
.lr-journal-filters button:hover,
.lr-journal-filters button.is-active {
  color: #9bb0ff;
  border-color: var(--journal-blue);
  background: rgba(30, 71, 255, 0.08);
}
.lr-journal-results {
  min-height: 20px;
  margin: 16px 0;
  color: #636772;
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-align: right;
}

.lr-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.lr-journal-card {
  min-height: 440px;
  border: 1px solid var(--journal-line);
  background: rgba(7, 8, 10, 0.9);
  transition: 0.3s ease;
}
.lr-journal-card:hover {
  transform: translateY(-4px);
  border-color: rgba(92, 128, 255, 0.48);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.32);
}
.lr-journal-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.lr-journal-card__image {
  height: 220px;
  overflow: hidden;
  background: #0b0c10;
}
.lr-journal-card:hover .lr-journal-card__image-source {
  transform: scale(1.035);
  filter: grayscale(0.3) contrast(1.13);
}
.lr-journal-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.lr-journal-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #7f838d;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
}
.lr-journal-card__meta span {
  color: #7694ff;
}
.lr-journal-card h3 {
  margin: 18px 0 10px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lr-journal-card p {
  display: -webkit-box;
  margin: 0;
  color: #a9acb4;
  font-size: 0.88rem;
  line-height: 1.65;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.lr-journal-card__footer {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 22px;
  color: #737781;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lr-journal-card__footer b {
  color: #7290ff;
  font-size: 1rem;
  font-weight: 400;
}
.lr-journal-card--coming {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  color: #777b84;
  background: radial-gradient(circle at 50% 36%, rgba(30, 71, 255, 0.08), transparent 34%), #060709;
}
.lr-journal-card--coming span {
  color: rgba(113, 144, 255, 0.22);
  font-size: 5rem;
}
.lr-journal-card--coming strong {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.12em;
}
.lr-journal-card--coming:hover {
  transform: none;
  border-color: var(--journal-line);
  box-shadow: none;
}

.lr-journal-empty {
  grid-column: 1/-1;
  display: flex;
  min-height: 260px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
}
.lr-journal-empty strong {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.lr-journal-empty span {
  color: var(--journal-muted);
}
.lr-journal-loading {
  display: grid;
  min-height: 330px;
  place-items: center;
  color: #767a84;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lr-journal-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 46px;
}
.lr-journal-pagination button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--journal-line);
  font-size: 0.7rem;
}
.lr-journal-pagination button:hover,
.lr-journal-pagination button.is-active {
  color: #fff;
  border-color: var(--journal-blue);
  background: rgba(30, 71, 255, 0.1);
}

@media (max-width: 1050px) {
  .lr-journal-hero {
    grid-template-columns: 1fr;
    min-height: 600px;
  }
  .lr-journal-hero__media {
    width: 100%;
    opacity: 0.62;
  }
  .lr-journal-hero__content {
    max-width: 680px;
  }
  .lr-journal-feature__link {
    grid-template-columns: 0.8fr 1.2fr;
  }
  .lr-journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lr-journal-archive__bar {
    grid-template-columns: auto 1fr;
  }
  .lr-journal-search {
    grid-column: 1/-1;
  }
}

@media (max-width: 700px) {
  .lr-journal-hero {
    min-height: 530px;
    padding: 92px 22px 54px;
  }
  .lr-journal-hero h1 {
    font-size: clamp(4.7rem, 23vw, 7rem);
  }
  .lr-journal-hero__content > p {
    letter-spacing: 0.22em;
  }
  .lr-journal-timeline span {
    margin-left: 34px;
  }
  .lr-journal-feature {
    padding-top: 28px;
  }
  .lr-journal-feature__link {
    grid-template-columns: 1fr;
  }
  .lr-journal-feature__image {
    min-height: 230px;
  }
  .lr-journal-feature__image::after {
    background: linear-gradient(0deg, rgba(7, 8, 11, 0.9), transparent 55%);
  }
  .lr-journal-feature__copy {
    padding: 32px 24px 38px;
  }
  .lr-journal-archive {
    padding-top: 48px;
    padding-bottom: 80px;
  }
  .lr-journal-archive__bar {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }
  .lr-journal-sort {
    justify-content: flex-start;
  }
  .lr-journal-search {
    grid-column: auto;
  }
  .lr-journal-grid {
    grid-template-columns: 1fr;
  }
  .lr-journal-card {
    min-height: 410px;
  }
}

/* =====================================================
   JOURNAL DRAWER — SCOPED SYNCHRONIZATION
===================================================== */
#journal-panel #journal-preview {
  padding: 0 36px 10px;
}
#journal-panel .recent-chapters {
  padding: 0 36px 36px;
}
#journal-panel .recent-chapters h4 {
  color: #777;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 11px;
}
#journal-panel .recent-chapters a {
  display: block;
  padding: 14px 0;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: 0.3s;
}
#journal-panel .recent-chapters a:hover {
  color: #1e47ff;
  padding-left: 10px;
}
#journal-panel .recent-chapter-link span {
  display: block;
  margin-bottom: 5px;
  color: #728fff;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#journal-panel .journal-empty-note {
  display: block;
  color: #777;
  font-size: 13px;
  line-height: 1.6;
}
#journal-panel .journal-footer {
  margin-top: 18px;
  padding: 24px 36px 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#journal-panel .journal-footer a {
  color: #7896ff;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  #journal-panel #journal-preview {
    padding: 0 24px 8px;
  }
  #journal-panel .recent-chapters {
    padding: 0 24px 28px;
  }
  #journal-panel .journal-footer {
    margin-top: 8px;
    padding: 20px 24px 24px;
  }
}

#lr-journal-page {
  --lr-journal-hero-image: url("https://images.squarespace-cdn.com/content/599451bbf14aa10e7f8f9a91/1784600400390-UD4FLCNFGYOOP69ZDU0C/f471e1bd-b974-45b0-9b41-eb4abb96bf9b.png?content-type=image%2Fpng");
}

/* =====================================================
   THE LORD RAZU RADIO — SITE VISUAL SYSTEM + LYRICS
   Scoped overrides preserve the existing Radio layout.
===================================================== */
#lord-razu-radio {
  --lrr-bg: #020203;
  --lrr-panel: rgba(9, 10, 13, 0.9);
  --lrr-line: rgba(255, 255, 255, 0.1);
  --lrr-blue: #1e47ff;
  --lrr-blue-2: #7092ff;
  --lrr-cream: #f4f4f5;
  --lrr-text: #f4f4f5;
  --lrr-muted: #858a95;
  border-color: rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 72% 5%, rgba(30, 71, 255, 0.15), transparent 31%),
    radial-gradient(circle at 18% 30%, rgba(75, 103, 210, 0.08), transparent 26%),
    linear-gradient(145deg, #020203 0%, #08090c 50%, #020203 100%);
  font-family: "Space Grotesk", Arial, sans-serif;
}

#lord-razu-radio::before {
  opacity: 0.34;
  background:
    linear-gradient(
      115deg,
      transparent 0 19%,
      rgba(30, 71, 255, 0.28) 19.2%,
      transparent 19.5% 100%
    ),
    linear-gradient(
      65deg,
      transparent 0 72%,
      rgba(112, 146, 255, 0.17) 72.2%,
      transparent 72.5% 100%
    ),
    repeating-radial-gradient(
      ellipse at 50% 40%,
      rgba(255, 255, 255, 0.022) 0 1px,
      transparent 2px 14px
    );
}

#lord-razu-radio::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.62));
}
#lord-razu-radio .lrr__ambient {
  opacity: 0.24;
  background: conic-gradient(
    from 90deg at 50% 50%,
    transparent,
    rgba(30, 71, 255, 0.22),
    transparent 36%,
    rgba(112, 146, 255, 0.12),
    transparent 72%
  );
}

#lord-razu-radio .lrr__title,
#lord-razu-radio .lrr__player h2,
#lord-razu-radio .lrr__card h3,
#lord-razu-radio .lrr__discover h4,
#lord-razu-radio .lrr__lyrics h3 {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-style: normal;
  font-weight: 400;
}

#lord-razu-radio .lrr__brand,
#lord-razu-radio .lrr__masthead blockquote,
#lord-razu-radio .lrr__album,
#lord-razu-radio .lrr__timeline,
#lord-razu-radio .lrr__panel-head,
#lord-razu-radio .lrr__log-copy blockquote,
#lord-razu-radio .lrr__station p,
#lord-razu-radio .lrr__station strong,
#lord-razu-radio .lrr__history-item em,
#lord-razu-radio .lrr__history-item > span,
#lord-razu-radio .lrr__discover p,
#lord-razu-radio .lrr__footer {
  font-family: "Space Grotesk", Arial, sans-serif;
}

#lord-razu-radio .lrr__title {
  color: #f4f4f5;
  text-shadow: 0 0 24px rgba(30, 71, 255, 0.26);
}
#lord-razu-radio .lrr__player h2 {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
#lord-razu-radio .lrr__player h2.is-long-title {
  font-size: clamp(34px, 4vw, 58px);
  letter-spacing: 0.04em;
  line-height: 1;
}
#lord-razu-radio .lrr__player h2.is-extra-long-title {
  font-size: clamp(28px, 3.25vw, 46px);
  letter-spacing: 0.025em;
  line-height: 1.03;
}
#lord-razu-radio .lrr__tagline span {
  background: linear-gradient(90deg, transparent, #7092ff);
}
#lord-razu-radio .lrr__masthead blockquote {
  color: #a7abb4;
  font-style: normal;
}
#lord-razu-radio .lrr__live {
  color: #9cb0ff;
}
#lord-razu-radio .lrr__live i {
  background: #1e47ff;
  box-shadow: 0 0 14px rgba(30, 71, 255, 0.9);
}
#lord-razu-radio .lrr__art-wrap::before {
  border-color: rgba(112, 146, 255, 0.42);
  box-shadow: 0 0 38px rgba(30, 71, 255, 0.17);
}
#lord-razu-radio .lrr__cover {
  border-color: rgba(255, 255, 255, 0.14);
}
#lord-razu-radio .lrr__eyebrow {
  color: #7f8490;
}
#lord-razu-radio .lrr__album {
  color: #7896ff;
  font-style: normal;
}
#lord-razu-radio .lrr__wave {
  border-color: rgba(112, 146, 255, 0.24);
  background: radial-gradient(ellipse at center, rgba(30, 71, 255, 0.11), transparent 70%);
}
#lord-razu-radio .lrr__wave i {
  background: linear-gradient(
    to top,
    transparent,
    #7092ff 22%,
    #f4f4f5 50%,
    #7092ff 78%,
    transparent
  );
  box-shadow: 0 0 7px rgba(30, 71, 255, 0.7);
}
#lord-razu-radio .lrr__controls button:hover {
  filter: drop-shadow(0 0 11px rgba(112, 146, 255, 0.75));
}
#lord-razu-radio .lrr__controls svg {
  fill: #f4f4f5;
}
#lord-razu-radio .lrr__controls .lrr__play {
  border-color: rgba(112, 146, 255, 0.8);
  background: rgba(30, 71, 255, 0.08);
  box-shadow:
    inset 0 0 24px rgba(30, 71, 255, 0.12),
    0 0 24px rgba(30, 71, 255, 0.12);
}
#lord-razu-radio .lrr__mode svg,
#lord-razu-radio .lrr__volume svg {
  stroke: #c8cbd2;
}
#lord-razu-radio .lrr__mode small {
  color: #e2e3e7;
}

#lord-razu-radio .lrr__transmission-panel,
#lord-razu-radio .lrr__card {
  border-color: var(--lrr-line);
  background: linear-gradient(145deg, rgba(10, 11, 15, 0.92), rgba(4, 5, 7, 0.88));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}
#lord-razu-radio .lrr__panel-head {
  color: #858a95;
}
#lord-razu-radio .lrr__log-copy blockquote {
  color: #92a7ff;
  font-style: normal;
}
#lord-razu-radio .lrr__orb::before,
#lord-razu-radio .lrr__orb::after {
  background: linear-gradient(90deg, transparent, rgba(112, 146, 255, 0.85), transparent);
  box-shadow: 0 0 18px rgba(30, 71, 255, 0.65);
}
#lord-razu-radio .lrr__orb span {
  border-color: #8ca4ff;
  box-shadow:
    inset 0 0 25px rgba(30, 71, 255, 0.4),
    0 0 22px rgba(30, 71, 255, 0.58),
    0 0 60px rgba(30, 71, 255, 0.2);
}
#lord-razu-radio .lrr__status {
  background:
    linear-gradient(rgba(7, 8, 11, 0.76), rgba(4, 5, 7, 0.94)),
    radial-gradient(circle at 80% 45%, rgba(30, 71, 255, 0.2), transparent 38%);
}
#lord-razu-radio .lrr__history-item.is-current {
  background: linear-gradient(90deg, rgba(30, 71, 255, 0.14), transparent);
}
#lord-razu-radio .lrr__history-item strong {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.35;
}
#lord-razu-radio .lrr__discover a {
  border-color: rgba(112, 146, 255, 0.3);
}
#lord-razu-radio .lrr__footer > span {
  background: linear-gradient(90deg, transparent, rgba(30, 71, 255, 0.65));
}
#lord-razu-radio .lrr__footer b,
#lord-razu-radio .lrr__footer-tagline b,
#lord-razu-radio .lrr__streaming-links .featured-store {
  color: #7896ff;
}
#lord-razu-radio .lrr__footer-tagline > span {
  background: linear-gradient(90deg, transparent, rgba(30, 71, 255, 0.62));
}
#lord-razu-radio .lrr__footer-tagline > span:last-child {
  background: linear-gradient(90deg, rgba(30, 71, 255, 0.62), transparent);
}

#lord-razu-radio .lrr__lyrics {
  margin-top: 16px;
  overflow: hidden;
}
#lord-razu-radio .lrr__lyrics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--lrr-line);
}
#lord-razu-radio .lrr__lyrics-head span {
  display: block;
  margin-bottom: 6px;
  color: #7896ff;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
}
#lord-razu-radio .lrr__lyrics h3 {
  margin: 0;
  padding: 0;
  color: #f4f4f5;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.08em;
}
#lord-razu-radio .lrr__lyrics-head button {
  min-width: 132px;
  padding: 11px 15px;
  border: 1px solid rgba(112, 146, 255, 0.42);
  background: rgba(30, 71, 255, 0.08);
  color: #f4f4f5;
  cursor: pointer;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  transition: 0.2s ease;
}
#lord-razu-radio .lrr__lyrics-head button:hover:not(:disabled) {
  border-color: #7092ff;
  background: rgba(30, 71, 255, 0.16);
}
#lord-razu-radio .lrr__lyrics-head button:disabled {
  border-color: rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #656a74;
  cursor: not-allowed;
}
#lord-razu-radio .lrr__lyrics-track {
  margin: 0;
  padding: 18px 28px;
  color: #a8acb5;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#lord-razu-radio .lrr__lyrics-body {
  max-height: 520px;
  padding: 6px 28px 34px;
  overflow: auto;
  color: #d6d8dd;
  font-size: 1rem;
  line-height: 1.8;
  scrollbar-color: #1e47ff #08090c;
}
#lord-razu-radio .lrr__lyrics-body[hidden] {
  display: none !important;
}
#lord-razu-radio .lrr__lyrics-body h1,
#lord-razu-radio .lrr__lyrics-body h2,
#lord-razu-radio .lrr__lyrics-body h3,
#lord-razu-radio .lrr__lyrics-body h4 {
  color: #f4f4f5;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
}
#lord-razu-radio .lrr__lyrics-body p {
  margin: 0 0 1em;
}
#lord-razu-radio .lrr__lyrics.is-open {
  border-color: rgba(112, 146, 255, 0.38);
  box-shadow:
    0 22px 62px rgba(0, 0, 0, 0.28),
    0 0 40px rgba(30, 71, 255, 0.05);
}

@media (max-width: 760px) {
  #lord-razu-radio .lrr__player h2.is-long-title {
    font-size: clamp(32px, 9.2vw, 46px);
    line-height: 1.02;
  }
  #lord-razu-radio .lrr__player h2.is-extra-long-title {
    font-size: clamp(26px, 7.5vw, 38px);
    letter-spacing: 0.015em;
    line-height: 1.06;
  }
  #lord-razu-radio .lrr__lyrics-head {
    align-items: flex-start;
    padding: 21px 20px;
  }
  #lord-razu-radio .lrr__lyrics-head button {
    min-width: 116px;
    padding-inline: 10px;
  }
  #lord-razu-radio .lrr__lyrics-track {
    padding: 16px 20px;
  }
  #lord-razu-radio .lrr__lyrics-body {
    max-height: 440px;
    padding: 4px 20px 28px;
    font-size: 0.94rem;
  }
}

/* =====================================================
   THE LORD RAZU — MUSIC ENGINE v2 / JOURNAL SONG RECORD
   Shared visual language with Lyrics + Radio.
===================================================== */

.lr-song-record {
  --lr-song-blue: #2d7dff;
  --lr-song-text: #d9d9d9;
  --lr-song-muted: #858b95;
  --lr-song-line: rgba(255, 255, 255, 0.1);
  width: min(100%, 980px);
  margin: 72px auto;
  padding: 0;
  color: #fff;
  font-family: inherit;
}

.lr-song-record,
.lr-song-record * {
  box-sizing: border-box;
}

.lr-song-record__overview {
  padding: 0 0 42px;
  border-bottom: 1px solid var(--lr-song-line);
}

.lr-song-record__kicker,
.lr-song-record__section-head > span {
  display: block;
  color: var(--lr-song-blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.lr-song-record__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 16px 0 18px;
  color: #8d929b;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lr-song-record__meta span + span::before {
  content: "/";
  margin-right: 24px;
  color: rgba(255, 255, 255, 0.22);
}

.lr-song-record__overview h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(3.7rem, 8vw, 7rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.lr-song-record__version {
  margin: 18px 0 0;
  color: #8e939c;
  font-size: 0.82rem;
  letter-spacing: 0.11em;
}

.lr-song-record__stream,
.lr-song-record__credits,
.lr-song-record__lyrics {
  padding: 48px 0;
  border-bottom: 1px solid var(--lr-song-line);
}

.lr-song-record__section-head {
  margin-bottom: 28px;
}

.lr-song-record__section-head h3 {
  margin: 8px 0 0;
  color: #fff;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.07em;
}

.lr-song-record__stream-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lr-song-record__stream-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.025);
  color: #e7e8eb;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: 0.25s ease;
}

.lr-song-record__stream-links a:hover {
  color: #fff;
  border-color: var(--lr-song-blue);
  background: rgba(45, 125, 255, 0.08);
  transform: translateY(-2px);
}

.lr-song-record__stream-links b {
  color: var(--lr-song-blue);
  font-size: 1rem;
  font-weight: 400;
}

.lr-song-record__credits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--lr-song-line);
  border-left: 1px solid var(--lr-song-line);
}

.lr-song-record__credit {
  min-height: 92px;
  padding: 20px 22px;
  border-right: 1px solid var(--lr-song-line);
  border-bottom: 1px solid var(--lr-song-line);
}

.lr-song-record__credit span {
  display: block;
  margin-bottom: 9px;
  color: #777d87;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lr-song-record__credit strong {
  display: block;
  color: #e4e5e8;
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.55;
}

.lr-song-record__lyrics-body {
  max-width: 800px;
  color: var(--lr-song-text);
  font-size: 17px;
  line-height: 2;
}

.lr-song-record__lyrics-body h3 {
  margin: 50px 0 18px;
  color: var(--lr-song-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.lr-song-record__lyrics-body p {
  margin: 0 0 35px;
}

.lr-song-record__lyrics-body br {
  line-height: 2;
}

.lr-song-record__error {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  border: 1px solid var(--lr-song-line);
  text-align: center;
}

.lr-song-record__error strong {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.lr-song-record__error span {
  color: var(--lr-song-muted);
}

@media (max-width: 760px) {
  .lr-song-record {
    margin: 52px auto;
  }

  .lr-song-record__meta {
    gap: 8px 14px;
  }

  .lr-song-record__meta span + span::before {
    margin-right: 14px;
  }

  .lr-song-record__stream-links {
    grid-template-columns: 1fr;
  }

  .lr-song-record__credits-grid {
    grid-template-columns: 1fr;
  }

  .lr-song-record__stream,
  .lr-song-record__credits,
  .lr-song-record__lyrics {
    padding: 38px 0;
  }

  .lr-song-record__lyrics-body {
    font-size: 16px;
    line-height: 1.9;
  }
}

/* =====================================================
   MUSIC ENGINE v2.1 — PLATFORM ICONS + BEHIND THE TRACK
===================================================== */

/* Journal: use the same monochrome platform-icon language as album pages */
.lr-song-record__stream-links a {
  min-height: 62px;
}

.lr-song-record__platform {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lr-song-record__platform img {
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.lr-song-record__stream-links a.is-store {
  color: #c8a85d;
  border-color: rgba(200, 168, 93, 0.28);
}

.lr-song-record__stream-links a.is-store:hover {
  color: #e4c77f;
  border-color: #c8a85d;
  background: rgba(200, 168, 93, 0.06);
}

.lr-song-record__stream-links a.is-store .lr-song-record__platform img {
  filter: none;
}

/* Album player: Behind the Track */
#global-player.lr-album-player-v11 #album-behind-track {
  color: #8caeff;
  border-color: rgba(47, 111, 255, 0.34);
}

#global-player.lr-album-player-v11 #album-behind-track:hover {
  color: #fff;
  border-color: #2f6fff;
  background: rgba(47, 111, 255, 0.09);
}

#global-player.lr-album-player-v11 #album-behind-track[hidden] {
  display: none !important;
}

/* Radio: Behind the Track — matched to existing Lyrics card */
#lord-razu-radio .lrr__behind-track {
  display: block;
  margin-top: 16px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--lrr-line);
  background: linear-gradient(145deg, rgba(10, 11, 15, 0.92), rgba(4, 5, 7, 0.88));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

#lord-razu-radio .lrr__behind-track[hidden] {
  display: none !important;
}

#lord-razu-radio .lrr__behind-track-copy {
  position: relative;
  padding: 24px 28px 22px;
}

#lord-razu-radio .lrr__behind-track-copy > span {
  display: block;
  margin-bottom: 8px;
  color: #7896ff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#lord-razu-radio .lrr__behind-track h3 {
  margin: 0;
  padding: 0;
  color: #f4f4f5;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#lord-razu-radio .lrr__behind-track p {
  max-width: 620px;
  margin: 14px 0 0;
  color: #a8acb5;
  font-size: 0.8rem;
  line-height: 1.7;
}

#lord-razu-radio .lrr__behind-track > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 48px;
  padding: 14px 28px;
  border: 0;
  border-top: 1px solid var(--lrr-line);
  background: rgba(30, 71, 255, 0.025);
  color: #f4f4f5;
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: 0.2s ease;
}

#lord-razu-radio .lrr__behind-track > a:hover {
  border-top-color: rgba(112, 146, 255, 0.42);
  background: rgba(30, 71, 255, 0.08);
  color: #fff;
}

#lord-razu-radio .lrr__behind-track > a b {
  color: #7896ff;
  font-size: 1rem;
  font-weight: 400;
  transition: transform 0.2s ease;
}

#lord-razu-radio .lrr__behind-track > a:hover b {
  transform: translateX(4px);
}

@media (max-width: 760px) {
  #lord-razu-radio .lrr__behind-track-copy {
    padding: 21px 20px 19px;
  }

  #lord-razu-radio .lrr__behind-track > a {
    padding: 14px 20px;
  }
}

/* =====================================================
   THE LORD RAZU — UPCOMING STREAMS
   SEPARATE SQUARESPACE BLOCK
   -----------------------------------------------------
   This block does NOT alter the Hero, Live section,
   Twitch player, or any Squarespace parent containers.
===================================================== */

#lrz-upcoming-streams,
#lrz-upcoming-streams * {
  box-sizing: border-box;
}

#lrz-upcoming-streams {
  --lrz-us-blue: #2f7cff;
  --lrz-us-border: rgba(255, 255, 255, 0.13);
  --lrz-us-muted: #969ba6;

  width: 100%;
  margin: 0;
  padding: 0;

  color: #fff;
}

/* =====================================================
   HEADER
===================================================== */

#lrz-upcoming-streams .lrz-upcoming-streams__header {
  width: 100%;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 28px;

  margin: 0 0 24px;
}

#lrz-upcoming-streams .lrz-upcoming-streams__heading {
  display: flex;
  align-items: flex-end;

  gap: 14px;
}

#lrz-upcoming-streams .lrz-upcoming-streams__icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  flex: 0 0 30px;

  color: #dbe7ff;

  border: 1px solid rgba(255, 255, 255, 0.24);

  font-size: 13px;
}

#lrz-upcoming-streams .lrz-upcoming-streams__eyebrow {
  margin: 0 0 7px !important;

  color: var(--lrz-us-blue) !important;

  font-size: 9px !important;
  font-weight: 700 !important;

  letter-spacing: 0.24em !important;

  text-transform: uppercase !important;
}

#lrz-upcoming-streams .lrz-upcoming-streams__heading h2 {
  margin: 0 !important;

  color: #fff !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(38px, 3.4vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;

  letter-spacing: 0.035em !important;

  text-transform: uppercase !important;
}

#lrz-upcoming-streams .lrz-upcoming-streams__schedule-link {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding: 8px 0 4px;

  color: var(--lrz-us-blue) !important;

  text-decoration: none !important;
  text-transform: uppercase;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.16em;

  white-space: nowrap;
}

/* =====================================================
   FOUR-COLUMN DESKTOP GRID
===================================================== */

#lrz-upcoming-streams .lrz-upcoming-streams__grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;
}

/* =====================================================
   CARD
===================================================== */

#lrz-upcoming-streams .lrz-upcoming-stream-card {
  min-width: 0;
  min-height: 190px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 24px;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));

  border: 1px solid var(--lrz-us-border);

  color: #fff !important;

  text-decoration: none !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

#lrz-upcoming-streams .lrz-upcoming-stream-card.is-active {
  border-color: var(--lrz-us-blue);

  box-shadow: inset 0 0 0 1px rgba(47, 124, 255, 0.08);
}

#lrz-upcoming-streams .lrz-upcoming-stream-card:hover {
  transform: translateY(-3px);

  border-color: rgba(47, 124, 255, 0.72);

  background: linear-gradient(180deg, rgba(47, 124, 255, 0.075), rgba(255, 255, 255, 0.01));
}

#lrz-upcoming-streams .lrz-upcoming-stream-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;
}

#lrz-upcoming-streams .lrz-upcoming-stream-card__top strong,
#lrz-upcoming-streams .lrz-upcoming-stream-card__top span {
  display: block;
}

#lrz-upcoming-streams .lrz-upcoming-stream-card__top strong {
  color: #fff;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;

  font-size: 30px;
  font-weight: 400;
  line-height: 1;

  letter-spacing: 0.05em;
}

#lrz-upcoming-streams .lrz-upcoming-stream-card__top span {
  margin-top: 5px;

  color: #d4d6db;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.12em;
}

#lrz-upcoming-streams .lrz-upcoming-stream-card__top time {
  padding-top: 3px;

  color: var(--lrz-us-muted);

  font-size: 9px;

  letter-spacing: 0.12em;

  white-space: nowrap;
}

#lrz-upcoming-streams .lrz-upcoming-stream-card__line {
  width: 54px;
  height: 2px;

  margin: 22px 0;

  background: var(--lrz-us-blue);
}

#lrz-upcoming-streams .lrz-upcoming-stream-card__copy h3 {
  margin: 0 0 6px !important;

  color: #fff !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;
}

#lrz-upcoming-streams .lrz-upcoming-stream-card__copy p {
  margin: 0 !important;

  color: var(--lrz-us-muted) !important;

  font-size: 9px !important;

  letter-spacing: 0.12em !important;

  text-transform: uppercase !important;
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {
  #lrz-upcoming-streams .lrz-upcoming-streams__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {
  #lrz-upcoming-streams .lrz-upcoming-streams__header {
    display: block;
  }

  #lrz-upcoming-streams .lrz-upcoming-streams__schedule-link {
    margin-top: 14px;
  }

  #lrz-upcoming-streams .lrz-upcoming-streams__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   THE LORD RAZU — RECENT BROADCASTS
   SEPARATE SQUARESPACE BLOCK
   -----------------------------------------------------
   Isolated from Hero, Live section, and Upcoming Streams.
===================================================== */

#lrz-recent-broadcasts,
#lrz-recent-broadcasts * {
  box-sizing: border-box;
}

#lrz-recent-broadcasts {
  --lrz-rb-blue: #2f7cff;
  --lrz-rb-border: rgba(255, 255, 255, 0.13);
  --lrz-rb-muted: #969ba6;

  width: 100%;
  margin: 0;
  padding: 0;

  color: #fff;
}

/* =====================================================
   HEADER
===================================================== */

#lrz-recent-broadcasts .lrz-recent-broadcasts__header {
  width: 100%;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 28px;

  margin: 0 0 24px;
}

#lrz-recent-broadcasts .lrz-recent-broadcasts__heading {
  display: flex;
  align-items: flex-end;

  gap: 14px;
}

#lrz-recent-broadcasts .lrz-recent-broadcasts__icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  flex: 0 0 30px;

  color: #dbe7ff;

  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;

  font-size: 11px;
}

#lrz-recent-broadcasts .lrz-recent-broadcasts__eyebrow {
  margin: 0 0 7px !important;

  color: var(--lrz-rb-blue) !important;

  font-size: 9px !important;
  font-weight: 700 !important;

  letter-spacing: 0.24em !important;

  text-transform: uppercase !important;
}

#lrz-recent-broadcasts .lrz-recent-broadcasts__heading h2 {
  margin: 0 !important;

  color: #fff !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(38px, 3.4vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;

  letter-spacing: 0.035em !important;

  text-transform: uppercase !important;
}

#lrz-recent-broadcasts .lrz-recent-broadcasts__link {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding: 8px 0 4px;

  color: var(--lrz-rb-blue) !important;

  text-decoration: none !important;
  text-transform: uppercase;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.16em;

  white-space: nowrap;
}

/* =====================================================
   FOUR-COLUMN DESKTOP GRID
===================================================== */

#lrz-recent-broadcasts .lrz-recent-broadcasts__grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;
}

/* =====================================================
   BROADCAST CARD
===================================================== */

#lrz-recent-broadcasts .lrz-broadcast-card {
  min-width: 0;

  color: #fff !important;

  text-decoration: none !important;
}

#lrz-recent-broadcasts .lrz-broadcast-card__media {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #05070b;

  border: 1px solid var(--lrz-rb-border);
}

#lrz-recent-broadcasts .lrz-broadcast-card__media::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background: rgba(0, 0, 0, 0.12);

  transition: background 0.3s ease;
}

#lrz-recent-broadcasts .lrz-broadcast-card__media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  opacity: 0.88;

  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

#lrz-recent-broadcasts .lrz-broadcast-card:hover .lrz-broadcast-card__media img {
  transform: scale(1.035);

  opacity: 1;
}

#lrz-recent-broadcasts .lrz-broadcast-card:hover .lrz-broadcast-card__media::after {
  background: rgba(0, 0, 0, 0);
}

#lrz-recent-broadcasts .lrz-broadcast-card__duration {
  position: absolute;

  left: 8px;
  bottom: 8px;

  z-index: 3;

  padding: 4px 6px;

  background: rgba(0, 0, 0, 0.82);

  color: #fff;

  font-size: 8px;

  letter-spacing: 0.08em;
}

#lrz-recent-broadcasts .lrz-broadcast-card__play {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 3;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  transform: translate(-50%, -50%);

  border: 1px solid rgba(255, 255, 255, 0.28);

  background: rgba(0, 0, 0, 0.5);

  color: #fff;

  font-size: 13px;

  opacity: 0;

  transition:
    opacity 0.25s ease,
    background 0.25s ease;
}

#lrz-recent-broadcasts .lrz-broadcast-card:hover .lrz-broadcast-card__play {
  opacity: 1;

  background: rgba(47, 124, 255, 0.78);
}

/* =====================================================
   COPY
===================================================== */

#lrz-recent-broadcasts .lrz-broadcast-card__copy {
  padding: 14px 1px 0;
}

#lrz-recent-broadcasts .lrz-broadcast-card__category {
  display: block;

  color: var(--lrz-rb-blue);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

#lrz-recent-broadcasts .lrz-broadcast-card__copy h3 {
  margin: 7px 0 6px !important;

  color: #fff !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;
}

#lrz-recent-broadcasts .lrz-broadcast-card__copy p {
  margin: 0 !important;

  color: var(--lrz-rb-muted) !important;

  font-size: 9px !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {
  #lrz-recent-broadcasts .lrz-recent-broadcasts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {
  #lrz-recent-broadcasts .lrz-recent-broadcasts__header {
    display: block;
  }

  #lrz-recent-broadcasts .lrz-recent-broadcasts__link {
    margin-top: 14px;
  }

  #lrz-recent-broadcasts .lrz-recent-broadcasts__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   COMMUNITY BLOCK
===================================================== */

#lrz-community,
#lrz-community * {
  box-sizing: border-box;
}

#lrz-community {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #07090d;
  overflow: hidden;
  margin: 0 0 110px;
}

#lrz-community .lrz-community__visual {
  position: relative;
  min-height: 320px;
  background: url("https://images.squarespace-cdn.com/content/599451bbf14aa10e7f8f9a91/1784231363583-JODTIDLXNV87WRF7O4CW/f471e1bd-b974-45b0-9b41-eb4abb96bf9b.png?content-type=image%2Fpng")
    center/cover;
}

#lrz-community .lrz-community__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.75));
}

#lrz-community .lrz-community__brand {
  position: absolute;
  left: 34px;
  bottom: 34px;
  z-index: 2;
}

#lrz-community .lrz-community__brand span {
  display: block;
  color: #2f7cff;
  font-size: 11px;
  letter-spacing: 0.25em;
}

#lrz-community .lrz-community__brand h2 {
  margin: 6px 0 0 !important;
  color: #fff !important;
  font-family: "Bebas Neue", "Arial Narrow", sans-serif !important;
  font-size: 72px !important;
  line-height: 0.9 !important;
}

#lrz-community .lrz-community__content {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#lrz-community .lrz-community__eyebrow {
  margin: 0 0 10px !important;
  color: #2f7cff;
  font-size: 10px;
  letter-spacing: 0.25em;
  font-weight: 700;
}

#lrz-community .lrz-community__content h2 {
  margin: 0 0 20px !important;
  color: #fff !important;
  font-family: "Bebas Neue", "Arial Narrow", sans-serif !important;
  font-size: 56px !important;
  line-height: 0.9 !important;
}

#lrz-community .lrz-community__text {
  color: #b7bcc5;
  line-height: 1.8;
  max-width: 520px;
  margin: 0 0 30px !important;
}

#lrz-community .lrz-community__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

#lrz-community .lrz-community__buttons a {
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none !important;
  color: #fff !important;
  letter-spacing: 0.14em;
  font-size: 11px;
}

#lrz-community .lrz-community__buttons a:hover {
  border-color: #2f7cff;
  background: rgba(47, 124, 255, 0.08);
}

@media (max-width: 900px) {
  #lrz-community {
    grid-template-columns: 1fr;
  }
  #lrz-community .lrz-community__visual {
    min-height: 240px;
  }
  #lrz-community .lrz-community__content {
    padding: 32px;
  }
}

/* =====================================================
   THE LORD RAZU — PLATFORM COLOR PASS
   Community buttons
===================================================== */

#lrz-community .lrz-community__buttons a {
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

#lrz-community .lrz-community__buttons a:hover {
  transform: translateY(-2px);
}

/* Twitch */
#lrz-community .lrz-community__buttons a:nth-child(1) {
  border-color: rgba(145, 70, 255, 0.55);
  background: rgba(145, 70, 255, 0.08);
}

#lrz-community .lrz-community__buttons a:nth-child(1):hover {
  border-color: #9146ff;
  background: rgba(145, 70, 255, 0.16);
  box-shadow: 0 0 18px rgba(145, 70, 255, 0.14);
}

/* YouTube */
#lrz-community .lrz-community__buttons a:nth-child(2) {
  border-color: rgba(255, 0, 0, 0.5);
  background: rgba(255, 0, 0, 0.06);
}

#lrz-community .lrz-community__buttons a:nth-child(2):hover {
  border-color: #ff0000;
  background: rgba(255, 0, 0, 0.14);
  box-shadow: 0 0 18px rgba(255, 0, 0, 0.12);
}

/* Discord */
#lrz-community .lrz-community__buttons a:nth-child(3) {
  border-color: rgba(88, 101, 242, 0.55);
  background: rgba(88, 101, 242, 0.08);
}

#lrz-community .lrz-community__buttons a:nth-child(3):hover {
  border-color: #5865f2;
  background: rgba(88, 101, 242, 0.16);
  box-shadow: 0 0 18px rgba(88, 101, 242, 0.12);
}

/* =====================================================
   THE LORD RAZU — STREAM MUSIC
===================================================== */

#lrz-stream-music,
#lrz-stream-music * {
  box-sizing: border-box;
}

#lrz-stream-music {
  --lrz-sm-blue: #2f7cff;
  --lrz-sm-muted: #a1a6b0;
  --lrz-sm-border: rgba(255, 255, 255, 0.12);

  width: 100%;

  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.35fr);

  margin: 0 0 92px;

  overflow: hidden;

  color: #fff;

  background: linear-gradient(90deg, rgba(47, 124, 255, 0.055), rgba(47, 124, 255, 0) 42%), #07090d;

  border: 1px solid var(--lrz-sm-border);
}

/* ART */

#lrz-stream-music .lrz-stream-music__art-image {
  display: flex;
  align-items: flex-end;
}

#lrz-stream-music .lrz-stream-music__art-image::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      115deg,
      transparent 0 42%,
      rgba(47, 124, 255, 0.12) 42.5% 43%,
      transparent 43.5%
    ),
    linear-gradient(
      55deg,
      transparent 0 58%,
      rgba(255, 255, 255, 0.04) 58.5% 59%,
      transparent 59.5%
    );

  pointer-events: none;
}

#lrz-stream-music .lrz-stream-music__art-image span {
  position: relative;
  z-index: 1;

  color: rgba(255, 255, 255, 0.86);

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;

  font-size: clamp(48px, 5vw, 78px);
  line-height: 0.8;

  letter-spacing: 0.035em;
}

/* CONTENT */

#lrz-stream-music .lrz-stream-music__content {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 48px 52px;
}

#lrz-stream-music .lrz-stream-music__eyebrow {
  margin: 0 0 10px !important;

  color: var(--lrz-sm-blue) !important;

  font-size: 9px !important;
  font-weight: 700 !important;

  letter-spacing: 0.24em !important;

  text-transform: uppercase !important;
}

#lrz-stream-music h2 {
  margin: 0 !important;

  color: #fff !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(48px, 5vw, 76px) !important;
  font-weight: 400 !important;
  line-height: 0.85 !important;

  letter-spacing: 0.03em !important;

  text-transform: uppercase !important;
}

#lrz-stream-music .lrz-stream-music__description {
  max-width: 620px;

  margin: 22px 0 28px !important;

  color: #b3b7c0 !important;

  font-size: 13px !important;
  line-height: 1.75 !important;
}

/* NOW PLAYING */

#lrz-stream-music .lrz-stream-music__now-playing {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin: 0 0 24px;
  padding: 17px 18px;

  border-left: 2px solid var(--lrz-sm-blue);

  background: rgba(255, 255, 255, 0.025);
}

#lrz-stream-music .lrz-stream-music__now-playing small,
#lrz-stream-music .lrz-stream-music__now-playing strong,
#lrz-stream-music .lrz-stream-music__now-playing span {
  display: block;
}

#lrz-stream-music .lrz-stream-music__now-playing small {
  margin-bottom: 5px;

  color: #7f8590;

  font-size: 8px;

  letter-spacing: 0.16em;
}

#lrz-stream-music .lrz-stream-music__now-playing strong {
  color: #fff;

  font-size: 13px;

  letter-spacing: 0.1em;
}

#lrz-stream-music .lrz-stream-music__now-playing > div > span {
  margin-top: 4px;

  color: #8f949e;

  font-size: 9px;

  letter-spacing: 0.11em;
}

#lrz-stream-music .lrz-stream-music__pulse {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 50%;

  background: var(--lrz-sm-blue);

  box-shadow:
    0 0 0 5px rgba(47, 124, 255, 0.09),
    0 0 16px rgba(47, 124, 255, 0.55);
}

/* MUSIC / RADIO BUTTONS */

#lrz-stream-music .lrz-stream-music__platforms {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;
}

#lrz-stream-music .lrz-stream-platform {
  min-width: 0;
  min-height: 72px;

  display: grid;

  grid-template-columns: 34px minmax(0, 1fr) auto;

  align-items: center;
  gap: 12px;

  padding: 14px 15px;

  color: #fff !important;

  text-decoration: none !important;

  border: 1px solid rgba(255, 255, 255, 0.13);

  background: rgba(255, 255, 255, 0.018);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

#lrz-stream-music .lrz-stream-platform:hover {
  transform: translateY(-2px);
}

#lrz-stream-music .lrz-stream-platform__icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border: 1px solid currentColor;

  font-size: 12px;
}

#lrz-stream-music .lrz-stream-platform small,
#lrz-stream-music .lrz-stream-platform strong {
  display: block;
}

#lrz-stream-music .lrz-stream-platform small {
  margin-bottom: 4px;

  color: #858b96;

  font-size: 8px;

  letter-spacing: 0.14em;
}

#lrz-stream-music .lrz-stream-platform strong {
  color: #fff;

  font-size: 10px;

  letter-spacing: 0.12em;
}

#lrz-stream-music .lrz-stream-platform__arrow {
  color: #6f7580;
}

/* Radio — Lord Razu Blue */
#lrz-stream-music .lrz-stream-platform--radio {
  color: #2f7cff !important;

  border-color: rgba(47, 124, 255, 0.48);

  background: rgba(47, 124, 255, 0.065);
}

#lrz-stream-music .lrz-stream-platform--radio:hover {
  border-color: #2f7cff;

  background: rgba(47, 124, 255, 0.13);

  box-shadow: 0 0 18px rgba(47, 124, 255, 0.14);
}

/* Spotify */
#lrz-stream-music .lrz-stream-platform--spotify {
  color: #1ed760 !important;

  border-color: rgba(30, 215, 96, 0.38);

  background: rgba(30, 215, 96, 0.045);
}

#lrz-stream-music .lrz-stream-platform--spotify:hover {
  border-color: #1ed760;

  background: rgba(30, 215, 96, 0.1);

  box-shadow: 0 0 18px rgba(30, 215, 96, 0.12);
}

/* Apple Music */
#lrz-stream-music .lrz-stream-platform--apple {
  color: #fa2d48 !important;

  border-color: rgba(250, 45, 72, 0.4);

  background: rgba(250, 45, 72, 0.045);
}

#lrz-stream-music .lrz-stream-platform--apple:hover {
  border-color: #fa2d48;

  background: rgba(250, 45, 72, 0.1);

  box-shadow: 0 0 18px rgba(250, 45, 72, 0.12);
}

/* SoundCloud */
#lrz-stream-music .lrz-stream-platform--soundcloud {
  color: #ff5500 !important;

  border-color: rgba(255, 85, 0, 0.42);

  background: rgba(255, 85, 0, 0.045);
}

#lrz-stream-music .lrz-stream-platform--soundcloud:hover {
  border-color: #ff5500;

  background: rgba(255, 85, 0, 0.1);

  box-shadow: 0 0 18px rgba(255, 85, 0, 0.12);
}

/* =====================================================
   THE LORD RAZU — OFFLINE / NEXT SESSION
===================================================== */

#lrz-dojo-status,
#lrz-dojo-status * {
  box-sizing: border-box;
}

#lrz-dojo-status {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(220px, 0.75fr)
    minmax(320px, 1.15fr)
    minmax(290px, 0.9fr);

  align-items: center;

  gap: 0;

  margin: 0 0 48px;

  overflow: hidden;

  color: #fff;

  background: linear-gradient(90deg, rgba(47, 124, 255, 0.035), transparent 38%), #060709;

  border: 1px solid rgba(47, 124, 255, 0.48);
}

/* STATUS */

#lrz-dojo-status .lrz-dojo-status__state {
  padding: 28px 30px;

  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#lrz-dojo-status .lrz-dojo-status__status-line {
  display: flex;
  align-items: center;

  gap: 14px;
}

#lrz-dojo-status .lrz-dojo-status__dot {
  width: 10px;
  height: 10px;

  flex: 0 0 10px;

  border-radius: 50%;

  background: #f02736;

  box-shadow:
    0 0 0 5px rgba(240, 39, 54, 0.08),
    0 0 15px rgba(240, 39, 54, 0.38);
}

#lrz-dojo-status small {
  color: #818792;

  font-size: 8px;

  letter-spacing: 0.16em;
}

#lrz-dojo-status .lrz-dojo-status__status-line h2 {
  margin: 4px 0 0 !important;

  color: #fff !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: 36px !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;

  letter-spacing: 0.06em !important;
}

#lrz-dojo-status .lrz-dojo-status__next {
  margin-top: 18px;
}

#lrz-dojo-status .lrz-dojo-status__next small,
#lrz-dojo-status .lrz-dojo-status__next strong {
  display: block;
}

#lrz-dojo-status .lrz-dojo-status__next strong {
  margin-top: 5px;

  color: #fff;

  font-size: 11px;

  letter-spacing: 0.11em;
}

/* QUOTE */

#lrz-dojo-status .lrz-dojo-status__quote {
  display: flex;
  align-items: center;

  min-height: 100%;

  padding: 28px 38px;

  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#lrz-dojo-status .lrz-dojo-status__quote p {
  margin: 0 !important;

  color: #d9dce2 !important;

  font-size: 15px !important;
  line-height: 1.55 !important;

  letter-spacing: 0.08em !important;
}

/* TWITCH CTA */

#lrz-dojo-status .lrz-dojo-status__action {
  padding: 24px 28px;
}

#lrz-dojo-status .lrz-dojo-status__twitch {
  min-height: 76px;

  display: grid;

  grid-template-columns: 38px minmax(0, 1fr);

  align-items: center;

  gap: 13px;

  padding: 14px 16px;

  color: #fff !important;

  text-decoration: none !important;

  background: rgba(145, 70, 255, 0.09);

  border: 1px solid rgba(145, 70, 255, 0.55);

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#lrz-dojo-status .lrz-dojo-status__twitch:hover {
  transform: translateY(-2px);

  background: rgba(145, 70, 255, 0.17);

  border-color: #9146ff;

  box-shadow: 0 0 20px rgba(145, 70, 255, 0.13);
}

#lrz-dojo-status .lrz-dojo-status__twitch-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  color: #c6a7ff;

  border: 1px solid rgba(145, 70, 255, 0.42);
}

#lrz-dojo-status .lrz-dojo-status__twitch small,
#lrz-dojo-status .lrz-dojo-status__twitch strong {
  display: block;
}

#lrz-dojo-status .lrz-dojo-status__twitch small {
  margin-bottom: 5px;

  color: #a8a0b4;

  font-size: 7px;

  letter-spacing: 0.13em;
}

#lrz-dojo-status .lrz-dojo-status__twitch strong {
  color: #fff;

  font-size: 11px;

  letter-spacing: 0.12em;
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {
  #lrz-stream-music {
    grid-template-columns: 1fr 1fr;
  }

  #lrz-stream-music .lrz-stream-music__platforms {
    grid-template-columns: 1fr;
  }

  #lrz-dojo-status {
    grid-template-columns: 1fr 1fr;
  }

  #lrz-dojo-status .lrz-dojo-status__action {
    grid-column: 1 / -1;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {
  #lrz-stream-music {
    grid-template-columns: 1fr;
  }

  #lrz-stream-music .lrz-stream-music__art-image {
    min-height: 270px;
  }

  #lrz-stream-music .lrz-stream-music__content {
    padding: 34px 26px;
  }

  #lrz-stream-music .lrz-stream-music__platforms {
    grid-template-columns: 1fr;
  }

  #lrz-dojo-status {
    grid-template-columns: 1fr;
  }

  #lrz-dojo-status .lrz-dojo-status__state,
  #lrz-dojo-status .lrz-dojo-status__quote {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #lrz-dojo-status .lrz-dojo-status__quote {
    padding: 28px 30px;
  }

  #lrz-dojo-status .lrz-dojo-status__action {
    grid-column: auto;
    border-top: 0;
  }
}

/* =====================================================
   THE LORD RAZU — STREAM MUSIC MINI RADIO UPGRADE
===================================================== */

#lrz-stream-music .lrz-stream-platform--radio-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

#lrz-stream-music .lrz-stream-radio-toggle {
  width: 100%;
  min-height: 72px;

  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;

  padding: 14px 15px;

  border: 0;
  background: transparent;

  color: #fff;

  text-align: left;
  cursor: pointer;
}

#lrz-stream-music .lrz-stream-radio-toggle__icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border: 1px solid #2f7cff;

  color: #2f7cff;

  font-size: 11px;
}

#lrz-stream-music .lrz-stream-radio-toggle__copy small,
#lrz-stream-music .lrz-stream-radio-toggle__copy strong {
  display: block;
}

#lrz-stream-music .lrz-stream-radio-toggle__copy small {
  margin-bottom: 4px;

  color: #858b96;

  font-size: 8px;

  letter-spacing: 0.14em;
}

#lrz-stream-music .lrz-stream-radio-toggle__copy strong {
  color: #fff;

  font-size: 10px;

  letter-spacing: 0.12em;
}

#lrz-stream-music .lrz-stream-radio-open {
  min-height: 34px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 8px 15px;

  border-top: 1px solid rgba(47, 124, 255, 0.24);

  color: #8db1ff !important;

  text-decoration: none !important;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.15em;
}

#lrz-stream-music .lrz-stream-platform--radio-player.is-playing {
  background: rgba(47, 124, 255, 0.13);

  box-shadow:
    inset 0 0 28px rgba(47, 124, 255, 0.06),
    0 0 20px rgba(47, 124, 255, 0.1);
}

#lrz-stream-music .lrz-stream-platform--radio-player.is-playing .lrz-stream-radio-toggle__icon {
  color: #fff;

  background: #2f7cff;
}

#lrz-stream-music
  .lrz-stream-platform--radio-player.is-playing
  .lrz-stream-radio-toggle__copy
  small {
  color: #8db1ff;
}

/* LEFT-SIDE RADIO VISUAL */

#lrz-stream-music .lrz-stream-radio-visual {
  width: 100%;
  flex-direction: column;

  align-items: flex-start;
  justify-content: flex-end;
}

#lrz-stream-music .lrz-stream-radio-visual small {
  margin-top: 24px;

  color: #6f94df;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.26em;
}

#lrz-stream-music .lrz-stream-radio-visual strong {
  margin-top: 5px;

  color: #fff;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;

  font-size: clamp(54px, 6vw, 92px);
  font-weight: 400;
  line-height: 0.78;

  letter-spacing: 0.035em;
}

#lrz-stream-music .lrz-stream-radio-visual__bars {
  height: 86px;

  display: flex;
  align-items: flex-end;

  gap: 8px;
}

#lrz-stream-music .lrz-stream-radio-visual__bars span {
  width: 8px;

  background: linear-gradient(180deg, #70a0ff, #2f7cff);

  opacity: 0.48;

  transform-origin: bottom;
}

#lrz-stream-music .lrz-stream-radio-visual__bars span:nth-child(1) {
  height: 35%;
}

#lrz-stream-music .lrz-stream-radio-visual__bars span:nth-child(2) {
  height: 70%;
}

#lrz-stream-music .lrz-stream-radio-visual__bars span:nth-child(3) {
  height: 100%;
}

#lrz-stream-music .lrz-stream-radio-visual__bars span:nth-child(4) {
  height: 58%;
}

#lrz-stream-music .lrz-stream-radio-visual__bars span:nth-child(5) {
  height: 82%;
}

#lrz-stream-music.is-radio-playing .lrz-stream-radio-visual__bars span {
  animation: lrzStreamRadioBar 0.85s ease-in-out infinite alternate;

  opacity: 0.95;
}

#lrz-stream-music.is-radio-playing .lrz-stream-radio-visual__bars span:nth-child(2) {
  animation-delay: 0.12s;
}

#lrz-stream-music.is-radio-playing .lrz-stream-radio-visual__bars span:nth-child(3) {
  animation-delay: 0.24s;
}

#lrz-stream-music.is-radio-playing .lrz-stream-radio-visual__bars span:nth-child(4) {
  animation-delay: 0.08s;
}

#lrz-stream-music.is-radio-playing .lrz-stream-radio-visual__bars span:nth-child(5) {
  animation-delay: 0.3s;
}

@keyframes lrzStreamRadioBar {
  from {
    transform: scaleY(0.35);
  }

  to {
    transform: scaleY(1);
  }
}

#lrz-stream-music.is-radio-playing .lrz-stream-music__pulse {
  animation: lrzStreamRadioPulse 1.4s ease-in-out infinite;
}

@keyframes lrzStreamRadioPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.45);
    opacity: 1;
  }
}

/* Keep hidden native audio out of layout. */
#lrz-stream-radio-audio {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #lrz-stream-music.is-radio-playing .lrz-stream-radio-visual__bars span,
  #lrz-stream-music.is-radio-playing .lrz-stream-music__pulse {
    animation: none !important;
  }
}

/* =====================================================
   STREAM MINI RADIO — DYNAMIC ALBUM ART
===================================================== */

#lrz-stream-music .lrz-stream-music__art-image {
  isolation: isolate;
}

#lrz-stream-music .lrz-stream-radio-cover {
  z-index: 0;
}

#lrz-stream-music .lrz-stream-radio-art-shade {
  z-index: 1;
}

#lrz-stream-music .lrz-stream-radio-visual {
  position: relative;
  z-index: 2;
}

#lrz-stream-music.has-radio-art .lrz-stream-radio-visual {
  padding: 0 8px 8px;
}

#lrz-stream-music.has-radio-art .lrz-stream-radio-visual small,
#lrz-stream-music.has-radio-art .lrz-stream-radio-visual strong {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}

@media (max-width: 700px) {
  #lrz-stream-music .lrz-stream-radio-cover,
  #lrz-stream-music .lrz-stream-radio-art-shade {
    inset: 12px;
  }

  #lrz-stream-music .lrz-stream-radio-cover {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
  }
}

/* =====================================================
   STREAM MUSIC — CLEAN RADIO ARTWORK PANEL
   Matches the framed artwork treatment of the full Radio.
===================================================== */

#lrz-stream-music .lrz-stream-music__art {
  min-width: 0;
  place-items: center;
}

#lrz-stream-music .lrz-stream-music__art-image {
  padding: 0;
}

#lrz-stream-music .lrz-stream-radio-cover {
  background: #0a0d13;

  transform: none;
}

#lrz-stream-music.is-radio-playing .lrz-stream-radio-cover {
  transform: none;
}

/* The previous decorative equalizer/wordmark layer is intentionally removed. */
#lrz-stream-music .lrz-stream-radio-visual {
  display: none !important;
}

@media (max-width: 1000px) {
  #lrz-stream-music .lrz-stream-music__art {
    padding: 22px;
  }

  #lrz-stream-music .lrz-stream-music__art-frame {
    width: min(100%, 360px);
  }
}

@media (max-width: 700px) {
  #lrz-stream-music .lrz-stream-music__art {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #lrz-stream-music .lrz-stream-music__art-frame {
    width: min(100%, 390px);
    padding: 10px;
  }
}

/* =====================================================
   STREAM MUSIC — MOCKUP-EXACT LEFT RADIO CARD
===================================================== */

#lrz-stream-music .lrz-stream-music__art {
  display: flex;
  align-items: stretch;
  justify-content: center;

  padding: 30px;

  background:
    radial-gradient(circle at 50% 34%, rgba(47, 124, 255, 0.08), transparent 42%), #05070b;

  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#lrz-stream-music .lrz-stream-music__art-card {
  width: min(100%, 520px);

  display: flex;
  flex-direction: column;

  padding: 14px;

  background: linear-gradient(180deg, rgba(10, 14, 24, 0.98), rgba(4, 7, 12, 0.98));

  border: 1px solid rgba(65, 115, 255, 0.72);

  box-shadow:
    0 0 0 1px rgba(47, 124, 255, 0.06) inset,
    0 18px 48px rgba(0, 0, 0, 0.35);
}

#lrz-stream-music .lrz-stream-music__art-frame {
  width: 100%;
  aspect-ratio: 1 / 1;

  padding: 0;

  background: #05070b;

  border: 0;

  box-shadow: none;
}

#lrz-stream-music .lrz-stream-music__art-image {
  position: relative;

  width: 100%;
  height: 100%;
  min-height: 0;

  overflow: hidden;

  background: #0a0d13;
}

#lrz-stream-music .lrz-stream-radio-cover {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  border: 0;

  opacity: 0;

  transition: opacity 0.3s ease;
}

#lrz-stream-music.has-radio-art .lrz-stream-radio-cover {
  opacity: 1;
}

#lrz-stream-music .lrz-stream-radio-art-shade {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background: radial-gradient(
    circle at 50% 50%,
    transparent 0 34%,
    rgba(0, 0, 0, 0.08) 72%,
    rgba(0, 0, 0, 0.22) 100%
  );
}

/* CENTERED PLAY / PAUSE OVERLAY */

#lrz-stream-music .lrz-stream-radio-art-toggle {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 4;

  width: 118px;
  height: 118px;

  display: grid;
  place-items: center;

  transform: translate(-50%, -50%);

  border: 1px solid #2f7cff;
  border-radius: 50%;

  background: rgba(5, 8, 17, 0.8);

  color: #fff;

  cursor: pointer;

  box-shadow:
    0 0 0 1px rgba(47, 124, 255, 0.12) inset,
    0 0 28px rgba(47, 124, 255, 0.26),
    0 12px 30px rgba(0, 0, 0, 0.38);

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

#lrz-stream-music .lrz-stream-radio-art-toggle:hover {
  transform: translate(-50%, -50%) scale(1.05);

  background: rgba(12, 19, 38, 0.92);

  box-shadow:
    0 0 0 1px rgba(47, 124, 255, 0.2) inset,
    0 0 40px rgba(47, 124, 255, 0.38),
    0 16px 34px rgba(0, 0, 0, 0.42);
}

#lrz-stream-music .lrz-stream-radio-art-toggle span {
  display: block;

  margin-left: 6px;

  font-size: 38px;
  line-height: 1;
}

#lrz-stream-music.is-radio-playing .lrz-stream-radio-art-toggle {
  background: rgba(10, 17, 35, 0.92);
}

#lrz-stream-music.is-radio-playing .lrz-stream-radio-art-toggle span {
  margin-left: 0;

  font-size: 29px;
}

/* METADATA UNDER ARTWORK */

#lrz-stream-music .lrz-stream-music__art-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  padding: 26px 26px 22px;
}

#lrz-stream-music .lrz-stream-music__art-copy {
  min-width: 0;
}

#lrz-stream-music .lrz-stream-music__art-copy small,
#lrz-stream-music .lrz-stream-music__art-copy strong,
#lrz-stream-music .lrz-stream-music__art-copy span,
#lrz-stream-music .lrz-stream-music__art-copy em {
  display: block;
}

#lrz-stream-music .lrz-stream-music__art-copy small {
  margin-bottom: 10px;

  color: #5f8fff;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.22em;
}

#lrz-stream-music .lrz-stream-music__art-copy strong {
  color: #fff;

  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 700;
  line-height: 1.05;

  letter-spacing: 0.02em;

  text-transform: uppercase;
}

#lrz-stream-music .lrz-stream-music__art-copy span {
  margin-top: 10px;

  color: #a7abb3;

  font-size: 13px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

#lrz-stream-music .lrz-stream-music__art-copy em {
  margin-top: 17px;

  color: #4f7dff;

  font-style: normal;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

/* SMALL EQUALIZER BESIDE METADATA */

#lrz-stream-music .lrz-stream-radio-mini-bars {
  height: 52px;

  display: flex;
  align-items: flex-end;

  gap: 5px;

  flex: 0 0 auto;
}

#lrz-stream-music .lrz-stream-radio-mini-bars span {
  width: 6px;

  background: #3159d9;

  opacity: 0.78;

  transform-origin: bottom;
}

#lrz-stream-music .lrz-stream-radio-mini-bars span:nth-child(1) {
  height: 22%;
}
#lrz-stream-music .lrz-stream-radio-mini-bars span:nth-child(2) {
  height: 52%;
}
#lrz-stream-music .lrz-stream-radio-mini-bars span:nth-child(3) {
  height: 88%;
}
#lrz-stream-music .lrz-stream-radio-mini-bars span:nth-child(4) {
  height: 40%;
}
#lrz-stream-music .lrz-stream-radio-mini-bars span:nth-child(5) {
  height: 68%;
}

#lrz-stream-music.is-radio-playing .lrz-stream-radio-mini-bars span {
  animation: lrzStreamRadioMiniBars 0.78s ease-in-out infinite alternate;
}

#lrz-stream-music.is-radio-playing .lrz-stream-radio-mini-bars span:nth-child(2) {
  animation-delay: 0.08s;
}
#lrz-stream-music.is-radio-playing .lrz-stream-radio-mini-bars span:nth-child(3) {
  animation-delay: 0.19s;
}
#lrz-stream-music.is-radio-playing .lrz-stream-radio-mini-bars span:nth-child(4) {
  animation-delay: 0.03s;
}
#lrz-stream-music.is-radio-playing .lrz-stream-radio-mini-bars span:nth-child(5) {
  animation-delay: 0.14s;
}

@keyframes lrzStreamRadioMiniBars {
  from {
    transform: scaleY(0.35);
  }
  to {
    transform: scaleY(1);
  }
}

/* MOBILE */

@media (max-width: 700px) {
  #lrz-stream-music .lrz-stream-music__art {
    padding: 18px;
  }

  #lrz-stream-music .lrz-stream-music__art-card {
    padding: 10px;
  }

  #lrz-stream-music .lrz-stream-radio-art-toggle {
    width: 88px;
    height: 88px;
  }

  #lrz-stream-music .lrz-stream-radio-art-toggle span {
    font-size: 30px;
  }

  #lrz-stream-music .lrz-stream-music__art-meta {
    padding: 22px 18px 18px;
  }

  #lrz-stream-music .lrz-stream-radio-mini-bars {
    display: none;
  }
}

/* =====================================================
   THE LORD RAZU — LIVE STREAM INFO
   Matches the Dojo mockup + current site styling
===================================================== */

.dojo-live-info,
.dojo-live-info * {
  box-sizing: border-box;
}

.dojo-live-info {
  --dojo-info-blue: #2f7cff;
  --dojo-info-white: #ffffff;
  --dojo-info-muted: #a7abb4;
  --dojo-info-twitch: #9146ff;
  --dojo-info-youtube: #ff2d2d;

  width: 100%;
  max-width: 470px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: var(--dojo-info-white);
}

/* EYEBROW */

.dojo-live-info__eyebrow {
  margin: 0 0 18px !important;

  color: var(--dojo-info-blue) !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.22em !important;

  text-transform: uppercase !important;
}

/* TITLE */

.dojo-live-info__title {
  margin: 0 !important;

  color: #fff !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(48px, 4.8vw, 72px) !important;
  font-weight: 400 !important;
  line-height: 0.88 !important;

  letter-spacing: 0.025em !important;

  text-transform: uppercase !important;
}

/* BLUE RULE */

.dojo-live-info__rule {
  width: 68px;
  height: 2px;

  margin: 28px 0 24px;

  background: var(--dojo-info-blue);

  box-shadow: 0 0 16px rgba(47, 124, 255, 0.42);
}

/* DESCRIPTION */

.dojo-live-info__description {
  margin: 0 0 28px !important;

  color: var(--dojo-info-muted) !important;

  font-size: 14px !important;
  line-height: 1.8 !important;
}

/* ACTION GROUP */

.dojo-live-info__actions {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 0;
}

/* BUTTON BASE */

.dojo-live-info__button {
  width: 100%;
  min-height: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  padding: 0 24px;

  background: transparent;

  color: #fff !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.14em !important;

  text-decoration: none !important;
  text-transform: uppercase !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

/* TWITCH */

.dojo-live-info__button--twitch {
  border: 1px solid rgba(145, 70, 255, 0.62);

  background: linear-gradient(180deg, rgba(145, 70, 255, 0.11), rgba(145, 70, 255, 0.045));
}

.dojo-live-info__button--twitch:hover {
  transform: translateY(-2px);

  border-color: var(--dojo-info-twitch);

  background: rgba(145, 70, 255, 0.17);

  box-shadow: 0 0 20px rgba(145, 70, 255, 0.16);
}

.dojo-live-info__icon {
  color: #b991ff;

  font-size: 15px;
  line-height: 1;
}

/* YOUTUBE LABEL */

.dojo-live-info__secondary-label {
  margin: 25px 0 11px !important;

  color: #777d87 !important;

  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;
}

/* YOUTUBE */

.dojo-live-info__button--youtube {
  border: 1px solid rgba(255, 45, 45, 0.48);

  background: linear-gradient(180deg, rgba(255, 45, 45, 0.075), rgba(255, 45, 45, 0.025));
}

.dojo-live-info__button--youtube:hover {
  transform: translateY(-2px);

  border-color: var(--dojo-info-youtube);

  background: rgba(255, 45, 45, 0.13);

  box-shadow: 0 0 20px rgba(255, 45, 45, 0.13);
}

.dojo-live-info__youtube-icon {
  color: var(--dojo-info-youtube);

  font-size: 13px;
  line-height: 1;
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {
  .dojo-live-info {
    max-width: none;
  }

  .dojo-live-info__title {
    font-size: clamp(44px, 7vw, 66px) !important;
  }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {
  .dojo-live-info {
    width: 100%;
    max-width: none;
  }

  .dojo-live-info__eyebrow {
    margin-bottom: 14px !important;

    font-size: 9px !important;
  }

  .dojo-live-info__title {
    font-size: clamp(44px, 13vw, 62px) !important;
    line-height: 0.9 !important;
  }

  .dojo-live-info__rule {
    width: 54px;

    margin: 23px 0 20px;
  }

  .dojo-live-info__description {
    margin-bottom: 24px !important;

    font-size: 13px !important;
  }

  .dojo-live-info__button {
    min-height: 50px;

    padding: 0 18px;

    font-size: 9px !important;
  }

  .dojo-live-info__secondary-label {
    margin-top: 22px !important;
  }
}

/* =====================================================
   DOJO TWITCH PLAYER
===================================================== */

.player-frame {
  position: relative;
  width: 100%;
  overflow: hidden;

  background: #080a10;

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(47, 124, 255, 0.05);
}

#offline-thumb {
  display: block;
  width: 100%;
  height: auto;

  transition:
    transform 0.8s ease,
    opacity 0.35s ease;
}

.player-frame:hover #offline-thumb {
  transform: scale(1.02);
}

#twitch-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.watch-live-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 18px 38px;

  border: 1px solid rgba(47, 124, 255, 0.75);

  background: rgba(16, 22, 42, 0.88);

  color: #fff;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  cursor: pointer;

  backdrop-filter: blur(8px);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.watch-live-btn:hover {
  transform: translate(-50%, -50%) scale(1.05);

  background: #2f7cff;
  border-color: #2f7cff;

  box-shadow: 0 0 28px rgba(47, 124, 255, 0.45);
}

.player-frame::before {
  content: "LIVE";

  position: absolute;
  top: 18px;
  right: 18px;

  z-index: 20;

  padding: 7px 12px;

  border-radius: 4px;

  background: #ff2d2d;

  color: #fff;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  box-shadow: 0 0 16px rgba(255, 45, 45, 0.35);

  display: none;
}

.player-frame.is-live::before {
  display: block;
}

.player-frame.is-live #offline-thumb,
.player-frame.is-live .watch-live-btn {
  display: none;
}

.player-frame.is-live #twitch-player {
  display: block;
}

@media (max-width: 700px) {
  .watch-live-btn {
    width: calc(100% - 40px);
    max-width: 280px;

    padding: 16px 20px;

    font-size: 12px;
  }
}

/* =====================================================
   THE LORD RAZU — ALBUM PAGE TYPOGRAPHY
   Unified with the current site design system
   -----------------------------------------------------
   All album pages share .album-page, so these rules
   update every album without changing the HTML.
===================================================== */

.album-page {
  font-family: "Space Grotesk", Arial, sans-serif !important;
}

/* =====================================================
   ALBUM HERO
===================================================== */

.album-page .eyebrow,
.album-page .album-eyebrow {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  color: #2f6fff !important;

  font-size: 0.72rem !important;
  font-weight: 700 !important;

  letter-spacing: 0.24em !important;

  text-transform: uppercase !important;
}

.album-page h1,
.album-page .album-title {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-weight: 400 !important;
  line-height: 0.9 !important;

  letter-spacing: 0.035em !important;

  text-transform: uppercase !important;
}

.album-page .album-title {
  margin: 0.16em 0 0.32em !important;

  font-size: clamp(3.4rem, 6vw, 6.4rem) !important;
}

.album-page .album-title-long {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(3rem, 5vw, 5.4rem) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;

  letter-spacing: 0.025em !important;

  text-transform: uppercase !important;

  text-wrap: balance;
}

.album-page .album-description {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  color: #b7bac2 !important;

  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;

  letter-spacing: 0 !important;
}

.album-page .meta {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  color: #858a94 !important;

  font-size: 0.72rem !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;

  letter-spacing: 0.15em !important;

  text-transform: uppercase !important;
}

/* =====================================================
   BUTTONS
===================================================== */

.album-page .buttons button,
.album-page .buttons a,
.album-page button {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-weight: 700 !important;

  letter-spacing: 0.14em !important;

  text-transform: uppercase !important;
}

/* =====================================================
   TABS
===================================================== */

.album-page .tabs,
.album-page .tab {
  font-family: "Space Grotesk", Arial, sans-serif !important;
}

.album-page .tab {
  font-size: 0.72rem !important;
  font-weight: 700 !important;

  letter-spacing: 0.18em !important;

  text-transform: uppercase !important;
}

/* =====================================================
   TRACKLIST
===================================================== */

.album-page .track {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 0.9rem !important;

  letter-spacing: 0.08em !important;
}

.album-page .track strong,
.album-page .track-title,
.album-page .track-name {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: 1.35rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  letter-spacing: 0.045em !important;

  text-transform: uppercase !important;
}

.album-page .track span,
.album-page .track time {
  font-family: "Space Grotesk", Arial, sans-serif !important;
}

/* =====================================================
   PANELS / CREDITS / STORY
===================================================== */

.album-page .panel,
.album-page .story-overlay,
.album-page .story-overlay p,
.album-page .credits,
.album-page .credits p {
  font-family: "Space Grotesk", Arial, sans-serif !important;
}

.album-page .panel h2,
.album-page .panel h3,
.album-page .story-overlay h2,
.album-page .story-overlay h3,
.album-page .credits h2,
.album-page .credits h3 {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-weight: 400 !important;

  letter-spacing: 0.04em !important;

  text-transform: uppercase !important;
}

/* =====================================================
   ALBUM LYRICS
===================================================== */

.album-page #lyrics,
.album-page #lyrics p {
  font-family: "Space Grotesk", Arial, sans-serif !important;
}

.album-page #lyrics #album-lyrics-title {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-weight: 400 !important;
  line-height: 0.95 !important;

  letter-spacing: 0.04em !important;

  text-transform: uppercase !important;
}

.album-page #lyrics .album-lyrics-label,
.album-page #lyrics .album-lyrics-body h3,
.album-page #lyrics .lyric-section h3 {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-weight: 700 !important;

  letter-spacing: 0.22em !important;

  text-transform: uppercase !important;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 760px) {
  .album-page .album-title {
    font-size: clamp(3rem, 13vw, 5rem) !important;
  }

  .album-page .album-title-long {
    font-size: clamp(2.7rem, 11vw, 4.5rem) !important;
  }

  .album-page .album-description {
    font-size: 0.95rem !important;
  }

  .album-page .track strong,
  .album-page .track-title,
  .album-page .track-name {
    font-size: 1.2rem !important;
  }
}

/* =====================================================
   THE LORD RAZU — DISCOGRAPHY TYPOGRAPHY
   Unified with the current site design system
===================================================== */

.discography {
  font-family: "Space Grotesk", Arial, sans-serif !important;
}

.discography-header .eyebrow {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  color: #2f6fff !important;

  font-size: 0.72rem !important;
  font-weight: 700 !important;

  letter-spacing: 0.24em !important;

  text-transform: uppercase !important;
}

.discography-header h2 {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(4rem, 7vw, 7.5rem) !important;
  font-weight: 400 !important;
  line-height: 0.88 !important;

  letter-spacing: 0.035em !important;

  text-transform: uppercase !important;
}

/* Album names inside carousel cards */

.discography-title {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-weight: 400 !important;
  line-height: 1 !important;

  letter-spacing: 0.045em !important;

  text-transform: uppercase !important;
}

.discography-title--long {
  letter-spacing: 0.035em !important;
}

.discography-title--extra-long {
  letter-spacing: 0.025em !important;
  line-height: 1.04 !important;
}

/* Card secondary typography */

.discography-subtitle,
.discography-meta,
.discography-button,
.discography-footer,
.discography-quote {
  font-family: "Space Grotesk", Arial, sans-serif !important;
}

.discography-subtitle {
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}

.discography-button {
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Mobile */

@media (max-width: 760px) {
  .discography-header h2 {
    font-size: clamp(3.4rem, 14vw, 5.8rem) !important;
    line-height: 0.9 !important;
  }

  .discography-header .eyebrow {
    font-size: 0.66rem !important;
  }
}

/* =====================================================
   DISCOGRAPHY CLOSING
   Unified with Site Typography
===================================================== */

.discography-footer {
  margin: 110px auto 40px !important;
  max-width: 900px;
  padding: 0 20px !important;
  text-align: center;
}

.discography-footer::before {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  margin: 0 auto 34px;
  background: #2f6fff;
  box-shadow: 0 0 16px rgba(47, 124, 255, 0.35);
}

.discography-quote {
  margin: 0 !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-style: italic !important;
  font-weight: 300 !important;

  font-size: clamp(1.15rem, 1.4vw, 1.45rem) !important;
  line-height: 1.8 !important;

  color: rgba(255, 255, 255, 0.72) !important;
}

.discography-signature {
  margin-top: 38px !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(2rem, 2.8vw, 2.8rem) !important;
  font-weight: 400 !important;
  line-height: 0.95 !important;

  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  color: #fff !important;
}

@media (max-width: 768px) {
  .discography-footer {
    margin-top: 80px !important;
    padding: 0 24px 20px !important;
  }

  .discography-footer::before {
    width: 64px;
    margin-bottom: 26px;
  }

  .discography-quote {
    font-size: 1rem !important;
  }

  .discography-signature {
    margin-top: 28px !important;
    font-size: 2rem !important;
  }
}

/* =====================================================
   MOBILE CONTROL POLISH
   One visual language for play/pause controls.
===================================================== */

@media (max-width: 760px) {
  .play-overlay,
  .lr-player-button--main,
  #lord-razu-live-section .lrz-live__play-button,
  #lrz-stream-music .lrz-stream-radio-art-toggle,
  .audio-player .round-play {
    -webkit-appearance: none;
    appearance: none;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(116, 158, 255, 0.92) !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #397cff 0%, #245de8 100%) !important;
    color: transparent !important;
    font-family: Arial, sans-serif !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow:
      0 0 0 1px rgba(47, 111, 255, 0.2) inset,
      0 0 22px rgba(47, 111, 255, 0.34),
      0 10px 24px rgba(0, 0, 0, 0.38) !important;
  }

  .play-overlay {
    width: 66px !important;
    height: 66px !important;
  }

  .lr-player-button--main {
    width: 44px !important;
    height: 44px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #lord-razu-live-section .lrz-live__play-button {
    width: 68px !important;
    height: 68px !important;
  }

  #lrz-stream-music .lrz-stream-radio-art-toggle {
    width: 78px !important;
    height: 78px !important;
  }

  .audio-player .round-play {
    width: 48px !important;
    height: 48px !important;
  }

  .play-overlay::before,
  .lr-player-button--main::before,
  #lord-razu-live-section .lrz-live__play-button::before,
  .audio-player .round-play::before,
  #lrz-stream-music .lrz-stream-radio-art-toggle span::before,
  #lrz-stream-music .lrz-stream-radio-toggle__icon::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    transform: translate(-42%, -50%);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  }

  #global-player.lr-album-player-v11.is-playing .lr-player-button--main::before,
  .audio-player .round-play.playing::before,
  #lrz-stream-music.is-radio-playing .lrz-stream-radio-art-toggle span::before,
  #lrz-stream-music
    .lrz-stream-platform--radio-player.is-playing
    .lrz-stream-radio-toggle__icon::before {
    width: 13px;
    height: 15px;
    border: 0;
    background: linear-gradient(90deg, #fff 0 4px, transparent 4px 9px, #fff 9px 13px);
    transform: translate(-50%, -50%);
    filter: none;
  }

  #lrz-stream-music .lrz-stream-radio-art-toggle span,
  #lrz-stream-music.is-radio-playing .lrz-stream-radio-art-toggle span {
    display: grid;
    place-items: center;
    margin: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #lrz-stream-music .lrz-stream-radio-toggle__icon {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(116, 158, 255, 0.78);
    border-radius: 50%;
    background: rgba(47, 111, 255, 0.12);
    color: transparent;
    font-family: Arial, sans-serif;
    font-size: 0;
    line-height: 0;
    box-shadow: 0 0 14px rgba(47, 111, 255, 0.18);
  }

  #lrz-stream-music .lrz-stream-platform--radio-player.is-playing .lrz-stream-radio-toggle__icon {
    background: #2f6fff;
  }

  #lord-razu-radio .lrr__controls {
    gap: clamp(22px, 8vw, 42px);
  }

  #lord-razu-radio .lrr__controls .lrr__play {
    width: 74px;
    height: 74px;
    border: 1px solid rgba(116, 158, 255, 0.92);
    background: linear-gradient(180deg, #397cff 0%, #245de8 100%);
    box-shadow:
      0 0 0 1px rgba(47, 111, 255, 0.2) inset,
      0 0 24px rgba(47, 111, 255, 0.34);
  }

  #lord-razu-radio .lrr__controls .lrr__play svg {
    width: 31px;
  }

  #lord-razu-radio .lrr__controls button:not(.lrr__play) {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    background: rgba(8, 11, 18, 0.82);
  }
}

/* =====================================================
   JOURNAL TAB + DRAWER POLISH
   Aligned with the site's blue/black interface system.
===================================================== */

#journal-tab {
  top: 50% !important;
  width: 36px;
  height: 112px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(43, 47, 57, 0.98), rgba(24, 28, 36, 0.99));
  border: 1px solid rgba(47, 111, 255, 0.62);
  border-left: 0;
  border-radius: 0 9px 9px 0;
  box-shadow:
    0 0 0 1px rgba(47, 111, 255, 0.06) inset,
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(47, 111, 255, 0.18);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

#journal-tab:hover,
#journal-tab:focus-visible {
  background: linear-gradient(180deg, rgba(18, 28, 54, 0.98), rgba(7, 11, 22, 0.98));
  border-color: #2f6fff;
  box-shadow:
    0 0 0 1px rgba(47, 111, 255, 0.12) inset,
    0 12px 32px rgba(0, 0, 0, 0.44),
    0 0 24px rgba(47, 111, 255, 0.24);
}

#journal-tab .journal-text {
  color: #6f94ff;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.28em;
  text-shadow: none;
}

#journal-panel {
  width: min(400px, 90vw);
  left: min(-400px, -90vw);
  background:
    radial-gradient(circle at 0 0, rgba(47, 111, 255, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(7, 9, 14, 0.985), rgba(3, 4, 7, 0.995));
  border-right: 1px solid rgba(47, 111, 255, 0.32);
  font-family: "Space Grotesk", Arial, sans-serif;
  box-shadow:
    18px 0 55px rgba(0, 0, 0, 0.58),
    1px 0 22px rgba(47, 111, 255, 0.08);
}

#journal-panel .journal-header h2 {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#journal-panel #journal-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.025);
  color: #a9afbc;
  cursor: pointer;
}

#journal-panel #journal-close:hover,
#journal-panel #journal-close:focus-visible {
  border-color: #2f6fff;
  color: #fff;
  background: rgba(47, 111, 255, 0.12);
}

@media (max-width: 768px) {
  #journal-tab {
    width: 34px;
    height: 104px;
    border-radius: 0 8px 8px 0;
  }

  #journal-panel {
    width: min(88vw, 380px);
    left: max(-380px, -88vw);
  }

  #journal-panel.open {
    left: 0;
  }

  #journal-panel .journal-header {
    padding: 26px 22px 16px;
  }

  #journal-panel #journal-preview,
  #journal-panel .recent-chapters,
#journal-panel .journal-footer {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* =====================================================
   JOURNAL ENTRY PAGES
   Scoped to individual posts in /the-journey only.
===================================================== */

body.collection-6a56e0a88013067d48cd97a1.view-item {
  --lr-entry-blue: #2f6fff;
  --lr-entry-blue-soft: #88a6ff;
  --lr-entry-ink: #f4f6fb;
  --lr-entry-muted: #a8afbd;
  --lr-entry-line: rgba(255, 255, 255, 0.12);
  --lr-entry-panel: rgba(8, 11, 18, 0.72);
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-wrapper {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 72px);
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-inner-wrapper {
  padding-block: clamp(84px, 10vw, 150px) clamp(72px, 9vw, 128px);
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-top-wrapper {
  max-width: 880px;
  margin: 0 auto clamp(38px, 5vw, 64px);
  text-align: left;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-meta-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 18px;
  color: var(--lr-entry-muted);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-category,
body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-meta-wrapper a {
  color: var(--lr-entry-blue-soft);
  text-decoration: none;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .entry-title {
  margin: 0;
  color: var(--lr-entry-ink);
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 10vw, 132px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.025em;
  text-align: left;
  text-transform: uppercase;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content-wrapper {
  max-width: 880px;
  margin-inline: auto;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content {
  color: #d8dce5;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.82;
  text-align: left;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content > p,
body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content .sqs-html-content > p {
  margin-block: 0 1.35em;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content h2,
body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content h3,
body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content h4 {
  color: var(--lr-entry-ink);
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content h2 {
  margin: clamp(52px, 8vw, 88px) 0 22px;
  font-size: clamp(38px, 6vw, 66px);
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content h3 {
  margin: 42px 0 16px;
  font-size: clamp(26px, 4vw, 38px);
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content a:not([class]) {
  color: var(--lr-entry-blue-soft);
  text-decoration-color: rgba(136, 166, 255, 0.48);
  text-underline-offset: 0.2em;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content blockquote {
  margin: 42px 0;
  padding: 8px 0 8px clamp(20px, 3vw, 34px);
  border-left: 2px solid var(--lr-entry-blue);
  color: var(--lr-entry-ink);
  font-size: 1.18em;
  line-height: 1.6;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content hr {
  height: 1px;
  margin: clamp(48px, 7vw, 76px) 0;
  border: 0;
  background: linear-gradient(90deg, var(--lr-entry-blue), var(--lr-entry-line) 44%, transparent);
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content .image-block,
body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content .video-block,
body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content .sqs-video-wrapper {
  overflow: hidden;
  border: 1px solid var(--lr-entry-line);
  border-radius: 16px;
  background: var(--lr-entry-panel);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content iframe {
  max-width: 100%;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-meta-wrapper--footer,
body.collection-6a56e0a88013067d48cd97a1.view-item .blog-meta-item--tags {
  max-width: 880px;
  margin: clamp(54px, 8vw, 86px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--lr-entry-line);
}

body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-tag {
  display: inline-flex;
  margin: 0 8px 8px 0;
  padding: 8px 12px;
  border: 1px solid rgba(47, 111, 255, 0.3);
  border-radius: 999px;
  color: var(--lr-entry-blue-soft);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .item-pagination {
  border-top: 1px solid var(--lr-entry-line);
  background: linear-gradient(180deg, rgba(47, 111, 255, 0.035), transparent);
}

body.collection-6a56e0a88013067d48cd97a1.view-item .item-pagination-link {
  color: var(--lr-entry-ink);
  font-family: "Space Grotesk", Arial, sans-serif;
}

body.collection-6a56e0a88013067d48cd97a1.view-item .item-pagination-title {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-wrapper {
    padding-inline: 20px;
  }

  body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-inner-wrapper {
    padding-block: 72px 68px;
  }

  body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-top-wrapper {
    margin-bottom: 32px;
  }

  body.collection-6a56e0a88013067d48cd97a1.view-item .entry-title {
    font-size: clamp(50px, 18vw, 78px);
    line-height: 0.92;
  }

  body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-meta-wrapper {
    font-size: 10px;
    letter-spacing: 0.13em;
  }

  body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content {
    font-size: 16px;
    line-height: 1.75;
    overflow-wrap: anywhere;
  }

  body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content h2 {
    margin-top: 48px;
  }

  body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content .image-block,
  body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content .video-block,
  body.collection-6a56e0a88013067d48cd97a1.view-item .blog-item-content .sqs-video-wrapper {
    border-radius: 12px;
  }

  body.collection-6a56e0a88013067d48cd97a1.view-item .item-pagination-link {
    padding: 28px 20px;
  }
}

/* =====================================================
   MOBILE VISUAL CORRECTIONS — AUGUST 2026
===================================================== */

@media (max-width: 760px) {
  .video-card .play-overlay,
  .video-card:hover .play-overlay {
    width: 64px !important;
    height: 64px !important;
    border: 1px solid rgba(130, 161, 255, 0.58) !important;
    background: rgba(7, 10, 17, 0.82) !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.035) inset,
      0 12px 30px rgba(0, 0, 0, 0.52),
      0 0 18px rgba(47, 111, 255, 0.18) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translate(-50%, -50%) !important;
  }

  .video-card .play-overlay::before {
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 12px;
  }
}

/* CSS-drawn arrows prevent iOS from substituting blue emoji tiles. */
.lr-song-record__stream-links .lr-song-record__arrow {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--lr-song-blue);
  font-size: 0;
}

.lr-song-record__stream-links .lr-song-record__arrow::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.lr-song-record__stream-links .lr-song-record__arrow::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 2px;
  width: 13px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}

#journal-panel .journal-read-more::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  #journal-panel #journal-preview .journal-image {
    max-height: 190px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    object-fit: cover;
  }

  #journal-panel #journal-preview h3 {
    font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
    font-size: clamp(38px, 11vw, 54px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }

  #journal-panel #journal-preview .journal-excerpt {
    display: -webkit-box;
    margin: 24px 0 30px;
    overflow: hidden;
    color: #cbd0da;
    font-size: 15px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
  }

  #journal-panel .journal-read-more {
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
  }
}

/* =====================================================
   RADIO MOBILE CONTROL ALIGNMENT — AUG 10, 2026
   Locks Previous / Play / Next into a true centered row.
===================================================== */
@media (max-width: 760px) {
  html body #lord-razu-radio .lrr__controls {
    display: grid !important;
    grid-template-columns: 46px 74px 46px !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 28px !important;
    width: 100% !important;
    margin: 26px auto 18px !important;
  }

  html body #lord-razu-radio .lrr__controls button,
  html body #lord-razu-radio .lrr__controls button:hover,
  html body #lord-razu-radio .lrr__controls button:active,
  html body #lord-razu-radio .lrr__controls button:focus {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    translate: none !important;
  }

  html body #lord-razu-radio .lrr__controls button:not(.lrr__play) {
    width: 46px !important;
    height: 46px !important;
    transform: none !important;
  }

  html body #lord-razu-radio .lrr__controls .lrr__play {
    width: 74px !important;
    height: 74px !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  html body #lord-razu-radio .lrr__controls svg {
    position: static !important;
    display: block !important;
    margin: auto !important;
    inset: auto !important;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  html body #lord-razu-radio .lrr__controls {
    grid-template-columns: 44px 70px 44px !important;
    column-gap: 22px !important;
  }

  html body #lord-razu-radio .lrr__controls button:not(.lrr__play) {
    width: 44px !important;
    height: 44px !important;
  }

  html body #lord-razu-radio .lrr__controls .lrr__play {
    width: 70px !important;
    height: 70px !important;
  }
}

/* =====================================================
   STREAM MINI RADIO ICON FIX — AUG 10, 2026
   One icon source only: CSS. No text "II" / glyph overlay.
===================================================== */
@media (max-width: 768px) {
  html body #lrz-stream-music .lrz-stream-radio-art-toggle,
  html body #lrz-stream-music .lrz-stream-radio-toggle__icon {
    position: relative !important;
  }

  /* Disable the old span pseudo-icon on the large artwork control. */
  html body #lrz-stream-music .lrz-stream-radio-art-toggle span::before,
  html body #lrz-stream-music.is-radio-playing .lrz-stream-radio-art-toggle span::before {
    content: none !important;
    display: none !important;
  }

  html body #lrz-stream-music .lrz-stream-radio-art-toggle span {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }

  /* Large artwork button — PLAY */
  html body #lrz-stream-music .lrz-stream-radio-art-toggle::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-left: 13px solid #fff !important;
    background: none !important;
    transform: translate(-38%, -50%) !important;
    margin: 0 !important;
  }

  /* Large artwork button — PAUSE */
  html body #lrz-stream-music.is-radio-playing .lrz-stream-radio-art-toggle::before {
    width: 14px !important;
    height: 18px !important;
    border: 0 !important;
    background:
      linear-gradient(
        90deg,
        #fff 0 4px,
        transparent 4px 10px,
        #fff 10px 14px
      ) !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Small mini-radio control — make its own pseudo-icon anchor itself
     to the 34x34 circle rather than an outer ancestor. */
  html body #lrz-stream-music .lrz-stream-radio-toggle__icon::before {
    top: 50% !important;
    left: 50% !important;
  }

  html body #lrz-stream-music
    .lrz-stream-platform--radio-player.is-playing
    .lrz-stream-radio-toggle__icon::before {
    width: 12px !important;
    height: 15px !important;
    background:
      linear-gradient(
        90deg,
        #fff 0 4px,
        transparent 4px 8px,
        #fff 8px 12px
      ) !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* =====================================================
   FULL RADIO MOBILE CONTROLS — FINAL ALIGNMENT
   Keeps Previous / Play / Next centered and evenly spaced.
===================================================== */
@media (max-width: 768px) {
  html body #lord-razu-radio .lrr__controls {
    display: grid !important;
    grid-template-columns: 52px 76px 52px !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    column-gap: 26px !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 26px auto 18px !important;
    padding: 0 !important;
  }

  html body #lord-razu-radio .lrr__controls > button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  html body #lord-razu-radio .lrr__controls > button:not(.lrr__play) {
    width: 52px !important;
    height: 52px !important;
  }

  html body #lord-razu-radio .lrr__controls > .lrr__play {
    width: 76px !important;
    height: 76px !important;
  }

  html body #lord-razu-radio .lrr__controls > button svg {
    position: static !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html body #lord-razu-radio .lrr__controls > button:not(.lrr__play) svg {
    width: 28px !important;
    height: 28px !important;
  }

  html body #lord-razu-radio .lrr__controls > .lrr__play svg {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (max-width: 430px) {
  html body #lord-razu-radio .lrr__controls {
    grid-template-columns: 48px 72px 48px !important;
    column-gap: 22px !important;
    max-width: 250px !important;
  }

  html body #lord-razu-radio .lrr__controls > button:not(.lrr__play) {
    width: 48px !important;
    height: 48px !important;
  }

  html body #lord-razu-radio .lrr__controls > .lrr__play {
    width: 72px !important;
    height: 72px !important;
  }
}

/* =====================================================
   FULL RADIO MOBILE PLAY/PAUSE STATE FIX — AUG 10, 2026
   The final mobile SVG alignment rule was forcing BOTH
   play and pause SVGs to display at the same time.
===================================================== */
@media (max-width: 768px) {
  html body #lord-razu-radio .lrr__controls > .lrr__play .lrr__play-icon {
    display: block !important;
  }

  html body #lord-razu-radio .lrr__controls > .lrr__play .lrr__pause-icon {
    display: none !important;
  }

  html body #lord-razu-radio.is-playing .lrr__controls > .lrr__play .lrr__play-icon {
    display: none !important;
  }

  html body #lord-razu-radio.is-playing .lrr__controls > .lrr__play .lrr__pause-icon {
    display: block !important;
  }
}

/* ==========================================
   LORD RAZU MEMBER NAVIGATION
========================================== */

.razu-member-nav {
  position: relative;
  z-index: 50;
  width: 100%;
  padding: 18px 24px;
}

.razu-member-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  width: 100%;
  margin: 0 auto;
}

.razu-member-nav__item {
  position: relative;
}

.razu-member-nav__link {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 0;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}

.razu-member-nav__link:hover {
  opacity: 0.65;
}

.razu-member-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.razu-member-nav__arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.2s ease;
}

.razu-member-nav__external {
  display: inline-block;
  margin-left: 3px;
  font-size: 10px;
  transform: translateY(-1px);
}


/* ==========================================
   MEMBER NAV DROPDOWNS
========================================== */

.razu-member-nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;

  min-width: 230px;
  padding: 10px;

  background: rgba(10, 10, 10, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateX(-50%)
    translateY(-5px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.razu-member-nav__dropdown a {
  display: block;

  padding: 12px 14px;

  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}

.razu-member-nav__dropdown a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================
   MEMBER NAV — ALBUM CATEGORY LABELS
========================================== */

.razu-member-nav__dropdown--albums {
  min-width: 260px;
}

.razu-member-nav__category {
  position: relative;
  display: flex;
  align-items: center;
  margin: 12px 14px 5px;
  padding: 10px 0 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #2f6fff;
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.88;
  pointer-events: none;
  user-select: none;
}

.razu-member-nav__category:first-child {
  margin-top: 0;
  padding-top: 5px;
  border-top: 0;
}

.razu-member-nav__category::after {
  content: "";
  height: 1px;
  flex: 1;
  margin-left: 12px;
  background: linear-gradient(
    90deg,
    rgba(47, 111, 255, 0.42),
    rgba(47, 111, 255, 0)
  );
}

.razu-member-nav__dropdown--albums a {
  padding-left: 14px;
}

@media (max-width: 768px) {
  html body .razu-member-nav__dropdown--albums {
    min-width: 0 !important;
  }

  html body .razu-member-nav__category {
    margin: 13px 8px 4px !important;
    padding: 11px 0 7px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: #5f88ff !important;
    font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
  }

  html body .razu-member-nav__category:first-child {
    margin-top: 5px !important;
    border-top: 0 !important;
  }
}


/* Desktop hover */

@media (hover: hover) and (pointer: fine) {

  .razu-member-nav__item--dropdown:hover
  .razu-member-nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
      translateX(-50%)
      translateY(0);
  }

  .razu-member-nav__item--dropdown:hover
  .razu-member-nav__arrow {
    transform: rotate(180deg);
  }
}


/* Click / touch open state */

.razu-member-nav__item--dropdown.is-open
.razu-member-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translateX(-50%)
    translateY(0);
}

.razu-member-nav__item--dropdown.is-open
.razu-member-nav__arrow {
  transform: rotate(180deg);
}


/* ==========================================
   LORD RAZU MEMBER NAVIGATION
========================================== */

.razu-member-nav {
  position: relative;
  z-index: 100;
  width: 100%;
  padding: 18px 24px;
}

.razu-member-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  width: 100%;
  margin: 0 auto;
}

.razu-member-nav__item {
  position: relative;
}


/* ==========================================
   SITE-MATCHING TYPOGRAPHY
========================================== */

.razu-member-nav__link {
  appearance: none;
  border: 0;
  background: transparent;

  color: inherit;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;

  letter-spacing: inherit;
  line-height: 1;

  text-decoration: none;
  text-transform: uppercase;

  cursor: pointer;

  padding: 12px 0;

  white-space: nowrap;

  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}

.razu-member-nav__link:hover {
  opacity: 0.7;
}

.razu-member-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.razu-member-nav__arrow {
  display: inline-block;
  font-size: 10px;

  transition:
    transform 0.2s ease;
}

.razu-member-nav__external {
  display: inline-block;
  margin-left: 3px;

  font-size: 10px;

  transform: translateY(-1px);
}


/* ==========================================
   DROPDOWN
========================================== */

.razu-member-nav__dropdown {
  position: absolute;

  top: 100%;
  left: 50%;

  min-width: 240px;

  padding: 10px;

  background:
    rgba(8, 8, 8, 0.82);

  border:
    1px solid rgba(255, 255, 255, 0.10);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform:
    translateX(-50%)
    translateY(4px);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
}


/* invisible hover bridge */
.razu-member-nav__dropdown::before {
  content: "";

  position: absolute;

  top: -14px;
  left: 0;

  width: 100%;
  height: 14px;
}


/* ==========================================
   DROPDOWN LINKS
========================================== */

.razu-member-nav__dropdown a {
  display: block;

  padding: 12px 14px;

  color: inherit;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;

  letter-spacing: inherit;
  line-height: 1.35;

  text-decoration: none;

  transition:
    background 0.18s ease,
    opacity 0.18s ease;
}

.razu-member-nav__dropdown a:hover {
  background:
    rgba(0, 0, 0, 0.42);

  opacity: 1;
}


/* ==========================================
   DESKTOP HOVER
========================================== */

@media (hover: hover) and (pointer: fine) {

  .razu-member-nav__item--dropdown:hover
  .razu-member-nav__dropdown,

  .razu-member-nav__dropdown:hover {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
      translateX(-50%)
      translateY(0);
  }

  .razu-member-nav__item--dropdown:hover
  .razu-member-nav__arrow {
    transform: rotate(180deg);
  }
}


/* ==========================================
   CLICK / TOUCH OPEN STATE
========================================== */

.razu-member-nav__item--dropdown.is-open
.razu-member-nav__dropdown {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transform:
    translateX(-50%)
    translateY(0);
}

.razu-member-nav__item--dropdown.is-open
.razu-member-nav__arrow {
  transform: rotate(180deg);
}


/* ==========================================
   MOBILE
========================================== */

@media screen and (max-width: 767px) {

  .razu-member-nav {
    padding: 14px 18px;
  }

  .razu-member-nav__inner {
    flex-direction: column;
    align-items: stretch;

    gap: 0;
  }

  .razu-member-nav__item {
    width: 100%;
  }

  .razu-member-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 15px 4px;

    border-bottom:
      1px solid rgba(255, 255, 255, 0.10);

    text-align: left;
  }

  .razu-member-nav__dropdown {
    position: static;

    width: 100%;
    min-width: 0;

    padding: 0;

    background:
      rgba(8, 8, 8, 0.52);

    border: 0;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    max-height: 0;

    overflow: hidden;

    opacity: 1;
    visibility: visible;

    pointer-events: none;

    transform: none;

    transition:
      max-height 0.3s ease;
  }

  .razu-member-nav__dropdown::before {
    display: none;
  }

  .razu-member-nav__dropdown a {
    padding: 13px 18px;

    border-bottom:
      1px solid rgba(255, 255, 255, 0.06);
  }

  .razu-member-nav__dropdown a:hover {
    background:
      rgba(0, 0, 0, 0.38);
  }

  .razu-member-nav__item--dropdown.is-open
  .razu-member-nav__dropdown {
    max-height: 500px;

    pointer-events: auto;

    transform: none;
  }

}


/* ==========================================
   MEMBER NAV — MATCH MAIN NAV
========================================== */

.razu-member-nav__link,
.razu-member-nav__toggle {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;

  letter-spacing: 0.025em !important;
  line-height: 1 !important;

  text-transform: uppercase !important;
}


/* Dropdown links */

.razu-member-nav__dropdown a {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: 17px !important;
  font-weight: 400 !important;
  font-style: normal !important;

  letter-spacing: 0.025em !important;
  line-height: 1.15 !important;

  text-transform: uppercase !important;
}

/* ==========================================
   MEMBER NAV — DROPDOWNS
========================================== */

.razu-member-nav__dropdown {
  position: absolute;

  /* Connect directly to ALBUMS / LIVE */
  top: 100%;
  left: 0;

  min-width: 255px;
  padding: 8px 0;

  /* Dark translucent panel */
  background: rgba(5, 6, 9, 0.94) !important;

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(0);

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;

  z-index: 9999;
}


/* ==========================================
   DROPDOWN LINKS
========================================== */

.razu-member-nav__dropdown a {
  display: block;
  width: 100%;

  padding: 13px 20px;

  color: rgba(255, 255, 255, 0.82) !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;

  letter-spacing: 0.025em !important;
  line-height: 1.1 !important;

  text-decoration: none !important;
  text-transform: uppercase !important;

  background: transparent;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    padding-left 0.18s ease;
}


/* Individual album hover */

.razu-member-nav__dropdown a:hover {
  background: rgba(20, 24, 34, 0.96) !important;

  color: #ffffff !important;

  padding-left: 25px;
}


/* ==========================================
   KEEP DROPDOWN OPEN
========================================== */

@media (hover: hover) and (pointer: fine) {

  .razu-member-nav__item--dropdown:hover
  > .razu-member-nav__dropdown,

  .razu-member-nav__dropdown:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }


  /* Keep ALBUMS / LIVE highlighted */

  .razu-member-nav__item--dropdown:hover
  > .razu-member-nav__link {
    background: rgba(5, 6, 9, 0.94) !important;

    color: #ffffff !important;

    opacity: 1 !important;
  }


  .razu-member-nav__item--dropdown:hover
  .razu-member-nav__arrow {
    transform: rotate(180deg);
  }

}


/* Click / mobile state */

.razu-member-nav__item--dropdown.is-open
> .razu-member-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ==========================================
   MAIN NAV ITEM HOVER
========================================== */

.razu-member-nav__link {
  padding: 12px 16px !important;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease !important;
}

.razu-member-nav__link:hover {
  background: rgba(5, 6, 9, 0.94) !important;

  color: #ffffff !important;

  opacity: 1 !important;
}

/* =====================================================
   PREMIUM ALBUM DOWNLOAD BUTTON
   Match album hero buttons exactly
===================================================== */

.album-hero .buttons a.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: none;
  color: #fff;

  border: 1px solid #444;

  padding: 16px 24px;

  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: normal;

  text-transform: uppercase;
  text-decoration: none !important;

  cursor: pointer;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.album-hero .buttons a.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #777;
  color: #fff;
}

/* =====================================================
   PREMIUM MEMBER ACCESS BADGE
===================================================== */

.album-page .premium-access-badge {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin: 0 0 14px 0;
  padding: 7px 11px;

  background: rgba(47, 111, 255, 0.08);

  border: 1px solid rgba(47, 111, 255, 0.38);
  border-radius: 4px;

  color: #88a6ff;

  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.16em;
  line-height: 1;

  text-transform: uppercase;

  box-shadow:
    0 0 18px rgba(47, 111, 255, 0.08);
}


/* Small access indicator */

.album-page .premium-access-badge::before {
  content: "";

  width: 6px;
  height: 6px;

  margin-right: 8px;

  background: #2f6fff;
  border-radius: 50%;

  box-shadow:
    0 0 8px rgba(47, 111, 255, 0.75);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 760px) {

  .album-page .premium-access-badge {
    margin-bottom: 12px;
    padding: 7px 10px;

    font-size: 9px;
    letter-spacing: 0.14em;
  }

}

/* =====================================================
   LORD RAZU PREMIUM RADIO
===================================================== */

#lord-razu-radio.radio-page--premium {
  --lrr-premium: #7568ff;
  --lrr-premium-soft: #a59fff;
  --lrr-premium-bg: rgba(117, 104, 255, 0.08);
}


/* =====================================================
   PREMIUM BADGE
===================================================== */

#lord-razu-radio .radio-premium-badge {
  display: none;
}

#lord-razu-radio.radio-page--premium
.radio-premium-badge {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin: 8px auto 18px;
  padding: 7px 11px;

  border:
    1px solid rgba(117, 104, 255, 0.42);

  border-radius: 4px;

  background:
    rgba(117, 104, 255, 0.09);

  color: #aaa4ff;

  font-family:
    "Space Grotesk",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.16em;
  line-height: 1;

  text-transform: uppercase;

  box-shadow:
    0 0 20px rgba(117, 104, 255, 0.10);
}


#lord-razu-radio.radio-page--premium
.radio-premium-badge::before {
  content: "";

  width: 6px;
  height: 6px;

  margin-right: 8px;

  border-radius: 50%;

  background: #7568ff;

  box-shadow:
    0 0 10px rgba(117, 104, 255, 0.95);
}


/* =====================================================
   PREMIUM ACCENT
===================================================== */

#lord-razu-radio.radio-page--premium
.lrr__eyebrow,

#lord-razu-radio.radio-page--premium
.lrr__live,

#lord-razu-radio.radio-page--premium
.lrr__panel-head,

#lord-razu-radio.radio-page--premium
.lrr__station > p {
  color: #aaa4ff;
}


/* LIVE DOT */

#lord-razu-radio.radio-page--premium
.lrr__live i {
  background: #7568ff;

  box-shadow:
    0 0 12px rgba(117, 104, 255, 0.95);
}


/* =====================================================
   PLAYER
===================================================== */

#lord-razu-radio.radio-page--premium
.lrr__now {
  border-color:
    rgba(117, 104, 255, 0.22);

  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.38),
    0 0 34px rgba(117, 104, 255, 0.06);
}


/* PLAY BUTTON */

#lord-razu-radio.radio-page--premium
.lrr__play {
  border-color:
    rgba(117, 104, 255, 0.62);

  box-shadow:
    0 0 25px rgba(117, 104, 255, 0.12);
}


/* RANGE ACCENTS */

#lord-razu-radio.radio-page--premium
input[type="range"] {
  accent-color: #7568ff;
}


/* =====================================================
   CARDS
===================================================== */

#lord-razu-radio.radio-page--premium
.lrr__card {
  border-color:
    rgba(117, 104, 255, 0.16);
}


#lord-razu-radio.radio-page--premium
.lrr__card:hover {
  border-color:
    rgba(117, 104, 255, 0.32);
}


/* STATUS CHECKMARKS */

#lord-razu-radio.radio-page--premium
.lrr__status li span {
  color: #aaa4ff;
}


/* =====================================================
   DISCOVER ALBUM
===================================================== */

#lord-razu-radio.radio-page--premium
#lrr-enter-album {
  color: #aaa4ff;
}


/* =====================================================
   FOOTER DETAIL
===================================================== */

#lord-razu-radio.radio-page--premium
.lrr__footer-tagline b {
  color: #7568ff;
}

/* =====================================================
   EXCLUSIVES — TRACK DOWNLOAD BUTTON
===================================================== */

.exclusive-track .track-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.exclusive-track .exclusive-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 7px 12px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;

  background: rgba(255, 255, 255, 0.04);

  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;

  text-transform: uppercase;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.exclusive-track .exclusive-download:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;

  transform: translateY(-1px);
}

.exclusive-track .track-duration {
  min-width: 42px;
  text-align: right;
}

/* =====================================================
   MEMBER HOME — LATEST FROM THE ARCHIVE
===================================================== */

.lr-member-archive {
  width: 100%;
  max-width: 1650px;

  margin: 0 auto;
  padding: 90px 60px;

  color: #fff;
}


/* HEADER */

.lr-member-archive__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  margin-bottom: 42px;
}


.lr-member-archive__eyebrow {
  margin: 0 0 12px;

  color: #7568ff;

  font-family:
    "Space Grotesk",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.22em;

  text-transform: uppercase;
}


.lr-member-archive__header h2 {
  margin: 0;

  font-size:
    clamp(2.2rem, 4vw, 4rem);

  line-height: 0.95;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


.lr-member-archive__intro {
  max-width: 620px;

  margin: 18px 0 0;

  color: #999;

  font-size: 14px;

  line-height: 1.7;
}


/* NAVIGATION */

.lr-member-archive__nav {
  display: flex;
  gap: 10px;
}


.lr-member-archive__nav button {
  display: grid;

  width: 48px;
  height: 48px;

  place-items: center;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  color: #fff;

  cursor: pointer;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    opacity 0.25s ease;
}


.lr-member-archive__nav button:hover {
  border-color:
    rgba(
      117,
      104,
      255,
      0.7
    );

  background:
    rgba(
      117,
      104,
      255,
      0.12
    );
}


.lr-member-archive__nav button:disabled {
  opacity: 0.25;
  cursor: default;
}


/* CAROUSEL */

.lr-member-archive__viewport {
  width: 100%;

  overflow: hidden;
}


.lr-member-archive__track {
  display: flex;

  margin-left: -10px;
  margin-right: -10px;
}


.lr-member-archive__slide {
  flex:
    0 0 33.333%;

  min-width: 0;

  padding: 10px;
}


/* CARD */

.lr-member-archive-card {
  display: flex;
  flex-direction: column;

  height: 100%;

  overflow: hidden;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius: 14px;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  color: #fff !important;

  text-decoration:
    none !important;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


.lr-member-archive-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(
      117,
      104,
      255,
      0.4
    );

  box-shadow:
    0 22px 50px
      rgba(0, 0, 0, 0.4),
    0 0 25px
      rgba(
        117,
        104,
        255,
        0.08
      );
}


/* IMAGE */

.lr-member-archive-card__image {
  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #0b0b0c;
}


.lr-member-archive-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.45s ease;
}


.lr-member-archive-card:hover
.lr-member-archive-card__image img {
  transform: scale(1.035);
}


.lr-member-archive-card__placeholder {
  display: grid;

  width: 100%;
  height: 100%;

  place-items: center;

  color: #7568ff;

  font-size: 30px;
}


/* CONTENT */

.lr-member-archive-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;

  padding: 24px;
}


.lr-member-archive-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 17px;

  color: #777;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.lr-member-archive-card__meta span {
  color: #9188ff;
}


.lr-member-archive-card h3 {
  margin: 0;

  color: #fff;

  font-size: 1.4rem;
  line-height: 1.15;
}


.lr-member-archive-card p {
  margin: 16px 0 25px;

  color: #aaa;

  font-size: 13px;
  line-height: 1.7;
}


.lr-member-archive-card__link {
  display: inline-flex;

  gap: 10px;

  margin-top: auto;

  color: #aaa4ff;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


/* FOOTER */

.lr-member-archive__footer {
  margin-top: 32px;

  text-align: right;
}


.lr-member-archive__footer a {
  color: #999;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.15em;

  text-decoration: none;

  text-transform: uppercase;

  transition: color 0.25s ease;
}


.lr-member-archive__footer a:hover {
  color: #aaa4ff;
}


/* EMPTY / LOADING */

.lr-member-archive__loading,
.lr-member-archive__empty {
  width: 100%;

  padding: 55px 20px;

  color: #777;

  text-align: center;
}


.lr-member-archive__empty {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.lr-member-archive__empty span {
  color: #7568ff;

  font-size: 25px;
}


/* TABLET */

@media (max-width: 1000px) {

  .lr-member-archive__slide {
    flex-basis: 50%;
  }

}


/* MOBILE */

@media (max-width: 700px) {

  .lr-member-archive {
    padding:
      65px 20px;
  }


  .lr-member-archive__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .lr-member-archive__slide {
    flex-basis: 88%;
  }


  .lr-member-archive__nav {
    align-self:
      flex-end;
  }

}

/* =========================================================
   MEMBERS ARCHIVE HERO
========================================================= */

.members-archive-hero {
  position: relative;
  width: 100%;
  min-height: 720px;
  overflow: hidden;

  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.08) 42%,
      rgba(0,0,0,0.48) 70%,
      rgba(0,0,0,0.88) 100%
    ),
    url("PASTE-YOUR-IMAGE-URL-HERE");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  padding: 80px 7vw;
  box-sizing: border-box;
  isolation: isolate;
}

/* darker falloff around the edges */
.members-archive-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,0.22) 68%,
      rgba(0,0,0,0.62) 100%
    );
}

/* additional right-side readability */
.members-archive-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.05) 48%,
      rgba(0,0,0,0.58) 72%,
      rgba(0,0,0,0.92) 100%
    );
}

.members-archive-copy {
  position: relative;
  z-index: 2;

  width: min(560px, 44vw);
  margin-right: 1vw;

  color: #fff;
  text-align: left;
}

.members-archive-eyebrow {
  margin-bottom: 22px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;

  color: #1f6fff;
}

.members-archive-copy h1 {
  margin: 0;

  font-size: clamp(64px, 7vw, 118px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  font-weight: 800;

  color: #f4f4f4;

  text-shadow:
    0 2px 18px rgba(0,0,0,0.45),
    0 0 30px rgba(0,0,0,0.25);
}

.members-archive-subtitle {
  margin: 34px 0 0;
  max-width: 520px;

  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.24em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.78);
}

.members-archive-line {
  display: flex;
  align-items: center;
  gap: 0;

  margin-top: 42px;
}

.members-archive-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;

  background: #2f6fff;

  box-shadow:
    0 0 0 5px rgba(47,111,255,0.18),
    0 0 18px rgba(47,111,255,0.55);

  flex: 0 0 auto;
}

.members-archive-rule {
  width: 180px;
  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(47,111,255,0.9),
    rgba(255,255,255,0.16)
  );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .members-archive-hero {
    min-height: 650px;
    padding: 70px 6vw;

    background-position: 42% center;
  }

  .members-archive-copy {
    width: 46vw;
  }

  .members-archive-copy h1 {
    font-size: clamp(54px, 7vw, 82px);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .members-archive-hero {
    min-height: 760px;

    align-items: flex-end;
    justify-content: flex-start;

    padding: 0 24px 56px;

    background-position: 42% center;
  }

  .members-archive-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.12) 46%,
        rgba(0,0,0,0.76) 74%,
        rgba(0,0,0,0.96) 100%
      );
  }

  .members-archive-hero::before {
    background:
      radial-gradient(
        ellipse at 45% 42%,
        rgba(0,0,0,0) 28%,
        rgba(0,0,0,0.26) 66%,
        rgba(0,0,0,0.70) 100%
      );
  }

  .members-archive-copy {
    width: 100%;
    margin: 0;
  }

  .members-archive-eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: 0.28em;
  }

  .members-archive-copy h1 {
    font-size: clamp(48px, 15vw, 72px);
    line-height: 0.92;
  }

  .members-archive-subtitle {
    margin-top: 22px;
    max-width: 90%;

    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 0.18em;
  }

  .members-archive-line {
    margin-top: 28px;
  }

  .members-archive-rule {
    width: 120px;
  }
}

.members-drop-heading {
  margin-bottom: 20px;
}

.members-drop-heading span {
  display: block;
  margin-bottom: 7px;
  color: #2f70ff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.members-drop-heading h2 {
  margin: 0;
  color: #f5f5f5;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.members-merch-feature {
  position: relative;
  overflow: hidden;
  background: #000;
}

.members-merch-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(90deg,
      rgba(0,0,0,.15) 0%,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,.35) 100%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,.72) 100%
    );
}

/* =========================================================
   MEMBERS ARCHIVE — SQUARESPACE PRODUCT BLOCKS
   ========================================================= */


/* ---------- ENTIRE PRODUCT CARD ---------- */

.sqs-block-product {
  background: #050505 !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  padding: 12px !important;
  box-sizing: border-box !important;

  transition:
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.sqs-block-product:hover {
  border-color: rgba(38,112,255,.65) !important;
  transform: translateY(-3px);

  box-shadow:
    0 14px 35px rgba(0,0,0,.5),
    0 0 22px rgba(38,112,255,.08);
}


/* ---------- PRODUCT IMAGE AREA ---------- */

.sqs-block-product .product-block {
  background: transparent !important;
}

.sqs-block-product .image-container,
.sqs-block-product .product-block-image {
  background: #0b0b0b !important;
  overflow: hidden !important;
}

.sqs-block-product img {
  display: block !important;
  width: 100% !important;

  transition:
    transform .4s ease,
    filter .4s ease;
}

.sqs-block-product:hover img {
  transform: scale(1.025);
}


/* ---------- PRODUCT TITLE ---------- */

.sqs-block-product .product-title,
.sqs-block-product .product-block-title {
  margin-top: 12px !important;
  margin-bottom: 4px !important;

  color: #fff !important;

  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}


/* ---------- PRICE ---------- */

.sqs-block-product .product-price,
.sqs-block-product .product-block-price {
  color: rgba(255,255,255,.58) !important;

  font-size: 11px !important;
  letter-spacing: .06em !important;

  margin-bottom: 10px !important;
}


/* ---------- VARIANT / SIZE SELECT ---------- */

.sqs-block-product select,
.sqs-block-product .variant-select-wrapper select,
.sqs-block-product .product-variant-select {
  width: 100% !important;
  height: 36px !important;

  padding: 0 10px !important;

  background: #020202 !important;
  color: #fff !important;

  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 0 !important;

  font-size: 9px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}


/* Blue focus state */

.sqs-block-product select:focus {
  border-color: #2677ff !important;
  outline: none !important;

  box-shadow:
    0 0 0 1px rgba(38,119,255,.18) !important;
}


/* ---------- QUANTITY ---------- */

.sqs-block-product .product-quantity-input,
.sqs-block-product input[type="number"] {
  height: 36px !important;

  background: #020202 !important;
  color: #fff !important;

  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* ---------- ADD TO CART ---------- */

.sqs-block-product .sqs-add-to-cart-button,
.sqs-block-product .sqs-add-to-cart-button-wrapper a,
.sqs-block-product button[type="submit"] {
  min-height: 36px !important;

  background: #086fbd !important;

  color: #fff !important;

  border: 1px solid #2088d5 !important;
  border-radius: 0 !important;

  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.sqs-block-product .sqs-add-to-cart-button:hover,
.sqs-block-product button[type="submit"]:hover {
  background: #147fd2 !important;
  border-color: #399cff !important;

  box-shadow:
    0 0 20px rgba(38,119,255,.22) !important;
}


/* ---------- ADD A SMALL BLUE ACCENT ---------- */

.sqs-block-product::before {
  content: "";

  display: block;

  width: 38px;
  height: 2px;

  margin-bottom: 10px;

  background: #2677ff;

  box-shadow:
    0 0 10px rgba(38,119,255,.4);
}


/* ---------- CLEAN UP INTERNAL SPACING ---------- */

.sqs-block-product .product-block-content {
  padding-top: 10px !important;
}

.sqs-block-product p {
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 767px) {

  .sqs-block-product {
    padding: 10px !important;
  }

  .sqs-block-product .product-title,
  .sqs-block-product .product-block-title {
    font-size: 11px !important;
  }
}

/* =========================================================
   MEMBERS ARCHIVE — MERCH / EXCLUSIVE DROPS POLISH
   AUGUST 11, 2026
========================================================= */

:root {
  --lr-members-blue: var(--blue, #2f6fff);
  --lr-members-blue-bright: #4383ff;
  --lr-members-panel: #07090d;
  --lr-members-line: rgba(255, 255, 255, 0.12);
  --lr-members-muted: #a8afbd;
}

.members-merch-statement {
  position: relative;
  width: min(100%, 760px);
  margin: 0;
  padding: 28px 0 28px 28px;
  border-left: 2px solid var(--lr-members-blue);
}
.members-merch-statement::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 54px;
  background: #7fa5ff;
  box-shadow: 0 0 18px rgba(47, 111, 255, 0.55);
}
.members-merch-statement p {
  margin: 0 !important;
  max-width: 700px;
  color: rgba(238, 241, 248, 0.82) !important;
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: clamp(13px, 1.05vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-wrap: balance;
}

.members-drop-heading {
  position: relative;
  margin: 0 0 34px !important;
}
.members-drop-heading::after {
  content: "";
  display: block;
  width: 78px;
  height: 2px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--lr-members-blue), rgba(47,111,255,0.16));
  box-shadow: 0 0 16px rgba(47,111,255,0.18);
}
.members-drop-heading span,
.members-drop-heading .merch-kicker,
.members-only-label {
  display: block !important;
  margin: 0 0 10px !important;
  color: var(--lr-members-blue-bright) !important;
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: clamp(10px, .75vw, 12px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
}
.members-drop-heading h2,
.exclusive-drops-title {
  margin: 0 0 30px !important;
  color: #fff !important;
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(44px, 4.1vw, 74px) !important;
  font-weight: 400 !important;
  line-height: .92 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}

.sqs-block-product {
  position: relative;
  padding: 14px !important;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.008)), #050608 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.sqs-block-product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  width: 48px;
  height: 2px;
  z-index: 4;
  background: var(--lr-members-blue);
  box-shadow: 0 0 14px rgba(47,111,255,.34);
}
.sqs-block-product:hover {
  transform: translateY(-4px);
  border-color: rgba(47,111,255,.58) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,.42), 0 0 24px rgba(47,111,255,.07);
}
.sqs-block-product .product-block,
.sqs-block-product .product-block-wrapper,
.sqs-block-product .product-block-content { background: transparent !important; }
.sqs-block-product img {
  display: block !important;
  width: 100% !important;
  transition: transform .4s ease, filter .4s ease;
}
.sqs-block-product:hover img { transform: scale(1.02); filter: brightness(1.03); }
.sqs-block-product .product-title,
.sqs-block-product .product-block-title,
.sqs-block-product h1,
.sqs-block-product h2,
.sqs-block-product h3 {
  color: #fff !important;
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}
.sqs-block-product .product-price,
.sqs-block-product .product-block-price,
.sqs-block-product .product-price-value {
  color: rgba(255,255,255,.64) !important;
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}
.sqs-block-product select,
.sqs-block-product .variant-select-wrapper select,
.sqs-block-product .product-variant-select,
.sqs-block-product .variant-option select {
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 38px 0 11px !important;
  background-color: #030407 !important;
  color: #f5f7fb !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  cursor: pointer;
}
.sqs-block-product select:hover,
.sqs-block-product select:focus {
  border-color: rgba(47,111,255,.72) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(47,111,255,.10) !important;
}
.sqs-block-product input[type=number],
.sqs-block-product .product-quantity-input,
.sqs-block-product .quantity-input {
  min-height: 40px !important;
  background: #030407 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sqs-block-product .sqs-add-to-cart-button,
.sqs-block-product .sqs-add-to-cart-button-wrapper a,
.sqs-block-product .sqs-add-to-cart-button-wrapper button,
.sqs-block-product .add-to-cart,
.sqs-block-product button[type=submit] {
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 8px !important;
  padding: 11px 14px !important;
  background: linear-gradient(180deg, #2f6fff 0%, #1e47ff 100%) !important;
  color: #fff !important;
  border: 1px solid #4b83ff !important;
  border-radius: 0 !important;
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 20px rgba(30,71,255,.16) !important;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.sqs-block-product .sqs-add-to-cart-button:hover,
.sqs-block-product .sqs-add-to-cart-button-wrapper a:hover,
.sqs-block-product .sqs-add-to-cart-button-wrapper button:hover,
.sqs-block-product .add-to-cart:hover,
.sqs-block-product button[type=submit]:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #4383ff 0%, #2f6fff 100%) !important;
  border-color: #74a0ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 9px 25px rgba(47,111,255,.28), 0 0 18px rgba(47,111,255,.12) !important;
}

@media (max-width: 767px) {
  .members-merch-statement { width: 100%; padding: 22px 0 22px 20px; }
  .members-merch-statement p {
    font-size: 12px !important;
    line-height: 1.85 !important;
    letter-spacing: .115em !important;
    text-wrap: pretty;
  }
  .members-drop-heading { margin-bottom: 26px !important; }
  .members-drop-heading h2, .exclusive-drops-title { font-size: clamp(42px, 13vw, 60px) !important; }
  .members-drop-heading span, .members-drop-heading .merch-kicker, .members-only-label {
    font-size: 9px !important;
    letter-spacing: .23em !important;
  }
  .sqs-block-product { padding: 12px !important; }
  .sqs-block-product::before { left: 12px; width: 40px; }
}

/* =====================================================
   MEMBER ARCHIVE — NINJA QUOTE
===================================================== */

.razu-member-quote {
  position: relative;

  width: min(100%, 1180px);

  margin: 80px auto;
  padding: 70px 60px;

  overflow: hidden;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(47, 111, 255, 0.11),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(14, 16, 23, 0.94),
      rgba(5, 5, 7, 0.98)
    );

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* Large background kanji */

.razu-member-quote__mark {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  color: rgba(47, 111, 255, 0.035);

  font-size: clamp(170px, 24vw, 330px);
  font-weight: 700;
  line-height: 1;

  pointer-events: none;
  user-select: none;
}


/* MEMBER ARCHIVE */

.razu-member-quote__eyebrow {
  position: relative;
  z-index: 2;

  margin: 0 0 28px;

  color: #638dff;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.32em;

  text-transform: uppercase;
}


/* Main quote */

.razu-member-quote blockquote {
  position: relative;
  z-index: 2;

  max-width: 900px;

  margin: 0 auto;

  color: #ffffff;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 400;

  line-height: 1.24;
  letter-spacing: -0.015em;
}


/* Second thought */

.razu-member-quote blockquote span {
  display: block;

  margin-top: 12px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.72em;
  font-weight: 300;
}


/* Divider */

.razu-member-quote__divider {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: min(420px, 80%);

  gap: 15px;

  margin: 38px auto;
}

.razu-member-quote__divider span {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(47, 111, 255, 0.5)
    );
}

.razu-member-quote__divider span:last-child {
  background:
    linear-gradient(
      to left,
      transparent,
      rgba(47, 111, 255, 0.5)
    );
}

.razu-member-quote__divider b {
  color: #2f6fff;

  font-size: 10px;

  text-shadow:
    0 0 12px rgba(47, 111, 255, 0.65);
}


/* Personal closing */

.razu-member-quote__closing {
  position: relative;
  z-index: 2;

  margin: 0;

  color: rgba(255, 255, 255, 0.66);

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 14px;
  line-height: 1.8;

  letter-spacing: 0.06em;
}


/* Signature */

.razu-member-quote__signature {
  position: relative;
  z-index: 2;

  margin: 24px 0 0;

  color: #ffffff;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.28em;

  text-transform: uppercase;
}


/* Subtle edge detail */

.razu-member-quote::before,
.razu-member-quote::after {
  content: "";

  position: absolute;

  width: 100px;
  height: 1px;

  background: #2f6fff;

  opacity: 0.45;
}

.razu-member-quote::before {
  top: 0;
  left: 0;
}

.razu-member-quote::after {
  right: 0;
  bottom: 0;
}


/* MOBILE */

@media (max-width: 700px) {

  .razu-member-quote {
    margin: 50px auto;

    padding: 55px 24px;
  }

  .razu-member-quote blockquote {
    font-size: clamp(26px, 8vw, 38px);
  }

  .razu-member-quote blockquote span {
    margin-top: 16px;
  }

  .razu-member-quote__closing br {
    display: none;
  }

}

/* =====================================================
   MEMBER QUOTE — BEBAS NEUE TYPOGRAPHY
===================================================== */

.razu-member-quote,
.razu-member-quote__eyebrow,
.razu-member-quote blockquote,
.razu-member-quote blockquote span,
.razu-member-quote__closing,
.razu-member-quote__signature {
  font-family: "Bebas Neue", sans-serif !important;
}


/* Main quote */

.razu-member-quote blockquote {
  font-size: clamp(34px, 4.2vw, 62px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.025em;
}


/* Secondary line */

.razu-member-quote blockquote span {
  font-size: 0.68em;
  line-height: 1.15;
  letter-spacing: 0.035em;
}


/* MEMBER ARCHIVE eyebrow */

.razu-member-quote__eyebrow {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.24em;
}


/* Personal closing */

.razu-member-quote__closing {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.06em;
}


/* THE LORD RAZU */

.razu-member-quote__signature {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.25em;
}


@media (max-width: 700px) {

  .razu-member-quote blockquote {
    font-size: clamp(32px, 10vw, 46px);
  }

  .razu-member-quote__closing {
    font-size: 17px;
  }

}

/* =====================================================
   MEMBER ARCHIVE CAROUSEL — CINEMATIC OVERRIDE
   Bebas Neue + background-safe styling
===================================================== */

.lr-member-archive {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1650px;

  margin: 0 auto;
  padding: 90px 60px;

  color: #fff;
}


/* =====================================================
   TYPOGRAPHY
===================================================== */

.lr-member-archive,
.lr-member-archive__eyebrow,
.lr-member-archive__header h2,
.lr-member-archive__intro,
.lr-member-archive-card,
.lr-member-archive-card__meta,
.lr-member-archive-card h3,
.lr-member-archive-card p,
.lr-member-archive-card__link,
.lr-member-archive__footer a {
  font-family: "Bebas Neue", sans-serif !important;
}


/* MEMBER JOURNAL */

.lr-member-archive__eyebrow {
  margin: 0 0 10px;

  color: #477cff !important;

  font-size: 13px !important;
  font-weight: 400 !important;

  letter-spacing: 0.22em !important;
  line-height: 1;

  text-transform: uppercase;

  text-shadow:
    0 0 14px rgba(47, 111, 255, 0.35);
}


/* LATEST FROM THE ARCHIVE */

.lr-member-archive__header h2 {
  margin: 0;

  color: #fff !important;

  font-size: clamp(38px, 4.5vw, 66px) !important;
  font-weight: 400 !important;

  line-height: 0.95 !important;
  letter-spacing: 0.045em !important;

  text-transform: uppercase;

  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.9);
}


/* Supporting copy */

.lr-member-archive__intro {
  max-width: 650px;

  margin: 15px 0 0;

  color: rgba(255, 255, 255, 0.66) !important;

  font-size: 16px !important;
  font-weight: 400 !important;

  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.9);
}


/* =====================================================
   HEADER LAYOUT
===================================================== */

.lr-member-archive__header {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  margin-bottom: 38px;
}


/* =====================================================
   CAROUSEL
===================================================== */

.lr-member-archive__viewport {
  position: relative;

  width: 100%;

  overflow: hidden;
}


.lr-member-archive__track {
  display: flex;

  margin: 0 -10px;
}


.lr-member-archive__slide {
  flex: 0 0 34%;

  min-width: 0;

  padding: 10px;
}


/* =====================================================
   ARCHIVE CARD
===================================================== */

.lr-member-archive-card {
  display: flex;
  flex-direction: column;

  min-height: 100%;
  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.16) !important;

  border-radius: 8px !important;

  background:
    linear-gradient(
      150deg,
      rgba(10, 12, 17, 0.94),
      rgba(3, 4, 6, 0.97)
    ) !important;

  color: #fff !important;

  text-decoration: none !important;

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.58),
    0 0 28px rgba(47, 111, 255, 0.06);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


.lr-member-archive-card:hover {
  transform: translateY(-5px);

  border-color:
    rgba(47, 111, 255, 0.58) !important;

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(47, 111, 255, 0.14);
}


/* =====================================================
   CARD IMAGE
===================================================== */

.lr-member-archive-card__image {
  position: relative;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #08090c;
}


.lr-member-archive-card__image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(5, 5, 7, 0.68),
      rgba(5, 5, 7, 0.02) 55%
    );

  pointer-events: none;
}


.lr-member-archive-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.45s ease;
}


.lr-member-archive-card:hover
.lr-member-archive-card__image img {
  transform: scale(1.04);
}


/* =====================================================
   CARD COPY
===================================================== */

.lr-member-archive-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;

  padding: 24px 24px 26px;
}


.lr-member-archive-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 13px;

  color: rgba(255, 255, 255, 0.48) !important;

  font-size: 11px !important;
  font-weight: 400 !important;

  letter-spacing: 0.16em !important;

  text-transform: uppercase;
}


.lr-member-archive-card__meta span {
  color: #477cff !important;
}


/* POST TITLE */

.lr-member-archive-card h3 {
  margin: 0;

  color: #fff !important;

  font-size: clamp(26px, 2vw, 34px) !important;
  font-weight: 400 !important;

  line-height: 1 !important;
  letter-spacing: 0.035em !important;

  text-transform: uppercase;
}


/* Excerpt */

.lr-member-archive-card p {
  margin: 15px 0 24px;

  color: rgba(255, 255, 255, 0.62) !important;

  font-size: 15px !important;
  font-weight: 400 !important;

  line-height: 1.35 !important;
  letter-spacing: 0.025em !important;
}


/* =====================================================
   VIEW UPDATE — REAL BUTTON
===================================================== */

.lr-member-archive-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  width: fit-content;

  gap: 18px;

  margin-top: auto;
  padding: 10px 14px;

  border:
    1px solid rgba(47, 111, 255, 0.55);

  background:
    rgba(47, 111, 255, 0.08);

  color: #fff !important;

  font-size: 12px !important;
  font-weight: 400 !important;

  letter-spacing: 0.16em !important;

  text-transform: uppercase;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.lr-member-archive-card:hover
.lr-member-archive-card__link {
  background: #2f6fff;

  border-color: #2f6fff;

  box-shadow:
    0 0 20px rgba(47, 111, 255, 0.2);
}


/* =====================================================
   CAROUSEL ARROWS
===================================================== */

.lr-member-archive__nav {
  display: flex;

  gap: 10px;
}


.lr-member-archive__nav button {
  display: grid;

  width: 48px !important;
  height: 48px !important;

  place-items: center;

  padding: 0 !important;

  border:
    1px solid rgba(255, 255, 255, 0.25) !important;

  border-radius: 4px !important;

  background:
    rgba(4, 6, 10, 0.82) !important;

  color: #fff !important;

  font-family: "Bebas Neue", sans-serif !important;
  font-size: 21px !important;

  cursor: pointer;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.42);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}


.lr-member-archive__nav button:hover:not(:disabled) {
  background: #2f6fff !important;

  border-color: #2f6fff !important;

  color: #fff !important;
}


.lr-member-archive__nav button:disabled {
  opacity: 0.28 !important;

  cursor: default;
}


/* =====================================================
   VIEW ALL ARCHIVE UPDATES
===================================================== */

.lr-member-archive__footer {
  position: relative;
  z-index: 3;

  display: flex;
  justify-content: flex-end;

  margin-top: 30px;
}


.lr-member-archive__footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 10px 16px;

  border:
    1px solid rgba(255, 255, 255, 0.18);

  background:
    rgba(4, 6, 10, 0.78);

  color: #fff !important;

  font-size: 12px !important;
  font-weight: 400 !important;

  letter-spacing: 0.16em !important;

  text-decoration: none !important;
  text-transform: uppercase;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.4);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}


.lr-member-archive__footer a:hover {
  background: #2f6fff;

  border-color: #2f6fff;

  color: #fff !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .lr-member-archive {
    padding: 65px 20px;
  }


  .lr-member-archive__header {
    align-items: flex-start;
    flex-direction: column;

    gap: 22px;
  }


  .lr-member-archive__header h2 {
    font-size: clamp(38px, 12vw, 54px) !important;
  }


  .lr-member-archive__intro {
    font-size: 15px !important;
  }


  .lr-member-archive__slide {
    flex-basis: 88%;
  }


  .lr-member-archive__nav {
    align-self: flex-end;
  }


  .lr-member-archive__footer {
    justify-content: flex-start;
  }


  .lr-member-archive-card h3 {
    font-size: 28px !important;
  }

}

/* =========================================================
   THE LORD RAZU — MEMBER ARCHIVE THANK YOU
   Black / Shadow / Electric Blue / Bebas Neue
========================================================= */

.razu-archive-thanks {
  position: relative;
  isolation: isolate;

  width: min(100%, 1100px);
  margin: 100px auto 70px;
  padding: 70px 75px;

  overflow: hidden;

  color: #fff;

  background:
    radial-gradient(
      circle at 82% 30%,
      rgba(35, 92, 255, 0.10),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(10, 13, 21, 0.97),
      rgba(2, 3, 6, 0.98)
    );

  border:
    1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* Blue branded corner detail */

.razu-archive-thanks::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 120px;
  height: 2px;

  background: #2864ff;

  box-shadow:
    0 0 18px rgba(40, 100, 255, 0.6);
}


/* Shadow / ninja atmosphere */

.razu-archive-thanks::after {
  content: "忍";

  position: absolute;
  z-index: -1;

  right: 30px;
  bottom: -65px;

  color: rgba(40, 100, 255, 0.035);

  font-family: sans-serif;
  font-size: clamp(180px, 24vw, 330px);
  font-weight: 700;
  line-height: 1;

  pointer-events: none;
}


/* =========================================================
   A MESSAGE FROM RAZU
========================================================= */

.razu-archive-thanks__eyebrow {
  margin: 0 0 14px !important;

  color: #3d72ff !important;

  font-family: "Bebas Neue", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;

  line-height: 1 !important;
  letter-spacing: 0.28em !important;

  text-transform: uppercase;

  text-shadow:
    0 0 15px rgba(40, 100, 255, 0.4);
}


/* =========================================================
   THANK YOU FOR BEING HERE
========================================================= */

.razu-archive-thanks h2 {
  position: relative;

  margin: 0 !important;

  color: #fff !important;

  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(58px, 7vw, 96px) !important;
  font-weight: 400 !important;

  line-height: 0.84 !important;
  letter-spacing: 0.025em !important;

  text-transform: uppercase;

  text-shadow:
    0 5px 25px rgba(0, 0, 0, 0.75);
}


/* =========================================================
   BLUE TRANSMISSION LINE
========================================================= */

.razu-archive-thanks__line {
  position: relative;

  width: 105px;
  height: 2px;

  margin: 34px 0 38px;

  background:
    linear-gradient(
      90deg,
      #2864ff,
      rgba(40, 100, 255, 0)
    );

  box-shadow:
    0 0 16px rgba(40, 100, 255, 0.45);
}


.razu-archive-thanks__line::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 7px;
  height: 7px;

  transform: translateY(-50%);

  border-radius: 50%;

  background: #3472ff;

  box-shadow:
    0 0 12px #2864ff;
}


/* =========================================================
   PERSONAL MESSAGE
========================================================= */

.razu-archive-thanks__copy {
  position: relative;
  z-index: 2;

  max-width: 800px;
}


.razu-archive-thanks__copy p {
  margin: 0 0 23px !important;

  color:
    rgba(255, 255, 255, 0.67) !important;

  font-family: "Bebas Neue", sans-serif !important;

  font-size: 19px !important;
  font-weight: 400 !important;

  line-height: 1.45 !important;
  letter-spacing: 0.055em !important;
}


/* Make final personal thought stand apart */

.razu-archive-thanks__copy
.razu-archive-thanks__personal {
  margin-top: 34px !important;
  margin-bottom: 0 !important;

  padding-left: 20px;

  border-left: 1px solid #2864ff;

  color:
    rgba(255, 255, 255, 0.92) !important;

  font-size: 22px !important;
  line-height: 1.4 !important;
}


/* =========================================================
   SIGNOFF
========================================================= */

.razu-archive-thanks__signoff {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  gap: 8px;

  margin-top: 45px;
  padding-top: 28px;

  border-top:
    1px solid rgba(255, 255, 255, 0.09);

  font-family: "Bebas Neue", sans-serif !important;
}


.razu-archive-thanks__signoff span {
  color: #fff;

  font-size: 27px;
  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.razu-archive-thanks__signoff strong {
  color: #3d72ff;

  font-size: 13px;
  font-weight: 400;

  letter-spacing: 0.27em;

  text-transform: uppercase;
}


/* =========================================================
   VIDEO INTRO — FROM THE ARCHIVE
========================================================= */

.razu-archive-video-intro {
  position: relative;
  isolation: isolate;

  width: min(100%, 1100px);

  margin: 0 auto 25px;
  padding: 20px 24px 19px 28px;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-left:
    2px solid #2864ff;

  background:
    linear-gradient(
      90deg,
      rgba(8, 11, 18, 0.96),
      rgba(3, 4, 7, 0.88)
    );

  box-shadow:
    0 16px 45px rgba(0, 0, 0, 0.42);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* Tiny blue accent */

.razu-archive-video-intro::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 85px;
  height: 1px;

  background: #2864ff;

  box-shadow:
    0 0 12px rgba(40, 100, 255, 0.5);
}


/* FROM THE ARCHIVE */

.razu-archive-video-intro span {
  display: block;

  margin: 0 0 7px;

  color: #3d72ff !important;

  font-family: "Bebas Neue", sans-serif !important;

  font-size: 12px !important;
  font-weight: 400 !important;

  line-height: 1 !important;
  letter-spacing: 0.28em !important;

  text-transform: uppercase;
}


/* Video description */

.razu-archive-video-intro p {
  margin: 0 !important;

  color:
    rgba(255, 255, 255, 0.72) !important;

  font-family: "Bebas Neue", sans-serif !important;

  font-size: 18px !important;
  font-weight: 400 !important;

  line-height: 1.25 !important;
  letter-spacing: 0.06em !important;

  text-transform: uppercase;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .razu-archive-thanks {
    margin: 65px auto 50px;

    padding:
      52px 26px
      48px 30px;
  }


  .razu-archive-thanks::after {
    right: -25px;
    bottom: -30px;

    font-size: 190px;
  }


  .razu-archive-thanks h2 {
    font-size:
      clamp(
        52px,
        16vw,
        72px
      ) !important;
  }


  .razu-archive-thanks__copy p {
    font-size: 18px !important;
  }


  .razu-archive-thanks__copy
  .razu-archive-thanks__personal {
    padding-left: 16px;

    font-size: 20px !important;
  }


  .razu-archive-thanks__signoff span {
    font-size: 24px;
  }


  .razu-archive-video-intro {
    padding:
      18px 18px
      17px 21px;
  }


  .razu-archive-video-intro p {
    font-size: 17px !important;
  }

}


/* =========================================================
   MEMBER SITE HOME — PAGE WRAPPER / NAVIGATION HOOK
   AUGUST 11, 2026
   ---------------------------------------------------------
   Use on /member-site-home:
   <main class="member-page member-home" data-member-page>
========================================================= */

.member-page {
  position: relative;
  width: 100%;
  min-height: 100%;
}

.member-page[data-member-page] {
  isolation: isolate;
}

.member-home {
  width: 100%;
  max-width: none;
  margin: 0;
  background: transparent;
  color: #f2f2f2;
}

/* Keep Squarespace section content from inheriting album-only widths */
.member-home .page-section,
.member-home .content-wrapper,
.member-home .sqs-layout {
  max-width: none;
}

/* Preserve standard section inner widths while allowing full-width heroes */
.member-home .content-wrapper {
  width: 100%;
}

/* Utility hook for member-only sections */
.member-page .member-only,
.member-home .member-only {
  position: relative;
}

/* Premium album pages continue using:
   <main class="album-page album-page--premium member-page" data-member-page>
*/
.album-page.album-page--premium.member-page {
  position: relative;
}

/* Mobile */
@media (max-width: 767px) {
  .member-home {
    overflow-x: clip;
  }
}


/* =========================================================
   MEMBER NAV — CLEAN MOBILE CENTERING
   ---------------------------------------------------------
   Horizontal placement is owned by the shared footer injection.
   The movable [data-member-nav-slot] block controls only the
   vertical location on each member page.
========================================================= */

@media (max-width: 768px) {

  /* The movable slot should not impose its own horizontal offset. */
  .razu-member-nav-slot,
  [data-member-nav-slot] {
    position: relative;
    width: 100%;
    min-height: 1px;
    margin: 0;
    padding: 0;
  }

  /* When the footer detaches the nav to body, center it to the viewport. */
  body > .razu-member-nav.is-detached-mobile {
    position: absolute !important;
    left: 50vw !important;
    right: auto !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: max-content !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    transform: translateX(-50%) !important;

    z-index: 10000 !important;
  }

  body > .razu-member-nav.is-detached-mobile
  .razu-member-nav__mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: max-content !important;
    min-width: 0 !important;

    margin: 0 !important;
  }

  /* Dropdown opens from the same visual center as the button. */
  body > .razu-member-nav.is-detached-mobile
  .razu-member-nav__inner {
    left: 50% !important;
    right: auto !important;

    width: min(310px, calc(100vw - 36px)) !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;
  }
}

/* =========================================================
   MEMBERS ARCHIVE — EARLY RECORDINGS
   ========================================================= */

.razu-early-recordings {
  position: relative;
  width: 100%;
  background: #000;
  color: #fff;
  overflow: hidden;
  padding: 130px 24px 120px;
}

.razu-early-recordings::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(92%, 1180px);
  height: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(
      90deg,
      rgba(33, 92, 255, 0),
      rgba(33, 92, 255, .85),
      rgba(255, 255, 255, .15),
      rgba(255, 255, 255, 0)
    );
}

.razu-early-recordings-inner {
  position: relative;
  width: min(100%, 1100px);
  margin: 0 auto;
}


/* HEADER
   ========================================================= */

.razu-early-recordings-header {
  max-width: 660px;
  margin-bottom: 58px;
}

.razu-archive-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: #2f68ff;
}

.razu-early-recordings-header h2 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(48px, 7vw, 82px);
  line-height: .9;
  letter-spacing: .015em;
  font-weight: 400;
  color: #fff;
}

.razu-early-recordings-header p {
  max-width: 560px;
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .045em;
  color: rgba(255, 255, 255, .57);
}


/* RECORDING ROWS
   ========================================================= */

.razu-recordings-list {
  border-top: 1px solid rgba(255, 255, 255, .11);
}

.razu-recording-row {
  position: relative;
  display: grid;
  grid-template-columns:
    125px
    minmax(0, 1fr)
    130px
    54px;
  gap: 26px;
  align-items: center;

  min-height: 115px;

  border-bottom: 1px solid rgba(255, 255, 255, .1);

  transition:
    background-color .25s ease,
    padding-left .25s ease;
}

.razu-recording-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  transform: translateY(-50%);
  background: #2867ff;
  transition: height .25s ease;
}

.razu-recording-row:hover {
  background: rgba(255, 255, 255, .025);
  padding-left: 14px;
}

.razu-recording-row:hover::before,
.razu-recording-row.is-playing::before {
  height: 55%;
}

.razu-recording-row.is-playing {
  background: rgba(37, 92, 255, .055);
}


/* ARCHIVE NUMBER */

.razu-recording-number {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #2867ff;
}


/* TITLE */

.razu-recording-main h3 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(28px, 3.1vw, 42px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .025em;
  color: #fff;
}

.razu-recording-main p {
  margin: 7px 0 0;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}


/* YEAR + LENGTH */

.razu-recording-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;

  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .42);
}


/* PLAY BUTTON */

.razu-recording-play {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  margin: 0;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;

  background: transparent;
  color: #fff;

  cursor: pointer;

  transition:
    border-color .2s ease,
    background-color .2s ease,
    transform .2s ease;
}

.razu-recording-play:hover {
  border-color: #2867ff;
  background: #2867ff;
  transform: scale(1.05);
}

.razu-recording-row.is-playing .razu-recording-play {
  border-color: #2867ff;
  background: #2867ff;
}

.razu-play-icon {
  display: inline-block;
  margin-left: 2px;
  font-size: 11px;
  line-height: 1;
}


/* NOW PLAYING
   ========================================================= */

.razu-recordings-now-playing {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 14px;
  align-items: center;

  margin-top: 28px;
  padding: 20px 0;
}

.razu-now-playing-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .17em;
  color: #2867ff;
}

.razu-now-playing-title {
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

.razu-recording-progress {
  grid-column: 1 / -1;

  width: 100%;
  height: 1px;

  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.razu-recording-progress-fill {
  width: 0%;
  height: 100%;
  background: #2867ff;
  transition: width .12s linear;
}


/* FOOTER / CTA
   ========================================================= */

.razu-recordings-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;

  margin-top: 75px;
  padding-top: 28px;

  border-top: 1px solid rgba(255, 255, 255, .08);
}

.razu-recordings-footer p {
  margin: 0;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}

.razu-recordings-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
  letter-spacing: .055em;

  color: #fff !important;
  text-decoration: none !important;

  transition: color .2s ease;
}

.razu-recordings-link span {
  color: #2867ff;
  transition: transform .2s ease;
}

.razu-recordings-link:hover {
  color: #2867ff !important;
}

.razu-recordings-link:hover span {
  transform: translateX(5px);
}


/* MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .razu-early-recordings {
    padding:
      95px
      20px
      90px;
  }

  .razu-early-recordings-header {
    margin-bottom: 42px;
  }

  .razu-early-recordings-header h2 {
    font-size: 56px;
  }

  .razu-early-recordings-header p {
    font-size: 12px;
    line-height: 1.7;
  }

  .razu-recording-row {
    grid-template-columns:
      minmax(0, 1fr)
      46px;

    grid-template-areas:
      "number play"
      "main play"
      "meta play";

    gap: 6px 18px;

    min-height: 132px;
    padding: 20px 0;
  }

  .razu-recording-row:hover {
    padding-left: 0;
  }

  .razu-recording-number {
    grid-area: number;
  }

  .razu-recording-main {
    grid-area: main;
  }

  .razu-recording-meta {
    grid-area: meta;
    justify-content: flex-start;
    gap: 18px;
    margin-top: 7px;
  }

  .razu-recording-play {
    grid-area: play;
    align-self: center;
  }

  .razu-recording-main h3 {
    font-size: 33px;
  }

  .razu-recordings-now-playing {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .razu-recording-progress {
    grid-column: 1;
    margin-top: 8px;
  }

  .razu-recordings-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;

    margin-top: 58px;
  }

  .razu-recordings-link {
    font-size: 19px;
  }

}


/* REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .razu-recording-row,
  .razu-recording-row::before,
  .razu-recording-play,
  .razu-recordings-link,
  .razu-recordings-link span,
  .razu-recording-progress-fill {
    transition: none;
  }

}

/* =========================================================
   EXCLUSIVES — GALLERY HEADING
   ========================================================= */

.exclusive-gallery-heading {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding: 0 0 34px 18px;
  color: #fff;
}

/* BLUE ACCENT LINE */
.exclusive-gallery-heading::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 2px;
  height: 100%;
  max-height: 92px;
  background: #2f6fff;
  box-shadow: 0 0 14px rgba(47, 111, 255, 0.3);
}


/* MEMBERS ARCHIVE LABEL */
.exclusive-gallery-kicker {
  display: block;
  margin: 0 0 8px;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  color: #2f6fff;
}


/* EXCLUSIVE GALLERY */
.exclusive-gallery-heading h2 {
  margin: 0;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(46px, 6vw, 72px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.015em;
  text-transform: uppercase;

  color: #fff;
}

/* Gives EXCLUSIVE a subtle distinction */
.exclusive-gallery-heading h2 span {
  color: #fff;
}


/* SUPPORTING COPY */
.exclusive-gallery-heading p {
  max-width: 570px;
  margin: 17px 0 0;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.065em;

  color: rgba(255, 255, 255, 0.52);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .exclusive-gallery-heading {
    padding-left: 15px;
    padding-bottom: 26px;
  }

  .exclusive-gallery-heading::before {
    height: 82px;
  }

  .exclusive-gallery-kicker {
    font-size: 8px;
    letter-spacing: 0.18em;
  }
  
  /* VIEW EXCLUSIVE GALLERY LINK */
.exclusive-gallery-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 18px;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #fff !important;
  text-decoration: none !important;

  transition: color 0.2s ease;
}

.exclusive-gallery-link > span {
  color: #2f6fff;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.exclusive-gallery-link:hover {
  color: #2f6fff !important;
}

.exclusive-gallery-link:hover > span {
  transform: translateX(5px);
}

@media (max-width: 767px) {
  .exclusive-gallery-link {
    margin-top: 16px;
    font-size: 9px;
  }
}

  .exclusive-gallery-heading h2 {
    font-size: clamp(42px, 14vw, 58px);
    line-height: 0.92;
  }

  .exclusive-gallery-heading p {
    max-width: 92%;
    margin-top: 14px;

    font-size: 10px;
    line-height: 1.65;
  }

}

/* =========================================================
   THE LORD RAZU — SITE FOOTER RESTYLE
   PRE-LAUNCH VISUAL PASS
   ========================================================= */

/* MAIN FOOTER */
footer,
.Footer,
[data-section-theme] footer {
  position: relative;
  background: #020203 !important;
  color: #fff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* SUBTLE BLUE TOP ACCENT */
footer::before,
.Footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(92%, 1180px);
  height: 1px;
  transform: translateX(-50%);

  background: linear-gradient(
    90deg,
    rgba(47, 111, 255, 0),
    rgba(47, 111, 255, 0.75),
    rgba(255, 255, 255, 0.12),
    rgba(47, 111, 255, 0)
  );

  pointer-events: none;
}


/* FOOTER SECTION SPACING */
footer .content-wrapper,
.Footer .content-wrapper {
  padding-top: 72px !important;
  padding-bottom: 48px !important;
}


/* =========================================================
   HEADINGS
   ========================================================= */

footer h1,
footer h2,
footer h3,
footer h4,
.Footer h1,
.Footer h2,
.Footer h3,
.Footer h4 {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-weight: 400 !important;
  line-height: 0.95 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}


/* MAIN FOOTER TITLES */
footer h2,
.Footer h2 {
  font-size: clamp(34px, 4vw, 52px) !important;
}


/* SMALL FOOTER HEADINGS */
footer h3,
footer h4,
.Footer h3,
.Footer h4 {
  font-size: 18px !important;
  letter-spacing: 0.055em !important;
}


/* =========================================================
   BODY / UTILITY TEXT
   ========================================================= */

footer p,
footer li,
.Footer p,
.Footer li {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  letter-spacing: 0.055em !important;

  color: rgba(255, 255, 255, 0.48) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

footer a,
.Footer a {
  color: rgba(255, 255, 255, 0.72) !important;
  text-decoration: none !important;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

footer a:hover,
.Footer a:hover {
  color: #2f6fff !important;
}


/* NAVIGATION-STYLE LINKS */
footer nav a,
footer .sqs-block-navigation a,
.Footer nav a {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;

  color: rgba(255, 255, 255, 0.65) !important;
}


/* =========================================================
   SOCIAL ICONS
   ========================================================= */

footer .sqs-svg-icon--wrapper,
.Footer .sqs-svg-icon--wrapper {
  opacity: 0.65;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

footer .sqs-svg-icon--wrapper:hover,
.Footer .sqs-svg-icon--wrapper:hover {
  opacity: 1;
  transform: translateY(-2px);
}

footer .sqs-svg-icon--wrapper svg,
.Footer .sqs-svg-icon--wrapper svg {
  fill: #fff !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

footer .sqs-button-element--primary,
footer .sqs-button-element--secondary,
footer .sqs-button-element--tertiary,
.Footer .sqs-button-element--primary,
.Footer .sqs-button-element--secondary {
  border: 1px solid rgba(47, 111, 255, 0.42) !important;
  border-radius: 3px !important;

  background: rgba(47, 111, 255, 0.06) !important;
  color: #fff !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;

  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;

  box-shadow:
    0 0 20px rgba(47, 111, 255, 0.06) !important;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease !important;
}

footer .sqs-button-element--primary:hover,
footer .sqs-button-element--secondary:hover,
footer .sqs-button-element--tertiary:hover,
.Footer .sqs-button-element--primary:hover,
.Footer .sqs-button-element--secondary:hover {
  background: #2f6fff !important;
  border-color: #2f6fff !important;
  color: #fff !important;
}


/* =========================================================
   NEWSLETTER / FORMS
   ========================================================= */

footer input[type="email"],
footer input[type="text"],
.Footer input[type="email"],
.Footer input[type="text"] {
  background: rgba(255, 255, 255, 0.025) !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0 !important;

  color: #fff !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;

  box-shadow: none !important;
}

footer input::placeholder,
.Footer input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}


/* =========================================================
   DIVIDERS
   ========================================================= */

footer hr,
.Footer hr {
  height: 1px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}


/* =========================================================
   COPYRIGHT / SMALL PRINT
   ========================================================= */

footer small,
footer .copyright,
.Footer small,
.Footer .copyright {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 8px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;

  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;

  color: rgba(255, 255, 255, 0.28) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  footer .content-wrapper,
  .Footer .content-wrapper {
    padding-top: 54px !important;
    padding-bottom: 38px !important;
  }

  footer h2,
  .Footer h2 {
    font-size: 38px !important;
  }

  footer p,
  footer li,
  .Footer p,
  .Footer li {
    font-size: 10px !important;
    line-height: 1.7 !important;
  }

  footer nav a,
  footer .sqs-block-navigation a,
  .Footer nav a {
    font-size: 9px !important;
  }

}

/* =========================================================
   EXCLUSIVE MEDIA ARCHIVE
   ========================================================= */


/* INTRO */
.exclusive-media-intro {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 60px;
  padding: 0 24px;
  box-sizing: border-box;
}

.exclusive-media-intro__kicker {
  display: block;
  margin-bottom: 10px;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  color: #2f6fff;
}

.exclusive-media-intro__title {
  margin: 0;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  font-size: 78px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;

  color: #ffffff;
}

.exclusive-media-intro__title span {
  color: #2f6fff;
}

.exclusive-media-intro__copy {
  max-width: 620px;
  margin: 20px 0 0;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.5);
}

.exclusive-media-intro__line {
  width: 100%;
  height: 1px;
  margin-top: 38px;

  background: rgba(255, 255, 255, 0.1);
}


/* =========================================================
   MEDIA WRAPPER
   ========================================================= */

.exclusive-media-archive {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto;
  padding: 0 24px 100px;

  box-sizing: border-box;
}


/* =========================================================
   INDIVIDUAL CAROUSELS
   ========================================================= */

.exclusive-media-archive .media-carousel {
  margin-bottom: 90px;
}

.exclusive-media-archive .media-carousel:last-child {
  margin-bottom: 0;
}


/* =========================================================
   HEADERS
   ========================================================= */

.exclusive-media-archive .gallery-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  margin-bottom: 24px;
}

.exclusive-media-archive .gallery-kicker {
  display: block;

  margin-bottom: 7px;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #2f6fff;
}

.exclusive-media-archive .gallery-header h2 {
  margin: 0 !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-size: 52px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;

  color: #ffffff !important;
}


/* =========================================================
   ARROWS
   ========================================================= */

.exclusive-media-archive .gallery-nav {
  display: flex;
  gap: 8px;
}

.exclusive-media-archive .media-prev,
.exclusive-media-archive .media-next {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;

  background: transparent;
  color: #ffffff;

  font-size: 15px;

  cursor: pointer;
}

.exclusive-media-archive .media-prev:hover,
.exclusive-media-archive .media-next:hover {
  background: #2f6fff;
  border-color: #2f6fff;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

.exclusive-media-archive .media-swiper {
  width: 100%;
  overflow: hidden;
}


/* =========================================================
   MEDIA CARDS
   ========================================================= */

.exclusive-media-archive .swiper-slide {
  position: relative;
  overflow: hidden;

  background: #08080a;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.exclusive-media-archive .swiper-slide a {
  display: block;
  width: 100%;

  text-decoration: none;
}

.exclusive-media-archive .swiper-slide img {
  display: block;

  width: 100%;
  height: 220px;

  object-fit: cover;

  transition: transform 0.3s ease;
}

.exclusive-media-archive .swiper-slide:hover img {
  transform: scale(1.03);
}


/* BLUE LINE ON HOVER */
.exclusive-media-archive .swiper-slide:after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 2px;

  background: #2f6fff;

  transition: width 0.3s ease;
}

.exclusive-media-archive .swiper-slide:hover:after {
  width: 100%;
}


/* =========================================================
   DIVIDERS
   ========================================================= */

.exclusive-media-archive .media-carousel + .media-carousel {
  padding-top: 60px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

  .exclusive-media-intro {
    margin-bottom: 45px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .exclusive-media-intro__title {
    font-size: 54px;
  }

  .exclusive-media-intro__copy {
    font-size: 10px;
    line-height: 1.7;
  }

  .exclusive-media-archive {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 70px;
  }

  .exclusive-media-archive .media-carousel {
    margin-bottom: 65px;
  }

  .exclusive-media-archive .gallery-header {
    align-items: center;
  }

  .exclusive-media-archive .gallery-header h2 {
    font-size: 36px !important;
  }

  .exclusive-media-archive .media-prev,
  .exclusive-media-archive .media-next {
    width: 36px;
    height: 36px;
  }

  .exclusive-media-archive .swiper-slide img {
    height: 240px;
  }

  .exclusive-media-archive .media-carousel + .media-carousel {
    padding-top: 45px;
  }

}


/* =========================================================
   FINAL MEMBER EXPERIENCE PASS — AUG 12, 2026
   Track actions, Members drawer, member nav typography,
   and Stream mini-radio play controls.
========================================================= */

/* ---------------------------------------------------------
   ACTIVE MEMBER TRACKS
   Give NOW PLAYING its own column so it cannot overlap the
   compact Download → time action group.
--------------------------------------------------------- */

.album-page .track[data-audio]:has(> .track-actions) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 14px;
}

.album-page .track[data-audio]:has(> .track-actions) > span:first-child {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  padding-right: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album-page .track[data-audio]:has(> .track-actions) > .track-actions {
  position: relative;
  z-index: 2;
  grid-column: 3;
  grid-row: 1;
  min-width: max-content;
  white-space: nowrap;
}

.album-page .track[data-audio].is-playing:has(> .track-actions)::before {
  position: static;
  top: auto;
  right: auto;
  grid-column: 2;
  grid-row: 1;
  transform: none;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .album-page .track[data-audio]:has(> .track-actions) {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
  }

  .album-page .track[data-audio]:has(> .track-actions) > .track-actions {
    grid-column: 2;
  }

  .album-page .track[data-audio].is-playing:has(> .track-actions)::before {
    display: none;
  }

  .exclusive-track .track-actions {
    gap: 8px;
  }

  .exclusive-track .exclusive-download {
    padding: 6px 9px;
  }

  .exclusive-track .track-duration {
    min-width: 36px;
  }
}


/* ---------------------------------------------------------
   MEMBERS DRAWER + THREE-TAB EDGE STACK
--------------------------------------------------------- */

#members-tab {
  position: fixed;
  top: calc(50% - 118px);
  left: 0;
  z-index: 2147483647;
  display: grid;
  width: 36px;
  height: 112px;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(47, 111, 255, 0.62);
  border-left: 0;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(180deg, rgba(43, 47, 57, 0.98), rgba(24, 28, 36, 0.99));
  box-shadow:
    0 0 0 1px rgba(47, 111, 255, 0.06) inset,
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(47, 111, 255, 0.18);
  transform: translateY(-50%);
  cursor: pointer;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

#members-tab:hover,
#members-tab:focus-visible {
  background: linear-gradient(180deg, rgba(18, 28, 54, 0.98), rgba(7, 11, 22, 0.98));
  border-color: #2f6fff;
  box-shadow:
    0 0 0 1px rgba(47, 111, 255, 0.12) inset,
    0 12px 32px rgba(0, 0, 0, 0.44),
    0 0 24px rgba(47, 111, 255, 0.24);
  transform: translateY(-50%) translateX(4px);
}

#members-tab.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-40px);
}

#members-tab .members-text {
  color: #6f94ff;
  font: 700 9px/1 "Space Grotesk", Arial, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
}

#members-panel {
  position: fixed;
  inset: 0 auto 0 min(-400px, -90vw);
  z-index: 2147483647;
  display: flex;
  width: min(400px, 90vw);
  height: 100dvh;
  flex-direction: column;
  overflow-y: auto;
  color: #f4f6fb;
  background:
    radial-gradient(circle at 0 0, rgba(47, 111, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #080b12, #030407);
  border-right: 1px solid rgba(47, 111, 255, 0.34);
  box-shadow: 18px 0 55px rgba(0, 0, 0, 0.62);
  font-family: "Space Grotesk", Arial, sans-serif;
  transition: left 0.35s cubic-bezier(0.77, 0, 0.18, 1);
}

#members-panel.is-open {
  left: 0;
}

.members-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 30px 28px 22px;
}

.members-drawer__header p {
  margin: 0 0 8px;
  color: #7698ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.members-drawer__header h2 {
  margin: 0;
  font: 400 42px/0.95 "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#members-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #a9afbc;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

#members-close:hover,
#members-close:focus-visible {
  border-color: #2f6fff;
  color: #fff;
  background: rgba(47, 111, 255, 0.12);
}

.members-drawer__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 22px 22px;
  overflow: hidden;
  border: 1px solid rgba(47, 111, 255, 0.34);
  border-radius: 14px;
  background: #05070b;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.members-drawer__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(3, 4, 7, 0.56) 100%);
}

.members-drawer__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.members-drawer__copy {
  margin: 0 22px 24px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(9, 12, 20, 0.82);
}

.members-drawer__copy > span {
  display: block;
  margin-bottom: 9px;
  color: #7698ff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.members-drawer__copy h3 {
  margin: 0;
  font: 400 30px/1 "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.members-drawer__copy p {
  margin: 16px 0 20px;
  color: #b8becb;
  font-size: 13px;
  line-height: 1.75;
}

.members-drawer__copy a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid rgba(47, 111, 255, 0.5);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #397cff, #245de8);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
  text-decoration: none;
}

#members-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.54);
  opacity: 0;
  transition: 0.25s ease;
}

#members-overlay.is-open {
  visibility: visible;
  opacity: 1;
}

/* Deliberately separated edge tabs: Members → Journal → Live. */
#members-tab {
  top: calc(50% - 118px) !important;
}

#journal-tab {
  top: 50% !important;
}

#lr-live-tab {
  top: calc(50% + 62px) !important;
}

@media (max-width: 768px) {
  #members-tab {
    top: calc(50% - 110px) !important;
    width: 34px;
    height: 104px;
    border-radius: 0 8px 8px 0;
  }

  #journal-tab {
    top: 50% !important;
  }

  #lr-live-tab {
    top: calc(50% + 58px) !important;
  }

  #members-panel {
    width: min(88vw, 380px);
    left: max(-380px, -88vw);
  }

  #members-panel.is-open {
    left: 0;
  }

  .members-drawer__header {
    padding: 26px 22px 18px;
  }
}


/* ---------------------------------------------------------
   MEMBER NAV TYPOGRAPHY
   Prevent Squarespace button styles from changing Albums
   and Live while links retain the intended site typeface.
--------------------------------------------------------- */

html body .razu-member-nav .razu-member-nav__link,
html body .razu-member-nav button.razu-member-nav__toggle {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 1 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  font-synthesis: none;
}

html body .razu-member-nav .razu-member-nav__dropdown a {
  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
}

html body .razu-member-nav .razu-member-nav__arrow,
html body .razu-member-nav .razu-member-nav__external {
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}


/* ---------------------------------------------------------
   STREAM MINI RADIO — RESTORE BOTH PLAY/PAUSE ICONS
   The script clears text glyphs, so both controls use one
   centered CSS icon source at every viewport size.
--------------------------------------------------------- */

html body #lrz-stream-music .lrz-stream-radio-art-toggle {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}

html body #lrz-stream-music .lrz-stream-radio-art-toggle:hover {
  transform: translate(-50%, -50%) scale(1.05) !important;
}

html body #lrz-stream-music .lrz-stream-radio-art-toggle span {
  display: none !important;
}

html body #lrz-stream-music .lrz-stream-radio-art-toggle::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 2;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-left: 15px solid #fff !important;
  background: none !important;
  transform: translate(-38%, -50%) !important;
  pointer-events: none;
}

html body #lrz-stream-music.is-radio-playing .lrz-stream-radio-art-toggle::before {
  width: 15px !important;
  height: 19px !important;
  border: 0 !important;
  background: linear-gradient(90deg, #fff 0 4px, transparent 4px 11px, #fff 11px 15px) !important;
  transform: translate(-50%, -50%) !important;
}

html body #lrz-stream-music .lrz-stream-radio-toggle__icon {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html body #lrz-stream-music .lrz-stream-radio-toggle__icon::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 10px solid #fff !important;
  background: none !important;
  transform: translate(-38%, -50%) !important;
  pointer-events: none;
}

html body #lrz-stream-music
  .lrz-stream-platform--radio-player.is-playing
  .lrz-stream-radio-toggle__icon::before {
  width: 12px !important;
  height: 15px !important;
  border: 0 !important;
  background: linear-gradient(90deg, #fff 0 4px, transparent 4px 8px, #fff 8px 12px) !important;
  transform: translate(-50%, -50%) !important;
}

/* =========================================================
   EXCLUSIVES — HERO
   ========================================================= */

.exclusives-hero {
  position: relative;
  width: 100%;
  height: 760px;
  min-height: 700px;

  background: #000;
  overflow: hidden;

  display: flex;
  align-items: center;
}


/* BACKGROUND IMAGE */

.exclusives-hero__image {
  position: absolute;

  top: 0;
  right: 0;

  width: 66%;
  height: 100%;

  background-image: url("https://images.squarespace-cdn.com/content/599451bbf14aa10e7f8f9a91/de6444c4-cfb1-4c24-91f4-a4cd74ce1710/ChatGPT+Image+Aug+11%2C+2026%2C+11_06_59+AM.png?content-type=image%2Fpng");

  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
}


/* DARK GRADIENT OVER IMAGE */

.exclusives-hero__shade {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: linear-gradient(
    90deg,
    #000000 0%,
    #000000 30%,
    rgba(0, 0, 0, 0.88) 43%,
    rgba(0, 0, 0, 0.35) 72%,
    rgba(0, 0, 0, 0.15) 100%
  );
}


/* CONTENT */

.exclusives-hero__content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1180px;

  margin: 0 auto;
  padding: 0 40px;

  box-sizing: border-box;
}


/* MEMBERS ARCHIVE */

.exclusives-hero__kicker {
  display: block;

  margin-bottom: 14px;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: #2f6fff;
}


/* HERO TITLE */

.exclusives-hero__title {
  max-width: 650px;

  margin: 0;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  font-size: 92px;
  font-weight: 400;

  line-height: 0.84;
  letter-spacing: 0.01em;

  text-transform: uppercase;

  color: #ffffff;
}

.exclusives-hero__title span {
  color: #ffffff;
}


/* DESCRIPTION */

.exclusives-hero__copy {
  max-width: 530px;

  margin: 28px 0 0;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;

  line-height: 1.8;
  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.58);
}


/* META */

.exclusives-hero__meta {
  display: flex;
  align-items: center;

  margin-top: 35px;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.38);
}

.exclusives-hero__meta-line {
  display: block;

  width: 35px;
  height: 1px;

  margin: 0 12px;

  background: #2f6fff;
}


/* BOTTOM SCROLL LABEL */

.exclusives-hero__scroll {
  position: absolute;

  z-index: 2;

  left: 50%;
  bottom: 28px;

  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.35);
}

.exclusives-hero__scroll-line {
  display: block;

  width: 1px;
  height: 28px;

  margin-top: 10px;

  background: #2f6fff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

  .exclusives-hero {
    height: 720px;
    min-height: 720px;

    align-items: flex-end;
  }


  .exclusives-hero__image {
    width: 100%;
    height: 100%;

    background-position: center top;
  }


  .exclusives-hero__shade {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.18) 35%,
      rgba(0, 0, 0, 0.78) 64%,
      #000000 92%
    );
  }


  .exclusives-hero__content {
    padding: 0 22px 105px;
  }


  .exclusives-hero__kicker {
    font-size: 8px;
    margin-bottom: 10px;
  }


  .exclusives-hero__title {
    max-width: 100%;

    font-size: 58px;
    line-height: 0.88;
  }


  .exclusives-hero__copy {
    max-width: 95%;

    margin-top: 20px;

    font-size: 10px;
    line-height: 1.7;
  }


  .exclusives-hero__meta {
    margin-top: 25px;

    font-size: 7px;
  }


  .exclusives-hero__scroll {
    display: none;
  }

}

/* =========================================================
   EXCLUSIVES — MORE COMING SOON
   ========================================================= */

.exclusives-coming-soon {
  position: relative;
  width: 100%;
  max-width: 1180px;

  margin: 140px auto 120px;
  padding: 80px 40px;

  box-sizing: border-box;

  text-align: center;

  background: #050507;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  overflow: hidden;
}


/* BLUE ACCENT */

.exclusives-coming-soon:before {
  content: "";

  position: absolute;
  top: 0;
  left: 50%;

  width: 80px;
  height: 2px;

  margin-left: -40px;

  background: #2f6fff;
}


/* SMALL ARCHIVE LABEL */

.exclusives-coming-soon__kicker {
  display: block;

  margin-bottom: 18px;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;

  line-height: 1;
  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: #2f6fff;
}


/* MAIN STATEMENT */

.exclusives-coming-soon h2 {
  margin: 0;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: 96px !important;
  font-weight: 400 !important;

  line-height: 0.82 !important;
  letter-spacing: 0.015em !important;

  text-transform: uppercase;

  color: #ffffff !important;
}


/* SOON */

.exclusives-coming-soon h2 span {
  color: #2f6fff;
}


/* DESCRIPTION */

.exclusives-coming-soon p {
  width: 100%;
  max-width: 590px;

  margin: 30px auto 0;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 11px;
  font-weight: 400;

  line-height: 1.8;
  letter-spacing: 0.055em;

  color: rgba(255, 255, 255, 0.48);
}


/* STAY TUNED */

.exclusives-coming-soon strong {
  display: inline-block;

  margin-top: 28px;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 10px;
  font-weight: 700;

  line-height: 1;
  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: #ffffff;
}


/* SMALL LINE UNDER STAY TUNED */

.exclusives-coming-soon strong:after {
  content: "";

  display: block;

  width: 32px;
  height: 1px;

  margin: 13px auto 0;

  background: #2f6fff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

  .exclusives-coming-soon {
    margin: 90px auto 80px;

    padding: 65px 22px;
  }

  .exclusives-coming-soon__kicker {
    margin-bottom: 15px;

    font-size: 8px;
  }

  .exclusives-coming-soon h2 {
    font-size: 62px !important;
    line-height: 0.86 !important;
  }

  .exclusives-coming-soon p {
    max-width: 92%;

    margin-top: 24px;

    font-size: 10px;
    line-height: 1.7;
  }

  .exclusives-coming-soon strong {
    margin-top: 24px;

    font-size: 9px;
  }

}

/* =====================================================
   PRE-LAUNCH ARCHIVE CTA
===================================================== */

.prelaunch-archive-cta {
  position: relative;

  width: 100%;
  max-width: 760px;

  margin: 70px auto 80px;
  padding: 42px 36px;

  text-align: center;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.008)
    );

  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  color: #fff;
}


/* BLUE ACCENT */

.prelaunch-archive-cta::before {
  content: "";

  position: absolute;
  top: 0;
  left: 50%;

  width: 80px;
  height: 2px;

  transform: translateX(-50%);

  background: #2f6fff;

  box-shadow: 0 0 18px rgba(47, 111, 255, 0.35);
}


/* EYEBROW */

.prelaunch-archive-kicker {
  display: block;

  margin: 0 0 14px;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.24em;
  text-transform: uppercase;

  color: #2f6fff;
}


/* TITLE */

.prelaunch-archive-cta h2 {
  margin: 0;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;

  font-size: clamp(52px, 5vw, 78px);
  font-weight: 400;
  line-height: 0.9;

  letter-spacing: 0.035em;
  text-transform: uppercase;

  color: #fff;
}


/* DESCRIPTION */

.prelaunch-archive-cta p {
  max-width: 540px;

  margin: 18px auto 0;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.035em;

  color: rgba(255, 255, 255, 0.62);
}


/* ACTIONS */

.prelaunch-archive-actions {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 20px;

  margin-top: 30px;
}


/* PRIMARY BUTTON */

.prelaunch-archive-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 240px;

  padding: 16px 26px;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #fff !important;

  text-decoration: none !important;

  background: rgba(47, 111, 255, 0.08);

  border: 1px solid rgba(47, 111, 255, 0.65);

  box-shadow:
    0 0 0 rgba(47, 111, 255, 0),
    inset 0 0 24px rgba(47, 111, 255, 0.04);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.prelaunch-archive-button:hover {
  background: #2f6fff;

  border-color: #2f6fff;

  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(47, 111, 255, 0.25);

  transform: translateY(-2px);
}


/* SECONDARY JOURNAL LINK */

.prelaunch-journal-link {
  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.58) !important;

  text-decoration: none !important;

  transition:
    color 0.2s ease,
    letter-spacing 0.2s ease;
}

.prelaunch-journal-link:hover {
  color: #2f6fff !important;

  letter-spacing: 0.19em;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

  .prelaunch-archive-cta {
    margin: 48px auto 60px;

    padding: 36px 20px;
  }

  .prelaunch-archive-kicker {
    font-size: 9px;

    letter-spacing: 0.2em;
  }

  .prelaunch-archive-cta h2 {
    font-size: clamp(46px, 15vw, 64px);
  }

  .prelaunch-archive-cta p {
    font-size: 12px;
    line-height: 1.65;
  }

  .prelaunch-archive-button {
    width: 100%;
    max-width: 280px;

    padding: 15px 20px;

    font-size: 10px;
  }

  .prelaunch-journal-link {
    font-size: 9px;
  }
}

/* =====================================================
   THE LORD RAZU — SHINOBI PASS PAYWALL
   Exact Squarespace selectors
===================================================== */


/* =====================================================
   OUTER SHINOBI PASS CARD
===================================================== */

.product-block[data-pricing-plan-id="49961f61-a76f-43c1-a307-c42ecccf4b6c"] {
  position: relative !important;

  width: min(100%, 470px) !important;
  margin: 0 auto !important;
  padding: 38px 34px 34px !important;

  background:
    linear-gradient(
      160deg,
      rgba(10, 12, 18, 0.97),
      rgba(4, 5, 8, 0.99)
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-top-color: rgba(47, 111, 255, 0.72) !important;

  border-radius: 18px !important;

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 34px rgba(47, 111, 255, 0.07) !important;

  overflow: hidden !important;
}


/* BLUE TOP ACCENT */

.product-block[data-pricing-plan-id="49961f61-a76f-43c1-a307-c42ecccf4b6c"]::before {
  content: "" !important;

  position: absolute !important;
  top: 0 !important;
  left: 50% !important;

  width: 88px !important;
  height: 2px !important;

  transform: translateX(-50%) !important;

  background: #2f6fff !important;
  box-shadow: 0 0 18px rgba(47, 111, 255, 0.42) !important;
}


/* =====================================================
   CARD INNER WRAPPER
===================================================== */

.product-block[data-pricing-plan-id="49961f61-a76f-43c1-a307-c42ecccf4b6c"] .productDetails {
  width: 100% !important;
}


/* =====================================================
   SHINOBI PASS TITLE
===================================================== */

.product-title.pricing-plan-title {
  height: auto !important;

  margin: 0 0 20px !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(42px, 5vw, 60px) !important;
  font-weight: 400 !important;
  line-height: 0.92 !important;

  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  color: #ffffff !important;

  text-align: center !important;
}


/* =====================================================
   PRICE AREA
===================================================== */

.product-price.pricing-plan-product-price {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;

  margin: 0 0 24px !important;
}


/* PRICE + BILLING PANELS */

.pricing-plan-price-amount,
.pricing-plan-price-billing-period {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 86px !important;
  padding: 18px 20px !important;

  background:
    linear-gradient(
      145deg,
      rgba(13, 16, 25, 0.98),
      rgba(7, 8, 12, 0.98)
    ) !important;

  border: 1px solid rgba(47, 111, 255, 0.26) !important;
  border-radius: 15px !important;

  box-shadow:
    inset 0 1px 0 rgba(47, 111, 255, 0.82),
    0 14px 28px rgba(0, 0, 0, 0.24) !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-weight: 400 !important;
  line-height: 1 !important;

  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;

  color: #2f6fff !important;

  text-align: center !important;
}

.pricing-plan-price-amount {
  font-size: clamp(30px, 4vw, 42px) !important;
}

.pricing-plan-price-billing-period {
  font-size: clamp(24px, 3vw, 34px) !important;
}


/* =====================================================
   SIGN UP BUTTON
===================================================== */

button.join-button[onclick*="UserAccountApi.joinPricingPlan"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: min(100%, 250px) !important;
  min-width: 0 !important;

  margin: 4px auto 26px !important;
  padding: 17px 28px !important;

  background: rgba(47, 111, 255, 0.08) !important;
  color: #ffffff !important;

  border: 1px solid #2f6fff !important;
  border-radius: 0 !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;

  box-shadow:
    inset 0 0 22px rgba(47, 111, 255, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.3) !important;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}

button.join-button[onclick*="UserAccountApi.joinPricingPlan"]:hover {
  background: #2f6fff !important;
  border-color: #2f6fff !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(47, 111, 255, 0.24) !important;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.pricing-plan-description {
  max-width: 100% !important;

  margin: 0 !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;

  letter-spacing: 0.025em !important;

  color: rgba(255, 255, 255, 0.64) !important;

  text-align: left !important;
}


/* SEE MORE / SEE LESS */

.see-more-text,
.see-less-text {
  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 9px !important;
  font-weight: 700 !important;

  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;

  color: #2f6fff !important;
  text-decoration: none !important;
}


/* =====================================================
   BENEFITS DIVIDER
===================================================== */

.pricing-plan-benefits-divider {
  width: 100% !important;

  height: 1px !important;

  margin: 28px 0 !important;

  border: 0 !important;

  background: rgba(255, 255, 255, 0.09) !important;
}


/* =====================================================
   BENEFITS
   Squarespace benefit text already contains ✓
===================================================== */

.pricing-plan-benefit-description {
  width: 100% !important;

  margin: 0 0 14px !important;
  padding: 0 !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;

  letter-spacing: 0.025em !important;

  color: rgba(255, 255, 255, 0.78) !important;

  text-align: left !important;
}


/* =====================================================
   LOG IN BUTTON
===================================================== */

button.sqs-editable-button.sqs-button-element--primary.sign-in-button {
  display: block !important;

  width: fit-content !important;
  min-width: 0 !important;

  margin: 42px auto 0 !important;
  padding: 10px 4px !important;

  background: transparent !important;
  color: rgba(255, 255, 255, 0.68) !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(47, 111, 255, 0.55) !important;
  border-radius: 0 !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;

  transition:
    color 0.2s ease,
    border-color 0.2s ease !important;
}

button.sqs-editable-button.sqs-button-element--primary.sign-in-button:hover {
  background: transparent !important;

  color: #2f6fff !important;

  border-bottom-color: #2f6fff !important;

  transform: none !important;

  box-shadow: none !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

  .product-block[data-pricing-plan-id="49961f61-a76f-43c1-a307-c42ecccf4b6c"] {
    width: calc(100% - 24px) !important;

    padding: 32px 22px 28px !important;
  }

  .product-title.pricing-plan-title {
    font-size: clamp(38px, 12vw, 52px) !important;
  }

  .pricing-plan-price-amount,
  .pricing-plan-price-billing-period {
    min-height: 76px !important;
  }

  button.join-button[onclick*="UserAccountApi.joinPricingPlan"] {
    width: 100% !important;
    max-width: 280px !important;
  }

  .pricing-plan-description,
  .pricing-plan-benefit-description {
    font-size: 11px !important;
  }
}


/* =====================================================
   PAYWALL HEADER
===================================================== */

#headline {
  margin: 0 0 16px !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(64px, 8vw, 110px) !important;
  font-weight: 400 !important;
  line-height: 0.88 !important;

  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;

  color: #ffffff !important;

  text-align: center !important;
}


/* =====================================================
   PAYWALL DESCRIPTION
===================================================== */

#description {
  max-width: 620px !important;

  margin: 0 auto 44px !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  text-align: center !important;
}

#description p {
  margin: 0 !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;

  letter-spacing: 0.045em !important;

  color: rgba(255, 255, 255, 0.72) !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

  #headline {
    font-size: clamp(54px, 16vw, 78px) !important;
  }

  #description {
    margin-bottom: 34px !important;
    padding: 0 18px !important;
  }

  #description p {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;

    letter-spacing: 0.035em !important;
  }
}

/* =====================================================
   THE LORD RAZU — NEWSLETTER POPUP
   Corrected dark right-side panel
===================================================== */


/* =====================================================
   RIGHT-SIDE COPY PANEL
===================================================== */

.sqs-slice-group.group-copy.copy-layer-background {
  background: #050505 !important;
  color: #ffffff !important;
}


/* Keep nested popup content transparent so the
   dark panel remains visible */

.sqs-slice-group.group-copy.copy-layer-background
.sqs-slice,

.sqs-slice-group.group-copy.copy-layer-background
.sqs-slice-heading-content,

.sqs-slice-group.group-copy.copy-layer-background
.sqs-slice-body-content,

.sqs-slice-group.group-copy.copy-layer-background
.sqs-slice-newsletter-content {
  background: transparent !important;
}


/* =====================================================
   MAIN HEADING
===================================================== */

#sqs-slash-page-header {
  display: block !important;

  margin: 0 0 16px !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: clamp(56px, 5vw, 82px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;

  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;

  color: #ffffff !important;

  text-align: left !important;
}


/* =====================================================
   BODY COPY
===================================================== */

.sqs-slice-body-content {
  color: #ffffff !important;
}

.sqs-slice-body-content p {
  margin: 0 0 28px !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;

  letter-spacing: 0.02em !important;

  color: rgba(255, 255, 255, 0.68) !important;

  text-align: left !important;
}


/* =====================================================
   NEWSLETTER FORM
===================================================== */

.sqs-slice-newsletter-content .input-container {
  width: 100% !important;
}

.sqs-slice-newsletter-content .newsletter-form {
  width: 100% !important;
}


/* =====================================================
   EMAIL INPUT
===================================================== */

.sqs-slice-newsletter-content
.newsletter-form-field-element {
  width: 100% !important;

  min-height: 52px !important;

  padding: 15px 16px !important;

  background: rgba(255, 255, 255, 0.035) !important;

  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 13px !important;

  outline: none !important;

  box-shadow: none !important;
}


.sqs-slice-newsletter-content
.newsletter-form-field-element::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
}


.sqs-slice-newsletter-content
.newsletter-form-field-element:focus {
  border-color: #2f6fff !important;

  background: rgba(47, 111, 255, 0.05) !important;

  box-shadow:
    0 0 0 1px rgba(47, 111, 255, 0.12),
    0 0 20px rgba(47, 111, 255, 0.08) !important;
}


/* =====================================================
   SUBSCRIBE BUTTON
===================================================== */

.sqs-slice-newsletter-content
.newsletter-form-button {
  width: 100% !important;

  min-height: 52px !important;

  margin-top: 12px !important;

  background: rgba(47, 111, 255, 0.08) !important;

  color: #ffffff !important;

  border: 1px solid #2f6fff !important;
  border-radius: 0 !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 10px !important;
  font-weight: 700 !important;

  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;

  cursor: pointer !important;

  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}


.sqs-slice-newsletter-content
.newsletter-form-button:hover {
  background: #2f6fff !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 0 24px rgba(47, 111, 255, 0.22) !important;
}


.sqs-slice-newsletter-content
.sqs-submit-form-label {
  color: #ffffff !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 10px !important;
  font-weight: 700 !important;

  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}


/* =====================================================
   PRIVACY TEXT
===================================================== */

.sqs-slice-newsletter-content
.form-disclaimer-text,

.sqs-slice-newsletter-content
.form-disclaimer-text p {
  margin-top: 14px !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 10px !important;
  line-height: 1.5 !important;

  letter-spacing: 0.04em !important;

  color: rgba(255, 255, 255, 0.38) !important;

  text-align: left !important;
}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.sqs-slide-layer-close {
  color: #ffffff !important;

  opacity: 0.65 !important;
}

.sqs-slide-layer-close:hover {
  color: #2f6fff !important;

  opacity: 1 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

  #sqs-slash-page-header {
    font-size: clamp(48px, 14vw, 68px) !important;
  }

  .sqs-slice-body-content p {
    font-size: 13px !important;
  }

}

/* =====================================================
   NEWSLETTER POPUP — MOBILE CINEMATIC OVERLAY
   Portrait stays visible with a dark readability scrim.
===================================================== */

@media (max-width: 767px) {

  /* Mobile popup canvas */
  .sqs-slice-group.group-copy.copy-layer-background {
    position: relative !important;
    overflow: hidden !important;

    width: 100% !important;

    padding-top: 0 !important;

    background: #050505 !important;
  }


  /* Forced portrait background */
  .sqs-slice-group.group-copy.copy-layer-background::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    background-image:
      url("https://images.squarespace-cdn.com/content/v1/599451bbf14aa10e7f8f9a91/b7249476-0a72-471e-9965-4a05e2c46b96/124868557_10220624456733699_3832283778410780849_n.jpg?format=1000w") !important;

    background-size: cover !important;
    background-position: center 18% !important;
    background-repeat: no-repeat !important;

    z-index: 0 !important;
    pointer-events: none !important;
  }


  /* Dark cinematic overlay for text readability */
  .sqs-slice-group.group-copy.copy-layer-background::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.38) 0%,
        rgba(0, 0, 0, 0.48) 28%,
        rgba(0, 0, 0, 0.62) 58%,
        rgba(0, 0, 0, 0.86) 82%,
        rgba(0, 0, 0, 0.96) 100%
      ) !important;

    z-index: 1 !important;
    pointer-events: none !important;
  }


  /* Keep all actual popup content above image + overlay */
  .sqs-slice-group.group-copy.copy-layer-background
  .sqs-slice,
  .sqs-slice-group.group-copy.copy-layer-background
  .sqs-slice-heading-content,
  .sqs-slice-group.group-copy.copy-layer-background
  .sqs-slice-body-content,
  .sqs-slice-group.group-copy.copy-layer-background
  .sqs-slice-newsletter-content {
    position: relative !important;
    z-index: 2 !important;

    background: transparent !important;
  }


  /* Remove Squarespace's native grey scrim */
  .sqs-slide-layer-content .scrim,
  .sqs-slide-gallery-content .scrim,
  .sqs-slice-group.group-copy .scrim {
    background: transparent !important;
    opacity: 0 !important;
  }


  /* Main mobile heading */
  #sqs-slash-page-header {
    margin: 0 0 14px !important;

    color: #ffffff !important;

    text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.72) !important;
  }


  /* Body text stays readable over portrait */
  .sqs-slice-body-content p {
    color: rgba(255, 255, 255, 0.90) !important;

    text-shadow:
      0 2px 10px rgba(0, 0, 0, 0.72) !important;
  }


  /* Give content breathing room */
  .sqs-slice-heading-content,
  .sqs-slice-body-content,
  .sqs-slice-newsletter-content {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .sqs-slice-heading-content {
    padding-top: 22px !important;
  }

  .sqs-slice-newsletter-content {
    padding-bottom: 24px !important;
  }


  /* Email field remains clearly legible */
  .sqs-slice-newsletter-content
  .newsletter-form-field-element {
    background: rgba(255, 255, 255, 0.96) !important;

    color: #111111 !important;

    border-color: rgba(255, 255, 255, 0.90) !important;
  }

  .sqs-slice-newsletter-content
  .newsletter-form-field-element::placeholder {
    color: rgba(17, 17, 17, 0.56) !important;
  }


  /* Subscribe button sits as a strong dark CTA */
  .sqs-slice-newsletter-content
  .newsletter-form-button {
    background: rgba(5, 5, 5, 0.92) !important;

    color: #ffffff !important;

    border: 1px solid rgba(47, 111, 255, 0.75) !important;

    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.42),
      0 0 18px rgba(47, 111, 255, 0.12) !important;
  }

  .sqs-slice-newsletter-content
  .newsletter-form-button:hover {
    background: #2f6fff !important;
  }


  /* Privacy text */
  .sqs-slice-newsletter-content
  .form-disclaimer-text,
  .sqs-slice-newsletter-content
  .form-disclaimer-text p {
    color: rgba(255, 255, 255, 0.52) !important;

    text-shadow:
      0 1px 8px rgba(0, 0, 0, 0.65) !important;
  }


  /* Keep popup scrollable instead of clipping */
  .sqs-slide-layer-content,
  .sqs-slide-gallery-content {
    max-height: calc(100vh - 20px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* =====================================================
   MEMBER ACCOUNT / SIGN OUT
   AUGUST 12, 2026
   -----------------------------------------------------
   /account is Squarespace's native customer account route.
   The sign-out action remains native; this only styles it.
===================================================== */

/* Account link inside the custom member navigation */
.razu-member-nav__link--account {
  color: #86a3ff !important;
}

.razu-member-nav__link--account:hover,
.razu-member-nav__link--account:focus-visible {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Squarespace native Sign out control */
button[data-test="sign-out"] {
  appearance: none !important;

  min-width: 0 !important;
  padding: 10px 4px !important;

  background: transparent !important;
  color: rgba(255, 255, 255, 0.68) !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(47, 111, 255, 0.55) !important;
  border-radius: 0 !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
  cursor: pointer !important;

  transition:
    color 0.2s ease,
    border-color 0.2s ease !important;
}

button[data-test="sign-out"]:hover,
button[data-test="sign-out"]:focus-visible {
  background: transparent !important;

  color: #2f6fff !important;
  border-bottom-color: #2f6fff !important;

  box-shadow: none !important;
  transform: none !important;
}

/* Mobile separation inside the member menu */
@media (max-width: 768px) {
  html body .razu-member-nav__link--account {
    margin-top: 4px !important;
    padding-top: 14px !important;

    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

    color: #8caeff !important;
  }
}

/* =========================================================
   THE LORD RAZU — SITE DIRECTORY
   ========================================================= */

.razu-sitemap {
  --rs-bg: #050505;
  --rs-card: #0a0a0a;
  --rs-card-hover: #0d0d0d;

  --rs-white: #f4f4f1;
  --rs-muted: #8d8d89;

  /* THE LORD RAZU BLUE */
  --rs-accent: #4da3ff;

  --rs-border: rgba(255, 255, 255, 0.10);
  --rs-border-hover: rgba(77, 163, 255, 0.65);

  position: relative;
  width: 100%;

  padding: 110px 30px 130px;

  background: var(--rs-bg);
  color: var(--rs-white);
}


.razu-sitemap-inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.razu-sitemap-header {
  max-width: 850px;
  margin: 0 0 70px;
}


.razu-sitemap-kicker {
  display: block;
  margin-bottom: 13px;

  font-family: "Bebas Neue", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.22em;

  color: var(--rs-accent);
}


.razu-sitemap-header h1 {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(64px, 8vw, 118px);
  font-weight: 400;

  line-height: 0.86;
  letter-spacing: 0.01em;

  color: var(--rs-white);
}


.razu-sitemap-header p {
  max-width: 650px;
  margin: 28px 0 0;

  font-size: 16px;
  line-height: 1.65;

  color: var(--rs-muted);
}


/* =========================================================
   GRID
   ========================================================= */

.razu-sitemap-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;
}


/* =========================================================
   CARDS
   ========================================================= */

.razu-sitemap-card {
  position: relative;

  display: grid;

  grid-template-columns: 65px 1fr;

  min-height: 380px;

  padding: 38px 40px 36px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018),
      transparent 40%
    ),
    var(--rs-card);

  border: 1px solid var(--rs-border);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}


.razu-sitemap-card:hover {
  transform: translateY(-3px);

  background: var(--rs-card-hover);

  border-color: var(--rs-border-hover);
}


/* BLUE ACCENT LINE */

.razu-sitemap-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 3px;
  height: 0;

  background: var(--rs-accent);

  transition: height 0.35s ease;
}


.razu-sitemap-card:hover::before {
  height: 100%;
}


/* =========================================================
   NUMBER
   ========================================================= */

.razu-sitemap-number {
  padding-top: 3px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 18px;

  letter-spacing: 0.1em;

  color: var(--rs-accent);

  opacity: 0.7;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.razu-sitemap-card-content {
  display: flex;

  flex-direction: column;
}


.razu-sitemap-label {
  display: block;

  margin-bottom: 7px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 13px;

  letter-spacing: 0.2em;

  color: var(--rs-muted);
}


.razu-sitemap-card h2 {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(44px, 4vw, 65px);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: 0.01em;

  color: var(--rs-white);
}


.razu-sitemap-card-content > p {
  max-width: 470px;

  margin: 19px 0 35px;

  font-size: 14px;

  line-height: 1.65;

  color: var(--rs-muted);
}


/* =========================================================
   LINKS
   ========================================================= */

.razu-sitemap-links {
  margin-top: auto;
}


.razu-sitemap-links a {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 13px 0;

  border-top: 1px solid var(--rs-border);

  text-decoration: none !important;

  font-family: "Bebas Neue", sans-serif;

  font-size: 17px;

  line-height: 1;

  letter-spacing: 0.075em;

  color: var(--rs-white) !important;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}


.razu-sitemap-links a:last-child {
  border-bottom: 1px solid var(--rs-border);
}


.razu-sitemap-links a:hover {
  padding-left: 6px;

  color: var(--rs-accent) !important;
}


.razu-sitemap-arrow {
  flex-shrink: 0;

  font-size: 20px;

  color: var(--rs-accent);

  transition: transform 0.25s ease;
}


.razu-sitemap-links a:hover .razu-sitemap-arrow {
  transform: translateX(4px);
}


/* =========================================================
   CONNECTED SITE RELATIONSHIP LABEL
   ========================================================= */

.razu-sitemap-link-note {
  display: block;

  margin-top: 6px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 10px;
  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.14em;

  color: var(--rs-muted);

  transition: color 0.25s ease;
}


.razu-sitemap-links a:hover .razu-sitemap-link-note {
  color: var(--rs-muted);
}


/* =========================================================
   MEMBERS FEATURE CARD
   ========================================================= */

.razu-sitemap-card-featured {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(77, 163, 255, 0.08),
      transparent 42%
    ),
    var(--rs-card);
}


.razu-sitemap-card-featured::after {
  content: "MEMBERS";

  position: absolute;

  right: -10px;
  top: -15px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 110px;

  line-height: 1;

  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.015);

  pointer-events: none;
}


/* =========================================================
   CONNECTED SITES FEATURE
   ========================================================= */

.razu-sitemap-card-connected {
  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(77, 163, 255, 0.05),
      transparent 45%
    ),
    var(--rs-card);
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1000px) {

  .razu-sitemap {
    padding: 90px 24px 105px;
  }

  .razu-sitemap-card {
    grid-template-columns: 50px 1fr;

    padding: 34px 30px 32px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .razu-sitemap {
    padding: 70px 18px 85px;
  }


  .razu-sitemap-header {
    margin-bottom: 45px;
  }


  .razu-sitemap-header h1 {
    font-size: clamp(56px, 17vw, 82px);

    line-height: 0.88;
  }


  .razu-sitemap-header p {
    margin-top: 20px;

    font-size: 14px;
  }


  .razu-sitemap-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .razu-sitemap-card {
    display: block;

    min-height: auto;

    padding: 30px 24px 27px;
  }


  .razu-sitemap-number {
    margin-bottom: 23px;

    font-size: 15px;
  }


  .razu-sitemap-card h2 {
    font-size: 48px;
  }


  .razu-sitemap-card-content > p {
    margin: 15px 0 28px;
  }


  .razu-sitemap-links a {
    padding: 13px 0;

    font-size: 16px;
  }


  .razu-sitemap-link-note {
    margin-top: 5px;

    font-size: 9px;
  }


  .razu-sitemap-card-featured::after {
    font-size: 70px;
  }

}

/* =========================================================
   THE LORD RAZU — SITE DIRECTORY
   ========================================================= */

.razu-sitemap {
  --rs-card: rgba(10, 10, 10, 0.72);
  --rs-card-hover: rgba(13, 13, 13, 0.86);

  --rs-white: #f4f4f1;
  --rs-muted: #8d8d89;

  /* THE LORD RAZU BLUE */
  --rs-accent: #4da3ff;

  --rs-border: rgba(255, 255, 255, 0.10);
  --rs-border-hover: rgba(77, 163, 255, 0.65);

  position: relative;
  width: 100%;

  padding: 110px 30px 130px;

  /* TRANSPARENT — USE SQUARESPACE PAGE BACKGROUND */
  background: transparent;

  color: var(--rs-white);
}

/* =========================================================
   HEADER
   ========================================================= */

.razu-sitemap-header {
  max-width: 850px;
  margin: 0 0 70px;
}


.razu-sitemap-kicker {
  display: block;
  margin-bottom: 13px;

  font-family: "Bebas Neue", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.22em;

  color: var(--rs-accent);
}


.razu-sitemap-header h1 {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(64px, 8vw, 118px);
  font-weight: 400;

  line-height: 0.86;
  letter-spacing: 0.01em;

  color: var(--rs-white);
}


.razu-sitemap-header p {
  max-width: 650px;
  margin: 28px 0 0;

  font-size: 16px;
  line-height: 1.65;

  color: var(--rs-muted);
}


/* =========================================================
   GRID
   ========================================================= */

.razu-sitemap-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;
}


/* =========================================================
   CARDS
   ========================================================= */

.razu-sitemap-card {
  position: relative;

  display: grid;
  grid-template-columns: 65px 1fr;

  min-height: 380px;

  padding: 38px 40px 36px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018),
      transparent 40%
    ),
    var(--rs-card);

  border: 1px solid var(--rs-border);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}


.razu-sitemap-card:hover {
  transform: translateY(-3px);

  background: var(--rs-card-hover);

  border-color: var(--rs-border-hover);
}


/* BLUE ACCENT LINE */

.razu-sitemap-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 3px;
  height: 0;

  background: var(--rs-accent);

  transition: height 0.35s ease;

  z-index: 3;
}


.razu-sitemap-card:hover::before {
  height: 100%;
}


/* =========================================================
   LARGE BACKGROUND CARD WORDS
   ========================================================= */

.razu-sitemap-card::after {
  position: absolute;

  right: -12px;
  top: -18px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 110px;
  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.04em;

  white-space: nowrap;

  color: rgba(255, 255, 255, 0.018);

  pointer-events: none;

  z-index: 0;
}


/* INDIVIDUAL BACKGROUND WORDS */

.razu-sitemap-card-music::after {
  content: "MUSIC";
}


.razu-sitemap-card-journal::after {
  content: "ARCHIVE";
}


.razu-sitemap-card-dojo::after {
  content: "DOJO";
}


.razu-sitemap-card-featured::after {
  content: "MEMBERS";
}


.razu-sitemap-card-about::after {
  content: "RAZU";
}


.razu-sitemap-card-shop::after {
  content: "SHOP";
}


.razu-sitemap-card-connected::after {
  content: "WORLD";
}


/* Keep actual content above background words */

.razu-sitemap-number,
.razu-sitemap-card-content {
  position: relative;

  z-index: 2;
}


/* =========================================================
   NUMBER
   ========================================================= */

.razu-sitemap-number {
  padding-top: 3px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 18px;

  letter-spacing: 0.1em;

  color: var(--rs-accent);

  opacity: 0.7;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.razu-sitemap-card-content {
  display: flex;

  flex-direction: column;
}


.razu-sitemap-label {
  display: block;

  margin-bottom: 7px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 13px;

  letter-spacing: 0.2em;

  color: var(--rs-muted);
}


.razu-sitemap-card h2 {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(44px, 4vw, 65px);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: 0.01em;

  color: var(--rs-white);
}


.razu-sitemap-card-content > p {
  max-width: 470px;

  margin: 19px 0 35px;

  font-size: 14px;

  line-height: 1.65;

  color: var(--rs-muted);
}


/* =========================================================
   LINKS
   ========================================================= */

.razu-sitemap-links {
  margin-top: auto;
}


.razu-sitemap-links a {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 13px 0;

  border-top: 1px solid var(--rs-border);

  text-decoration: none !important;

  font-family: "Bebas Neue", sans-serif;

  font-size: 17px;

  line-height: 1;

  letter-spacing: 0.075em;

  color: var(--rs-white) !important;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}


.razu-sitemap-links a:last-child {
  border-bottom: 1px solid var(--rs-border);
}


.razu-sitemap-links a:hover {
  padding-left: 6px;

  color: var(--rs-accent) !important;
}


.razu-sitemap-arrow {
  flex-shrink: 0;

  font-size: 20px;

  color: var(--rs-accent);

  transition: transform 0.25s ease;
}


.razu-sitemap-links a:hover .razu-sitemap-arrow {
  transform: translateX(4px);
}


/* =========================================================
   CONNECTED SITE RELATIONSHIP LABELS
   ========================================================= */

.razu-sitemap-link-note {
  display: block;

  margin-top: 6px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 10px;
  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.14em;

  color: var(--rs-muted);

  transition: color 0.25s ease;
}


.razu-sitemap-links a:hover .razu-sitemap-link-note {
  color: var(--rs-muted);
}


/* =========================================================
   MEMBERS FEATURE CARD
   ========================================================= */

.razu-sitemap-card-featured {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(77, 163, 255, 0.08),
      transparent 42%
    ),
    var(--rs-card);
}


/* =========================================================
   CONNECTED SITES FEATURE
   ========================================================= */

.razu-sitemap-card-connected {
  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(77, 163, 255, 0.05),
      transparent 45%
    ),
    var(--rs-card);
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1000px) {

  .razu-sitemap {
    padding: 90px 24px 105px;
  }


  .razu-sitemap-card {
    grid-template-columns: 50px 1fr;

    padding: 34px 30px 32px;
  }


  .razu-sitemap-card::after {
    font-size: 90px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .razu-sitemap {
    padding: 70px 18px 85px;
  }


  .razu-sitemap-header {
    margin-bottom: 45px;
  }


  .razu-sitemap-header h1 {
    font-size: clamp(56px, 17vw, 82px);

    line-height: 0.88;
  }


  .razu-sitemap-header p {
    margin-top: 20px;

    font-size: 14px;
  }


  .razu-sitemap-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .razu-sitemap-card {
    display: block;

    min-height: auto;

    padding: 30px 24px 27px;
  }


  .razu-sitemap-card::after {
    right: -8px;
    top: -10px;

    font-size: 72px;

    color: rgba(255, 255, 255, 0.016);
  }


  .razu-sitemap-number {
    margin-bottom: 23px;

    font-size: 15px;
  }


  .razu-sitemap-card h2 {
    font-size: 48px;
  }


  .razu-sitemap-card-content > p {
    margin: 15px 0 28px;
  }


  .razu-sitemap-links a {
    padding: 13px 0;

    font-size: 16px;
  }


  .razu-sitemap-link-note {
    margin-top: 5px;

    font-size: 9px;
  }

}

/* =========================================================
   THE LORD RAZU — ABOUT PAGE
   ========================================================= */

.razu-about {
  --ra-bg: transparent;

  --ra-panel: rgba(10, 10, 10, 0.72);
  --ra-panel-hover: rgba(13, 13, 13, 0.86);

  --ra-white: #f4f4f1;
  --ra-muted: #8d8d89;

  /* THE LORD RAZU BLUE */
  --ra-accent: #4da3ff;

  --ra-border: rgba(255, 255, 255, 0.10);
  --ra-border-hover: rgba(77, 163, 255, 0.60);

  position: relative;

  width: 100%;

  padding: 110px 30px 130px;

  background: var(--ra-bg);

  color: var(--ra-white);
}


.razu-about-inner {
  width: 100%;
  max-width: 1380px;

  margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.razu-about-hero {
  max-width: 950px;

  margin-bottom: 85px;
}


.razu-about-kicker {
  display: block;

  margin-bottom: 13px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 15px;

  letter-spacing: 0.22em;

  color: var(--ra-accent);
}


.razu-about-hero h1 {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(72px, 10vw, 145px);

  font-weight: 400;

  line-height: 0.85;

  letter-spacing: 0.01em;

  color: var(--ra-white);
}


.razu-about-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 28px;
}


.razu-about-tags span {
  padding: 8px 12px;

  border: 1px solid rgba(77, 163, 255, 0.4);

  font-family: "Bebas Neue", sans-serif;

  font-size: 15px;

  letter-spacing: 0.16em;

  color: var(--ra-accent);
}


.razu-about-lead {
  max-width: 760px;

  margin: 30px 0 0;

  font-size: 18px;

  line-height: 1.7;

  color: var(--ra-muted);
}


/* =========================================================
   MAIN PANELS
   ========================================================= */

.razu-about-panel {
  position: relative;

  display: grid;

  grid-template-columns: 75px 1fr;

  margin-bottom: 16px;

  padding: 46px 46px 44px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018),
      transparent 40%
    ),
    var(--ra-panel);

  border: 1px solid var(--ra-border);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}


.razu-about-panel:hover {
  transform: translateY(-3px);

  background: var(--ra-panel-hover);

  border-color: var(--ra-border-hover);
}


/* BLUE HOVER LINE */

.razu-about-panel::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 3px;
  height: 0;

  background: var(--ra-accent);

  transition: height 0.35s ease;

  z-index: 3;
}


.razu-about-panel:hover::before {
  height: 100%;
}


/* =========================================================
   LARGE BACKGROUND WORDS
   ========================================================= */

.razu-about-panel::after {
  position: absolute;

  right: -12px;
  top: -18px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 120px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.04em;

  white-space: nowrap;

  color: rgba(255, 255, 255, 0.018);

  pointer-events: none;

  z-index: 0;
}


.razu-about-panel-bio::after {
  content: "ARTIST";
}


.razu-about-panel-stats::after {
  content: "NUMBERS";
}


.razu-about-panel-sound::after {
  content: "SOUND";
}


.razu-about-panel-milestones::after {
  content: "JOURNEY";
}


.razu-about-panel-identity::after {
  content: "NINJA";
}


/* =========================================================
   PANEL NUMBER
   ========================================================= */

.razu-about-panel-number {
  position: relative;

  z-index: 2;

  padding-top: 2px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 18px;

  letter-spacing: 0.12em;

  color: var(--ra-accent);

  opacity: 0.75;
}


/* =========================================================
   PANEL CONTENT
   ========================================================= */

.razu-about-panel-content {
  position: relative;

  z-index: 2;
}


.razu-about-label {
  display: block;

  margin-bottom: 7px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 13px;

  letter-spacing: 0.2em;

  color: var(--ra-muted);
}


.razu-about-panel h2 {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(48px, 5vw, 72px);

  font-weight: 400;

  line-height: 0.95;

  color: var(--ra-white);
}


.razu-about-panel-content > p {
  max-width: 880px;

  margin: 20px 0 0;

  font-size: 15px;

  line-height: 1.75;

  color: var(--ra-muted);
}


/* =========================================================
   STATS
   ========================================================= */

.razu-about-stats-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-top: 40px;
}


.razu-about-stat {
  min-height: 180px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 24px;

  background: rgba(255, 255, 255, 0.018);

  border: 1px solid rgba(255, 255, 255, 0.08);
}


.razu-about-stat strong {
  display: block;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(52px, 6vw, 86px);

  font-weight: 400;

  line-height: 0.85;

  color: var(--ra-white);
}


.razu-about-stat span {
  display: block;

  margin-top: 13px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 13px;

  letter-spacing: 0.16em;

  color: var(--ra-accent);
}


/* =========================================================
   GENRES
   ========================================================= */

.razu-about-genre-list {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 34px;
}


.razu-about-genre-list span {
  padding: 9px 13px;

  border: 1px solid var(--ra-border);

  font-family: "Bebas Neue", sans-serif;

  font-size: 14px;

  letter-spacing: 0.12em;

  color: var(--ra-white);
}


/* =========================================================
   MILESTONES
   ========================================================= */

.razu-about-milestone-list {
  margin-top: 34px;
}


.razu-about-milestone {
  display: grid;

  grid-template-columns: 16px 1fr;

  gap: 14px;

  align-items: start;

  padding: 15px 0;

  border-top: 1px solid var(--ra-border);
}


.razu-about-milestone:last-child {
  border-bottom: 1px solid var(--ra-border);
}


.razu-about-milestone-dot {
  width: 6px;
  height: 6px;

  margin-top: 9px;

  background: var(--ra-accent);

  border-radius: 50%;
}


.razu-about-milestone p {
  margin: 0;

  font-size: 14px;

  line-height: 1.6;

  color: var(--ra-muted);
}


/* =========================================================
   QUOTE
   ========================================================= */

.razu-about-quote {
  position: relative;

  margin-top: 70px;

  padding: 75px 40px;

  text-align: center;
}


.razu-about-quote-label {
  display: block;

  margin-bottom: 20px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 14px;

  letter-spacing: 0.25em;

  color: var(--ra-accent);
}


.razu-about-quote blockquote {
  max-width: 1000px;

  margin: 0 auto;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(40px, 6vw, 78px);

  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.025em;

  color: var(--ra-white);
}


.razu-about-quote-credit {
  display: block;

  margin-top: 26px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 13px;

  letter-spacing: 0.18em;

  color: var(--ra-muted);
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1000px) {

  .razu-about {
    padding: 90px 24px 105px;
  }


  .razu-about-panel {
    grid-template-columns: 55px 1fr;

    padding: 38px 34px 36px;
  }


  .razu-about-panel::after {
    font-size: 95px;
  }


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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .razu-about {
    padding: 70px 18px 85px;
  }


  .razu-about-hero {
    margin-bottom: 52px;
  }


  .razu-about-hero h1 {
    font-size: clamp(68px, 20vw, 100px);

    line-height: 0.88;
  }


  .razu-about-lead {
    font-size: 15px;
  }


  .razu-about-panel {
    display: block;

    padding: 30px 24px 28px;
  }


  .razu-about-panel-number {
    margin-bottom: 22px;

    font-size: 15px;
  }


  .razu-about-panel h2 {
    font-size: 48px;
  }


  .razu-about-panel::after {
    right: -8px;
    top: -8px;

    font-size: 72px;

    color: rgba(255, 255, 255, 0.016);
  }


  .razu-about-panel-content > p {
    font-size: 14px;

    line-height: 1.65;
  }


  .razu-about-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;
  }


  .razu-about-stat {
    min-height: 135px;

    padding: 18px;
  }


  .razu-about-stat strong {
    font-size: clamp(42px, 13vw, 62px);
  }


  .razu-about-stat span {
    font-size: 11px;

    letter-spacing: 0.12em;
  }


  .razu-about-quote {
    margin-top: 45px;

    padding: 55px 20px;
  }


  .razu-about-quote blockquote {
    font-size: clamp(38px, 12vw, 58px);
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 430px) {

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


  .razu-about-stat {
    min-height: 120px;
  }

}

/* =========================================================
   ABOUT — UNIFIED PRESS + MEDIA PANELS
   06 PRESS / 07 VIDEOS / 08 INTERVIEWS / 09 AUDIO / 10 PHOTOS
   ========================================================= */

/* =========================================================
   GHOST WORDS
   ========================================================= */

.razu-about-panel-press::after {
  content: "PRESS";
}

.razu-about-panel-videos::after {
  content: "VIDEOS";
}

.razu-about-panel-interviews::after {
  content: "TALK";
}

.razu-about-panel-tracks::after {
  content: "AUDIO";
}

.razu-about-panel-photos::after {
  content: "PHOTOS";
}


/* =========================================================
   LOWER PANEL SPACING
   ========================================================= */

.razu-about-panel-press,
.razu-about-panel-videos,
.razu-about-panel-interviews,
.razu-about-panel-tracks,
.razu-about-panel-photos {
  margin-top: 16px;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.razu-about-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
}

.razu-about-review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 24px;

  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.08);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.razu-about-review-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.028);
  border-color: var(--ra-border-hover);
}

.razu-about-review-number {
  display: block;
  margin-bottom: 28px;

  font-family: "Bebas Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.15em;

  color: var(--ra-accent);
}

.razu-about-review-card blockquote {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(23px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.02em;

  color: var(--ra-white);
}

.razu-about-review-source {
  margin-top: auto;
  padding-top: 28px;
}

.razu-about-review-source strong,
.razu-about-review-source span {
  display: block;
}

.razu-about-review-source strong {
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;

  color: var(--ra-accent);
}

.razu-about-review-source span {
  margin-top: 5px;

  font-size: 10px;
  letter-spacing: 0.1em;

  color: var(--ra-muted);
}


/* =========================================================
   VIDEO + INTERVIEW GRIDS
   ========================================================= */

.razu-about-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
}

.razu-about-video-card {
  position: relative;

  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.08);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.razu-about-video-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.028);
  border-color: var(--ra-border-hover);
}

.razu-about-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;

  background: #000;
  overflow: hidden;
}

.razu-about-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.razu-about-video-info {
  padding: 20px;
}

.razu-about-video-number {
  display: block;
  margin-bottom: 7px;

  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;

  color: var(--ra-accent);
}

.razu-about-video-info h3 {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;

  color: var(--ra-white);
}

.razu-about-video-info p {
  margin: 7px 0 0;

  font-family: "Bebas Neue", sans-serif;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.13em;

  color: var(--ra-muted);
}


/* =========================================================
   SELECTED TRACKS
   ========================================================= */

.razu-about-track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
}

.razu-about-track-card {
  position: relative;
  padding: 18px;

  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.08);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.razu-about-track-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.028);
  border-color: var(--ra-border-hover);
}

.razu-about-track-number {
  display: block;
  margin-bottom: 13px;

  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;

  color: var(--ra-accent);
}

.razu-about-soundcloud {
  width: 100%;
  overflow: hidden;
}

.razu-about-soundcloud iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
}


/* =========================================================
   PRESS PHOTOS
   ========================================================= */

.razu-about-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
}

.razu-about-photo-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.08);

  text-decoration: none;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.razu-about-photo-card:hover {
  transform: translateY(-3px);
  border-color: var(--ra-border-hover);
}

.razu-about-photo-card img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

.razu-about-photo-card:hover img {
  transform: scale(1.035);
  filter: brightness(1.06);
}

.razu-about-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.50),
      transparent 42%
    );

  pointer-events: none;
}

.razu-about-photo-index {
  position: absolute;
  left: 15px;
  bottom: 13px;
  z-index: 2;

  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;

  color: var(--ra-accent);
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1000px) {

  .razu-about-review-grid,
  .razu-about-video-grid,
  .razu-about-track-grid {
    grid-template-columns: 1fr;
  }

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .razu-about-review-grid,
  .razu-about-video-grid,
  .razu-about-track-grid,
  .razu-about-photo-grid {
    margin-top: 28px;
  }

  .razu-about-review-card {
    min-height: 240px;
    padding: 20px;
  }

  .razu-about-video-info {
    padding: 17px;
  }

  .razu-about-video-info h3 {
    font-size: 25px;
  }

  .razu-about-track-card {
    padding: 14px;
  }

  .razu-about-photo-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 430px) {

  .razu-about-review-card blockquote {
    font-size: 23px;
  }

  .razu-about-video-info h3 {
    font-size: 23px;
  }

}


/* =========================================================
   ABOUT — PRESS KIT DOWNLOAD BUTTONS
   ========================================================= */

.razu-presskit-cta {
  display: flex;
  width: 100%;
}

.razu-presskit-cta--top {
  justify-content: flex-end;
  margin: 18px 0 18px;
}

.razu-presskit-cta--bottom {
  justify-content: center;
  margin: 110px 0 70px;
}

.razu-presskit-button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  width: min(100%, 390px);
  min-height: 54px;

  padding: 15px 18px 15px 20px;

  background: rgba(47, 111, 255, 0.08);
  border: 1px solid rgba(47, 111, 255, 0.58);

  text-decoration: none !important;
  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.razu-presskit-button::before {
  content: "";
  position: absolute;
  inset: 0;

  background: #2f6fff;
  transform: translateX(-101%);

  transition: transform 0.35s ease;
  z-index: 0;
}

.razu-presskit-button span {
  position: relative;
  z-index: 2;

  font-family: "Bebas Neue", sans-serif;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.16em;

  color: #ffffff;
}

.razu-presskit-arrow {
  margin-left: 28px;

  font-size: 18px !important;
  color: #2f6fff !important;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.razu-presskit-button:hover {
  transform: translateY(-2px);

  border-color: #2f6fff;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(47, 111, 255, 0.15);
}

.razu-presskit-button:hover::before {
  transform: translateX(0);
}

.razu-presskit-button:hover .razu-presskit-arrow {
  color: #ffffff !important;
  transform: translateY(2px);
}


/* =========================================================
   11 — CONTACT
   ========================================================= */

.razu-about-panel-contact::after {
  content: "CONTACT";
}

.razu-about-panel-contact {
  margin-top: 16px;
  margin-bottom: 0;
}

.razu-about-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-top: 38px;
}

.razu-about-contact-card {
  position: relative;

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "type arrow"
    "value arrow";
  align-items: center;

  min-height: 150px;

  padding: 24px;

  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.08);

  text-decoration: none !important;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.razu-about-contact-card:hover {
  transform: translateY(-3px);

  background: rgba(255, 255, 255, 0.028);
  border-color: var(--ra-border-hover);
}

.razu-about-contact-type {
  grid-area: type;

  display: block;

  margin-bottom: 8px;

  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;

  color: var(--ra-accent);
}

.razu-about-contact-card strong {
  grid-area: value;

  display: block;

  overflow-wrap: anywhere;

  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 400;
  line-height: 1;

  letter-spacing: 0.035em;

  color: var(--ra-white);
}

.razu-about-contact-arrow {
  grid-area: arrow;

  align-self: center;

  margin-left: 22px;

  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;

  color: var(--ra-accent);

  transition: transform 0.3s ease;
}

.razu-about-contact-card:hover .razu-about-contact-arrow {
  transform: translateX(4px);
}


/* =========================================================
   PRESS KIT CTA + CONTACT — TABLET / MOBILE
   ========================================================= */

@media screen and (max-width: 1000px) {

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

}

@media screen and (max-width: 767px) {

  .razu-presskit-cta--top {
    justify-content: stretch;
    margin: 12px 0 16px;
  }

  .razu-presskit-cta--bottom {
    margin: 70px 0 50px;
  }

  .razu-presskit-button {
    width: 100%;
  }

  .razu-about-contact-grid {
    margin-top: 28px;
  }

  .razu-about-contact-card {
    min-height: 125px;
    padding: 20px;
  }

  .razu-about-contact-card strong {
    font-size: 26px;
  }

}

/* =========================================================
   THE LORD RAZU — LINKS / AROUND THE WEB
   ========================================================= */

.razu-links {
  --rl-panel: rgba(10, 10, 10, 0.72);
  --rl-panel-hover: rgba(13, 13, 13, 0.86);

  --rl-white: #f4f4f1;
  --rl-muted: #8d8d89;

  /* THE LORD RAZU BLUE */
  --rl-accent: #2f6fff;

  --rl-border: rgba(255, 255, 255, 0.10);
  --rl-border-hover: rgba(47, 111, 255, 0.62);

  position: relative;

  width: 100%;

  padding: 110px 30px 130px;

  background: transparent;

  color: var(--rl-white);
}


.razu-links-inner {
  width: 100%;
  max-width: 1380px;

  margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.razu-links-hero {
  max-width: 900px;

  margin-bottom: 75px;
}


.razu-links-kicker {
  display: block;

  margin-bottom: 13px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 15px;

  letter-spacing: 0.22em;

  color: var(--rl-accent);
}


.razu-links-hero h1 {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(78px, 11vw, 155px);

  font-weight: 400;

  line-height: 0.84;

  letter-spacing: 0.015em;

  color: var(--rl-white);
}


.razu-links-hero p {
  max-width: 650px;

  margin: 28px 0 0;

  font-size: 16px;

  line-height: 1.65;

  color: var(--rl-muted);
}


/* =========================================================
   MAIN PANELS
   ========================================================= */

.razu-links-panel {
  position: relative;

  display: grid;

  grid-template-columns: 70px 1fr;

  margin-bottom: 16px;

  padding: 42px 44px 40px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018),
      transparent 40%
    ),
    var(--rl-panel);

  border: 1px solid var(--rl-border);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}


.razu-links-panel:hover {
  transform: translateY(-3px);

  background: var(--rl-panel-hover);

  border-color: var(--rl-border-hover);
}


/* =========================================================
   BLUE SIDE LINE
   ========================================================= */

.razu-links-panel::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 3px;
  height: 0;

  background: var(--rl-accent);

  transition: height 0.35s ease;

  z-index: 3;
}


.razu-links-panel:hover::before {
  height: 100%;
}


/* =========================================================
   LARGE GHOST WORDS
   ========================================================= */

.razu-links-panel::after {
  position: absolute;

  right: -10px;
  top: -18px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 115px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.04em;

  white-space: nowrap;

  color: rgba(255, 255, 255, 0.018);

  pointer-events: none;

  z-index: 0;
}


.razu-links-panel-listen::after {
  content: "MUSIC";
}


.razu-links-panel-watch::after {
  content: "VIDEO";
}


.razu-links-panel-follow::after {
  content: "SOCIAL";
}


.razu-links-panel-shop::after {
  content: "SHOP";
}


.razu-links-panel-industry::after {
  content: "INDUSTRY";
}


.razu-links-panel-features::after {
  content: "WORLD";
}


/* =========================================================
   PANEL NUMBER
   ========================================================= */

.razu-links-panel-number {
  position: relative;

  z-index: 2;

  padding-top: 2px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 18px;

  letter-spacing: 0.12em;

  color: var(--rl-accent);

  opacity: 0.75;
}


/* =========================================================
   PANEL CONTENT
   ========================================================= */

.razu-links-panel-content {
  position: relative;

  z-index: 2;
}


.razu-links-label {
  display: block;

  margin-bottom: 7px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 13px;

  letter-spacing: 0.2em;

  color: var(--rl-muted);
}


.razu-links-panel h2 {
  margin: 0;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(48px, 5vw, 72px);

  font-weight: 400;

  line-height: 0.95;

  color: var(--rl-white);
}


.razu-links-panel-content > p {
  max-width: 700px;

  margin: 18px 0 34px;

  font-size: 14px;

  line-height: 1.65;

  color: var(--rl-muted);
}


/* =========================================================
   LINK ROWS
   ========================================================= */

.razu-links-list {
  border-top: 1px solid var(--rl-border);
}


.razu-links-list > a {
  display: grid;

  grid-template-columns: 45px 1fr auto;

  align-items: center;

  gap: 18px;

  padding: 18px 0;

  border-bottom: 1px solid var(--rl-border);

  text-decoration: none !important;

  color: var(--rl-white) !important;

  transition:
    padding-left 0.25s ease,
    background 0.25s ease;
}


.razu-links-list > a:hover {
  padding-left: 8px;
}


.razu-links-item-number {
  font-family: "Bebas Neue", sans-serif;

  font-size: 12px;

  letter-spacing: 0.15em;

  color: var(--rl-accent);
}


.razu-links-item-copy {
  min-width: 0;
}


.razu-links-item-copy strong {
  display: block;

  font-family: "Bebas Neue", sans-serif;

  font-size: 22px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.04em;

  color: var(--rl-white);
}


.razu-links-item-copy small {
  display: block;

  margin-top: 5px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 10px;

  line-height: 1.25;

  letter-spacing: 0.14em;

  color: var(--rl-muted);
}


.razu-links-arrow {
  font-family: "Bebas Neue", sans-serif;

  font-size: 22px;

  color: var(--rl-accent);

  transition: transform 0.25s ease;
}


.razu-links-list > a:hover .razu-links-arrow {
  transform: translate(4px, -4px);
}


/* =========================================================
   CLOSING
   ========================================================= */

.razu-links-closing {
  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: 80px;

  padding: 55px 20px;

  text-align: center;
}


.razu-links-closing > span {
  margin-bottom: 12px;

  font-family: "Bebas Neue", sans-serif;

  font-size: 12px;

  letter-spacing: 0.22em;

  color: var(--rl-muted);
}


.razu-links-closing a {
  display: inline-flex;

  align-items: center;

  gap: 14px;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(34px, 4vw, 54px);

  line-height: 1;

  letter-spacing: 0.06em;

  text-decoration: none !important;

  color: var(--rl-white) !important;

  transition: color 0.25s ease;
}


.razu-links-closing a span {
  color: var(--rl-accent);

  transition: transform 0.25s ease;
}


.razu-links-closing a:hover {
  color: var(--rl-accent) !important;
}


.razu-links-closing a:hover span {
  transform: translateX(5px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1000px) {

  .razu-links {
    padding: 90px 24px 105px;
  }


  .razu-links-panel {
    grid-template-columns: 52px 1fr;

    padding: 36px 32px 34px;
  }


  .razu-links-panel::after {
    font-size: 92px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .razu-links {
    padding: 70px 18px 85px;
  }


  .razu-links-hero {
    margin-bottom: 48px;
  }


  .razu-links-hero h1 {
    font-size: clamp(72px, 25vw, 110px);
  }


  .razu-links-hero p {
    font-size: 14px;
  }


  .razu-links-panel {
    display: block;

    padding: 30px 24px 28px;
  }


  .razu-links-panel-number {
    margin-bottom: 22px;

    font-size: 15px;
  }


  .razu-links-panel h2 {
    font-size: 48px;
  }


  .razu-links-panel::after {
    right: -7px;
    top: -8px;

    font-size: 70px;

    color: rgba(255, 255, 255, 0.016);
  }


  .razu-links-list > a {
    grid-template-columns: 34px 1fr auto;

    gap: 12px;

    padding: 16px 0;
  }


  .razu-links-item-copy strong {
    font-size: 20px;
  }


  .razu-links-item-copy small {
    font-size: 9px;
  }


  .razu-links-closing {
    margin-top: 55px;

    padding: 40px 10px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 430px) {

  .razu-links {
    padding-left: 14px;
    padding-right: 14px;
  }


  .razu-links-panel {
    padding: 27px 19px 25px;
  }


  .razu-links-list > a {
    grid-template-columns: 28px 1fr auto;

    gap: 9px;
  }


  .razu-links-item-copy strong {
    font-size: 18px;
  }


  .razu-links-arrow {
    font-size: 19px;
  }

}

/* =========================================================
   THE LORD RAZU — HEADER SIGN UP CTA
   ========================================================= */

.header-actions-action--cta > a.btn {
  position: relative;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 0 20px !important;

  background: rgba(47, 111, 255, 0.10) !important;

  border: 1px solid rgba(47, 111, 255, 0.72) !important;
  border-radius: 0 !important;

  font-family: "Bebas Neue", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;

  line-height: 1 !important;
  letter-spacing: 0.12em !important;

  color: #ffffff !important;

  text-decoration: none !important;

  box-shadow: none !important;

  overflow: hidden;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}


/* BLUE BOTTOM ACCENT */

.header-actions-action--cta > a.btn::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 2px;

  background: #2f6fff;

  transform: scaleX(0.35);
  transform-origin: left center;

  transition: transform 0.3s ease;
}


/* HOVER */

.header-actions-action--cta > a.btn:hover {
  background: #2f6fff !important;

  border-color: #2f6fff !important;

  color: #ffffff !important;

  transform: translateY(-1px);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(47, 111, 255, 0.16) !important;
}


.header-actions-action--cta > a.btn:hover::after {
  transform: scaleX(1);
}


/* KEYBOARD FOCUS */

.header-actions-action--cta > a.btn:focus-visible {
  outline: 2px solid #2f6fff !important;
  outline-offset: 3px;
}


/* =========================================================
   SMALLER DESKTOP
   ========================================================= */

@media screen and (max-width: 1100px) {

  .header-actions-action--cta > a.btn {
    min-height: 38px;

    padding: 0 15px !important;

    font-size: 12px !important;
  }

}


/* =========================================================
   THE LORD RAZU — CUSTOM PUBLIC PAGE NAV
   Page-level version
   ========================================================= */

.razu-public-page-nav {
  --rpn-blue: #2f6fff;
  --rpn-white: #f6f7fb;
  --rpn-muted: #8c92a0;

  position: relative;

  z-index: 9999;

  width: 100%;

  padding: 14px 18px;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
}


/* =========================================================
   DESKTOP NAV CONTAINER
   ========================================================= */

.razu-public-page-nav__inner {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 34px;

  width: fit-content;
  max-width: 100%;

  margin: 0 auto;

  padding: 7px 18px;

  background: rgba(5, 7, 11, 0.48);

  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top-color: rgba(47, 111, 255, 0.22);

  border-radius: 8px;

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.20),
    0 0 20px rgba(47, 111, 255, 0.04);
}


/* =========================================================
   MAIN LINKS
   ========================================================= */

.razu-public-page-nav__item {
  position: relative;
}


.razu-public-page-nav__link {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 11px 0;

  color: var(--rpn-white) !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: 15px !important;

  font-weight: 400 !important;

  line-height: 1 !important;

  letter-spacing: 0.08em !important;

  text-decoration: none !important;

  text-transform: uppercase;

  white-space: nowrap;

  cursor: pointer;

  transition:
    color 0.22s ease,
    opacity 0.22s ease;
}


.razu-public-page-nav__link:hover {
  color: var(--rpn-blue) !important;
}


/* ACCOUNT */

.razu-public-page-nav__link--account {
  color: #7697ff !important;
}


/* EXTERNAL */

.razu-public-page-nav__external {
  color: #7697ff;

  font-size: 10px;

  transform: translateY(-1px);
}


/* =========================================================
   SIGN UP
   ========================================================= */

.razu-public-page-nav__signup {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding: 0 17px;

  background: rgba(47, 111, 255, 0.09);

  border: 1px solid rgba(47, 111, 255, 0.68);

  color: #fff !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  line-height: 1 !important;

  letter-spacing: 0.11em !important;

  text-decoration: none !important;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.razu-public-page-nav__signup:hover {
  background: var(--rpn-blue);

  border-color: var(--rpn-blue);

  transform: translateY(-1px);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(47, 111, 255, 0.15);
}


/* =========================================================
   MUSIC ARROW
   ========================================================= */

.razu-public-page-nav__arrow {
  display: inline-block;

  color: #7697ff;

  font-size: 9px;

  transition: transform 0.22s ease;
}


/* =========================================================
   MUSIC DROPDOWN
   ========================================================= */

.razu-public-page-nav__dropdown {
  position: absolute;

  top: calc(100% + 8px);
  left: 50%;

  width: 270px;

  padding: 10px;

  background: rgba(7, 8, 12, 0.93);

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-top-color: rgba(47, 111, 255, 0.50);

  border-radius: 8px;

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.50),
    0 0 24px rgba(47, 111, 255, 0.07);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateX(-50%)
    translateY(-5px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}


/* OPEN ON DESKTOP HOVER */

.razu-public-page-nav__item--dropdown:hover
.razu-public-page-nav__dropdown {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateX(-50%)
    translateY(0);
}


.razu-public-page-nav__item--dropdown:hover
.razu-public-page-nav__arrow {
  transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN LINKS
   ========================================================= */

.razu-public-page-nav__dropdown a {
  display: block;

  padding: 11px 14px;

  color: var(--rpn-white) !important;

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;

  font-size: 15px !important;

  font-weight: 400 !important;

  line-height: 1.2 !important;

  letter-spacing: 0.055em !important;

  text-decoration: none !important;

  text-transform: uppercase;

  transition:
    color 0.2s ease,
    padding-left 0.2s ease,
    background 0.2s ease;
}


.razu-public-page-nav__dropdown a:hover {
  padding-left: 19px;

  color: #fff !important;

  background: rgba(47, 111, 255, 0.11);
}


/* =========================================================
   CATEGORY LABELS
   Same language as Members Nav
   ========================================================= */

.razu-public-page-nav__category {
  display: flex;

  align-items: center;

  margin: 12px 14px 5px;

  padding: 10px 0 7px;

  border-top: 1px solid rgba(255, 255, 255, 0.09);

  color: var(--rpn-blue);

  font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;

  font-size: 10px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  opacity: 0.9;

  pointer-events: none;

  user-select: none;
}


.razu-public-page-nav__category:first-child {
  margin-top: 0;

  padding-top: 5px;

  border-top: 0;
}


.razu-public-page-nav__category::after {
  content: "";

  height: 1px;

  flex: 1;

  margin-left: 12px;

  background:
    linear-gradient(
      90deg,
      rgba(47, 111, 255, 0.42),
      rgba(47, 111, 255, 0)
    );
}


/* =========================================================
   MOBILE TOGGLE
   ========================================================= */

.razu-public-page-nav__checkbox {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.razu-public-page-nav__mobile-toggle {
  display: none;
}


/* =========================================================
   MOBILE
   TOP RIGHT
   ========================================================= */

@media screen and (max-width: 768px) {

  .razu-public-page-nav {
    position: relative;

    min-height: 54px;

    padding: 8px 14px;
  }


  /* TOP RIGHT BUTTON */

  .razu-public-page-nav__mobile-toggle {
    position: absolute;

    top: 8px;
    right: 14px;

    z-index: 10;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 40px;

    padding: 9px 12px;

    background: rgba(4, 6, 10, 0.58);

    border: 1px solid rgba(47, 111, 255, 0.42);

    border-radius: 8px;

    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);

    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.28),
      0 0 18px rgba(47, 111, 255, 0.08);

    color: #fff;

    cursor: pointer;
  }


  .razu-public-page-nav__mobile-text {
    font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;

    font-size: 13px;

    line-height: 1;

    letter-spacing: 0.12em;
  }


  /* HAMBURGER */

  .razu-public-page-nav__mobile-icon {
    display: flex;

    flex-direction: column;

    gap: 4px;

    width: 16px;
  }


  .razu-public-page-nav__mobile-icon i {
    display: block;

    width: 16px;
    height: 1.5px;

    background: #fff;

    transition:
      transform 0.25s ease,
      opacity 0.2s ease;
  }


  /* MOBILE MENU */

  .razu-public-page-nav__inner {
    position: absolute;

    top: 56px;

    right: 14px;
    left: auto;

    z-index: 9;

    display: none;

    width: min(320px, calc(100vw - 28px));

    margin: 0;

    padding: 12px 18px 16px;

    background: rgba(3, 5, 8, 0.90);

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-top-color: rgba(47, 111, 255, 0.46);

    border-radius: 10px;

    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);

    box-shadow:
      0 24px 70px rgba(0, 0, 0, 0.52),
      0 0 28px rgba(47, 111, 255, 0.08);
  }


  /* CHECKBOX OPENS MENU */

  .razu-public-page-nav__checkbox:checked
  ~ .razu-public-page-nav__inner {
    display: block;
  }


  /* HAMBURGER → X */

  .razu-public-page-nav__checkbox:checked
  + .razu-public-page-nav__mobile-toggle
  .razu-public-page-nav__mobile-icon i:nth-child(1) {
    transform:
      translateY(5.5px)
      rotate(45deg);
  }


  .razu-public-page-nav__checkbox:checked
  + .razu-public-page-nav__mobile-toggle
  .razu-public-page-nav__mobile-icon i:nth-child(2) {
    opacity: 0;
  }


  .razu-public-page-nav__checkbox:checked
  + .razu-public-page-nav__mobile-toggle
  .razu-public-page-nav__mobile-icon i:nth-child(3) {
    transform:
      translateY(-5.5px)
      rotate(-45deg);
  }


  /* MAIN MOBILE LINKS */

  .razu-public-page-nav__link,
  .razu-public-page-nav__dropdown-trigger {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    min-height: 48px !important;

    padding: 13px 8px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    font-size: 22px !important;

    letter-spacing: 0.035em !important;
  }


  /* MUSIC DROPDOWN ALWAYS DISPLAYED INSIDE MOBILE MENU */

  .razu-public-page-nav__dropdown {
    position: static;

    width: 100%;

    padding: 4px 8px 10px;

    background: rgba(255, 255, 255, 0.018);

    border: 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 0;

    box-shadow: none;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: none;
  }


  .razu-public-page-nav__arrow {
    display: none;
  }


  .razu-public-page-nav__dropdown a {
    padding: 10px 8px;

    font-size: 17px !important;
  }


  .razu-public-page-nav__category {
    margin: 12px 8px 4px;

    padding: 10px 0 6px;

    color: #5f88ff;

    font-size: 11px;
  }


  /* MOBILE SIGNUP */

  .razu-public-page-nav__signup {
    width: 100%;

    min-height: 44px;

    margin-top: 14px;

    padding: 0 14px;

    font-size: 15px !important;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 430px) {

  .razu-public-page-nav {
    padding-left: 10px;
    padding-right: 10px;
  }


  .razu-public-page-nav__mobile-toggle {
    right: 10px;
  }


  .razu-public-page-nav__inner {
    right: 10px;

    width: calc(100vw - 20px);
  }

}

/* =========================================================
   PUBLIC NAV — MUSIC OPEN / CLOSE CONTROL
   ========================================================= */

.razu-public-page-nav__music-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


/* =========================================================
   DESKTOP
   Keep normal hover behavior
   ========================================================= */

@media screen and (min-width: 769px) {

  .razu-public-page-nav__item--dropdown:hover
  .razu-public-page-nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
      translateX(-50%)
      translateY(0);
  }

}


/* =========================================================
   MOBILE
   Music is CLOSED by default
   ========================================================= */

@media screen and (max-width: 768px) {

  /* MUSIC ROW */

  .razu-public-page-nav__dropdown-trigger {
    cursor: pointer !important;
  }


  /* SHOW ARROW ON MOBILE */

  .razu-public-page-nav__arrow {
    display: inline-block !important;

    margin-left: auto;

    color: #5f88ff;

    font-size: 11px;

    transform: none !important;

    transition: none !important;
  }


  /* -----------------------------------------
     CLOSED
     ----------------------------------------- */

  .razu-public-page-nav__dropdown {
    display: none !important;

    position: static !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 4px 8px 10px !important;

    background: rgba(255, 255, 255, 0.018) !important;

    border: 0 !important;

    border-bottom:
      1px solid rgba(255, 255, 255, 0.08) !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    transform: none !important;

    /* IMPORTANT — NO SLIDING */
    transition: none !important;
  }


  /* -----------------------------------------
     OPEN
     ----------------------------------------- */

  .razu-public-page-nav__music-checkbox:checked
  ~ .razu-public-page-nav__dropdown {
    display: block !important;
  }


  /* ARROW CHANGES WHEN OPEN */

  .razu-public-page-nav__music-checkbox:checked
  + .razu-public-page-nav__dropdown-trigger
  .razu-public-page-nav__arrow {
    transform: rotate(180deg) !important;
  }


  /* Prevent desktop hover from forcing it open */

  .razu-public-page-nav__item--dropdown:hover
  .razu-public-page-nav__dropdown {
    display: none !important;
  }


  .razu-public-page-nav__item--dropdown:hover
  .razu-public-page-nav__music-checkbox:checked
  ~ .razu-public-page-nav__dropdown {
    display: block !important;
  }

}

/* =========================================================
   THE LORD RAZU — SQUARESPACE SEARCH PAGE
   Stable selectors from live markup
   ========================================================= */


/* PAGE WRAPPER */

.sqs-search-page {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 90px 24px 120px !important;
}


/* =========================================================
   SEARCH INPUT AREA
   ========================================================= */

.sqs-search-page-input {
  position: relative !important;

  margin-bottom: 38px !important;
  padding: 0 !important;

  background: transparent !important;
}


/* SEARCH FIELD */

.sqs-search-page-input input[type="text"] {
  width: 100% !important;

  min-height: 64px !important;

  padding: 0 22px !important;

  background: rgba(5, 7, 11, 0.72) !important;

  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom: 1px solid rgba(47, 111, 255, 0.62) !important;

  border-radius: 0 !important;

  color: #f4f4f1 !important;

  font-family: "Bebas Neue", sans-serif !important;

  font-size: 22px !important;

  font-weight: 400 !important;

  line-height: 1 !important;

  letter-spacing: 0.08em !important;

  outline: none !important;

  box-shadow: none !important;

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}


/* PLACEHOLDER */

.sqs-search-page-input input[type="text"]::placeholder {
  color: rgba(244, 244, 241, 0.34) !important;

  font-family: "Bebas Neue", sans-serif !important;

  letter-spacing: 0.08em !important;
}


/* FOCUS */

.sqs-search-page-input input[type="text"]:focus {
  background: rgba(7, 9, 14, 0.90) !important;

  border-color: rgba(47, 111, 255, 0.78) !important;

  box-shadow:
    0 0 0 1px rgba(47, 111, 255, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.24) !important;
}


/* =========================================================
   RESULTS WRAPPER
   ========================================================= */

.sqs-search-page-output {
  opacity: 1 !important;

  color: #f4f4f1 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .sqs-search-page {
    padding: 70px 16px 90px !important;
  }


  .sqs-search-page-input input[type="text"] {
    min-height: 56px !important;

    padding: 0 17px !important;

    font-size: 19px !important;
  }

}

/* =========================================================
   THE LORD RAZU
   SQUARESPACE SEARCH RESULTS
   ========================================================= */


/* RESULTS LIST
--------------------------------------------------------- */

.sqs-search-page-list {
  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 12px !important;

  margin-top: 32px !important;
}


/* REMOVE SQUARESPACE DEFAULT RESULT SPACING */

.sqs-search-page-list .search-result {
  position: relative !important;

  margin: 0 !important;

  padding: 0 !important;

  background:
    linear-gradient(
      135deg,
      rgba(10, 12, 17, 0.94),
      rgba(4, 5, 8, 0.90)
    ) !important;

  border: 1px solid rgba(255,255,255,0.08) !important;

  border-left: 2px solid rgba(47,111,255,0.50) !important;

  overflow: hidden !important;

  cursor: pointer !important;

  transition:
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease !important;
}


/* SUBTLE LARGE BACKGROUND NUMBER */

.sqs-search-page-list .search-result::before {
  content: "RESULT";

  position: absolute !important;

  top: -6px !important;
  right: 18px !important;

  color: rgba(255,255,255,0.018) !important;

  font-family: "Bebas Neue", sans-serif !important;

  font-size: 72px !important;

  line-height: 1 !important;

  letter-spacing: .03em !important;

  pointer-events: none !important;
}


/* BLUE ARROW */

.sqs-search-page-list .search-result::after {
  content: "→";

  position: absolute !important;

  right: 22px !important;
  bottom: 20px !important;

  color: #2f6fff !important;

  font-family: Arial, sans-serif !important;

  font-size: 18px !important;

  line-height: 1 !important;

  opacity: .8 !important;

  transition:
    transform .22s ease,
    opacity .22s ease !important;
}


/* HOVER */

.sqs-search-page-list .search-result:hover {
  background:
    linear-gradient(
      135deg,
      rgba(12,15,22,0.98),
      rgba(5,7,11,0.96)
    ) !important;

  border-color: rgba(47,111,255,0.42) !important;

  border-left-color: #2f6fff !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.30),
    0 0 22px rgba(47,111,255,.045) !important;
}


.sqs-search-page-list .search-result:hover::after {
  transform: translateX(4px) !important;

  opacity: 1 !important;
}


/* =========================================================
   RESULT CONTENT
   ========================================================= */

.sqs-search-page-item {
  display: flex !important;

  align-items: stretch !important;

  gap: 0 !important;

  min-height: 150px !important;

  padding: 0 !important;
}


/* =========================================================
   RESULT IMAGE
   ========================================================= */

.sqs-search-page-item .sqs-main-image-container {
  position: relative !important;

  flex: 0 0 190px !important;

  width: 190px !important;

  min-height: 150px !important;

  margin: 0 !important;

  overflow: hidden !important;

  background: #050609 !important;
}


/* IMAGE ITSELF */

.sqs-search-page-item .sqs-main-image-container img {
  width: 100% !important;

  height: 100% !important;

  min-height: 150px !important;

  object-fit: cover !important;

  filter:
    brightness(.82)
    contrast(1.06) !important;

  transition:
    transform .35s ease,
    filter .35s ease !important;
}


.search-result:hover
.sqs-main-image-container img {
  transform: scale(1.035) !important;

  filter:
    brightness(.95)
    contrast(1.08) !important;
}


/* =========================================================
   TEXT CONTENT
   ========================================================= */

.sqs-search-page-item .sqs-content {
  position: relative !important;

  display: flex !important;

  flex: 1 !important;

  flex-direction: column !important;

  justify-content: center !important;

  min-width: 0 !important;

  padding: 27px 70px 27px 30px !important;
}


/* SMALL SEARCH LABEL ABOVE EVERY TITLE */

.sqs-search-page-item .sqs-content::before {
  content: "SEARCH RESULT";

  display: block !important;

  margin-bottom: 8px !important;

  color: #2f6fff !important;

  font-family: "Bebas Neue", sans-serif !important;

  font-size: 9px !important;

  line-height: 1 !important;

  letter-spacing: .22em !important;

  text-transform: uppercase !important;
}


/* =========================================================
   TITLE
   ========================================================= */

.sqs-search-page-item .sqs-title {
  margin: 0 0 10px !important;

  color: #f5f5f2 !important;

  font-family: "Bebas Neue", sans-serif !important;

  font-size: clamp(25px, 2.1vw, 34px) !important;

  font-weight: 400 !important;

  line-height: .98 !important;

  letter-spacing: .025em !important;

  text-transform: uppercase !important;
}


.search-result:hover .sqs-title {
  color: #ffffff !important;
}


/* =========================================================
   DESCRIPTION / EXCERPT
   ========================================================= */

.sqs-search-page-item .sqs-content > div:not(.sqs-title),
.sqs-search-page-item .sqs-content > span {
  color: rgba(238,238,235,.62) !important;

  font-size: 13px !important;

  line-height: 1.65 !important;
}


/* LINKS INSIDE RESULT */

.sqs-search-page-item a {
  color: inherit !important;

  text-decoration: none !important;
}


/* =========================================================
   RESULTS DIVIDERS
   REMOVE OLD SQUARESPACE APPEARANCE
   ========================================================= */

.sqs-search-page-list hr {
  display: none !important;
}


/* =========================================================
   NO RESULTS
   ========================================================= */

.sqs-search-page-notice {
  margin-top: 28px !important;

  padding: 30px !important;

  background: rgba(5,7,11,.72) !important;

  border: 1px solid rgba(255,255,255,.08) !important;

  border-left: 2px solid #2f6fff !important;

  color: rgba(245,245,242,.65) !important;

  font-family: "Bebas Neue", sans-serif !important;

  font-size: 17px !important;

  letter-spacing: .05em !important;
}


/* =========================================================
   LOAD MORE
   ========================================================= */

.sqs-search-page-more-wrapper {
  margin-top: 30px !important;

  text-align: center !important;
}


.sqs-search-page-more-wrapper a,
.sqs-search-page-more-wrapper button {
  padding: 12px 24px !important;

  background: rgba(47,111,255,.08) !important;

  border: 1px solid rgba(47,111,255,.48) !important;

  color: #fff !important;

  font-family: "Bebas Neue", sans-serif !important;

  font-size: 14px !important;

  letter-spacing: .12em !important;

  text-transform: uppercase !important;

  cursor: pointer !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .sqs-search-page-list {
    gap: 10px !important;

    margin-top: 24px !important;
  }


  .sqs-search-page-item {
    display: block !important;

    min-height: 0 !important;
  }


  /* IMAGE */

  .sqs-search-page-item .sqs-main-image-container {
    width: 100% !important;

    height: 180px !important;

    min-height: 180px !important;
  }


  .sqs-search-page-item
  .sqs-main-image-container img {
    height: 180px !important;

    min-height: 180px !important;
  }


  /* CONTENT */

  .sqs-search-page-item .sqs-content {
    padding: 22px 50px 24px 20px !important;
  }


  .sqs-search-page-item .sqs-title {
    font-size: 27px !important;

    margin-bottom: 8px !important;
  }


  .sqs-search-page-item
  .sqs-content > div:not(.sqs-title),
  .sqs-search-page-item
  .sqs-content > span {
    font-size: 12px !important;

    line-height: 1.55 !important;
  }


  .sqs-search-page-list .search-result::before {
    font-size: 52px !important;
  }


  .sqs-search-page-list .search-result::after {
    right: 18px !important;
    bottom: 21px !important;
  }

}

/* =========================================================
   CLEAN SEARCH EXCERPT
   Native Squarespace result text is hidden only after the
   lightweight cleanup JS has successfully created our excerpt.
   ========================================================= */

.sqs-search-page-list
.search-result[data-razu-search-cleaned="1"]
.sqs-content
> :not(.sqs-title):not(.razu-search-excerpt) {
  display: none !important;
}

.razu-search-excerpt {
  display: block !important;

  max-width: 720px;

  margin: 8px 0 0 !important;

  color: rgba(238, 238, 235, 0.62) !important;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;

  letter-spacing: 0 !important;
  text-transform: none !important;
}

.sqs-search-page-list .sqs-content,
.razu-search-excerpt {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sqs-search-page-list .search-result:focus-visible {
  outline: 2px solid #2f6fff !important;
  outline-offset: 3px !important;
}

.sqs-search-page-input input[type="text"]:focus-visible {
  outline: 2px solid rgba(47, 111, 255, 0.72) !important;
  outline-offset: 3px !important;
}

@media screen and (max-width: 767px) {
  .razu-search-excerpt {
    margin-top: 7px !important;

    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

/* =========================================================
   THE LORD RAZU — SEARCH HERO
   ========================================================= */

.razu-search-hero {
  position: relative;

  width: 100%;

  margin: 0 auto 30px;

  padding:
    clamp(75px, 10vw, 140px)
    24px
    clamp(48px, 7vw, 85px);

  overflow: hidden;

  color: #f5f5f2;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(47, 111, 255, 0.08),
      transparent 38%
    );
}


/* =========================================================
   GHOST WORD
   ========================================================= */

.razu-search-hero__ghost {
  position: absolute;

  top: 18px;
  left: 50%;

  transform: translateX(-50%);

  z-index: 0;

  color: rgba(255, 255, 255, 0.022);

  font-family:
    "Bebas Neue",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size:
    clamp(120px, 19vw, 310px);

  font-weight: 400;

  line-height: 0.8;

  letter-spacing: 0.02em;

  text-transform: uppercase;

  white-space: nowrap;

  pointer-events: none;

  user-select: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.razu-search-hero__inner {
  position: relative;

  z-index: 2;

  width: min(900px, 100%);

  margin: 0 auto;

  text-align: center;
}


/* EYEBROW */

.razu-search-hero__eyebrow {
  margin: 0 0 18px !important;

  color: #2f6fff !important;

  font-family:
    "Space Grotesk",
    Arial,
    sans-serif !important;

  font-size:
    clamp(9px, 0.9vw, 12px) !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: 0.30em !important;

  text-transform: uppercase !important;
}


/* MAIN TITLE */

.razu-search-hero h1 {
  margin: 0 !important;

  color: #ffffff !important;

  font-family:
    "Bebas Neue",
    "Arial Narrow",
    Arial,
    sans-serif !important;

  font-size:
    clamp(64px, 9vw, 132px) !important;

  font-weight: 400 !important;

  line-height: 0.86 !important;

  letter-spacing: 0.025em !important;

  text-transform: uppercase !important;
}


/* INTRO */

.razu-search-hero__intro {
  margin:
    26px auto 0 !important;

  color:
    rgba(255, 255, 255, 0.78) !important;

  font-family:
    "Bebas Neue",
    "Arial Narrow",
    Arial,
    sans-serif !important;

  font-size:
    clamp(18px, 2vw, 26px) !important;

  font-weight: 400 !important;

  line-height: 1.2 !important;

  letter-spacing: 0.06em !important;

  text-transform: uppercase !important;
}


/* BODY COPY */

.razu-search-hero__copy {
  max-width: 720px;

  margin:
    22px auto 0 !important;

  color:
    rgba(232, 235, 242, 0.62) !important;

  font-family:
    "Space Grotesk",
    Arial,
    sans-serif !important;

  font-size:
    clamp(14px, 1.2vw, 17px) !important;

  font-weight: 400 !important;

  line-height: 1.75 !important;
}


/* =========================================================
   PROMPT
   ========================================================= */

.razu-search-hero__prompt {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-top: 32px;

  padding:
    11px 18px
    10px 20px;

  color:
    rgba(255, 255, 255, 0.66);

  background:
    rgba(5, 7, 11, 0.46);

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-left:
    2px solid
    rgba(47, 111, 255, 0.72);

  -webkit-backdrop-filter:
    blur(12px);

  backdrop-filter:
    blur(12px);

  font-family:
    "Space Grotesk",
    Arial,
    sans-serif;

  font-size: 10px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.22em;

  text-transform: uppercase;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .razu-search-hero {
    margin-bottom: 18px;

    padding:
      70px
      18px
      45px;
  }


  .razu-search-hero__ghost {
    top: 35px;

    font-size:
      clamp(95px, 30vw, 150px);
  }


  .razu-search-hero h1 {
    font-size:
      clamp(58px, 18vw, 82px) !important;

    line-height:
      0.88 !important;
  }


  .razu-search-hero__intro {
    margin-top:
      20px !important;

    font-size:
      18px !important;
  }


  .razu-search-hero__copy {
    margin-top:
      18px !important;

    font-size:
      14px !important;

    line-height:
      1.65 !important;
  }


  .razu-search-hero__prompt {
    margin-top:
      26px;

    padding:
      10px 13px
      9px 15px;

    font-size:
      9px;

    letter-spacing:
      0.16em;
  }

}

/* =========================================================
   THE LORD RAZU — SITE SEARCH QUICK PREVIEW
   /site-search
   ========================================================= */


/* ---------------------------------------------------------
   QUICK PREVIEW CONTAINER
--------------------------------------------------------- */

.sqs-search-preview-ui {
  z-index: 9999 !important;

  margin-top: 8px !important;

  background: rgba(3, 5, 8, 0.98) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 1px solid rgba(47, 111, 255, 0.55) !important;

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(47, 111, 255, 0.06) !important;

  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;

  overflow: hidden !important;
}


/* ---------------------------------------------------------
   RESULTS SCROLL AREA
--------------------------------------------------------- */

.sqs-search-preview-ui .sqs-search-ui-results {
  background: transparent !important;
}


.sqs-search-preview-ui .sqs-search-ui-list {
  max-height: 520px !important;

  padding: 8px !important;

  background: transparent !important;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(47, 111, 255, 0.45)
    rgba(255, 255, 255, 0.03);
}


/* CHROME / SAFARI SCROLLBAR */

.sqs-search-preview-ui
.sqs-search-ui-list::-webkit-scrollbar {
  width: 7px;
}


.sqs-search-preview-ui
.sqs-search-ui-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.025);
}


.sqs-search-preview-ui
.sqs-search-ui-list::-webkit-scrollbar-thumb {
  background: rgba(47, 111, 255, 0.42);
}


/* =========================================================
   RESULT CARD
   ========================================================= */

.sqs-search-preview-ui .search-result {
  position: relative !important;

  margin: 0 0 7px !important;

  padding: 0 !important;

  background:
    linear-gradient(
      135deg,
      rgba(10, 12, 17, 0.96),
      rgba(4, 5, 8, 0.94)
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-left: 2px solid rgba(47, 111, 255, 0.42) !important;

  cursor: pointer !important;

  overflow: hidden !important;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}


/* GHOST RESULT WORD */

.sqs-search-preview-ui .search-result::before {
  content: "RESULT";

  position: absolute;

  top: -5px;
  right: 14px;

  color: rgba(255, 255, 255, 0.018);

  font-family:
    "Bebas Neue",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size: 58px;

  line-height: 1;

  letter-spacing: 0.02em;

  pointer-events: none;
}


/* BLUE ARROW */

.sqs-search-preview-ui .search-result::after {
  content: "→";

  position: absolute;

  right: 18px;
  bottom: 18px;

  color: #2f6fff;

  font-family: Arial, sans-serif;

  font-size: 16px;

  opacity: 0.8;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}


/* HOVER */

.sqs-search-preview-ui .search-result:hover {
  background:
    linear-gradient(
      135deg,
      rgba(13, 16, 23, 0.99),
      rgba(5, 7, 11, 0.98)
    ) !important;

  border-color: rgba(47, 111, 255, 0.38) !important;
  border-left-color: #2f6fff !important;

  transform: translateY(-1px);

  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(47, 111, 255, 0.04) !important;
}


.sqs-search-preview-ui .search-result:hover::after {
  transform: translateX(4px);

  opacity: 1;
}


/* =========================================================
   RESULT INNER LAYOUT
   ========================================================= */

.sqs-search-preview-ui
.sqs-search-ui-item {
  display: flex !important;

  align-items: stretch !important;

  min-height: 112px !important;

  padding: 0 !important;

  background: transparent !important;
}


/* =========================================================
   IMAGE
   ========================================================= */

.sqs-search-preview-ui
.sqs-main-image-container {
  flex: 0 0 125px !important;

  width: 125px !important;
  min-height: 112px !important;

  margin: 0 !important;

  overflow: hidden !important;

  background: #050609 !important;
}


.sqs-search-preview-ui
.sqs-main-image-container img {
  width: 100% !important;
  height: 100% !important;

  min-height: 112px !important;

  object-fit: cover !important;

  filter:
    brightness(0.84)
    contrast(1.06);

  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}


.sqs-search-preview-ui
.search-result:hover
.sqs-main-image-container img {
  transform: scale(1.035);

  filter:
    brightness(0.96)
    contrast(1.08);
}


/* =========================================================
   TEXT AREA
   ========================================================= */

.sqs-search-preview-ui
.sqs-main-content {
  display: flex !important;

  flex: 1 !important;

  flex-direction: column !important;

  justify-content: center !important;

  min-width: 0 !important;

  padding:
    20px
    58px
    20px
    22px !important;

  background: transparent !important;
}


/* SEARCH RESULT LABEL */

.sqs-search-preview-ui
.sqs-main-content::before {
  content: "SEARCH RESULT";

  display: block;

  margin-bottom: 7px;

  color: #2f6fff;

  font-family:
    "Bebas Neue",
    "Arial Narrow",
    Arial,
    sans-serif;

  font-size: 8px;

  line-height: 1;

  letter-spacing: 0.22em;
}


/* =========================================================
   TITLE
   ========================================================= */

.sqs-search-preview-ui
.sqs-title {
  margin: 0 0 7px !important;

  color: #f5f5f2 !important;

  font-family:
    "Bebas Neue",
    "Arial Narrow",
    Arial,
    sans-serif !important;

  font-size: 25px !important;

  font-weight: 400 !important;

  line-height: 1 !important;

  letter-spacing: 0.025em !important;

  text-transform: uppercase !important;
}


/* =========================================================
   EXCERPT
   ========================================================= */

.sqs-search-preview-ui
.sqs-content {
  max-width: 700px !important;

  color: rgba(238, 238, 235, 0.58) !important;

  font-family:
    "Space Grotesk",
    Arial,
    sans-serif !important;

  font-size: 12px !important;

  line-height: 1.55 !important;

  overflow-wrap: anywhere !important;
}


.sqs-search-preview-ui
.sqs-content span {
  color: inherit !important;

  font: inherit !important;
}


/* =========================================================
   REMOVE DEFAULT WHITE / DIVIDERS
   ========================================================= */

.sqs-search-preview-ui *,
.sqs-search-preview-ui
.sqs-search-container-item {
  box-sizing: border-box;
}


.sqs-search-preview-ui
.sqs-search-container-item {
  background: transparent !important;
}


/* NO RESULTS */

.sqs-search-preview-ui
.search-result-notice {
  padding: 22px !important;

  color: rgba(255, 255, 255, 0.58) !important;

  background: rgba(5, 7, 11, 0.95) !important;

  font-family:
    "Bebas Neue",
    "Arial Narrow",
    Arial,
    sans-serif !important;

  font-size: 16px !important;

  letter-spacing: 0.05em !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .sqs-search-preview-ui
  .sqs-search-ui-list {
    max-height: 68vh !important;

    padding: 6px !important;
  }


  .sqs-search-preview-ui
  .sqs-search-ui-item {
    display: block !important;

    min-height: 0 !important;
  }


  .sqs-search-preview-ui
  .sqs-main-image-container {
    width: 100% !important;

    height: 150px !important;
    min-height: 150px !important;
  }


  .sqs-search-preview-ui
  .sqs-main-image-container img {
    height: 150px !important;
    min-height: 150px !important;
  }


  .sqs-search-preview-ui
  .sqs-main-content {
    padding:
      18px
      46px
      20px
      17px !important;
  }


  .sqs-search-preview-ui
  .sqs-title {
    font-size: 23px !important;
  }


  .sqs-search-preview-ui
  .sqs-content {
    font-size: 11px !important;

    line-height: 1.5 !important;
  }


  .sqs-search-preview-ui
  .search-result::before {
    font-size: 44px;
  }

}

/* =========================================================
   THE LORD RAZU — PUBLIC HEADER SEARCH
   Spotify / YouTube-inspired search treatment
   Works with the updated public-nav HTML.
   ========================================================= */

/* Give the desktop nav enough breathing room for the search pill. */
@media screen and (min-width: 769px) {
  .razu-public-page-nav__inner {
    gap: clamp(18px, 1.8vw, 30px) !important;
  }
}


/* =========================================================
   DESKTOP SEARCH
   ========================================================= */

.razu-public-search {
  display: flex;
  align-items: center;

  width: clamp(220px, 20vw, 320px);
  min-width: 180px;
  min-height: 42px;

  margin: 0 2px;
  padding: 0 16px;

  background: rgba(255, 255, 255, 0.045);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.012),
    0 8px 22px rgba(0, 0, 0, 0.14);

  transition:
    width 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}


.razu-public-search:hover {
  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.20);
}


.razu-public-search:focus-within {
  background: rgba(6, 8, 13, 0.94);

  border-color: rgba(47, 111, 255, 0.72);

  box-shadow:
    0 0 0 1px rgba(47, 111, 255, 0.10),
    0 10px 28px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(47, 111, 255, 0.09);
}


/* =========================================================
   SEARCH ICON
   ========================================================= */

.razu-public-search__icon,
.razu-public-search-mobile__icon {
  position: relative;

  display: block;

  width: 16px;
  height: 16px;

  flex: 0 0 16px;

  margin-right: 12px;

  border: 1.7px solid rgba(242, 245, 250, 0.78);
  border-radius: 50%;

  pointer-events: none;
}


.razu-public-search__icon::after,
.razu-public-search-mobile__icon::after {
  content: "";

  position: absolute;

  right: -5px;
  bottom: -2px;

  width: 7px;
  height: 1.7px;

  background: rgba(242, 245, 250, 0.78);

  border-radius: 999px;

  transform: rotate(45deg);
  transform-origin: left center;
}


/* =========================================================
   DESKTOP SEARCH INPUT
   ========================================================= */

.razu-public-search__input {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  color: #f6f7fb !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  outline: 0 !important;

  box-shadow: none !important;

  -webkit-appearance: none;
  appearance: none;

  font-family: "Space Grotesk", Arial, sans-serif !important;

  font-size: 13px !important;
  font-weight: 400 !important;

  line-height: 1.2 !important;

  letter-spacing: 0 !important;

  text-transform: none !important;
}


.razu-public-search__input::placeholder {
  color: rgba(225, 229, 238, 0.48) !important;

  opacity: 1 !important;
}


/* Remove browser search decorations so the field stays clean. */
.razu-public-search input[type="search"]::-webkit-search-decoration,
.razu-public-search input[type="search"]::-webkit-search-cancel-button,
.razu-public-search input[type="search"]::-webkit-search-results-button,
.razu-public-search input[type="search"]::-webkit-search-results-decoration,
.razu-public-search-mobile input[type="search"]::-webkit-search-decoration,
.razu-public-search-mobile input[type="search"]::-webkit-search-cancel-button,
.razu-public-search-mobile input[type="search"]::-webkit-search-results-button,
.razu-public-search-mobile input[type="search"]::-webkit-search-results-decoration {
  display: none !important;
}


/* =========================================================
   MID-SIZE DESKTOP / TABLET LANDSCAPE
   Compress the search before the nav starts wrapping.
   ========================================================= */

@media screen and (min-width: 769px) and (max-width: 1180px) {
  .razu-public-page-nav__inner {
    gap: 16px !important;

    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .razu-public-page-nav__link {
    font-size: 14px !important;
  }

  .razu-public-search {
    width: clamp(170px, 18vw, 230px);
    min-width: 150px;

    padding-left: 13px;
    padding-right: 13px;
  }

  .razu-public-search__input {
    font-size: 12px !important;
  }
}


/* =========================================================
   MOBILE SEARCH
   Search icon sits immediately left of the MENU button.
   Focusing the field expands it like a compact app header.
   ========================================================= */

.razu-public-search-mobile {
  display: none;
}


@media screen and (max-width: 768px) {

  /* Desktop search is inside the collapsed menu, so hide it there. */
  .razu-public-search {
    display: none !important;
  }


  .razu-public-search-mobile {
    position: absolute;

    top: 8px;
    right: 88px;

    z-index: 11;

    display: flex !important;

    align-items: center;

    width: 42px;
    height: 40px;

    padding: 0 11px;

    overflow: hidden;

    background: rgba(4, 6, 10, 0.58);

    border: 1px solid rgba(47, 111, 255, 0.36);
    border-radius: 999px;

    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);

    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.24),
      0 0 16px rgba(47, 111, 255, 0.06);

    transition:
      width 0.26s ease,
      background 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease;
  }


  .razu-public-search-mobile:hover {
    border-color: rgba(47, 111, 255, 0.55);
  }


  .razu-public-search-mobile:focus-within {
    width: min(270px, calc(100vw - 112px));

    background: rgba(4, 6, 10, 0.95);

    border-color: rgba(47, 111, 255, 0.72);

    box-shadow:
      0 12px 34px rgba(0, 0, 0, 0.34),
      0 0 22px rgba(47, 111, 255, 0.10);
  }


  .razu-public-search-mobile__icon {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    margin-right: 13px;
  }


  .razu-public-search-mobile input[type="search"] {
    display: block;

    width: 205px;
    min-width: 205px;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    -webkit-appearance: none;
    appearance: none;

    font-family: "Space Grotesk", Arial, sans-serif !important;

    font-size: 12px !important;
    font-weight: 400 !important;

    line-height: 1.2 !important;

    letter-spacing: 0 !important;

    text-transform: none !important;
  }


  .razu-public-search-mobile input[type="search"]::placeholder {
    color: rgba(232, 235, 242, 0.46) !important;

    opacity: 1 !important;
  }


  /* Keep MENU above an expanded search field if they overlap. */
  .razu-public-page-nav__mobile-toggle {
    z-index: 12 !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 430px) {

  .razu-public-search-mobile {
    right: 84px;
  }


  .razu-public-search-mobile:focus-within {
    width: calc(100vw - 104px);
  }


  .razu-public-search-mobile input[type="search"] {
    width: calc(100vw - 155px);
    min-width: calc(100vw - 155px);
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.razu-public-search:focus-within,
.razu-public-search-mobile:focus-within {
  outline: none !important;
}


.razu-public-search__input:focus-visible,
.razu-public-search-mobile input[type="search"]:focus-visible {
  outline: none !important;
}

/* =========================================================
   PUBLIC HEADER SEARCH — MOBILE POSITIONING FIX
   Keeps SEARCH + MENU as a compact top-right control pair.
   Search expands leftward without crowding the MENU button.
   ========================================================= */

@media screen and (max-width: 768px) {

  .razu-public-page-nav {
    position: relative !important;
    min-height: 64px !important;
    padding-top: 12px !important;
  }

  .razu-public-page-nav__mobile-toggle {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;

    min-height: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    border-radius: 10px !important;

    z-index: 12 !important;
  }

  .razu-public-search-mobile {
    position: absolute !important;

    top: 12px !important;
    right: 132px !important;

    width: 44px !important;
    height: 44px !important;

    padding: 0 13px !important;

    margin: 0 !important;

    border-radius: 999px !important;

    z-index: 11 !important;

    transition:
      width 0.26s ease,
      right 0.26s ease,
      background 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease !important;
  }

  .razu-public-search-mobile:focus-within {
    width: min(270px, calc(100vw - 164px)) !important;
    right: 132px !important;
  }

  .razu-public-search-mobile__icon {
    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px !important;

    margin-right: 12px !important;
  }

  .razu-public-search-mobile input[type="search"] {
    width: 210px !important;
    min-width: 210px !important;
  }

}


/* SMALLER PHONES */
@media screen and (max-width: 430px) {

  .razu-public-page-nav__mobile-toggle {
    right: 14px !important;
  }

  .razu-public-search-mobile {
    right: 128px !important;
  }

  .razu-public-search-mobile:focus-within {
    width: calc(100vw - 156px) !important;
    right: 128px !important;
  }

  .razu-public-search-mobile input[type="search"] {
    width: calc(100vw - 210px) !important;
    min-width: calc(100vw - 210px) !important;
  }

}

/* =========================================================
   PUBLIC HEADER SEARCH — MOBILE TAP / FOCUS FIX
   Makes the collapsed magnifying-glass control actually
   focus the search input when tapped.
   ========================================================= */

@media screen and (max-width: 768px) {

  .razu-public-search-mobile {
    cursor: text !important;
  }

  /*
   * While collapsed, let the search input cover the whole
   * pill invisibly so tapping anywhere on the magnifying
   * glass focuses the field.
   */
  .razu-public-search-mobile input[type="search"] {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;

    padding: 0 !important;

    opacity: 0 !important;

    cursor: text !important;

    z-index: 2 !important;
  }

  /*
   * Once focused, restore the input as the visible text field.
   */
  .razu-public-search-mobile:focus-within input[type="search"] {
    position: static !important;
    inset: auto !important;

    width: 210px !important;
    min-width: 210px !important;
    height: auto !important;

    opacity: 1 !important;

    z-index: auto !important;
  }

  .razu-public-search-mobile__icon {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

}

@media screen and (max-width: 430px) {

  .razu-public-search-mobile:focus-within input[type="search"] {
    width: calc(100vw - 210px) !important;
    min-width: calc(100vw - 210px) !important;
  }

}

/* =========================================================
   PUBLIC HEADER SEARCH — MOBILE EXPANSION FIX
   Uses both :focus-within and :has(input:focus) so iOS Safari
   reliably expands the search pill after the input receives focus.
   ========================================================= */

@media screen and (max-width: 768px) {

  .razu-public-search-mobile {
    box-sizing: border-box !important;

    min-width: 44px !important;
    max-width: none !important;

    transform-origin: right center !important;
  }

  .razu-public-search-mobile:focus-within,
  .razu-public-search-mobile:has(input[type="search"]:focus) {
    width: min(270px, calc(100vw - 164px)) !important;

    background: rgba(4, 6, 10, 0.96) !important;

    border-color: rgba(47, 111, 255, 0.76) !important;

    box-shadow:
      0 12px 34px rgba(0, 0, 0, 0.34),
      0 0 24px rgba(47, 111, 255, 0.12) !important;
  }

  .razu-public-search-mobile:focus-within input[type="search"],
  .razu-public-search-mobile:has(input[type="search"]:focus) input[type="search"] {
    position: static !important;
    inset: auto !important;

    display: block !important;

    width: 210px !important;
    min-width: 0 !important;
    height: auto !important;

    opacity: 1 !important;

    color: #ffffff !important;

    pointer-events: auto !important;

    z-index: auto !important;
  }

}

@media screen and (max-width: 430px) {

  .razu-public-search-mobile:focus-within,
  .razu-public-search-mobile:has(input[type="search"]:focus) {
    width: calc(100vw - 156px) !important;
  }

  .razu-public-search-mobile:focus-within input[type="search"],
  .razu-public-search-mobile:has(input[type="search"]:focus) input[type="search"] {
    width: calc(100vw - 210px) !important;
  }

}

/* =========================================================
   PUBLIC HEADER SEARCH — MOBILE WIDE FIELD
   Keep the search field visibly open on mobile so typed text
   can always be seen. MENU remains on the top right.
   ========================================================= */

@media screen and (max-width: 768px) {

  .razu-public-search-mobile,
  .razu-public-search-mobile:focus-within,
  .razu-public-search-mobile:has(input[type="search"]:focus) {
    position: absolute !important;

    top: 12px !important;
    left: 16px !important;
    right: 132px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 44px !important;

    padding: 0 14px !important;

    overflow: visible !important;

    display: flex !important;
    align-items: center !important;

    background: rgba(4, 6, 10, 0.78) !important;

    border: 1px solid rgba(47, 111, 255, 0.38) !important;
    border-radius: 999px !important;

    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
  }

  .razu-public-search-mobile:focus-within,
  .razu-public-search-mobile:has(input[type="search"]:focus) {
    background: rgba(4, 6, 10, 0.96) !important;
    border-color: rgba(47, 111, 255, 0.72) !important;
  }

  .razu-public-search-mobile__icon {
    position: relative !important;

    display: block !important;

    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px !important;

    margin: 0 13px 0 0 !important;

    pointer-events: none !important;

    z-index: 1 !important;
  }

  .razu-public-search-mobile input[type="search"],
  .razu-public-search-mobile:focus-within input[type="search"],
  .razu-public-search-mobile:has(input[type="search"]:focus) input[type="search"] {
    position: static !important;
    inset: auto !important;

    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;

    color: #ffffff !important;
    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    pointer-events: auto !important;
    cursor: text !important;

    z-index: 2 !important;
  }

  .razu-public-search-mobile input[type="search"]::placeholder {
    color: rgba(232, 235, 242, 0.50) !important;
    opacity: 1 !important;
  }

}


/* SMALL MOBILE */
@media screen and (max-width: 430px) {

  .razu-public-search-mobile,
  .razu-public-search-mobile:focus-within,
  .razu-public-search-mobile:has(input[type="search"]:focus) {
    left: 14px !important;
    right: 128px !important;

    width: auto !important;
  }

}

/* COUNTDOWN PAGE ONLY — MOBILE MUSIC BUTTON */

@media screen and (max-width: 768px) {

  #music-toggle.countdown-music-toggle {
    position: fixed !important;

    top: 68px !important;
    right: 16px !important;

    margin: 0 !important;

    z-index: 10 !important;
  }

}