/* Signal Art design system v1 — tokens + components.
   Load: <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Figtree:ital,wght@0,400..700;1,400..500&display=swap"> */

/* ---------- 1. Tokens ---------- */
:root{
  --sa-bg:#0e0c0b; --sa-bg-1:#16130f; --sa-bg-2:#1f1b17; --sa-bg-sunk:#090807;
  --sa-line:#2e2823; --sa-line-strong:#4a413a;
  --sa-ink:#f4eee6;          /* titles 16.9:1 */
  --sa-ink-body:#e6ded3;     /* long reading 14.6:1 */
  --sa-ink-muted:#b8ad9f;    /* meta 8.8:1 */
  --sa-ink-faint:#8f857a;    /* decorative/large only 5.4:1 */
  --sa-rose:#ff5c7a;         /* signal: 6.6:1 on bg */
  --sa-rose-line:rgba(255,92,122,.55);
  --sa-paper:#f1ebe1; --sa-paper-ink:#1b1714; --sa-paper-muted:#5e554c; --sa-paper-rose:#b0213f;
  --sa-veil:linear-gradient(180deg,rgba(14,12,11,0) 0%,rgba(14,12,11,.35) 45%,rgba(14,12,11,.92) 88%,var(--sa-bg) 100%);
  --sa-veil-side:linear-gradient(90deg,rgba(14,12,11,0) 30%,rgba(14,12,11,.75) 70%,rgba(14,12,11,.9) 100%);

  --sa-font-display:"Bodoni Moda","Bodoni 72",Didot,"Times New Roman",serif;
  --sa-font-text:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --sa-fs-label:.8125rem;    /* 13 — uppercase labels, min size site-wide */
  --sa-fs-small:.9375rem;    /* 15 — meta */
  --sa-fs-body:clamp(1.0625rem,1rem + .2vw,1.125rem); /* 17→18 */
  --sa-fs-lede:clamp(1.1875rem,1.05rem + .45vw,1.375rem);
  --sa-fs-h4:clamp(1.1875rem,1.1rem + .3vw,1.375rem); /* text-face headings */
  --sa-fs-d3:clamp(2.5rem,2.1rem + 1.4vw,3.25rem);    /* display ≥40px only */
  --sa-fs-d2:clamp(2.75rem,2rem + 3vw,4.75rem);
  --sa-fs-d1:clamp(3.25rem,1.8rem + 6vw,8rem);
  --sa-lh-body:1.65; --sa-lh-display:1.02; --sa-track-label:.08em;
  --sa-measure:66ch;

  --sa-s1:4px;--sa-s2:8px;--sa-s3:12px;--sa-s4:16px;--sa-s5:24px;--sa-s6:32px;--sa-s7:48px;--sa-s8:64px;--sa-s9:96px;--sa-s10:144px;
  --sa-gutter:clamp(20px,4vw,64px); --sa-col-gap:clamp(16px,2vw,32px); --sa-max:1440px;
  --sa-section:clamp(64px,9vw,144px);
  --sa-r-img:2px; --sa-r-ctl:6px; --sa-r-pill:999px; --sa-tap:44px;

  --sa-ease:cubic-bezier(.2,.7,.2,1); --sa-dur-1:160ms; --sa-dur-2:360ms; --sa-dur-hero:26s;
  --sa-focus:0 0 0 2px var(--sa-bg),0 0 0 4px var(--sa-rose);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:var(--sa-bg);color:var(--sa-ink-body);font:400 var(--sa-fs-body)/var(--sa-lh-body) var(--sa-font-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--sa-ink);text-decoration-color:var(--sa-rose-line);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--sa-rose)}
:focus-visible{outline:none;box-shadow:var(--sa-focus);border-radius:var(--sa-r-ctl)}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--sa-rose);color:var(--sa-bg)}
.sa-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sa-skip{position:absolute;left:var(--sa-s4);top:-100px;z-index:100;background:var(--sa-ink);color:var(--sa-bg);padding:12px 18px;border-radius:var(--sa-r-ctl);font-weight:600}
.sa-skip:focus{top:var(--sa-s4)}

