/* ===========================================================================
   AI on the Job — storefront
   ---------------------------------------------------------------------------
   The design comes out of the books. Every jacket is one saturated colour field
   with a chrome trade emblem standing in it, and covers.json says the adjacent
   numbers are made unlike each other "because that is how they sit on a shelf".
   So the storefront IS the shelf: twenty-five colour fields butted together with
   two pixels of ground between them, each carrying its own ink and its own glow.
   Nothing else on the page is allowed to be that loud.

   Type: Archivo on the width axis for display (the jackets are set in Bahnschrift,
   which is DIN — signage, nameplates, engineering drawings), Newsreader for
   reading, DM Mono for anything that is data: catalogue numbers, prices, specs.
   =========================================================================== */

:root {
  /* White page, black type, and the covers doing the shouting. The accent is
     not chosen by taste: #F75605 is sampled from cover 019, the strongest of the
     twenty-five fields, and it is used as a GROUND with black type on it rather
     than as text — orange on white is 3.4:1, which clears the 3.0 floor for a
     graphic and fails the 4.5 floor for a word. */
  --bg:       #FFFFFF;
  --bg-2:     #F4F3EF;
  --bg-3:     #EAE7DF;
  --rule:     #E4E1D9;
  --rule-2:   #C3BFB3;
  --ink:      #0B0B0A;
  --ink-2:    #55534C;
  --ink-3:    #7B786F;
  --signal:   #F75605;
  --signal-ink: #C33F00;

  --display: "Archivo", "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --maxw: 1300px;
  --gut:  clamp(18px, 4vw, 48px);
  --band: clamp(48px, 6vw, 88px);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(16px, 0.6vw + 15px, 18px);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

::selection { background: var(--signal); color: var(--ink); }

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

/* --------------------------------------------------------------- primitives */

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

.mono {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Display type. Width is the variable being played, not just weight — the
   headline states a fact in a narrow heavy cut and answers it in a wide light
   one, which is the whole tone of the series in two lines. */
.d1, .d2, .d3 {
  font-family: var(--display);
  margin: 0;
  text-wrap: balance;
}

.d1 {
  font-size: clamp(2.25rem, 5.4vw, 4.3rem);
  line-height: 0.95;
  letter-spacing: -0.022em;
}

.d2 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.d3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1.15;
  letter-spacing: -0.008em;
}

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.5;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

.prose { max-width: 62ch; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ masthead */

.mast {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink);
}

.mast__in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 54px;
}

.mast__brand {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 0.9rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  white-space: nowrap;
}

.mast__imprint {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: -8px;
}

.mast__nav {
  margin-left: auto;
  display: flex;
  gap: clamp(12px, 2vw, 28px);
}

.mast__nav a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.mast__nav a:hover { color: var(--ink); border-bottom-color: var(--signal); }

@media (max-width: 760px) {
  .mast__imprint { display: none; }
  /* Four section links will not fit beside the wordmark on a phone, and
     wrapping them breaks the bar. Keep the shelf and the free reading; the
     footer and the breadcrumbs carry the rest. */
  .mast__nav { gap: 14px; }
  .mast__nav a:nth-child(n+3) { display: none; }
  .mast__brand { font-size: 0.8125rem; letter-spacing: 0.1em; }
}

@media (max-width: 380px) {
  .mast__nav a + a { display: none; }
}

/* ---------------------------------------------------------------- the finder */

.hero { padding-block: clamp(38px, 5.5vw, 68px) clamp(24px, 3vw, 36px); }

.hero__eyebrow { margin: 0 0 clamp(20px, 3vw, 34px); }

.hero__l1 { display: block; font-weight: 800; font-stretch: 100%; }

.hero__l2 {
  display: block;
  font-weight: 300;
  font-stretch: 125%;
  letter-spacing: -0.028em;
  margin-top: 0.06em;
}

.hero__sub {
  max-width: 46ch;
  margin: clamp(16px, 2vw, 22px) 0 0;
  color: var(--ink-2);
  font-size: 1.0625rem;
}

.finder { margin-top: clamp(26px, 3.4vw, 40px); max-width: 700px; }

.finder__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-ink);
  margin-bottom: 10px;
}

.finder__field {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 3px solid var(--signal);
  padding-bottom: 10px;
}

.finder__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 112%;
  font-size: clamp(1.375rem, 3vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.finder__input::placeholder { color: var(--ink-3); opacity: 1; }
.finder__input:focus { outline: none; }
.finder__field:focus-within { border-bottom-color: var(--ink); }

.finder__clear {
  flex: none;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  visibility: hidden;
}

.finder__clear:hover { color: var(--ink); }
.finder.is-active .finder__clear { visibility: visible; }

.finder__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  margin-top: 16px;
  min-height: 30px;
}

.finder__try {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 2px;
}

