/* BELIEF SYSTEM storefront
   ------------------------------------------------------------------
   Authored, not templated. build_site.py writes the HTML around this
   file and never rewrites it.

   Two grounds, and the switch means something. INK is the jacket: the
   blue-black storm and the amber light source sampled off all thirty-one
   covers. PAPER is the reading light -- a cool, neutral page that gets out
   of the way of thirty-one jackets, none of which it should tint. The site
   argues on ink and sells on paper.

   Both grounds are cool on purpose. Every colour below is solved against
   its contrast floor rather than picked by eye; site_audit.py re-checks
   every pair on every run, so a nicer-looking value that fails is caught
   before it ships.
   ------------------------------------------------------------------ */

:root {
  /* Ink -- the jacket night. Cool, because the covers' shadows are. */
  --ink: #0A0A0E;
  --ink-raise: #13131B;
  --ink-sink: #060609;
  --ink-line: #262231;

  /* The light source, sampled from the covers' warm highlights. */
  --ember: #DC7F3A;
  --ember-hi: #F2B078;
  --ember-deep: #7E4318;

  /* The cool half of the same weather. Spans, rules, quiet data.
     Both values are set at the accessible floor rather than by eye: --slate
     carries the chart's dates as text (4.6:1) and --slate-dim draws the span
     bars, which are graphical objects the reader has to be able to see (3.1:1). */
  --slate: #737A94;
  --slate-dim: #585E7C;

  --stone: #C7CAD2;        /* body text on ink, 12.1:1 */
  --stone-dim: #878D9C;    /* muted label on ink, 6.0:1 */

  /* Paper -- the reading light. Neutral and slightly cool, so the covers
     are the only warm thing on the page. */
  --paper: #EDEFF2;
  --paper-sink: #E1E5EA;
  --paper-line: #C6CCD5;   /* decorative rules and container edges */
  --paper-edge: #6B7481;   /* borders of things you can click or type in, 4.1:1 */
  --print: #10131A;        /* body text on paper, 16.1:1 */
  --print-dim: #4E5563;    /* muted text on paper, 6.5:1 */

  --ok: #6E8F63;
  --warn: #A8451C;         /* accent on paper, 5.2:1 */

  /* Fraunces, not a Didone. The old face was Bodoni Moda pinned to `opsz 96`
     at every size, which is its display cut -- hairline thins, set at 20px
     on a dark ground. Fraunces carries a real stroke at small sizes and has
     an optical-size axis that is actually allowed to do its job below. */
  --display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --body: "Spectral", Georgia, "Times New Roman", serif;
  --data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(4rem, 8.5vw, 7rem);
  --radius: 2px;

  --lift: 0 18px 40px -22px rgb(0 0 0 / 0.75), 0 2px 6px -2px rgb(0 0 0 / 0.4);
}

/* ---------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--stone);
  font: 400 1.0625rem/1.68 var(--body);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  /* No text-rendering: optimizeLegibility. It forces kerning and ligature
     lookups over the whole document, and a volume page is now fifty kilobytes
     of text in two variable fonts. Browsers kern properly without it. */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ember); color: #140A02; padding: .7rem 1.1rem;
  font: 500 .75rem/1 var(--data); letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: .5rem; top: .5rem; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- ground */

.on-ink { background: var(--ink); color: var(--stone); }
.on-ink-raise { background: var(--ink-raise); color: var(--stone); }

/* `a { color: inherit }` in the reset already carries the ground colour into
   links. A bare `.on-paper a` rule here outranked `.wordmark` and painted the
   masthead near-black on the paper pages. */
.on-paper { background: var(--paper); color: var(--print); }

.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(2.75rem, 5vw, 4rem); }

.wrap { width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--pad) * 2), 72ch); margin-inline: auto; }
.wrap--mid { width: min(100% - (var(--pad) * 2), 60rem); margin-inline: auto; }

.rule-top { border-top: 1px solid var(--ink-line); }
.on-paper.rule-top { border-top-color: var(--paper-line); }

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

.eyebrow {
  margin: 0 0 1.4rem;
  font: 500 .6875rem/1.4 var(--data);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.on-paper .eyebrow { color: var(--warn); }

.display {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
}
/* Optical size follows the actual size, which is the whole point of the axis.
   Big type can afford finer strokes and tighter fit; small type cannot, and
   gets more weight instead. */
.display--xl {
  font-size: clamp(2.65rem, 6.4vw, 5.15rem);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.022em;
}
.display--l {
  font-size: clamp(2rem, 3.9vw, 3.15rem);
  font-variation-settings: "opsz" 96;
  font-weight: 550;
  letter-spacing: -.018em;
}
.display--m {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-variation-settings: "opsz" 48;
  font-weight: 600;
}
.display--s {
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  font-variation-settings: "opsz" 20;
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.006em;
}

.lede {
  margin: 1.5rem 0 0;
  max-width: 46ch;
  font-size: clamp(1.075rem, 1.55vw, 1.3rem);
  font-weight: 300;
  line-height: 1.58;
  color: var(--stone);
}
.on-paper .lede { color: var(--print-dim); }

.prose > p { margin: 0 0 1.15em; max-width: 68ch; }
.prose > p:last-child { margin-bottom: 0; }
.prose--dim > p { color: var(--print-dim); }

.num {
  font-family: var(--data);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.01em;
}

.label {
  font: 500 .6875rem/1.4 var(--data);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stone-dim);
}
.on-paper .label { color: var(--print-dim); }