/* ---------- 3. Layout ---------- */
.sa-container{width:100%;max-width:var(--sa-max);margin-inline:auto;padding-inline:var(--sa-gutter)}
.sa-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sa-col-gap);row-gap:var(--sa-s7)}
.sa-section{padding-block:var(--sa-section) 0}
.sa-section--rule{border-top:1px solid var(--sa-line);margin-top:var(--sa-section)}
.sa-section__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sa-s4) var(--sa-s6);margin-bottom:var(--sa-s7)}
.sa-section__title{font:400 var(--sa-fs-d3)/1.05 var(--sa-font-display);color:var(--sa-ink);letter-spacing:-.01em;text-wrap:balance}
.sa-section__sub{color:var(--sa-ink-muted);margin-top:var(--sa-s3);max-width:52ch}
.sa-eyebrow{display:block;font:600 var(--sa-fs-label)/1.3 var(--sa-font-text);letter-spacing:var(--sa-track-label);text-transform:uppercase;color:var(--sa-ink-muted);margin-bottom:var(--sa-s3)}
.sa-eyebrow--signal{color:var(--sa-rose)}
.sa-link{display:inline-flex;align-items:center;gap:8px;min-height:var(--sa-tap);font-weight:600;color:var(--sa-ink);text-decoration:none;border-bottom:1px solid var(--sa-rose-line);padding-top:2px}
.sa-link::after{content:"→";transition:transform var(--sa-dur-1) var(--sa-ease)}
.sa-link:hover{color:var(--sa-ink);border-color:var(--sa-rose)}
.sa-link:hover::after{transform:translateX(3px)}
.sa-link-list{display:flex;flex-wrap:wrap;gap:var(--sa-s2) var(--sa-s6)}

@media (max-width:1023px){.sa-grid>*{grid-column:1/-1!important}.sa-facts-col{position:static!important}.sa-grid>.sa-ll-item{grid-column:span 6!important}}
@media (max-width:559px){.sa-grid>.sa-ll-item{grid-column:1/-1!important}}
/* ---------- 4. Badge + nav ---------- */
.sa-badge{width:40px;height:40px;border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--sa-rose-line)}
.sa-brand{display:inline-flex;align-items:center;gap:var(--sa-s3);text-decoration:none;color:var(--sa-ink);min-height:var(--sa-tap)}
.sa-brand__word{white-space:nowrap;font:600 1rem/1 var(--sa-font-text);letter-spacing:.18em}
.sa-nav{position:sticky;top:0;z-index:50;background:rgba(14,12,11,.86);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--sa-line)}
.sa-nav__inner{display:flex;align-items:center;gap:var(--sa-s5);min-height:72px}
.sa-nav__links{display:flex;align-items:center;gap:var(--sa-s1);margin-left:auto}
.sa-nav__link{display:inline-flex;align-items:center;min-height:var(--sa-tap);padding:0 14px;font-size:var(--sa-fs-small);font-weight:500;color:var(--sa-ink-muted);text-decoration:none;position:relative}
.sa-nav__link:hover{color:var(--sa-ink)}
.sa-nav__link[aria-current="page"]{color:var(--sa-ink)}
.sa-nav__link[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1px;background:var(--sa-rose)}
.sa-nav__toggle{display:none;margin-left:auto;min-height:var(--sa-tap);min-width:var(--sa-tap);padding:0 14px;background:none;border:1px solid var(--sa-line-strong);border-radius:var(--sa-r-ctl);color:var(--sa-ink);font:600 var(--sa-fs-small) var(--sa-font-text);cursor:pointer}
@media (max-width:1023px){
  .sa-nav__toggle{display:inline-flex;align-items:center}
  .sa-nav__links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:var(--sa-s3) var(--sa-gutter) var(--sa-s5);background:var(--sa-bg);border-bottom:1px solid var(--sa-line)}
  .sa-nav[data-open="true"] .sa-nav__links{display:flex}
  .sa-nav__link{font-size:var(--sa-fs-body);padding:0;border-bottom:1px solid var(--sa-line)}
  .sa-nav__link[aria-current="page"]::after{left:auto;right:0;top:50%;bottom:auto;width:8px;height:8px;border-radius:50%}
  .sa-nav__links .sa-btn{margin-top:var(--sa-s4)}
}