.term {
  background: none;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 5px 12px 6px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.term:hover { color: var(--ink); background: var(--signal); border-color: var(--signal); }

.finder__count {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.finder__count b { color: var(--ink); font-weight: 500; }
.finder__count em { color: var(--signal-ink); font-style: normal; }

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

.shelfbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  padding-block: 18px;
  border-top: 1px solid var(--rule);
}

.shelfbar__label { margin-right: auto; }

/* On a phone the three group names stack one per line and push the shelf off
   the screen. One scrolling row instead. */
@media (max-width: 720px) {
  .shelfbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .shelfbar::-webkit-scrollbar { display: none; }
  .shelfbar__label { display: none; }
  .filter { white-space: nowrap; border-color: var(--rule); }
}

.filter {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 13px 6px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--ink); border-color: var(--rule-2); }

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 2px;
  padding-bottom: clamp(28px, 4vw, 52px);
}

@media (min-width: 1060px) {
  .shelf { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 520px) {
  .shelf { grid-template-columns: repeat(2, 1fr); }
}

.chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 16px 18px;
  background: var(--field);
  color: var(--chip-ink);
  text-decoration: none;
  isolation: isolate;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

/* The glow each jacket throws, brought up behind the object on hover. */
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(58% 42% at 50% 62%, var(--glow) 0%, transparent 72%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chip:hover::before, .chip:focus-visible::before { opacity: 0.22; }

.chip__no {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  opacity: 0.72;
}

.chip__cover {
  width: 78%;
  margin: 14px auto 16px;
  aspect-ratio: 5 / 8;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(11, 11, 10, 0.16);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}

.chip:hover .chip__cover,
.chip:focus-visible .chip__cover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 38px rgba(11, 11, 10, 0.26);
}

.chip__title {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.0625rem;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-top: auto;
}

.chip__meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  opacity: 0.66;
  margin-top: 7px;
}

.chip.is-out { opacity: 0.24; filter: grayscale(1); }
.chip.is-out:hover { opacity: 0.55; }

/* A dimmed book is still a link. Tab to it and it comes back. */
.chip.is-out:focus-visible { opacity: 1; filter: none; }

.chip.is-hit { box-shadow: inset 0 0 0 3px var(--signal); }

.shelf__empty {
  grid-column: 1 / -1;
  padding: clamp(36px, 6vw, 64px) 0;
  border-top: 1px solid var(--rule);
}

.shelf__empty p { margin: 0 0 10px; max-width: 52ch; color: var(--ink-2); }

/* Stagger the shelf in on load: twenty-five books being put on a shelf, once. */
@media (prefers-reduced-motion: no-preference) {
  .chip { animation: stock 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  @keyframes stock {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ------------------------------------------------------------------- bands */

.band {
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}

.band--tight { padding-block: clamp(40px, 5vw, 64px); }

.band__head { margin-bottom: clamp(28px, 4vw, 46px); }
.band__head .mono { display: block; margin-bottom: 14px; }
.band__head p { margin: 16px 0 0; max-width: 58ch; color: var(--ink-2); }

/* ------------------------------------------------------- what's in the book */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.fact { background: var(--bg); padding: 26px 22px 28px; }

.fact__n {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  display: block;
}

.fact__l { margin: 12px 0 0; font-size: 0.95rem; color: var(--ink-2); }

.boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.box {
  display: flex;
  gap: 16px;
  padding: 20px 20px 22px;
  background: var(--bg-2);
  border-left: 3px solid var(--rule-2);
}

.box__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 2px;
}

.box__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2px 0 6px;
}

.box p { margin: 0; font-size: 0.95rem; color: var(--ink-2); line-height: 1.5; }

/* The one diagram the series has: context, then job, then format. */
.diagram {
  margin: clamp(28px, 4vw, 44px) 0 0;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--rule);
  padding: 0 0 4px;
  max-width: 620px;
}

/* The source drawing carries its own generous margins, so the figure adds none. */
.diagram img { aspect-ratio: 3 / 2; object-fit: cover; }

.diagram img { width: 100%; height: auto; display: block; }

.diagram figcaption {
  margin: 2px 16px 14px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 55%, var(--ink));
}

/* ------------------------------------------------------------- prompt proof */

.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

@media (min-width: 900px) {
  .proof { grid-template-columns: 300px minmax(0, 1fr); gap: 44px; align-items: start; }
}

.proof__note { margin: 14px 0 0; color: var(--ink-2); font-size: 0.95rem; }

.proof__nav { display: flex; gap: 8px; margin-top: 22px; }

.stepper {
  background: none;
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.8125rem;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.stepper:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); }

.promptbox {
  background: var(--bg-2);
  border-left: 4px solid color-mix(in srgb, var(--field, #F5C518) 62%, var(--ink));
  padding: clamp(22px, 3vw, 32px);
}

.promptbox__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 16px;
}

.promptbox__text {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 74ch;
  white-space: pre-wrap;
}

/* The square brackets are the product: they are where the reader types. */
.fill {
  color: var(--ink);
  background: color-mix(in srgb, var(--signal) 26%, var(--bg));
  padding: 1px 4px;
  border-radius: 2px;
}

.promptbox__foot {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* ----------------------------------------------------------------- formats */

.formats { border-top: 1px solid var(--rule); }

.fmt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

@media (min-width: 760px) {
  .fmt { grid-template-columns: 210px minmax(0, 1fr) auto auto; gap: 24px; }
}

.fmt__name {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}

.fmt__spec { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-2); }

.fmt__price {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.fmt__note { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }

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

.buy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 13px;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid var(--signal);
  text-wrap: balance;
  transition: background 0.15s, color 0.15s;
}

.buy:hover { background: transparent; color: var(--signal-ink); }

.buy--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-2);
}

