/* Vellum & Lamplight — docs/design/system/tokens.md. Covers on night, words on vellum, one warm light. */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/assets/fonts/cormorant.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-italic.woff2) format('woff2'); }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/literata.woff2) format('woff2'); }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/literata-italic.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/manrope.woff2) format('woff2'); }

:root {
  --paper: #F5EFE3; --band: #EDE4D3; --card: #FBF8F1; --hover: #E9DFCB;
  --night: #121A1E; --night-2: #18232A; --night-line: #2A363D;
  --ink: #1E1A16; --ink-2: #564E45; --ink-3: #6F675B;
  --ivory: #EFE7D8; --fog: #B4AA9A;
  --oxblood: #7A2324; --oxblood-hover: #8E2B2C; --on-oxblood: #F8F3EA;
  --ember: #E08F78;
  --gilt: #7A5D24; --gilt-night: #D2AE68; --candle: #E9A84A;
  --line: #DDD3C1; --line-2: #C9BDA8;
  --ok: #2F6A4E; --warn: #8A5300; --bad: #A8331F;
  --accent: var(--ink-2); --accent-night: var(--fog);

  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: 20px;
  --section: 72px;
  --radius: 4px;
  color-scheme: light;
}
@media (min-width: 900px) { :root { --gutter: 64px; --section: 88px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14191C; --band: #192126; --card: #1D262C; --hover: #222D33;
    --ink: #EFE7D8; --ink-2: #B4AA9A; --ink-3: #8B8376;
    --oxblood: #D9826B; --oxblood-hover: #E5947E; --on-oxblood: #1A1210;
    --gilt: #D2AE68; --line: #2F3A41; --line-2: #3B474F;
    --ok: #6BC497; --warn: #F0A848; --bad: #F07A62;
    color-scheme: dark;
  }
}

