/* ===========================================================================
   FOR CITY PEOPLE -- the storefront stylesheet.

   AUTHORED BY HAND. build_site.py never writes this file; it is one of exactly
   two under site/ that survive a build (the other is assets/js/store.js).

   Palette: measured, not chosen. --ink is the navy title band that runs across
   all ten printed jackets; the ten --vol-N accents are each cover eyebrow band
   sampled pixel by pixel by _tools/site_assets.py, which also solves the
   darkened -ink variant every accent needs to clear 4.5:1 on paper. The page
   carries them per element as --c / --ci / --cf, so a redrawn cover reaches the
   site by rerunning site_assets.py and nothing here changes.

   Three type roles: Big Shoulders Display is the cover shouting, IBM Plex Sans
   is the instruction, IBM Plex Mono is the brake and carries every figure with
   tabular numerals.
   ======================================================================== */

:root {
  /* ground — the navy title band that runs across all ten covers */
  --ink:        #04122F;
  --ink-deep:   #010A1C;
  --ink-soft:   #0B2049;
  --ink-line:   rgba(227, 223, 209, .16);

  /* paper — pulp stock, cool and grey-green, not cream */
  --stock:      #E3DFD1;
  --stock-hi:   #F4F1E6;
  --stock-dim:  #B9B5A6;
  --ink-dim:    #57544B;   /* the dim voice ON PAPER; 4.5:1 on --stock-hi */

  /* two accents, used with restraint */
  --signal:     #D8231A;   /* safety register + the one primary action */
  --gerald:     #FDB604;   /* star ratings, small marks, the raccoon */

  /* the ten volume accents, sampled from each printed cover eyebrow band */
  --vol-1:  #4A7C12;  --vol-2:  #047A96;  --vol-3:  #F0AD04;  --vol-4:  #EC4A02;
  --vol-5:  #C41A0C;  --vol-6:  #FA4E02;  --vol-7:  #63389B;  --vol-8:  #7A3A08;
  --vol-9:  #1A5191;  --vol-10: #FDB604;

  --display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --gut:  clamp(1.25rem, 4vw, 3rem);
  --maxw: 1240px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--stock);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* width/height attributes are on every img for layout stability, so height
   must be released or the intrinsic attribute wins over the fluid width. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--gerald); outline-offset: 3px; }

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

.display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: .005em;
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  margin: 0;
}

.dagger { color: var(--gerald); font-weight: 600; }

/* ---- layout -------------------------------------------------------------- */

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

.section { padding-block: clamp(3.5rem, 9vw, 7rem); }

.section-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section-head .eyebrow { color: var(--stock-dim); margin-bottom: .7rem; }
.section-head h2 { font-size: clamp(2.4rem, 6.5vw, 4.6rem); }
.section-head p { max-width: 56ch; margin: 1.1rem 0 0; color: rgba(227, 223, 209, .74); }

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

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(1, 10, 28, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
}
.masthead > .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 58px; }

.wordmark {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.32rem; letter-spacing: .01em; text-decoration: none; line-height: 1;
}
.wordmark span { color: var(--gerald); }

.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.masthead nav a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; text-decoration: none; color: rgba(227,223,209,.72);
}
.masthead nav a:hover { color: var(--stock); }
@media (max-width: 760px) { .masthead nav a.opt { display: none; } }

.cart-btn,
.masthead nav a.cart-btn {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink); background: var(--stock);
  border: 0; padding: .55rem .85rem; cursor: pointer; font-weight: 600;
}
.cart-btn:hover, .masthead nav a.cart-btn:hover { background: #fff; color: var(--ink); }
.cart-btn b { font-variant-numeric: tabular-nums; }

/* ---- hero: THE SHELF ----------------------------------------------------- */

.hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: 0; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(2.9rem, 5.6vw, 5.1rem); margin-block: .9rem .4rem; }
.hero h1 em { display: block; font-style: normal; color: var(--gerald); }

.promise {
  border-left: 3px solid var(--signal);
  padding: .1rem 0 .1rem 1.15rem;
  margin: 1.7rem 0 0;
  max-width: 46ch;
}
.promise p { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.promise cite {
  display: block; margin-top: .65rem; font-style: normal;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--stock-dim);
}

.hero-spec {
  margin: 1.8rem 0 0; font-family: var(--mono); font-size: .77rem;
  line-height: 1.85; color: rgba(227,223,209,.72);
}

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.btn {
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: .95rem 1.4rem; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: .55rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: #ef2c22; }
.btn-ghost { background: transparent; color: var(--stock); border-color: rgba(227,223,209,.38); }
.btn-ghost:hover { border-color: var(--stock); background: rgba(227,223,209,.07); }
.btn-paper { background: var(--ink); color: var(--stock); }
.btn-paper:hover { background: var(--ink-soft); }

/* the shelf */

.shelf-cap {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--stock-dim);
  display: flex; justify-content: space-between; margin-bottom: .8rem;
}

.shelf { display: flex; gap: 3px; height: clamp(290px, 34vw, 400px); align-items: flex-end; }

.spine {
  flex: 1 1 0; min-width: 0; position: relative; display: block;
  height: 100%; border: 0; padding: 0; cursor: pointer;
  background: var(--c); color: var(--cf, #fff); text-decoration: none;
  transition: flex-grow .42s cubic-bezier(.22,.85,.3,1);
  overflow: hidden;
  /* the sliver of page block along the top edge, so it reads as a printed spine */
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 5px 0 rgba(0,0,0,.22);
}
.spine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(255,255,255,.1) 22%,
                                     rgba(0,0,0,0) 55%, rgba(0,0,0,.32));
}
/* :focus as well as :focus-visible -- a keyboard user tabbing the shelf must
   see the same thing a pointer user sees. */
