/* ============================================================
   TWEN. Totes Wild Entertainment Network.
   Dark + metallic copper showcase theme.
   ============================================================ */

/* The accent ramp is sampled straight out of the logo lockup
   (assets/brand/twen-logo.png): its lettering runs from a pale specular edge
   through a lit copper face down to a red-brown shadow, and the three --gold
   stops are the mean colour of those luminance bands. That is why they read
   copper rather than the yellow they used to be — the tokens keep the "gold"
   name because the whole site (and .btn-gold, .gold) is written against it,
   but the hue is the metal in the mark. --gold-rgb is the same accent as bare
   channels, so the many rgba() washes can be tinted from one place. */
:root {
  --bg:        #050505;
  --bg-2:      #0d0b0a;
  --card:      #110f0e;
  --ink:       #f5f0ea;
  --muted:     #a4988e;
  --gold-1:    #fbd4b2;   /* logo highlight — accent text, icons, hovers */
  --gold-2:    #e19c77;   /* logo lit face — borders, rules, dots */
  --gold-3:    #8f4f34;   /* logo shadow — the deep end of the gradient */
  --gold-rgb:  225, 156, 119;
  --gold-grad: linear-gradient(135deg, #fdddc0 0%, #e19c77 45%, #8f4f34 100%);
  --gold-ink:  #21100a;   /* text sitting ON a copper fill */
  --line:      rgba(var(--gold-rgb), 0.22);
  --line-soft: rgba(255, 255, 255, 0.07);
  --shadow:    0 24px 60px rgba(0, 0, 0, 0.55);
  --nav-h:     84px;
  --maxw:      1240px;
  --ticker-h:  40px;
}

* { box-sizing: border-box; }

/* Hide scrollbars site-wide (this stylesheet is shared by the album pages that
   load inside the slide-up viewer, so it covers those too). Content still
   scrolls by wheel, touch and keyboard — we just don't paint the bar. Using
   scrollbar-width:none rather than a reserved gutter also removes the layout
   shift where a bar pops in on a long page and nudges everything sideways:
   there is simply never a bar taking up width. */
* { scrollbar-width: none; }             /* Firefox */
*::-webkit-scrollbar { display: none; }  /* Chrome, Safari, Edge, iOS */
html { -ms-overflow-style: none; }       /* legacy Edge / IE */

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------- NEWS TICKER ----------------------------------
   Sticky strip above the hero, filled from /api/ticker. The scroll is a single
   CSS translate on a track that holds the item list TWICE: at -50% the second
   copy sits exactly where the first started, so the loop restarts invisibly.
   scripts.js sets the duration from the measured width, which keeps the speed
   constant in pixels-per-second whether there is one item or twenty. */
.ticker {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  height: var(--ticker-h);
  background: linear-gradient(180deg, #0c0a09 0%, #060505 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ticker[hidden] { display: none; }

/* The hero is min-height:100vh. Without this the ticker would push it down and
   cost the fold 40px, which is exactly the space the second card row needs. */
body.has-ticker .hero { min-height: calc(100vh - var(--ticker-h)); }

.ticker-label {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--gold-ink);
  background: var(--gold-grad);
}

.ticker-window {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  /* Fade the text out at both ends instead of letting it hard-clip. */
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.ticker-item + .ticker-item::before {
  /* Gold diamond between items, drawn on the separator rather than as its own
     element so the duplicated track stays a flat list of items. */
  content: '';
  width: 5px;
  height: 5px;
  margin-right: 22px;
  margin-left: -22px;
  transform: rotate(45deg);
  background: var(--gold-2);
  opacity: 0.85;
}
a.ticker-item { transition: color 0.2s ease; }
a.ticker-item:hover { color: var(--gold-1); }
a.ticker-item .arrow { margin-left: 7px; color: var(--gold-2); }

@media (max-width: 560px) {
  :root { --ticker-h: 36px; }
  .ticker-label { padding: 0 10px; font-size: 10px; letter-spacing: 0.16em; }
  .ticker-item { font-size: 11.5px; padding: 0 16px; }
  .ticker-item + .ticker-item::before { margin-right: 16px; margin-left: -16px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Never auto-scroll for someone who asked for stillness. The strip becomes a
     normal horizontally scrollable row they can swipe through themselves. */
  .ticker-track { animation: none; }
  .ticker-window { overflow-x: auto; scrollbar-width: none; }
  .ticker-window::-webkit-scrollbar { display: none; }
}

/* Gold text helper */
.gold,
.eyebrow,
.section-head h2 .accent {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------- NAV ---------------------------------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 34px;
  z-index: 100;
  background: linear-gradient(180deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.55) 70%, rgba(5,5,5,0) 100%);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-nav.scrolled {
  background: rgba(6, 6, 6, 0.94);
  box-shadow: 0 1px 0 var(--line-soft);
  backdrop-filter: blur(10px);
}

.brand { flex: 0 0 auto; display: flex; align-items: center; }
.brand img { height: 62px; width: auto; }

/* No top bar on the page right now: drop the offset the hero and anchors
   reserve for it. Putting the <nav> back restores the spacing with it. */
:root:not(:has(.site-nav)) { --nav-h: 0px; }
:root:has(.site-nav.nav-bare) { --nav-h: 156px; }
.nav-bare .brand img { height: 124px; }

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0 auto;
  padding: 0;
}
.nav-links a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s ease;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--gold-grad);
  transition: width 0.25s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold-1); }
