/* ------------------------------------------------------------------
   Page shell: sections, track headings, reveal-on-scroll.
   ------------------------------------------------------------------ */

main{position:relative; z-index:1}
section{padding:clamp(76px,10vw,128px) clamp(18px,4vw,44px); max-width:var(--max); margin-inline:auto; position:relative}
.track-head{display:flex; align-items:flex-end; gap:clamp(14px,3vw,30px); margin-bottom:16px; position:relative}
.tno{
  font-family:var(--font-display); font-weight:800; line-height:.8;
  font-size:clamp(4.5rem,11vw,9rem); letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1.5px var(--border-2);
  user-select:none; transition:-webkit-text-stroke-color .8s var(--ease);
}
.track-head:hover .tno{-webkit-text-stroke-color:var(--accent)}
.tmeta{padding-bottom:clamp(6px,1.5vw,16px)}
.tlabel{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; transition:color .8s var(--ease);
}
.tlabel::before{content:"●"; font-size:.55rem; animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.sec-title{font-size:clamp(1.9rem,4.2vw,3rem); font-weight:700}
.sec-sub{color:var(--text-2); max-width:58ch; font-size:1.02rem; margin:14px 0 48px}

/* --- reveal on scroll --- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}