.buy--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.buy__arrow { font-family: var(--mono); font-size: 0.875rem; }

/* ------------------------------------------------------------- book page */

.bookhero {
  background: var(--field);
  color: var(--chip-ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.bookhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(46% 52% at 22% 58%, var(--glow) 0%, transparent 68%);
  opacity: 0.2;
}

.bookhero__in {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
  padding-block: clamp(36px, 6vw, 76px) clamp(40px, 6vw, 72px);
}

@media (min-width: 860px) {
  .bookhero__in { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
}

.bookhero__cover {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 5 / 8;
  object-fit: cover;
  box-shadow: 0 26px 52px rgba(11, 11, 10, 0.2);
}

.bookhero__no { opacity: 0.72; color: inherit; }

.bookhero__pre {
  font-family: var(--display);
  font-weight: 300;
  font-stretch: 125%;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  letter-spacing: -0.01em;
  display: block;
  margin: 18px 0 2px;
  opacity: 0.82;
}

.bookhero__title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: clamp(2.1rem, 5.6vw, 4.1rem);
  line-height: 0.95;
  letter-spacing: -0.024em;
  margin: 0;
  text-wrap: balance;
}

.bookhero__lede {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: 50ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  font-style: italic;
  font-weight: 300;
}

.bookhero__buys { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3vw, 34px); }

.bookhero .buy {
  background: var(--chip-ink);
  color: var(--field);
  border-color: var(--chip-ink);
}

.bookhero .buy:hover { background: transparent; color: var(--chip-ink); }

.bookhero .buy--ghost {
  background: transparent;
  color: var(--chip-ink);
  border-color: color-mix(in srgb, var(--chip-ink) 42%, transparent);
}

.bookhero .buy--ghost:hover { background: var(--chip-ink); color: var(--field); }

.bookhero__prices {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  opacity: 0.78;
}

.backlink {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 14px 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  text-decoration: none;
}

.backlink:hover { opacity: 1; }

/* the hours figure */

.hours { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 56px); }

@media (min-width: 860px) {
  .hours { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}

.hours__fig {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  line-height: 0.88;
  letter-spacing: -0.032em;
  margin: 0;
  color: var(--ink);
  text-transform: lowercase;
}

.hours__cap { margin: 20px 0 0; color: var(--ink-2); max-width: 34ch; }

/* The Promise Page, reprinted: chapter, the writing it takes off your hands,
   and the hours back. The book's own table, in the book's own words. */
.promise {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.promise li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 88px;
  gap: 6px 16px;
  align-items: baseline;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--rule);
}

.promise__where {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.promise__what { color: var(--ink); font-size: 1.0125rem; line-height: 1.4; }

.promise__hrs {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .promise li { grid-template-columns: 1fr 88px; }
  .promise__where { grid-column: 1 / -1; }
}

/* Contents, illustrated.
   Every chapter in every book opens with a drawing, and those drawings are the
   most honest answer to "what is this book like". They are flat black line on
   white with one green accent, so the build multiplies them onto the paper
   colour and each one becomes a plate the card is made of, rather than a white
   rectangle punched into a dark page. */

.chapters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

@media (min-width: 1080px) { .chapters { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 460px) { .chapters { grid-template-columns: repeat(2, 1fr); } }

.chapter {
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px var(--rule);
}

.chapter__art { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.chapter__meta { display: block; padding: 4px 13px 16px; }

.chapter__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--bg) 52%, var(--ink));
  margin-bottom: 3px;
}

.chapter__t {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.chapter--bare { padding-top: 14px; }

.toc__n {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.toc__extra { margin: 22px 0 0; color: var(--ink-3); font-family: var(--mono); font-size: 0.75rem; }

/* the closing line */

.closer {
  font-family: var(--display);
  font-weight: 300;
  font-stretch: 118%;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

.closer--wide { max-width: 26ch; }

.closer__src { margin: 24px 0 0; }

/* more in this group */

.more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px;
}

/* -------------------------------------------------------------------- foot */

.foot {
  background: var(--ink);
  color: var(--bg);
  padding-block: clamp(44px, 5vw, 68px);
  margin-top: var(--band);
}

.foot__in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 760px) {
  .foot__in { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 44px; }
}

.foot h3 { margin: 0 0 14px; }

.foot p, .foot li { margin: 0 0 8px; color: var(--ink-3); font-size: 0.9375rem; }

.foot ul { list-style: none; margin: 0; padding: 0; }

.foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.foot a:hover { color: var(--ink); border-bottom-color: var(--signal); }

.foot__legal {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  line-height: 1.9;
}

/* --------------------------------------------------------------- utilities */

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 60;
  background: var(--signal);
  color: var(--ink);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-decoration: none;
  transition: top 0.15s;
}

.skip:focus { top: 12px; }