.nav-links a.active::after,
.nav-links a:hover::after { width: 100%; }

.nav-social { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.nav-social a { color: var(--muted); transition: color 0.2s ease, transform 0.2s ease; }
.nav-social a:hover { color: var(--gold-1); transform: translateY(-2px); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: 0; cursor: pointer;
  padding: 8px; margin-left: auto;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--gold-1);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---------------------------------- HERO ----------------------------------
   Logo, tagline and the project cards share the first fold, so everything in
   here is sized against the viewport height rather than fixed pixels. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.6vh, 42px);
  text-align: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(24px, 4vh, 56px)) 24px clamp(52px, 7vh, 88px);
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 82% 42%, rgba(150, 20, 30, 0.42) 0%, rgba(150,20,30,0) 55%),
    radial-gradient(90% 70% at 84% 60%, rgba(40, 70, 150, 0.30) 0%, rgba(40,70,150,0) 55%),
    radial-gradient(90% 90% at 12% 70%, rgba(188, 118, 88, 0.24) 0%, rgba(188,118,88,0) 55%),
    radial-gradient(120% 100% at 50% 120%, rgba(var(--gold-rgb), 0.10) 0%, rgba(0,0,0,0) 60%),
    #060606;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 0%, transparent 100%);
  opacity: 0.5;
}
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(80% 80% at 50% 45%, transparent 40%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
.hero-logo {
  /* The lockup is wide (700x217, roughly 3.2:1), so width is what sets its
     presence. Held deliberately small and given room to breathe rather than
     filling the fold: the margins below are what separate it from the tagline,
     since the mark no longer does that by sheer size. */
  width: min(340px, 54vw);
  max-height: 30vh;
  object-fit: contain;
  margin: clamp(16px, 3vh, 38px) auto clamp(34px, 6vh, 66px);
  filter: drop-shadow(0 10px 40px rgba(0,0,0,0.6));
  animation: rise 0.9s ease both;
}
.hero-projects {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Narrower than --maxw on purpose. The grid went from one row of four to
     two rows of three; at the full 1240px each card grows to ~400px wide
     (~266px tall) and two rows of that push the logo and the cards out of
     the first fold. Capping the block here keeps each card the same size it
     was in the four-up layout, so two rows cost only one card's height. */
  max-width: 940px;
  margin: 0 auto;
  animation: rise 0.9s ease 0.3s both;
}
.hero-tagline {
  margin: clamp(12px, 2vh, 22px) auto 0;
  font-size: clamp(15px, 2.4vw, 20px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #f2e8e0;
  animation: rise 0.9s ease 0.15s both;
}
.hero .btn { animation: rise 0.9s ease 0.3s both; }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.4em; color: var(--muted);
  z-index: 2;
  animation: bob 2s ease-in-out infinite;
}

/* ---------------------------------- BUTTONS ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.2s ease;
}
.btn .arrow { transition: transform 0.25s ease; }
.btn:hover .arrow { transform: translateX(5px); }

.btn-gold {
  border: 1.5px solid var(--gold-2);
  color: var(--gold-1);
  background: rgba(var(--gold-rgb), 0.05);
}
.btn-gold:hover {
  background: var(--gold-grad);
  color: var(--gold-ink);
  box-shadow: 0 12px 34px rgba(var(--gold-rgb), 0.28);
  transform: translateY(-2px);
}
.btn-ghost {
  border: 1.5px solid var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--gold-2); color: var(--gold-1); transform: translateY(-2px); }

/* ---------------------------------- SECTIONS ---------------------------------- */
.block { padding: 96px 0; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-head h2,
.about h2 {
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
  line-height: 1.1;
}
.section-sub { color: var(--muted); margin: 0; }

/* ---------------------------------- PROJECT CARDS ----------------------------------
   Each card IS the artwork (title + tagline are baked into the image). The card
   is a 3:2 frame; live cards reveal a gold "View Project" chip on hover, coming
   soon cards wear a small persistent badge. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
  background-color: #0a0a0a;
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.card.live { cursor: pointer; }
.card.coming { cursor: default; }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 52px rgba(0, 0, 0, 0.62); }
.card.live:hover { box-shadow: 0 24px 52px rgba(0, 0, 0, 0.62), 0 0 0 1px var(--line); }

/* Hover reveal for live cards */
.card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: linear-gradient(0deg, rgba(4, 4, 4, 0.6) 0%, rgba(4, 4, 4, 0) 42%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card.live:hover .card-overlay { opacity: 1; }
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--gold-grad);
  padding: 11px 20px;
  border-radius: 6px;
  transform: translateY(10px);
  transition: transform 0.3s ease;
}
.card.live:hover .card-cta { transform: none; }

/* Coming soon badge */
.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-1);
  background: rgba(5, 5, 5, 0.68);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ---------------------------------- PILLARS ---------------------------------- */
