@import './variables.css';

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg-light);
  color: var(--text-light);
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
}

body {
  /* default (light) background */
  background-image: url('/images/bg-light.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  /* ensure your logo, nav, etc. sit on top */
  position: relative;
  z-index: 0;
  color: var(--text-light);
  padding-bottom: calc(var(--footer-reserve) + 450px);
  /* +20px breathing room */

}

:root {
  /* fallback; JS will overwrite this with the real footer height */
  --footer-reserve: 88px;
}

/* Dark‐mode swap */
html[data-theme="dark"] body {
  background-image: url('/images/bg-dark.png');
  color: var(--text-dark);
}

html[data-theme="dark"] a.btn:hover,
html[data-theme="dark"] button:hover {
  background: var(--btn-dark-hover-bg);
}

/* when dark theme is active, swap them */
html[data-theme="dark"] .logo-light {
  display: none;
}

html[data-theme="dark"] .logo-dark {
  display: inline-block;
}

/* when dark theme flips on, swap their opacity */
html[data-theme="dark"] .logo-light {
  opacity: 0;
}

html[data-theme="dark"] .logo-dark {
  opacity: 1;
}

.logo-light {
  opacity: 1;
}

.logo-dark {
  opacity: 0;
}

html[data-theme="dark"] .logo-light {
  opacity: 0;
}

html[data-theme="dark"] .logo-dark {
  opacity: 1;
}

html[data-theme="dark"] header {
  background: var(--bar-dark);
  color: var(--header-text-dark);
}

html[data-theme="dark"] a.btn,
html[data-theme="dark"] button {
  background: rgb(140 232 157 / 60%);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

html[data-theme="dark"] a.btn:hover,
html[data-theme="dark"] button:hover {
  background: rgba(126, 200, 227, 0.3);
}




h1,
h2,
h3 {
  font-family: 'Pacifico', cursive;
  color: var(--peach-pink);
  text-shadow: 0 2px 4px var(--sky-blue);
  margin: 0.5em 0;
}

/* Button class + native <button> element */
a.btn,
button {
  display: inline-block;
  padding: 0.6em 1.5em;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 25px;
  background: rgb(108 182 255 / 67%);
  /* Sky-blue tint frosted glass */
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

a.btn:hover,
button:hover {
  background: rgba(126, 200, 227, 0.35);
  /* slightly darker blue tint when hovered */
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

::selection {
  background-color: var(--sky-blue);
  color: white;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-6px);
  }

  50% {
    transform: translateY(3px);
  }
}

.leaf-shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/leaf-shadow.png') repeat-y center top;
  pointer-events: none;
  opacity: 0.25;
  /* subtle shadows */
  animation: moveShadow 30s linear infinite;
  z-index: 0;
  /* below content but above bg */
}

@keyframes moveShadow {
  from {
    background-position-y: 0;
  }

  to {
    background-position-y: -1000px;
  }
}

/* juice-splash.png effect */
.juice-splash {
  position: absolute;
  width: 80px;
  /* tweak to taste */
  height: auto;
  pointer-events: none;
  /* don’t block clicks */
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 0.8;
  animation: splash-fade 1s forwards;
  user-select: none;

}

@keyframes splash-fade {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

/* Site‐wide nav */
/* 1) Ensure the header spans full width and uses box-sizing */
/* ── Header wrapper ── */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  backdrop-filter: blur(8px);
  background-color: rgba(255, 127, 80, 0.386);
  height: 5.5rem;
  z-index: 1000;
  align-content: center;
}

header .logo img {
  height: 80px;
  /* bump up from 64px to 80px (or your preferred size) */
  width: auto;
}

/* Make .nav-container a simple right-aligned row on desktop */
.nav-container {
  display: flex;
  justify-content: flex-end;
  /* links to the right */
  align-items: center;
  gap: 1.75rem;
  max-width: 1625px;
  margin: 0 auto;
  padding: .5em 1em;
}

/* Put your existing .logo (the theme-toggle) on the far left */
header .logo {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.logo:hover {
  animation: bounce 0.6s ease;
  filter: drop-shadow(0 4px 10px var(--sky-blue));

}

/* hide the dark‐mode logo by default */
.logo-dark {
  display: none;
}

/* ─── Logo cross‐fade ─── */
.logo-light,
.logo-dark {
  position: absolute;
  top: -40px;
  left: 150px;
  transform: translateX(-93%);
  transition: opacity 0.3s ease;
}

/* light logo shown by default, dark logo hidden */
.logo-light {
  opacity: 1;
}

.logo-dark {
  opacity: 0;
}

/* 4) Push the toggle all the way to the right */
#theme-toggle {
  margin-left: auto;
  /* eats available space */
  flex-shrink: 0;
  color: var(--btn-text);
  background: var(--sky-blue);
  border-radius: 50%;
  transition: transform 0.3s, box-shadow 0.3s;
}

#theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px var(--peach-pink);
}



nav a {
  margin: 0 1em;
  color: white;
}

/* === HERO CLEAN VERSION === */
.home-hero {
  display: block;
  justify-content: center;
  align-items: center;
  padding: calc(5.5rem + 24px) var(--page-gutter) calc(var(--footer-height, 120px) + 28px);
  /* ⬅ dynamic space */
  max-width: 1200px;
  margin: 0 auto;
}

.hero-frosted {
  position: relative;
  width: 100%;
  max-width: 1380px;
  border-radius: 16px;
  overflow: hidden;
  min-height: clamp(420px, 43svh, 720px);

  background:
    linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 40%),
    radial-gradient(130% 95% at 50% 55%, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .35) 100%);

  /* crop: adjust until hands + decks are framed */
  background-position: 50% 86%;
  display: flex;
  flex-direction: column;
  /* stack logo, tagline, button vertically */
  justify-content: center;
  /* center vertically within hero */
  align-items: center;
  /* center horizontally */
  text-align: center;
  /* center text inside */
  position: relative;
  /* keep overlay pseudo-element working */
  box-shadow:
    0 0 60px 40px rgba(0, 0, 0, .22),
    /* outer glow → blends into page */
    inset 0 0 60px 24px rgba(0, 0, 0, .18);
  /* inner edge soften */
}

/* sits above .hero-slides, below text */
.hero-frosted::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;

  /* darken edges + base vignette for readability */
  background:
    linear-gradient(to top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 38%),
    radial-gradient(130% 95% at 50% 55%,
      rgba(0, 0, 0, .26) 0%,
      rgba(0, 0, 0, 0) 46%,
      rgba(0, 0, 0, .36) 100%);

  /* this blurs the slides behind it */
  backdrop-filter: blur(2px) saturate(.95) contrast(.98);
  -webkit-backdrop-filter: blur(2px) saturate(.95) contrast(.98);
}

.hero-logo-wrapper {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 8px;
  animation: float 4.5s ease-in-out infinite;
  z-index: 2;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.hero-logo {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.2));
  transition: opacity 0.3s ease;
}

.hero-tagline {
  z-index: 2;
  padding: .5rem 1rem;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(4px);
  border-radius: 10px;
  font-size: 2.5em;
  font-weight: bold;
  color: var(--peach-pink);
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgb(107 181 255);
  margin-top: -0;
}

html[data-theme="dark"] .hero-tagline {
  color: #b658fb;
  text-shadow: 0 2px 6px rgb(117 217 138);
}

.cta-btn {
  padding: 0.8em 2em;
  font-size: 1.2em;
  background: var(--sky-blue);
  /* cool default */
  color: #fff;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.cta-btn:hover {
  transform: scale(1.1);
  background: var(--coral-accent);
  /* warm hover, ties to nav */
}

/* make z-index effective by positioning these */
.hero-logo-wrapper,
.hero-tagline,
.cta-btn {
  position: relative;
  z-index: 2;
}

/* === HERO MOBILE TWEAKS === */
@media (max-width: 600px) {
  .home-hero {
    height: 85vh;
    padding: 0 1rem;
  }

  .hero-frosted {
    min-height: 60vh;
    border-radius: 12px;
    background-position: 50% 90%;
  }

  .hero-logo-wrapper {
    max-width: 300px;
    animation: none;
    /* reduce float animation on small screens */
  }

  .hero-tagline {
    font-size: clamp(1.4rem, 6vw, 2rem);
    margin-bottom: 1rem;
  }

  .cta-btn {
    font-size: 1rem;
    padding: 0.75em 1.75em;
  }
}


/* keep blur/vignette OVER the photo but UNDER content */
.hero-frosted::before,
.hero-frosted::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

.hero-slides {
  z-index: 0;
}

/* the photos */
.hero-frosted::after {
  z-index: 1;
}

/* blur + vignette */
.hero-content,
.hero-tagline,
.cta-btn,
.hero-logo-wrapper {
  position: relative;
  z-index: 2;
  /* your text & buttons */
}


/* light show by default, dark hidden */
.hero-logo-light {
  opacity: 1;
}

.hero-logo-dark {
  opacity: 0;
}

/* swap on dark mode */
html[data-theme="dark"] .hero-logo-light {
  opacity: 0;
}

html[data-theme="dark"] .hero-logo-dark {
  opacity: 1;
}



.hero-logo,
.hero-img {
  max-width: 500px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.2));
}