/* ---------- 5. Buttons + chips ---------- */
.sa-btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--sa-tap);padding:0 20px;border-radius:var(--sa-r-pill);font:600 var(--sa-fs-small)/1 var(--sa-font-text);text-decoration:none;cursor:pointer;border:1px solid var(--sa-line-strong);background:transparent;color:var(--sa-ink);transition:background var(--sa-dur-1),border-color var(--sa-dur-1),color var(--sa-dur-1),transform var(--sa-dur-1) var(--sa-ease)}
.sa-btn:hover{border-color:var(--sa-ink);color:var(--sa-ink)}
.sa-btn:active{transform:translateY(1px)}
.sa-btn--primary{background:var(--sa-ink);border-color:var(--sa-ink);color:var(--sa-bg)}
.sa-btn--primary:hover{background:#fff;color:var(--sa-bg)}
.sa-btn--yt::before{content:"";width:0;height:0;border-left:9px solid var(--sa-rose);border-top:6px solid transparent;border-bottom:6px solid transparent}
.sa-chips{display:flex;flex-wrap:wrap;gap:var(--sa-s2)}
.sa-chip{display:inline-flex;align-items:center;min-height:var(--sa-tap);padding:0 18px;border:1px solid var(--sa-line-strong);border-radius:var(--sa-r-pill);font-size:var(--sa-fs-small);font-weight:500;color:var(--sa-ink);text-decoration:none;transition:border-color var(--sa-dur-1),background var(--sa-dur-1)}
.sa-chip:hover{border-color:var(--sa-rose);color:var(--sa-ink);background:rgba(255,92,122,.06)}
.sa-chip--quiet{min-height:32px;padding:0 12px;font-size:var(--sa-fs-label);color:var(--sa-ink-muted);pointer-events:none}

/* ---------- 6. Image primitives ---------- */
/* Every thumbnail: 16:9, focal point via --fx/--fy (default upper-left third, where characters sit). */
.sa-img{position:relative;overflow:hidden;background:var(--sa-bg-2);border-radius:var(--sa-r-img)}
.sa-img img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,30%) var(--fy,32%);transition:transform var(--sa-dur-2) var(--sa-ease),filter var(--sa-dur-2) var(--sa-ease);filter:brightness(.9) saturate(.95)}
.sa-img--16x9{aspect-ratio:16/9}
.sa-img--portrait{aspect-ratio:4/5}
.sa-img--tall{aspect-ratio:3/4}
.sa-hoverable{transition:transform var(--sa-dur-2) var(--sa-ease)}
.sa-hoverable:hover{transform:translateY(-4px)}
.sa-hoverable:hover .sa-img img{filter:brightness(1.04) saturate(1.05);transform:scale(1.025)}

/* ---------- 7. Home hero — the original YouTube banner, never re-cropped through a face ----------
   Source: 2560x1440 channel banner. Character band = y 420–1020 (29.2%–70.8%).
   Left quartet x 0–740, brand block x 840–1720, right quartet x 1820–2560.
   >=900px: whole banner, height clamped between 23.6vw and 56.25vw so the box is never narrower than 16:9
   (no side crop) and never shows less than the full character band (no top/bottom crop through eyes).
   <900px: the brand block is rebuilt in HTML; the banner is shown as its two character quartets, each a
   740x600 window (aspect 37:30) scaled from the same file, so every face stays whole. */