.pillars {
  padding: 40px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.pillar-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pillar { display: flex; align-items: center; gap: 16px; padding: 18px 8px; }
.pillar-icon {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold-1);
}
.pillar h4 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 4px;
}
.pillar p { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.45; }

/* ---------------------------------- ABOUT ---------------------------------- */
.about { text-align: center; background: radial-gradient(90% 120% at 50% 0%, rgba(var(--gold-rgb), 0.05), transparent 60%); }
.about-inner { max-width: 720px; margin: 0 auto; }
.about-inner p { color: var(--muted); font-size: 17px; margin: 0 0 30px; }

/* ---------------------------------- FOOTER ---------------------------------- */
.site-footer { background: #030303; border-top: 1px solid var(--line-soft); padding-top: 60px; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
}
.footer-brand img { height: 84px; width: auto; }
.footer-col h5 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-1); margin: 0 0 16px;
}
.footer-col a {
  display: block; color: var(--muted); font-size: 14px; padding: 5px 0;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--ink); }
.footer-base {
  border-top: 1px solid var(--line-soft);
  padding: 22px 0;
  text-align: center;
}
.footer-base p { color: #6f6157; font-size: 12.5px; letter-spacing: 0.08em; margin: 0; }

/* Copyright-only footer: no link columns to sit above the rule. */
.site-footer.footer-bare { padding-top: 0; }
.footer-bare .footer-base { border-top: 0; padding: 26px 0; }

/* ---------------------------------- ANIMATION ---------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-logo, .hero-tagline, .hero .btn, .scroll-cue { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------- RESPONSIVE ---------------------------------- */
@media (max-width: 1080px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --nav-h: 72px; }
  :root:has(.site-nav.nav-bare) { --nav-h: 112px; }
  .site-nav { padding: 0 18px; gap: 14px; }
  .brand img { height: 48px; }
  .nav-bare .brand img { height: 96px; }
  .nav-toggle { display: flex; }
  .nav-social { display: none; }
  .nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    background: rgba(6,6,6,0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .nav-links.open { max-height: 60vh; }
  .nav-links li { border-bottom: 1px solid var(--line-soft); }
  .nav-links a { display: block; padding: 16px 22px; }
  .nav-links a::after { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .block { padding: 68px 0; }
  .project-grid { grid-template-columns: 1fr; }
  /* Keep the fold's cards two-up on phones so they stay above the crease. */
  .hero-projects .project-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pillar-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero-tagline { letter-spacing: 0.2em; }
}

/* ---------------------------------- PROJECT VIEWER (slide-up) ----------------------------------
   Same motion language as ds studio's slide-up module panel: the panel parks
   below the viewport at translateY(110%) and rides up to rest. Open uses a
   strong ease-OUT so it decelerates and "lands"; close uses the reverse
   ease-IN so it accelerates away. 640ms both directions. */
.project-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.pv-scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0.72);
  opacity: 0;
  transition: opacity 420ms ease;
  backdrop-filter: blur(2px);
}
.pv-panel {
  position: absolute;
  inset: 0;                 /* flush to all edges: slides all the way up, no gap */
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  overflow: hidden;
  transform: translateY(110%);
  visibility: hidden;
  transition:
    transform 640ms cubic-bezier(0.7, 0, 0.84, 0),
    visibility 0s linear 640ms;
}
.project-viewer.open { pointer-events: auto; }
.project-viewer.open .pv-scrim { opacity: 1; }
.project-viewer.open .pv-panel {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 640ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

/* Floating close affordance: a small down-chevron pinned to the top-center of
   the panel, over the project. It fades/drops in AFTER the panel lands (delayed
   transition) so it reads as "appearing" once you have arrived, and clicking it
   slides the panel back down. Translucent with a blur so it stays legible over
   whatever the project's own page puts at the top. */
.pv-close {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.66);
  border: 1px solid var(--line);
  color: var(--gold-1);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition:
    opacity 260ms ease 260ms,
    transform 260ms ease 260ms,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.pv-close svg { width: 20px; height: 20px; display: block; }
.pv-close:hover { background: rgba(var(--gold-rgb), 0.16); border-color: var(--gold-2); color: #fff; }
.project-viewer.open .pv-close {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.pv-frame-wrap {
  position: relative;
  flex: 1 1 auto;
  background: #060606;
}
.pv-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.pv-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 8px;
  transition: opacity 0.3s ease;
}
.pv-loader.hide { opacity: 0; pointer-events: none; }
.pv-loader span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-2);
  animation: pvpulse 1s ease-in-out infinite;
}
.pv-loader span:nth-child(2) { animation-delay: 0.15s; }
.pv-loader span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pvpulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-6px); }
}