html[data-theme="dark"] .hero-tagline {
  color: #b658fb;
  text-shadow: 0 2px 6px rgb(117 217 138);
}

.cta-btn {
  padding: 0.8em 2em;
  font-size: 1.2em;
  background: var(--sky-blue);
  color: #fff;
  border-radius: 30px;
  transition: all 0.3s ease;

}

.cta-btn:hover {
  transform: scale(1.1);
  background: var(--peach-pink);
}

/* Slides sit behind content and crossfade */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* below overlay & text */
  border-radius: inherit;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 86%;
  /* same crop as before */
  filter: brightness(.92) saturate(.95);
  opacity: 0;
  transition: opacity 1.2s ease;
  /* fade duration */
  will-change: opacity;
}

.hero-slide.is-showing {
  opacity: 1;
}

@media (max-width: 600px) {
  .hero-slide {
    background-position: 50% 90%;
  }
}

/* Main content wrapper */
main {
  padding-top: calc(1em +
      /*header height*/
      19px);
  padding-bottom: calc(1em +
      /*footer height*/
      50px);
  max-width: 960px;
  margin: 0 auto;
  color: inherit;
  text-decoration: none;
  /*border-bottom: 2px solid var(--sky-blue);*/
  transition: border-bottom-color 0.2s ease;
}

main a:hover {
  border-bottom-color: var(--peach-pink);
}

/* Container for all mixes */
.mixes-page {
  max-width: 900px;
  margin: 17px auto 80px;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ─── Each mix card (2-column grid) ───────────────────────────────── */

.mix-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  align-items: start;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  width: 100%;
  min-width: 0;
}

.mix-card:hover {
  transform: translateY(-6px);
}

.mix-card,
.mix-player,
.waveform-container {
  min-width: 0;
}

/* left column: cover art */
.mix-cover img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* ─── Right column: the “player” ──────────────────────────────────────── */

.mix-player {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* center waveform, title & controls */
  width: 100%;
  min-width: 0;
}

/* Center just the title and the controls themselves */
.mix-player .mix-title {
  text-align: center;
}

.mix-player .btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--peach-pink), var(--sky-blue));
  border: 2px solid var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.mix-player .btn:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.mix-player .btn:active {
  transform: scale(1.05);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .mix-player .btn {
  background: linear-gradient(135deg, var(--sky-blue), var(--peach-pink));
  border-color: var(--btn-dark-bg);
  color: var(--text-dark);
}


/* title */
.mix-title {
  font-family: 'Pacifico', cursive;
  font-size: 1.25rem;
  color: var(--peach-pink);
  margin: 0 0 0.5rem;
  text-align: center;
}

/* waveform */
.mix-player .waveform {
  width: 100%;
  height: 64px;
  margin-bottom: 0.5rem;
}

.mix-time {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0.5rem;
  white-space: nowrap;
}

.waveform-container {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  min-width: 0;
}

/* make the waveform fill that middle column */
.waveform-container .waveform {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  height: 64px;
  /* match your WaveSurfer height */
  overflow: hidden;
}

/* Style each bar */
.waveform-bar {
  flex: 0 0 3px;
  height: 22px;
  background: var(--wave-form-wave);
  transition: height 0.2s ease-in-out;
  border-radius: 2px;
}

/* “Filled” bars during playback */
.waveform-bar.active {
  height: 18px;
  background: var(--wave-form-progress);
}

/* style the clocks */
.waveform-container .time-elapsed,
.waveform-container .time-duration {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: var(--text-muted);
  white-space: nowrap;
  text-align: center;
}


/* controls row */
.mix-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* all buttons in the player */
.mix-controls .btn {
  padding: 0.4em 0.8em;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 25px;
  background: rgb(108 182 255 / 67%);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mix-controls .btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  background: rgba(126, 200, 227, 0.35);
}



/* details row: two columns */
.mix-card .mix-details {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.mix-card,
.mix-player,
.waveform-container {
  min-width: 0;
}

@media (max-width: 600px) {
  .mix-card .mix-details {
    grid-template-columns: 1fr;
  }
}

/* summary styling */
.mix-card details summary {
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--peach-pink);
}

/* tracklist */
.mix-card .tracklist-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mix-card .tracklist-section li {
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* comments */
.mix-card .comments-section form,
.mix-card .comments-section .comments-list {
  margin-top: 0.5rem;
}

.mix-card .comments-list {
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
}

.mix-card .comments-list li {
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 0.5rem;
}

.mix-card .tracklist-section,
.mix-card .comments-section {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* form inputs */
.mix-card .comments-section input,
.mix-card .comments-section textarea {
  width: 100%;
  padding: 0.5rem;
  border-radius: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
}

/* buttons */
.mix-card .comments-section .btn {
  margin-top: 0.5rem;
  background: var(--peach-pink);
  color: #fff;
}

.mix-card .comments-section .btn:hover {
  background: var(--sky-blue);
}

/* controls buttons */
.mix-card .mix-controls .btn {
  /* background: var(--sky-blue);*/
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 600;
}

.mix-card .mix-controls .btn:hover {
  background: var(--peach-pink);
  transform: scale(1.05);
}

/* make each detail panel extra frosty */
.mix-card .tracklist-section,
.mix-card .comments-section {
  background: rgba(74, 20, 140, 0.25);
  /* more opaque */
  backdrop-filter: blur(14px);
  /* heavier blur */
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}

/* tighten up the summary so it looks neat */
.mix-card .tracklist-section summary,
.mix-card .comments-section summary {
  color: #ef476f;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

/* dark tweaks */
html[data-theme="dark"] .mix-card {
  background: rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .mix-details details {
  background: rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .comments-section input,
html[data-theme="dark"] .comments-section textarea {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

html[data-theme="dark"] .mix-controls .btn {
  background: #4a148c75;
  color: var(--btn-dark-text);
}

html[data-theme="dark"] .mix-controls .btn:hover {
  background: var(--btn-dark-hover-bg);
}

html[data-theme="dark"] .mix-card .tracklist-section,
html[data-theme="dark"] .mix-card .comments-section {
  background: rgb(74 20 140 / 44%);
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .waveform {
  background: rgba(255, 255, 255, 0.1);
  /* lighten up the canvas backdrop */
}

html[data-theme="dark"] h1,
html[data-theme="dark"] .mix-title {
  color: var(--text-dark) !important;
}

html[data-theme="dark"] .tracklist-section summary,
html[data-theme="dark"] .comments-section summary {
  color: var(--accent) !important;
}

/* ─── blog-list grid ───────────────────────────────── */
.blog-list {
  display: flex;
  /* switch to flexbox */
  flex-direction: column;
  /* stack vertically */
  padding: 2rem;
}

/* ─── the “card” look ─────────────────────────────── */
.post-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 800px;
  margin: 10px auto;
}

.blog-list .post-card h3 a {
  color: var(--text-light);
}

/* BLOG PREVIEW TITLES */
.blog-list .post-card h3 {
  color: var(--peach-pink);
  /* your light-mode accent */
  margin: 0;
  /* tighten up any default margins */
}

html[data-theme="dark"] .blog-list .post-card h3 {
  color: var(--text-dark);
  /* switch to your dark-mode text color */
}

/* preview text flex-grows so cards line up nicely */
.post-card .post-preview {
  flex-grow: 1;
  color: var(--text-light);
}

a.btn.read-more {
  /* force your button text color */
  /*color: var(--btn-text) !important;

  /* shrink padding so it’s not so wide */
  padding: 0.4em 0.8em;

  /* ensure the width is only as big as the text */
  width: 90px;
  min-width: 0;
}

.btn.read-more {
  /* force white text, shrink to fit */
  color: #fff !important;
  /*background: var(--btn-bg)*/
  /* pick your default btn color */
  ;
  border-color: rgba(255, 255, 255, 0.4);
  width: 110px;
  height: 25px;
  padding: 0.4em 0.8em;
}

/* ─── modal ───────────────────────────────────────── */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.modal-content {
  position: relative;
  background: var(--bg-light);
  color: var(--text-light);
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 8px;
  padding: 2rem;
  z-index: 2001;
  backdrop-filter: blur(5px);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}

.modal-body p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

.blog-list .blog-post h3 a {
  color: var(--peach-pink);
}

/* Dark mode override */
html[data-theme="dark"] .blog-list .blog-post h3 a {
  color: var(--text-dark) !important;
}

/* dark theme tweaks */
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .modal-content {
  background: rgba(0, 0, 0, 0.6);
  color: var(--text-dark);
}

/* Dark-mode titles */
html[data-theme="dark"] .blog-list .post-card h3 a {
  color: var(--text-dark);
}

/* shared frosted‐glass panel style */
.about-page .panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: background 0.3s;
}

/* dark mode tweak */
html[data-theme="dark"] .about-page .panel {
  background: rgba(0, 0, 0, 0.4);
}

/* Dark mode override: */
html[data-theme="dark"] .about-page .panel h1,
html[data-theme="dark"] .about-page .panel h2 {
  color: var(--sky-blue);
  /* or whatever darker accent you prefer */
}

/* Section headings */
.about-page .panel h1,
.about-page .panel h2 {
  margin-top: 0;
  color: var(--peach-pink);
}

/* Contact list */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.contact-list li {
  margin-bottom: 0.5rem;
}

.contact-list a {
  color: var(--accent);
  text-decoration: none;
}

.contact-list a:hover {
  text-decoration: underline;
}


/* Footer */
footer {
  text-align: center;
  padding: 1em;
  color: white;
  font-size: 0.9em;
  /*background: var(--gradient-light); */
  color: var(--footer-text-light);
  backdrop-filter: blur(8px);
  position: fixed;
  bottom: 0;
  width: 100%;
}



/* Links/buttons in footer inherit the footer text color */
footer a,
footer button {
  color: inherit;
}

.cursor-fruit {
  position: fixed;
  pointer-events: none;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  animation: fadeMove 0.8s ease-out forwards;
  z-index: 9999;
}

@keyframes fadeMove {
  to {
    opacity: 0;
    transform: translate(-50%, -80%) scale(0.5);
  }
}

.about-page #instagram-feed h2 {
  /* light mode: make it match your normal text color instead of peach-pink */
  color: #ef476f;
  font-family: 'Pacifico', cursive;
  margin-top: 2rem;
}

html[data-theme="dark"] .about-page #instagram-feed h2 {
  /* dark mode: switch to your dark-mode text color */
  color: var(--text-dark);
}

#instafeed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}

#instafeed img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.ig-link {
  display: inline-block;
  margin: 1rem 0;
  color: var(--accent);
  font-weight: bold;
  text-decoration: none;
}

.ig-link:hover {
  text-decoration: underline;
}

.comments-wrapper {
  margin-top: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 0.5rem;
}

.comments-wrapper summary {
  cursor: pointer;
  font-weight: bold;
  outline: none;
}

/*Mobile*/

/*—————————————————————————————————————
  Desktop always shows .nav-container, hides hamburger & mobile-nav
—————————————————————————————————————*/
/* Desktop defaults */
.hamburger-btn,
.mobile-nav {
  display: none;
}

.logo-btn {
  display: none;
}

/* Mobile only */
@media (max-width: 600px) {

  /* hide desktop nav & toggle */
  .nav-container,
  #theme-toggle.logo {
    display: none;
  }

  /* logo as hamburger */
  .logo-btn {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0.5rem auto;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }

  .logo-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* center wrapper */
  .mobile-menu-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* container (hidden by default) */
  .mobile-nav {
    position: absolute;
    top: 60%;
    /* adjust vertical spawn */
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center center;
    display: flex;
    gap: -4px;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    /* ← crucial: container animates too */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  }



  /* container open */
  .mobile-nav.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* — 1) BASE BUTTON STATE (closed) — */
  .mobile-nav .btn {
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 16px;
    min-width: 0;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  }

  /* close-animation delays (reverse) */
  .mobile-nav .btn:nth-child(1) {
    transition-delay: 0.20s;
  }

  .mobile-nav .btn:nth-child(2) {
    transition-delay: 0.15s;
  }

  .mobile-nav .btn:nth-child(3) {
    transition-delay: 0.10s;
  }

  .mobile-nav .btn:nth-child(4) {
    transition-delay: 0.05s;
  }

  /* — 2) OPEN BUTTON STATE (override) — */
  .mobile-nav.open .btn {
    transform: scale(1);
    opacity: 1;
  }

  /* open-animation delays (forward) + margins */
  .mobile-nav.open .btn:nth-child(1) {
    transition-delay: 0.05s;
  }

  .mobile-nav.open .btn:nth-child(2) {
    transition-delay: 0.10s;
    margin-right: 50px;
  }

  .mobile-nav.open .btn:nth-child(3) {
    transition-delay: 0.15s;
    margin-left: 30px;
  }

  .mobile-nav.open .btn:nth-child(4) {
    transition-delay: 0.20s;
  }


  /* Shrink the buttons */
  .mobile-menu-wrapper .mobile-nav .btn {
    font-size: 0.7rem;
    /* smaller text */
    padding: 11px 16px;
    /* less padding */
    line-height: 1;
    /* keep them compact */
    border-radius: 16px;
    /* slightly smaller corners */
    min-width: 0;
    /* let them size to content */
  }

  /* Logo sizing (unchanged) */
  .logo-btn img,
  #theme-toggle.logo img {
    width: 70px;
    height: auto;
    object-fit: contain;
  }

  /* Slightly larger on desktop */
  @media (min-width: 601px) {
    #theme-toggle.logo img {
      width: 87px;
    }

  }
}