.sa-banner{position:relative;background:#0a0807;overflow:hidden}
.sa-banner__full{position:relative;height:clamp(23.6vw,76vh,56.25vw);min-height:0}
.sa-banner__full img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation:sa-kenburns var(--sa-dur-hero) var(--sa-ease) infinite alternate;transform-origin:50% 50%}
.sa-banner__full::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(180deg,rgba(14,12,11,0),var(--sa-bg))}
.sa-banner__actions{position:absolute;z-index:2;left:50%;bottom:clamp(24px,7%,72px);transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sa-s2)}
.sa-banner__quartets{display:none}
.sa-quartet{position:relative;aspect-ratio:37/30;overflow:hidden;margin:0}
.sa-quartet img{position:absolute;left:0;top:0;width:345.95%;max-width:none;height:auto;margin-top:-56.76%}
.sa-quartet--right img{left:-245.95%}
.sa-banner__brand{display:none;flex-direction:column;align-items:center;text-align:center;gap:var(--sa-s4);padding:var(--sa-s6) var(--sa-gutter) var(--sa-s7)}
.sa-banner__badge{width:88px;height:88px}
.sa-banner__wordmark{width:min(300px,78vw);height:auto}
.sa-hero__tagline{font-size:var(--sa-fs-label);font-weight:600;letter-spacing:var(--sa-track-label);text-transform:uppercase;color:var(--sa-ink);line-height:1.6}
.sa-hero__tagline span{color:var(--sa-rose);padding-inline:.4em}
@keyframes sa-kenburns{from{transform:scale(1)}to{transform:scale(1.035)}}
@media (max-width:899px){
  .sa-banner__full{display:none}
  .sa-banner__quartets{display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .sa-banner__brand{display:flex}
}
@media (max-width:559px){.sa-banner__quartets{grid-template-columns:1fr}.sa-quartet--right{display:none}}

/* ---------- 8. Release hero ----------
   Split hero: the character/painting side of the 16:9 thumbnail fills the left, the baked-in title on the
   thumbnail's right is cropped away and replaced by live HTML type on a dark ground. Text never sits on a face. */
.sa-release-hero{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:clamp(520px,82vh,1000px);background:var(--sa-bg-sunk);isolation:isolate}
.sa-release-hero__media{position:relative;overflow:hidden}
.sa-release-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,0%) var(--fy,30%)}
.sa-release-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,8,7,0) 55%,rgba(9,8,7,.7) 85%,var(--sa-bg-sunk) 100%),linear-gradient(180deg,rgba(9,8,7,0) 70%,rgba(9,8,7,.5))}
.sa-release-hero__content{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sa-s5);padding:var(--sa-s9) var(--sa-gutter) var(--sa-s8) var(--sa-s6)}
.sa-release-hero__title{font:400 var(--sa-fs-d1)/var(--sa-lh-display) var(--sa-font-display);color:var(--sa-ink);letter-spacing:-.02em;text-wrap:balance}
.sa-release-hero__sub{font-family:var(--sa-font-display);font-style:italic;font-size:clamp(2.5rem,2rem + 1vw,3rem);line-height:1.12;color:var(--sa-ink);text-wrap:balance}
.sa-release-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sa-s2) var(--sa-s4);color:var(--sa-ink-muted);font-size:var(--sa-fs-small);font-weight:500}
.sa-release-hero__meta .sa-time{font-variant-numeric:tabular-nums;color:var(--sa-ink)}
.sa-release-hero__actions{display:flex;flex-wrap:wrap;gap:var(--sa-s2)}
.sa-format-tag{display:inline-flex;align-items:center;gap:10px;font:600 var(--sa-fs-label)/1 var(--sa-font-text);letter-spacing:var(--sa-track-label);text-transform:uppercase;color:var(--sa-ink)}
.sa-format-tag::before{content:"";width:24px;height:1px;background:var(--sa-rose)}
@media (min-width:1800px){.sa-release-hero{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
@media (max-width:1023px){.sa-release-hero{grid-template-columns:1fr;min-height:0}.sa-release-hero__media{aspect-ratio:4/3}.sa-release-hero__media::after{background:linear-gradient(180deg,rgba(9,8,7,0) 65%,var(--sa-bg-sunk))}.sa-release-hero__content{padding:var(--sa-s5) var(--sa-gutter) var(--sa-s7)}}
@media (max-width:559px){.sa-release-hero__media{aspect-ratio:1/1}}

/* ---------- 9. Player (lite facade) ---------- */
.sa-player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--sa-r-img);overflow:hidden}
.sa-player iframe,.sa-player img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.sa-player__play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(9,8,7,.25);border:0;cursor:pointer;color:var(--sa-ink);transition:background var(--sa-dur-1)}
.sa-player__play:hover{background:rgba(9,8,7,.05)}
.sa-player__play span{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;border:1px solid var(--sa-ink);background:rgba(14,12,11,.5)}
.sa-player__play span::before{content:"";margin-left:6px;border-left:22px solid var(--sa-ink);border-top:14px solid transparent;border-bottom:14px solid transparent}

