/* Stave Records: shared by every page (colors, fonts, page frame, header, spinning record) */
:root{
  --wall:#2a1b12;--wall-ink:#f3e6c9;--bg:#e6dcc0;--surface:#f4ecd6;--ink:#21170f;--muted:#6a5a48;--line:#c9b88f;--accent:#1f6f6b;--accent-ink:#fff;--err:#a4271f;--hi:#e3a72f;--red:#b8322a;
  --serif:'Fraunces',Georgia,serif;--body:'Karla','Helvetica Neue',Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--wall:#120c08;--bg:#1b130d;--surface:#2a1d14;--ink:#f1e5c8;--muted:#b5a387;--line:#4a3827;--accent:#5cc2b8;--accent-ink:#10201e;--err:#ff9a8f}}
:root[data-theme="dark"]{--wall:#120c08;--bg:#1b130d;--surface:#2a1d14;--ink:#f1e5c8;--muted:#b5a387;--line:#4a3827;--accent:#5cc2b8;--accent-ink:#10201e;--err:#ff9a8f}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px) 0 0/5px 5px;color:var(--ink);font:400 17px/1.55 var(--body)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.shop{background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(0,0,0,.22) 118px 120px),linear-gradient(#3a2618,var(--wall));border-bottom:6px solid var(--hi);color:#f3e6c9}
header{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:20px 0;flex-wrap:wrap}
.logo{font:800 28px var(--serif);letter-spacing:-.01em}
.disc{position:relative;width:clamp(190px,27vw,290px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#15100c 0 2px,#261e18 2px 3px);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 0 20%,rgba(255,255,255,.14) 25%,transparent 30% 70%,rgba(255,255,255,.14) 75%,transparent 80%)}
.disc span{position:absolute;inset:31%;border-radius:50%;background:var(--hi);display:grid;place-items:center;text-align:center;font:800 clamp(11px,1.5vw,15px)/1.1 var(--serif);color:#21170f}
.disc span::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#15100c;left:50%;top:50%;transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:no-preference){.disc{animation:spin 9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}}