/* ─── Mixes page responsive tweaks ─── */
@media (max-width: 600px) {

  /* 1) Stack cover art and player into one column */
  .mix-card {
    display: grid;
    grid-template-columns: 1fr;
    /* instead of 120px 1fr */
    gap: 1rem;
    /* keep your padding */
    width: 100%;
    /* same as desktop, but contained by .mixes-page’s padding */
    max-width: 100%;
    /* prevent any rogue overflow */
    box-sizing: border-box;
    /* include padding in its width */
  }

  /* 2) Constrain the cover art width */
  .mix-cover img {
    width: 120px;
    /* thumbnail-sized */
    max-width: 100%;
    /* never overflow */
    margin: 0 auto 1rem;
    /* center under title */
    display: block;
  }

  /* 3) Slim down the waveform for mobile */
  .waveform-container .waveform {
    height: 48px;
    /* was 64px */
  }

  /* 4) Shrink the player controls */
  .mix-player .btn {
    width: 40px;
    /* was 52px */
    height: 40px;
    font-size: 1rem;
    /* was 1.4rem */
  }

  /* 5) Tame the title size */
  .mix-player .mix-title {
    font-size: 1.1rem;
    /* was 1.25rem */
  }

  /* 1) Stack cards vertically and add side padding */
  .mixes-page {
    flex-direction: column;
    /* stack rather than row */
    gap: 1.5rem;
    /* vertical spacing between cards */
    padding: 0 1rem;
    /* gutter on left & right */
  }

  /* 4) Make sure the player itself fills the card and stays within bounds */
  .mix-player {
    width: 100%;
  }

  .waveform-container,
  .waveform-container .waveform {
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
  }

  /* 6) Center the controls under the waveform */
  .mix-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  /* Make the player container fill that single column */
  .mix-card .mix-player {
    width: 100%;
    min-width: 0;
    /* allow it to shrink to fit */
    box-sizing: border-box;
    margin: 0 auto;
    /* center if needed */
  }

  /* Center the controls under the waveform */
  .mix-player .mix-controls {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
  }

}

/* ─── HERO MOBILE TWEAKS ────────────────────────────────────────── */
@media (max-width: 600px) {

  /* 1) Shorter viewport height so content isn’t hidden by the URL bar */
  .home-hero {
    height: 85vh;
    /* was 95vh */
    padding: 0 1rem;
    /* side gutters */
  }

  /* 2) Frosted card scales down & stays centred */
  .hero-frosted {
    width: 100%;
    padding: 1.25rem;
    /* was 2em */
    border-radius: 12px;
  }

  /* 3) Logo wrapper shrinks */
  .hero-logo-wrapper {
    max-width: 300px;
    /* was 500px */
    transform: scale(1);
    /* cancel the slight desktop zoom */
  }

  .hero-logo {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  }

  /* 4) Tagline uses clamp() so it scales smoothly */
  .hero-tagline {
    font-size: clamp(1.4rem, 6vw, 2rem);
    /* 1.4–2 rem */
    margin-bottom: 1rem;
  }

  /* 5) Sub-tagline (if you kept it) also clamps */
  .hero-subtagline {
    font-size: clamp(1rem, 4.8vw, 1.35rem);
    margin-top: 0.25rem;
  }

  /* 6) CTA button grows a little to stay thumb-friendly */
  .cta-btn {
    font-size: 1rem;
    padding: 0.75em 1.75em;
  }
}


