/* ============================================================
   REVOLVER — print/zine. Hard edges everywhere: no border-radius,
   no drop shadows, no gradients. Separation is earned with rules,
   stock changes and type scale, not with glow.
   ============================================================ */

/* Signature seam (doctrine 3 L61) — the per-client motif is a SLEEVE SPINE:
   a heavy rule with a hairline shadow-line under it and a red register tick
   at the left, the way a printed spine sits against the board. Replaces the
   flat 1px border that was used identically five times. Deliberately NOT on
   every section — doctrine 1 L35 bans uniform application of any treatment. */
.seam,.rotw,.picks{position:relative;border-top:3px solid var(--ink)}
.seam::before,.rotw::before,.picks::before{
  content:"";position:absolute;top:-3px;left:2.4rem;width:56px;height:3px;
  background:var(--accent);
}
.seam::after,.rotw::after,.picks::after{
  content:"";position:absolute;top:1px;left:0;right:0;height:1px;
  background:var(--rule-soft);
}

/* ---------------- HERO — asymmetric, paper, no gradient ---------------- */
.hero{
  display:grid;grid-template-columns:1.15fr .85fr;align-items:end;
  gap:clamp(2rem,5vw,4.5rem);padding:5rem 2.4rem 3.5rem;
}
/* The ONE eyebrow on the site. It used to appear six times on the home page
   alone, which doctrine 1 L30 bans outright. */
.hero-kicker{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1.4rem;
}
.hero-copy h1,.hero-copy h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(3rem,8.5vw,7.5rem);line-height:.86;letter-spacing:-.01em;
}
/* The coloured serif-italic second line was flagged by two reviewers as a
   dated AI-site tell. The headline is now one voice; emphasis comes from
   Redaction's ink grade, not from recolouring half a sentence. */
.hero-copy h1 em,.hero-copy h2 em{font-style:normal;color:inherit}
.hero-copy .lede{
  margin:1.6rem 0 2rem;color:var(--ink-2);max-width:44ch;line-height:1.6;
}
.hero-actions{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}

/* Buttons: one solid, and text links elsewhere. Doctrine 1 L31 bans the
   solid+ghost pair, so the second action is an underlined link. */
.btn-primary{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:.8rem 1.5rem;font-family:var(--font-mono);font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);
  transition:background .15s,color .15s;
}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ghost{
  background:none;border:0;border-bottom:1px solid var(--ink);
  color:var(--ink);padding:.2rem 0;cursor:pointer;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;transition:color .15s,border-color .15s;
}
.btn-ghost:hover:not([disabled]){color:var(--accent);border-bottom-color:var(--accent)}
.btn-ghost[disabled]{opacity:.35;cursor:not-allowed}

.hero-feature{position:relative;justify-self:end;width:100%;max-width:420px;display:block;
  border:1px solid var(--ink);aspect-ratio:1;overflow:hidden}
.hero-feature-img{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-tag{
  position:absolute;left:0;right:0;bottom:0;padding:.5rem .7rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--paper);background:var(--ink);z-index:2;
}
.hero-eq{position:absolute;right:.6rem;top:.6rem;display:flex;gap:3px;align-items:flex-end;
  height:22px;opacity:0;transition:opacity .3s;z-index:2}
.hero-feature.playing .hero-eq{opacity:1}
.hero-eq i{width:4px;height:100%;background:var(--accent);transform-origin:bottom;
  transform:scaleY(.25);animation:eqbar .9s ease-in-out infinite;animation-play-state:paused}
.hero-feature.playing .hero-eq i{animation-play-state:running}
.hero-eq i:nth-child(2){animation-delay:.15s}.hero-eq i:nth-child(3){animation-delay:.3s}
.hero-eq i:nth-child(4){animation-delay:.45s}
@keyframes eqbar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

/* ---------------- ARRIVALS strip ---------------- */
.arrivals{padding:3rem 2.4rem 3.5rem}
.arrivals h2,.picks h2,.events-home h2{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1.4rem;
}
/* Mobile fix: the old strip sliced the second cover in half at the viewport
   edge with no scroll affordance, so it read as a broken layout rather than a
   carousel. Edge padding + snap + a visible scrollbar track make the overflow
   legible as "there is more this way". */
