/* Locked Up Music — site styles. Tokens only; no raw hex outside tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--step-body); line-height: var(--lh-body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: var(--rule) solid var(--focus-ring); outline-offset: var(--rule); }

.d { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; margin: 0; }
.m { font-family: var(--font-mono); }
.lab { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
       letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--accent); margin: 0; }
.muted { color: var(--text-muted); }

.wrap { padding-inline: var(--s-5); }
@media (min-width: 768px)  { .wrap { padding-inline: var(--s-8); } }
@media (min-width: 1200px) { .wrap { padding-inline: var(--s-16); } }

/* Mark swap — the artwork is pure black on transparent, so one asset serves both
   themes via invert(). Mirrors the three-state rule used in tokens.css. */
.mark { width: auto; filter: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark { filter: invert(1); }
}
:root[data-theme="dark"] .mark { filter: invert(1); }
:root[data-theme="light"] .mark { filter: none; }

/* header */
.hdr { display: flex; align-items: center; gap: var(--s-3);
       padding-block: var(--s-3); border-bottom: var(--hairline) solid var(--border-default); }
.hdr .mark { height: 36px; flex-shrink: 0; }
.brand { font-size: var(--step-heading); line-height: var(--lh-heading); letter-spacing: 0.02em; }
.nav { display: none; gap: var(--s-8); flex-grow: 1; }
.nav a { font-family: var(--font-mono); font-size: var(--step-mono); line-height: var(--lh-body);
         letter-spacing: var(--track-button); color: var(--text-primary); }
.nav a:hover, .nav a[aria-current] { color: var(--accent); }
.iconbtn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
           flex-shrink: 0; background: none; border: 0; color: var(--text-primary); cursor: pointer; padding: 0; }
@media (min-width: 768px) {
  .hdr { gap: var(--s-8); padding-block: var(--s-4); }
  .hdr .mark { height: 48px; }
  .nav { display: flex; }
  .spacer { flex-grow: 1; }
}

/* Mobile nav: below 768px the links are hidden inline; the hamburger toggles
   them as a dropdown panel under the header. The button shows a menu icon when
   closed and an X when open. Hidden on desktop, where the nav is already inline. */
.menu-btn .menu-close { display: none; }
.hdr.nav-open .menu-btn .menu-open  { display: none; }
.hdr.nav-open .menu-btn .menu-close { display: block; }
@media (min-width: 768px) { .menu-btn { display: none; } }
@media (max-width: 767px) {
  .hdr { position: relative; }
  .spacer { flex-grow: 1; }
  .hdr.nav-open .nav {
    display: flex; flex-direction: column; gap: var(--s-4);
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface-page);
    border-bottom: var(--hairline) solid var(--border-default);
    padding: var(--s-5); z-index: 50; }
  .hdr.nav-open .nav a { font-size: var(--step-mono); letter-spacing: var(--track-button); }
}

/* hero */
/* The mark is absolutely positioned and the hero clips, so the hero needs a
   floor tall enough to contain it — otherwise a page with less copy (vinyl,
   merch) chops the mark mid-way. Floors are derived from the mark's own box:
   top offset + height, so they update together.
     under 1200:  top  16 + 400 = 416
     1200 and up: top -64 + 752 = 688  */
.hero { position: relative; overflow: hidden; padding-block: var(--s-12);
        border-bottom: var(--rule) solid var(--border-strong);
        min-height: 416px; display: flex; align-items: center; }
.hero > .hero-in { width: 100%; }
/* Hero mark: faint silhouette with the wordmark riding above it in the accent.
   The wordmark is a mask painted with var(--accent), so it themes itself and
   there is only one asset. Both layers share a crop, so they register exactly. */
.wm { position: absolute; right: -80px; top: var(--s-4); height: 400px; width: 256px;
      pointer-events: none; }
