/* =====================================================================
   A.M. OVERTONE — RESONANCE (full experience)
   Persistent audio-reactive particle sphere · deep-space minimalism.
   Built on assets/tokens.css.
   ===================================================================== */

html { scroll-behavior: smooth; }
/* Keep a REAL scrollbar track present in every mode (body is the scroll container) so the
   position:fixed nav never reflows. A fixed element's containing block is reduced by the
   actual classic scrollbar (9px) — NOT by `scrollbar-gutter` — so when Noir mode hides the
   scrollbar the nav would shift ~9px right. Forcing overflow-y:scroll always reserves it. */
body { background: var(--void); overflow-x: hidden; overflow-y: scroll; }

/* ---------- persistent sphere backdrop ---------- */
#scene { position: fixed; inset: 0; z-index: 0; display: block; pointer-events: none; }
.ambient { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.ambient .vig { position: absolute; inset: 0;
  background: radial-gradient(125% 95% at 50% 42%, transparent 38%, rgba(3,3,8,.6) 78%, rgba(3,3,8,.96) 100%); }
.ambient .grain { position: absolute; inset: 0; opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- top nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(12px,1.9vw,18px) clamp(18px,3.4vw,44px);
  text-shadow: 0 1px 3px rgba(4,4,10,.95), 0 2px 14px rgba(4,4,10,.85);
  background: linear-gradient(180deg, rgba(4,4,10,.82) 0%, rgba(4,4,10,.5) 55%, transparent 100%); }
.nav a:focus-visible, .nav button:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; border-radius: 6px; }
.nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.nav .brand .bm { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; display: block; }
.nav .brand .wm { font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.nav .links { display: flex; gap: clamp(14px,2vw,30px); align-items: center; }
.nav .links a { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; text-decoration: none; position: relative; padding: 4px 0; transition: color .25s; }
.nav .links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px;
  background: var(--teal-hi); transition: right .3s var(--ease-out); }
.nav .links a:hover, .nav .links a.on { color: var(--ink); }
.nav .links a.on::after, .nav .links a:hover::after { right: 0; }
@media (max-width: 720px){ .nav .links { display: none; } }

/* mobile hamburger (shown ≤720px via merge.css; drawer styling there) */
.navtoggle { display: none; width: 42px; height: 42px; flex-direction: column; gap: 5px;
  align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--hairline-2); border-radius: 10px; background: rgba(255,255,255,.04); }
.navtoggle span { width: 20px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .25s var(--ease-out), opacity .2s var(--ease-out); }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* persistent synth toggle */
.synth { display: inline-flex; align-items: center; gap: 10px; }
.synth .pp { position: relative; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hairline-2);
  background: rgba(10,10,20,.4); backdrop-filter: blur(6px); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s; }
.synth .pp:hover { transform: scale(1.07); border-color: var(--teal); box-shadow: var(--glow-teal); }
.synth .pp svg { width: 18px; height: 18px; }
.synth .pp .ring { position: absolute; inset: -5px; border-radius: 999px; border: 1px solid var(--teal); opacity: 0; pointer-events: none; }
.synth .pp.playing .ring { animation: rpulse 1.8s var(--ease-out) infinite; }
@keyframes rpulse { 0%{opacity:.5;transform:scale(.92)} 100%{opacity:0;transform:scale(1.4)} }
.synth .lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 560px){ .synth .lbl { display: none; } }

/* ---------- layout ---------- */
main { position: relative; z-index: 10; }
.section { display: flex; align-items: center;
  padding: 50px clamp(20px,6vw,90px); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; }

/* readability scrim helper for text blocks over the sphere */
.scrim-block { position: relative; }
.scrim-block::before { content: ''; position: absolute; left: -8%; right: -8%; top: -12%; bottom: -12%;
  background: radial-gradient(closest-side, rgba(4,4,10,.78), rgba(4,4,10,.42) 55%, transparent 82%);
  filter: blur(22px); z-index: -1; pointer-events: none; }