/* === Latest Post Jelly Section === */
.home-latest.jelly-card {
  display: flex;
  border-radius: 22px;
  padding: clamp(16px, 3vw, 28px);
  background:
    radial-gradient(120% 140% at 80% 100%, rgba(110, 235, 220, .24) 0%, rgba(110, 235, 220, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, rgba(70, 210, 200, .22) 0%, rgba(70, 210, 200, 0) 55%),
    rgba(70, 210, 200, .22);
  box-shadow:
    inset -6px -6px 14px rgba(170, 255, 245, .45),
    inset 6px 6px 14px rgba(35, 150, 150, .22),
    0 22px 44px rgba(0, 0, 0, .20);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  position: relative;
  flex-direction: column;
  min-height: 260px;

  --sheen-angle: 135deg;
  --sheen-blur: 24px;
  --sheen-alpha: .80;
  --sheen-tilt: 6deg;

  animation: wobble 6s ease-in-out infinite;
}

@keyframes wobble {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}



/* text + button inside the jelly */
.home-latest .latest-title {
  margin: .35rem 0 .3rem;
  font-size: 1.6rem;
}

.home-latest .latest-excerpt {
  margin: .5rem 0 1rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-latest .read-more {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: rgba(126, 200, 227, .65);
  /* cool blue pill contrasts orange */
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .12s ease, background .12s ease;
}

.home-latest .read-more:hover {
  transform: translateY(-1px);
  background: rgba(126, 200, 227, .78);
}

.home-hero+.home-latest {
  display: block;
  width: min(820px, 92vw);
  margin: 28px auto 56px;
  float: none;
  clear: both;
}

/* Visual clamp for excerpt (3 lines) */
.home-latest .latest-excerpt {
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .latest-excerpt {
    -webkit-line-clamp: 2;
    max-height: calc(1.5em * 2);
  }
}

/* --- Latest card text clamp & spacing --- */
.home-latest {
  max-width: 500px;
  margin: 18px auto 64px;
  padding: 16px 20px 22px;
}

.latest-title {
  margin: 0 0 .45rem;
}

/* Fix latest post title link color */
.latest-title a {
  color: var(--btn-text);
  /* use the normal light-mode text */
  text-decoration: none;
}

.latest-title a:hover {
  text-decoration: underline;
}

/* Ensure proper color in dark mode */
html[data-theme="dark"] .latest-title a {
  color: var(--text-dark);
}

/* Force the Read More button text to white */
.btn.read-more {
  color: #fff !important;
}


.latest-excerpt {
  /* 2–3 lines, ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* change to 2 if you want it shorter */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  /* fallback approximation */
  line-height: 1.5;
  max-height: calc(1.5em * 3);
  margin: .5rem 0 0;
  color: rgba(0, 0, 0, .85);
}

.read-more {
  margin-top: auto;
}


/* ============== TWO-UP ROW ============== */
.home-row {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr);
  justify-content: center;
  align-items: stretch;
  gap: clamp(18px, 3vw, 28px);
  max-width: 1100px;
  margin: clamp(16px, 3vw, 24px) auto;
  padding: 0 1rem;
}

.home-row>section {
  flex: 1 1 480px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  margin: inherit;
}

/* common card shell */
.home-row>section.jelly-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  /* hd, title, excerpt grows, button */
  border-radius: 22px;
  padding: clamp(16px, 3vw, 28px);
  position: relative;
  overflow: hidden;
  /* keep the streak inside the rounded corners */
  isolation: isolate;
}

/* keep text from touching the edges as it grows */
.home-row>section.jelly-card p {
  margin: .25rem 0 0;
}

/* ============== ABOUT JELLY (purple) ============== */
.home-about.jelly-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  padding: clamp(16px, 3vw, 28px);
  position: relative;
  isolation: isolate;
  /* purple/mauve jelly look */
  background:
    radial-gradient(120% 140% at 80% 100%, rgba(167, 60, 255, .18) 0%, rgba(176, 60, 255, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, rgba(180, 100, 255, .18) 0%, rgba(181, 100, 255, 0) 55%),
    rgba(193, 85, 255, .20);
  box-shadow:
    inset -6px -6px 14px rgba(200, 140, 255, .45),
    inset 6px 6px 14px rgba(132, 40, 230, .28),
    0 22px 44px rgba(0, 0, 0, .20);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(14px) saturate(1.10);
  -webkit-backdrop-filter: blur(14px) saturate(1.10);
  --sheen-angle: 315deg;
  --sheen-blur: 24px;
  --sheen-alpha: .82;
  --sheen-tilt: 6deg;
}

.home-about .about-title {
  margin: 0 0 .45rem;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.25;
}

/* Light theme keeps the pink you already use */
.home-about .about-title {
  color: var(--peach-pink);
  /* your current pink */
}

/* Dark theme override for the About heading */
[data-theme="dark"] .home-about .about-title {
  color: var(--text-light);
  /* or --ink-on-jelly / your preferred light ink */
}

/* If the title is a link, inherit so both themes match */
[data-theme="dark"] .home-about .about-title a,
.home-about .about-title a {
  color: inherit;
  text-decoration: none;
}

.home-about .about-excerpt {
  margin: .5rem 0 1rem;
  line-height: 1.55;
  /* optional clamp if the card gets too tall */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* adjust 3–5 lines to taste */
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-about .about-cta {
  align-self: flex-start;
  display: inline-block;
  padding: .65rem 1.15rem;
  border-radius: 999px;
  background: var(--sky-blue, #63a8ff);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35);
  text-decoration: none;
  transition: transform .12s ease, background .12s ease;
  margin-top: auto;
}

.home-about .about-cta:hover {
  transform: translateY(-1px);
  background: var(--peach-pink, #ff7aa3);
}

/* Keep the blog card visually consistent in the row */
.home-latest.jelly-card {
  display: flex;
  flex-direction: column;
}

.home-latest .read-more {
  align-self: flex-start;
  margin-top: auto;
}

/* Same floor height + flex layout for both cards */
.home-latest.jelly-card,
.home-about.jelly-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  /* hd, title, excerpt grows, button */
  min-height: 240px;
  border-radius: 22px;
  padding: clamp(16px, 3vw, 28px);

  /* Keep visual effects inside + stop the scale wobble here */
  overflow: hidden;
  animation: none;
}



/* Tidy headings / spacing inside */
.jelly-hd {
  margin: 0 0 .35rem;
}

.latest-title,
.about-title {
  margin: 0 0 .5rem;
}

/* push the CTA to the bottom so both cards end at the same baseline */
.home-latest .read-more,
.home-about .about-cta {
  margin-top: auto;
  align-self: flex-start;
}

.home-about .about-excerpt {
  margin: .5rem 0 1rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* same as .latest-excerpt */
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Small screens: stack neatly */
@media (max-width: 980px) {
  .home-row {
    gap: 18px;
    grid-template-columns: 1fr;
  }

  .home-row>section {
    max-width: 100%;
  }
}

/* Excerpt clamping (same in both) */
.latest-excerpt,
.home-about .about-excerpt {
  margin: .5rem 0 1rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* 3–4 lines works well */
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-latest .read-more,
.home-about .about-cta {
  justify-self: start;
  /* left edge */
  align-self: end;
  /* bottom row of the grid */
  width: auto;
  /* stop full-width pill */
  max-width: max-content;
  white-space: nowrap;
  padding: .65rem 1.15rem;
}



/* ==== JELLY CARDS (candy/gelatin look) ================================== */
/* Base shell: both cards share this */
.jelly-card {
  position: relative;
  overflow: hidden;
  inset: 0;
  /* clip the highlight */
  border-radius: 22px;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid rgba(255, 255, 255, .36);
  background: var(--jelly-fill, rgba(255, 255, 255, .14));
  box-shadow:
    inset 0 0 0.5px rgba(255, 255, 255, .6),
    /* micro spec */
    inset -10px -14px 24px rgba(0, 0, 0, .10),
    /* inner shade */
    0 26px 44px rgba(0, 0, 0, .20);
  /* lift from bg */
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  isolation: isolate;
  /* keep blends inside */
}

/* Inner glow sits UNDER the sheen */
.jelly-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(55deg,
      transparent 0 38%,
      rgba(255, 255, 255, .12) 39% 55%,
      transparent 56% 100%);
  mix-blend-mode: screen;
  /* gives that juicy “from within” feel */
  pointer-events: none;
  z-index: 0;
  /* 👈 under the sheen */
}

/* Sheen sits ABOVE the glow so it doesn’t get dulled */
.jelly-card::before {
  content: "";
  position: absolute;
  /* oversized canvas so the feather never hard-crops */
  inset: -30% -34% -42% -34%;
  border-radius: inherit;

  /* two layered, soft highlights:
     - a big diagonal sweep
     - a gentle radial “bloom” at the origin */
  background:
    linear-gradient(var(--sheen-angle, 135deg),
      rgba(255, 255, 255, .26) 0%,
      rgba(255, 255, 255, .14) 32%,
      rgba(255, 255, 255, .06) 52%,
      rgba(255, 255, 255, 0) 68%),
    radial-gradient(110% 90% at 0% 0%,
      rgba(255, 255, 255, .18) 0%,
      rgba(255, 255, 255, 0) 60%);

  filter: blur(var(--sheen-blur, 22px));
  opacity: var(--sheen-alpha, .85);
  transform: rotate(var(--sheen-tilt, 8deg));
  pointer-events: none;
  z-index: 1;
  /* above ::after inner glow, below content */
  /* no blend mode — we’re painting the light directly so it always shows */
}


/* keep your content above both */
.jelly-card>* {
  position: relative;
  z-index: 2;
}


/* ==== CARD-SPECIFIC TINTS ============================================== */
/* MAUVE – About */
.home-about.jelly-card {
  --jelly-fill: linear-gradient(160deg,
      rgba(214, 92, 255, .18) 0%,
      rgba(255, 120, 210, .20) 45%,
      rgba(210, 70, 255, .16) 100%);
  --jelly-glow: rgba(255, 130, 210, .22);
  --sheen-angle: 315deg;
  --sheen-blur: 24px;
  --sheen-alpha: .82;
  --sheen-tilt: 6deg;
}

/* AQUA – Latest Post */
.home-latest.jelly-card {
  --jelly-fill: linear-gradient(160deg,
      rgba(90, 240, 255, .18) 0%,
      rgba(160, 245, 255, .20) 45%,
      rgba(80, 220, 255, .16) 100%);
  --jelly-glow: rgba(120, 240, 255, .22);
  --sheen-angle: 135deg;
  --sheen-blur: 24px;
  --sheen-alpha: .80;
  --sheen-tilt: 6deg;
}

/* Make sure both cards end on the same baseline (you already have this; keeping for completeness) */
.home-latest.jelly-card,
.home-about.jelly-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
}

.home-latest .read-more,
.home-about .about-cta {
  margin-top: auto;
  /* push CTAs to bottom */
  align-self: flex-start;
}




/* ————— DEBUG: make the sheen impossible to miss ————— */
.jelly-card {
  position: relative;
  overflow: hidden;
}



/* AQUA (LATEST): mirror direction */
.home-latest.jelly-card::before {
  content: "";
  position: absolute;
  inset: -25%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 60%);
  filter: blur(26px);
  mix-blend-mode: normal;
}

/* make sure the pseudo can sit above the background and below the text */
.jelly-card {
  position: relative;
  overflow: hidden;
  /* keeps sheen inside rounded corners */
  isolation: isolate;
  /* clean stacking context */
}

.jelly-card>* {
  position: relative;
  z-index: 2;
}



/* — ABOUT (mauve): upper-left ➜ lower-right — */
.home-about.jelly-card::before {
  content: "";
  position: absolute;
  inset: -18% -24% -28% -24%;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(315deg,
      rgba(255, 255, 255, .24) 0%,
      rgba(255, 255, 255, .12) 32%,
      rgba(255, 255, 255, .05) 58%,
      rgba(255, 255, 255, 0) 74%),
    radial-gradient(90% 80% at 0% 0%,
      rgba(255, 255, 255, .10) 0%,
      rgba(255, 255, 255, 0) 60%);
  filter: blur(18px);
  opacity: .78;
  /* adjust .70–.85 to taste */
  mix-blend-mode: normal;
  /* stays subtle over your jelly fill */
}

/* — BLOG/LATEST (aqua): mirror direction — */
.home-latest.jelly-card::before {
  content: "";
  position: absolute;
  inset: -18% -24% -28% -24%;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, .22) 0%,
      rgba(255, 255, 255, .11) 34%,
      rgba(255, 255, 255, .05) 58%,
      rgba(255, 255, 255, 0) 74%),
    radial-gradient(90% 80% at 100% 100%,
      rgba(255, 255, 255, .10) 0%,
      rgba(255, 255, 255, 0) 60%);
  filter: blur(16px);
  opacity: .74;
  mix-blend-mode: normal;
}