.wm-sil, .wm-word { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-sil  { opacity: var(--wm-opacity); }
.wm-word { opacity: var(--wm-word-opacity); background: var(--accent);
           -webkit-mask: url("/assets/wordmark-mask.png") no-repeat center / contain;
                   mask: url("/assets/wordmark-mask.png") no-repeat center / contain; }
.hero-in { position: relative; display: flex; flex-direction: column; gap: var(--s-5); }
.hero h1 { font-size: 44px; line-height: 44px; }
.hero h1 span { color: var(--accent); }
.hero p { margin: 0; max-width: 640px; text-wrap: pretty; }
@media (min-width: 768px)  { .hero { padding-block: var(--s-12); } .hero h1 { font-size: 72px; line-height: 72px; } }
@media (min-width: 1200px) {
  .hero { padding-block: var(--s-20); min-height: 688px; }
  .hero h1 { font-size: 96px; line-height: 96px; }
  .wm { right: var(--s-12); top: -64px; height: 752px; width: 480px; }
  .hero-in { gap: var(--s-8); max-width: 900px; }
  .hero p { font-size: var(--step-body-l); line-height: var(--lh-body-l); }
}

/* buttons */
.btns { display: flex; flex-direction: column; gap: var(--s-2); }
.btn { font-family: var(--font-mono); font-size: var(--step-mono); line-height: var(--lh-body);
       font-weight: 600; letter-spacing: var(--track-button); height: var(--control-h);
       padding-inline: var(--s-6); display: flex; align-items: center; justify-content: center;
       border-radius: var(--radius); cursor: pointer; }
.btn-a { background: var(--accent); color: var(--text-on-accent); border: 0; }
.btn-a:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.btn-o { background: none; color: var(--text-primary); border: var(--hairline) solid var(--border-strong); }
.btn-o:hover { color: var(--text-primary); }
@media (min-width: 768px) { .btns { flex-direction: row; gap: var(--s-4); } .btn { padding-inline: var(--s-8); } }

/* sections */
.sec { padding-block: var(--s-8); border-bottom: var(--hairline) solid var(--border-default); }
.sec-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
          margin-bottom: var(--s-5); }
.sec-hd h2 { font-size: 40px; line-height: 44px; }
.more { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
        letter-spacing: var(--track-label); white-space: nowrap; }
@media (min-width: 768px)  { .sec { padding-block: var(--s-12); } .sec-hd h2 { font-size: 56px; line-height: 56px; } .sec-hd { margin-bottom: var(--s-6); } }

/* sleeves + grid */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }
/* Merch cards are content-heavy: one column on phones (roomy image, price + Add
   side by side without cramming), stepping up with width. Keyed off .mcard so
   only the merch grid changes — the release/vinyl grids are untouched. */
.grid:has(.mcard) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px)  { .grid:has(.mcard) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .grid:has(.mcard) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid:has(.mcard) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.sleeve { position: relative; aspect-ratio: 1 / 1; background: var(--surface-sunken);
          border: var(--hairline) solid var(--border-default); }
.sleeve svg, .sleeve img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sleeve .ph { position: absolute; left: var(--s-3); top: var(--s-3); font-family: var(--font-mono);
              font-size: var(--step-micro); line-height: var(--lh-micro);
              letter-spacing: var(--track-label); color: var(--text-muted); }
.card h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; margin: 0;
           font-size: var(--step-heading); line-height: var(--lh-heading); }
.cat { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
       letter-spacing: var(--track-label); color: var(--text-muted); }
.who { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro); color: var(--accent); }
@media (min-width: 768px) { .who { font-size: var(--step-mono); line-height: var(--lh-mono); } }