.skin-hollow { --accent: #2E5258; --accent-night: #8FC1C6; }
.skin-keystone { --accent: #A4501A; --accent-night: #E7A066; }
@media (prefers-color-scheme: dark) {
  .skin-hollow { --accent: #8FC1C6; }
  .skin-keystone { --accent: #E7A066; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 500 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, picture { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.night :focus-visible, .night-2 :focus-visible { outline-color: var(--candle); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: var(--radius); }
.skip:focus { left: 8px; }
.sr, .signup__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(680px + 2 * var(--gutter)); }

/* ---------- surfaces ---------- */
.night { background: var(--night); color: var(--ivory); }
.night-2 { background: var(--night-2); color: var(--ivory); }
.vellum { background: var(--paper); color: var(--ink); }
.band { background: var(--band); color: var(--ink); padding: 48px 0; }
section.vellum, section.night, section.night-2 { padding: var(--section) 0; }
section.page-head { padding-top: 48px; }
/* A page title is followed straight by its content: no full section gap. In dark mode the
   vellum and night surfaces are close in colour, so two section paddings read as one hole. */
section.page-head:has(+ section) { padding-bottom: 40px; }
section.page-head + section.shelf-section, section.page-head + section.band { padding-top: 48px; }
section.page-head.vellum + section.vellum { padding-top: 8px; }
section.shelf-section { padding-bottom: 64px; }
section.shelf-section + section.shelf-section { padding-top: 0; }
section.shelf-section + section.shelf-section .wrap::before { content: ''; display: block; height: 1px; background: var(--night-line); margin-bottom: 48px; }

/* ---------- type ---------- */
.eyebrow { font: 700 12px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.night .eyebrow, .night-2 .eyebrow { color: var(--accent-night); }
.eyebrow--gilt, .night .eyebrow--gilt, .night-2 .eyebrow--gilt { color: var(--gilt); }
.night .eyebrow--gilt, .night-2 .eyebrow--gilt { color: var(--gilt-night); }
.display { font: 500 36px/1.08 var(--display); letter-spacing: -.005em; margin-bottom: 18px; text-wrap: balance; }
.title { font: 500 28px/1.15 var(--display); margin-bottom: 12px; text-wrap: balance; }
.title a { text-decoration: none; }
.title--xl { font-size: 38px; line-height: 1.08; margin-bottom: 16px; }
.title--sm { font-size: 24px; }
.tagline { font: 400 19px/1.5 var(--serif); color: var(--fog); margin-bottom: 16px; }
.vellum .tagline { color: var(--ink-2); }
.lede, .body { font: 400 18px/1.65 var(--serif); color: var(--ink-2); margin-bottom: 16px; }
.lede p + p, .prose p + p { margin-top: 1em; }
.night .lede, .night .body { color: var(--fog); }
.meta { font: 600 15px/1.5 var(--sans); color: var(--ivory); margin-bottom: 14px; }
.vellum .meta { color: var(--ink-2); }
.small { font-size: 14px; color: var(--ink-3); }
.prose { font: 400 18px/1.7 var(--serif); }
.prose h2 { font: 500 26px/1.2 var(--display); margin: 1.6em 0 .4em; }
.prose a, .link, .body a, .small a, .stores__note a, .signup__note a { color: var(--oxblood); text-underline-offset: 3px; }
.night .stores__note a, .night .signup__note a, .night .small a { color: var(--ember); }
.prose ul { padding-left: 1.2em; }
.prose--strong { color: var(--ink); font-size: 19px; }
.link { font: 600 16px/1.5 var(--sans); text-decoration: none; }
.link:hover { text-decoration: underline; }
.link--small { font-size: 15px; display: inline-block; margin-top: 14px; }
.link--big { font-size: 20px; }
.link-candle { font: 600 16px/1.5 var(--sans); color: var(--ember); text-decoration: none; }
.link-candle:hover { text-decoration: underline; }
.plain { list-style: none; padding: 0; display: grid; gap: 8px; font: 400 17px/1.6 var(--serif); color: var(--ink-2); margin-bottom: 16px; }

/* ---------- header ---------- */
.site-head { padding: 0; position: relative; z-index: 10; }
.site-head__bar { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.mark { font: 600 14px/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; text-decoration: none; color: var(--ivory); white-space: nowrap; }
.site-head__nav { display: flex; gap: 26px; padding-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.site-head__nav a { font: 500 15px/2 var(--sans); color: var(--fog); text-decoration: none; white-space: nowrap; }
.site-head__nav a:hover, .site-head__nav a[aria-current] { color: var(--ivory); }
.menu { position: static; }
.menu__button { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--night-line); border-radius: 6px; font: 600 15px/1 var(--sans); cursor: pointer; user-select: none; }
.menu__button::-webkit-details-marker { display: none; }
.menu__close-label { display: none; align-items: center; gap: 8px; }
.menu[open] .menu__button > svg, .menu[open] .menu__open-label { display: none; }
.menu[open] .menu__close-label { display: inline-flex; }
.menu__sheet { position: absolute; left: 0; right: 0; top: 72px; background: var(--night); min-height: calc(100vh - 72px); padding: 8px var(--gutter) 40px; border-top: 1px solid var(--night-line); }
.menu__sheet ul { list-style: none; padding: 0; max-width: 680px; margin: 0 auto; }
.menu__sheet a { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--night-line); text-decoration: none; }
.menu__sheet svg { grid-row: 1 / 3; grid-column: 2; color: var(--fog); }
.menu__label { font: 500 27px/1.15 var(--display); color: var(--ivory); }
.menu__desc { font: 500 14px/1.5 var(--sans); color: var(--fog); }

/* ---------- buttons, fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 22px; border-radius: var(--radius); border: 1px solid transparent; font: 600 16px/1.25 var(--sans); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s ease; }
.btn--primary { background: var(--oxblood); color: var(--on-oxblood); }
.btn--primary:hover { background: var(--oxblood-hover); }
.night .btn--primary, .night-2 .btn--primary { background: #7A2324; color: #F8F3EA; }
.night .btn--primary:hover, .night-2 .btn--primary:hover { background: #8E2B2C; }
.btn--outline { border-color: var(--ivory); color: var(--ivory); background: transparent; }
.vellum .btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: rgba(239, 231, 216, .08); }
.btn--quiet { border-color: var(--oxblood); color: var(--oxblood); background: transparent; }
.btn--quiet:hover { background: var(--hover); }
.btn--stack { flex-direction: column; gap: 2px; width: 100%; padding: 14px 22px; }
.btn--stack small { font: 500 14px/1.3 var(--sans); opacity: .92; }
.btn--block { width: 100%; }
.actions { display: grid; gap: 12px; margin: 22px 0 14px; }
.field { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); color: var(--ink); font: 500 16px/1.3 var(--sans); }
.field::placeholder { color: var(--ink-3); }
.field[aria-invalid="true"] { border-color: var(--bad); }
.field--night { background: var(--night-2); border-color: #3A4850; color: var(--ivory); }
.field--night::placeholder { color: var(--fog); }

.signup, .claim { display: grid; gap: 12px; margin: 20px 0 8px; }
.signup__note { font: 500 14px/1.5 var(--sans); color: var(--ink-3); }
.night .signup__note, .night-2 .signup__note { color: var(--fog); }
.signup__error { font: 600 14px/1.5 var(--sans); color: var(--bad); }
.night .signup__error { color: #F07A62; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font: 500 14px/1.5 var(--sans); color: var(--fog); cursor: pointer; }
.check strong { color: var(--ivory); font-weight: 600; font-size: 15px; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--candle); }

/* ---------- covers ---------- */
.cover img { width: 100%; height: auto; aspect-ratio: 1600 / 2560; object-fit: cover; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .6), inset 1px 0 0 rgba(255, 255, 255, .12); }
.cover--hero { width: 156px; margin: 0 auto; }
@media (min-width: 420px) { .cover--hero { width: 188px; } }
.cover--shelf { width: 100%; }
.cover--spine { width: 72px; flex: none; }
.cover--spine img { box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .55); }
@media (min-width: 900px) { .cover--hero { width: 360px; } }
a .cover img { transition: transform .18s ease-out, box-shadow .18s ease-out; }
a:hover .cover--shelf img { transform: translateY(-4px); box-shadow: 0 32px 56px -14px rgba(0, 0, 0, .7); }
.cover-blank { width: 72px; aspect-ratio: 1600 / 2560; flex: none; display: grid; place-items: center; background: var(--night); color: var(--gilt-night); }
.cover-blank--lg { width: 160px; margin: 0 auto 28px; border: 1px solid var(--night-line); }

/* ---------- home ---------- */
.lead { padding-top: 24px !important; }
.lead__grid { display: grid; gap: 28px; }
.lead__cover { display: block; }
.lead__after { font: 400 18px/1.6 var(--serif); color: var(--fog); margin-top: 18px; }
.rating { display: flex; align-items: center; gap: 8px; font: 600 15px/1.5 var(--sans); margin-bottom: 18px; }
.rating svg { color: var(--candle); }
.next { padding: 48px 0 !important; }
.next__grid { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.next__cover .cover--spine { width: 96px; }
.next__hook { font: 400 17px/1.55 var(--serif); color: var(--fog); margin-bottom: 12px; }
.count { display: flex; align-items: center; gap: 10px; font: 600 15px/1.5 var(--sans); color: var(--ivory); margin: 10px 0 12px; }
.count--low { color: #F0A848; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; display: inline-block; }
.dot--candle { background: var(--candle); box-shadow: 0 0 10px 1px rgba(233, 168, 74, .55); }
.quote { margin-bottom: 48px; }
.quote blockquote { font: italic 500 26px/1.35 var(--display); margin-bottom: 10px; }
.quote figcaption { font: 500 14px/1.5 var(--sans); color: var(--ink-2); }
.hello { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; }
.monogram { width: 72px; height: 72px; border-radius: 50%; background: var(--band); color: var(--gilt); display: grid; place-items: center; font: 500 34px/1 var(--display); }
.monogram--lg { width: 160px; height: 160px; font-size: 76px; margin: 0 auto 28px; }
.shelf__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.shelf__swipe { font: 500 14px/1 var(--sans); color: var(--fog); }
.shelf__pitch { font: 400 17px/1.55 var(--serif); color: var(--fog); margin: -8px 0 24px; max-width: 640px; }
.shelf { list-style: none; padding: 0 var(--gutter); margin: 0 calc(-1 * var(--gutter)); display: grid; grid-auto-flow: column; grid-auto-columns: 152px; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; padding-bottom: 8px; }
.shelf::-webkit-scrollbar { display: none; }
.shelf__item { scroll-snap-align: start; }
.shelf__item a { display: grid; gap: 4px; text-decoration: none; }
.shelf__num { font: 600 15px/1.4 var(--sans); color: var(--ivory); margin-top: 12px; }
.shelf__status { font: 500 14px/1.4 var(--sans); color: var(--fog); }
.shelf__note { font: 500 15px/1.5 var(--sans); color: var(--fog); margin-top: 24px; }
.shelf__note a { color: var(--ivory); }
@media (min-width: 900px) {
  .shelf { grid-auto-columns: 200px; gap: 40px; overflow: visible; }
  .shelf__swipe { display: none; }
}

/* ---------- book page ---------- */
.book-hero { padding-top: 32px !important; }
.book-hero__grid, .early__grid { display: grid; gap: 28px; }
.stores__note { font: 500 14px/1.55 var(--sans); color: var(--fog); margin-top: 10px; }
.vellum .stores__note { color: var(--ink-3); }
.blurb { color: var(--ink); margin-bottom: 28px; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.chip { border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; font: 500 14px/1.4 var(--sans); color: var(--ink-2); }
.notes { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.notes summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; font: 500 15px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.notes summary::-webkit-details-marker { display: none; }
.notes[open] summary svg { transform: rotate(90deg); }
.notes p { font: 400 16px/1.6 var(--serif); color: var(--ink-2); padding: 0 0 16px 26px; }
.fleuron-rule { display: flex; align-items: center; gap: 16px; margin: 40px 0 32px; color: var(--gilt); }
.fleuron-rule::before, .fleuron-rule::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .7; }
.night .fleuron-rule { color: var(--gilt-night); }
.fleuron { display: inline-flex; color: var(--gilt); }
.fleuron--lg { margin-bottom: 20px; color: var(--gilt-night); }
.rail { list-style: none; padding: 0; display: grid; gap: 22px; }
.rail__item { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
.rail__num { font: 500 38px/1 var(--display); color: var(--accent); text-align: center; }
.rail__link { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; text-decoration: none; }
.rail__link .cover--spine { width: 56px; }
.rail__text { display: grid; gap: 2px; }
.rail__title { font: 500 21px/1.25 var(--display); color: var(--ink); }
.rail__status { font: 500 14px/1.4 var(--sans); color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.rail__item.is-here .rail__status { color: var(--accent); }
.rail__note { font: italic 400 16px/1.5 var(--serif); color: var(--ink-3); margin-top: 22px; }
.book-body__letters { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }

/* ---------- early copies ---------- */
.early { padding-top: 32px !important; }
.result { border: 1px solid var(--night-line); background: var(--night-2); border-radius: 8px; padding: 20px; margin: 18px 0; }
.result p { font: 400 17px/1.6 var(--serif); color: var(--fog); }
.steps { list-style: none; padding: 0; counter-reset: s; display: grid; gap: 16px; margin: 8px 0 32px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 14px; font: 400 17px/1.55 var(--serif); }
.steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--band); color: var(--ink); display: grid; place-items: center; font: 600 14px/1 var(--sans); }
.early + .vellum h3 { margin-top: 8px; }

/* ---------- lists, faq, misc ---------- */
.list { list-style: none; padding: 0; display: grid; gap: 28px; margin-top: 28px; }
.list__item { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; }
.list__title { font: 500 22px/1.25 var(--display); margin-bottom: 6px; }
.list__meta { font: 500 14px/1.5 var(--sans); color: var(--ink-3); margin-bottom: 6px; }
.faq { margin-top: 12px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; font: 600 17px/1.35 var(--sans); cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__sign { width: 14px; height: 14px; flex: none; position: relative; }
.faq__sign::before, .faq__sign::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--ink-2); }
.faq__sign::after { transform: rotate(90deg); transition: transform .15s; }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
.faq__item .prose { color: var(--ink-2); padding-bottom: 20px; }
.faq__item .steps { margin-bottom: 20px; }
.notice { border-left: 3px solid var(--ok); background: var(--card); padding: 12px 16px; font: 500 15px/1.5 var(--sans); margin: 12px 0; }
.notice--warn { border-color: var(--warn); }
.notice--bad { border-color: var(--bad); }
.about__intro { text-align: center; }
.about__intro .prose { text-align: left; }
.about__photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0 auto 28px; }
.start__choices { list-style: none; padding: 0; display: grid; gap: 16px; margin-top: 28px; }
.start__choice { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--night-line); border-radius: 8px; text-decoration: none; }
.start__choice:hover { background: var(--night-2); }
.start__label { display: block; font: 500 26px/1.2 var(--display); }
.start__book { display: block; font: 500 14px/1.5 var(--sans); color: var(--fog); margin-top: 4px; }
.free { text-align: center; }
.free .signup { text-align: left; }
.letter { padding: 28px 0; border-top: 1px solid var(--line); }
.error-page { text-align: center; min-height: 60vh; }

/* ---------- contact ---------- */
.contact-form { display: grid; gap: 22px; margin-top: 28px; }
.cfield { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cfield > label, .cfield legend { font: 600 15px/1.4 var(--sans); color: var(--ink); padding: 0; margin-bottom: 2px; }
.cfield__opt { font-weight: 500; color: var(--ink-3); }
.cfield__help { font: 500 14px/1.45 var(--sans); color: var(--ink-3); }
.cfield__err { font: 600 14px/1.45 var(--sans); color: var(--bad); }
.field--area { min-height: 168px; resize: vertical; font: 400 16px/1.55 var(--sans); }
.choice-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); font: 500 14px/1 var(--sans); color: var(--ink-2); }
.choice input:checked + span { border: 1.5px solid var(--oxblood); color: var(--oxblood); font-weight: 700; background: color-mix(in srgb, var(--oxblood) 8%, var(--card)); }
.choice input:focus-visible + span { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.fleuron--sent { margin-bottom: 18px; }

/* ---------- footer ---------- */
.site-foot { padding: 48px 0 56px; }
.site-foot__links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-bottom: 28px; }
.site-foot__links a { font: 500 15px/2.2 var(--sans); color: var(--fog); text-decoration: none; }
.site-foot__links a:hover { color: var(--ivory); }
.site-foot__elsewhere { font: 500 14px/1.6 var(--sans); color: var(--fog); margin-bottom: 10px; }
.site-foot__elsewhere a { color: var(--fog); }
.site-foot__small { font: 500 14px/1.6 var(--sans); color: #8B8376; }
@media (min-width: 900px) { .site-foot__links { grid-template-columns: repeat(4, max-content); gap: 0 40px; } }

/* ---------- admin ---------- */
.table-wrap { overflow-x: auto; margin: 12px 0 32px; }
.table { border-collapse: collapse; font: 500 14px/1.4 var(--sans); min-width: 100%; }
.table th, .table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { color: var(--ink-3); font-weight: 600; }
.table__sum td { font-weight: 700; }
.admin-form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; margin: 12px 0; }
.admin-form label { font: 600 13px/1.4 var(--sans); color: var(--ink-3); display: grid; gap: 4px; }

/* ---------- wider screens ---------- */
@media (min-width: 900px) {
  .display { font-size: 60px; }
  .title { font-size: 34px; }
  .title--xl { font-size: 52px; }
  .title--sm { font-size: 26px; }
  .site-head__bar { height: 84px; }
  .menu__sheet { top: 84px; }
  .lead { padding: 56px 0 96px !important; }
  .lead__grid, .book-hero__grid { grid-template-columns: 360px 1fr; gap: 72px; align-items: center; }
  .lead__text, .book-hero__text { max-width: 600px; }
  .btn--stack { width: auto; min-width: 340px; }
  .actions { grid-template-columns: max-content max-content; }
  .next__grid { grid-template-columns: 120px 1fr; gap: 32px; max-width: 760px; margin: 0 auto; }
  .next__cover .cover--spine { width: 120px; }
  .early__grid { grid-template-columns: 300px 1fr; gap: 56px; max-width: 1040px; }
  .early__cover .cover--hero { width: 300px; }
}

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

/* Book page: facts, pull quote, comps, lists */
.facts { margin: 40px 0 0; }
.facts__list { margin: 0; }
.facts__list div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts__list div:last-child { border-bottom: 0; }
.facts__list dt { font: 700 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.facts__list dd { margin: 0; font: 400 17px/1.55 var(--serif); color: var(--ink); }
.pull { margin: 40px 0 0; padding: 28px 24px; background: var(--band); border-radius: 4px; }
.pull blockquote { margin: 0 0 14px; font: italic 500 24px/1.28 var(--display); color: var(--ink); }
.pull blockquote p + p { margin-top: .5em; }
.pull .link { color: var(--oxblood); }
.comps { margin: 40px 0 0; }
.comps__item { margin: 0 0 14px; font: 400 15px/1.5 var(--serif); color: var(--ink-2); }
.comps__title { display: block; font: 600 21px/1.25 var(--display); color: var(--ink); }
.more-lists { margin: 40px 0 0; }
.more-lists a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 17px/1.4 var(--serif); color: var(--oxblood); text-decoration: none; }
.more-lists a:hover { text-decoration: underline; }

/* Reading lists */
.list-head .eyebrow a { color: inherit; text-decoration: none; }
.booklist { list-style: none; padding: 0; margin: 0; }
.booklist__item { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); }
.booklist__item--mine { grid-template-columns: 28px 64px 1fr; background: var(--card); padding: 24px 16px; border-radius: 4px; border-top: 0; margin: 8px 0; }
.booklist__num { font: 500 30px/1 var(--display); color: var(--gilt); }
.booklist__cover img { width: 64px; height: auto; display: block; }
.booklist__mine { font: 700 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood); margin: 0 0 4px; }
.booklist__title { font: 600 22px/1.15 var(--display); margin: 0 0 4px; }
.booklist__title a { color: inherit; text-decoration: none; }
.booklist__by { font: 400 13px/1.4 var(--sans); color: var(--ink-3); margin: 0 0 8px; }
.booklist__premise { font: 400 16px/1.55 var(--serif); color: var(--ink); margin: 0 0 6px; }
.booklist__facts { font: 600 12px/1.5 var(--sans); color: var(--ink-2); margin: 0 0 6px; }
.booklist__why { font: italic 400 15px/1.5 var(--serif); color: var(--ink-2); margin: 0 0 8px; }
.booklist__notes { font: 400 12px/1.45 var(--sans); color: var(--ink-3); margin: 0 0 8px; }
.booklist .link { color: var(--oxblood); font-size: 15px; }
.link--quiet { color: var(--ink-3) !important; font-weight: 500; }
.list-more { margin-top: 28px; }
.list-links, .list-index { list-style: none; padding: 0; margin: 0; }
.list-links li a, .list-index li > a { font: 400 18px/1.5 var(--serif); color: var(--oxblood); text-decoration: none; }
.list-links li a:hover, .list-index li > a:hover { text-decoration: underline; }
.list-index li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.list-index .small { margin: 4px 0 0; }
.list-links li { padding: 6px 0; }