.spine:hover, .spine:focus, .spine:focus-visible { flex-grow: 7; }

.spine-label {
  position: absolute; inset-inline: 0; top: 0; bottom: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .16s;
}
.spine-label span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(.88rem, 1.5vw, 1.1rem); letter-spacing: .04em;
  white-space: nowrap;
}
.spine-foot {
  position: absolute; inset-inline: 0; bottom: 0; height: 44px;
  background: var(--ink-deep); color: var(--stock); display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  border-top: 2px solid rgba(255,255,255,.28); transition: opacity .16s;
}
.spine img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  opacity: 0; transition: opacity .3s ease .08s;
}
.spine:hover img, .spine:focus img, .spine:focus-visible img { opacity: 1; }
.spine:hover .spine-label, .spine:focus .spine-label, .spine:focus-visible .spine-label,
.spine:hover .spine-foot,  .spine:focus .spine-foot,  .spine:focus-visible .spine-foot { opacity: 0; }

.shelf-board {
  height: 9px; background: linear-gradient(180deg, #0a1c40, #010A1C);
  border-top: 1px solid rgba(227,223,209,.28);
  box-shadow: 0 16px 26px -12px rgba(0,0,0,.85);
}
.shelf-note {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--stock-dim); margin: 1rem 0 0;
}

/* mobile: a shelf you push along, because the accordion needs a pointer */
.rack { display: none; }
@media (max-width: 760px) {
  .shelf, .shelf-board, .shelf-cap { display: none; }
  .rack {
    display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 1rem; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .rack::-webkit-scrollbar { display: none; }
  .rack a { flex: 0 0 42%; scroll-snap-align: start; }
  .rack img { border-top: 4px solid var(--c); }
}

@media (prefers-reduced-motion: reduce) {
  .spine, .spine img { transition: none; }
}

/* ---- the arithmetic ------------------------------------------------------ */

.ledger-sec { background: var(--ink-deep); }
.ledger-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 880px) { .ledger-grid { grid-template-columns: 1fr; } }

.ledger-grid h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.ledger-grid .said { margin: 1.15rem 0 0; max-width: 40ch; color: rgba(227,223,209,.72); font-size: .96rem; }

.tally { font-family: var(--mono); font-size: clamp(.76rem, 1.5vw, .9rem); margin: 0; border-top: 1px solid var(--ink-line); }
.tally div { display: flex; align-items: baseline; gap: .6rem; padding: .62rem 0; border-bottom: 1px solid var(--ink-line); }
.tally dt { flex: 0 0 auto; letter-spacing: .07em; text-transform: uppercase; color: rgba(227,223,209,.78); }
.tally .dots { flex: 1 1 auto; border-bottom: 1px dotted rgba(227,223,209,.3); transform: translateY(-.28em); min-width: 1.5rem; }
.tally dd { flex: 0 0 auto; margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.12em; color: var(--stock); }
.tally div.nil dd { color: var(--gerald); }

/* ---- proof: the interior art --------------------------------------------- */

.proof-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center;
}
@media (max-width: 880px) { .proof-grid { grid-template-columns: 1fr; } }

.plate { background: var(--stock-hi); padding: 1rem 1rem .6rem; margin: 0; }
.plate img { mix-blend-mode: multiply; }
.plate figcaption {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: #57544b; padding: .7rem .15rem .25rem;
  border-top: 1px solid rgba(0,0,0,.14); margin-top: .55rem;
}
.plate-stack { display: grid; gap: 1rem; }

/* ---- the store ----------------------------------------------------------- */

.store-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem; }
.store-head .section-head { flex: 1 1 22rem; margin-bottom: 0; }

.fmt { display: inline-flex; border: 1px solid rgba(227,223,209,.34); padding: 3px; }
.fmt button {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; background: none; border: 0; color: rgba(227,223,209,.72);
  padding: .6rem .95rem; cursor: pointer; white-space: nowrap;
}
.fmt button[aria-pressed="true"] { background: var(--stock); color: var(--ink); font-weight: 600; }

.books {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
  margin-top: clamp(1.75rem, 4vw, 3rem);
  list-style: none; padding: 0;
}

