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

html {
   scroll-behavior: smooth;
}

:root {
   --radius-md: 8px;
   --radius-lg: 12px;
   --section-pad: clamp(20px, 2vw, 30px);
   --gap-md: clamp(20px, 3vw, 40px);
   --container: 1200px;
   --container-wide: 1000px;
}

:root[data-theme="dark"] {
   --font-display: "Oxanium", system-ui, -apple-system, "Segoe UI", Roboto,
      Arial, sans-serif;
   --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
      sans-serif;
   --bg: #000000;
   --ink: #eee5e5;
   --accent: #ff2fb3;
   --eyebrow: #b26bff;

   --bg-page: #000000;

   --bg-card: rgba(255, 255, 255, 0.09);
   --glass: saturate(1.5) blur(14px);
   --glass-border: 1px solid rgba(255, 255, 255, 0.12);

   --shadow-btn: 0 8px 24px rgba(222, 37, 235, 0.452);

   --link: #ff8af1;
   --link-hover: #efa7ff;
}

:root[data-theme="bubblegum"] {
   --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI",
      Roboto, Arial, sans-serif;
   --font-sans: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
      sans-serif;
   --bg: #f5f0f0;
   --ink: #c80380;
   --accent: #384fe6;
   --eyebrow: #862fe3;

   --bg-page: #ffffff;

   --bg-card: rgba(255, 47, 179, 0.354);
   --glass: saturate(1.25) blur(12px);
   --glass-border: 1px solid rgba(255, 47, 179, 0.25);

   --shadow-btn: 0 8px 24px rgba(94, 200, 27, 0.35);

   --link: #384fe6;
   --link-hover: #7182ef;
}

:root[data-theme="editorial"] {
   --font-display: "Playfair Display", "Times New Roman", serif;
   --font-sans: "Source Serif 4", "Georgia", serif;
   --bg: #f2f0ec;
   --ink: #161616;
   --accent: #9f1a06;
   --eyebrow: #9f1a06;

   --bg-page: #a1a1a3;

   --bg-card: #ffffff;
   --glass: none;
   --glass-border: 1px solid rgba(0, 0, 0, 0.06);

   --shadow-btn: 0 10px 26px rgba(0, 0, 0, 0.12);

   --link: #161616;
   --link-hover: #98635b;
}

body {
   font-family: var(--font-sans);
   background: var(--bg-page);
   color: var(--ink);
   line-height: 1.6;
}

.site-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   background: var(--bg-card);
   backdrop-filter: var(--glass);
   -webkit-backdrop-filter: var(--glass);
   border-bottom: var(--glass-border);
   height: 64px;
}

.nav-wrap {
   max-width: var(--container-wide);
   margin: 0 auto;
   height: 64px;
   padding: 0 clamp(16px, 4vw, 24px);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.brand {
   font-family: var(--font-display);
   font-size: clamp(14px, 1.8vw, 20px);
   letter-spacing: 0.5px;
   color: var(--ink);
   text-decoration: none;
   font-style: italic;
   transition: opacity 160ms ease;
   text-transform: uppercase;
}

.brand:hover {
   opacity: 0.9;
}

.version-switch {
   display: grid;
   grid-auto-flow: column;
   gap: 5px;
}

.theme-pill {
   appearance: none;
   border: 0;
   border-radius: var(--radius-lg);
   padding: 10px 14px;
   font: clamp(12px, 1.8vw, 18px) var(--font-display);
   font-weight: bolder;
   color: var(--ink);
   background: transparent;
   position: relative;
   cursor: pointer;
   transition: transform 120ms ease, opacity 120ms ease;
   outline: none;
}

.theme-pill:hover {
   opacity: 0.9;
   transform: translateY(-1px);
   text-decoration: underline;
}

.hero {
   min-height: 100svh;
   display: grid;
   place-items: center;
   text-align: center;
   padding: 48px 16px;
   position: relative;
   isolation: isolate;
   overflow: clip;
}

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

:root[data-theme="dark"] .hero {
   background: url("../images/dark-hero.jpg") center/cover no-repeat;
}
:root[data-theme="dark"] .hero::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0.62) 100%
   );
}

