:root{
  --ink:#12100E; --cream:#E9E2D4; --paper:#F2EDE3; --dim:#8A8378;
  --r001:#E0533A; --r002:#C9822E; --r003:#6E8B4A; --r004:#39619F; --r005:#3E8E7E;
  --spot:var(--r001);
  --pad:clamp(20px,4.5vw,64px); --max:1500px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--paper);font-family:"Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mono{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.anton{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:-.015em;line-height:.88;font-weight:400}
hr.rule{border:0;border-top:1px solid rgba(233,226,212,.18)}

/* announcement */
.ann{background:var(--spot);color:var(--ink);text-align:center;padding:9px 16px}
.ann .mono{font-weight:700}

/* header */
header{position:sticky;top:0;z-index:40;background:var(--ink);border-bottom:1px solid rgba(233,226,212,.18)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px}
.wordmark{display:flex;align-items:center;gap:11px;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(16px,2vw,20px);letter-spacing:.02em}
.wordmark img{width:clamp(26px,2.6vw,32px);height:auto;flex:none}
.nav{display:none;gap:30px}
@media(min-width:960px){.nav{display:flex}}
.nav a:hover,.bag:hover{color:var(--spot)}
.bag{display:flex;align-items:center;gap:8px;white-space:nowrap}

/* hero */
.hero{padding-block:clamp(56px,9vw,140px) clamp(44px,6vw,80px)}
.hero h1{font-size:clamp(42px,10.5vw,158px);max-width:13ch}
.hero .lead{margin-top:clamp(28px,3vw,44px);max-width:46ch;font-size:clamp(16px,1.35vw,20px);line-height:1.65;color:rgba(242,237,227,.78)}
.hero .quip{margin-top:26px;max-width:44ch;font-size:15px;line-height:1.7;color:var(--spot)}

/* marquee strip */
.strip{border-top:1px solid rgba(233,226,212,.18);border-bottom:1px solid rgba(233,226,212,.18);overflow:hidden}
.strip{--speed:46s}
.strip .track{display:flex;width:max-content;animation:marq var(--speed) linear infinite}
.strip .run{display:flex;gap:44px;padding-block:13px;padding-right:44px;white-space:nowrap;color:var(--dim)}
.strip .run span{flex:none}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip .track{animation:none}.strip .run{padding-left:var(--pad)}}

/* now playing */
.np{padding-block:clamp(48px,7vw,100px)}
.np .kick{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:baseline}
.np .kick .live{color:var(--spot);font-weight:700}
.npgrid{display:grid;gap:clamp(28px,4vw,64px);margin-top:clamp(26px,3vw,44px)}
@media(min-width:900px){.npgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}

/* the sleeve — the signature object.
   FULL BLEED: the colour fills the square and the mark runs off two edges.
   The previous build was a colour band over a pale body with a small mark in it.
   That is the shape of a floppy disk, and the mark landed where the shutter goes.
   Never reintroduce a pale body sitting under a top colour band. */
.sleeve{background:var(--spot);color:var(--cream);aspect-ratio:1;position:relative;overflow:hidden}
.sleeve .art{position:absolute;z-index:1;left:29%;top:18%;width:78%;color:var(--ink)}
.sleeve .art svg{width:100%;height:auto;display:block}
.sleeve .ttl{position:absolute;z-index:2;left:6.2%;top:5.5%;right:20%;color:var(--cream);font-size:clamp(34px,6.4vw,76px)}
.sleeve .side{position:absolute;z-index:2;right:6%;top:7.5%;color:var(--ink)}
/* credit strip is cream, not ink: an ink strip disappeared into the ink page and the
   sleeve lost its bottom edge. Cream mono straight on vermilion is only about 3:1. */
.sleeve .strip{position:absolute;z-index:3;left:0;right:0;bottom:0;background:var(--paper);color:var(--ink);display:flex;justify-content:space-between;gap:14px;padding:3.4% 6.2%;font-family:"Space Mono",monospace;font-size:clamp(9px,.85vw,11px);letter-spacing:.16em;text-transform:uppercase;font-weight:700}

/* the disc — without this the sleeve reads as a paint chip at scroll speed */
.sleeve-wrap{position:relative;padding-right:32%}
.disc,.mini-disc{position:absolute;top:50%;right:0;transform:translateY(-50%);aspect-ratio:1;border-radius:50%;z-index:1;
  box-shadow:0 0 0 1px rgba(233,226,212,.3), 0 18px 44px rgba(0,0,0,.55)}
