/* ============================================================================
   ORIGIN STORY — the storefront.

   A DARK ROOM WITH THE LIGHTS ON IT. The ground is vinyl: a cool near-black
   that is nobody's brand colour and does not pretend to be paper. Everything
   that carries meaning is light against it.

   COLOUR IS TIME, and it is the only colour here. There is no accent. Anything
   tinted takes its hue from the year its genre ignited — tungsten gold at 1917,
   through amber, vermilion, magenta, violet and indigo, to cyan at 2001 —
   interpolated along the RAMP in site_content.py and written onto the element
   as --tint. Thirty-one of them side by side are the series' signature: a
   spectrum of a century of popular music. A tint is therefore data, and is
   never spent on decoration.

   THREE FACES, THREE JOBS, NEVER SWAPPED.
     --display  Archivo, heavy and wide. The site's own voice: headings,
                the wordmark, the genre names. Set very large and tight.
     --mono     Space Mono. Every number and every label — years, prices,
                extents, ISBNs, zones. If it is data, it is mono.
     --serif    Spectral. ONLY where the book itself speaks: extracts,
                openings, retail copy, the drop cap. Seeing the serif means
                you are reading the book rather than reading about it.

   The jackets are set in Bebas and Baskerville and are not matched here on
   purpose. A record sleeve has its own typography; the shop around it does not
   copy it, it holds it.
   ========================================================================= */

:root {
  --ink:        #08090B;   /* vinyl. the ground, and it is not brown */
  --ink-1:      #101216;   /* a raised field */
  --ink-2:      #171A20;   /* a card on that field */
  --rule:       #575E68;   /* 3.04:1 on the ground — this one edges controls */
  --rule-soft:  #1C2027;   /* and this one is a hairline between things */
  --text:       #F2F3F5;
  --text-2:     #D3D7DD;   /* running prose, a shade back from headings */
  --dim:        #A7AEB8;   /* 8.9:1 */
  --dim2:       #8D95A0;   /* 6.6:1 — the quiet labels are still readable */
  --dimmer:     #8D95A0;   /* kept: the old name, same value */
  --bright:     #FFFFFF;

  /* The extract is the one warm surface on the site, because it is the one
     place you are looking at a page of the book rather than at the shop. */
  --paper:      #F2F0EA;
  --paper-ink:  #14161A;
  --paper-dim:  #5E6570;

  --display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Spectral", Georgia, "Times New Roman", serif;
  --mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(18px, 4vw, 56px);
  --wrap: 1240px;
  --label-w: 286px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto matters. Every <img> here carries width/height attributes so the
   layout does not jump while a jacket loads, and a height attribute otherwise
   wins over an aspect-ratio and renders the cover at 1024px tall. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: #22D6EE; color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--paper); color: var(--paper-ink);
  padding: 12px 18px; font-family: var(--mono); font-size: .78rem;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid #22D6EE; outline-offset: 3px; }

/* -- shared type ---------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin: 0 0 18px;
  line-height: 1.6;
}
.eyebrow b { color: var(--dim); font-weight: 400; }

.h-display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;          /* the top of Archivo's width axis, which is why it was chosen */
  line-height: .92;
  letter-spacing: -.012em;     /* heavy wide caps need pulling in, not out */
  margin: 0;
  text-transform: uppercase;
}

.lead {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--dim);
  max-width: 42ch;
  margin: 22px 0 0;
}

/* The one exception, and the rule that makes the serif mean something: where
   the site quotes the book, it is set in the book's face. */
.prose, .extract, .lead--book { font-family: var(--serif); }
.lead--book { font-style: italic; color: var(--text); font-size: 1.15rem; }

.prose { max-width: 62ch; }
.prose p { margin: 0 0 1.25em; color: var(--text-2); }
.prose p:last-child { margin-bottom: 0; }
.prose em { color: var(--text); }
.prose strong { color: var(--text); font-weight: 700; }

/* -- chrome --------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8,9,11,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gut);
  height: 58px;
  display: flex; align-items: center; gap: 24px;
}
.wordmark {
  font-family: var(--display); font-size: 1.6rem; letter-spacing: .1em;
  text-decoration: none; color: var(--text); line-height: 1;
  padding-top: 3px; white-space: nowrap;
}
.wordmark span { color: var(--dimmer); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; text-decoration: none; color: var(--dim);
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); border-bottom-color: var(--rule); }
.cartbtn {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text);
  background: none; border: 1px solid var(--rule); border-radius: 0;
  padding: 8px 12px; cursor: pointer; margin-left: auto;
}
.nav-links + .cartbtn { margin-left: 0; }
.cartbtn:hover { border-color: var(--dim); }
.cartbtn .count {
  display: inline-block; min-width: 1.4em; text-align: center;
  margin-left: 6px; padding: 0 4px;
  background: var(--paper); color: var(--paper-ink);
}
.cartbtn .count[data-empty] { background: none; color: var(--dimmer); }

/* On a phone the links move to their own scrollable row under the bar rather
   than disappearing: a site whose navigation vanishes below 820px is a site
   with no navigation on most of the traffic. */