:root[data-theme="bubblegum"] .hero {
   background: url("../images/bubblegum-hero.jpg") center/cover no-repeat;
}

:root[data-theme="editorial"] .hero {
   background: url("../images/editorial-hero.jpg") center/cover no-repeat;
   filter: grayscale(100%);
   color: var(--bg);
   font-style: italic;
}

.hero h1 {
   font-family: var(--font-display);
   letter-spacing: 6px;
   margin: 0 0 10px;
   font-size: clamp(36px, 6vw, 80px);
   line-height: 1;
}

.hero h2 {
   letter-spacing: 6px;
   margin-bottom: clamp(16px, 2.5vw, 32px);
   font-weight: 600;
   font-size: clamp(14px, 2vw, 20px);
   line-height: 1.5;
}

.hero span {
   font-family: var(--font-display);
   letter-spacing: 6px;
   margin: 0 0 20px;
   font-weight: 400;
   font-size: clamp(14px, 2vw, 20px);
   line-height: 1.5;
}

.section {
   max-width: var(--container);
   margin-inline: auto;
   padding-block: var(--section-pad);
}

.featured-inner {
   max-width: 70ch;
   margin-inline: auto;
   width: 100%;
}

.eyebrow {
   font-family: var(--font-sans);
   font-weight: bolder;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   font-size: clamp(14px, 1.8vw, 18px);
   line-height: 1.5;
   color: var(--eyebrow);
   margin: 8px 0 6px;
}

.titles {
   font-family: var(--font-display);
   font-size: clamp(22px, 2.6vw, 32px);
   letter-spacing: 0.4px;
   color: var(--ink);
   line-height: 1.15;
   margin: 8px 0 6px;
}

.btn-primary {
   display: inline-flex;
   margin-top: 18px;
   padding: 16px 28px;
   border-radius: 9999px;
   background: var(--accent);
   color: var(--bg);
   text-decoration: none;
   font-weight: 600;
   font-family: var(--font-display);
   box-shadow: var(--shadow-btn);
   transition: transform 140ms ease, box-shadow 180ms ease, filter 160ms ease;
}

.btn-primary:hover {
   filter: brightness(1.2);
   color: var(--link-hover);
}

.btn-primary:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
}

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

.song-title {
   padding-block: clamp(12px, 1.5vw, 24px);
}

.meta {
   margin: 0 0 10px;
   line-height: 1.6;
   font-size: clamp(14px, 1.8vw, 16px);
   font-weight: 600;
   color: var(--ink);
}

.grid-3col {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--gap-md);
   align-items: center;
   padding-block: clamp(12px, 1.5vw, 24px);
}

.media-square {
   width: 100%;
   object-fit: cover;
   aspect-ratio: 1 / 1;
   border-radius: var(--radius-lg);
}

.timeline {
   position: relative;
   max-width: var(--container-wide);
   margin: clamp(32px, 5vh, 48px) auto 0;
   padding-inline: clamp(8px, 3vw, 16px);
   list-style: none;
}

.timeline::before {
   content: "";
   position: absolute;
   inset-block: 0;
   left: 50%;
   width: 2px;
   background: rgba(0, 0, 0, 0.12);
   transform: translateX(-50%);
}

.timeline-item {
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px;
   margin-block: 32px;
}

.timeline-item::before {
   content: "";
   position: absolute;
   top: 0.75em;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 14px;
   height: 14px;
   border-radius: 999px;
   border: 3px solid var(--accent);
   background: var(--bg-page);
}

.timeline-item:nth-child(odd) .timeline-meta {
   grid-column: 1;
   text-align: right;
}
.timeline-item:nth-child(odd) .timeline-content {
   grid-column: 2;
}