body.pv-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pv-panel, .project-viewer.open .pv-panel { transition: visibility 0s; }
  .pv-close, .project-viewer.open .pv-close { transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
  .pv-scrim { transition: none; }
  .pv-loader span { animation: none; }
}

/* ---------------------------------- MUSIC PAGES ----------------------------------
   Standalone artist album pages (loaded in the slide-up viewer, or visited
   directly). Accent defaults to the site gold (Totes Wild); the rose-gold theme
   swaps in a copper accent. */
.music-page {
  --accent-grad: var(--gold-grad);
  --accent-1: var(--gold-1);
  min-height: 100vh;
}
.music-page.theme-rosegold {
  --accent-grad: linear-gradient(135deg, #f8ddc8 0%, #e0a878 45%, #b0673c 100%);
  --accent-1: #f3cbb0;
}

.music-hero {
  position: relative;
  padding: 40px 0 46px;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.music-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 130% at 20% 0%, rgba(var(--gold-rgb), 0.08), transparent 60%);
  pointer-events: none;
}
.music-page.theme-rosegold .music-hero::before {
  background: radial-gradient(90% 130% at 20% 0%, rgba(224, 168, 120, 0.12), transparent 60%);
}
.music-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 34px;
  align-items: center;
}
.music-cover {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 2;
}
.music-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-back {
  display: block;
  width: fit-content;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  transition: color 0.2s ease;
}
.music-back:hover { color: var(--accent-1); }
.music-hero-meta .eyebrow {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.music-hero-meta h1 {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 6px;
  line-height: 1.05;
}
.music-artist {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 0 16px;
}
.music-desc { color: var(--muted); max-width: 46ch; margin: 0 0 26px; }
.music-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.music-page .btn-gold {
  border-color: transparent;
  background: var(--accent-grad);
  color: var(--gold-ink);
}
.music-page .btn-gold:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(var(--gold-rgb), 0.22); }
.music-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.song-grid { padding: 44px 0 80px; }
.song-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.song { display: flex; flex-direction: column; }
.song-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0b09;
  border: 1px solid var(--line-soft);
}
.song-play-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
}
.song-thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease, filter 0.3s ease;
}
.song-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.45));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.song-play-btn:hover .song-thumb { transform: scale(1.05); }
.song-play-btn:hover + .song-media::after,
.song-media:hover::after { opacity: 1; }
.song-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
  transition: transform 0.25s ease;
}
.song-play-icon::before {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--gold-ink);
}
.song-play-btn:hover .song-play-icon { transform: translate(-50%, -50%) scale(1.08); }
.song-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.song-info {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 4px 0;
}
.song-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  flex: 0 0 auto;
}
.song-title { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }

/* Secondary text link next to a hero/album button */
.music-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-1);
  transition: opacity 0.2s ease;
}
.music-link:hover { opacity: 0.75; }

/* ---------------------------------- ARTIST PAGE ----------------------------------
   The hub an artist card opens: a banner built from the artist artwork, then one
   row per album linking through to that album's song page. */
.artist-hero {
  position: relative;
  padding: 40px 0 34px;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.artist-hero-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 32%;
  opacity: 0.5;
}
.artist-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0.82) 46%, rgba(5,5,5,0.42) 100%),
    linear-gradient(0deg, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0) 60%);
  pointer-events: none;
}
.artist-hero-inner { position: relative; z-index: 1; max-width: 640px; }
.artist-hero-inner h1 {
  font-size: clamp(32px, 6vw, 62px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 8px;
  line-height: 1.02;
}
.artist-tagline {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 0 14px;
}
.artist-page .music-desc { margin-bottom: 16px; }

.album-section { padding: 36px 0 84px; }
.album-section .section-head { margin-bottom: 26px; }
.album-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 30px;
}
.album {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 30px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0));
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.album:hover {
  border-color: var(--line);
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
}
.album-art {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.album-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.album:hover .album-art img { transform: scale(1.04); }
.album-art .card-overlay { align-items: center; }
.album-art:hover .card-overlay,
.album-art:focus-visible .card-overlay { opacity: 1; }
.album-art .card-cta { background: var(--accent-grad); }
.album-art:hover .card-cta { transform: none; }
.album-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--accent-grad);
  padding: 6px 12px;
  border-radius: 5px;
}
.album-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.1;
}
.album-title a { transition: color 0.2s ease; }
.album-title a:hover { color: var(--accent-1); }
.album-desc { color: var(--muted); margin: 0 0 22px; max-width: 52ch; }
.album-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .album { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 720px) {
  .music-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .music-cover { max-width: 340px; }
  .song-list { grid-template-columns: 1fr; }
  .artist-hero-art { background-position: 70% 30%; }
  .artist-hero::after {
    background: linear-gradient(0deg, rgba(5,5,5,0.97) 18%, rgba(5,5,5,0.72) 70%, rgba(5,5,5,0.5) 100%);
  }
}