.strip{
  display:flex;gap:1.2rem;overflow-x:auto;padding:.4rem 0 1.2rem;
  scroll-snap-type:x mandatory;scrollbar-color:var(--ink-3) transparent;
}
.strip::-webkit-scrollbar{height:3px}
.strip::-webkit-scrollbar-thumb{background:var(--ink-3)}
.crate-link,.story-link,.events-link,.rotw-view{
  display:inline-block;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--accent);padding-bottom:2px;
}
.crate-link:hover,.story-link:hover,.events-link:hover,.rotw-view:hover{color:var(--accent)}

/* ---------------- ALBUM CARD (home strip) ---------------- */
.album-card{flex:0 0 auto;width:190px;scroll-snap-align:start}
.album-card .sleeve{position:relative;overflow:hidden;border:1px solid var(--ink)}
.album-card .sleeve img{width:100%;aspect-ratio:1;object-fit:cover}
.album-card .vinyl-peek{display:none}
.album-card .meta{display:flex;flex-direction:column;gap:.1rem;padding:.5rem 0;font-size:.82rem}
.album-card .meta .a{color:var(--ink-3)}
.album-card .meta .p{font-family:var(--font-mono);font-size:.78rem;margin-top:.25rem}

/* ---------------- toast + error ---------------- */
.toast{
  position:fixed;left:2.4rem;bottom:2.4rem;background:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;border-left:3px solid var(--accent);opacity:0;
  transform:translateY(8px);transition:opacity .2s,transform .2s;z-index:200;
  font-family:var(--font-mono);font-size:.74rem;
}
.toast.show{opacity:1;transform:none}
.err{color:var(--ink-2);font-family:var(--font-mono)}
.err-page{padding:8rem 2.4rem}

@media(max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:3rem}
  .hero-feature{justify-self:start;max-width:min(78vw,360px)}
}

/* ---------------- SHOP head + controls ---------------- */
.shop-head{padding:3.5rem 2.4rem 1.2rem}
.shop-head h1,.crate-head h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.8rem,7vw,5.5rem);line-height:.9;
}
.shop-count,.crate-head p{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);margin-top:.5rem}
.crate-head{padding:3.5rem 2.4rem 1.2rem}
.crate-controls{
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  flex-wrap:wrap;margin-top:1.6rem;
}
.genre-chips{display:flex;gap:.4rem;flex-wrap:wrap}
/* Chips and the sort control now match each other. The old pair was a gold
   pill row beside an unstyled native <select> — flagged as default
   Shopify/Tailwind furniture that did not even agree with itself. */
.chip{
  background:none;color:var(--ink-2);border:1px solid var(--rule);
  padding:.34rem .8rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.crate-tools{display:flex;gap:.6rem;align-items:center}
.crate-search,.crate-sort{
  background:none;color:var(--ink);border:1px solid var(--rule);
  padding:.34rem .7rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.04em;text-transform:uppercase;
}
.crate-search{min-width:190px}
.crate-search::placeholder{color:var(--ink-3);text-transform:none;letter-spacing:0}
.crate-search:focus,.crate-sort:focus{outline:none;border-color:var(--accent)}
.crate-sort{cursor:pointer}
.crate-empty,.shop-empty{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-2);padding:2rem 2.4rem}
@media(max-width:820px){.crate-search{min-width:0;flex:1}.crate-controls{gap:1rem}}

/* ---------------- THE CRATE — non-uniform grid ---------------- */
.shop-grid-wrap{padding:1.2rem 2.4rem 5rem}
.shop-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:2rem 1.4rem;
}
/* Twenty identical squares in 5x4 lockstep read as a spreadsheet, so the
   shop's own pick is sized like one: two columns by two rows.
   A previous attempt also spanned every 7th tile across 2 columns while
   aspect-ratio:1 was still in force -- that forced double height, overflowed
   into the next row and tore the grid apart. Only ONE cell varies now, and the
   featured cover drops aspect-ratio and fills its cell instead. */
