/* ============================================================
   Tim Tain — site styles
   ------------------------------------------------------------
   If you only want to change links/content, you do not need
   to touch this file. Edits here change visuals (colors,
   spacing, fonts) for the whole site.
   ============================================================ */

:root {
  --grad-top: #F8C7D5;
  --grad-bot: #9995EF;
  --grad: linear-gradient(180deg, var(--grad-top) 0%, var(--grad-bot) 100%);
  --ink: #ffffff;
  --ink-dim: rgba(255,255,255,0.72);
  --ink-faint: rgba(255,255,255,0.50);

  /* Liquid glass tokens */
  --glass-tint: rgba(255,255,255,0.06);
  --glass-tint-strong: rgba(255,255,255,0.10);
  --glass-stroke: rgba(255,255,255,0.18);
  --glass-stroke-strong: rgba(255,255,255,0.34);
  --glass-blur: 28px;
  --glass-shadow: 0 12px 40px -16px rgba(8, 12, 40, 0.55),
                  0 1px 0 rgba(255,255,255,0.30) inset;

  --radius-pill: 999px;
  --radius-lg: 22px;
  --radius-md: 14px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover: 220ms;

  --maxw: 1280px;
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-tint: rgba(20,24,55,0.62);
    --glass-tint-strong: rgba(20,24,55,0.74);
    --glass-blur: 6px;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Match body so the page never flashes the browser default white during
     the initial body fade-in. */
  background: #0b1230;
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: #0b1230;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* When the mobile menu is open we lock the page so the background can't
   scroll behind the overlay. The class is added by script.js so this also
   works with iOS Safari's overscroll quirks. */
body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

::selection { background: rgba(248,199,213,0.6); color: #1a1230; }

/* ========== Type ========== */
.t-eyebrow {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-dim);
}

/* ========== Background video stack ========== */
.bg-stack {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0b1230;
}
.bg-stack video,
.bg-stack img.bg-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.bg-stack img.bg-poster { z-index: 0; }
.bg-stack video { z-index: 1; }
.bg-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, rgba(11,18,48,0.22) 0%, rgba(11,18,48,0.05) 40%, rgba(11,18,48,0.55) 100%);
  pointer-events: none;
}
.bg-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  backdrop-filter: blur(3px) saturate(110%);
  -webkit-backdrop-filter: blur(3px) saturate(110%);
  background: rgba(11,18,48,0.08);
  pointer-events: none;
}