/* ===========================
   MIX PAGE — JELLY SKINS
   =========================== */
:root {
  /* tweak these to taste */
  --jelly-density: .32;
  /* overall color depth (0.24 – 0.40 feels good) */
  --jelly-gloss: .15;
  /* diagonal veil strength */
}

/* Base shell – same construction as home cards, but a bit denser */
.mixes-page .mix-card {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .45);
  padding: clamp(18px, 3vw, 22px);
  overflow: hidden;

  /* soft “gummy” inner shadows + lift */
  box-shadow:
    inset -8px -8px 18px rgba(255, 255, 255, .20),
    inset 8px 8px 18px rgba(0, 0, 0, .12),
    0 22px 44px rgba(0, 0, 0, .20);

  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* Diagonal veil (very subtle, so it doesn’t look like vinyl) */
.mixes-page .mix-card::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, var(--jelly-gloss)) 0%,
      rgba(255, 255, 255, calc(var(--jelly-gloss)*.45)) 35%,
      rgba(255, 255, 255, 0) 75%);
  filter: blur(6px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Colored “gummy” bases – single hue, no pink cross-fade */
.mixes-page .mix-card[data-jelly="mango"] {
  background:
    radial-gradient(140% 160% at 90% 120%, rgba(255, 120, 60, calc(var(--jelly-density)*.85)) 0%, rgba(255, 120, 60, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, rgba(255, 170, 95, calc(var(--jelly-density)*.70)) 0%, rgba(255, 170, 95, 0) 55%),
    rgba(255, 135, 70, var(--jelly-density));
}

.mixes-page .mix-card[data-jelly="aqua"] {
  background:
    radial-gradient(120% 140% at 80% 110%, rgba(70, 210, 235, calc(var(--jelly-density)*.85)) 0%, rgba(70, 210, 235, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, rgba(90, 240, 255, calc(var(--jelly-density)*.70)) 0%, rgba(90, 240, 255, 0) 55%),
    rgba(80, 225, 245, var(--jelly-density));
}

.mixes-page .mix-card[data-jelly="mauve"] {
  background:
    radial-gradient(120% 140% at 80% 110%, rgba(160, 85, 235, calc(var(--jelly-density)*.85)) 0%, rgba(160, 85, 235, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, rgba(190, 120, 255, calc(var(--jelly-density)*.70)) 0%, rgba(190, 120, 255, 0) 55%),
    rgba(175, 100, 245, var(--jelly-density));
}

.mixes-page .mix-card[data-jelly="berry"] {
  background:
    radial-gradient(120% 140% at 80% 110%, rgba(255, 95, 165, calc(var(--jelly-density)*.85)) 0%, rgba(255, 95, 165, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, rgba(255, 135, 195, calc(var(--jelly-density)*.70)) 0%, rgba(255, 135, 195, 0) 55%),
    rgba(255, 110, 175, var(--jelly-density));
}

/* keep content above the gloss */
.mixes-page .mix-card>* {
  position: relative;
  z-index: 1;
}

/* knobs you can nudge quickly */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --jelly-density: .22;
  }

  .mixes-page .mix-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Intensity knobs (feel free to tweak) */
:root {
  --jelly-density: .32;
  /* 0.28–0.38 ; more = stronger color */
  --jelly-gloss: .12;
  /* 0.08–0.14 ; more = brighter sheen */
}

/* Blog list grid (light touch, keeps your layout flexible) */

/* Base candy shell */
.blog-list .post-card {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .45);
  padding: clamp(16px, 2.6vw, 24px);
  overflow: hidden;

  box-shadow:
    inset -8px -8px 18px rgba(255, 255, 255, .20),
    inset 8px 8px 18px rgba(0, 0, 0, .12),
    0 22px 44px rgba(0, 0, 0, .20);

  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);

  color: #1d2430;
  /* slight darken for contrast on color */
  transition: transform .15s ease;
}

.blog-list .post-card:hover {
  transform: translateY(-2px);
}

.blog-list .post-card>* {
  position: relative;
  z-index: 1;
}

/* Subtle diagonal veil/gloss (same feel as home cards) */
.blog-list .post-card::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, var(--jelly-gloss)) 0%,
      rgba(255, 255, 255, calc(var(--jelly-gloss)*.45)) 36%,
      rgba(255, 255, 255, 0) 75%);
  filter: blur(6px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Title/excerpt spacing */
.blog-list .post-card h3 {
  margin: 0 0 .35rem;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.blog-list .post-card .post-date {
  margin: 0 0 .5rem;
  opacity: .8;
}

.blog-list .post-card .post-preview {
  margin: .25rem 0 1rem;
  line-height: 1.55;
}

/* ---- Color variants (same palette as mixes) ---- */
.blog-list .post-card[data-jelly="mango"] {
  background:
    radial-gradient(120% 140% at 80% 110%, rgba(255, 120, 60, calc(var(--jelly-density)*.85)) 0%, rgba(255, 120, 60, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, rgba(255, 170, 95, calc(var(--jelly-density)*.70)) 0%, rgba(255, 170, 95, 0) 55%),
    rgba(255, 135, 70, var(--jelly-density));
}

.blog-list .post-card[data-jelly="aqua"] {
  background:
    radial-gradient(120% 140% at 80% 110%, rgba(70, 210, 235, calc(var(--jelly-density)*.85)) 0%, rgba(70, 210, 235, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, rgba(90, 240, 255, calc(var(--jelly-density)*.70)) 0%, rgba(90, 240, 255, 0) 55%),
    rgba(80, 225, 245, var(--jelly-density));
}

.blog-list .post-card[data-jelly="mauve"] {
  background:
    radial-gradient(120% 140% at 80% 110%, rgba(160, 85, 235, calc(var(--jelly-density)*.85)) 0%, rgba(160, 85, 235, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, rgba(190, 120, 255, calc(var(--jelly-density)*.70)) 0%, rgba(190, 120, 255, 0) 55%),
    rgba(175, 100, 245, var(--jelly-density));
}

.blog-list .post-card[data-jelly="berry"] {
  background:
    radial-gradient(120% 140% at 80% 110%, rgba(255, 95, 165, calc(var(--jelly-density)*.85)) 0%, rgba(255, 95, 165, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, rgba(255, 135, 195, calc(var(--jelly-density)*.70)) 0%, rgba(255, 135, 195, 0) 55%),
    rgba(255, 110, 175, var(--jelly-density));
}


/* === ABOUT PAGE — Jelly panels ===================================== */
/* Make sure panels that opt into jelly actually use the jelly skin */
.about-page .panel.jelly-card {
  /* beat earlier .about-page .panel background */
  background: var(--jelly-fill, rgba(255, 255, 255, .14)) !important;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  /* keep sheen/glow layers tidy */
}

/* Keep content above sheen/glow (your base .jelly-card already does this,
   but this reinforces it against older panel rules) */
.about-page .panel.jelly-card>* {
  position: relative;
  z-index: 2;
}

/* — MAUVE (About Me) — */
.about-page .bio-section.jelly-card {
  --jelly-fill: linear-gradient(160deg,
      rgba(214, 92, 255, .18) 0%,
      rgba(255, 120, 210, .20) 45%,
      rgba(210, 70, 255, .16) 100%);
  --jelly-glow: rgba(255, 130, 210, .22);
  --sheen-angle: 315deg;
  --sheen-blur: 24px;
  --sheen-alpha: .82;
  --sheen-tilt: 6deg;
}

/* — AQUA (Get in Touch) — */
.about-page .contact-section.jelly-card {
  --jelly-fill: linear-gradient(160deg,
      rgba(90, 240, 255, .18) 0%,
      rgba(160, 245, 255, .20) 45%,
      rgba(80, 220, 255, .16) 100%);
  --jelly-glow: rgba(120, 240, 255, .22);
  --sheen-angle: 135deg;
  --sheen-blur: 24px;
  --sheen-alpha: .80;
  --sheen-tilt: 6deg;
}

/* Optional: tighten spacing inside these two cards to match home cards */
.about-page .bio-section.jelly-card h1,
.about-page .contact-section.jelly-card h2 {
  margin-top: 0;
  margin-bottom: .5rem;
}

.about-page .contact-section .contact-list {
  margin-top: .5rem;
}



/* 1) Base: applies only when you add .btn--juicy so you don't break old .btns */
.btn.btn--juicy {
  --btn-ink: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .72rem 1.15rem;
  border: 0;
  border-radius: 999px;
  color: var(--btn-ink);
  background: var(--btn-bg);
  /* translucent gradient comes from the variant */
  backdrop-filter: blur(6px) saturate(1.15);
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  /* gentle inner highlight */
  transition: box-shadow .15s ease, transform .12s ease, filter .12s ease;
}

/* soft diagonal sheen, lighter & wider */
.btn.btn--juicy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(55deg,
      rgba(255, 255, 255, .28) 0%,
      rgba(255, 255, 255, .14) 34%,
      rgba(255, 255, 255, .06) 54%,
      transparent 70%);
  mix-blend-mode: soft-light;
  opacity: .40;
  transition: opacity .18s ease, transform .18s ease;
}

.btn.btn--juicy:hover {
  filter: saturate(1.05);
}

.btn.btn--juicy:hover::after {
  opacity: .55;
  transform: translateY(-1px);
}

.btn.btn--juicy:active {
  transform: translateY(1px) scale(.98);
  box-shadow:
    inset 0 8px 18px rgba(255, 255, 255, .22),
    inset 0 -10px 18px rgba(0, 0, 0, .10),
    0 4px 10px rgba(0, 0, 0, .16);
}


/* Focus visible: accessible ring that respects the color */
.btn.btn--juicy:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .6),
    0 0 0 6px color-mix(in oklab, var(--btn-bg-2) 55%, transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .btn.btn--juicy,
  .btn.btn--juicy::after {
    transition: none;
  }
}

/* 2) Sizes */
.btn--sm {
  padding: .55rem .9rem;
  font-size: .95rem;
}

.btn--lg {
  padding: .9rem 1.25rem;
  font-size: 1.05rem;
}

/* 3) Icon alignment if you use <i> or svg */
.btn.btn--juicy i,
.btn.btn--juicy svg {
  width: 1.1em;
  height: 1.1em;
}



/* 5) Dark theme tweaks—slightly deeper shadows */
[data-theme="dark"] .btn.btn--juicy {
  box-shadow:
    inset 0 6px 14px rgba(255, 255, 255, .16),
    inset 0 -10px 20px rgba(0, 0, 0, .24),
    0 10px 22px rgba(0, 0, 0, .45);
}


/* ===== Header pills: airy + translucent, consistent with “Home” ===== */
.nav-container a.btn.btn--juicy {
  /* slightly lighter glass than body buttons */
  --pill-alpha: .62;
  /* tweak this only if you want more/less translucency */
  --ring-alpha: .45;

  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Aqua (Home) */
header .nav-container a.btn--aqua {
  --btn-bg: linear-gradient(180deg, rgb(154 255 219 / 39%) 29%,
      rgb(99 255 233 / 62%) 84%);
  --btn-ring: rgb(118 255 217 / 45%);
}

/* Mango (Mixes) */
header .nav-container a.btn--mango {
  --btn-bg: linear-gradient(180deg,
      rgba(255, 193, 110, / 39%) 29%,
      rgba(255, 124, 58, / 62%) 84%);
  --btn-ring: rgba(255, 153, 68, var(--ring-alpha));
}

/* Mauve (Blog) */
header .nav-container a.btn--mauve {
  --btn-bg: linear-gradient(180deg, rgb(224 185 255 / 36%) 39%, rgb(178 123 255 / 50%) 84%);
  --btn-ring: rgba(197, 122, 255, var(--ring-alpha));
}

/* Berry (About) – a brighter pink-berry so it doesn’t duplicate mauve */
header .nav-container a.btn--berry {
  --btn-bg: linear-gradient(180deg, rgb(255 164 196 / 39%) 0%, rgb(255 108 158) 100%);
  --btn-ring: rgba(255, 116, 174, var(--ring-alpha));
}

/* Optional: a hair more contrast for dark mode */
html[data-theme="dark"] header .nav-container a.btn.btn--juicy {
  --pill-alpha: .58;
}

/* All juicy buttons get a frosted/glassy vibe */
.btn {
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
}



/* ---- Glassy pill recipe (shared) --------------------------------------- */
.btn.btn--juicy {
  /* core glass settings */
  --glass-alpha: .62;
  /* overall translucency */
  --edge-alpha: .35;
  /* border visibility */
  --shine-alpha: .18;
  /* subtle inner gloss */
  --shadow: 0 8px 22px rgba(0, 0, 0, .20);
  height: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, var(--edge-alpha));
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);

  /* the tint comes from each variant below via --t1/--t2 */
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--t1) var(--glass-alpha*100%), transparent),
      color-mix(in oklab, var(--t2) var(--glass-alpha*100%), transparent));
}