/* ---------- 10. Long read ---------- */
.sa-longread{max-width:var(--sa-measure)}
.sa-longread>*+*{margin-top:1.15em}
.sa-longread h2{font:400 var(--sa-fs-d3)/1.08 var(--sa-font-display);color:var(--sa-ink);text-wrap:balance;margin-top:var(--sa-s8)}
.sa-longread h2:first-child{margin-top:0}
.sa-longread h3{font:600 var(--sa-fs-h4)/1.35 var(--sa-font-text);color:var(--sa-ink);margin-top:var(--sa-s7)}
.sa-longread p{color:var(--sa-ink-body);text-wrap:pretty;hanging-punctuation:first}
.sa-longread .sa-lede{font-size:var(--sa-fs-lede);line-height:1.55;color:var(--sa-ink)}
.sa-longread a{color:var(--sa-ink)}
/* Optional paper reading mode — set data-reading="paper" on .sa-reading-surface; persisted in localStorage('sa-reading') */
.sa-reading-surface{transition:background var(--sa-dur-2),color var(--sa-dur-2)}
.sa-reading-surface[data-reading="paper"]{background:var(--sa-paper);color:var(--sa-paper-ink)}
.sa-reading-surface[data-reading="paper"] .sa-longread p{color:var(--sa-paper-ink)}
.sa-reading-surface[data-reading="paper"] .sa-longread h2,.sa-reading-surface[data-reading="paper"] .sa-longread h3,.sa-reading-surface[data-reading="paper"] .sa-longread .sa-lede{color:var(--sa-paper-ink)}
.sa-reading-surface[data-reading="paper"] .sa-eyebrow{color:var(--sa-paper-muted)}
.sa-reading-surface[data-reading="paper"] .sa-quote{color:var(--sa-paper-ink)}
.sa-reading-surface[data-reading="paper"] .sa-quote::before{background:var(--sa-paper-rose)}
.sa-reading-surface[data-reading="paper"] .sa-btn{color:var(--sa-paper-ink);border-color:var(--sa-paper-muted)}
.sa-reading-toggle[aria-pressed="true"]{border-color:var(--sa-rose)}

/* ---------- 11. Pull quote ---------- */
.sa-quote{position:relative;padding-top:var(--sa-s6);font:italic 400 clamp(2.5rem,1.9rem + 2vw,3.75rem)/1.12 var(--sa-font-display);color:var(--sa-ink);letter-spacing:-.01em}
.sa-quote::before{content:"";position:absolute;top:0;left:0;width:48px;height:1px;background:var(--sa-rose)}
.sa-quote p+p{margin-top:.1em}
.sa-quote figcaption{margin-top:var(--sa-s5);font:600 var(--sa-fs-label)/1.3 var(--sa-font-text);font-style:normal;letter-spacing:var(--sa-track-label);text-transform:uppercase;color:var(--sa-ink-muted)}

/* ---------- 12. Facts panel ---------- */
.sa-facts{display:grid;gap:0;border-top:1px solid var(--sa-line)}
.sa-facts>div{display:grid;grid-template-columns:minmax(96px,9rem) minmax(0,1fr);gap:var(--sa-s4);padding:var(--sa-s4) 0;border-bottom:1px solid var(--sa-line)}
.sa-facts dt{font:600 var(--sa-fs-label)/1.6 var(--sa-font-text);letter-spacing:var(--sa-track-label);text-transform:uppercase;color:var(--sa-ink-muted);padding-top:3px}
.sa-facts dd{color:var(--sa-ink);font-size:var(--sa-fs-small);line-height:1.55}
.sa-facts dd a{color:var(--sa-ink)}

/* ---------- 13. Museum wall label ---------- */
.sa-label{background:var(--sa-paper);color:var(--sa-paper-ink);padding:var(--sa-s5) var(--sa-s5) var(--sa-s5);border-radius:1px;max-width:340px;font-size:var(--sa-fs-small);line-height:1.45}
.sa-label__artist{font-weight:700;font-size:var(--sa-fs-body)}
.sa-label__work{font-style:italic;margin-top:2px}
.sa-label__rule{height:1px;background:var(--sa-paper-ink);opacity:.2;margin:var(--sa-s4) 0}
.sa-label__song{display:flex;justify-content:space-between;gap:var(--sa-s4);font-weight:600}
.sa-label__song small{font-size:var(--sa-fs-label);font-weight:600;letter-spacing:var(--sa-track-label);text-transform:uppercase;color:var(--sa-paper-muted)}
.sa-label--inset{position:absolute;right:var(--sa-s4);bottom:var(--sa-s4);max-width:min(300px,calc(100% - 32px));padding:var(--sa-s4)}