.timeline-item:nth-child(even) .timeline-meta {
   grid-column: 2;
   text-align: left;
}
.timeline-item:nth-child(even) .timeline-content {
   grid-column: 1;
   text-align: right;
}

.timeline-meta {
   font-family: var(--font-display);
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   font-size: 12px;
   color: var(--accent);
   align-self: flex-start;
}

.timeline-title {
   font-family: var(--font-display);
   font-size: clamp(18px, 2.1vw, 22px);
   margin-bottom: 4px;
}

.timeline-note {
   font-size: clamp(14px, 1.8vw, 16px);
   line-height: 1.6;
}

.embed iframe {
   width: 100%;
   display: block;
   aspect-ratio: var(--ratio-embed);
   height: auto;
   border-radius: var(--radius-lg);
   border: 0;
   box-shadow: 0 0 30px var(--hero-purple);
}

.song-links {
   display: flex;
   gap: 10px;
   margin-top: 8px;
   flex-direction: column;
}

.links {
   color: var(--accent);
   text-decoration: none;
   font-family: var(--font-display);
}

.links:hover {
   filter: brightness(1.2);
   text-decoration: underline;
}

.links:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
   text-decoration: underline;
}

.grid-2col {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--gap-md);
   align-items: center;
}

.tidal-embed {
   position: relative;
   width: 100%;
   max-width: var(--container-wide);
   margin-inline: auto;
   aspect-ratio: 16 / 9;
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: 0 0 30px var(--hero-purple);
}

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

footer {
   color: var(--ink);
   position: relative;
   padding: 56px 20px;
   overflow: hidden;
}

.site-footer > * {
   position: relative;
   z-index: 1;
}

:root[data-theme="dark"] .site-footer {
   background: url("../images/dark-footer.jpg") center/cover no-repeat;
}
:root[data-theme="dark"] .site-footer::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.8) 100%
   );
}

:root[data-theme="bubblegum"] .site-footer {
   background: url("../images/bubblegum-footer.jpg") center/cover no-repeat;
}

:root[data-theme="bubblegum"] .site-footer::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background: linear-gradient(
      180deg,
      rgba(125, 231, 255, 0.6) 0%,
      rgba(125, 231, 255, 0.6) 100%
   );
}

:root[data-theme="editorial"] .site-footer {
   background: url("../images/editorial-footer.jpg") center/cover no-repeat;
}

.row {
   position: relative;
   max-width: var(--container-wide);
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

.column ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.column li + li {
   margin-top: 8px;
}

.artist-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.reader-show[hidden] {
   display: block;
}

.reader-show[hidden] .btn-primary {
   display: inline-flex;
}

a {
   color: var(--link);
   text-decoration: none;
}
a:hover {
   color: var(--link-hover);
}

.glass-section {
   position: relative;
   background: var(--bg-card);
   border: var(--glass-border);
   border-radius: var(--radius-lg);
   padding: var(--section-pad);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
   overflow: clip;
   padding-inline: clamp(16px, 4vw, 24px);
   margin-block: var(--gap-md);
}

@media (max-width: 800px) {
   .hero {
      min-height: 75svh;
   }

   .section {
      max-width: 400px;
      padding-inline: 20px;
   }

   .row {
      grid-template-columns: 1fr;
      gap: 20px;
      justify-items: center;
   }

   .column {
      max-width: 400px;
      margin-inline: auto;
   }

   .grid-2col {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .swap > :first-child {
      order: 2; /* image */
   }

   .swap > :last-child {
      order: 1; /* text */
   }

   .grid-3col {
      grid-template-columns: 1fr;
      gap: 20px;
      justify-items: center;
   }

   .embed iframe {
      aspect-ratio: var(--ratio-embed);
      height: auto;
      border-radius: 6px;
   }

   .featured-header {
      padding-block-end: clamp(24px, 3vw, 48px);
   }

   .nav-wrap {
      height: 56px;
      justify-content: space-around;
      column-gap: 10px;
   }
   .theme-pill {
      padding: 8px 10px;
      font-size: 12px;
   }
}