/* physical */
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 768px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
.panel { background: var(--surface-raised); border: var(--hairline) solid var(--border-default);
         padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.panel h2 { font-size: 40px; line-height: 44px; }
.panel p { margin: 0; text-wrap: pretty; }
@media (min-width: 768px) { .panel { padding: var(--s-8); gap: var(--s-4); } .panel h2 { font-size: 56px; line-height: 56px; } }
.pill { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
        letter-spacing: var(--track-label); padding: var(--s-2) var(--s-3); align-self: flex-start;
        border: var(--hairline) solid var(--border-default); color: var(--text-primary); }
.pill-a { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* footer */
.ft { padding-block: var(--s-8); display: flex; flex-direction: column; gap: var(--s-5); }
.ft h2 { font-size: 28px; line-height: 32px; }
.sub { display: flex; flex-direction: column; gap: var(--s-2); }
.fld { border: var(--hairline) solid var(--border-default); border-radius: var(--radius-field);
       height: var(--control-h); padding-inline: var(--s-4); background: var(--surface-page);
       color: var(--text-primary); font-family: var(--font-mono); font-size: var(--step-body-s); width: 100%; }
.fld::placeholder { color: var(--text-muted); }
.ft-btm { padding-top: var(--s-5);
          display: flex; align-items: center; justify-content: center; gap: var(--s-3);
          flex-wrap: wrap; text-align: center; }
.ft-btm .mark { height: 32px; }
.ft-btm span, .ft-btm a { font-family: var(--font-mono); font-size: var(--step-micro);
                          line-height: var(--lh-micro); letter-spacing: var(--track-label); color: var(--text-muted); }
@media (min-width: 768px) {
  .ft { padding-block: var(--s-12); gap: var(--s-8); }
  .ft h2 { font-size: 40px; line-height: 44px; }
  .ft-top { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: var(--s-16); align-items: start; }
  .sub form { display: flex; gap: var(--s-2); }
  .ft-btm { gap: var(--s-8); }
}

/* ── Catalogue controls ─────────────────────────────────────── */
.ctrls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2);
         margin-bottom: var(--s-5); }
@media (min-width: 768px) { .ctrls { display: flex; gap: var(--s-3); align-items: flex-end; } }
.ctrl { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ctrl label { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
              letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
select.fld { appearance: none; cursor: pointer;
             background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                               linear-gradient(135deg, currentColor 50%, transparent 50%);
             background-position: right 20px center, right 14px center;
             background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
             padding-right: var(--s-8); }
.count { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
         letter-spacing: var(--track-label); color: var(--text-muted); grid-column: 1 / -1; }
@media (min-width: 768px) { .count { margin-left: auto; padding-bottom: var(--s-3); white-space: nowrap; } }

/* Catalogue header bar: title, filters and count on one crisp row above the
   grid. Everything is the same height (40px) and vertically centred — the
   dropdowns match the heading, the count sits at the far right. Wraps on
   narrow screens. */
.cat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
           margin-bottom: var(--s-5); }
.cat-bar h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
              margin: 0; font-size: 40px; line-height: 40px; }
.cat-bar .ctrls { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: 0; }
.cat-bar .fld { height: 40px; width: auto; min-width: 128px; }
.cat-bar .count { margin-left: auto; padding-bottom: 0; }
@media (min-width: 768px) { .cat-bar { margin-bottom: var(--s-6); } }

.price { font-family: var(--font-mono); font-size: var(--step-heading); line-height: var(--lh-heading);
         font-weight: 600; color: var(--text-primary); }
.meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
        border-top: var(--hairline) solid var(--border-default); padding-top: var(--s-2); }
.tag { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
       letter-spacing: var(--track-label); color: var(--text-muted); }
.flag { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
        letter-spacing: var(--track-label); font-weight: 600; color: var(--accent); }
.flag-out { color: var(--text-muted); text-decoration: line-through; font-weight: 400; }
.flag-tbc { color: var(--text-muted); font-weight: 400; }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-2);
         margin-top: var(--s-8); flex-wrap: wrap; }
.pg { font-family: var(--font-mono); font-size: var(--step-mono); line-height: var(--lh-body);
      font-weight: 600; letter-spacing: var(--track-button); height: var(--control-h);
      min-width: var(--control-h); padding-inline: var(--s-4); display: flex; align-items: center;
      justify-content: center; background: none; color: var(--text-primary);
      border: var(--hairline) solid var(--border-default); cursor: pointer; }