/* ========== Liquid Glass surface ========== */
.glass {
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.glass > * { position: relative; z-index: 2; }
.glass-strong { background: var(--glass-tint-strong); }

/* ========== Top bar ========== */
.topbar {
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--glass-tint);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: 0 12px 40px -16px rgba(8, 12, 40, 0.55);
  transition:
    background 320ms var(--ease),
    border-color 320ms var(--ease),
    box-shadow 320ms var(--ease),
    backdrop-filter 320ms var(--ease),
    left 320ms var(--ease),
    right 320ms var(--ease),
    padding 320ms var(--ease);
}
.topbar.is-floating {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topbar-wordmark {
  display: inline-flex;
  align-items: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms var(--ease) 80ms, transform 280ms var(--ease) 80ms;
  flex: 0 0 auto;
}
.topbar.is-floating .topbar-wordmark {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition-delay: 0ms;
}
.wordmark-img {
  display: block;
  height: 26px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

.topbar-nav { display: flex; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  position: relative;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ink);
  transition: color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.nav-link:hover, .nav-link:focus-visible {
  background: var(--grad);
  color: #1a1230;
  outline: none;
}

/* ----- Hamburger -----
   Only shown on small screens. The desktop top bar uses the nav links
   directly; the burger is duplicate UI there. The mobile media query
   below flips it back to inline-flex. */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  align-items: center; justify-content: center;
  background: var(--glass-tint-strong);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--glass-stroke);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: var(--ink);
  transition:
    background var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease),
    transform 320ms var(--ease);
  flex: 0 0 44px;
  position: relative;
}
.hamburger:hover { background: var(--grad); box-shadow: none; color: #1a1230; }
.hamburger-bars {
  position: relative;
  width: 18px; height: 14px;
  display: inline-block;
}
/* All three bars share the same center; their resting offset is achieved
   with translateY so we only ever animate one property (transform) — that
   keeps the open/close motion smooth and interruptible in both directions. */
.hamburger-bars > span {
  position: absolute;
  left: 0; right: 0;
  top: 6px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center center;
  transition: transform 300ms var(--ease), opacity 200ms var(--ease);
}
.hamburger-bars > span:nth-child(1) { transform: translateY(-6px) rotate(0); }
.hamburger-bars > span:nth-child(2) { transform: translateY(0)    rotate(0); }
.hamburger-bars > span:nth-child(3) { transform: translateY(6px)  rotate(0); }
.hamburger.is-open .hamburger-bars > span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.hamburger.is-open .hamburger-bars > span:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger-bars > span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ========== Mobile menu panel ==========
   Open/close: the panel does the visual fade (opacity + a small drop-in),
   the container handles interactivity via visibility. Splitting these
   responsibilities avoids the parent×child compound opacity that made the
   previous version feel snappy-then-stuttery. Links don't animate on their
   own — they ride the panel's fade as one mass, which is the simplest
   path to "smooth in both directions". */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 14px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  visibility: hidden;
  /* On close, hold visibility past the panel fade so the close animation
     can play out. On open (the .open rule below), flip immediately. */
  transition: visibility 0s linear 280ms;
}
.mobile-menu.open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.mobile-menu-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 84px 28px 28px;
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 280ms var(--ease), opacity 280ms var(--ease);
}
.mobile-menu.open .mobile-menu-panel {
  transform: translateY(0);
  opacity: 1;
}
.mobile-nav-link {
  display: block;
  padding: 18px 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 28px;
  color: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color var(--t-hover);
}
.mobile-nav-link:hover { color: var(--grad-top); }
.mobile-menu-footer {
  margin-top: auto;
  padding-top: 32px;
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ========== Sections ========== */
main { position: relative; z-index: 10; }
section {
  padding: 84px 32px;
  max-width: var(--maxw);
  margin: 0 auto;
  scroll-margin-top: 80px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.section-head-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.section-h {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.9;
  margin: 0;
}
.section-sub {
  font-family: 'Inter', sans-serif;
  color: var(--ink-dim);
  max-width: 38ch;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ========== Hero ========== */
.hero {
  height: 100vh;
  min-height: 640px;
  padding: 0 32px;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.hero-eyebrow-row {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.hero-eyebrow-row:hover { transform: translateY(-1px); }
.hero-eyebrow-label { color: rgba(255,255,255,0.95); }
.hero-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--grad-top);
  box-shadow: 0 0 12px var(--grad-top);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.15); }
}
.hero-eyebrow-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  color: var(--ink-dim);
  transition: color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.hero-eyebrow-row:hover .hero-eyebrow-arrow {
  color: var(--ink);
  transform: translate(2px, -2px);
}
.hero-wordmark {
  display: block;
  width: clamp(280px, 70vw, 920px);
  height: auto;
  filter: drop-shadow(0 14px 50px rgba(20,30,90,0.45));
  user-select: none;
  -webkit-user-drag: none;
}
.hero-bag {
  position: absolute;
  right: clamp(20px, 5vw, 120px);
  bottom: clamp(80px, 14vh, 180px);
  width: clamp(140px, 20vw, 260px);
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  pointer-events: none;
  /* Entrance fade-up first, then drift forever. Delays line up with the
     hero text stagger below so everything settles together. */
  animation:
    hero-bag-in 620ms 320ms cubic-bezier(0.22, 1, 0.36, 1) both,
    floaty 4s 940ms ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.hero-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--ink);
  text-shadow: 0 2px 18px rgba(11,18,48,0.6);
  padding-left: 0.42em;
}
.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink-dim);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.scroll-cue svg { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ========== Music carousel ==========
   Full-bleed: the carousel breaks out of the section's max-width and
   extends to the viewport edges so the rightmost card isn't clipped
   against the section boundary on wide screens. Cards inset to align
   with the section's content area via the --rail variable. */
.carousel-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.carousel {
  --rail: max(22px, calc((100vw - 1216px) / 2));
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--rail);
  padding: 8px var(--rail) 32px;
  margin: 0;
  scrollbar-width: none;
  /* Soft fade on the edges so cards clipped by overflow gracefully
     blend into the background instead of getting hard-clipped at the
     viewport edge. The fade region scales between 40 px on phones and
     80 px on wide desktops — subtle on desktop, more pronounced on
     phones where it doubles as the "peek of next card" effect. */
  --carousel-fade: clamp(40px, 6vw, 80px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--carousel-fade), #000 calc(100% - var(--carousel-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--carousel-fade), #000 calc(100% - var(--carousel-fade)), transparent 100%);
}
.carousel::-webkit-scrollbar { display: none; }