@media (max-width: 860px) {
  .nav-in { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 0; }
  .nav-links {
    order: 3; flex-basis: 100%; margin: 8px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 9px;
    gap: 18px; overflow-x: auto; scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
  .cartbtn { margin-left: auto; }
}

/* -- sections ------------------------------------------------------------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

.band { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--rule-soft); }
.band--flat { border-top: 0; }
.band--raised { background: var(--ink-1); }

.band-head { display: grid; gap: 6px; margin-bottom: clamp(30px, 4vw, 52px); }
.band-head h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .015em; line-height: .88; margin: 0; font-size: clamp(2.1rem, 5vw, 3.6rem); }
.band-head .sub { font-size: 1.02rem; color: var(--dim); max-width: 58ch; margin: 12px 0 0; line-height: 1.7; }

/* -- hero ----------------------------------------------------------------- */

.hero { padding: clamp(44px, 7vw, 92px) 0 clamp(26px, 3vw, 40px); }
.hero + .band { padding-top: clamp(30px, 4vw, 52px); }
.hero h1 { font-size: clamp(2.35rem, 5.6vw, 5.2rem); }
.hero h1 .fade { color: var(--dimmer); }
.hero-grid {
  display: grid; gap: clamp(24px, 4vw, 60px);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 292px; } }
.hero-facts { display: grid; gap: 12px; padding-bottom: 6px; }
.hero-fact {
  display: grid; grid-template-columns: 4.4em 1fr; gap: 14px; align-items: baseline;
  border-top: 1px solid var(--rule-soft); padding-top: 11px; margin: 0;
}
.hero-fact dt { font-family: var(--mono); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--text); }
.hero-fact dd { margin: 0; font-family: var(--mono); font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); line-height: 1.55; }

/* -- THE SPECTRUM — the signature ----------------------------------------- */
/* Thirty-one genres on one linear century. x is the ignition year, width is
   how long the genre ran, hue is that same year read off the ramp. It is the
   chronology compressed into one glance, and every property is data — there
   is no arrangement of these bars that is prettier and still true. */

.spectrum { margin: clamp(34px, 5vw, 56px) 0 0; max-width: 620px; }

.sp-cap {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim2); margin: 0 0 9px;
}

.sp-bands { position: relative; height: 74px; }

.sp-b {
  position: absolute; top: 0; bottom: 0;
  left: var(--x); width: var(--w);
  background: var(--tint);
  border-left: 1px solid var(--ink);
  /* The glow is the whole point of a black ground: these read as light in a
     dark room rather than as swatches on a page. Kept tight — a wide blur
     merges thirty-one genres into one smear. */
  box-shadow: 0 0 22px -8px var(--tint);
  opacity: .88;
  transition: opacity .18s ease, transform .18s ease;
  transform-origin: bottom;
  border-radius: 1px;
}
.sp-b + .sp-b { margin-left: 0; }
.sp-b span { position: absolute; left: -9999px; }     /* the name, for readers */

.sp-bands:hover .sp-b { opacity: .3; }
.sp-bands .sp-b:hover, .sp-bands .sp-b:focus-visible {
  opacity: 1; transform: scaleY(1.1);
}
.sp-b:focus-visible { outline-offset: 2px; }

.sp-ruler {
  position: relative; height: 20px; margin-top: 8px;
  border-top: 1px solid var(--rule-soft);
}
.sp-ruler i {
  position: absolute; top: 5px; transform: translateX(-50%);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  color: var(--dim2); font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  .sp-b { transition: none; }
  .sp-bands .sp-b:hover, .sp-bands .sp-b:focus-visible { transform: none; }
}

@media (max-width: 899px) { .spectrum { max-width: none; } .sp-bands { height: 56px; } }

/* -- THE CHRONOLOGY — the same data, at full length ------------------------ */

.chron-shell { display: grid; gap: clamp(24px, 3vw, 44px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1080px) { .chron-shell { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; } }

.chron-ruler {
  position: relative; height: 22px; margin-left: var(--label-w);
  border-bottom: 1px solid var(--rule);
}
.chron-ruler i {
  position: absolute; bottom: 4px; transform: translateX(-50%);
  font-family: var(--mono); font-style: normal; font-size: .63rem;
  letter-spacing: .1em; color: var(--dimmer);
}
.chron-ruler i::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 1px; height: 5px; background: var(--rule);
}

