/* ALAN WHO — v2 "paper"
   palette: paper #DADBDB / ink #090B10 / gray #AEB5B8 / mid #62686C / green #4E8F2A (+ glow #C6E86B, aura #D4F07A, deep #3E7A1E)
   type: Martian Mono (variable, condensed 75% width) + Unbounded 700 for the hero name, self-hosted */
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;
  src:url("../fonts/martian-mono-latin.woff2") format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/unbounded-700-latin.woff2") format("woff2")}
:root{
  --paper:#DADBDB;
  --ink:#090B10;
  --gray:#AEB5B8;
  --mid:#62686C;
  --green:#4E8F2A;
  --glow:#C6E86B;
  --aura:#D4F07A;
  --deep:#3E7A1E;
  --echo:rgba(9,11,16,.1);
  --line:rgba(9,11,16,.14);
  --font:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --pad:clamp(18px,2.6vw,40px);
  --xs:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-stretch:75%;font-weight:400;font-size:12px;line-height:1.6;letter-spacing:.04em;text-transform:uppercase;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-transform:inherit;letter-spacing:inherit}
ul,ol{list-style:none}
::selection{background:var(--green);color:var(--paper)}
:focus-visible{outline:1px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:8px}
.skip:focus{left:8px}

/* ---------- photocopy paper (static: grain + uneven toner) ---------- */
.paper{position:fixed;inset:0;pointer-events:none;z-index:80;mix-blend-mode:multiply;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .44 0 0 0 0 .45 0 0 0 0 .46 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 80% at 50% 50%,transparent 55%,rgba(100,106,110,.14) 100%);
  opacity:.42}

/* ---------- signature effects ---------- */
/* echo: light-gray duplicate printed slightly down-right */
.echo{text-shadow:.04em .055em 0 var(--echo)}
/* green double-print with soft bleed */
.glow{color:var(--green);text-shadow:.035em .05em 0 rgba(78,143,42,.2),-.012em 0 0 rgba(198,232,107,.8),0 0 .22em rgba(198,232,107,.75),0 0 .6em rgba(212,240,122,.45)}
/* F R E E M O T I O N */
.wide{letter-spacing:1.05em;margin-right:-1.05em;font-stretch:100%;font-weight:500}

/* ---------- tiny labels ---------- */
.label{display:flex;align-items:center;gap:18px;font-size:var(--xs);letter-spacing:.18em;color:var(--mid);padding:0 var(--pad);margin-bottom:clamp(40px,6vw,96px)}
.label__rule{flex:1;height:1px;background:var(--line)}

/* ---------- header ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;padding:16px var(--pad);font-size:var(--xs);letter-spacing:.18em;color:var(--ink)}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(218,219,219,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.is-scrolled .bar::before{opacity:1}
.bar__mark{font-weight:600}
.bar__nav{display:flex;gap:22px;margin:0 auto}
.bar__nav a{color:var(--mid);transition:color .2s}
.bar__nav a:hover{color:var(--ink)}
.bar__now{display:flex;gap:10px;align-items:center;color:var(--mid);white-space:nowrap;max-width:280px;overflow:hidden;transition:color .2s}
.bar__now:hover,.is-playing .bar__now{color:var(--ink)}
.is-playing .bar__state{color:var(--green)}
.bar__title{overflow:hidden;text-overflow:ellipsis}
.bar__clock{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mid)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-size:11px;letter-spacing:.16em;padding:4px 0;white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.btn:hover{border-color:currentColor}
.btn--accent{color:var(--green)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;display:grid;place-items:center}
/* green aura: abstract generated colour field (assets/img/aura.webp, two counter-rotating copies) + three soft forms
   drifting on different clocks (13-21s) + breathing halo. Transform/opacity only -> GPU composited, cheap on mobile. */
