/* ═══════════════════════════════════════════
   Joyie Lai — joyielai.com
   Tokens → Base → Layout → Components → Responsive
   ═══════════════════════════════════════════ */

:root{
  --ink:        #181716;
  --ink-soft:   #55524e;
  --ink-faint:  #8e8a85;
  --paper:      #ffffff;
  --paper-warm: #f6f4f1;
  --rule:       rgba(24,23,22,.14);
  --accent:     #1b5fa8;

  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:  "Dosis", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.5rem, 5vw, 4.5rem);
  --bay: clamp(5rem, 11vw, 10.5rem);   /* section rhythm */

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img,iframe{ max-width:100%; display:block; }

a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:.75rem 1.25rem;
}
.skip:focus{ left:0; }

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

.wrap{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--gut);
}

/* ── Type helpers ───────────────────────── */

.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:.75rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 2.25rem;
}
.eyebrow.light{ color:rgba(255,255,255,.72); }

.h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2rem, 4.4vw, 3.35rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 1.5rem;
}

.lede{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.6rem, 3.4vw, 2.6rem);
  line-height:1.24;
  letter-spacing:-.005em;
  margin:0 0 3.5rem;
  max-width:19ch;
}

p{ margin:0 0 1.4rem; }
p:last-child{ margin-bottom:0; }

/* ── Header ─────────────────────────────── */

.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--rule);
}

.head-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; height:74px;
}

.wordmark{
  font-family:var(--serif);
  font-size:1.5rem; font-weight:300;
  letter-spacing:.06em;
  text-decoration:none;
  color:#fff;
  transition:color .35s var(--ease);
}
.site-head.solid .wordmark{ color:var(--ink); }

.nav{ display:flex; gap:2.25rem; }
.nav a{
  font-size:.8rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  color:rgba(255,255,255,.85);
  transition:color .35s var(--ease), opacity .2s;
  position:relative;
}
.site-head.solid .nav a{ color:var(--ink-soft); }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); }
.site-head.solid .nav a:hover{ color:var(--accent); }

.nav-toggle{
  display:none;
  width:34px; height:34px; padding:0;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{
  display:block; height:1px; margin:6px 0;
  background:#fff;
  transition:background .35s var(--ease), transform .3s var(--ease), opacity .2s;
}
.site-head.solid .nav-toggle span{ background:var(--ink); }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ── Hero ───────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}

/* Rotating hero. Frame 1 is inline so it shows without JS; the rest are
   promoted from data-art after load, then cross-faded by script.js. */
.hero-stage{
  position:absolute; inset:0; z-index:-2;
  background:#221f1d;
}
.hero-media{
  position:absolute; inset:0;
  background-image:
    var(--art, none),
    radial-gradient(120% 90% at 70% 20%, #4a4038 0%, #26221f 55%, #14120f 100%);
  background-size:cover, cover;
  background-position:center, center;
  transform:scale(1.04);
  opacity:0;
  transition:opacity 1.6s var(--ease);
}
.hero-media.is-active{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .hero-media{ transition:none; } }

.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    /* left column carries the headline, so it gets its own falloff */
    linear-gradient(to right,  rgba(10,9,8,.80) 0%, rgba(10,9,8,.55) 30%,
                               rgba(10,9,8,.18) 60%, rgba(10,9,8,0) 85%),
    linear-gradient(to bottom, rgba(10,9,8,.55) 0%, rgba(10,9,8,0) 32%),
    linear-gradient(to top,    rgba(10,9,8,.82) 0%, rgba(10,9,8,.30) 55%, rgba(10,9,8,0) 85%);
}

.hero-inner{ padding-block:clamp(7rem, 16vh, 10.5rem) clamp(5rem, 12vh, 9rem); color:#fff; }

.hero-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3rem, 9.6vw, 8rem);
  line-height:.96;
  letter-spacing:-.02em;
  margin:0 0 2.75rem;
}

.scroll-cue{
  position:absolute; left:50%; bottom:2.25rem;
  translate:-50% 0;
  width:1px; height:56px;
  background:rgba(255,255,255,.28);
  overflow:hidden;
}
.scroll-cue span{
  display:block; width:100%; height:40%;
  background:rgba(255,255,255,.9);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(250%); }
}
@media (prefers-reduced-motion:reduce){ .scroll-cue span{ animation:none; } }

/* ── Buttons ────────────────────────────── */

.btn{
  display:inline-block;
  padding:.95rem 2.4rem;
  background:var(--accent); color:#fff;
  font-size:.78rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none;
  border:0; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ background:#164e8b; transform:translateY(-2px); }
.btn-dark{ background:var(--ink); font-family:var(--sans); }
.btn-dark:hover{ background:var(--accent); }

/* ── Sections ───────────────────────────── */

.section{ padding-block:var(--bay); }
.bordered{ border-top:1px solid var(--rule); }

.col p{ color:var(--ink-soft); max-width:46ch; }

/* ── Discography ────────────────────────── */

.disco-head{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1.45rem, 3.2vw, 2.3rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink);
  margin:0 0 clamp(3rem, 6vw, 5rem);
}

.disco-sub{
  font-family:var(--sans);
  font-weight:500;
  font-size:.75rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink-faint);
  margin:0 0 2rem;
}
.disco + .disco-sub{ margin-top:clamp(3.5rem, 7vw, 6rem); }

.disco{
  list-style:none; margin:0 0 3rem; padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 2.2vw, 2rem);
}