/* --------------------------------------------------------------- button */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .82rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font: 500 .78rem/1 var(--data);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid { background: var(--ember); color: #150A02; border-color: var(--ember); }
.btn--solid:hover { background: var(--ember-hi); border-color: var(--ember-hi); }
.btn--ghost { border-color: var(--ink-line); color: var(--stone); }
.btn--ghost:hover { border-color: var(--ember); color: var(--ember); }
.on-paper .btn--ghost { border-color: var(--paper-edge); color: var(--print); }
.on-paper .btn--ghost:hover { border-color: var(--print); }
.btn--wide { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--ember); border-color: var(--ember); }

.btn__arrow { transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.textlink {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid rgb(220 127 58 / .4);
  padding-bottom: 1px;
}
.textlink:hover { border-bottom-color: currentColor; }
.on-paper .textlink { color: var(--warn); border-bottom-color: rgb(147 87 37 / .45); }

/* --------------------------------------------------------------- header */

.head {
  position: sticky; top: 0; z-index: 40;
  background: rgb(10 10 14 / .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
}
/* Wrapping, not a breakpoint. The masthead grew when it stopped being 11.8px
   mono, and at that point the five nav items pushed the whole page sideways
   between 660px and about 1050px -- a band nobody had thought to test. A
   header that wraps cannot overflow whatever length the nav grows to. */
.head__in {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem clamp(1rem, 3vw, 2.5rem);
  min-height: 60px;
  padding-block: .5rem;
}
/* The masthead was 11.8px of tracked-out uppercase mono, which is a texture
   rather than a word. It is now set in the display face at a size a reader
   can take in at a glance. */
.wordmark {
  display: flex; align-items: baseline;
  text-decoration: none; color: var(--stone); margin-right: auto;
}
.wordmark__name {
  font: 600 1.0625rem/1 var(--display);
  font-variation-settings: "opsz" 20;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-indent: .1em;
  white-space: nowrap;
}
.nav { display: flex; align-items: center; flex-wrap: wrap;
  gap: .4rem clamp(.9rem, 2.2vw, 1.9rem); }
.nav a {
  font: 400 .8125rem/1 var(--data);
  letter-spacing: .06em;
  white-space: nowrap;
  text-decoration: none; color: var(--stone-dim);
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--stone); border-bottom-color: var(--ember); }
.nav__cart { color: var(--stone) !important; }
.nav__count {
  display: inline-block; min-width: 1.35em; padding: .1em .35em;
  margin-left: .35rem;
  background: var(--ember); color: #150A02;
  font-variant-numeric: tabular-nums;
  text-align: center; border-radius: 999px; font-size: .72em;
}
.nav__count[data-empty="1"] { background: var(--ink-line); color: var(--stone-dim); }

/* Line breaks that shape a headline on a wide screen only get in the way of
   a narrow one, where the measure already does the work. */
.wide-only { display: inline; }

@media (max-width: 700px) {
  .wide-only { display: none; }
}

@media (max-width: 660px) {
  .wordmark__name { font-size: .9375rem; letter-spacing: .07em; text-indent: .07em; }
  .nav { gap: .85rem; }
  .nav a { font-size: .75rem; }
  .nav a[data-optional] { display: none; }
}

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

.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3rem); }
.hero__grid {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.hero .display--xl { max-width: 22ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero__aside {
  border-left: 1px solid var(--ink-line);
  padding-left: clamp(1rem, 2vw, 1.75rem);
}
.hero__aside dl { margin: 0; display: grid; gap: 1.1rem; }
.hero__aside dt { font: 500 .6875rem/1.4 var(--data); letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone-dim); }
.hero__aside dd { margin: .3rem 0 0; font-size: .95rem; line-height: 1.5; }
.hero__aside dd b { font-weight: 600; color: var(--ember); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__aside { border-left: 0; border-top: 1px solid var(--ink-line);
    padding-left: 0; padding-top: 1.5rem; }
  .hero__aside dl { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

/* -------------------------------------------------- THE ATTESTATION LINE
   The signature. Thirty-one rows, one per volume, on one true linear scale
   from 3600 BCE to now. The slate bar is what the volume narrates. The
   ember dot is the earliest secure attestation -- the ordering key, and
   the only date in the series that had to be defended. The gap between
   them is the series' whole argument, drawn.                            */

.chart { margin: 0; }
.chart__head {
  display: grid; gap: clamp(1rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: end;
  margin-bottom: 2rem;
}
.chart__key { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0; }
.chart__key div { display: flex; align-items: center; gap: .5rem;
  font: 400 .75rem/1.3 var(--data); color: var(--stone-dim); }
.chart__swatch { width: 22px; height: 3px; background: var(--slate-dim); flex: none; }
.chart__swatch--dot { width: 9px; height: 9px; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 0 3px rgb(220 127 58 / .16); }

.chart__body {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  align-items: start;
}

/* column geometry shared by the axis and every row */
.chart__plot { --gutter-n: 2.1rem; --gutter-t: 14.25rem; --gutter-d: 4.75rem; min-width: 0; }

/* The axis carries the same columns AND the same column gap as a row. Without
   the gap it drifts about a rem against the bars it is meant to measure, which
   in a chart about dates is not a cosmetic difference. */
.axis {
  display: grid;
  grid-template-columns: var(--gutter-n) var(--gutter-t) minmax(0, 1fr) var(--gutter-d);
  column-gap: .5rem;
  align-items: end;
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: .4rem; margin-bottom: .5rem;
}
.axis__track { position: relative; height: 1.1rem; grid-column: 3; }
.axis__tick {
  position: absolute; bottom: 0; transform: translateX(-50%);
  font: 400 .6875rem/1 var(--data); color: var(--stone-dim);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.axis__tick::after {
  content: ""; position: absolute; left: 50%; top: 1.35rem; width: 1px; height: 6px;
  background: var(--ink-line);
}
.axis__label { grid-column: 1 / 3; font: 500 .6875rem/1 var(--data);
  letter-spacing: .18em; text-transform: uppercase; color: var(--stone-dim); }
.axis__unit { grid-column: 4; text-align: right; font: 400 .6875rem/1 var(--data);
  color: var(--stone-dim); }

.rows { display: block; list-style: none; margin: 0; padding: 0; }

.row {
  display: grid;
  grid-template-columns: var(--gutter-n) var(--gutter-t) minmax(0, 1fr) var(--gutter-d);
  align-items: center;
  gap: 0 .5rem;
  min-height: 21px;
  text-decoration: none;
  color: var(--stone-dim);
  border-radius: var(--radius);
  transition: color .15s ease, background-color .15s ease;
}
.row:hover, .row:focus-visible, .row.is-live {
  color: var(--stone);
  background: rgb(220 127 58 / .06);
}
.row__n {
  font: 400 .6875rem/1 var(--data); font-variant-numeric: tabular-nums;
  color: var(--slate); text-align: right; padding-right: .55rem;
}
.row:hover .row__n, .row.is-live .row__n { color: var(--ember); }
.row__t {
  font: 400 .75rem/1.2 var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__track { position: relative; height: 100%; min-height: 21px; }
.row__bar {
  position: absolute; top: 50%; height: 2px; margin-top: -1px;
  left: var(--a); width: var(--w);
  background: var(--slate-dim);
  transform-origin: left center;
  transition: background-color .15s ease;
}
.row:hover .row__bar, .row.is-live .row__bar { background: var(--slate); }
.row__dot {
  position: absolute; top: 50%; left: var(--d);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--ember);
  transition: box-shadow .15s ease, transform .15s ease;
}
.row:hover .row__dot, .row.is-live .row__dot {
  transform: scale(1.28);
  box-shadow: 0 0 0 4px rgb(220 127 58 / .2);
}
.row__d {
  font: 400 .6875rem/1 var(--data); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--slate); white-space: nowrap;
}
.row:hover .row__d, .row.is-live .row__d { color: var(--stone); }

/* the readout beside the chart */
.readout {
  position: sticky; top: 84px;
  border: 1px solid var(--ink-line);
  background: var(--ink-raise);
  padding: 1.15rem;
}
.readout__cover {
  display: block; width: 100%; aspect-ratio: 1600 / 2560; object-fit: cover;
  background: var(--ink-sink); box-shadow: var(--lift);
}
.readout__n { margin: 1.05rem 0 .35rem; font: 400 .6875rem/1 var(--data);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }
.readout__t { margin: 0; font-family: var(--display); font-variation-settings: "opsz" 48;
  font-size: 1.4rem; font-weight: 500; line-height: 1.05; color: var(--stone); }
.readout__dates { margin: .55rem 0 0; display: grid; gap: .2rem; }
.readout__dates div { display: flex; justify-content: space-between; gap: 1rem;
  font: 400 .75rem/1.5 var(--data); color: var(--stone-dim); }
.readout__dates b { font-weight: 500; color: var(--stone); font-variant-numeric: tabular-nums; }
.readout__machine {
  margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--ink-line);
  font-size: .875rem; line-height: 1.5; color: var(--stone);
}
.readout__machine span { display: block; font: 500 .625rem/1.4 var(--data);
  letter-spacing: .18em; text-transform: uppercase; color: var(--stone-dim);
  margin-bottom: .3rem; }
.readout__go { margin-top: 1.1rem; }

@media (max-width: 940px) {
  .chart__head, .chart__body { grid-template-columns: minmax(0, 1fr); }
  .readout { display: none; }
  .chart__plot { --gutter-t: 8rem; --gutter-d: 4.25rem; }
}
/* Below 620px each row folds onto two lines and the bar moves under the
   title. The axis has to fold identically or the scale stops describing the
   bars underneath it, so it uses the same areas, and the crowded interior
   ticks drop out rather than overprinting each other. */
@media (max-width: 620px) {
  .chart__plot { --gutter-n: 1.7rem; --gutter-d: 4.75rem; }
  .axis {
    grid-template-columns: var(--gutter-n) minmax(0, 1fr) var(--gutter-d);
    grid-template-areas: "lab lab unit" ". trk trk";
    row-gap: .5rem;
  }
  .axis__label { grid-area: lab; }
  .axis__unit { grid-area: unit; }
  .axis__track { grid-area: trk; }
  .axis__tick--minor { display: none; }
  .row {
    grid-template-columns: var(--gutter-n) minmax(0, 1fr) var(--gutter-d);
    grid-template-areas: "n t d" ". k k";
    padding-block: .3rem; row-gap: .15rem;
  }
  .row__n { grid-area: n; }
  .row__t { grid-area: t; font-size: .8125rem; }
  .row__d { grid-area: d; }
  .row__track { grid-area: k; min-height: 9px; }
}

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

.movements { display: grid; gap: 1px; background: var(--paper-line);
  border: 1px solid var(--paper-line); grid-template-columns: repeat(5, 1fr); }
.movement { background: var(--paper); padding: 1.4rem 1.25rem 1.6rem; }
.movement__n {
  font-family: var(--display); font-style: italic; font-size: 1.5rem;
  font-variation-settings: "opsz" 24; color: var(--warn); line-height: 1;
}
.movement__t { margin: .7rem 0 .5rem; font-family: var(--display);
  font-variation-settings: "opsz" 24; font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.movement__d { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--print-dim); }

/* With art the tile becomes a plate and a caption: the picture goes edge to
   edge and the padding moves inside. Defined after .movement so the zeroed
   padding wins the tie. */
.movement--art { padding: 0; display: flex; flex-direction: column; }
.movement__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--ink-sink);
}
.movement__body { padding: 1.25rem 1.25rem 1.5rem; }

/* The same component also carries the four printing steps, which left an
   empty fifth cell in a five-column grid. */
.movements--four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) { .movements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .movements { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- the banners
   Full-bleed, so they sit outside .wrap and act as the seam between two
   grounds rather than as a picture dropped into a column. */

.banner { margin: 0; display: block; background: var(--ink-sink); }
.banner img {
  width: 100%;
  height: clamp(170px, 25vw, 360px);
  object-fit: cover;
  display: block;
}
.banner--tall img { height: clamp(200px, 30vw, 440px); }

/* ------------------------------------------------------- the five phrases */

.phrases { margin: 2.5rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--ink-line); }
.phrase {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .35rem clamp(1rem, 3vw, 2.5rem);
  padding: 1rem 0; border-bottom: 1px solid var(--ink-line);
}
.phrase dt {
  font-family: var(--display); font-style: italic; font-variation-settings: "opsz" 24;
  font-size: 1.15rem; color: var(--ember-hi);
}
.phrase dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--stone-dim); }
@media (max-width: 720px) { .phrase { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- the threads */

.threads { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; }
.thread {
  display: flex; flex-direction: column;
  border: 1px solid var(--paper-line); background: var(--paper);
  padding: 1.5rem;
}
/* Side by side, not fanned: an overlap looked like a shelf but cropped the
   titles, and a set page has to show what is in the set. */
.thread__fan { display: flex; gap: .4rem; margin-bottom: 1.35rem; }
.thread__fan img {
  width: 4.6rem; aspect-ratio: 1600 / 2560; object-fit: cover;
  box-shadow: 0 8px 18px -12px rgb(0 0 0 / .8);
}
.thread__t { margin: 0 0 .5rem; font-family: var(--display);
  font-variation-settings: "opsz" 32; font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.thread__line { margin: 0 0 1.15rem; font-size: .95rem; line-height: 1.55; color: var(--print-dim); }
.thread__vols { margin: 0 0 1.25rem; padding: 0; list-style: none;
  border-top: 1px solid var(--paper-line); }
.thread__vols a { text-decoration: none; border-bottom: 1px solid var(--paper-line); }
.thread__vols a:hover { border-bottom-color: var(--warn); color: var(--warn); }
.thread__vols li {
  display: flex; gap: .75rem; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid var(--paper-line);
  font-size: .9rem;
}
.thread__vols b { font: 400 .6875rem/1.4 var(--data); color: var(--warn);
  font-variant-numeric: tabular-nums; flex: none; }
.thread__vols span { margin-left: auto; font: 400 .75rem/1.4 var(--data);
  color: var(--print-dim); font-variant-numeric: tabular-nums; }
.thread__buy { margin-top: auto; display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; }
.thread__price { font: 500 1.1rem/1 var(--data); font-variant-numeric: tabular-nums; }
.thread__price s { color: var(--print-dim); font-weight: 400; font-size: .82em; margin-right: .4rem; }
@media (max-width: 860px) { .threads { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------- ledgers */

.ledger { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ledger caption {
  text-align: left; padding-bottom: .75rem;
  font: 500 .6875rem/1.4 var(--data); letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone-dim);
}
.on-paper .ledger caption { color: var(--print-dim); }
.ledger th, .ledger td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--ink-line); }
.on-paper .ledger th, .on-paper .ledger td { border-bottom-color: var(--paper-line); }
.ledger th { font: 500 .6875rem/1.4 var(--data); letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone-dim); font-weight: 500; }
.on-paper .ledger th { color: var(--print-dim); }
.ledger th:first-child, .ledger td:first-child { padding-left: 0; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; text-align: right; }
.ledger td.num, .ledger th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger tr:last-child td, .ledger tr:last-child th { border-bottom: 0; }
/* A table with a thead holds data, not labels: its row headers are content
   and read as sentences, not as shouted field names. */
.ledger--data th[scope="row"] {
  font: 400 .95rem/1.5 var(--body); letter-spacing: 0; text-transform: none;
  color: inherit;
}
.ledger tbody tr[data-live="1"] td { color: var(--ember); }
.on-paper .ledger tbody tr[data-live="1"] td { color: var(--warn); font-weight: 600; }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 880px) { .split, .split--wide-left { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ shop grid */

.shopbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--paper-line); margin-bottom: 2rem;
}
.chip {
  padding: .5rem .9rem; border: 1px solid var(--paper-edge); background: none;
  border-radius: 999px; cursor: pointer;
  font: 400 .75rem/1 var(--data); letter-spacing: .06em; color: var(--print-dim);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--print); color: var(--print); }