.hero__aura{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__aura>*,.hero__aura::before{will-change:transform,opacity}
.hero__aura::before{content:"";position:absolute;left:50%;top:50%;width:min(96vw,1300px);height:min(90vh,820px);margin:calc(min(90vh,820px)/-2) 0 0 calc(min(96vw,1300px)/-2);
  background:radial-gradient(closest-side,rgba(212,240,122,.5),rgba(198,232,107,.2) 45%,rgba(198,232,107,0) 75%);animation:halo 10s ease-in-out infinite}
.hero__aura-fig{position:absolute;left:50%;top:50%;width:min(112vw,1480px);aspect-ratio:1200/825;transform:translate(-50%,-50%);
  background:url("../img/aura.webp") center/100% 100% no-repeat;animation:swirl 18s ease-in-out infinite}
.hero__aura-fig--2{opacity:.55;mix-blend-mode:multiply;animation:swirl2 22s ease-in-out infinite}
.hero__aura-b1,.hero__aura-b2,.hero__aura-b3{position:absolute;border-radius:50%}
.hero__aura-b1{left:52%;top:16%;width:min(38vw,540px);height:min(26vw,360px);mix-blend-mode:multiply;background:radial-gradient(closest-side,rgba(62,122,30,.6),rgba(78,143,42,.32) 45%,rgba(120,178,60,.1) 72%,transparent);animation:float1 14s ease-in-out infinite}
.hero__aura-b2{left:14%;top:52%;width:min(42vw,600px);height:min(22vw,300px);mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(236,250,168,.95),rgba(212,240,122,.45) 50%,transparent);animation:float2 17s ease-in-out infinite}
.hero__aura-b3{left:30%;top:28%;width:min(30vw,420px);height:min(30vw,420px);background:radial-gradient(closest-side,rgba(198,232,107,.7),rgba(198,232,107,.25) 55%,transparent);animation:float3 21s ease-in-out infinite}
@keyframes swirl{0%,100%{transform:translate(-50%,-50%) rotate(0) scale(1)}25%{transform:translate(-46%,-53%) rotate(7deg) scale(1.1)}50%{transform:translate(-52%,-47%) rotate(-4deg) scale(1.16)}75%{transform:translate(-55%,-51%) rotate(5deg) scale(1.05)}}
@keyframes swirl2{0%,100%{transform:translate(-50%,-50%) scale(-1.05,1.05) rotate(10deg)}33%{transform:translate(-56%,-46%) scale(-1.15,1.15) rotate(-8deg)}66%{transform:translate(-44%,-54%) scale(-1,1) rotate(4deg)}}
@keyframes halo{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.1)}}
@keyframes float1{0%,100%{transform:translate(0,0) rotate(-14deg) scale(1)}50%{transform:translate(-18vw,14vh) rotate(16deg) scale(1.25)}}
@keyframes float2{0%,100%{transform:translate(0,0) rotate(10deg) scale(1)}50%{transform:translate(26vw,-16vh) rotate(-12deg) scale(.85)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1);opacity:.7}33%{transform:translate(30vw,10vh) scale(1.3);opacity:1}66%{transform:translate(12vw,22vh) scale(.9);opacity:.8}}
.hero__meta{position:absolute;top:76px;display:flex;flex-direction:column;gap:2px;font-size:var(--xs);letter-spacing:.18em;color:var(--mid)}
.hero__meta--tl{left:var(--pad)}
.hero__meta--tr{right:var(--pad);text-align:right}
.hero__center{position:relative;text-align:center}
.hero__title{font-family:var(--font);font-weight:800;font-stretch:75%;font-size:clamp(28px,4.4vw,80px);letter-spacing:.02em;line-height:1;white-space:nowrap}
/* v8: back to Martian Mono condensed, black ink + v5 gray echo, half size */
.hero__title.echo{color:var(--ink);text-shadow:.04em .055em 0 rgba(9,11,16,.16)}
.hero__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px}
.hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.hero__foot .wide{font-size:13px}
.hero__scroll{justify-self:end;font-size:var(--xs);letter-spacing:.18em;color:var(--mid)}