/* ===========================================================================
   The free pages.
   ---------------------------------------------------------------------------
   Everything above this line sells a book. Everything below it is the part of
   the book you can have: the opening essay, the prompt list, the glossary. So
   these pages are built to be *read* rather than scanned — a real measure, a
   real leading, and the field colour used as an accent rather than a ground.
   =========================================================================== */

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

.crumbs {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-block: 16px 0;
}

.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs__sep { padding: 0 8px; opacity: 0.5; }
.crumbs [aria-current] { color: var(--ink); }

/* The book pages put a coloured field directly under the masthead, so their
   breadcrumb sits on it and takes that book's ink. */
.bookhero .crumbs, .crumbs--field { color: inherit; }

/* --------------------------------------------------------------- read page */

.read__head { padding-block: clamp(30px, 5vw, 58px) clamp(20px, 3vw, 30px); }

.read__title {
  font-weight: 800;
  font-stretch: 100%;
  max-width: 20ch;
  margin-top: 14px;
}

.read__meta {
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  max-width: 78ch;
  line-height: 1.7;
}

.read__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 88px);
  padding-bottom: clamp(40px, 6vw, 72px);
  border-top: 3px solid color-mix(in srgb, var(--field, #F5C518) 70%, var(--ink));
  padding-top: clamp(26px, 4vw, 44px);
  margin-top: clamp(20px, 3vw, 32px);
}

@media (min-width: 1000px) {
  .read__body { grid-template-columns: minmax(0, 1fr) 244px; }
}

.read__prose p {
  max-width: 34em;
  margin: 0 0 1.15em;
  font-size: clamp(1.05rem, 0.35vw + 1rem, 1.1875rem);
  line-height: 1.72;
  color: var(--ink);
  text-wrap: pretty;
}

.read__prose em { color: var(--ink); }

/* The book itself, alongside the part of it you are reading. */
.readside { align-self: start; }

@media (min-width: 1000px) {
  .readside { position: sticky; top: 78px; }
}

.readside__card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 18px 20px;
  background: var(--bg-2);
  border-top: 3px solid color-mix(in srgb, var(--field, #F5C518) 70%, var(--ink));
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s ease;
}

.readside__card:hover { background: var(--bg-3); }

.readside__cover {
  width: 100%;
  aspect-ratio: 5 / 8;
  object-fit: cover;
  margin-bottom: 6px;
  box-shadow: 0 10px 24px rgba(11, 11, 10, 0.22);
}

.readside__kind { color: var(--ink-3); line-height: 1.6; }

.readside__title {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -0.008em;
}

.readside__meta { color: var(--ink-3); letter-spacing: 0.06em; }
.readside__go { color: var(--signal-ink); padding-top: 4px; }

.readside__alt {
  display: block;
  margin-top: 14px;
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule-2);
}

.readside__alt:hover { color: var(--ink); border-bottom-color: var(--signal); }

/* One drop cap, because this is a book. */
.read__prose p:first-child::first-letter {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 106%;
  font-size: 3.35em;
  line-height: 0.78;
  float: left;
  margin: 0.06em 0.09em 0 0;
  color: color-mix(in srgb, var(--field, #F5C518) 55%, var(--ink));
}

.read__end { padding-block: clamp(30px, 4vw, 46px) clamp(40px, 6vw, 80px); }

.read__cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--rule);
  padding-top: clamp(26px, 4vw, 40px);
}

@media (min-width: 720px) {
  .read__cta { grid-template-columns: 132px minmax(0, 1fr); gap: 34px; }
}

.read__cover {
  width: 132px;
  aspect-ratio: 5 / 8;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(11, 11, 10, 0.2);
}

.read__cta .d3 { margin: 10px 0 0; max-width: 46ch; font-weight: 400; font-stretch: 100%; }
.read__cta .mono { display: block; }

.read__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* Other openings, at the end of one. */
.alsoread {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 2px;
  margin-top: 22px;
}

.alsoread a {
  display: block;
  padding: 15px 16px 17px;
  background: var(--bg-2);
  border-left: 4px solid var(--rowfield);
  text-decoration: none;
  transition: background 0.2s ease;
}

.alsoread a:hover { background: var(--bg-3); }
.alsoread .mono { display: block; color: var(--ink-3); margin-bottom: 5px; }

.alsoread__t {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.alsoread a:hover .alsoread__t { color: var(--signal-ink); }

/* ------------------------------------------------------------ prompt lists */

.pgroup { margin-top: clamp(34px, 5vw, 54px); }

.pgroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--rule-2);
  margin: 0;
}

.pgroup__head .mono { color: var(--ink-3); }

.plist { list-style: none; margin: 0; padding: 0; }

.plist__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 9px 0 10px;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.plist__n {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.plist__t { font-size: 1rem; color: var(--ink); line-height: 1.35; }

.plist__text {
  grid-column: 2;
  margin: 10px 0 2px;
  padding: 16px 18px;
  background: var(--bg-2);
  border-left: 3px solid var(--signal);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 74ch;
}

.plist__item.is-free .plist__n { color: var(--signal-ink); }

.plist__item.is-free .plist__t::after {
  content: "free, in full";
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-ink);
  margin-left: 12px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .plist__item { grid-template-columns: 40px minmax(0, 1fr); }
  .plist__item.is-free .plist__t::after { display: block; margin: 4px 0 0; }
}