.chip[aria-pressed="true"] { background: var(--print); border-color: var(--print); color: var(--paper); }
.shopbar__count { margin-left: auto; font: 400 .75rem/1 var(--data); color: var(--print-dim);
  font-variant-numeric: tabular-nums; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); } }

.card { display: flex; flex-direction: column; }
.card[hidden] { display: none; }
.card__jacket {
  display: block; position: relative; background: var(--ink-sink);
  box-shadow: var(--lift); overflow: hidden;
}
.card__jacket img { width: 100%; aspect-ratio: 1600 / 2560; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.card__jacket:hover img { transform: scale(1.035); }
.card__n { margin: .95rem 0 .3rem; font: 400 .6875rem/1 var(--data);
  letter-spacing: .18em; text-transform: uppercase; color: var(--warn);
  font-variant-numeric: tabular-nums; }
.card__t { margin: 0; font-family: var(--display); font-variation-settings: "opsz" 32;
  font-size: 1.2rem; font-weight: 600; line-height: 1.08; }
.card__t a { text-decoration: none; }
.card__t a:hover { color: var(--warn); }
.card__span { margin: .35rem 0 0; font: 400 .75rem/1.4 var(--data); color: var(--print-dim);
  font-variant-numeric: tabular-nums; }
.card__machine { margin: .6rem 0 1rem; font-size: .875rem; line-height: 1.5;
  color: var(--print-dim); }
.card__machine b { display: block; font: 500 .625rem/1.4 var(--data);
  letter-spacing: .18em; text-transform: uppercase; color: var(--print-dim);
  opacity: .75; margin-bottom: .2rem; }
.card__buy { margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; gap: .75rem;
  padding-top: .85rem; border-top: 1px solid var(--paper-line); }
.card__price { font: 500 .95rem/1 var(--data); font-variant-numeric: tabular-nums; }
.card__price small { display: block; margin-top: .25rem; font-size: .72rem; font-weight: 400;
  color: var(--print-dim); letter-spacing: 0; }

.add {
  padding: .55rem .85rem; border: 1px solid var(--print); background: none;
  border-radius: var(--radius); cursor: pointer;
  font: 500 .7rem/1 var(--data); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .15s ease, color .15s ease;
}
.add:hover { background: var(--print); color: var(--paper); }
.add[data-state="added"] { background: var(--ok); border-color: var(--ok); color: #0B1408; }

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

.vol { display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .vol { grid-template-columns: minmax(0, 1fr); } }

.vol__aside { position: sticky; top: 84px; }
@media (max-width: 900px) { .vol__aside { position: static; } }
.vol__jacket { display: block; width: 100%; aspect-ratio: 1600 / 2560; object-fit: cover;
  background: var(--ink-sink); box-shadow: var(--lift); }

.buybox { margin-top: 1.5rem; border: 1px solid var(--paper-line); padding: 1.15rem; }
.buybox__price { display: flex; align-items: baseline; gap: .6rem; }
.buybox__price strong { font: 600 1.6rem/1 var(--data); font-variant-numeric: tabular-nums; }
.buybox__price span { font: 400 .75rem/1.4 var(--data); color: var(--print-dim); }
.buybox__note { margin: .5rem 0 1.1rem; font-size: .82rem; line-height: 1.5; color: var(--print-dim); }
.qty { display: flex; align-items: center; border: 1px solid var(--paper-edge);
  border-radius: var(--radius); width: max-content; }
.qty button { width: 2.25rem; height: 2.25rem; border: 0; background: none; cursor: pointer;
  font: 400 1rem/1 var(--data); color: var(--print-dim); }
.qty button:hover { color: var(--print); background: var(--paper-sink); }
.qty input { width: 2.75rem; height: 2.25rem; border: 0; background: none; text-align: center;
  font: 500 .9rem/1 var(--data); font-variant-numeric: tabular-nums; color: var(--print);
  -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }
.buybox__row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem; }
.check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  font-size: .875rem; line-height: 1.45; margin-bottom: 1.1rem; }
.check input { margin-top: .2rem; accent-color: var(--warn); width: 1rem; height: 1rem; flex: none; }
.check span small { display: block; color: var(--print-dim); font-size: .78rem; }
.buybox__ship { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--paper-line);
  font-size: .8rem; line-height: 1.5; color: var(--print-dim); }