.album-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  padding: 14px;
  position: relative;
  transition: transform var(--t-hover) var(--ease);
}
.album-card:hover { transform: translateY(-4px); }
.album-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2950, #5d3168);
  isolation: isolate;
}
.album-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.album-card:hover .album-art img { transform: scale(1.03); }
.album-meta {
  margin-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.album-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
}
.album-year {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
}

/* gradient edge glow on hover */
.album-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-hover) var(--ease);
  pointer-events: none;
}
.album-card:hover::after { opacity: 1; }

.carousel-nav { display: flex; gap: 10px; }
.carousel-btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--glass-stroke);
  background: var(--glass-tint-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.carousel-btn:hover { background: var(--grad); color: #1a1230; transform: scale(1.04); box-shadow: none; }
.carousel-btn:disabled { opacity: 0.35; pointer-events: none; }

/* ========== Video grid ========== */
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
}
.tab {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--ink-dim);
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.tab.active {
  background: var(--grad);
  color: #1a1230;
}
.tab:hover:not(.active) { color: var(--ink); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.video-grid[hidden] { display: none; }
.video-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform var(--t-hover) var(--ease);
  text-align: left;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
}
.video-card:hover { transform: translateY(-3px); }
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #3a2562, #6d2a5a);
  overflow: hidden;
}
.video-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease), filter 320ms var(--ease);
  filter: saturate(0.95);
}
.video-card:hover .video-thumb-img {
  transform: scale(1.04);
  filter: saturate(1.05);
}
.video-thumb-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 999px;
  background: rgba(20, 20, 38, 0.45);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.video-card:hover .video-play {
  background: var(--grad);
  color: #1a1230;
  box-shadow: none;
  transform: translate(-50%, -50%) scale(1.06);
}
.video-year {
  position: absolute;
  bottom: 10px; right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.video-body { padding: 14px 16px 16px; }
.video-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  line-height: 1.3;
  margin: 0 0 4px;
}
.video-meta {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
}
.video-card::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-hover) var(--ease);
  pointer-events: none;
}
.video-card:hover::after { opacity: 1; }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(8,10,28,0.55);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  animation: fade-in 220ms var(--ease);
}
.modal-backdrop[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(960px, 100%);
  border-radius: 22px;
  padding: 18px;
  position: relative;
  /* override .glass's overflow:hidden — the close button sits outside the
     top-right corner and was getting clipped by the modal's rounded edge.
     The video iframe stays clipped by .modal-frame's own overflow rule. */
  overflow: visible;
  animation: rise-in 260ms var(--ease);
}
@keyframes rise-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal-frame {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.modal-meta {
  padding: 14px 6px 4px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.modal-title-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  margin-top: 6px;
}
.modal-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(20, 20, 38, 0.55);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
  /* iframes render in their own layer and can sit above modestly z-indexed
     siblings, so the close button needs a high stacking context. */
  z-index: 100;
}
.modal-close:hover { background: var(--grad); color: #1a1230; box-shadow: none; }
/* On small screens the modal hugs the viewport edges; tucking the close
   button inside the top-right corner keeps it on-screen and never lets the
   iframe corner sit on top of it. */
@media (max-width: 720px) {
  .modal-close { top: 10px; right: 10px; }
}

/* "Accept cookies to play inline" fallback inside the modal frame */
.yt-fallback {
  width: 100%; height: 100%;
  background: radial-gradient(120% 80% at 50% 30%, rgba(80,60,140,0.55), #0a0a1c 70%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  isolation: isolate;
}
.yt-fallback::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 18px);
}
.yt-fallback > * { position: relative; z-index: 1; }
.yt-fallback-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 13px;
}
.yt-fallback-body {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink-dim);
  max-width: 38ch;
  line-height: 1.5;
}
.yt-fallback-cta {
  margin-top: 4px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--grad);
  color: #1a1230;
}

