/* Label League — /blog and /shop, the placeholder spread (42 · 43, design/claude-design-handoff-2026-09-28-blog-shop/, 9/28).
   Every measurement is the artboards' inline style. Desktop (≥ 1024): one centered two-column spread — the words left, the record
   right (440). Phone (< 1024): one centered column — the record (200), then the eyebrow, the headline, the sub-line. Both themes
   ship from the site's tokens (the renders show desktop light and phone dark); the record's label is the paper, its mark always ink. */
.soonpage main.soon{box-sizing:border-box;min-height:calc(100dvh - 53px);display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;text-align:center;padding:0 30px 40px}
.soon .eyebrow{display:block;font-family:var(--mono);font-size:10px;line-height:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--eyebrow);margin:44px 0 0;padding:0}
.soon .eyebrow::before{display:none}
.soon h1{font-family:var(--disp);font-weight:700;font-size:40px;line-height:.95;letter-spacing:-.045em;margin:12px 0 0;text-wrap:balance;color:var(--ink)}
.soon.shop h1{font-size:32px;line-height:1;letter-spacing:-.04em}
.soon p{font-family:var(--disp);font-size:16px;line-height:1.4;color:var(--eyebrow);margin:14px 0 0;text-wrap:pretty}
/* the record: black vinyl, the paper label at 31 %, grooves masked outside the label, the mark in ink; spins 12 s */
.soon .rec{width:200px;height:200px;border-radius:50%;position:relative;background:radial-gradient(circle,var(--label) 0 31%,#0B0B0D 31.5%);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.08);animation:llsoon 12s linear infinite}
.soon .rec i{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 2px,rgba(255,255,255,.06) 2px 3px);-webkit-mask:radial-gradient(circle,transparent 0 32%,#000 33%);mask:radial-gradient(circle,transparent 0 32%,#000 33%)}
.soon .rec svg{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);stroke:#111}
@keyframes llsoon{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.soon .rec{animation:none}}
@media(min-width:900px){.soonpage main.soon{min-height:calc(100dvh - 61px)}}   /* the masthead is 52 / 60 plus its 1px hairline */
@media(min-width:1024px){
  .soonpage main.soon{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;justify-items:stretch;text-align:left;padding:0 80px;max-width:1280px;margin:0 auto}
  .soon .words{order:1}.soon .disc{order:2;display:grid;place-items:center}
  .soon .eyebrow{font-size:11px;margin:0}
  .soon h1,.soon.shop h1{font-size:72px;line-height:.92;letter-spacing:-.05em;margin-top:18px}
  .soon.shop h1{font-size:64px;line-height:.94}
  .soon p{font-size:26px;line-height:1.3;margin-top:22px}
  .soon .rec{width:440px;height:440px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
  .soon .rec i{background:repeating-radial-gradient(circle at 50% 50%,transparent 0 3px,rgba(255,255,255,.05) 3px 4.5px)}
  .soon .rec svg{width:90px;height:90px}
}