@font-face{font-family:Geologica;src:url('/assets/geologica.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --paper:#f4f1e9;--ink:#090909;--white:#fffef8;--yellow:#f7ce2a;--grey:#66645f;--line:#d6d2ca;
  --space-xs:4px;--space-sm:8px;--space-12:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;
  --text-xs:12px;--text-sm:14px;--text-body:16px;--text-lg:20px;--text-artist:20px;--text-display:48px;
  --radius-sm:8px;--radius-full:999px;--motion-fast:150ms;--ease-out:ease-out;--z-keyboard:10;
  --surface-canvas:var(--paper);--text-primary:var(--ink);--text-secondary:var(--grey);--border-rule:var(--line);--brand-accent:var(--yellow);
  --cover-shadow:0 12px 32px rgb(9 9 9 / .10),0 2px 8px rgb(9 9 9 / .06);
  --button-radius:var(--radius-full);--button-primary-bg:var(--brand-accent);--button-primary-text:var(--ink);
  color-scheme:light;
}
[data-theme=dark]{--surface-canvas:#142329;--text-primary:var(--paper);--text-secondary:#b8c2c4;--border-rule:#435158;--cover-shadow:none;color-scheme:dark}
*{box-sizing:border-box}
html{min-width:320px}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--surface-canvas);color:var(--text-primary);font-family:Geologica,Arial,sans-serif;font-size:var(--text-body);line-height:1.4;font-kerning:normal;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
p,h1,figure{margin:0}
a{color:inherit;text-decoration:none}
.shell{width:min(400px,calc(100% - 40px));margin:auto}
.skip-link{position:fixed;top:var(--space-md);left:var(--space-md);z-index:var(--z-keyboard);padding:var(--space-12) var(--space-md);background:var(--ink);color:var(--white);border-radius:var(--radius-sm);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.release{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding-block:var(--space-xl)}
.artwork{width:min(100%,360px);margin-inline:auto;padding:var(--space-sm);background:var(--release-mat);box-shadow:var(--cover-shadow)}
.artwork img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.release-copy{min-width:0;text-align:center}
h1{font-size:var(--text-display);line-height:1.05;font-weight:760;letter-spacing:-.055em;overflow-wrap:anywhere;text-wrap:balance}
.artist{margin-top:var(--space-sm);font-size:var(--text-artist);font-weight:450;letter-spacing:-.02em;line-height:1.3;color:var(--text-secondary)}
.music{margin-top:var(--space-lg);scroll-margin-top:var(--space-lg)}
.listen-label{margin-bottom:var(--space-md);color:var(--text-primary);font-size:var(--text-lg);font-weight:500}
.service{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:60px;padding:var(--space-md) var(--space-lg);border:2px solid var(--text-primary);border-radius:var(--button-radius);font-size:18px;font-weight:650;touch-action:manipulation;transition:background-color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.service + .service{margin-top:var(--space-12)}
.service-primary{color:var(--button-primary-text);background:var(--button-primary-bg);border-color:var(--button-primary-bg)}
.arrow{flex:none}
.service:active{transform:scale(.985)}
:focus-visible{outline:3px solid var(--text-primary);outline-offset:5px}
@media(hover:hover) and (pointer:fine){.service-primary:hover{background:var(--white)}.service-secondary:hover{background:var(--text-primary);color:var(--surface-canvas)}}
@media(max-width:640px){
  .release{padding-block:var(--space-lg)}
  .artwork{width:min(100%,320px)}
  h1{font-size:40px;letter-spacing:-.05em}
  .listen-label{margin-bottom:var(--space-12);font-size:18px}
  .service{font-size:17px}
}
@media(max-height:740px) and (max-width:640px){.artwork{width:min(100%,240px)}.release{gap:var(--space-md);padding-top:var(--space-md)}.music{margin-top:var(--space-md)}}
@media(prefers-reduced-motion:reduce){.service{transition:none}.service:active{transform:none}.skip-link{transition:none}}