/* ========== Bio ========== */
.bio-panel {
  padding: 56px 64px;
  border-radius: 28px;
  max-width: 880px;
  margin: 0 auto;
}
.bio-text {
  max-width: 65ch;
  margin: 0 auto;
}
.bio-text p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-dim);
  margin: 0 0 1.1em;
  text-wrap: pretty;
}
.bio-lead {
  font-size: 18px !important;
  color: var(--ink) !important;
  margin-bottom: 1.6em !important;
}
.bio-sub {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  margin: 2em 0 0.7em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bio-sub:first-of-type { margin-top: 0; }

/* ========== Find me ========== */
.socials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.social-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 16px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--glass-stroke);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--ink);
  min-width: 0;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.social-tile:hover {
  background: var(--grad);
  color: #1a1230;
  box-shadow: none;
  transform: translateY(-2px);
}
.social-tile > div:last-child {
  min-width: 0;
  flex: 1 1 auto;
}
.social-icon {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  display: flex; align-items: center; justify-content: center;
}
.social-icon svg { width: 100%; height: 100%; }
.social-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}
.social-handle {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  opacity: 0.65;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-tile:hover .social-handle { opacity: 0.85; }

/* ========== Footer ========== */
footer {
  position: relative;
  z-index: 10;
  margin: 48px 14px 14px;
  padding: 26px 32px;
  border-radius: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-dim);
  font-family: 'Inter', sans-serif;
}
footer .copy {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  font-size: 12px;
}
footer .footer-mid { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
footer .footer-credit {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
footer .footer-credit a { color: var(--ink-dim); }
footer a:hover { color: var(--grad-top); }

/* ========== Cookie banner ========== */
.cookie-banner {
  position: fixed;
  left: 14px; right: 14px;
  bottom: 14px;
  z-index: 250;
  padding: 18px 22px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  animation: slide-up 320ms var(--ease);
}
.cookie-banner[hidden] { display: none; }
@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.cookie-text {
  flex: 1; min-width: 280px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.cookie-text strong {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  font-size: 11px;
  display: block;
  margin-bottom: 4px;
}
.cookie-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.btn {
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-ghost {
  background: rgba(255,255,255,0.06);
  border-color: var(--glass-stroke);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--grad); color: #1a1230; border-color: transparent; }
.btn-primary {
  background: var(--ink);
  color: #1a1230;
}
.btn-primary:hover { background: var(--grad); border-color: transparent; }
.btn-link {
  background: transparent;
  color: var(--ink-dim);
  padding: 10px 6px;
}
.btn-link:hover { color: var(--ink); }

/* Customise modal */
.cookie-modal-h {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  font-size: 24px;
}
.cookie-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 16px;
}
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .k {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.toggle-row .desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.switch {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  position: relative;
  cursor: pointer;
  transition: background var(--t-hover);
  flex: 0 0 44px;
}
.switch.on { background: var(--grad); }
.switch.locked { opacity: 0.45; cursor: not-allowed; }
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: #fff;
  transition: transform var(--t-hover);
}
.switch.on::after { transform: translateX(18px); }

/* ========== Page load entrance ==========
   Soft sequenced fade-in: page first, then the hero pieces rise into
   place one after another. The bag's combined animation is set above
   so it stays in sync with this stagger. The prefers-reduced-motion
   block far below collapses all durations to 0, so users who opt out
   of motion see no entrance animation.

   `body.is-warm-load` is set by script.js when the page comes back from
   bfcache or a same-session repeat visit. In that case the entrance
   already played once — replaying it on every navigation feels slow,
   so we skip straight to the resting state. */
@keyframes site-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-bag-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 0.95; transform: translateY(0) scale(1); }
}

body { animation: site-fade-in 360ms ease-out both; }

.hero-eyebrow-row { animation: hero-rise-in 520ms 80ms  cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-wordmark    { animation: hero-rise-in 580ms 180ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-tag         { animation: hero-rise-in 520ms 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.scroll-cue       { animation: site-fade-in 400ms 520ms ease-out both; }

/* Hold the cookie banner back so it doesn't pop in over the hero entrance. */
.cookie-banner    { animation: slide-up 280ms 650ms var(--ease) both; }

/* Warm load = bfcache restore or same-session repeat visit. Skip the
   entrance — anything that was animating starts at its resting state. */
body.is-warm-load,
body.is-warm-load .hero-eyebrow-row,
body.is-warm-load .hero-wordmark,
body.is-warm-load .hero-tag,
body.is-warm-load .scroll-cue,
body.is-warm-load .cookie-banner,
body.is-warm-load .hero-bag {
  animation: none;
}
/* Hero-bag keeps its forever-floaty animation on warm loads — just skip
   the initial fade-up by overriding only the entrance keyframe. */
body.is-warm-load .hero-bag {
  animation: floaty 4s ease-in-out infinite;
  opacity: 0.95;
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
  section { padding: 64px 22px; }
  .bio-panel { padding: 32px 24px; }
  footer { flex-direction: column; align-items: flex-start; padding: 22px; }

  /* Mobile carousel:
     - Hide the prev/next arrows; touch swipe handles navigation.
     - Make cards wide enough that one dominates the viewport while the
       neighbors peek in from the sides.
     The edge fade is shared with desktop in the base .carousel rule. */
  .carousel-nav { display: none; }
  .album-card { flex: 0 0 clamp(220px, 78vw, 320px); }

  .topbar-nav { display: none; }
  .hamburger { display: inline-flex; }

  .topbar.is-floating {
    left: auto;
    /* a touch more breathing room than the desktop 14px so the round
       burger / X chip doesn't crowd the screen edge on phones. */
    right: 20px;
    top: 20px;
    width: 52px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .topbar.is-floating .topbar-wordmark {
    display: none;
  }

  .topbar.is-scrolled {
    padding: 8px 10px 8px 10px;
    justify-content: space-between;
  }
  .topbar.is-scrolled .topbar-wordmark {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .topbar.is-scrolled .topbar-wordmark .wordmark-img {
    height: 22px;
  }
  .topbar.is-scrolled::after {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    order: -1;
  }
}

@media (max-width: 720px) {
  .hero-bag { display: none; }

  /* On phones the cookie banner's three buttons wrap awkwardly into a
     half-line, so we stack everything full-width. Order is reshuffled
     via flex `order` so the primary action (Accept all) sits on top
     even though it's last in the DOM, and Customise drops to a small
     link at the bottom. */
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cookie-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .cookie-actions .btn {
    width: 100%;
    text-align: center;
  }
  .cookie-actions .btn-primary { order: 1; }
  .cookie-actions .btn-ghost   { order: 2; }
  .cookie-actions .btn-link    { order: 3; padding: 6px 0; }
}

/* ========== Legal pages (privacy etc.) ==========
   Long-form prose page. Reuses the .bio-panel surface shape with a wider
   reading column (~70ch) and adds sectioned h2/h3 typography + lists. */
.legal-section { padding-top: 120px; }
.legal-meta {
  margin-top: 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.legal-panel {
  padding: 56px 64px;
  border-radius: 28px;
  max-width: 880px;
  margin: 0 auto;
}
.legal-prose {
  max-width: 70ch;
  margin: 0 auto;
}
.legal-prose p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-dim);
  margin: 0 0 1.1em;
  text-wrap: pretty;
}
.legal-prose .legal-lead {
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 1.6em;
}
.legal-prose ul,
.legal-prose ol {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-dim);
}
.legal-prose li { margin: 0 0 0.55em; }
.legal-prose li::marker { color: var(--ink-faint); }
.legal-prose strong { color: var(--ink); font-weight: 600; }
.legal-prose h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 22px;
  margin: 2.4em 0 0.8em;
  color: var(--ink);
  line-height: 1.25;
  scroll-margin-top: 96px;
}
.legal-prose h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  margin: 1.6em 0 0.7em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.legal-prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--glass-stroke);
  transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.legal-prose a:hover {
  color: var(--grad-top);
  border-color: var(--grad-top);
}
.legal-toc {
  list-style: decimal;
  font-size: 15px;
}
.legal-toc li { margin: 0 0 0.3em; }
.legal-toc a {
  border-bottom: 0;
  color: var(--ink-dim);
}
.legal-toc a:hover { color: var(--grad-top); }

@media (max-width: 900px) {
  /* Bigger top gap on phones — the topbar runs in its full pill state
     on legal pages (no hero to float above) and would otherwise crowd
     the "Legal" eyebrow. */
  .legal-section { padding-top: 140px; }
  .legal-panel { padding: 32px 24px; border-radius: 22px; }
  .legal-prose h2 { font-size: 19px; }
}

/* ========== Legal-page background ==========
   Legal pages skip the hero video — long-form prose should be the focal
   point, not a blurred video competing behind it. A fixed pseudo-element
   keeps a faint brand-tinted gradient anchored to the viewport regardless
   of scroll, giving the page atmosphere without distraction. */
body.legal-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 0%, rgba(248,199,213,0.09), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(153,149,239,0.11), transparent 55%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}