/* ---------- 14. Tracklist ---------- */
.sa-tracklist{columns:2 360px;column-gap:var(--sa-s8);counter-reset:t}
.sa-tracklist li{break-inside:avoid;counter-increment:t}
.sa-tracklist a{display:grid;grid-template-columns:2.25rem 4.5rem minmax(0,1fr);align-items:baseline;gap:var(--sa-s2);min-height:var(--sa-tap);padding:10px 0;border-bottom:1px solid var(--sa-line);text-decoration:none;color:var(--sa-ink-body);font-size:var(--sa-fs-small)}
.sa-tracklist a::before{content:counter(t,decimal-leading-zero);font-size:var(--sa-fs-label);color:var(--sa-ink-faint);font-variant-numeric:tabular-nums}
.sa-tracklist time{font-variant-numeric:tabular-nums;color:var(--sa-ink-muted);font-size:var(--sa-fs-small)}
.sa-tracklist a:hover{color:var(--sa-ink)}
.sa-tracklist a:hover time{color:var(--sa-rose)}

/* ---------- 15. Cards + shelves ---------- */
.sa-card{display:flex;flex-direction:column;gap:var(--sa-s4);text-decoration:none;color:inherit}
.sa-card__title{font:600 var(--sa-fs-h4)/1.25 var(--sa-font-text);color:var(--sa-ink)}
.sa-card__desc{font-size:var(--sa-fs-small);color:var(--sa-ink-muted);line-height:1.5;margin-top:6px}
.sa-card__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:var(--sa-s2);font-size:var(--sa-fs-label);font-weight:600;letter-spacing:.04em;color:var(--sa-ink-muted)}
.sa-card__meta .sa-time{font-variant-numeric:tabular-nums}
.sa-card:hover .sa-card__title{color:var(--sa-ink)}
.sa-card--feature{position:relative}
.sa-card--feature .sa-img{aspect-ratio:16/9}
.sa-card--feature .sa-card__title{font:400 var(--sa-fs-d3)/1.05 var(--sa-font-display);letter-spacing:-.01em}
.sa-card--feature .sa-card__desc{font-size:var(--sa-fs-body);color:var(--sa-ink-body);max-width:48ch}
.sa-shelf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sa-col-gap) clamp(24px,3vw,48px);align-items:start}
.sa-shelf__side{display:grid;gap:var(--sa-s6)}
.sa-shelf__side .sa-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--sa-s4);align-items:center}
.sa-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,calc((100% - 3 * var(--sa-col-gap)) / 4));gap:var(--sa-col-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding-bottom:var(--sa-s4);margin-top:var(--sa-s7);scrollbar-width:thin;scrollbar-color:var(--sa-line-strong) transparent;overscroll-behavior-x:contain}
.sa-row>*{scroll-snap-align:start}
@media (max-width:1023px){.sa-shelf{grid-template-columns:1fr}.sa-row{grid-auto-columns:minmax(240px,72%)}}
@media (max-width:559px){.sa-shelf__side .sa-card{grid-template-columns:1fr}}