/* ---------------------------------------------------------------- glossary */

.gsec { margin: clamp(40px, 6vw, 70px) 0 0; }
.gsec__note { margin: 10px 0 0; }

.glossary { margin: 22px 0 0; border-top: 1px solid var(--rule); }

.gterm {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 28px;
  padding: 17px 0 18px;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 760px) {
  .gterm { grid-template-columns: 250px minmax(0, 1fr); }
}

.gterm__t {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.gterm__d { margin: 0; color: var(--ink-2); max-width: 62ch; line-height: 1.55; }

.gterm__src { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }
.gterm__src a { color: var(--ink-3); }
.gterm__src a:hover { color: var(--signal-ink); }

.gterm:target { background: var(--bg-2); box-shadow: inset 3px 0 0 var(--signal); }

/* --------------------------------------------------------------------- FAQ */

.faq { border-top: 1px solid var(--rule); max-width: 74ch; }

.qa { border-bottom: 1px solid var(--rule); }

.qa__q {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 19px 40px 20px 0;
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.qa__q::-webkit-details-marker { display: none; }

.qa__q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 17px;
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--ink-3);
  transition: transform 0.2s ease;
}

.qa[open] .qa__q::after { content: "\2212"; }
.qa__q:hover { color: var(--signal-ink); }

.qa__a { padding: 0 0 22px; }
.qa__a p { margin: 0; color: var(--ink-2); max-width: 66ch; }
.qa__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.qa__a a:hover { color: var(--signal-ink); }

/* ------------------------------------------------- what a book gives away */

.giveaway {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

@media (min-width: 760px) {
  .giveaway { grid-template-columns: repeat(2, 1fr); }
}

.give {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 28px;
  background: var(--bg-2);
  border-top: 3px solid color-mix(in srgb, var(--field, #F5C518) 70%, var(--ink));
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s ease;
}

.give:hover { background: var(--bg-3); }

.give__kind { color: var(--ink-3); }

.give__title {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.give__note { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; max-width: 40ch; }

.give__go { color: var(--signal-ink); margin-top: auto; padding-top: 12px; }

/* ---------------------------------------------------------- the free index */

.freelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.freerow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 20px;
  align-items: baseline;
  padding: 0 0 0 16px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.freerow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 5px;
  background: color-mix(in srgb, var(--field, #F5C518) 72%, var(--ink));
}

@media (min-width: 820px) {
  .freerow { grid-template-columns: minmax(0, 1fr) 110px 140px; }
}

.freerow__main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: baseline;
  padding: 16px 0 17px;
  text-decoration: none;
  color: inherit;
}

.freerow__no { color: var(--ink-3); }

.freerow__title {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.006em;
}

.freerow__main:hover .freerow__title { color: var(--signal-ink); }

.freerow__from { grid-column: 2; color: var(--ink-3); font-size: 0.9375rem; }

.freerow__meta { color: var(--ink-3); }

.freerow__alt {
  color: var(--ink-2);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  justify-self: start;
}

.freerow__alt:hover { color: var(--ink); border-bottom-color: var(--signal); }

@media (max-width: 819px) {
  .freerow { padding-bottom: 14px; }
  .freerow__meta, .freerow__alt { padding-left: 64px; }
}

.freemore {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(44px, 6vw, 76px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--rule);
}

@media (min-width: 760px) { .freemore { grid-template-columns: repeat(2, 1fr); } }

.freemore .prose { margin: 12px 0 18px; }

.foot__list { list-style: none; margin: 14px 0 0; padding: 0; text-transform: none; letter-spacing: 0.02em; }
.foot__list li { padding: 7px 0; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.foot__list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.foot__list a:hover { border-bottom-color: var(--signal); }

.freehint { margin: 26px 0 0; color: var(--ink-3); font-size: 0.9375rem; }
.freehint a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.freehint a:hover { color: var(--ink); border-bottom-color: var(--signal); }

/* A fact tile that is also a link. */
.fact--link { text-decoration: none; color: inherit; display: block; transition: background 0.2s ease; }
.fact--link:hover { background: var(--bg-2); }
.fact--link:hover .fact__n { color: var(--signal-ink); }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 2px;
}

/* ===========================================================================
   The storefront's own drawings.
   ---------------------------------------------------------------------------
   Eleven pictures for the places the books have no illustration for: the series
   hero, the picture that argues the position, a header for each free section.
   Same hand as the 300 chapter openers, because they are generated against the
   same style sheet, and re-laid on the same paper by the same build step. Every
   one is optional — a page whose drawing has not been generated simply has no
   figure there, which is why these rules never own any layout space.
   =========================================================================== */

.plate { margin: 0; background: var(--bg); }

.plate img {
  width: 100%;
  aspect-ratio: var(--ratio, 1 / 1);
  object-fit: cover;
  display: block;
}

.plate figcaption {
  padding: 11px 14px 14px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 52%, var(--ink));
  line-height: 1.5;
}

.plate--inline { margin-top: clamp(24px, 3vw, 34px); max-width: 260px; }
.plate--aside { max-width: 300px; margin-bottom: clamp(24px, 3vw, 34px); }
.plate--band { margin-bottom: clamp(26px, 3vw, 38px); max-width: 280px; }
.plate--empty { margin-top: 26px; max-width: 300px; }

/* The hero: the finder on the left, the series in one picture on the right. */

.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: end;
}

@media (min-width: 1040px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) 380px; }
}