/* soft diagonal highlight, same for all */
.btn.btn--juicy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(60deg, transparent 0 45%,
      rgba(255, 255, 255, var(--shine-alpha)) 46% 60%,
      transparent 61% 100%);
  mix-blend-mode: screen;
}

/* hover/active just nudge brightness, not opacity */
.btn.btn--juicy:hover {
  filter: saturate(1.05) brightness(1.04);
}

.btn.btn--juicy:active {
  transform: translateY(1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* ---- Variants (set two brand tints; translucency comes from --glass-alpha) */
.btn--aqua {
  --t1: #9FE7F1;
  --t2: #64CBEA;
}

/* Home */
.btn--mango {
  --t1: #FFD39A;
  --t2: #FF9C57;
}

/* Mixes */
.btn--mauve {
  --t1: #F4B2FF;
  --t2: #C07BFF;
}

/* Blog */
.btn--berry {
  --t1: #FF9AC0;
  --t2: #E05BA1;
}

/* About (warmer than grape) */

/* keep label readable over lighter glass */
.btn.btn--juicy {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

/* Dark theme: same tints, slightly deeper border & shadow so they don’t wash out */
[data-theme="dark"] .btn.btn--juicy {
  --glass-alpha: .58;
  --edge-alpha: .45;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

/* ---- CTA in the hero: a touch stronger so it never disappears ------------ */
.home-hero .cta-btn,
.hero-content .cta-btn,
.hero-frosted .cta-btn {
  --glass-alpha: .78;
  /* make it more solid than nav */
  --edge-alpha: .45;
  --t1: #9FE7F1;
  --t2: #64CBEA;
  /* aqua CTA to match your brand */
  border: 1px solid rgba(255, 255, 255, var(--edge-alpha));
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--t1) calc(var(--glass-alpha)*100%), transparent),
      color-mix(in oklab, var(--t2) calc(var(--glass-alpha)*100%), transparent));
  box-shadow:
    0 8px 22px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}



/* === MOBILE: lock hero into a self-contained rectangle and keep overlay inside === */
@media (max-width: 600px) {

  /* put the hero directly under the fixed header, no viewport-height tricks */
  .home-hero {
    padding: calc(5.5rem + 8px) 1rem 0 !important;
    height: auto !important;
    /* override earlier 85vh */
  }

  /* This is the hero "box" – isolate its stack and clip anything inside it */
  .hero-frosted {
    position: relative !important;
    isolation: isolate !important;
    /* overlay can't spill onto other sections */
    overflow: hidden !important;
    /* clip overlay & blur to this box */
    border-radius: 12px;

    /* Make a tidy, consistent rectangle on phones */
    aspect-ratio: 16 / 16;
    /* try 16/9; use 21/9 for shorter, 3/2 for taller */
    min-height: 180px;
    max-height: 240px;

    /* kill the tall min-height from earlier mobile rules */
    min-height: unset !important;
    /* overrides any previous min-height: 60vh */
    padding: 0 !important;
    /* let the box be clean; content is absolutely placed */
  }

  /* Slides fill the hero box, under the overlay */
  .hero-slides {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit;
  }

  .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 70%;
    /* decent default; tweak later if needed */
    opacity: 0;
    transition: opacity .45s ease;
  }

  .hero-slide.is-showing {
    opacity: 1;
  }

  /* Overlay (logo + tagline + CTA) lives INSIDE the hero box */
  .hero-logo-wrapper,
  .hero-tagline,
  .cta-btn {
    position: static !important;
    /* anchor inside the hero, not the page */
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 1;
    /* above slides, below pseudo-blurs with higher z if any */
    pointer-events: auto;
    /* CTA stays tappable */
  }

  /* Simple vertical layout inside the rectangle */
  .hero-logo-wrapper {
    max-width: 300px;
    margin: 0 auto 6px;
    /* center */
  }

  .hero-tagline {
    display: block;
    width: 92%;
    max-width: 520px;
    margin: 0 auto 6px;
    /* center */
    padding: 0;
    /* remove pill padding */
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;

    text-align: center;
    font-size: clamp(1.25rem, 5.4vw, 1.8rem);
    line-height: 1.15;
    text-wrap: balance;
    /* keeps lines even if supported */
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
    /* readability over photo */
  }

  .cta-btn {
    margin: 6px auto 0;
    /* center */
    font-size: 1rem;
    padding: 0.75em 1.6em;
  }

  /* Make sure the frost/blur layers are clipped to the box, not the page */
  .hero-frosted::before,
  .hero-frosted::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
    /* keep under text/CTA if your text has z:2 elsewhere */
    pointer-events: none;
  }
}