/* ---------- 16. Format panels ---------- */
.sa-formats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sa-col-gap)}
.sa-format{grid-column:span 4;display:flex;flex-direction:column;gap:var(--sa-s5);text-decoration:none;color:inherit}
.sa-format:first-child{grid-column:span 6;grid-row:span 2}
.sa-format:first-child .sa-img{aspect-ratio:4/5}
.sa-format:nth-child(n+2){grid-column:span 6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.sa-format__title{font:400 clamp(2.5rem,2.1rem + 1vw,3rem)/1.05 var(--sa-font-display);color:var(--sa-ink)}
.sa-format__text{color:var(--sa-ink-body);font-size:var(--sa-fs-small);line-height:1.6;margin-top:var(--sa-s3);max-width:56ch}
@media (max-width:1023px){.sa-format,.sa-format:first-child,.sa-format:nth-child(n+2){grid-column:1/-1;grid-row:auto;display:flex}.sa-format:first-child .sa-img{aspect-ratio:16/9}}

/* ---------- 17. Category tiles ---------- */
.sa-tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sa-col-gap)}
.sa-tile{grid-column:span 3;position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--sa-r-img);text-decoration:none;color:var(--sa-ink);isolation:isolate}
.sa-tile--wide{grid-column:span 6;aspect-ratio:auto}
.sa-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,28%) var(--fy,30%);z-index:-2;filter:brightness(.78);transition:filter var(--sa-dur-2),transform var(--sa-dur-2) var(--sa-ease)}
.sa-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,12,11,0) 40%,rgba(14,12,11,.92))}
.sa-tile__body{position:absolute;left:0;right:0;bottom:0;padding:var(--sa-s5)}
.sa-tile__title{font:600 var(--sa-fs-h4)/1.25 var(--sa-font-text);text-wrap:balance}
.sa-tile--wide .sa-tile__title{font:400 var(--sa-fs-d3)/1.05 var(--sa-font-display);max-width:16ch}
.sa-tile__count{display:block;margin-top:6px;font-size:var(--sa-fs-label);font-weight:600;letter-spacing:.04em;color:var(--sa-ink-muted)}
.sa-tile:hover img{filter:brightness(.95);transform:scale(1.03)}
@media (max-width:1023px){.sa-tile{grid-column:span 6}.sa-tile--wide{grid-column:1/-1;aspect-ratio:16/9}}
@media (max-width:559px){.sa-tile{grid-column:1/-1;aspect-ratio:16/10}}

/* ---------- 18. Index lists (playlists, explore) ---------- */
.sa-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));column-gap:var(--sa-s7);border-top:1px solid var(--sa-line)}
.sa-index a{display:flex;align-items:center;justify-content:space-between;gap:var(--sa-s4);min-height:56px;border-bottom:1px solid var(--sa-line);text-decoration:none;color:var(--sa-ink);font-weight:500}
.sa-index a::after{content:"→";color:var(--sa-ink-faint);transition:color var(--sa-dur-1),transform var(--sa-dur-1)}
.sa-index a:hover::after{color:var(--sa-rose);transform:translateX(3px)}

/* ---------- 19. Release list (category pages) ---------- */
.sa-list{border-top:1px solid var(--sa-line)}
.sa-list__item{display:grid;grid-template-columns:3rem minmax(160px,280px) minmax(0,1fr);gap:var(--sa-s5);align-items:center;padding:var(--sa-s5) 0;border-bottom:1px solid var(--sa-line);text-decoration:none;color:inherit}
.sa-list__n{font-size:var(--sa-fs-label);font-weight:600;color:var(--sa-ink-faint);font-variant-numeric:tabular-nums}
.sa-list__title{font:600 var(--sa-fs-h4)/1.3 var(--sa-font-text);color:var(--sa-ink)}
.sa-list__line{color:var(--sa-ink-muted);font-size:var(--sa-fs-small);margin-top:6px;max-width:60ch}
.sa-list__item:hover .sa-list__title{color:var(--sa-rose)}
.sa-list__item:hover .sa-img img{filter:brightness(1.04)}
.sa-list__item--lead{grid-template-columns:3rem minmax(0,7fr) minmax(0,5fr);padding:var(--sa-s6) 0}
.sa-list__item--lead .sa-list__title{font:400 var(--sa-fs-d2)/1.02 var(--sa-font-display)}
.sa-list__item--lead .sa-list__line{font-size:var(--sa-fs-body);color:var(--sa-ink-body)}
@media (max-width:767px){.sa-list__item,.sa-list__item--lead{grid-template-columns:2rem minmax(0,1fr)}.sa-list__item .sa-img{grid-column:2}.sa-list__item>div:last-child{grid-column:2}}