.plate--hero { align-self: end; }

/* A section head with a drawing beside it. */

.headfig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 48px);
  align-items: start;
}

@media (min-width: 940px) {
  .headfig { grid-template-columns: minmax(0, 1fr) 280px; }
  .headfig .band__head { margin-bottom: 0; }
}

.headfig .plate { max-width: 320px; }

/* ===========================================================================
   The shop.
   ---------------------------------------------------------------------------
   AUTHORED BY HAND, with the rest of this file. build_site.py never rewrites it.
   Everything below is the commerce half: the shop list, the sets, the cart, and
   the two data tables that carry the series' own numbers.
   =========================================================================== */

.mast__cart {
  margin-left: 18px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid var(--rule-2);
  padding: 6px 11px 7px;
  white-space: nowrap;
}

.mast__cart:hover { color: var(--ink); border-color: var(--ink-3); }
.mast__cart.is-full { color: var(--ink); background: var(--signal); border-color: var(--signal); }

@media (max-width: 520px) { .mast__cart { margin-left: 12px; padding: 5px 8px 6px; } }

/* ---------------------------------------------------------------- the shop */

.shoplist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.srow {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px 20px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  transition: opacity 0.3s ease;
}

@media (min-width: 900px) {
  .srow { grid-template-columns: 74px minmax(0, 1fr) 300px; }
}

.srow.is-out { display: none; }

.srow__cover { display: block; box-shadow: 0 6px 18px rgba(11, 11, 10, 0.2); }
.srow__cover img { width: 100%; height: auto; display: block; }

.srow__no { display: block; color: var(--ink-3); margin-bottom: 6px; }

.srow__title {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 1.1875rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: block;
}

.srow__title:hover { color: var(--signal-ink); }
.srow__desc { margin: 8px 0 0; color: var(--ink-2); font-size: 0.9375rem; max-width: 62ch; }

.srow__fmts { list-style: none; margin: 12px 0 0; padding: 0; }

@media (min-width: 900px) { .srow__fmts { margin-top: 22px; } }

.srow__fmt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 7px 0 8px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}

.srow__fmt .mono { color: var(--ink); font-variant-numeric: tabular-nums; }