.chron-row {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  align-items: center;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.chron-row:first-of-type { border-top: 1px solid var(--rule-soft); }
.chron-row:hover, .chron-row:focus-visible, .chron-row.is-on { background: var(--ink-1); }
.chron-row:focus-visible { outline-offset: -2px; }

.chron-label { display: flex; align-items: baseline; gap: 10px; padding: 7px 14px 7px 0; min-width: 0; }
.chron-label .n { font-family: var(--mono); font-size: .65rem; color: var(--dimmer); width: 2ch; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
/* Thirty-one genre names in a fixed column is the one place on this site that
   wants NARROW type, and Archivo's width axis runs down to 62%. Bebas was
   condensed by nature and these fitted; Archivo at normal width truncated
   "THE BRITISH INVASION" and three others to an ellipsis, which turns an index
   into a guessing game. */
.chron-label .g {
  font-family: var(--display); font-weight: 700; font-stretch: 72%;
  font-size: 1.13rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.chron-row:hover .chron-label .g, .chron-row.is-on .chron-label .g { color: var(--bright); }

.chron-plot { position: relative; height: 100%; min-height: 30px; }
.chron-bar {
  position: absolute; top: 50%; margin-top: -4.5px;
  left: var(--x); width: var(--w);
  height: 9px; min-width: 5px;
  background: var(--tint);
  transition: height .18s ease, margin-top .18s ease, filter .18s ease;
}
.chron-row:hover .chron-bar, .chron-row.is-on .chron-bar { height: 15px; margin-top: -7.5px; filter: brightness(1.16); }
.chron-bar i {
  position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-style: normal; font-size: .61rem; letter-spacing: .06em;
  color: var(--dimmer); white-space: nowrap;
}
.chron-row:hover .chron-bar i, .chron-row.is-on .chron-bar i { color: var(--dim); }
/* a bar that finishes near the right edge puts its years on the other side */
.chron-bar.flip i { left: auto; right: calc(100% + 9px); }

@media (prefers-reduced-motion: no-preference) {
  .chron-bar { transform-origin: left center; animation: bar-in .55s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--d, 0s); }
  @keyframes bar-in { from { transform: scaleX(.02); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
}

@media (max-width: 640px) {
  .chron-ruler { margin-left: 0; }
  .chron-row { grid-template-columns: minmax(0, 1fr); }
  .chron-label { padding: 9px 0 0; }
  .chron-plot { min-height: 20px; padding-bottom: 8px; }
  .chron-bar i { font-size: .57rem; }
}

.chron-peek {
  position: sticky; top: 82px;
  border: 1px solid var(--rule-soft); background: var(--ink-1); padding: 16px;
  display: none;
}
@media (min-width: 1080px) { .chron-peek { display: block; } }
.chron-peek img { width: 100%; background: var(--ink-2); margin-bottom: 14px; }
.chron-peek { text-decoration: none; }
.chron-peek .pv, .chron-peek .pt, .chron-peek .ps, .chron-peek .pp { display: block; }
.chron-peek .pv { font-family: var(--mono); font-size: .63rem; letter-spacing: .18em; color: var(--dimmer); text-transform: uppercase; }
.chron-peek .pt { font-family: var(--display); font-size: 1.95rem; line-height: .95; margin: 7px 0 7px; letter-spacing: .03em; text-transform: uppercase; }
.chron-peek .ps { font-style: italic; font-size: .84rem; line-height: 1.5; color: var(--dim); margin: 0 0 14px; }
.chron-peek .pp { font-family: var(--mono); font-size: .73rem; color: var(--text); display: flex; justify-content: space-between; border-top: 1px solid var(--rule-soft); padding-top: 12px; }

/* -- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--paper); color: var(--paper-ink);
  border: 1px solid var(--paper); border-radius: 0;
  padding: 14px 22px; text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--bright); border-color: var(--bright); }
.btn.ghost { background: none; color: var(--text); border-color: var(--rule); }
.btn.ghost:hover { background: none; border-color: var(--dim); color: var(--bright); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.wide { width: 100%; }
.btn.is-added { background: #7DE8A0; border-color: #7DE8A0; }

/* -- the five movements --------------------------------------------------- */

/* Five plates in a row: the movements are the one fixed thing about every
   volume, so they get the one place on the site where pictures lead. */
.mvts { display: grid; gap: clamp(20px, 2.4vw, 30px); grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.mvt { display: flex; flex-direction: column; gap: 9px; }
.mvt-plate { display: block; border: 1px solid var(--rule-soft); overflow: hidden; margin-bottom: 4px; }
.mvt-plate img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: saturate(.88); }
.mvt .mn { font-family: var(--mono); font-size: .64rem; color: var(--dimmer); letter-spacing: .18em; }
.mvt .mt { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.mvt .md { margin: 0; color: var(--dim); font-size: .9rem; line-height: 1.6; }
/* On a phone five full-width squares is a very long scroll for a list of
   five things, so the plate moves beside the text instead. */
@media (max-width: 640px) {
  .mvts { gap: 22px; }
  .mvt { display: grid; grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 16px; row-gap: 3px; align-items: start; }
  .mvt-plate { grid-row: 1 / 4; margin-bottom: 0; }
  .mvt .mt { font-size: 1.4rem; }
}

/* -- plates --------------------------------------------------------------- */

.page-head--art {
  position: relative; overflow: hidden;
  padding: clamp(90px, 14vw, 190px) 0 clamp(28px, 5vw, 52px);
}
.page-head--art .ph-img { position: absolute; inset: 0; z-index: 0; }
.page-head--art .ph-img img { width: 100%; height: 100%; object-fit: cover; }
.page-head--art .ph-img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(8,9,11,.55) 0%, rgba(8,9,11,.78) 46%, var(--ink) 100%),
    linear-gradient(to right, rgba(8,9,11,.70) 0%, rgba(8,9,11,.26) 62%, rgba(8,9,11,.04) 100%);
}
.page-head--art .wrap { position: relative; z-index: 1; }
.page-head--art .lead, .page-head--art .eyebrow { text-shadow: 0 1px 14px rgba(0,0,0,.85); }

/* Capped and centred. A supporting illustration that runs the full 1240 is no
   longer supporting — it becomes the section. */
.band-plate { margin: 0 auto clamp(30px, 4vw, 50px); border: 1px solid var(--rule-soft); max-width: 900px; }
.band-plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.band-plate figcaption {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; color: var(--dimmer);
  line-height: 1.7; padding: 11px 14px; border-top: 1px solid var(--rule-soft);
  background: var(--ink-1);
}
@media (max-width: 620px) { .band-plate img { aspect-ratio: 4 / 3; } }

/* -- the rule (zero lyrics) ----------------------------------------------- */

.rule-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) { .rule-grid { grid-template-columns: 1.05fr 1fr; } }

.swap { border: 1px solid var(--rule-soft); background: var(--ink-1); }
.swap-row { padding: 20px 22px; border-bottom: 1px solid var(--rule-soft); }
.swap-row:last-child { border-bottom: 0; }
.swap-row .k { font-family: var(--mono); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dimmer); margin: 0 0 10px; }
.swap-row p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--text-2); }
.swap-row.no p { color: var(--dimmer); }
.swap-row.no .k { color: #FF7A6B; }

/* -- the extract ---------------------------------------------------------- */

.extract {
  background: var(--paper); color: var(--paper-ink);
  padding: clamp(30px, 5vw, 62px) clamp(22px, 5vw, 66px);
  max-width: 720px; margin: 0 auto;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.75);
}
.extract .xh {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-dim); border-bottom: 1px solid rgba(20,22,26,.16);
  padding-bottom: 14px; margin: 0 0 26px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.extract h3 { font-family: var(--display); font-size: 2rem; letter-spacing: .04em; margin: 0 0 18px; line-height: 1; text-transform: uppercase; }