.shop-card{position:relative;display:flex;flex-direction:column}
@media(min-width:760px){
  .shop-card:first-child{grid-column:span 2;grid-row:span 2}
  .shop-card:first-child .sc-frame{height:calc(100% - 4.6rem)}
  .shop-card:first-child .sc-cover{aspect-ratio:auto;height:100%}
}
/* The preview bar must be positioned against the ARTWORK, not the card. As a
   sibling of .sc-cover it anchored to the bottom of the whole article -- below
   the title and price -- so translateY(100%) parked it in the grid gap where
   it stayed visible instead of hiding. A button cannot live inside the <a>,
   hence this wrapper. */
.sc-frame{position:relative;overflow:hidden;display:block}
.sc-cover{position:relative;display:block;overflow:hidden;aspect-ratio:1;
  border:1px solid var(--ink);background:var(--paper-2);height:100%}
.sc-cover img{width:100%;height:100%;object-fit:cover}
/* There was no hover state at all: twenty tiles and nothing happened. */
.sc-cover::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  opacity:0;transition:opacity .2s;
}
.shop-card:hover .sc-cover::after{opacity:.14}
.sc-play{
  position:absolute;left:0;right:0;bottom:0;height:34px;border:0;
  background:var(--ink);color:var(--paper);cursor:pointer;z-index:3;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;
  transform:translateY(100%);transition:transform .2s var(--ease),background .15s;
}
.shop-card:hover .sc-play,.shop-card.playing .sc-play,.sc-play:focus-visible{transform:none}
.sc-play:hover{background:var(--accent)}
.sc-eq{position:absolute;left:.5rem;top:.5rem;display:flex;gap:3px;align-items:flex-end;
  height:18px;opacity:0;transition:opacity .3s;z-index:3}
.shop-card.playing .sc-eq{opacity:1}
.sc-eq i{width:3px;height:100%;background:var(--accent);transform-origin:bottom;
  transform:scaleY(.25);animation:eqbar .9s ease-in-out infinite;animation-play-state:paused}
.shop-card.playing .sc-eq i{animation-play-state:running}
.sc-eq i:nth-child(2){animation-delay:.15s}.sc-eq i:nth-child(3){animation-delay:.3s}
.sc-eq i:nth-child(4){animation-delay:.45s}
.sc-title{font-weight:400;margin-top:.6rem;line-height:1.25}
.sc-title:hover{color:var(--accent)}
.sc-artist{color:var(--ink-3);font-size:.84rem;margin-top:.1rem}
/* Meta pinned to the card bottom. Previously a two-line title pushed the
   genre and price out of alignment with every neighbour in the row. */
.sc-meta{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:auto;padding-top:.5rem}
.sc-genre{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3)}
.sc-price{font-family:var(--font-mono);font-size:.8rem}

/* ---------------- PRODUCT ---------------- */
.product{
  display:grid;grid-template-columns:minmax(280px,40%) 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:start;padding:3.5rem 2.4rem 4rem;
}
.product-cover{position:relative;justify-self:start;width:100%;max-width:470px}
.product-cover img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--ink)}
.product-cover canvas{width:100%;height:44px;margin-top:.8rem}
.crumb a{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--accent)}
.product-info h1{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.4rem,5.5vw,4.4rem);line-height:.92;margin:.7rem 0 .2rem}
.product-info .by{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);
  letter-spacing:.04em;margin-bottom:1.6rem;text-transform:uppercase}

.tracklist{list-style:none;border-top:1px solid var(--ink)}
.track{display:grid;grid-template-columns:1.2rem 2rem 1fr auto;gap:.7rem;align-items:baseline;
  padding:.55rem .1rem;border-bottom:1px solid var(--rule-soft);cursor:pointer;
  transition:background .12s}
.track:hover{background:var(--paper-2)}
.track .t-play{color:var(--accent);font-size:.62rem;visibility:hidden}
.track:hover .t-play,.track.playing .t-play{visibility:visible}
.track .n,.track .dur{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3)}
.track.disabled{opacity:.4;cursor:not-allowed}
.track.disabled .t-play{display:none}
.track.playing{color:var(--accent)}
.track.playing .n,.track.playing .dur{color:var(--accent)}