/* ---------- 20. Living Loop programme card ---------- */
.sa-programmes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sa-s8) var(--sa-col-gap)}
.sa-programme{grid-column:span 4;display:flex;flex-direction:column;gap:var(--sa-s4);text-decoration:none;color:inherit}
.sa-programme--lead{grid-column:span 8}
.sa-programme--lead+.sa-programme{grid-column:span 4}
.sa-programme__char{font:400 clamp(2.5rem,2rem + 1.6vw,3.5rem)/1 var(--sa-font-display);color:var(--sa-ink)}
.sa-programme--lead .sa-programme__char{font-size:var(--sa-fs-d2)}
.sa-programme__title{font:600 var(--sa-fs-body)/1.35 var(--sa-font-text);color:var(--sa-ink)}
.sa-programme__world{font-size:var(--sa-fs-small);color:var(--sa-ink-muted)}
@media (max-width:1023px){.sa-programme,.sa-programme--lead,.sa-programme--lead+.sa-programme{grid-column:span 6}.sa-programme--lead{grid-column:1/-1}}
@media (max-width:599px){.sa-programme,.sa-programme--lead+.sa-programme{grid-column:1/-1}}

/* ---------- 21. Page intro ---------- */
.sa-intro{padding-block:var(--sa-s9) var(--sa-s7)}
.sa-intro__title{font:400 var(--sa-fs-d1)/var(--sa-lh-display) var(--sa-font-display);color:var(--sa-ink);letter-spacing:-.02em;text-wrap:balance;max-width:16ch}
.sa-intro__lede{font-size:var(--sa-fs-lede);line-height:1.55;color:var(--sa-ink);max-width:var(--sa-measure);margin-top:var(--sa-s6);text-wrap:pretty}

/* ---------- 22. FAQ long read ---------- */
.sa-faq{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:var(--sa-col-gap)}
.sa-faq__toc{position:sticky;top:96px;align-self:start;display:grid;gap:0;max-height:calc(100vh - 120px);overflow:auto}
.sa-faq__toc a{display:flex;align-items:center;min-height:var(--sa-tap);font-size:var(--sa-fs-small);color:var(--sa-ink-muted);text-decoration:none;border-left:1px solid var(--sa-line);padding-left:var(--sa-s4);line-height:1.35}
.sa-faq__toc a:hover,.sa-faq__toc a[aria-current="true"]{color:var(--sa-ink);border-color:var(--sa-rose)}
.sa-faq__q{scroll-margin-top:96px}
.sa-faq__q+.sa-faq__q{margin-top:var(--sa-s8);padding-top:var(--sa-s8);border-top:1px solid var(--sa-line)}
.sa-faq__fig{align-self:start;position:sticky;top:96px}
.sa-faq__fig figcaption{margin-top:var(--sa-s3);font-size:var(--sa-fs-label);color:var(--sa-ink-muted);font-weight:600;letter-spacing:.04em}
@media (max-width:1199px){.sa-faq{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}.sa-faq__fig{display:none}}
@media (max-width:767px){.sa-faq{grid-template-columns:1fr}.sa-faq__toc{display:none}}

/* ---------- 23. Closing + footer ---------- */
.sa-closing{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sa-s7);align-items:end;padding-block:var(--sa-section)}
.sa-closing__title{font:400 var(--sa-fs-d2)/1.04 var(--sa-font-display);color:var(--sa-ink);text-wrap:balance}
@media (max-width:1023px){.sa-closing{grid-template-columns:1fr}}
.sa-footer{border-top:1px solid var(--sa-line);padding-block:var(--sa-s8) var(--sa-s6);margin-top:var(--sa-section);background:var(--sa-bg-sunk)}
.sa-footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sa-s6)}
.sa-footer__links{display:flex;flex-wrap:wrap;gap:0 var(--sa-s5)}
.sa-footer__links a{display:inline-flex;align-items:center;min-height:var(--sa-tap);font-size:var(--sa-fs-small);color:var(--sa-ink-muted);text-decoration:none}
.sa-footer__links a:hover{color:var(--sa-ink)}
.sa-footer__note{margin-top:var(--sa-s6);padding-top:var(--sa-s5);border-top:1px solid var(--sa-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sa-s3);font-size:var(--sa-fs-small);color:var(--sa-ink-muted)}

/* ---------- 24. Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:0ms!important;scroll-behavior:auto!important}
  .sa-hoverable:hover{transform:none}
}