.extract p { margin: 0 0 1.15em; font-size: 1rem; line-height: 1.8; }
.extract p:last-of-type { margin-bottom: 0; }
/* a serif drop cap, not the display face: Bebas has no serifs, so its I is a
   bare stem that reads as a rule rather than a letter */
.extract .drop::first-letter { float: left; font-family: var(--serif); font-weight: 700; font-size: 3.1em; line-height: .8; padding: .06em .1em 0 0; }
.extract .xf { margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(20,22,26,.16); font-family: var(--mono); font-size: .67rem; letter-spacing: .1em; color: var(--paper-dim); }

/* -- the shelf ------------------------------------------------------------ */

.shelf { display: grid; gap: clamp(22px, 2.6vw, 34px) clamp(14px, 2vw, 26px); grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card-jacket { position: relative; display: block; background: var(--ink-2); aspect-ratio: 1600 / 2560; overflow: hidden; border: 1px solid var(--rule-soft); }
.card-jacket img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.card:hover .card-jacket img { transform: scale(1.035); }
.card-jacket::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--tint); }
.card-meta { padding: 12px 0 0; display: grid; gap: 4px; }
.card-meta .cv { font-family: var(--mono); font-size: .61rem; letter-spacing: .16em; color: var(--dimmer); text-transform: uppercase; }
.card-meta .ct { font-family: var(--display); font-size: 1.3rem; line-height: 1; letter-spacing: .035em; text-transform: uppercase; }
.card-meta .cy { font-family: var(--mono); font-size: .65rem; color: var(--dim); }
.card:hover .card-meta .ct { color: var(--bright); }