/* ---------- sections ---------- */
.section{position:relative;padding:clamp(110px,14vw,200px) 0 0}
.section>*:not(.label):not(.sp-host){padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- player ---------- */
.player{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(28px,6vw,110px);align-items:start;max-width:1280px;margin:0 auto}
.player__art{position:relative;isolation:isolate}
.player__art::before{content:"";position:absolute;inset:-30%;z-index:-1;background:url("../img/aura-sm.webp") center/100% 100% no-repeat;opacity:.7;transition:opacity .8s}
.is-playing .player__art::before{opacity:1;animation:halo2 7s ease-in-out infinite}
@keyframes halo2{50%{transform:scale(1.06)}}
.player__art img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .5s}
.is-playing .player__art img{filter:none}
.player__art figcaption{margin-top:12px;text-transform:none;font-size:var(--xs);letter-spacing:.16em;color:var(--mid)}
.player__status{display:flex;justify-content:space-between;font-size:var(--xs);letter-spacing:.18em;color:var(--mid)}
.is-playing .player__status [data-p-state]{color:var(--green)}
.player__title{margin-top:18px;font-size:clamp(40px,6vw,92px);font-weight:600;line-height:.95;letter-spacing:-.01em;overflow-wrap:anywhere;text-transform:none}
.player__artists{margin-top:12px;color:var(--mid);font-size:11px;letter-spacing:.12em}
.progress{position:relative;margin-top:44px;height:18px;cursor:pointer}
.progress::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);opacity:.2}
.progress__bar{position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:var(--green);transform-origin:0 50%;transform:scaleX(0);transition:transform .25s linear}
.player__times{display:flex;justify-content:space-between;font-size:var(--xs);letter-spacing:.14em;color:var(--mid);font-variant-numeric:tabular-nums}
.player__controls{display:flex;gap:36px;margin-top:26px}
.btn--play{min-width:56px}
.tracks{margin-top:56px;border-top:1px solid var(--line)}
.tracks button{display:grid;grid-template-columns:36px 1.1fr 1.6fr 50px 50px;gap:16px;align-items:baseline;width:100%;text-align:left;padding:11px 0;border-bottom:1px solid var(--line);font-size:11px;transition:color .15s}
.tracks button:hover{color:var(--green)}
.tracks .t-n,.tracks .t-y,.tracks .t-d{color:var(--mid);font-variant-numeric:tabular-nums}
.tracks .t-t{font-weight:600;text-transform:none}
.tracks .t-a{color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tracks .t-d{text-align:right}
.tracks button[aria-current=true] .t-t,.tracks button[aria-current=true] .t-n{color:var(--green)}
.player__note{margin-top:22px;font-size:9px;letter-spacing:.14em;color:var(--mid);max-width:640px}
.player__note a{color:var(--ink);border-bottom:1px solid var(--line)}
.acts{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:9px;letter-spacing:.16em}
.acts a{color:var(--mid);border-bottom:1px solid transparent;padding-bottom:1px;transition:color .15s,border-color .15s}
.acts a:hover{color:var(--green);border-color:var(--green)}
.player__acts{margin-top:16px;font-size:10px}
.player__acts a{color:var(--ink)}
.lyrics{margin-top:30px}
.lyrics__btn{font-size:11px;letter-spacing:.18em;padding:4px 0;border-bottom:1px solid var(--line)}
.lyrics__btn:hover,.lyrics__btn[aria-expanded=true]{color:var(--green);border-color:var(--green)}
.lyrics__panel{margin-top:20px;padding:22px 0 6px;border-top:1px solid var(--line);max-width:640px}
.lyrics__k{font-size:var(--xs);letter-spacing:.18em;color:var(--mid);text-transform:none}
.lyrics__text{margin-top:14px;white-space:pre-line;font-size:13px;line-height:1.9;letter-spacing:.06em;text-shadow:.04em .055em 0 var(--echo);max-height:60vh;overflow:auto}
.lyrics__text.is-empty{color:var(--mid);text-shadow:none;font-size:11px;letter-spacing:.18em}
.sp-host{position:absolute;width:300px;height:80px;left:-9999px;top:0;overflow:hidden;opacity:0;pointer-events:none}


/* ---------- music grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3.2vw,52px) clamp(16px,2vw,32px);max-width:1280px;margin:0 auto}
.grid a{display:block}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(1.04);mix-blend-mode:multiply;transition:filter .4s}
.grid a:hover img{filter:none}
.grid__t{display:block;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:none}
.grid a:hover .grid__t{color:var(--green)}
.grid__m{display:block;margin-top:2px;font-size:9px;letter-spacing:.12em;color:var(--mid);line-height:1.6}
.more{display:flex;gap:28px;flex-wrap:wrap;max-width:1280px;margin:clamp(40px,5vw,70px) auto 0;font-size:var(--xs);letter-spacing:.18em}
.more a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .2s,color .2s}
.more a:hover{color:var(--green);border-color:var(--green)}

/* ---------- video ---------- */
.video{display:grid;grid-template-columns:1fr 260px;gap:clamp(24px,4vw,64px);max-width:1280px;margin:0 auto;align-items:end}
.video__stage{position:relative;aspect-ratio:16/9;background:#CDCECE;overflow:hidden}
.video__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__poster{position:absolute;inset:0;width:100%;height:100%}
.video__poster img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;opacity:.92;transition:filter .5s,opacity .5s}
.video__poster:hover img{filter:grayscale(.2);opacity:1}
.video__play{position:absolute;left:20px;bottom:16px;font-size:11px;letter-spacing:.2em;color:var(--paper);mix-blend-mode:difference}
.video__info{display:flex;flex-direction:column;gap:6px}
.video__t{font-size:clamp(20px,2vw,28px);font-weight:600;line-height:1.05}
.video__m{font-size:var(--xs);letter-spacing:.14em;color:var(--mid)}
.video__info a{margin-top:10px;font-size:var(--xs);letter-spacing:.18em;border-bottom:1px solid var(--line);align-self:flex-start}
.vlist{max-width:1280px;margin:36px auto 0}
.vlist li:first-child button{border-top:1px solid var(--line)}
.vlist button{display:block;width:100%;text-align:left;padding:11px 0;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.08em;color:var(--mid);transition:color .15s}
.vlist button:hover{color:var(--ink)}
.vlist button[aria-current=true]{color:var(--green)}

/* ---------- live ---------- */
.live{max-width:1280px;margin:0 auto}
.live__big{font-size:clamp(48px,9vw,150px);font-weight:600;line-height:.9;letter-spacing:-.01em}
.live__rows{margin-top:44px;border-top:1px solid var(--line)}
.live__rows li{display:grid;grid-template-columns:120px 1fr 1fr 60px;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:11px;color:var(--mid)}
.live__note{margin-top:20px;font-size:var(--xs);letter-spacing:.16em;color:var(--mid)}
.live__note a{color:var(--ink);border-bottom:1px solid var(--line)}

/* ---------- info ---------- */
.info{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,6vw,110px);max-width:1280px;margin:0 auto}
.info__bio{font-size:clamp(14px,1.35vw,18px);line-height:1.6;letter-spacing:.02em;text-transform:none;max-width:40em}
.info__bio em{font-style:normal;color:var(--green)}
.info__facts{border-top:1px solid var(--line)}
.info__facts div{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--xs);letter-spacing:.12em}
.info__facts dt{color:var(--mid)}