.vol__head { border-bottom: 1px solid var(--paper-line); padding-bottom: 1.75rem; }
.vol__eyebrow { display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline;
  font: 400 .6875rem/1.4 var(--data); letter-spacing: .18em; text-transform: uppercase;
  color: var(--warn); margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.vol__eyebrow span { color: var(--print-dim); }

.vol__machine {
  margin: 1.35rem 0 0; max-width: 44ch;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.5; color: var(--print-dim);
}
.vol__machine span {
  display: block; margin-bottom: .4rem;
  font: 500 .625rem/1.4 var(--data); letter-spacing: .18em; text-transform: uppercase;
  color: var(--print-dim); opacity: .8;
}

.dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--paper-line); border: 1px solid var(--paper-line); margin: 1.75rem 0; }
.dates div { background: var(--paper); padding: 1rem 1.15rem; }
.dates dt { font: 500 .625rem/1.4 var(--data); letter-spacing: .18em;
  text-transform: uppercase; color: var(--print-dim); }
.dates dd { margin: .4rem 0 .35rem; font: 500 1.2rem/1 var(--data);
  font-variant-numeric: tabular-nums; }
.dates p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--print-dim); }
@media (max-width: 520px) { .dates { grid-template-columns: 1fr; } }

.pull {
  margin: 2rem 0; padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 2px solid var(--warn);
  font-family: var(--display); font-variation-settings: "opsz" 32;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.35; font-weight: 400;
}
.pull cite { display: block; margin-top: .9rem; font: 500 .625rem/1.4 var(--data);
  letter-spacing: .18em; text-transform: uppercase; color: var(--print-dim); font-style: normal; }