/* -- offers --------------------------------------------------------------- */

.offers { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offer { border: 1px solid var(--rule-soft); background: var(--ink-1); padding: 24px;
  display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
a.offer:hover { border-color: var(--rule); }
a.offer:hover .oh, a.offer:hover .price { color: var(--bright); }
.offer .ok, .offer .oh, .offer .price { display: block; }
.offer .oh { font-family: var(--display); font-size: 1.78rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.offer .ok { font-family: var(--mono); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dimmer); }
.offer .od { margin: 0; font-size: .91rem; line-height: 1.65; color: var(--dim); }
.offer .chain { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.offer .chain li { font-family: var(--mono); font-size: .61rem; letter-spacing: .06em; color: var(--text); border: 1px solid var(--rule); padding: 3px 7px; }
.offer .price { font-family: var(--mono); font-size: 1.04rem; color: var(--text); margin-top: auto; padding-top: 8px; }
.offer .price s { color: var(--dimmer); margin-right: 8px; font-size: .83rem; }
.offer--set { grid-column: 1 / -1; display: grid; gap: 22px; grid-template-columns: minmax(0,1fr); align-items: center; }
@media (min-width: 880px) { .offer--set { grid-template-columns: minmax(0,1fr) 300px; } }
.spines { display: flex; gap: 2px; height: 74px; align-items: flex-end; }
.spines span { flex: 1; background: var(--tint); height: var(--h, 100%); }

/* -- volume page ---------------------------------------------------------- */

.vol-grid { display: grid; gap: clamp(26px, 4vw, 60px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .vol-grid { grid-template-columns: 318px minmax(0, 1fr); } }
.vol-jacket { border: 1px solid var(--rule-soft); background: var(--ink-2); }
@media (min-width: 900px) { .vol-jacket { position: sticky; top: 82px; } }
@media (max-width: 899px) { .vol-jacket { max-width: 250px; } }
.vol-jacket img { width: 100%; }

.vol-head h1 { font-size: clamp(2.8rem, 8vw, 5.6rem); }
.vol-head .vsub { font-style: italic; font-size: clamp(1.02rem, 2.1vw, 1.3rem); color: var(--text); margin: 16px 0 0; max-width: 32ch; line-height: 1.45; }

.vol-strip { margin: 30px 0 0; }
.vol-strip .lab { font-family: var(--mono); font-size: .61rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dimmer); margin: 0 0 8px; }
.vol-strip .track { position: relative; height: 10px; background: var(--ink-1); border: 1px solid var(--rule-soft); }
.vol-strip .track b { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); min-width: 4px; background: var(--tint); }
.vol-strip .ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .6rem; color: var(--dimmer); margin-top: 6px; letter-spacing: .08em; }

/* Cell borders rather than a 1px gap over a coloured container: when the last
   row is short, a gap-and-background grid paints the empty tracks and the
   table appears to have a stripe in it. */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  border-top: 1px solid var(--rule-soft); border-left: 1px solid var(--rule-soft); margin: 30px 0; }
.specs > div { padding: 13px 15px; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.specs dt { font-family: var(--mono); font-size: .59rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dimmer); margin-bottom: 5px; }
.specs dd { margin: 0; font-family: var(--mono); font-size: .83rem; color: var(--text); }

.buybox { border: 1px solid var(--rule); background: var(--ink-1); padding: 22px; display: grid; gap: 14px; margin: 30px 0; }
.buybox .bp { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.buybox .bp .amt { font-family: var(--display); font-size: 2.5rem; line-height: 1; }
.buybox .bp .fmt { font-family: var(--mono); font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); text-align: right; }
.buybox .fine { margin: 0; font-family: var(--mono); font-size: .67rem; line-height: 1.7; color: var(--dimmer); letter-spacing: .02em; }