.disc{width:76%;
  background:
    radial-gradient(circle at 50% 50%, #0C0A09 0 4%, var(--spot) 4.2% 26%, transparent 26.2%),
    repeating-radial-gradient(circle at 50% 50%, #3E3833 0 1.5px, #211E1A 1.5px 3.6px),
    linear-gradient(115deg, rgba(233,226,212,.22) 0 18%, transparent 42%)}
.sleeve{position:relative;z-index:2}
.mini-wrap{position:relative;padding-right:30%}
.mini-disc{width:76%;
  background:
    radial-gradient(circle at 50% 50%, #0C0A09 0 4.5%, var(--d) 4.7% 27%, transparent 27.2%),
    repeating-radial-gradient(circle at 50% 50%, #3E3833 0 1.2px, #211E1A 1.2px 2.9px),
    linear-gradient(115deg, rgba(233,226,212,.22) 0 18%, transparent 42%)}
.mini{position:relative;z-index:2}

/* tracklist */
.tl h2{font-size:clamp(30px,4.4vw,58px)}
.tl .sub{margin-top:14px;color:rgba(242,237,227,.7);line-height:1.7;max-width:44ch}
.tracks{margin-top:clamp(22px,2.6vw,34px);border-top:1px solid rgba(233,226,212,.18)}
.track{display:grid;grid-template-columns:26px 60px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(233,226,212,.18)}
.track .th{width:60px;aspect-ratio:1;object-fit:cover;background:var(--spot)}
@media(max-width:479px){.track{grid-template-columns:22px 46px 1fr auto;gap:11px}.track .th{width:46px}}
.track .n{color:var(--dim);font-family:"Space Mono",monospace;font-size:11px}
.track .nm{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(17px,1.9vw,24px);letter-spacing:.01em}
.track .sz{display:block;font-family:"Inter Tight",sans-serif;font-size:12px;color:var(--dim);letter-spacing:0;text-transform:none;margin-top:5px}
.track .pr{font-family:"Space Mono",monospace;font-size:16px;color:var(--spot)}
.total{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 0}
.total .lbl{display:block}
.total .lbl .t{display:block;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(20px,2.4vw,30px)}
.total .lbl .s{display:block;color:var(--dim);font-size:13px;margin-top:6px;max-width:34ch;line-height:1.5}
.total .pr{font-family:"Space Mono",monospace;font-size:26px;color:var(--spot)}
/* PRE-LAUNCH ONLY — no Stripe links exist yet */
.pending{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;border:1px dashed rgba(233,226,212,.5);
  color:rgba(242,237,227,.6);font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:default}
.pending-sm{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,237,227,.45);border-bottom:1px dashed rgba(233,226,212,.35);padding-bottom:3px}
.cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}


.boxshot{margin-top:24px;background:var(--spot)}
.boxshot img{width:100%;height:auto;display:block}
.opts{margin-top:0;display:grid;gap:1px;background:rgba(233,226,212,.18);border:1px solid rgba(233,226,212,.18)}
@media(min-width:620px){.opts{grid-template-columns:1fr 1fr}}
.opt{background:var(--ink);padding:22px}
.opt.sub{background:#181513}
.opt .oh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.opt .oh .mono{color:var(--dim)}
.opt.sub .oh .mono{color:var(--spot)}
.opt .op{font-family:"Space Mono",monospace;font-size:19px;color:var(--spot)}
.opt p{margin:12px 0 16px;font-size:13px;line-height:1.65;color:rgba(242,237,227,.7)}

/* the run */
.run-sec{padding-block:clamp(48px,7vw,100px);border-top:1px solid rgba(233,226,212,.18)}
.sechead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.sechead h2{font-size:clamp(30px,5vw,64px)}
.sechead p{max-width:34ch;color:var(--dim);line-height:1.6}
@media(max-width:719px){.sechead{display:block}.sechead h2{margin-bottom:14px}.sechead p{max-width:100%}}
.runs{display:grid;grid-template-columns:1fr;gap:1px;align-items:start;background:rgba(233,226,212,.18);margin-top:clamp(26px,3vw,44px);border-top:1px solid rgba(233,226,212,.18);border-bottom:1px solid rgba(233,226,212,.18)}
@media(min-width:640px){.runs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.runs{grid-template-columns:repeat(5,1fr)}}
.rel{background:var(--ink);padding:22px}
.mini{aspect-ratio:1;background:var(--d);position:relative;overflow:hidden}
.mini .t{position:absolute;z-index:2;left:9%;top:7%;right:9%;color:var(--cream);font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(22px,5.2vw,26px);line-height:.92}
.mini .art{position:absolute;z-index:1;left:34%;top:28%;width:64%;color:var(--ink)}
.mini .art svg{width:100%;height:auto;display:block}
@media(min-width:1100px){.mini .t{font-size:clamp(15px,1.55vw,21px)}}
.mini .c{position:absolute;z-index:3;left:0;right:0;bottom:0;background:var(--paper);color:var(--ink);padding:5.5% 9%;font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.14em}
.rel .meta{margin-top:16px}
.rel .st{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.rel .st.on{color:var(--spot)}
.rel .st.soon{color:var(--dim)}
.rel .nt{margin-top:9px;font-size:13px;color:rgba(242,237,227,.72);line-height:1.6}

/* editorial */
.ed{background:var(--paper);color:var(--ink)}
.ed .in{padding-block:clamp(56px,9vw,130px);display:grid;gap:36px}
@media(min-width:960px){.ed .in{grid-template-columns:1fr 1fr;gap:80px}}
.ed h2{font-size:clamp(34px,6vw,84px)}
.ed p.big{font-size:clamp(17px,1.6vw,25px);line-height:1.55;color:rgba(18,16,14,.82)}
.ed .fine{margin-top:30px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7A6A54}

/* liner notes / merch */
.two{display:grid;gap:1px;background:rgba(233,226,212,.18);border-top:1px solid rgba(233,226,212,.18)}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr}}
.cell{background:var(--ink);padding:clamp(40px,5vw,80px) var(--pad)}
.cell h3{font-size:clamp(24px,3vw,40px)}
.cell p{margin-top:16px;color:rgba(242,237,227,.72);line-height:1.7;max-width:40ch}
form.nf{margin-top:26px;display:flex;flex-direction:column;gap:10px;max-width:440px}
@media(min-width:560px){form.nf{flex-direction:row}}
form.nf input[type=email]{flex:1;min-width:0;background:transparent;border:1px solid rgba(233,226,212,.4);color:var(--paper);padding:15px 18px;font-family:"Inter Tight",sans-serif;font-size:15px}
form.nf input[type=email]::placeholder{color:rgba(242,237,227,.35)}
form.nf input[type=email]:focus{outline:2px solid var(--spot);outline-offset:-2px}
form.nf button{background:var(--spot);color:var(--ink);border:0;padding:15px 26px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;cursor:pointer}
form.nf button:hover{background:var(--paper)}
.hp{position:absolute;left:-9999px}
.msg{margin-top:14px;font-size:13px;min-height:1.2em}
.tees{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px}
.tee{aspect-ratio:1;position:relative;overflow:hidden}
.tee .t{position:absolute;z-index:2;left:9%;top:8%;right:9%;color:var(--cream);font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(10px,1.05vw,14px);line-height:.94}
.tee .art{position:absolute;z-index:1;left:34%;top:26%;width:64%;color:var(--ink)}
.tee .art svg{width:100%;height:auto;display:block}

/* footer */
footer{border-top:1px solid rgba(233,226,212,.18);padding-block:clamp(44px,6vw,72px) 40px;overflow:hidden}
.fcols{display:grid;gap:36px}
@media(min-width:768px){.fcols{grid-template-columns:repeat(4,1fr)}}
.fcols .mono{color:var(--spot)}
.fcols ul{list-style:none;margin-top:16px;display:grid;gap:10px}
.fcols a{font-size:14px;color:rgba(242,237,227,.7)}
.fcols a:hover{color:var(--paper)}
.bigmark{font-size:clamp(38px,10.4vw,168px);line-height:.82;margin-top:clamp(44px,6vw,72px);color:rgba(242,237,227,.13)}
.legal{margin-top:34px;border-top:1px solid rgba(233,226,212,.18);padding-top:26px;display:flex;flex-direction:column;gap:14px}
@media(min-width:768px){.legal{flex-direction:row;justify-content:space-between}}
.legal p{max-width:74ch;font-size:12px;line-height:1.75;color:var(--dim)}

/* ============================================================
   CONTENT PAGES + CHARACTER IMAGERY  (added 2026-08-22)
   ============================================================ */

/* the man. full-bleed, ink gradient over the bottom so type can sit on him */
.figfull{position:relative;overflow:hidden;background:var(--ink)}
.figfull img{width:100%;height:100%;object-fit:cover;display:block}
.figfull.tall{aspect-ratio:16/10}
@media(max-width:700px){.figfull.tall{aspect-ratio:4/5}}
.figfull .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,4vw,44px);
  background:linear-gradient(to top,rgba(18,16,14,.92) 0%,rgba(18,16,14,.55) 55%,transparent 100%)}