.vol__section { margin-top: 2.75rem; }
.vol__section > h2 {
  margin: 0 0 1.1rem; font: 500 .6875rem/1.4 var(--data); letter-spacing: .18em;
  text-transform: uppercase; color: var(--print-dim); font-weight: 500;
}
.section-lede { margin: -.4rem 0 1.6rem; max-width: 62ch; font-size: .95rem;
  line-height: 1.6; color: var(--print-dim); }

/* the argument in one sentence -- the thing the whole book is for */
.argument {
  margin: 0; max-width: 60ch;
  font-family: var(--display); font-variation-settings: "opsz" 40;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 400; line-height: 1.45;
}

/* ------------------------------------------------------------- contents */

.toc { display: grid; gap: 2rem; }
.toc__mv { border-top: 1px solid var(--paper-line); padding-top: 1.1rem; }
.toc__h { margin: 0 0 .35rem; font-family: var(--display);
  font-variation-settings: "opsz" 32; font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.toc__h span { display: block; font: 500 .625rem/1.4 var(--data); letter-spacing: .18em;
  text-transform: uppercase; color: var(--warn); margin-bottom: .3rem; }
.toc__note { margin: 0 0 1.1rem; max-width: 62ch; font-size: .875rem; line-height: 1.55;
  font-style: italic; color: var(--print-dim); }
.toc__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.toc__list li {
  display: grid; grid-template-columns: 2rem minmax(0, 13rem) minmax(0, 1fr);
  gap: .35rem 1rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid var(--paper-line);
}
.toc__list li:last-child { border-bottom: 0; }
.toc__n { font: 400 .6875rem/1.6 var(--data); font-variant-numeric: tabular-nums;
  color: var(--warn); }
.toc__t { font-weight: 600; font-size: .95rem; line-height: 1.4; }
.toc__i { font-size: .875rem; line-height: 1.55; color: var(--print-dim); }
@media (max-width: 760px) {
  .toc__list li { grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-areas: "n t" ". i"; }
  .toc__n { grid-area: n; } .toc__t { grid-area: t; } .toc__i { grid-area: i; }
}

/* --------------------------------------------------- the stated limits */

.limits { margin: 0; padding: 0; list-style: none; display: grid; gap: 0;
  border-top: 1px solid var(--paper-line); }
.limits li { padding: .95rem 0 .95rem 1.6rem; border-bottom: 1px solid var(--paper-line);
  font-size: .95rem; line-height: 1.6; color: var(--print-dim); position: relative; }
.limits li::before {
  content: ""; position: absolute; left: .1rem; top: 1.5rem;
  width: .5rem; height: 1px; background: var(--warn);
}
.limits b { color: var(--print); font-weight: 600; }

/* --------------------------------------------------- the bibliography */

/* Scroll shadows: on a narrow screen these tables scroll sideways, and a cut
   edge with no shadow reads as a cropped table rather than a scrollable one.
   The local-attachment gradients mask the shadow off whichever end is already
   at rest, so the cue only appears where there is more to see. */
.scroll-x {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--paper) 32%, rgb(237 230 217 / 0)) left center / 44px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 32%, rgb(237 230 217 / 0)) right center / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(22 18 15 / .16), rgb(22 18 15 / 0)) left center / 15px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(22 18 15 / .16), rgb(22 18 15 / 0)) right center / 15px 100% no-repeat scroll;
}