.contents { border-top: 1px solid var(--rule-soft); }
.contents details { border-bottom: 1px solid var(--rule-soft); }
.contents summary { display: grid; grid-template-columns: 2.8em minmax(0,1fr) auto; gap: 16px; align-items: baseline; padding: 18px 0; cursor: pointer; list-style: none; }
.contents summary::-webkit-details-marker { display: none; }
.contents summary .mn { font-family: var(--mono); font-size: .67rem; color: var(--dimmer); }
.contents summary .mt { font-family: var(--display); font-size: 1.52rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.contents summary .mc { font-family: var(--mono); font-size: .65rem; color: var(--dim); }
.contents details[open] summary .mt { color: var(--bright); }
.contents ol { margin: 0 0 20px; padding: 0 0 0 calc(2.8em + 16px); list-style: none; }
.contents ol li { font-size: .91rem; color: var(--dim); padding: 5px 0; display: grid; grid-template-columns: 2.6em minmax(0,1fr); gap: 10px; }
.contents ol li b { font-family: var(--mono); font-size: .67rem; color: var(--dimmer); font-weight: 400; }

.handoff { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; border: 1px solid var(--rule-soft); background: var(--ink-1); padding: 18px 20px; text-decoration: none; color: inherit; margin-top: 14px; border-left: 3px solid var(--tint, var(--rule)); }
.handoff:hover { border-color: var(--rule); border-left-color: var(--tint, var(--rule)); }
.handoff .hk { font-family: var(--mono); font-size: .61rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dimmer); }
.handoff .ht { font-family: var(--display); font-size: 1.55rem; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; display: block; }
.handoff .hw { display: block; font-size: .88rem; line-height: 1.55; color: var(--dim); margin-top: 3px; max-width: 52ch; }
.handoff .arrow { margin-left: auto; font-family: var(--mono); color: var(--dim); align-self: center; }

/* -- the timeline --------------------------------------------------------- */

.tl { border-top: 1px solid var(--rule-soft); }
.tl-row {
  display: grid; gap: 4px 26px; grid-template-columns: minmax(0, 1fr);
  padding: 16px 0 16px 16px;
  border-bottom: 1px solid var(--rule-soft);
  border-left: 3px solid var(--tint);
}
@media (min-width: 760px) { .tl-row { grid-template-columns: 14em minmax(0, 1fr); padding-top: 15px; } }
.tl-year { display: flex; flex-direction: column; gap: 5px; }
.tl-year > span { font-family: var(--display); font-size: 1.5rem; line-height: 1; letter-spacing: .04em; color: var(--text); }
.tl-year > span em { font-style: normal; }
.tl-vol {
  font-family: var(--mono); font-size: .61rem; letter-spacing: .07em; color: var(--dimmer);
  text-decoration: none; display: flex; align-items: center; gap: 7px; text-transform: uppercase;
}
.tl-vol:hover { color: var(--text); }
.tl-vol i { width: 8px; height: 8px; flex: none; background: var(--tint); }
.tl-events { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tl-events li { font-size: .96rem; line-height: 1.65; color: var(--text-2); max-width: 68ch; }
.tl-events li em { color: var(--text); font-style: italic; }
/* clears the sticky bar, which is two rows tall on a phone */
.tl-decade { scroll-margin-top: 112px;
  font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1; letter-spacing: .02em; margin: 62px 0 6px; color: var(--text);
  border-bottom: 1px solid var(--rule); padding-bottom: 10px;
}
.tl-decade:first-child { margin-top: 0; }
.tl--wide .tl-row:last-child { border-bottom: 0; }

.jump { display: flex; flex-wrap: wrap; gap: 7px; margin: 28px 0 0; }
.jump a {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; border: 1px solid var(--rule-soft); padding: 6px 10px;
}
.jump a:hover { color: var(--text); border-color: var(--dim); }

/* -- the money reference -------------------------------------------------- */

.money {
  display: grid; gap: 18px 40px; grid-template-columns: minmax(0, 1fr);
  padding: 34px 0; border-top: 1px solid var(--rule-soft);
  scroll-margin-top: 112px;
}
@media (min-width: 940px) { .money { grid-template-columns: 20em minmax(0, 1fr); } }
.money:first-of-type { border-top: 0; }
.money-q h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 1.9rem; line-height: 1; letter-spacing: .035em; margin: 0 0 10px;
  border-left: 3px solid var(--tint); padding-left: 12px;
}
.money-q .q { margin: 0 0 16px 15px; font-size: .96rem; line-height: 1.55; color: var(--text); font-style: italic; }
.money-src {
  display: block; margin-left: 15px; text-decoration: none;
  font-family: var(--mono); font-size: .63rem; line-height: 1.8; letter-spacing: .07em;
  color: var(--dimmer); text-transform: uppercase;
}
.money-src em { font-style: normal; color: var(--dim); text-transform: none; letter-spacing: .02em; }
.money-src:hover { color: var(--text); }
.money-src i { display: inline-block; width: 8px; height: 8px; background: var(--tint); margin-right: 7px; }
.money-a { max-width: 66ch; }
.money-a p { font-size: 1rem; }
.money-more { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--dimmer) !important; text-transform: uppercase; margin-top: 20px !important; }
.money-more a { color: var(--dim); }
.money-more a:hover { color: var(--text); }

/* -- questions ------------------------------------------------------------ */