/* --art is set inline on the button; it inherits down to .disc-front. */
.disc-art{
  display:block; width:100%;
  aspect-ratio:2/3;   /* overridden per-grid below */
  padding:0; border:0; background:none;
  cursor:pointer;
  perspective:900px;
  transition:transform .45s var(--ease);
}
.disc-art:hover{ transform:translateY(-4px); }

.disc-flip{
  position:relative; display:block;
  width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .6s var(--ease);
}
.disc-art.flipped .disc-flip{ transform:rotateY(180deg); }

.disc-face{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.disc-front{
  background-image:
    var(--art, none),
    linear-gradient(145deg, #ebe7e2 0%, #dbd6cf 55%, #cbc5bc 100%);
  background-size:cover, cover;
  background-position:center, center;
}
.disc-back{
  transform:rotateY(180deg);
  background:var(--ink);
  color:#fff;
  padding:1rem;
  text-align:center;
  font-size:.78rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  line-height:1.5;
}

.disc-year{
  display:block;
  margin-top:.2rem;
  font-size:.72rem; font-weight:500;
  letter-spacing:.14em;
  color:var(--ink-faint);
}

.disc-cap{
  margin:.95rem 0 0;
  text-align:center;
  font-size:.88rem;
  line-height:1.5;
  color:var(--ink-soft);
}

@media (prefers-reduced-motion:reduce){
  .disc-art, .disc-flip{ transition:none; }
}

.disco-note{ text-align:center; margin-bottom:1.5rem; }

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

.profiles{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap;
  gap:.85rem;
}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:26px; padding:0 .6rem;
  border-radius:4px;
  background:var(--ink);
  color:#fff;
  font-size:.68rem; font-weight:600;
  letter-spacing:.04em;
  line-height:1;
  text-decoration:none;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.badge:hover{ background:var(--accent); transform:translateY(-2px); }

/* Records: square sleeves, larger. Film: 2:3 posters, smaller. */
.disco--records{
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(1.25rem, 2.5vw, 2rem) clamp(.75rem, 1.4vw, 1.25rem);
}
.disco--records .disc-art{ aspect-ratio:1/1; }
.disco--records .disc-cap{ font-size:.76rem; margin-top:.7rem; }
.disco--records .disc-year{ font-size:.66rem; }
.disco--records .disc-back{ font-size:.62rem; letter-spacing:.12em; padding:.5rem; }

.disco--film{
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(1.25rem, 2.5vw, 2rem) clamp(.75rem, 1.4vw, 1.25rem);
}
.disco--film .disc-art{ aspect-ratio:2/3; }
.disco--film .disc-cap{ font-size:.76rem; margin-top:.7rem; }
.disco--film .disc-year{ font-size:.66rem; }
.disco--film .disc-back{ font-size:.62rem; letter-spacing:.12em; padding:.5rem; }

@media (max-width:1024px){ .disco--film, .disco--records{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:900px){
  .disco--film, .disco--records{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:620px){
  .disco--film, .disco--records{ grid-template-columns:repeat(3, 1fr); }
}

.note{
  font-size:.85rem; letter-spacing:.04em;
  color:var(--ink-faint);
}

/* ── Listen ─────────────────────────────── */

.listen-sub{ color:var(--ink-soft); max-width:44ch; margin-bottom:3rem; }
.player{ max-width:820px; }
.player iframe{ border:0; }

/* ── Contact ────────────────────────────── */

.contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 7vw, 7rem);
  align-items:start;
}
.contact-copy p{ color:var(--ink-soft); max-width:36ch; }

.mail{
  display:inline-block;
  margin-top:1.25rem;
  font-family:var(--serif);
  font-size:clamp(1.25rem, 2.4vw, 1.8rem);
  font-weight:400;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(27,95,168,.35);
  padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.mail:hover{ border-bottom-color:var(--accent); }

.socials{
  list-style:none; display:flex; gap:1.75rem;
  margin:2.5rem 0 0; padding:0;
}
.socials a{
  font-size:.74rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); text-decoration:none;
  transition:color .3s var(--ease);
}
.socials a:hover{ color:var(--accent); }

/* ── Form ───────────────────────────────── */

.field{ margin-bottom:1.6rem; }
.field label{
  display:block;
  font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:.5rem;
}
.field input,
.field textarea{
  width:100%;
  font-family:var(--sans);
  font-size:1rem; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--rule);
  padding:.6rem 0;
  transition:border-color .3s var(--ease);
}
.field textarea{ resize:vertical; }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--accent);
}
.field input::placeholder,
.field textarea::placeholder{ color:#bab5af; }

/* ── Footer ─────────────────────────────── */

.site-foot{
  border-top:1px solid var(--rule);
  padding-block:2.25rem;
  background:var(--paper-warm);
}
.foot-inner{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  font-size:.72rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── Reveal on scroll ───────────────────── */

.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ── Responsive ─────────────────────────── */

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

@media (max-width:720px){
  .nav-toggle{ display:block; }

  .nav{
    position:fixed; inset:74px 0 auto 0;
    flex-direction:column; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:0 var(--gut);
    max-height:0; overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  .nav.open{ max-height:60vh; }
  .nav a{
    color:var(--ink-soft);
    padding:1.05rem 0;
    border-bottom:1px solid var(--rule);
  }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }

  .lede{ max-width:none; }
  .foot-inner{ flex-direction:column; gap:.5rem; }
}