.src { overflow-x: auto; }
/* Fixed layout, or the auto algorithm hands the prose column two thirds of the
   table and squeezes the titles into a gutter. */
.src .ledger { table-layout: fixed; width: 100%; font-size: .875rem; }
.src .ledger td, .src .ledger th { padding: .55rem .8rem; vertical-align: top; }
.src__n { width: 2.75rem; text-align: right; color: var(--print-dim);
  font-variant-numeric: tabular-nums; }
.src__d { width: 8.5rem; }
.src__e { width: 32%; color: var(--print-dim); }
/* the last cell is prose, not a figure: undo the ledger's right alignment */
.ledger--data td.src__e, .ledger--data th.src__e { text-align: left; }
@media (max-width: 760px) {
  .src .ledger { min-width: 40rem; }
}

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

.qas { display: grid; gap: 0; border-top: 1px solid var(--paper-line); }
.on-ink .qas { border-top-color: var(--ink-line); }
.qa { padding: 1.2rem 0; border-bottom: 1px solid var(--paper-line); }
.on-ink .qa { border-bottom-color: var(--ink-line); }
.qa h3 { margin: 0 0 .5rem; font-family: var(--display);
  font-variation-settings: "opsz" 32; font-size: 1.15rem; font-weight: 600;
  line-height: 1.25; }