.qa { border-top: 1px solid var(--rule-soft); max-width: 74ch; }
.qa details { border-bottom: 1px solid var(--rule-soft); }
.qa summary { padding: 20px 0; cursor: pointer; list-style: none; display: flex; gap: 16px; align-items: baseline; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--dimmer); }
.qa details[open] summary::after { content: "\2212"; }
.qa summary .mt { font-family: var(--display); font-size: 1.5rem; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; }
.qa details[open] summary .mt { color: var(--bright); }
.qa details .prose { padding: 0 0 24px; }

/* -- neighbouring volumes rail -------------------------------------------- */

.railnav { border-top: 1px solid var(--rule-soft); }
.railnav .wrap { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .railnav .wrap { grid-template-columns: 1fr 1fr; } }
.railnav a {
  display: grid; gap: 3px; padding: 24px 0; text-decoration: none;
  grid-template-columns: 10px minmax(0, 1fr); align-items: baseline; column-gap: 14px;
}
.railnav a i { grid-row: 1 / 3; width: 10px; height: 10px; background: var(--tint); align-self: center; }
.railnav a span { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dimmer); }
.railnav a b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.railnav a:hover b { color: var(--bright); }

/* -- basket lines, on the cart page --------------------------------------- */

.line { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
.line img { width: 56px; aspect-ratio: 1600/2560; object-fit: cover; background: var(--ink-2); }
.line .lt { font-family: var(--display); font-size: 1.12rem; line-height: 1.05; letter-spacing: .035em; text-transform: uppercase; }
.line .lf { font-family: var(--mono); font-size: .61rem; letter-spacing: .1em; color: var(--dimmer); text-transform: uppercase; margin-top: 3px; }
.line .lp { font-family: var(--mono); font-size: .79rem; text-align: right; }
.line .lp .in-set { color: var(--dimmer); font-size: .88em; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); margin-top: 8px; }
.qty button { background: none; border: 0; color: var(--dim); width: 26px; height: 26px; cursor: pointer; font-family: var(--mono); font-size: .9rem; line-height: 1; }
.qty button:hover { color: var(--text); }
.qty span { font-family: var(--mono); font-size: .73rem; min-width: 22px; text-align: center; }
.drop-line { background: none; border: 0; color: var(--dimmer); font-family: var(--mono); font-size: .61rem; letter-spacing: .1em; cursor: pointer; padding: 6px 0 0; text-transform: uppercase; }
.drop-line:hover { color: var(--text); }

.totals { display: grid; gap: 7px; font-family: var(--mono); font-size: .75rem; }
.totals .r { display: flex; justify-content: space-between; color: var(--dim); }
/* The ladder's cliff, said out loud. Tinted with the series' latest year so it
   reads as information rather than as a promotion — this file has no accent
   colour to spend on one. */