.book {
  background: var(--stock); color: var(--ink);
  display: flex; flex-direction: column;
  border-top: 5px solid var(--c);
  scroll-margin-top: 90px;
}
.book-top { display: flex; gap: 1rem; padding: 1.1rem 1.1rem 0; align-items: flex-start; }
.book-top img {
  width: 96px; flex: 0 0 96px; height: auto; aspect-ratio: 600 / 1067;
  box-shadow: 0 3px 12px rgba(0,0,0,.3);
}
.book-id { font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ci, var(--c)); font-weight: 600; }
.book h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: .93; margin: .4rem 0 .35rem; }
.book .sub { margin: 0; font-size: .79rem; line-height: 1.4; color: #4c4a42; font-style: italic; }
.book .hook { margin: .95rem 1.1rem 0; font-size: .92rem; line-height: 1.5; font-weight: 500; }

.book details { margin: .85rem 1.1rem 0; border-top: 1px solid rgba(4,18,47,.16); }
.book summary {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .7rem 0; cursor: pointer; color: #4c4a42; list-style: none;
}
.book summary::-webkit-details-marker { display: none; }
.book summary::after { content: " +"; color: var(--ci, var(--c)); font-weight: 700; }
.book details[open] summary::after { content: " \2013"; }
.book details ul { margin: 0 0 .9rem; padding-left: 1.05rem; font-size: .86rem; line-height: 1.5; }
.book details li { margin-bottom: .3rem; }
.book blockquote { margin: 0 0 .9rem; font-size: .83rem; font-style: italic; color: #4c4a42; border-left: 2px solid var(--ci, var(--c)); padding-left: .7rem; }
.book blockquote span {
  display: block; font-style: normal; font-family: var(--mono); font-size: .63rem;
  letter-spacing: .09em; text-transform: uppercase; margin-top: .25rem; color: #6d6a60;
}

.book-buy { margin-top: auto; display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem 1.1rem; }
.price { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.book-buy .btn { margin-left: auto; padding: .8rem 1.15rem; }

/* ---- the set ------------------------------------------------------------- */

.set-sec { background: var(--ink-deep); }
.set-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .set-grid { grid-template-columns: 1fr; } }

.set-covers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.set-covers img { box-shadow: 0 4px 14px rgba(0,0,0,.45); }

.set-grid h2 { font-size: clamp(2.3rem, 5.5vw, 3.9rem); }
.set-grid .sleeve { margin: 1.3rem 0 0; font-size: 1rem; line-height: 1.6; color: rgba(227,223,209,.82); max-width: 46ch; }
.set-grid .sleeve strong { color: var(--stock); }
.set-price { display: flex; align-items: baseline; gap: .8rem; margin-top: 1.6rem; font-family: var(--display); font-weight: 800; }
.set-price b { font-size: 3.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.set-price s { font-size: 1.3rem; color: var(--stock-dim); font-weight: 600; }
.set-price em {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .12em; font-style: normal;
  text-transform: uppercase; color: var(--gerald); font-weight: 500;
}

/* What the set carries beyond the paper. A tick per line, because the point of
   the set is that it is more than ten of the thing next to it on the shop page. */
.set-includes { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.set-includes li {
  position: relative; padding-left: 1.5rem; font-size: .93rem; line-height: 1.45;
  color: var(--stock);
}
.set-includes li::before {
  content: "+"; position: absolute; left: 0; top: -.05em;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--gerald);
}
.set-includes span { color: var(--stock-dim); font-size: .85em; }

/* ---- doreen -------------------------------------------------------------- */

.doreen-sec { padding-block: 0; }
.doreen {
  background: var(--gerald); color: #21170b;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
}
@media (max-width: 700px) { .doreen { grid-template-columns: 1fr; } .doreen .who small { margin-bottom: .4rem; } }
.doreen .who {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: .9; margin: 0;
}
.doreen .who small {
  display: block; font-family: var(--mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .12em; line-height: 1.7; margin-top: .75rem; opacity: .72;
  text-transform: uppercase;
}
.doreen p { margin: 0; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.5; max-width: 60ch; }
.doreen p + p { margin-top: .8rem; font-size: .87rem; opacity: .82; }

/* ---- THE BRAKE ----------------------------------------------------------- */
/* Where this site stops joking. No display face past this rule and no colour
   but one. The books do exactly this at every step that can hurt you.        */

.brake { background: var(--stock-hi); color: #1b1a16; font-family: var(--mono); }
.brake .wrap { max-width: 900px; }

.brake-cut {
  border-top: 2px solid #1b1a16; padding-top: 1.1rem; margin-bottom: 2.4rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .67rem; letter-spacing: .16em; text-transform: uppercase;
}
.brake-cut b { color: var(--signal); font-weight: 600; }

.brake h2 { font-family: var(--mono); font-weight: 600; font-size: 1.02rem; letter-spacing: .03em; margin: 0 0 1.9rem; max-width: 58ch; line-height: 1.55; }

.brake dl { margin: 0; font-size: .83rem; line-height: 1.7; }
.brake dt {
  border-top: 1px solid rgba(27,26,22,.2); padding-top: .9rem; margin-top: 1.5rem;
  font-weight: 600; letter-spacing: .13em; text-transform: uppercase; font-size: .69rem;
}
.brake dd { margin: .5rem 0 0; max-width: 74ch; color: #3b3934; }
.brake dd + dd { margin-top: .45rem; }
.brake dd b { color: #1b1a16; }
.brake .warn { color: var(--signal); font-weight: 500; }

.brake-tail {
  margin-top: 2.6rem; border-top: 2px solid #1b1a16; padding-top: 1.1rem;
  font-size: .69rem; letter-spacing: .09em; color: #57544b; line-height: 1.7;
}

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

.foot { background: var(--ink-deep); padding-block: clamp(2.5rem, 6vw, 4rem); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot .bio { font-size: .86rem; line-height: 1.65; color: rgba(227,223,209,.7); max-width: 40ch; }
.foot h4 { font-family: var(--mono); font-size: .67rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stock-dim); margin: 0 0 .9rem; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; font-size: .86rem; line-height: 2; }
.foot a { color: rgba(227,223,209,.78); text-decoration: none; }
.foot a:hover { color: var(--stock); text-decoration: underline; }
.foot .rule {
  grid-column: 1 / -1; border-top: 1px solid var(--ink-line); padding-top: 1.5rem; margin-top: .5rem;
  font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; color: var(--stock-dim);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}

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

.scrim { position: fixed; inset: 0; background: rgba(1,10,28,.6); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.scrim[data-open] { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--ink); border-left: 1px solid var(--ink-line); z-index: 90;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.3,.8,.3,1);
  display: flex; flex-direction: column;
}
.cart[data-open] { transform: none; }
@media (prefers-reduced-motion: reduce) { .cart, .scrim { transition: none; } }

.cart-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem var(--gut); border-bottom: 1px solid var(--ink-line); }
.cart-head h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.35rem; margin: 0; }
.cart-head button { margin-left: auto; background: none; border: 0; color: var(--stock); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }

.cart-items { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--gut); margin: 0; list-style: none; }
.cart-items li { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: .85rem; align-items: start; padding: 1.1rem 0; border-bottom: 1px solid var(--ink-line); }
.cart-items img { width: 44px; }
.cart-items .ct { font-size: .86rem; font-weight: 600; line-height: 1.3; }
.cart-items .cf { font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stock-dim); margin-top: .3rem; }
.qty { display: flex; align-items: center; gap: .1rem; margin-top: .55rem; }
.qty button { width: 24px; height: 24px; background: none; color: var(--stock); cursor: pointer; border: 1px solid rgba(227,223,209,.3); font-family: var(--mono); font-size: .85rem; line-height: 1; padding: 0; }
.qty button:hover { background: rgba(227,223,209,.12); }
.qty span { min-width: 30px; text-align: center; font-family: var(--mono); font-size: .79rem; }
.cart-items .cp { font-family: var(--mono); font-size: .84rem; font-variant-numeric: tabular-nums; }

.cart-empty { padding: 2.5rem 0; color: var(--stock-dim); font-size: .89rem; }

.cart-foot { border-top: 1px solid var(--ink-line); padding: 1.1rem var(--gut) 1.4rem; }
.cart-foot .row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: .77rem; margin-bottom: .5rem; color: rgba(227,223,209,.72); }
.cart-foot .row.total { color: var(--stock); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.cart-foot .row.total b { font-family: var(--display); font-size: 1.9rem; font-weight: 800; }
.cart-foot .btn { width: 100%; justify-content: center; }
.cart-foot .fine { font-family: var(--mono); font-size: .63rem; line-height: 1.6; color: var(--stock-dim); margin: .85rem 0 0; text-align: center; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 180%);
  background: var(--stock); color: var(--ink); padding: .8rem 1.3rem; z-index: 100;
  font-family: var(--mono); font-size: .73rem; letter-spacing: .09em; text-transform: uppercase;
  transition: transform .3s cubic-bezier(.3,.9,.3,1); font-weight: 600;
}
.toast[data-show] { transform: translate(-50%, 0); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--stock); color: var(--ink); padding: .7rem 1rem; z-index: 200; font-family: var(--mono); font-size: .79rem; }
.skip:focus { left: .5rem; top: .5rem; }