.qa p { margin: 0; max-width: 68ch; font-size: .95rem; line-height: 1.65;
  color: var(--print-dim); }
.on-ink .qa p { color: var(--stone-dim); }

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

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: 1.5rem; font: 400 .6875rem/1.4 var(--data); color: var(--print-dim); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--warn); }
.crumbs > * + *::before { content: "/"; margin-right: .5rem; opacity: .55; }
.crumbs [aria-current] { color: var(--print); }

/* ------------------------------------------------ the chronology page */

.stats { display: grid; gap: 1px; margin: 3rem 0 0;
  grid-template-columns: repeat(5, 1fr);
  background: var(--ink-line); border: 1px solid var(--ink-line); }
.stats div { background: var(--ink); padding: 1.1rem 1.2rem 1.25rem; }
.stats dt { font: 500 .625rem/1.4 var(--data); letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone-dim); }
.stats dd { margin: .45rem 0 0; font-family: var(--display);
  font-variation-settings: "opsz" 48; font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500; line-height: 1; color: var(--ember); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.callout { margin: 3rem 0; padding: 1.35rem 1.6rem;
  border: 1px solid var(--paper-line); border-left: 3px solid var(--warn);
  background: rgb(147 87 37 / .05); }
.callout h3 { margin: 0 0 .6rem; font: 500 .6875rem/1.4 var(--data);
  letter-spacing: .18em; text-transform: uppercase; color: var(--warn); }
.callout p { margin: 0; font-size: .95rem; line-height: 1.7; }
.callout__note { margin-top: .8rem !important; font-size: .85rem !important;
  color: var(--print-dim); }

.chr { overflow-x: auto; }
.chr__table { font-size: .9rem; }
/* The two date columns sit side by side and are the point of the table, so the
   sort key is the one that reads darker and neither one wraps. */
.chr__table td.num { white-space: nowrap; padding-left: 1.75rem; }
.chr__table tbody td:nth-child(3) { color: var(--print); font-weight: 500; }
.chr__table th[scope="row"] { font-weight: 600; }
.chr__table th[scope="row"] a { text-decoration: none;
  border-bottom: 1px solid var(--paper-line); }
.chr__table th[scope="row"] a:hover { color: var(--warn); border-bottom-color: var(--warn); }
.chr__n { width: 2.75rem; text-align: right; color: var(--print-dim);
  font-variant-numeric: tabular-nums; }
.chr__table tbody tr.is-undated .chr__n::after {
  content: "\00a0\2022"; color: var(--warn);
}
.chr__foot { margin: 1rem 0 0; font-size: .82rem; color: var(--print-dim); }
@media (max-width: 860px) { .chr__table { min-width: 46rem; } }

/* Five columns of figures do not fit a phone; the table scrolls inside its
   own box rather than pushing the page sideways. */
@media (max-width: 760px) { .zones { min-width: 34rem; } }

.repeats { margin: 2.5rem 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--ink-line); }
.repeats li { padding: 1.1rem 0; border-bottom: 1px solid var(--ink-line); }
.repeats b { display: block; font: 500 .6875rem/1.4 var(--data); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ember); margin-bottom: .45rem; }
.repeats span { display: block; margin-top: .45rem; font-size: .9rem; line-height: 1.6;
  color: var(--stone-dim); }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.tags li { padding: .3rem .65rem; border: 1px solid var(--paper-line); border-radius: 999px;
  font: 400 .72rem/1.3 var(--data); color: var(--print-dim); }

.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--paper-line); }
.pager a { text-decoration: none; max-width: 22rem; }
.pager b { display: block; font: 400 .6875rem/1.4 var(--data); letter-spacing: .18em;
  text-transform: uppercase; color: var(--print-dim); font-weight: 400; margin-bottom: .3rem; }
.pager span { font-family: var(--display); font-variation-settings: "opsz" 24;
  font-size: 1.1rem; font-weight: 600; }
.pager a:hover span { color: var(--warn); }
.pager a:last-child { text-align: right; margin-left: auto; }

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