.figfull .cap .mono{color:var(--spot)}
.figfull .cap h2{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:-.015em;line-height:.9;
  font-size:clamp(28px,4.6vw,60px);margin-top:10px;max-width:16ch}
.figfull .cap p{margin-top:12px;max-width:52ch;color:rgba(242,237,227,.86);font-size:clamp(14px,1.15vw,17px);line-height:1.6}

/* image + words, alternating */
.split{display:grid;gap:clamp(24px,3.4vw,52px);align-items:center;margin-top:clamp(38px,5vw,76px)}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.flip>figure{order:2}}
.split figure{margin:0;overflow:hidden}
.split figure img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.split h3{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:-.01em;line-height:.94;font-size:clamp(24px,3vw,40px)}
.split p{margin-top:14px;color:rgba(242,237,227,.78);line-height:1.7;max-width:54ch}

/* page furniture */
.pagehead{padding-block:clamp(38px,5vw,76px) clamp(24px,3vw,40px)}
.crumb{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.crumb a{color:var(--dim)}.crumb a:hover{color:var(--paper)}
.pagehead h1{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;
  font-size:clamp(38px,7vw,88px);margin-top:16px}
.pagehead .sub{margin-top:18px;max-width:60ch;color:rgba(242,237,227,.78);font-size:clamp(15px,1.3vw,19px);line-height:1.65}

.prose{max-width:66ch;padding-bottom:clamp(40px,6vw,90px)}
.prose h2{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(20px,2.4vw,30px);margin-top:44px}
.prose h3{font-family:"Inter Tight",sans-serif;font-weight:600;font-size:17px;margin-top:30px}
.prose p{margin-top:14px;color:rgba(242,237,227,.8);line-height:1.75}
.prose ul,.prose ol{margin-top:14px;padding-left:20px;color:rgba(242,237,227,.8);line-height:1.75}
.prose li{margin-top:7px}
.prose a{color:var(--spot);text-decoration:underline;text-underline-offset:3px}
.prose .fine{font-size:13px;color:var(--dim);line-height:1.7;margin-top:26px}

/* spec rows — shipping, returns, product facts */
.rows{margin-top:26px;border-top:1px solid rgba(233,226,212,.18)}
.rows>div{display:grid;gap:6px 26px;padding:16px 0;border-bottom:1px solid rgba(233,226,212,.18)}
@media(min-width:700px){.rows>div{grid-template-columns:210px 1fr}}
.rows dt,.rows .k{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.rows dd,.rows .v{margin:0;color:rgba(242,237,227,.84);line-height:1.65}

/* product page */
.pdp{display:grid;gap:clamp(26px,3.4vw,58px);padding-bottom:clamp(40px,6vw,90px)}
/* grid items default to min-width:auto, so a wide table stretches the track and the
   whole page scrolls sideways. This is the guard, not the table overflow box. */
.pdp>*{min-width:0}
@media(min-width:900px){.pdp{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.pdp .shot{background:var(--spot);overflow:hidden}
.pdp .shot img{width:100%;display:block;aspect-ratio:1;object-fit:cover}
.pdp .track-no{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--spot)}
.pdp h1{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:-.02em;line-height:.88;font-size:clamp(34px,5.4vw,68px);margin-top:12px}
.pdp .title2{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,237,227,.7);margin-top:12px}
.pdp .price{font-family:"Space Mono",monospace;font-size:22px;color:var(--spot);margin-top:20px}
.pdp .blurb{margin-top:18px;color:rgba(242,237,227,.82);line-height:1.75;max-width:56ch}

/* formulation table */
.formula-wrap{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.formula{width:100%;min-width:320px;border-collapse:collapse;font-size:14px}
.formula th,.formula td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid rgba(233,226,212,.14);vertical-align:top}
.formula th{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400}
.formula td{color:rgba(242,237,227,.84);line-height:1.55}
.formula td.pct{font-family:"Space Mono",monospace;color:var(--spot);white-space:nowrap}

/* callout */
.note{margin-top:26px;border-left:2px solid var(--spot);padding:14px 0 14px 18px;background:rgba(224,83,58,.06)}
.note p{margin-top:0;color:rgba(242,237,227,.86)}
.note p+p{margin-top:10px}

/* other-products strip */
.also{padding-block:clamp(34px,4.5vw,64px);border-top:1px solid rgba(233,226,212,.18)}
.alsogrid{margin-top:22px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.alsogrid{grid-template-columns:repeat(4,1fr)}}
.alsogrid a{display:block;background:rgba(233,226,212,.05);padding:16px}
.alsogrid a:hover{background:rgba(233,226,212,.1)}
.alsogrid .n{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--dim)}
.alsogrid .t{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:17px;margin-top:7px;line-height:.98}
.alsogrid .p{font-family:"Space Mono",monospace;font-size:12px;color:var(--spot);margin-top:8px}

/* Stripe buy links, added 2026-09-13. Same look as the site button. */
/* .prose a is more specific than .buy, so inside a prose block the button text
   inherited the vermilion link colour and vanished on the vermilion button. */
.prose a.buy,.prose a.buy:hover{color:var(--ink);text-decoration:none}
.buy{display:inline-block;background:var(--spot);color:var(--ink);text-decoration:none;padding:15px 26px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-top:14px}
.buy:hover{filter:brightness(1.08)}