/* ===========================================================================
   FIELD NOTES — the free reference library
   These pages are the instruction register, so they are set on paper with the
   display face used once, for the title, and nowhere else. Data goes in mono.
   ======================================================================== */

.paper { background: var(--stock-hi); color: #1b1a16; }
.paper .wrap { max-width: 940px; }

.crumbs {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; padding-top: 1.6rem; margin: 0;
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.crumbs li::after { content: " /"; color: #a9a495; margin-left: .5rem; }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: #57544b; text-decoration: none; }
.crumbs a:hover { color: #1b1a16; text-decoration: underline; }
.crumbs [aria-current] { color: #1b1a16; }

.fn-head { padding-block: 1.8rem clamp(1.5rem, 3vw, 2.4rem); }
.fn-kicker {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--k); font-weight: 600; margin: 0 0 .9rem;
}
.fn-head h1 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: .92; margin: 0; max-width: 24ch;
}

/* the answer box — written to be lifted whole, so it looks liftable */
.answer {
  border: 2px solid #1b1a16; padding: clamp(1.1rem, 3vw, 1.7rem);
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0; background: #fff;
}
.answer h2, .answer h3 {
  font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  margin: 0 0 .7rem; text-transform: none;
}
.answer p { margin: 0; font-size: clamp(1.02rem, 2.2vw, 1.16rem); line-height: 1.55; }
.answer .src {
  display: block; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(27,26,22,.18);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: #57544b;
}
.answer .src a { color: var(--k); font-weight: 600; }

.toc {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; font-family: var(--mono); font-size: .76rem;
  border-top: 1px solid rgba(27,26,22,.2); padding-top: 1rem;
}
.toc p { margin: 0 0 .6rem; letter-spacing: .14em; text-transform: uppercase; font-size: .66rem; color: #57544b; }
.toc ol { margin: 0; padding-left: 1.2rem; line-height: 1.9; }
.toc a { color: #3b3934; }

/* the article body: manuscript content, rendered as reference */
.fn-body { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.fn-body h2 {
  font-family: var(--mono); font-weight: 600; font-size: 1rem; letter-spacing: .04em;
  text-transform: uppercase; margin: clamp(2.4rem, 5vw, 3.4rem) 0 1rem;
  padding-top: 1rem; border-top: 2px solid #1b1a16; scroll-margin-top: 80px;
}
.fn-body h3 {
  font-family: var(--mono); font-weight: 600; font-size: .84rem; letter-spacing: .06em;
  margin: 1.9rem 0 .6rem; text-transform: uppercase;
}
.fn-body h4 { font-family: var(--mono); font-weight: 600; font-size: .78rem; margin: 1.4rem 0 .5rem; }
.fn-body p, .fn-body li { font-size: .95rem; line-height: 1.66; }
.fn-body p { margin: 0 0 .9rem; max-width: 74ch; }
.fn-body ul, .fn-body ol { max-width: 74ch; padding-left: 1.25rem; margin: 0 0 1rem; }
.fn-body li { margin-bottom: .38rem; }
.fn-body strong { font-weight: 600; }
.fn-body hr { border: 0; border-top: 1px solid rgba(27,26,22,.2); margin: 1.8rem 0; }
.fn-body blockquote {
  margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--k);
  color: #3b3934; font-size: .93rem;
}

/* tables carry most of the actual reference value, so they get real attention */
.fn-body table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.4rem;
  font-family: var(--mono); font-size: .78rem;
}
.fn-body thead th {
  text-align: left; border-bottom: 2px solid #1b1a16; padding: .55rem .6rem .5rem;
  letter-spacing: .07em; text-transform: uppercase; font-size: .68rem; font-weight: 600;
}
.fn-body tbody td {
  border-bottom: 1px solid rgba(27,26,22,.16); padding: .55rem .6rem; vertical-align: top;
}
.fn-body tbody tr:nth-child(odd) { background: rgba(27,26,22,.035); }
.table-scroll { overflow-x: auto; margin-bottom: 1.4rem; }
.table-scroll table { margin-bottom: 0; }

/* the manuscripts carry `- [ ]` checkboxes; render them as boxes, not brackets */
.fn-body li.check { list-style: none; margin-left: -1.25rem; }
.fn-body li.check::before { content: "\2610\00a0\00a0"; color: var(--k); }

/* write-in blanks from the workbook pages, restored after markdown */
.fn-body .blank {
  display: inline-block; min-width: 7ch; border-bottom: 1px solid #1b1a16;
  margin: 0 .2em; vertical-align: baseline; height: 1em;
}
.fn-body td .blank, .fn-body li.check .blank { min-width: 4ch; }

.faqs h3 {
  font-family: var(--body); font-weight: 600; font-size: 1.02rem; text-transform: none;
  letter-spacing: 0; margin: 1.8rem 0 .5rem;
}
.faqs p { color: #3b3934; }

.takeaways { list-style: none; padding: 0; margin: 0; counter-reset: tk; }
.takeaways li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid rgba(27,26,22,.16);
}
.takeaways li::before {
  counter-increment: tk; content: counter(tk, decimal-leading-zero);
  font-family: var(--mono); font-size: .75rem; font-weight: 600; color: var(--k);
  padding-top: .18rem;
}
.takeaways b { display: block; font-size: .78rem; font-family: var(--mono);
               letter-spacing: .06em; text-transform: uppercase; color: #57544b; margin-bottom: .3rem; }
.takeaways span { font-size: .93rem; line-height: 1.6; }

/* the buy panel, on the volume's own colour */
.fn-buy {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); background: var(--ink); color: var(--stock);
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(1.4rem, 3vw, 2rem); align-items: center; border-top: 5px solid var(--k);
}
@media (max-width: 620px) { .fn-buy { grid-template-columns: 1fr; } }
.fn-buy img { width: 120px; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.fn-buy h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: .95; margin: 0 0 .5rem;
  border: 0; padding: 0; letter-spacing: 0;
}
.fn-buy p { margin: 0 0 1.1rem; font-size: .93rem; color: rgba(227,223,209,.78); max-width: 46ch; }
.fn-buy .actions { margin-top: 0; }

/* the same brake that closes the storefront, closing every reference page */
.fn-brake {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 2px solid #1b1a16; padding-top: 1.1rem;
  font-family: var(--mono); font-size: .73rem; line-height: 1.75; color: #3b3934;
}
.fn-brake b { color: var(--signal); }
.fn-brake p { margin: 0 0 .7rem; max-width: 78ch; }

/* the library index */
.fn-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1px;
            background: rgba(27,26,22,.18); border: 1px solid rgba(27,26,22,.18); margin-top: 2rem; }
.fn-index a {
  background: var(--stock-hi); padding: 1.3rem; text-decoration: none; display: block;
  border-left: 4px solid var(--k); transition: background .15s ease;
}
.fn-index a:hover { background: #fff; }
.fn-index .q { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
               text-transform: uppercase; color: var(--k); font-weight: 600; margin: 0; }
.fn-index h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase;
               font-size: 1.35rem; line-height: .95; margin: .5rem 0 .4rem; color: #1b1a16;
               border: 0; padding: 0; letter-spacing: 0; }
.fn-index p { margin: 0; font-size: .87rem; line-height: 1.5; color: #3b3934; }

/* the free-library strip on the storefront: every reference page, one click
   from the front door and one hop from the root for a crawler */
.fn-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1px; background: var(--ink-line);
  border: 1px solid var(--ink-line); margin-bottom: 1.8rem;
}
.fn-strip a {
  background: var(--ink); padding: 1.1rem 1.2rem; text-decoration: none;
  display: block; border-left: 3px solid var(--c); transition: background .15s ease;
}
.fn-strip a:hover { background: var(--ink-soft); }
.fn-strip .fn-q {
  display: block; font-size: .95rem; font-weight: 500; line-height: 1.4;
  color: var(--stock); margin-bottom: .55rem;
}
.fn-strip .fn-v {
  display: block; font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stock-dim);
}

/* ===========================================================================
   BANNER ART — generated by gen_site_art.py in the series house style.
   The art is 1-bit line work on white, so it is set on the bright paper stock
   and multiplied, which lets the white of the drawing become the page.
   ======================================================================== */

.banner {
  margin: 0 0 clamp(1.5rem, 3vw, 2.2rem);
  background: #fff; border: 1px solid rgba(27,26,22,.16);
  position: relative;
}
.banner img { width: 100%; display: block; }
.banner figcaption {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: #57544b;
  padding: .6rem .9rem; border-top: 1px solid rgba(27,26,22,.14);
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between;
}
.banner figcaption b { color: var(--k); font-weight: 600; }

/* the reference-page header pairs the banner with the answer block */
.fn-head .banner { margin-top: clamp(1.2rem, 2.5vw, 1.8rem); margin-bottom: 0; }

/* on the dark storefront the same art needs a paper card under it, because
   multiply on navy would erase the drawing */
.banner-dark {
  background: var(--stock-hi); padding: 0; border: 0;
  border-top: 5px solid var(--c, var(--gerald));
}
.banner-dark img { display: block; }

/* index page: art at the head of each library card */
.fn-index a { padding: 0; }
.fn-index .thumb { background: #fff; border-bottom: 1px solid rgba(27,26,22,.14); }
.fn-index .thumb img { width: 100%; display: block; }
.fn-index .card-body { padding: 1.1rem 1.2rem 1.3rem; }

/* ===========================================================================
   PAGES ADDED BY THE SCHEMA PORT
   shop, volume, reference table, sets, printing, policies, cart, checkout
   ======================================================================== */

.page-head { padding-block: 1.8rem clamp(1.4rem, 3vw, 2.2rem); }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.lede { max-width: 60ch; margin: 1.1rem 0 0; color: rgba(227,223,209,.78); font-size: 1.02rem; }
.paper .lede, .brake .lede { color: #3b3934; }

/* tabular numerals everywhere a figure appears */
.tally dd, .price, .set-price b, .cart-side, .spec td, .ladder td, .ship td,
.theses .ch { font-variant-numeric: tabular-nums; }

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

.shop-controls {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--ink-line);
}
.topics { display: flex; flex-wrap: wrap; gap: .4rem; }
.topics button, .fmt button {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; background: none; cursor: pointer;
  border: 1px solid rgba(227,223,209,.28); color: rgba(227,223,209,.72);
  padding: .5rem .8rem;
}
.topics button[aria-pressed="true"], .fmt button[aria-pressed="true"] {
  background: var(--stock); color: var(--ink); font-weight: 600; border-color: var(--stock);
}
.book[hidden] { display: none; }
.book h3 a { text-decoration: none; }
.book h3 a:hover { text-decoration: underline; }
.book .spec {
  font-family: var(--mono); font-size: .68rem; line-height: 1.7; color: #4c4a42;
  margin: 0 0 .9rem;
}

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

.vol-sub {
  font-size: 1.02rem; font-style: italic; color: #4c4a42; margin: .6rem 0 0; max-width: 46ch;
}
.vol-buy {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem);
  align-items: center; background: var(--ink); color: var(--stock);
  padding: clamp(1.2rem, 3vw, 1.8rem); border-top: 5px solid var(--k);
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
@media (max-width: 620px) { .vol-buy { grid-template-columns: 1fr; } }
.vol-buy img { width: 120px; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.vol-buy .hook { margin: 0 0 1rem; font-size: .95rem; color: rgba(227,223,209,.86); max-width: 48ch; }
.vol-buy .book-buy { padding: 0; margin: 0; }
.vol-buy .price { color: var(--stock); }
.vol-buy .fine { font-family: var(--mono); font-size: .68rem; color: var(--stock-dim); margin: .9rem 0 0; }

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

.spec, .ladder, .ship, .theses { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .8rem; }
.spec caption, .ladder caption, .ship caption {
  caption-side: top; text-align: left; font-size: .74rem; line-height: 1.6;
  color: #57544b; padding-bottom: .7rem; max-width: 70ch;
}
.spec th, .ladder th, .ship th, .theses th {
  text-align: left; border-bottom: 2px solid currentColor; padding: .5rem .6rem;
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.spec td, .ladder td, .ship td, .theses td {
  border-bottom: 1px solid rgba(27,26,22,.16); padding: .55rem .6rem; vertical-align: top;
}
.spec tbody tr:nth-child(odd), .ladder tbody tr:nth-child(odd),
.ship tbody tr:nth-child(odd), .theses tbody tr:nth-child(odd) { background: rgba(27,26,22,.035); }
.spec td:first-child { width: 34%; color: #57544b; }
.ladder .set-row td { border-top: 2px solid #1b1a16; font-weight: 600; }
.theses .ch { width: 3rem; color: var(--k); font-weight: 600; }
.theses .tk-ch { width: 26%; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; color: #57544b; }
.theses td:last-child { font-family: var(--body); font-size: .9rem; line-height: 1.55; }

/* dark-ground tables (printing page is paper, shop is navy) */
.section .spec td, .section .spec th { border-color: var(--ink-line); }

/* ---- reference page ------------------------------------------------------ */

.fn-body h3 a { text-decoration: none; color: var(--k); }
.fn-body h3 a:hover { text-decoration: underline; }
.ref-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 1px;
            background: rgba(27,26,22,.18); border: 1px solid rgba(27,26,22,.18); }
.ref-list li { background: var(--stock-hi); border-left: 4px solid var(--k); }
.ref-list a { display: block; padding: .9rem 1.1rem; text-decoration: none; }
.ref-list b { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
              text-transform: uppercase; color: var(--k); margin-bottom: .25rem; }
.ref-list span { font-size: .9rem; color: #3b3934; }
.ref-list a:hover { background: #fff; }

.ladder-list { padding-left: 1.3rem; max-width: 70ch; }
.ladder-list li { margin-bottom: .7rem; line-height: 1.6; }

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

.cart-page { padding-bottom: clamp(3rem, 7vw, 5rem); }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
             gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 820px) { .cart-grid { grid-template-columns: 1fr; } }
.cart-page .cart-items { padding: 0; overflow: visible; }
.cart-side { background: var(--ink-deep); padding: 1.3rem; border-top: 4px solid var(--gerald); }
.cart-side .row { display: flex; justify-content: space-between; align-items: baseline;
                  font-family: var(--mono); font-size: .78rem; padding: .45rem 0;
                  color: rgba(227,223,209,.74); }
.cart-side .row.total { border-top: 1px solid var(--ink-line); margin-top: .5rem;
                        padding-top: .8rem; color: var(--stock); font-size: 1rem; }
.cart-side .row.total b { font-family: var(--display); font-size: 1.9rem; font-weight: 800; }
.cart-side .btn { width: 100%; justify-content: center; margin-top: .9rem; }
.cart-side .fine { font-family: var(--mono); font-size: .66rem; line-height: 1.6;
                   color: var(--stock-dim); margin: .8rem 0 0; }
.ship-pick { margin: .8rem 0; }
.ship-pick label { display: block; font-family: var(--mono); font-size: .66rem;
                   letter-spacing: .12em; text-transform: uppercase;
                   color: var(--stock-dim); margin-bottom: .35rem; }
.ship-pick select { width: 100%; font-family: var(--mono); font-size: .8rem; padding: .55rem;
                    background: var(--ink); color: var(--stock);
                    border: 1px solid rgba(227,223,209,.3); }
.cart-recap { font-family: var(--mono); font-size: .82rem; line-height: 1.8;
              border: 2px solid #1b1a16; padding: 1rem 1.2rem; margin-bottom: 2rem; }

/* A long unbroken string in a fluid track pushes the whole page sideways --
   the grid track's floor is its content's min-content width. Belt and braces
   for anything the manuscripts throw at these pages in future. */
.fn-body p, .fn-body li, .takeaways span, .brake dd { overflow-wrap: anywhere; }

/* ==========================================================================
   THE AUTHOR
   The bio is set as a dust-jacket flap, because that is the one place in
   publishing where a writer is allowed to describe himself in the third person
   and everybody agrees not to mention it.
   ========================================================================== */

.standfirst {
  margin-top: 1.4rem; max-width: 46ch;
  font-size: 1.02rem; line-height: 1.6; color: var(--ink-dim, #57544B);
}
h1 .dag { color: var(--gerald); font-size: .5em; vertical-align: super; margin-left: .1em; }

.flap {
  margin: 2.2rem 0 0; padding: clamp(1.4rem, 3.5vw, 2.4rem);
  border: 1px solid rgba(0, 0, 0, .16);
  border-left: 4px solid var(--gerald);
  background: rgba(255, 255, 255, .5);
  max-width: 58ch;
}
.flap p {
  margin: 0 0 1.05em; font-size: clamp(1.02rem, 1.9vw, 1.16rem); line-height: 1.62;
  text-wrap: pretty;
}
.flap p:first-child::first-letter {
  float: left; font-family: var(--display); font-size: 3.1em; line-height: .82;
  padding: .06em .1em 0 0; color: var(--signal);
}
.flap p:last-child { margin-bottom: 0; }
.flap-sig {
  margin: .7rem 0 0; max-width: 58ch; text-align: right;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim, #57544B);
}

/* ==========================================================================
   WHAT A BOOK KNOWS
   ========================================================================== */

.knows { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2rem); }
@media (min-width: 900px) { .knows { grid-template-columns: 20rem minmax(0, 1fr); } }

.inside { margin: 0; }
.inside img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(0, 0, 0, .14); background: #fff;
}
.inside figcaption {
  margin-top: .5rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim, #57544B);
}

ol.facts { margin: 0; padding: 0; list-style: none; counter-reset: fact; display: grid; gap: .9rem; }
ol.facts li {
  counter-increment: fact; position: relative; padding-left: 2.5rem;
  font-size: 1.01rem; line-height: 1.55; text-wrap: pretty;
}
ol.facts li::before {
  content: counter(fact, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--k, var(--signal)); font-weight: 700;
}

/* ==========================================================================
   SHARING
   Ships hidden; store.js reveals it. Without JS there is nothing here, which
   beats six links that go nowhere.
   ========================================================================== */

.share {
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid rgba(128, 128, 128, .3);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
}
.share-lbl {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; opacity: .75;
}
.share-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.share button {
  font: inherit; font-size: .84rem; cursor: pointer;
  padding: .34rem .72rem; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit;
  opacity: .8; transition: opacity .15s, background-color .15s;
}
.share button:hover, .share button:focus-visible { opacity: 1; background: rgba(128, 128, 128, .14); }
.share-done {
  font-family: var(--mono); font-size: .72rem; color: var(--gerald);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   GIFTS
   ========================================================================== */

.gift-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.gift-row {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: center; gap: 1rem;
  padding: .75rem .9rem; border: 1px solid rgba(128, 128, 128, .28);
  border-left: 4px solid var(--c, var(--signal));
  background: rgba(255, 255, 255, .03);
}
.gift-cover img { width: 100%; height: auto; display: block; }
.gift-who { margin: 0; font-size: 1.02rem; line-height: 1.4; text-wrap: pretty; }
.gift-what { margin: .3rem 0 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; }
/* The accent identifies the volume as a colour, but three of the ten are dark
   (violet, bronze, navy) and unreadable on the navy ground. The left border
   already carries the identification and does not have to clear a contrast
   floor; the link does, so it stays the body colour. */
.gift-what a { color: inherit; text-decoration-color: var(--c, currentColor); }
.gift-what span { opacity: .6; display: block; margin-top: .15rem; text-transform: none; letter-spacing: .02em; }
@media (max-width: 620px) {
  .gift-row { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .gift-row .btn { grid-column: 2; justify-self: start; }
}

.occasions, .why-grid {
  display: grid; gap: 1.2rem; margin-top: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.occasion, .why-grid > div {
  padding: 1.1rem 1.2rem; border: 1px solid rgba(128, 128, 128, .28);
}
.occasion h3, .why-grid h3 {
  margin: 0 0 .5rem; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gerald);
}
.occasion p, .why-grid p { margin: 0; font-size: .96rem; line-height: 1.55; text-wrap: pretty; }

/* the gift form in the cart */
.gift {
  margin-top: 1.6rem; padding: 1.1rem 1.2rem;
  border: 1px dashed rgba(128, 128, 128, .45);
}
.gift h2 { margin: 0; font-size: 1rem; }
.gift h2 label { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: inherit; }
.gift input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--signal); }
.gift-fields { margin-top: 1rem; }
.gift-fields p { margin: 0 0 .8rem; }
.gift-fields label {
  display: block; margin-bottom: .3rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; opacity: .75;
}
.gift-fields input[type="text"], .gift-fields textarea {
  width: 100%; font: inherit; font-size: .95rem; padding: .5rem .65rem;
  border: 1px solid rgba(128, 128, 128, .45); border-radius: 2px;
  background: rgba(255, 255, 255, .06); color: inherit;
}
.gift-fields textarea { resize: vertical; min-height: 4.5rem; }
.gift-fields input:focus-visible, .gift-fields textarea:focus-visible { outline: 2px solid var(--gerald); outline-offset: 1px; }
.gift-two { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.gift-echo { font-style: italic; opacity: .85; overflow-wrap: anywhere; }

.btn-quiet {
  background: transparent; border: 1px solid currentColor; color: inherit;
}

/* The portrait sits on the flap, which is where an author photograph goes on a
   real dust jacket. Below 780px it stacks and shrinks -- a face at full column
   width would out-shout the bio, and the bio is the joke. */
.author-flap { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; }
@media (min-width: 780px) { .author-flap { grid-template-columns: 17rem minmax(0, 1fr); } }

.author-pic { margin: 2.2rem 0 0; max-width: 17rem; }
.author-pic img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(0, 0, 0, .18);
}
.author-pic figcaption {
  margin-top: .6rem; font-size: .82rem; line-height: 1.45;
  color: var(--ink-dim); text-wrap: pretty;
}
@media (max-width: 779px) { .author-pic { max-width: 12rem; margin-top: 1.6rem; } }

/* ==========================================================================
   PLATES FROM THE PRINTED INTERIOR
   Reused, never generated: these already ship inside the paperbacks. They are
   1-bit line art on white, so they need a border to sit on the paper ground
   without appearing to float in a hole.
   ========================================================================== */

.plate { margin: 0; }
.plate img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(0, 0, 0, .16); background: #fff;
}
.plate figcaption {
  margin-top: .45rem; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim);
}

/* the reference page: one plate per volume, beside its heading and table.
   190px is deliberate -- the tables are the content and must not be squeezed,
   so the plate sets the rhythm without taking a column from them. */
.thesis-block { margin-top: clamp(2.2rem, 5vw, 3.4rem); display: grid; gap: 0 1.6rem; }
@media (min-width: 760px) {
  /* Grid, not a float. `.table-scroll` sets overflow, which makes it a block
     formatting context: it refuses to wrap a float and instead sits beside it
     at whatever width is left, squeezing the one thing on this page that must
     not be squeezed. A named column cannot do that. */
  .thesis-block { grid-template-columns: 190px minmax(0, 1fr); }
  .thesis-block .plate { grid-row: 1 / span 2; align-self: start; padding-top: .5rem; }
  .thesis-block h3, .thesis-block .table-scroll { grid-column: 2; }
}
@media (max-width: 759px) {
  .thesis-block .plate { width: 150px; margin-bottom: 1rem; }
}

/* the workbench: six of them in a row, as evidence for the paragraph above */
.plate-strip {
  display: grid; gap: .8rem; margin: 1.4rem 0 .6rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
/* Uniform boxes, but `contain` not `cover`: these are the actual pages of a
   manual and a crop would cut a label off a diagram and misrepresent it. */
.plate-strip .plate img { aspect-ratio: 3 / 4; object-fit: contain; background: #fff; }

/* the delivery page: one plate beside the print spec */
.spec-with-plate { display: grid; gap: clamp(1rem, 3vw, 2rem); align-items: start; }
@media (min-width: 820px) { .spec-with-plate { grid-template-columns: 15rem minmax(0, 1fr); } }
@media (max-width: 819px) { .spec-with-plate .plate { max-width: 12rem; } }