/* MOBILE: nudge tagline + CTA upward */
@media (max-width: 600px) {
  .hero-frosted .hero-tagline {
    transform: translateY(-42px) !important;
    /* adjust: -6px … -20px */
    margin-bottom: 4px !important;
  }

  .hero-frosted .cta-btn {
    transform: translateY(-30px) !important;
    /* adjust as you like */
    margin-top: 0 !important;
  }

  /* optional: slightly tighter spacing between the three */
  .hero-frosted {
    gap: 6px !important;
  }
}

/* MOBILE: juicy color tints for the pop-out pills */
@media (max-width: 600px) {

  /* force mobile pills to use the local mobile gradient var */
  .mobile-nav .btn.btn--juicy {
    background: var(--btn-bg-mobile) !important;
  }

  /* Aqua (Home) */
  .mobile-nav .btn--aqua {
    --btn-bg-mobile: linear-gradient(180deg,
        rgba(154, 255, 219, 0.39) 29%,
        rgba(99, 255, 233, 0.62) 84%);
  }

  /* Mango (Mixes) */
  .mobile-nav .btn--mango {
    --btn-bg-mobile: linear-gradient(180deg,
        rgba(255, 193, 110, 0.39) 29%,
        rgba(255, 124, 58, 0.62) 84%);
  }

  /* Mauve (Blog) */
  .mobile-nav .btn--mauve {
    --btn-bg-mobile: linear-gradient(180deg,
        rgba(224, 185, 255, 0.36) 39%,
        rgba(178, 123, 255, 0.50) 84%);
  }

  /* Berry (About) */
  .mobile-nav .btn--berry {
    --btn-bg-mobile: linear-gradient(180deg,
        rgba(255, 164, 196, 0.39) 0%,
        rgba(255, 108, 158, 1.00) 100%);
  }
}

/* DESKTOP ONLY: re-center hero stack & clear any mobile nudges */
@media (min-width: 601px) {

  /* center the trio inside the hero */
  .hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* horizontal */
    justify-content: center;
    /* vertical */
    gap: 12px;
    min-height: inherit;
    /* use .hero-frosted's height */
    z-index: 2;
    transform: translateY(-30px);
  }

  /* make sure each piece truly centers and has tidy spacing */
  .hero-logo-wrapper {
    margin: 0 auto 8px;
  }

  .hero-tagline {
    margin: 0 auto 8px;
    transform: translate(10px, -42px);
  }

  .cta-btn {
    margin: 0 auto 0;
    transform: translate(10px, -31px)
  }
}


/* mobile-only theme toggle placement + look */
@media (max-width: 600px) {
  .mode-toggle {
    position: absolute;
    right: 12px;
    top: 8px;
    z-index: 1100;
    padding: .45rem .7rem;
    border-radius: 999px;
    line-height: 1;
    min-width: 0;
  }

  /* optional: keep it subtle over busy headers */
  .mode-toggle.btn--juicy {
    box-shadow:
      inset 0 0 .5px rgba(255, 255, 255, .6),
      inset -10px -14px 24px rgba(0, 0, 0, .10),
      0 8px 20px rgba(0, 0, 0, .18);
    backdrop-filter: blur(10px) saturate(1.05);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
  }
}

/* Footer theme toggle — mobile only */
@media (max-width: 600px) {
  footer {
    display: flex;
    align-items: center;
    justify-content: center;
    /* center text + toggle together */
    gap: .5rem;
    flex-wrap: wrap;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 10px);
  }

  footer .mode-toggle {
    position: static !important;
    /* stop absolute header positioning */
    display: inline-flex;
    margin: 0 .5rem 0 0;
    order: -1;
    /* shows before the © text; remove to keep after */
    padding: .45rem .7rem;
    border-radius: 999px;
  }
}

/* Hide the toggle on desktop */
@media (min-width: 601px) {
  .mode-toggle {
    display: none !important;
  }
}

/* ===== Juicy buttons — DARK MODE palettes (desktop + mobile) ===== */

/* 0) Re-enable juicy gradient for dark mode (beats the global dark btn rule) */
html[data-theme="dark"] .btn.btn--juicy {
  /* keep the glass, just repaint the tint */
  --glass-alpha: .58;
  --edge-alpha: .45;
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--t1) calc(var(--glass-alpha)*100%), transparent),
      color-mix(in oklab, var(--t2) calc(var(--glass-alpha)*100%), transparent)) !important;
  /* <- beats the earlier green override */
}

/* 1) Desktop header tints (darkened versions of your light palette) */
html[data-theme="dark"] header .nav-container .btn--aqua {
  --t1: #56DCEB;
  --t2: #2CA9C7;
}

html[data-theme="dark"] header .nav-container .btn--mango {
  --t1: #FFC166;
  --t2: #FF8A3D;
}

html[data-theme="dark"] header .nav-container .btn--mauve {
  --t1: #C99EFF;
  --t2: #9269FF;
}

html[data-theme="dark"] header .nav-container .btn--berry {
  --t1: #FF8FBA;
  --t2: #E65AA0;
}

/* 2) Mobile popout tints in dark mode (use the mobile gradients) */
@media (max-width:600px) {
  html[data-theme="dark"] .mobile-nav .btn.btn--juicy {
    background: var(--btn-bg-mobile-dark) !important;
    border-color: rgba(255, 255, 255, .32);
  }

  html[data-theme="dark"] .mobile-nav .btn--aqua {
    --btn-bg-mobile-dark: linear-gradient(180deg, rgba(86, 220, 235, .38) 29%, rgba(44, 169, 199, .60) 84%);
  }

  html[data-theme="dark"] .mobile-nav .btn--mango {
    --btn-bg-mobile-dark: linear-gradient(180deg, rgba(255, 193, 102, .38) 29%, rgba(255, 138, 61, .62) 84%);
  }

  html[data-theme="dark"] .mobile-nav .btn--mauve {
    --btn-bg-mobile-dark: linear-gradient(180deg, rgba(201, 158, 255, .36) 39%, rgba(146, 105, 255, .52) 84%);
  }

  html[data-theme="dark"] .mobile-nav .btn--berry {
    --btn-bg-mobile-dark: linear-gradient(180deg, rgba(255, 143, 186, .38) 0%, rgba(230, 90, 160, 1) 100%);
  }
}



/* ======================
   MIX PLAYERS — DARK MODE
   (tailored to your markup)
   ====================== */