.cartline {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) 7.5rem 7rem 1.75rem;
  gap: 1rem; align-items: start;
  padding: 1.25rem 0; border-bottom: 1px solid var(--paper-line);
}
.cartline img { width: 4rem; aspect-ratio: 1600 / 2560; object-fit: cover;
  background: var(--ink-sink); box-shadow: 0 6px 14px -10px rgb(0 0 0 / .7); }
.cartline__t { margin: 0; font-family: var(--display); font-variation-settings: "opsz" 24;
  font-size: 1.05rem; font-weight: 600; line-height: 1.15; }
.cartline__t a { text-decoration: none; }
.cartline__meta { margin: .3rem 0 .6rem; font: 400 .72rem/1.4 var(--data);
  color: var(--print-dim); font-variant-numeric: tabular-nums; }
/* Shown in place of the ebook checkbox once the cart holds a complete set,
   because at that point the digital editions are already paid for. */
.cartline__incl { margin: 0; font: 400 .72rem/1.4 var(--data);
  letter-spacing: .02em; color: var(--warn); }

.cartline__money { text-align: right; font: 500 .95rem/1.4 var(--data);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartline__money small { display: block; font-weight: 400; font-size: .72rem; color: var(--print-dim); }
.cartline__x { border: 0; background: none; cursor: pointer; color: var(--print-dim);
  font: 400 1.15rem/1 var(--data); padding: .5rem; margin: -.5rem; }
.cartline__x:hover { color: var(--warn); }
@media (max-width: 680px) {
  .cartline { grid-template-columns: 3.25rem minmax(0, 1fr) 1.75rem; }
  .cartline__qty { grid-column: 2; }
  .cartline__money { grid-column: 2 / 4; text-align: left; }
  .cartline__x { grid-column: 3; grid-row: 1; justify-self: end; }
}

.totals { border-top: 2px solid var(--print); padding-top: 1rem; margin-top: .5rem; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0;
  font: 400 .95rem/1.4 var(--data); font-variant-numeric: tabular-nums; }
.totals div span:first-child { font-family: var(--body); }
.totals div small { display: block; font-family: var(--body); font-size: .78rem;
  color: var(--print-dim); }
.totals .totals__grand { border-top: 1px solid var(--paper-line); margin-top: .5rem;
  padding-top: .85rem; font-size: 1.25rem; font-weight: 600; }

.nudge {
  margin: 1.25rem 0; padding: .9rem 1.1rem;
  border: 1px dashed var(--warn); background: rgb(147 87 37 / .07);
  font-size: .9rem; line-height: 1.5;
}
.nudge b { font-variant-numeric: tabular-nums; }

.empty { padding: clamp(3rem, 8vw, 5rem) 0; text-align: center; }
.empty p { max-width: 44ch; margin-inline: auto; color: var(--print-dim); }

/* ------------------------------------------------------------- checkout */

.form { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 .6875rem/1.4 var(--data); letter-spacing: .14em;
  text-transform: uppercase; color: var(--print-dim); }
.field input, .field select {
  padding: .7rem .8rem; border: 1px solid var(--paper-edge); border-radius: var(--radius);
  background: var(--paper); color: var(--print);
  font: 400 .95rem/1.3 var(--body);
}
.field input:focus, .field select:focus { border-color: var(--print); }
@media (max-width: 620px) { .form { grid-template-columns: 1fr; } }

.notice {
  border: 1px solid var(--warn); border-left-width: 3px;
  padding: 1.15rem 1.35rem; margin: 2rem 0;
  background: rgb(147 87 37 / .07);
}
.notice h2 { margin: 0 0 .5rem; font: 500 .6875rem/1.4 var(--data); letter-spacing: .18em;
  text-transform: uppercase; color: var(--warn); }
.notice p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.6; }
.notice p:last-child { margin-bottom: 0; }
.notice code { font: 400 .85em/1 var(--data); background: rgb(0 0 0 / .06); padding: .15em .35em; }

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

.foot { border-top: 1px solid var(--ink-line); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.foot__grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.foot h2 { margin: 0 0 .9rem; font: 500 .6875rem/1.4 var(--data); letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone-dim); font-weight: 500; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.foot a { font-size: .9rem; text-decoration: none; color: var(--stone-dim); }
.foot a:hover { color: var(--ember); }
.foot__blurb { font-size: .9rem; line-height: 1.6; color: var(--stone-dim); max-width: 38ch; margin: 0; }
.foot__base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-line);
  font: 400 .72rem/1.5 var(--data); color: var(--stone-dim); }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid > :first-child { grid-column: 1 / -1; } }

/* --------------------------------------------------------------- motion */

/* Entrances are pure CSS with animation-fill-mode: backwards, so the page
   never depends on a script to become visible. If animations do not run, every
   element is already in its finished state. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .55s cubic-bezier(.2,.7,.3,1) var(--delay, 0ms) backwards; }
  .row__bar { animation: draw .55s cubic-bezier(.2,.7,.3,1) var(--delay, 0ms) backwards; }
  .row__dot { animation: ignite .45s ease var(--delay, 0ms) backwards; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ignite {
  0% { opacity: 0; transform: scale(.2); }
  60% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- print */

@media print {
  .head, .foot, .btn, .add, .readout, .shopbar { display: none !important; }
  body { background: #fff; color: #000; }
}