/* ---------- links ---------- */
.links{max-width:1280px;margin:0 auto}
.links li:first-child a{border-top:1px solid var(--line)}
.links a{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(14px,1.6vw,22px);font-weight:600;letter-spacing:.06em;transition:color .15s}
.links__dots{flex:1}
.links__h{font-size:var(--xs);font-weight:400;letter-spacing:.16em;color:var(--mid)}
.links a:hover,.links a:hover .links__h{color:var(--green)}

/* ---------- footer ---------- */
.foot{padding:clamp(140px,16vw,240px) var(--pad) 26px}
.foot__word{font-size:clamp(22px,4.6vw,72px);text-align:center;line-height:1;white-space:nowrap;color:var(--ink);text-shadow:.05em .07em 0 var(--echo)}
.foot__row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(70px,9vw,140px);font-size:var(--xs);letter-spacing:.16em;color:var(--mid)}

/* ---------- responsive ---------- */
@media (max-width:1180px){.bar__clock{display:none}}
@media (max-width:980px){
  .bar__nav{display:none}
  .bar__now{margin-left:auto}
  .grid{grid-template-columns:repeat(3,1fr)}
  .video{grid-template-columns:1fr}
  .info{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{font-size:11px}
  .hero__meta{top:64px}
  .hero__meta--tr{display:none}
  .hero__title{font-size:clamp(24px,9vw,42px);white-space:nowrap;line-height:1}
    .hero__foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
  .hero__cta{align-items:center}
  .hero__scroll{display:none}
  .hero__aura-fig{width:200vw}
  .player{grid-template-columns:1fr}
  .player__art{max-width:220px}
  .tracks button{grid-template-columns:28px 1fr 44px;gap:10px}
  .tracks .t-a,.tracks .t-y{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .live__rows li{grid-template-columns:80px 1fr 30px}
  .live__rows li span:nth-child(3){display:none}
  .info__facts div{grid-template-columns:110px 1fr}
  .foot__row{flex-direction:column;gap:6px}
  .wide{letter-spacing:.7em;margin-right:-.7em}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}