/* The buy bar used to sit under an 11-row tracklist in an otherwise empty
   full-width band — the primary action was the least prominent thing on the
   page, and the only centred element on the site. It now sits directly under
   the artist line, above the tracklist, where a shop would put the price. */
.buy{display:flex;align-items:center;gap:1.2rem;margin:0 0 1.8rem;
  padding-bottom:1.4rem;border-bottom:1px solid var(--ink)}
.buy .price{font-family:var(--font-mono);font-size:1.5rem}
.buy-btn{background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:.7rem 1.4rem;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:background .15s,border-color .15s}
.buy-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.warn{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);margin-top:.8rem}
@media(max-width:820px){.product{grid-template-columns:1fr;padding-top:2rem}}

/* ---------------- HOME: record of the week ---------------- */
.rotw{
  display:grid;grid-template-columns:minmax(240px,38%) 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;padding:4.5rem 2.4rem;
}
.rotw-cover{position:relative;display:block;justify-self:start;width:100%;
  max-width:400px;border:1px solid var(--ink);overflow:hidden}
.rotw-cover img{width:100%;aspect-ratio:1;object-fit:cover}
.rotw-copy .kicker{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.rotw-copy h2{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:.94;margin:.5rem 0 .2rem}
.rotw-by{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:1.2rem}
.rotw-note{color:var(--ink-2);max-width:56ch;line-height:1.65;margin-bottom:1.6rem}
.rotw-actions{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.rotw .listen{
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:.7rem 1.3rem;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.rotw .listen[disabled]{opacity:.35;cursor:not-allowed}
.rotw .listen:hover:not([disabled]){background:var(--accent);border-color:var(--accent);color:#fff}
.rotw-cover .eq{position:absolute;left:.6rem;top:.6rem;display:flex;gap:3px;
  align-items:flex-end;height:20px;opacity:0;transition:opacity .3s}
.rotw-cover .eq.on{opacity:1}
.rotw-cover .eq i{width:3px;height:100%;background:var(--accent);transform-origin:bottom;
  transform:scaleY(.25);animation:eqbar .9s ease-in-out infinite;animation-play-state:paused}
.rotw-cover .eq.on i{animation-play-state:running}
.rotw-cover .eq i:nth-child(2){animation-delay:.15s}
.rotw-cover .eq i:nth-child(3){animation-delay:.3s}
.rotw-cover .eq i:nth-child(4){animation-delay:.45s}

/* ---------------- HOME: staff picks (second stock) ---------------- */
.picks{padding:4rem 2.4rem 4.5rem;background:var(--paper-2)}
.picks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
.pick{display:grid;grid-template-columns:84px 1fr;gap:1rem;align-items:start}
.pick-cover img{width:84px;height:84px;object-fit:cover;border:1px solid var(--ink)}
.pick-title{display:block;font-family:var(--font-display);font-size:1.2rem;line-height:1.1}
.pick-title:hover{color:var(--accent)}
.pick-artist{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em}
.pick-note{color:var(--ink-2);font-style:italic;line-height:1.5;margin:.5rem 0 .3rem}
.pick-by{font-family:var(--font-mono);font-size:.66rem;color:var(--ink-3);letter-spacing:.04em}

/* ---------------- HOME: story ---------------- */
.story{padding:5rem 2.4rem}
.story .kicker{display:none}
.story h2{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;margin-bottom:1rem;max-width:22ch}
.story-lede{color:var(--ink-2);line-height:1.7;max-width:62ch;margin-bottom:1.2rem}

/* ---------------- HOME: events — the alternating band ---------------------
   This USED to be the page's one dark band (doctrine 2 L42). The scroll-scrubbed
   header is now a full-bleed dark photographic band above it, which made two, so
   this one gives way: it is four event rows, and the dark was doing nothing for
   them but being dark. --paper-2 exists in tokens.css:50 for precisely this —
   "second stock, for one alternating band". The header keeps the dark. */
.events-home{padding:4.5rem 2.4rem 5rem;background:var(--paper-2);color:var(--ink)}
.events-home h2{color:var(--ink-3)}
.event-list{list-style:none;display:flex;flex-direction:column}
.event-row{display:grid;grid-template-columns:150px 1fr;gap:1.4rem;padding:1.2rem 0;
  border-top:1px solid rgba(22,19,15,.18)}
.event-row:first-child{border-top:0}
.ev-date{display:flex;flex-direction:column}
.ev-date b{font-family:var(--font-mono);font-size:.86rem;font-weight:400;letter-spacing:.02em}
.ev-date small{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3)}
.ev-title{display:block;font-family:var(--font-display);font-size:1.3rem;margin-bottom:.2rem}
.ev-blurb{color:var(--ink-2);line-height:1.55;max-width:68ch;display:block}
.events-home .events-link{color:var(--ink);border-bottom-color:var(--accent);margin-top:1.4rem}
.events-home .events-link:hover{color:var(--accent)}

@media(max-width:820px){
  .rotw{grid-template-columns:1fr}
  .event-row{grid-template-columns:1fr;gap:.3rem}
  .pick{grid-template-columns:64px 1fr}
  .pick-cover img{width:64px;height:64px}
}

/* ---------------- SUBPAGES ---------------- */
.page-hero{padding:4rem 2.4rem 2rem}
.page-hero .kicker{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.page-hero h1{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.8rem,7vw,6rem);line-height:.9;margin-top:.4rem;max-width:18ch}
.page-lede{color:var(--ink-2);max-width:58ch;margin-top:1rem;line-height:1.6}

.prose{padding:3rem 2.4rem;display:flex;flex-direction:column;gap:1.2rem;max-width:66ch}
.prose p{color:var(--ink-2);line-height:1.75;font-size:1.05rem}
.visit{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2rem;
  padding:2.5rem 2.4rem 5rem}
.visit-block h3{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent);margin-bottom:.6rem}
.visit-block p{color:var(--ink-2);line-height:1.6}
.visit-block a{border-bottom:1px solid var(--accent)}

.events-full{padding:2.5rem 2.4rem 5rem}
.ev-cards{list-style:none;display:flex;flex-direction:column}
/* Ruled ledger rows, not floating panels. The old cards were 1200px wide with
   content in the left 60% and an empty right half on every one. */
.ev-card{display:grid;grid-template-columns:170px 1fr auto;gap:2rem;align-items:start;
  padding:1.6rem 0;border-top:1px solid var(--ink)}
.ev-card:last-child{border-bottom:1px solid var(--ink)}
.ev-when{display:flex;flex-direction:column;gap:.15rem}
.ev-when b{font-family:var(--font-mono);font-size:.86rem;font-weight:400}
.ev-when small{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3)}
.ev-main h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:.35rem}
.ev-main p{color:var(--ink-2);line-height:1.6;max-width:62ch}
.ev-rsvp{background:none;border:1px solid var(--ink);color:var(--ink);
  padding:.55rem 1.1rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s}
.ev-rsvp:hover{background:var(--ink);color:var(--paper)}
@media(max-width:820px){
  .ev-card{grid-template-columns:1fr;gap:.6rem;padding:1.2rem 0}
}

/* ---------------- Product: the counter's opinion + shelf data ------------- */
/* Set in the display face at reading size so it carries weight on the page —
   this is the shop talking, and it was previously absent entirely. */
.counter-note{
  font-family:var(--font-display);font-size:1.16rem;line-height:1.45;
  color:var(--ink);max-width:52ch;margin:0 0 .5rem;
}
.counter-by{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.6rem;
}
/* Shelf data as a ruled index, mono throughout — the move every good
   catalogue site makes and this one did not. */
.shelf{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:1.4rem;border-top:1px solid var(--ink);
}
.shelf div{padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--rule-soft)}
.shelf dt{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem}
.shelf dd{font-family:var(--font-mono);font-size:.82rem;color:var(--ink)}