html[data-theme="dark"] .mix-card {
  background:
    radial-gradient(140% 160% at 85% 120%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%),
    rgba(18, 19, 33, .66);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 0 .5px rgba(255, 255, 255, .5),
    inset -12px -16px 26px rgba(0, 0, 0, .18),
    0 18px 40px rgba(0, 0, 0, .35);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  color: var(--text, #e8e9ff);
}

/* Artwork gets a subtle ring so it doesn't disappear */
html[data-theme="dark"] .mix-card .mix-cover img {
  border-radius: inherit;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* Title + meta text */
html[data-theme="dark"] .mix-card .mix-title {
  color: var(--text, #e8e9ff);
}

/* Waveform row */
html[data-theme="dark"] .mix-card .waveform-container {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 6px 6px;
  gap: 10px;
}

html[data-theme="dark"] .mix-card .waveform-container .time-elapsed,
html[data-theme="dark"] .mix-card .waveform-container .time-duration {
  color: var(--text-dim, #b6b7d3);
}

/* Controls row */
html[data-theme="dark"] .mix-card .mix-controls {
  color: var(--text, #e8e9ff);
}

/* Your buttons ALREADY use .btn--juicy + color variants.
   This ensures the dark juicy gradients win over any global dark button rule. */
html[data-theme="dark"] .mix-card .mix-controls .btn.btn--juicy {
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--t1, #56DCEB) 58%, transparent),
      color-mix(in oklab, var(--t2, #2CA9C7) 58%, transparent)) !important;
}

/* Map your four color variants to dark tints */
html[data-theme="dark"] .mix-card .mix-controls .btn--aqua {
  --t1: #56DCEB;
  --t2: #2CA9C7;
}

html[data-theme="dark"] .mix-card .mix-controls .btn--mango {
  --t1: #FFC166;
  --t2: #FF8A3D;
}

html[data-theme="dark"] .mix-card .mix-controls .btn--mauve {
  --t1: #C99EFF;
  --t2: #9269FF;
}

html[data-theme="dark"] .mix-card .mix-controls .btn--berry {
  --t1: #FF8FBA;
  --t2: #E65AA0;
}

/* Details sections (Tracklist / Comments) */
html[data-theme="dark"] .mix-card .mix-details {
  background: rgba(18, 19, 33, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 12px;
}

html[data-theme="dark"] .mix-card .mix-details summary {
  color: var(--text, #e8e9ff);
}

html[data-theme="dark"] .mix-card .mix-details ul,
html[data-theme="dark"] .mix-card .mix-details li,
html[data-theme="dark"] .mix-card .comments-list {
  color: var(--text-dim, #cbd0ff);
}

/* Optional: subtle accent ring per card using data-jelly */
html[data-theme="dark"] .mix-card[data-jelly="aqua"] {
  box-shadow: 0 0 0 1px rgba(86, 220, 235, .25), 0 18px 40px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .mix-card[data-jelly="mango"] {
  box-shadow: 0 0 0 1px rgba(255, 193, 102, .25), 0 18px 40px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .mix-card[data-jelly="mauve"] {
  box-shadow: 0 0 0 1px rgba(201, 158, 255, .25), 0 18px 40px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .mix-card[data-jelly="berry"] {
  box-shadow: 0 0 0 1px rgba(230, 90, 160, .25), 0 18px 40px rgba(0, 0, 0, .35);
}

/* Remove the dark wrapper block */
.mix-card .mix-details {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Make each section (Tracklist / Comments) its own small glass card */
.mix-card .tracklist-section,
.mix-card .comments-section {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  overflow: hidden;
}

/* Summary header: no default gray, nicer layout */
.mix-card details>summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  padding: 4px 0;
}

.mix-card details>summary::-webkit-details-marker {
  display: none;
}

/* Dark mode variants to match the vibe */
html[data-theme="dark"] .mix-card .tracklist-section,
html[data-theme="dark"] .mix-card .comments-section {
  background: rgba(18, 19, 33, .55);
  border-color: rgba(255, 255, 255, .18);
}

/* =========================
   MIX PLAYER — LIGHT MODE jelly
   (desktop + mobile; does NOT affect dark mode)
   ========================= */
html:not([data-theme="dark"]) .mix-card {
  /* soft glass shell like your home cards */
  background:
    radial-gradient(140% 160% at 85% 120%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%),
    rgba(255, 255, 255, .26);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 0 .5px rgba(255, 255, 255, .65),
    inset -12px -16px 26px rgba(0, 0, 0, .06),
    0 18px 40px rgba(0, 0, 0, .12);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

/* cover pop + tidy edge */
html:not([data-theme="dark"]) .mix-card .mix-cover img {
  border-radius: inherit;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}

/* waveform row = frosted pill */
html:not([data-theme="dark"]) .mix-card .waveform-container {
  background: rgba(255, 255, 255, .35);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  padding: 6px 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

html:not([data-theme="dark"]) .mix-card .waveform-container .time-elapsed,
html:not([data-theme="dark"]) .mix-card .waveform-container .time-duration {
  color: rgba(0, 0, 0, .55);
}

/* controls = juicy pills with a little extra sheen */
html:not([data-theme="dark"]) .mix-card .mix-controls .btn.btn--juicy {
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow:
    inset 0 0 .5px rgba(255, 255, 255, .85),
    0 10px 24px rgba(0, 0, 0, .14);
}

/* small size tune so the row feels airy */
html:not([data-theme="dark"]) .mix-card .mix-controls .btn--sm {
  padding: .55rem .8rem;
  border-radius: 999px;
}

/* details wrapper stays transparent (your choice), but summaries get a glass header */
html:not([data-theme="dark"]) .mix-card details>summary {
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 14px;
  padding: 8px 12px;
}

/* === MIX CONTROLS: single hue per card (monochrome jelly) === */

/* pick a hue per card from data-jelly */
.mix-card[data-jelly="aqua"] {
  --j1: #9AEEFF;
  --j2: #2CA9C7;
}

.mix-card[data-jelly="mango"] {
  --j1: #FFD38B;
  --j2: #FF8A3D;
}

.mix-card[data-jelly="mauve"] {
  --j1: #D9C0FF;
  --j2: #9269FF;
}

.mix-card[data-jelly="berry"] {
  --j1: #FFB1CF;
  --j2: #E65AA0;
}

/* LIGHT mode – glossy pill in the card’s hue */
html:not([data-theme="dark"]) .mix-card .mix-controls .btn.btn--juicy {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--j1) 55%, transparent),
      color-mix(in oklab, var(--j2) 65%, transparent)) !important;
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow:
    inset 0 0 .5px rgba(255, 255, 255, .85),
    0 10px 24px rgba(0, 0, 0, .14);
}

/* DARK mode – deeper glass version of the same hue */
html[data-theme="dark"] .mix-card .mix-controls .btn.btn--juicy {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--j1) 38%, transparent),
      color-mix(in oklab, var(--j2) 68%, transparent)) !important;
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}

/* subtle states (both themes) */
.mix-card .mix-controls .btn.btn--juicy:hover {
  filter: brightness(1.05);
}

.mix-card .mix-controls .btn.btn--juicy:active {
  filter: brightness(0.95);
}



/* Per-player hue variables */
.mix-card[data-jelly="aqua"] {
  --j1-light: #9AEEFF;
  --j2-light: #2CA9C7;
  --j1-dark: #56DCEB;
  --j2-dark: #2CA9C7;
}

.mix-card[data-jelly="mango"] {
  --j1-light: #FFD38B;
  --j2-light: #FF8A3D;
  --j1-dark: #FFC166;
  --j2-dark: #FF8A3D;
}

.mix-card[data-jelly="mauve"] {
  --j1-light: #D9C0FF;
  --j2-light: #9269FF;
  --j1-dark: #C99EFF;
  --j2-dark: #9269FF;
}

.mix-card[data-jelly="berry"] {
  --j1-light: #FFB1CF;
  --j2-light: #E65AA0;
  --j1-dark: #FF8FBA;
  --j2-dark: #E65AA0;
}

/* LIGHT theme controls = glossy monochrome per card */
html:not([data-theme="dark"]) .mix-card .mix-controls .btn.btn--juicy {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--j1-light) 55%, transparent),
      color-mix(in oklab, var(--j2-light) 65%, transparent)) !important;
  /* override per-button colors & globals */
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: inset 0 0 .5px rgba(255, 255, 255, .85), 0 10px 24px rgba(0, 0, 0, .14);
}

/* DARK theme controls = deeper glass of the same hue */
html[data-theme="dark"] .mix-card .mix-controls .btn.btn--juicy {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--j1-dark) 38%, transparent),
      color-mix(in oklab, var(--j2-dark) 68%, transparent)) !important;
  /* defeats the generic dark green */
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}

/* Keep sizing consistent across themes */
.mix-card .mix-controls .btn--sm {
  padding: .55rem .8rem;
  border-radius: 999px;
}

/* Subtle hover/active */
.mix-card .mix-controls .btn.btn--juicy:hover {
  filter: brightness(1.05);
}

.mix-card .mix-controls .btn.btn--juicy:active {
  filter: brightness(0.95);
}

/* Remove any leftover wrapper fill (your choice earlier) */
.mix-card .mix-details {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Make each <summary> a small glass pill; content area stays transparent */
.mix-card details>summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  padding: 8px 12px;
}

html[data-theme="dark"] .mix-card details>summary {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .18);
  color: var(--text, #e8e9ff);
}

/* hide default marker */
.mix-card details>summary::-webkit-details-marker {
  display: none;
}

/* About → Contact buttons: use the juicy gradients and keep white text */
.about-page .contact-section .btn.btn--juicy {
  color: #fff !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .20);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--t1, #9FE7F1) 62%, transparent),
      color-mix(in oklab, var(--t2, #64CBEA) 62%, transparent)) !important;
}

/* pick your palette: aqua/mango/mauve/berry */
.about-page .contact-section .btn--aqua {
  --t1: #9FE7F1;
  --t2: #64CBEA;
}

.about-page .contact-section .btn--mango {
  --t1: #FFD39A;
  --t2: #FF9C57;
}

.about-page .contact-section .btn--mauve {
  --t1: #F4B2FF;
  --t2: #C07BFF;
}

.about-page .contact-section .btn--berry {
  --t1: #FF9AC0;
  --t2: #E05BA1;
}

/* dark mode parity */
html[data-theme="dark"] .about-page .contact-section .btn.btn--juicy {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--t1, #56DCEB) 52%, transparent),
      color-mix(in oklab, var(--t2, #2CA9C7) 68%, transparent)) !important;
  border-color: rgba(255, 255, 255, .32);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}