.cliff {
  font-family: var(--mono); font-size: .72rem; line-height: 1.6;
  color: var(--text); margin: 0;
  border-left: 2px solid #22D6EE; padding: 9px 0 9px 11px;
  background: rgba(34, 214, 238, .06);
}
.cliff strong { color: #7FE7F5; font-weight: 400; }
.cliff a { color: var(--text); }

.totals .r.grand { color: var(--text); font-size: .9rem; border-top: 1px solid var(--rule-soft); padding-top: 10px; margin-top: 3px; }
.zone-pick { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .69rem; color: var(--dimmer); }
.zone-pick select { flex: 1; background: var(--ink); color: var(--text); border: 1px solid var(--rule); font-family: var(--mono); font-size: .69rem; padding: 7px 8px; border-radius: 0; }
.empty { text-align: center; padding: 46px 10px; color: var(--dimmer); }
.empty p { font-family: var(--mono); font-size: .73rem; letter-spacing: .06em; line-height: 1.9; }
.note { font-family: var(--mono); font-size: .65rem; color: var(--dimmer); line-height: 1.7; margin: 0; }
.note.bad { color: #FF7A6B; }

/* -- steps ---------------------------------------------------------------- */

.step { display: grid; gap: 4px 26px; grid-template-columns: minmax(0,1fr); border-top: 1px solid var(--rule-soft); padding: 20px 0; }
@media (min-width: 720px) { .step { grid-template-columns: 10em minmax(0,1fr); align-items: baseline; } }
.step:last-child { border-bottom: 1px solid var(--rule-soft); }
.step .sk { font-family: var(--mono); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dimmer); }
.step p { margin: 0; color: var(--dim); font-size: .95rem; line-height: 1.7; max-width: 60ch; }
.step b { color: var(--text); font-weight: 400; }

/* -- footer --------------------------------------------------------------- */

.foot { border-top: 1px solid var(--rule-soft); padding: 52px 0 68px; }
.foot-in { display: grid; gap: 32px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 840px) { .foot-in { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot h3 { font-family: var(--mono); font-size: .63rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dimmer); margin: 0 0 14px; font-weight: 400; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { font-family: var(--mono); font-size: .73rem; color: var(--dim); text-decoration: none; letter-spacing: .04em; }
.foot a:hover { color: var(--text); }
.foot .colophon { font-family: var(--mono); font-size: .67rem; color: var(--dimmer); line-height: 1.9; max-width: 48ch; margin: 0; }

/* -- document pages ------------------------------------------------------- */

.page-head { padding: clamp(44px, 7vw, 82px) 0 0; }
.page-head h1 { font-size: clamp(2.5rem, 7vw, 4.8rem); }
.doc { padding: clamp(32px, 5vw, 54px) 0 clamp(60px, 8vw, 100px); }
.doc h2 { font-family: var(--display); font-size: 1.85rem; letter-spacing: .04em; margin: 44px 0 14px; text-transform: uppercase; font-weight: 400; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: var(--text-2); font-size: .97rem; line-height: 1.78; max-width: 66ch; }
.doc ul { padding-left: 1.1em; }
.doc li { margin-bottom: .5em; }
.doc table { border-collapse: collapse; width: 100%; max-width: 680px; margin: 18px 0; }
.doc th, .doc td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule-soft); font-family: var(--mono); font-size: .75rem; color: var(--dim); }
.doc th { color: var(--dimmer); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: .61rem; }

/* -- utility -------------------------------------------------------------- */

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack { display: grid; gap: clamp(26px, 4vw, 46px); }
.rowline { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* -- breadcrumbs ---------------------------------------------------------- */

.crumbs { border-bottom: 1px solid var(--rule-soft); }
.crumbs .wrap {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline;
  padding-top: 12px; padding-bottom: 12px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dimmer);
}
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs i { color: var(--rule); font-style: normal; }
.crumbs [aria-current] { color: var(--text); }

/* -- shop filters --------------------------------------------------------- */

.filters { margin-bottom: clamp(26px, 3vw, 40px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); background: none; border: 1px solid var(--rule-soft);
  padding: 8px 12px; cursor: pointer; border-radius: 0;
  display: inline-flex; gap: 8px; align-items: baseline;
}
.chip i { font-style: normal; color: var(--dimmer); font-size: .62rem; }
.chip:hover { border-color: var(--dim); color: var(--text); }
.chip.is-on { background: var(--paper); border-color: var(--paper); color: var(--paper-ink); }
.chip.is-on i { color: var(--paper-dim); }
.shelf .card[hidden] { display: none; }
.shelf--three { grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); }

/* -- tables: the ladder and the zones -------------------------------------- */

.ladder-wrap { max-width: 720px; }
.ladder, .zones { border-collapse: collapse; width: 100%; margin: 14px 0 18px; }
.ladder caption, .zones caption {
  text-align: left; color: var(--dim); font-size: .95rem; line-height: 1.65;
  padding-bottom: 14px; max-width: 62ch;
}
.ladder th, .ladder td, .zones th, .zones td {
  text-align: left; padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: .8rem; color: var(--text); font-weight: 400;
}
.ladder thead th, .zones thead th {
  color: var(--dimmer); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
}
.ladder tbody th, .zones tbody th { color: var(--dim); }
.ladder td { text-align: right; }
.ladder .set th, .ladder .set td { color: var(--bright); border-bottom: 0; }
/* The set row carries a second line saying what comes with it. It is a
   separate fact, not a continuation of the label, so it sits under it. */
.ladder .set th span {
  display: block; font-size: .88em; color: var(--dim); font-weight: 400;
  margin-top: 3px;
}
.zones tbody th { width: 15em; }

/* -- the cart page -------------------------------------------------------- */

.cart-grid { display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .cart-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.cart-side { display: grid; gap: 26px; }
@media (min-width: 900px) { .cart-side { position: sticky; top: 82px; } }
.cart-box { border: 1px solid var(--rule); background: var(--ink-1); padding: 20px; display: grid; gap: 12px; }
.cart-box select {
  background: var(--ink); color: var(--text); border: 1px solid var(--rule);
  font-family: var(--mono); font-size: .78rem; padding: 9px 10px; border-radius: 0; width: 100%;
}
.cart-side .ladder-wrap { max-width: none; }
.cart-side .ladder caption { font-size: .82rem; }
.cart-side .ladder th, .cart-side .ladder td { font-size: .72rem; padding: 8px 10px 8px 0; }
.btn.is-disabled { opacity: .4; pointer-events: none; }
.specs--tight > div { padding: 9px 11px; }
.specs--tight dd { font-size: .74rem; }