.mini {
  background: none;
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px 6px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.mini:hover, .mini.is-added {
  color: var(--ink);
  background: var(--signal);
  border-color: var(--signal);
}

.shelfmore { margin: 26px 0 0; }

.shelfmore a {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 3px;
}

.shelfmore a:hover { color: var(--ink); border-bottom-color: var(--signal); }

/* Add-to-cart shares the buy button, and says so when it has worked. */
.buy.is-added, .buy--ghost.is-added {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
}

.buy__price {
  font-family: var(--mono);
  font-size: 0.8125rem;
  opacity: 0.72;
  margin-left: 2px;
}

/* -------------------------------------------------------------- data tables */

.tablewrap { overflow-x: auto; margin-top: 22px; }

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.dtable caption { text-align: left; }

.dtable th, .dtable td {
  text-align: left;
  padding: 11px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.dtable thead th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  border-bottom-color: var(--rule-2);
  position: sticky;
  top: 54px;
  background: var(--bg);
}

.dtable tbody th { font-weight: 400; color: var(--ink); }
.dtable tbody th a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.dtable tbody th a:hover { color: var(--signal-ink); border-bottom-color: var(--signal); }
.dtable td { color: var(--ink-2); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }

/* the per-book summary above the hours table */

.hsum {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px;
}

.hsum a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 11px 13px 12px;
  background: var(--bg-2);
  border-left: 4px solid color-mix(in srgb, var(--field, #F5C518) 70%, var(--ink));
  text-decoration: none;
  transition: background 0.2s ease;
}

.hsum a:hover { background: var(--bg-3); }
.hsum .mono { color: var(--ink-3); }
.hsum__t { color: var(--ink); font-size: 0.9375rem; line-height: 1.2; }
.hsum__h { color: var(--signal-ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- sets */

.ladder { max-width: 560px; }

.sets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
  margin-top: clamp(30px, 4vw, 50px);
}

.setcard {
  background: var(--bg-2);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 3px solid var(--signal);
}

.setcard__n { color: var(--ink-3); }
.setcard__body { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }

.setcard__price { margin: 8px 0 6px; display: flex; align-items: baseline; gap: 12px; }

.setcard__was {
  color: var(--ink-3);
  text-decoration: line-through;
  font-size: 0.8125rem;
}

.setcard__now {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.setcard .buy { align-self: flex-start; }

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

.cartlist { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--rule); }

.cartrow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 34px;
  gap: 14px;
  align-items: baseline;
  padding: 15px 0 16px;
  border-bottom: 1px solid var(--rule);
}

.cartrow__no { color: var(--ink-3); }
.cartrow__t { color: var(--ink); }
.cartrow__t a { text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.cartrow__t a:hover { color: var(--signal-ink); }
.cartrow__f { display: block; color: var(--ink-3); margin-top: 4px; }
.cartrow__p { color: var(--ink); }

.cartrow__x {
  background: none;
  border: 0;
  color: var(--ink-3);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.cartrow__x:hover { color: var(--signal-ink); }

.carttotal { max-width: 420px; margin-top: 28px; }

.carttotal__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 9px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.carttotal__row--off { color: var(--signal-ink); }

.carttotal__row--big {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 1.25rem;
}

.carttotal__note { color: var(--ink-3); margin: 14px 0 20px; }
.carttotal .buy { margin-top: 6px; }

/* --------------------------------------------------------------- long prose */

.prose--wide { max-width: 68ch; color: var(--ink-2); }
.prose--wide h2 { margin: clamp(30px, 4vw, 48px) 0 12px; color: var(--ink); }
.prose--wide p { margin: 0 0 1.05em; }
.prose--wide ul { margin: 0 0 1.05em; padding-left: 1.2em; }
.prose--wide li { margin-bottom: 0.45em; }
.prose--wide a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose--wide a:hover { color: var(--signal-ink); }
.prose--wide em { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ===========================================================================
   The second ground.
   ---------------------------------------------------------------------------
   White is the page — every book, every word you read, every price. Black is
   the shop's own voice, and it gets exactly two places: the bar at the top and
   the block at the bottom. Nothing in between changes ground, so the colour
   that carries a page is always the book's own.
   =========================================================================== */

.mast { color: var(--bg); }
.mast__imprint { color: #8C877C; }
.mast__nav a { color: #C9C4B8; }
.mast__nav a:hover { color: var(--bg); border-bottom-color: var(--signal); }
.mast__nav a[aria-current] { color: var(--bg); border-bottom-color: var(--signal); }
.mast__cart { color: #C9C4B8; border-color: #45423B; }
.mast__cart:hover { color: var(--bg); border-color: #8C877C; }

.foot h2, .foot h3 { color: var(--bg); }
.foot p, .foot li { color: #A8A399; }
.foot a { color: #E6E2D8; border-bottom-color: #45423B; }
.foot a:hover { color: var(--bg); border-bottom-color: var(--signal); }
.foot__legal { color: #8C877C; border-top-color: #2A2822; }
.foot__list li { border-bottom-color: #2A2822; }
.foot__list a { color: var(--bg); }

/* The set note and the shop's own asides. */
.setnote {
  margin: 18px 0 0;
  padding: 14px 18px 15px;
  background: color-mix(in srgb, var(--signal) 16%, var(--bg));
  border-left: 4px solid var(--signal);
  max-width: 62ch;
  color: var(--ink);
}

/* A free prompt is marked with a chip, not with orange words. */
.plist__item.is-free .plist__t::after {
  color: var(--ink);
  background: var(--signal);
  padding: 2px 6px 3px;
  border-radius: 2px;
}

/* ===========================================================================
   Field guides.
   ---------------------------------------------------------------------------
   AUTHORED BY HAND, with the rest of this file.

   These pages answer a question rather than sell a book, so they are the one
   place on the site where the reading column comes first and the jacket comes
   last. The signature is the ledger: the six blocks of writing drawn to length,
   in the book's own field colour, largest first — the promise table turned into
   the shape of a week.
   =========================================================================== */

.ghead { padding-block: clamp(30px, 4.5vw, 56px) clamp(20px, 3vw, 30px); }
.ghead__eyebrow { margin: 0 0 clamp(16px, 2.4vw, 26px); }
.ghead__h { max-width: 16ch; }
.ghead .lede { margin-top: clamp(16px, 2vw, 22px); max-width: 54ch; }

.alsocalled {
  margin: 18px 0 0;
  max-width: 60ch;
  color: var(--ink-3);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* -------------------------------------------------- the paragraph to be quoted */

.answer {
  max-width: 68ch;
  margin: clamp(10px, 2vw, 18px) 0 0;
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 32px) clamp(24px, 3vw, 32px);
  background: var(--bg-2);
  border-left: 6px solid var(--signal);
}

.answer h2 {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-ink);
}

.answer p { margin: 0 0 0.9em; font-size: 1.0625rem; line-height: 1.58; }
.answer p:last-child { margin-bottom: 0; color: var(--ink-2); }
.answer b { font-weight: 600; }
.answer em { font-style: italic; }

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

.gsec { margin-top: clamp(46px, 6vw, 84px); }
.gsec > .d2 { margin-bottom: 14px; }
.gsec > .prose { margin: 0 0 clamp(20px, 2.6vw, 30px); }

/* ------------------------------------------------------- the ledger (signature) */

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  counter-reset: none;
}

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 18px;
  padding: 16px 0 17px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

@media (min-width: 760px) {
  .ledger__row {
    grid-template-columns: minmax(0, 22ch) minmax(120px, 1fr) 5.5rem 8rem;
    gap: 0 20px;
  }
}

.ledger__what {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -0.008em;
}

/* The bar is the whole idea: length is hours. It is a graphic, so the field
   colour is mixed toward the ink to clear 3:1 on paper — a pale jacket must
   still draw a visible bar. */
.ledger__bar {
  display: block;
  height: 12px;
  background: var(--bg-3);
  order: 3;
}

.ledger__bar i {
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--field, #F5C518) 74%, var(--ink));
}

@media (min-width: 760px) { .ledger__bar { order: 0; } }

.ledger__hrs {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 760px) { .ledger__hrs { text-align: right; } }

.ledger__where { color: var(--ink-3); white-space: nowrap; }

@media (max-width: 759px) {
  .ledger__row { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger__what { grid-column: 1; }
  .ledger__hrs { grid-column: 2; text-align: right; }
  .ledger__bar { grid-column: 1 / -1; }
  .ledger__where { grid-column: 1 / -1; }
}

.ledgercap { margin: 22px 0 0; max-width: 62ch; color: var(--ink-2); font-size: 0.9375rem; }

/* ------------------------------------------------------------ the eight groups */

.kinds {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.kind {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0 14px;
  border-bottom: 1px solid var(--rule);
}

.kind__n { color: var(--ink-3); }

.kind__name {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: 1.0625rem;
  letter-spacing: -0.006em;
}

.kind__c { color: var(--ink-3); white-space: nowrap; }

@media (max-width: 560px) {
  .kind { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; }
  .kind__n { grid-column: 1 / -1; }
}

/* --------------------------------------------------------- one prompt, in full */

.copies {
  display: grid;
  gap: 2px;
  max-width: 78ch;
}

.copythis {
  margin: 0;
  border: 1px solid var(--ink);
  max-width: 78ch;
}

/* The caption carries what the prompt is and what its block of writing is worth,
   because a prompt printed without that is just a paragraph. */
.copythis__cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 18px;
  align-items: baseline;
  padding: 11px 18px 13px;
  background: var(--ink);
  color: var(--bg);
}

.copythis__n { color: #C9C4B8; }

.copythis__t {
  grid-column: 1;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: 1rem;
  line-height: 1.2;
}

.copythis__h {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: var(--signal); /* on ink */
  white-space: nowrap;
}

@media (max-width: 560px) {
  .copythis__cap { grid-template-columns: minmax(0, 1fr); }
  .copythis__h { grid-row: auto; grid-column: 1; margin-top: 4px; }
}

.copythis blockquote { margin: 0; padding: 20px 22px 24px; }

.copythis p {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.72;
}

/* ------------------------------------------------------------- the four checks */

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
}

.check { background: var(--bg-2); padding: 20px 20px 22px; }

.check__l {
  margin: 0 0 8px;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--signal-ink);
}

.check p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }

/* ------------------------------------------------------------ the trade's words */

.gwords { margin: 0; border-top: 1px solid var(--rule); }

.gword {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 24px;
  padding: 15px 0 16px;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 760px) {
  .gword { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); }
}

.gword dt {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: 1rem;
}

.gword dd { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; max-width: 62ch; }

/* ----------------------------------------------------------------- the answers */

.qas { border-top: 1px solid var(--rule); max-width: 74ch; }

/* --------------------------------------------------------------- the book card */

.gbook__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
  background: var(--bg-2);
  padding: clamp(22px, 3vw, 32px);
}

@media (min-width: 680px) {
  .gbook__in { grid-template-columns: 190px minmax(0, 1fr); }
}

.gbook__cov { display: block; max-width: 190px; box-shadow: 0 10px 30px rgba(11, 11, 10, 0.2); }
.gbook__in h3 { margin: 0 0 10px; }
.gbook__in h3 a { text-decoration: none; }
.gbook__in h3 a:hover { color: var(--signal-ink); }
.gbook__in .prose { margin: 0 0 18px; }

/* ------------------------------------------------------------- the other trades */

.gnexts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px;
}

.gnext {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 16px 18px;
  background: var(--bg-2);
  text-decoration: none;
  transition: background 0.2s ease;
}

.gnext:hover { background: var(--bg-3); }

.gnext__t {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: 1rem;
  line-height: 1.2;
}

.gnext__g { color: var(--ink-3); }

/* ------------------------------------------------------------------ the hub */

.phead { padding-block: clamp(34px, 5vw, 66px) clamp(18px, 2.4vw, 26px); }
.phead .lede { margin-top: clamp(16px, 2vw, 24px); max-width: 56ch; }

.gband { margin-top: clamp(38px, 5vw, 64px); }

.gband__h {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}

.gcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 2px;
}

.gcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  background: var(--bg-2);
  border-left: 5px solid color-mix(in srgb, var(--field, #F5C518) 78%, var(--ink));
  text-decoration: none;
  transition: background 0.2s ease;
}

.gcard:hover { background: var(--bg-3); }
.gcard__no { color: var(--ink-3); }

.gcard__t {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -0.008em;
}

.gcard__d {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
  flex: 1;
}

.gcard__h { color: var(--ink-3); margin-top: 4px; }