/* ---------- hero ---------- */
.hero { text-align: center; justify-content: center; }
.hero .inner { position: relative; }
.hero .cscrim { position: absolute; left: 50%; top: 50%; width: min(860px,96vw); height: 480px;
  transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(4,4,10,.8), rgba(4,4,10,.46) 52%, transparent 80%); filter: blur(20px); }
.hero .kick, .hero .title, .hero .sub, .hero .cta-row, .hero .scrollhint { position: relative; }
.hero .kick { margin: 0 0 18px; color: var(--ink-soft); }
.hero .title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: .86;
  font-size: clamp(48px,11vw,150px); margin: 0;
  background: linear-gradient(100deg, var(--teal-hi) 0%, #5fb0ff 36%, #c46bff 66%, var(--coral-hi) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .sub { max-width: 560px; margin: 26px auto 0; color: var(--ink); font-size: clamp(14px,1.6vw,18px);
  line-height: 1.65; font-weight: 400; text-shadow: 0 1px 12px rgba(4,4,10,.9); }
.hero .cta-row { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .scrollhint { margin-top: clamp(40px,7vh,72px); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 10px; }
.hero .scrollhint .arrow { width: 1px; height: 30px; background: linear-gradient(var(--teal), transparent);
  display: inline-block; animation: scrolldrop 1.8s var(--ease-out) infinite; }
@keyframes scrolldrop { 0%{transform:translateY(-6px);opacity:.3} 50%{opacity:1} 100%{transform:translateY(6px);opacity:.3} }

/* ---------- section heading ---------- */
.shead { margin-bottom: clamp(26px,4vw,46px); max-width: 720px; }
.shead .idx { color: var(--teal); margin-bottom: 12px; }
.shead h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: .94;
  font-size: clamp(36px,6vw,82px); margin: 0;
  background: linear-gradient(100deg, #79EEDF, #76AFF5); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; }
.shead p { color: var(--ink-soft); font-weight: 300; line-height: 1.65; font-size: clamp(14px,1.5vw,17px);
  margin: 18px 0 0; text-shadow: 0 1px 10px rgba(4,4,10,.85); }
.shead p a { background: linear-gradient(100deg, #79EEDF, #76AFF5); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #76AFF5; text-decoration: none;
  border-bottom: 1px solid #76AFF5; border-image: linear-gradient(100deg, #79EEDF, #76AFF5) 1; }

/* ---------- buttons ---------- */
.btn2 { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-weight: 500;
  font-size: 14px; border-radius: 999px; padding: 13px 22px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--hairline-2); color: var(--ink); background: rgba(10,10,20,.35); backdrop-filter: blur(6px);
  transition: transform .25s var(--ease-spring), border-color .2s, box-shadow .25s, background .2s; }
.btn2:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--glow-teal); }
.btn2.solid { background: var(--ink); color: var(--void); border-color: var(--ink); }
.btn2.solid:hover { background: var(--teal-hi); border-color: var(--teal-hi); color: var(--void); }

/* ---------- grids / tiles ---------- */
.grid { display: grid; gap: clamp(14px,1.6vw,22px); }
.grid.c3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 880px){ .grid.c3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .grid.c3 { grid-template-columns: 1fr; } }

.tile { position: relative; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden;
  background: rgba(11,11,22,.55); backdrop-filter: blur(4px); text-decoration: none; color: var(--ink); display: block;
  transition: transform .4s var(--ease-out), border-color .3s, box-shadow .4s; }
.tile:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 26px 52px -22px rgba(0,0,0,.75); }
/* teal→blue gradient rollover/selection stroke — masked ring keeps the 14px rounding (CSS can't
   gradient a border-color); fades in on hover and stays on the selected album tile. */
.tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 4;
  background: linear-gradient(100deg, #79EEDF, #76AFF5);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity .3s; }
.tile:hover::before, .tile[aria-pressed="true"]::before { opacity: 1; }
.tile .thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.tile:hover .thumb img { transform: scale(1.06); }
.tile .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6,6,13,.8)); }
/* small teal pill tucked into the card's lower-right (meta strip), off the artwork.
   Now a direct child of .tile, so it positions to the card, not the image. */
.tile .badge { position: absolute; right: 12px; bottom: 13px; z-index: 2; font-family: var(--font-mono); font-size: 8px;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; color: var(--void);
  background: linear-gradient(100deg, #79EEDF, #76AFF5); }
.tile .pi { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; opacity: 0; transition: opacity .3s; }
.tile:hover .pi { opacity: 1; }
.tile .pi span { width: 50px; height: 50px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(6,6,13,.5); border: 1px solid var(--teal); color: var(--teal); }
.tile .meta { padding: 14px 16px 16px; padding-right: 52px; } /* reserve room for the lower-right badge */
.tile .meta .t { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.1; }
.tile .meta .d { color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; margin-top: 6px; }

/* ---------- featured (music) ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,42px); align-items: center;
  border: 1px solid var(--hairline); border-radius: 18px; padding: clamp(18px,2.4vw,32px); background: rgba(11,11,22,.5);
  backdrop-filter: blur(6px); margin-bottom: clamp(22px,3vw,38px); }
@media (max-width: 820px){ .feature { grid-template-columns: 1fr; } }
.feature .art { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline-2); }
.feature .art img { width: 100%; height: 100%; object-fit: cover; }
.feature .label { color: var(--teal); margin-bottom: 12px; }
.feature .name { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.4vw,48px); letter-spacing: -.02em; line-height: 1; margin: 0; }
.feature .blurb { color: var(--ink-soft); font-weight: 300; line-height: 1.65; font-size: 14.5px; margin: 16px 0 0; }

.player { margin-top: 20px; border: 1px solid var(--hairline-2); border-radius: 14px; overflow: hidden; background: rgba(8,8,15,.7); }
.player .bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.player .bar .pp2 { width: 40px; height: 40px; border-radius: 999px; border: 1px solid transparent; color: #fff;
  background: rgba(255,255,255,.02); display: grid; place-items: center; cursor: pointer; transition: transform .2s; }
.player .bar .pp2:hover { transform: scale(1.07); }
.player .bar .vis { display: flex; align-items: flex-end; gap: 3px; height: 26px; flex: 1; }
.player .bar .vis i { width: 4px; background: linear-gradient(180deg, #76AFF5, #79EEDF); height: 6px; border-radius: 2px; }
.player .bar .now { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-soft); text-transform: uppercase; }
.player .embed iframe { display: block; width: 100%; border: 0; }

/* ---------- signal ---------- */
.cols2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px,5vw,64px); align-items: start; }
@media (max-width: 820px){ .cols2 { grid-template-columns: 1fr; } }
.prose p { color: var(--ink-soft); font-weight: 300; line-height: 1.78; font-size: clamp(14px,1.5vw,16.5px); margin: 0 0 18px;
  text-shadow: 0 1px 10px rgba(4,4,10,.7); }
.prose p b { color: var(--ink); font-weight: 500; }
.linkrow { display: flex; flex-wrap: wrap; gap: 10px; }
.linkrow a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 10px 16px; font-size: 13px; background: rgba(10,10,20,.4); transition: all .2s; }
.linkrow a:hover { color: var(--ink); border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); transform: translateY(-2px); }
.linkrow a i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

footer { text-align: center; padding: 40px 20px 60px; color: var(--ink-faint); position: relative; z-index: 10; }

/* boot scrim */
.boot { position: fixed; inset: 0; z-index: 70; background: var(--void); display: grid; place-items: center; transition: opacity .7s ease; }
.boot.hide { opacity: 0; pointer-events: none; }
.boot .b { font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #fff; }