.pg:hover:not(:disabled) { border-color: var(--border-strong); }
.pg[aria-current] { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.pg:disabled { color: var(--text-muted); cursor: default; }
.empty { font-family: var(--font-mono); font-size: var(--step-body-s); line-height: var(--lh-body-s);
         color: var(--text-muted); padding-block: var(--s-16); text-align: center; }
.metaL { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }

/* Catalogue cards are links; keep them reading as cards, not link text. */
a.card { color: inherit; text-decoration: none; }
a.card h3 { transition: color 120ms ease; }
a.card:hover h3 { color: var(--accent); }
a.card:focus-visible { outline: var(--rule) solid var(--focus-ring); outline-offset: var(--rule); }

/* ── Merch cards ────────────────────────────────────────────── */
/* Product shots are square on a white studio ground, so they sit on a raised
   surface with the print tag pinned in the corner. */
.mcard .sleeve { background: var(--surface-raised); }
.mcard .sleeve img { object-fit: cover; }
.mtag { position: absolute; left: var(--s-3); top: var(--s-3);
        font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
        letter-spacing: var(--track-label); text-transform: uppercase;
        background: var(--surface-page); color: var(--text-muted);
        padding: var(--s-1) var(--s-2); border: var(--hairline) solid var(--border-default); }
.sw-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.sw { width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
      background: var(--sw, #888); border: 1px solid rgba(128, 128, 128, 0.4);
      -webkit-appearance: none; appearance: none; flex-shrink: 0;
      transition: transform 120ms ease, box-shadow 120ms ease; }
/* Selected = a clean accent ring: a 2px gap in the card colour, then a solid 2px
   accent ring, drawn with box-shadow so it stays smooth at any resolution.
   Hover just scales the chip a touch. */
.sw:hover { transform: scale(1.12); }
.sw.is-on { border-color: transparent;
            box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--accent); }
.msz { letter-spacing: var(--track-label); }
/* Price and a compact add-to-cart share one row; the button no longer spans
   the card. */
.mcard .meta { align-items: center; }
/* Compact add-to-cart, shared by merch and vinyl cards: auto width, shorter,
   with the bag glyph — a sleek control beside the price, not a full-width slab. */
.addcart { width: auto; flex: 0 0 auto; height: 38px; padding-inline: var(--s-4);
           font-size: var(--step-micro); letter-spacing: var(--track-button);
           gap: var(--s-2); white-space: nowrap; }
.addcart .bag { flex-shrink: 0; transition: transform 140ms ease; }

/* ── Add-to-cart: prettified ─────────────────────────────────────
   Every buy CTA — the card buttons (.addcart), the release-page ADD TO CART
   (.buy-row) and the vinyl button on a release (.panel) — becomes a rounded
   pill with a soft lift + accent glow on hover, instead of a hard square slab.
   Targets the existing markup, so no rebuild is needed. Other buttons (Browse
   Releases, Tell Me, format tiles) keep the sharp house style. */
.addcart { border-radius: 999px;
           transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
.buy-row .btn, .panel .btn { border-radius: 999px; padding-inline: var(--s-6);
           transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
.buy-row .btn { padding-inline: var(--s-8); }
.addcart:hover,
.buy-row .btn-a:hover, .panel .btn-a:hover {
           transform: translateY(-1px);
           box-shadow: 0 6px 22px -8px var(--accent), 0 2px 6px -4px rgba(0,0,0,0.4); }
.addcart:hover .bag { transform: translateX(-1px) scale(1.06); }
.addcart:active,
.buy-row .btn-a:active, .panel .btn-a:active { transform: translateY(0); box-shadow: none; }
a.sizeguide { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
              letter-spacing: var(--track-label); color: var(--text-muted); text-decoration: underline;
              text-underline-offset: 2px; white-space: nowrap; }
a.sizeguide:hover { color: var(--accent); }

/* Scrollbars: the OS default is a grey slab that has nothing to do with this
   palette. Thin, token-coloured, and it tracks the theme. */
* { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 999px;
                            border: 2px solid var(--surface-page); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
::-webkit-scrollbar-corner { background: transparent; }