/* ==========================================================================
   The Writer 2.0: Nell Garroway, novelist. An author's site: the books, the newsletter,
   the readings, the essays, the press kit and the right person to ask.
   1. Tokens (TEMPLATE-BRANDING.md: seven colours and two faces a buyer can change)
   ========================================================================== */
:root {
  --brand-ink: #1C2A2F;      /* slate ink: headings, buttons, the dark bands */
  --brand-accent: #94401F;   /* rust: links, the date on an event, a few highlights */
  --brand-surface: #F7F3EC;  /* paper: the page */
  --brand-raised: #ECE5D8;   /* a warmer sheet: newsletter bands, wells */
  --brand-body: #2C3437;     /* long reading text */
  --brand-muted: #586064;    /* dates, captions, the small print */
  --brand-line: #D5CBBA;     /* rules between rows */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Never change with the brand: an error is red, and photos are darkened by one hue. */
  --fixed-alert: #A61B12;
  --fixed-scrim: #0E161A;

  /* Derived colours */
  --c-ink: var(--brand-ink);
  --c-accent: var(--brand-accent);
  --c-paper: var(--brand-surface);
  --c-sheet: var(--brand-raised);
  --c-body: var(--brand-body);
  --c-muted: var(--brand-muted);
  --c-line: var(--brand-line);
  --c-field: color-mix(in srgb, var(--brand-ink) 55%, var(--brand-surface));      /* form borders, 3:1 */
  --c-ink-hover: color-mix(in srgb, var(--brand-ink) 82%, var(--brand-accent));
  --c-on-ink: var(--brand-surface);
  --c-on-ink-soft: color-mix(in srgb, var(--brand-surface) 80%, var(--brand-ink));
  --c-ink-line: color-mix(in srgb, var(--brand-surface) 22%, var(--brand-ink));
  --c-accent-soft: color-mix(in srgb, var(--brand-accent) 14%, var(--brand-surface));
  --c-white: #fff;

  /* Type roles: one size per role (README, "Type"). Sizes at 1440; the clamps carry them down. */
  --t-display: clamp(34px, .6rem + 6.1vw, 92px);
  --t-h1: clamp(38px, 1rem + 3.4vw, 66px);
  --t-h2: clamp(29px, .9rem + 1.9vw, 44px);
  --t-h3: clamp(22px, .95rem + .75vw, 27px);
  --t-lead: 18px;
  --t-quote: clamp(22px, 1rem + .9vw, 30px);
  --t-body: 18px;
  --t-small: 16px;
  --t-meta: 15px;
  --t-cap: 14px;
  --t-date: clamp(40px, 1.4rem + 1.6vw, 56px);

  --pad: clamp(20px, 5vw, 80px);
  --max: 1360px;
  --gap: clamp(20px, 2.4vw, 40px);
  --sec: clamp(64px, 8vw, 128px);
  --radius: 3px;
  --shadow: 0 10px 24px color-mix(in srgb, var(--brand-ink) 12%, transparent);
  --hdr: 76px;
}
@media (min-width: 760px) and (max-width: 1023.98px) { :root { --pad: 36px; } }
@media (max-width: 759.98px) { :root { --pad: 20px; --hdr: 64px; } }

@property --hero-image { syntax: '<url>'; inherits: true; initial-value: url(); }

/* 2. Base ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  margin: 0; background: var(--c-paper); color: var(--c-body);
  font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6; font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (min-width: 1880px) { body { zoom: 1.25; } }
@media (min-width: 2400px) { body { zoom: 1.6; } }
@media (min-width: 3400px) { body { zoom: 2.4; } }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-ink); font-weight: 400; margin: 0; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: manual; font-optical-sizing: auto; }
p { margin: 0; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--c-ink); color: var(--c-on-ink); padding: 12px 18px; border-radius: var(--radius); }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block: var(--sec); }
.sec--sheet { background: var(--c-sheet); }
.sec--ink { background: var(--c-ink); color: var(--c-on-ink-soft); }
.sec--ink h2, .sec--ink h3 { color: var(--c-on-ink); }
.sec--ink a:not(.btn) { color: var(--c-on-ink); }
.sec--tight { padding-block: calc(var(--sec) * .6); }
.sample { font-size: var(--t-meta); color: var(--c-muted); font-style: normal; }
.sec--ink .sample { color: var(--c-on-ink-soft); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type roles */
.display { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.02em; font-weight: 380; }
.h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -.015em; font-weight: 380; }
.h2 { font-size: var(--t-h2); line-height: 1.12; font-weight: 400; }
.h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 450; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--c-ink); }
.meta { font-size: var(--t-meta); color: var(--c-muted); line-height: 1.45; }
.small { font-size: var(--t-small); line-height: 1.55; }
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.05em; }
.prose h2 { font-size: var(--t-h3); margin: 1.8em 0 .6em; font-weight: 450; }
.prose blockquote { margin: 1.6em 0; font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.35; color: var(--c-ink); font-style: italic; font-weight: 400; }
em { font-style: italic; }

/* Buttons and links */
.btns { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; height: auto;
  padding: 12px 24px; border-radius: 999px; border: 1px solid transparent; font: 600 var(--t-small)/1.2 var(--font-body);
  text-decoration: none; white-space: normal; text-align: center; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--ink { background: var(--c-ink); color: var(--c-on-ink); }
.btn--ink:hover { background: var(--c-ink-hover); }
.btn--line { border-color: var(--c-ink); color: var(--c-ink); background: transparent; }
.btn--line:hover { background: var(--c-ink); color: var(--c-on-ink); }
.btn--paper { background: var(--c-paper); color: var(--c-ink); }
.btn--paper:hover { background: var(--c-sheet); }
.btn--ghost { border-color: var(--c-on-ink); color: var(--c-on-ink); background: transparent; }
.btn--ghost:hover { background: var(--c-on-ink); color: var(--c-ink); }
.btn .ico { width: 18px; height: 18px; flex: none; }
.go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--t-small); color: var(--c-ink); text-decoration: none; min-height: 44px; }
.go .ico { width: 18px; height: 18px; transition: transform .25s ease; }
.go:hover .ico { transform: translateX(4px); }
.go:hover { text-decoration: underline; text-underline-offset: .25em; }
.sec--ink .go { color: var(--c-on-ink); }
.ico { width: 20px; height: 20px; flex: none; }

/* 3. Header and menu ====================================================== */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--c-paper); transition: box-shadow .25s ease; }
.hdr.is-scrolled { box-shadow: var(--shadow); }
.bar { display: flex; align-items: center; gap: 24px; min-height: var(--hdr); }
.name { font-family: var(--font-display); font-size: 25px; font-weight: 450; color: var(--c-ink); text-decoration: none; letter-spacing: -.01em; line-height: 1.1; padding-block: 8px; white-space: nowrap; }
.nav { margin-left: auto; }
.nav__list { display: flex; list-style: none; gap: 4px; align-items: center; }
.nav__a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--c-ink); text-decoration: none; font-size: var(--t-small); font-weight: 500; }
.nav__a:hover { text-decoration: underline; text-underline-offset: .3em; }
.nav__a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.bar__cta { margin-left: 8px; }
.icon-btn { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--c-ink); cursor: pointer; border-radius: 50%; }
.icon-btn .ico { width: 26px; height: 26px; }
@media (max-width: 1023.98px) {
  .nav, .bar__cta { display: none; }
  .icon-btn { display: inline-flex; }
  .bag-link { margin-left: auto; }
}
.bag-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px; color: var(--c-ink); text-decoration: none; font-size: var(--t-small); font-weight: 600; }
.bag-link .ico { width: 22px; height: 22px; }
.bag-link:hover .bag-link__t { text-decoration: underline; text-underline-offset: .3em; }
.bag-link__n { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--c-ink); color: var(--c-on-ink); font-size: 13px; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 419.98px) { .bag-link__t { display: none; } .bar { gap: 8px; } .bag-link { padding: 0; gap: 6px; } }
.menu { width: min(420px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--c-paper); color: var(--c-ink); }
.menu::backdrop { background: color-mix(in srgb, var(--fixed-scrim) 55%, transparent); }
.menu__in { padding: 14px 24px 40px; display: flex; flex-direction: column; min-height: 100%; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 18px; }
.menu__top .icon-btn { display: inline-flex; }
.menu__list { list-style: none; }
.menu__a { display: flex; align-items: center; min-height: 54px; font-family: var(--font-display); font-size: 27px; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-line); }
.menu__cta { margin-top: 28px; }
.menu__note { margin-top: 18px; font-size: var(--t-meta); color: var(--c-muted); }

/* 4. Footer, cookie ======================================================= */
.ftr { background: var(--c-ink); color: var(--c-on-ink-soft); padding-block: clamp(56px, 7vw, 96px) 40px; }
.ftr a { color: var(--c-on-ink); }
.ftr__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--gap); padding-bottom: 48px; border-bottom: 1px solid var(--c-ink-line); }
.ftr .name { color: var(--c-on-ink); font-size: 30px; }
.ftr__say { margin-top: 14px; max-width: 40ch; font-size: var(--t-small); }
.ftr__h { font-family: var(--font-body); font-size: var(--t-meta); font-weight: 600; color: var(--c-on-ink); margin-bottom: 12px; letter-spacing: 0; }
.ftr__links { list-style: none; display: grid; gap: 2px; }
.ftr__links a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; font-size: var(--t-small); }
.ftr__links a:hover { text-decoration: underline; }
.ftr__who { font-size: var(--t-small); line-height: 1.55; }
.ftr__shop { margin: 14px 0 18px; max-width: 44ch; font-size: var(--t-small); color: var(--c-on-ink); }
.ftr__who p + p { margin-top: .7em; }
.ftr__legal { padding-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: var(--t-cap); }
.ftr__legal p { max-width: 80ch; }
.ftr__law { list-style: none; display: flex; gap: 20px; }
.ftr__law a { display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 1023.98px) { .ftr__top { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 559.98px) { .ftr__top { grid-template-columns: 1fr; } }
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(440px, 100% - 32px); background: var(--c-ink); color: var(--c-on-ink); padding: 18px 20px; border-radius: var(--radius); display: flex; gap: 16px; align-items: center; font-size: var(--t-cap); line-height: 1.5; }
.cookie[hidden] { display: none; }
.cookie .btn { min-height: 44px; padding: 10px 20px; flex: none; }
@media (max-width: 559.98px) { .cookie { left: 12px; bottom: 12px; width: calc(100% - 24px); } }

/* 5. Shared pieces ======================================================== */
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(32px, 4vw, 56px); }
.head__text { max-width: 56ch; }
.head__text .lead { margin-top: 14px; }
.ph { padding-block: clamp(48px, 6vw, 96px) clamp(32px, 4vw, 56px); }
.ph .lead { margin-top: 20px; max-width: 58ch; }
.crumb { font-size: var(--t-meta); color: var(--c-muted); margin-bottom: 20px; }
.crumb a { color: var(--c-muted); }
.rule { height: 1px; background: var(--c-line); border: 0; margin: 0; transform-origin: left; }
.js .rule[data-rule]:not(.is-drawn) { transform: scaleX(0); }
.rule[data-rule] { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.frame { overflow: hidden; background: var(--c-sheet); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.cover { aspect-ratio: 2 / 3; overflow: hidden; background: var(--c-sheet); }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
a:hover .cover img, a:hover .frame img { transform: scale(1.04); }
.quote { margin: 0; }
.quote p { font-family: var(--font-display); font-size: var(--t-quote); line-height: 1.32; color: var(--c-ink); font-weight: 400; letter-spacing: -.005em; }
.quote footer { margin-top: 14px; font-size: var(--t-meta); color: var(--c-muted); }
.sec--ink .quote p { color: var(--c-on-ink); }
.sec--ink .quote footer { color: var(--c-on-ink-soft); }

/* Formats: each one its price, ISBN and where to find it */
.formats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--gap); list-style: none; }
.fmt { padding: 20px 0 22px; border-top: 1px solid var(--c-line); }
.fmt__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.fmt__name { font-family: var(--font-display); font-size: var(--t-h3); color: var(--c-ink); font-weight: 450; }
.fmt__price { font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.fmt__isbn { margin-top: 6px; font-size: var(--t-meta); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.fmt__note { margin-top: 6px; font-size: var(--t-meta); }
@media (max-width: 759.98px) { .formats { grid-template-columns: 1fr; } }
.shops { margin-top: 24px; font-size: var(--t-small); }
.shops__h { font-weight: 600; color: var(--c-ink); }
.shops__list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 4px; }
.shops__list li:not(:last-child)::after { content: "\00b7"; margin: 0 10px; color: var(--c-muted); }

/* Event cards: the date leads */
.events { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); list-style: none; }
.ev { display: flex; flex-direction: column; padding-top: 22px; border-top: 2px solid var(--c-ink); }
.ev__date { display: flex; align-items: baseline; gap: 12px; color: var(--c-accent); }
.ev__day { font-family: var(--font-display); font-size: var(--t-date); line-height: 1; font-weight: 380; font-variant-numeric: lining-nums tabular-nums; }
.ev__mon { font-size: var(--t-small); font-weight: 600; line-height: 1.3; }
.ev__town { margin-top: 18px; font-family: var(--font-display); font-size: var(--t-h3); color: var(--c-ink); font-weight: 450; line-height: 1.2; }
.ev__what { margin-top: 8px; }
.ev__where { margin-top: 10px; font-size: var(--t-meta); color: var(--c-muted); }
.ev__tix { margin-top: auto; padding-top: 14px; font-size: var(--t-meta); font-weight: 600; color: var(--c-ink); }
@media (max-width: 1023.98px) { .events { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .events { grid-template-columns: 1fr; } }

/* Dated list (essays, past events, letters) */
.dated { list-style: none; border-top: 1px solid var(--c-line); }
.dated__item { display: grid; grid-template-columns: 11rem 1fr; gap: 8px var(--gap); padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.dated__when { font-size: var(--t-meta); color: var(--c-muted); padding-top: 6px; font-variant-numeric: tabular-nums; }
.dated__t { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.22; color: var(--c-ink); font-weight: 450; }
.dated__t a { color: inherit; text-decoration: none; }
.dated__t a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.dated__pub { margin-top: 4px; font-size: var(--t-meta); color: var(--c-accent); font-weight: 600; }
.dated__p { margin-top: 8px; max-width: 62ch; }
@media (max-width: 599.98px) { .dated__item { grid-template-columns: 1fr; } .dated__when { padding-top: 0; } }

/* Newsletter forms */
.signup { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.signup .field { margin: 0; }
.signup .btn { min-height: 52px; }
@media (max-width: 759.98px) { .signup { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-size: var(--t-meta); font-weight: 600; color: var(--c-ink); }
.sec--ink .field label { color: var(--c-on-ink); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: var(--t-small); color: var(--c-ink);
  background: var(--c-white); border: 1px solid var(--c-field); border-radius: var(--radius);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--fixed-alert); }
.field__err { font-size: var(--t-cap); color: var(--fixed-alert); font-weight: 600; }
.sec--ink .field__err { color: var(--c-on-ink); }
.field__opt { font-weight: 400; color: var(--c-muted); }
.form-error { padding: 12px 16px; background: color-mix(in srgb, var(--fixed-alert) 10%, var(--c-white)); color: var(--fixed-alert); font-size: var(--t-meta); font-weight: 600; border-radius: var(--radius); }
.form-note { font-size: var(--t-cap); color: var(--c-muted); margin-top: 12px; }
.sec--ink .form-note { color: var(--c-on-ink-soft); }
.sent { padding: 24px 0; }
.sent[hidden] { display: none; }
.sent__h { font-family: var(--font-display); font-size: var(--t-h3); color: var(--c-ink); }
.sec--ink .sent__h { color: var(--c-on-ink); }
.sent p { margin-top: 8px; }
.sent .btn { margin-top: 16px; }
.choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choices legend { margin-bottom: 8px; }
.choice { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: var(--t-small); cursor: pointer; }
.choice input { width: 20px; height: 20px; accent-color: var(--c-ink); }

/* Accordion */
.acc { border-top: 1px solid var(--c-line); }
.acc__item { border-bottom: 1px solid var(--c-line); padding-block: 12px; }
.acc__q { margin: 0; font-size: var(--t-h3); line-height: 1.25; font-weight: 450; }
.acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 0; background: none; border: 0; text-align: left; font: 450 var(--t-h3)/1.25 var(--font-display); color: var(--c-ink); cursor: pointer; }

.acc__btn .ico path:last-child { transition: transform .2s ease; transform-origin: center; }
.acc__btn[aria-expanded="true"] .ico path:last-child { transform: scaleY(0); }
.acc__a { padding: 8px 0 12px; max-width: 62ch; }
.acc__a[hidden] { display: none; }

/* 6. Home 1: the new book ================================================= */
html[data-home="1"] .home:not([data-layout="1"]), html[data-home="2"] .home:not([data-layout="2"]), html[data-home="3"] .home:not([data-layout="3"]) { display: none; }
html:not([data-home]) .home:not([data-layout="1"]) { display: none; }

.hx { position: relative; min-height: clamp(560px, calc(100vh - var(--hdr)), 900px); display: flex; align-items: flex-end; color: var(--c-white); overflow: hidden; background: var(--fixed-scrim); }
.hx__media { position: absolute; inset: 0; }
.hx__media img { width: 100%; height: 100%; object-fit: cover; }
.hx::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--fixed-scrim) 86%, transparent) 0%, color-mix(in srgb, var(--fixed-scrim) 55%, transparent) 45%, color-mix(in srgb, var(--fixed-scrim) 10%, transparent) 100%); pointer-events: none; }
.hx__in { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 104px); }
.hx__kick { font-size: var(--t-small); font-weight: 600; color: var(--c-white); }
.hx h1 { color: var(--c-white); margin-top: 14px; }
@media (min-width: 760px) { .hx h1 { max-width: 12ch; } }
.hx__line { margin-top: 22px; max-width: 46ch; font-size: var(--t-lead); line-height: 1.5; color: var(--c-white); }
.hx__praise { margin-top: 20px; max-width: 52ch; font-family: var(--font-display); font-style: italic; font-size: var(--t-small); color: var(--c-white); }
.hx .btns { margin-top: 30px; }

.buy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.buy__cover { position: sticky; top: calc(var(--hdr) + 24px); max-width: 460px; }
.buy__cap { margin-top: 12px; }
.buy__text .lead { margin-top: 18px; }
.buy__facts { margin-top: 18px; }
.buy__facts + .formats { margin-top: 32px; }
@media (max-width: 899.98px) { .buy { grid-template-columns: 1fr; } .buy__cover { position: static; max-width: 300px; } }

.praise { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); list-style: none; }
.praise > li { padding-top: 24px; border-top: 1px solid var(--c-ink-line); }
@media (max-width: 899.98px) { .praise { grid-template-columns: 1fr; } }

.next { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.next__date { font-family: var(--font-display); font-size: var(--t-h1); color: var(--c-accent); line-height: 1.05; margin-top: 20px; font-weight: 380; }
.next__text .lead { margin-top: 18px; }
.next__text .btns { margin-top: 28px; }
.next__cover { max-width: 360px; justify-self: end; width: 100%; }
@media (max-width: 899.98px) { .next { grid-template-columns: 1fr; } .next__cover { justify-self: start; max-width: 260px; } }

.club { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.club__qs { list-style: none; counter-reset: q; margin-top: 28px; border-top: 1px solid var(--c-line); }
.club__qs li { counter-increment: q; display: grid; grid-template-columns: 2.4rem 1fr; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.club__qs li::before { content: counter(q) "."; font-family: var(--font-display); color: var(--c-accent); font-size: var(--t-small); padding-top: 2px; }
.club__photo { aspect-ratio: 4 / 3; }
.club__side .btns { margin-top: 24px; }
.club__side p { margin-top: 20px; }
@media (max-width: 899.98px) { .club { grid-template-columns: 1fr; } }

.nlb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.nlb .lead { margin-top: 16px; }
@media (max-width: 899.98px) { .nlb { grid-template-columns: 1fr; } }

/* 7. Home 2: who she is =================================================== */
.hp-sec { padding-block: clamp(16px, 2vw, 32px) 0; }
.hp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); min-height: clamp(540px, calc(100vh - var(--hdr) - 32px), 840px); align-items: stretch; }
.hp__media { position: relative; overflow: hidden; background: var(--c-sheet); min-height: 480px; order: 2; }
.hp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.hp__text { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(32px, 4vw, 72px); }
.hp__text .lead { margin-top: 24px; max-width: 44ch; }
.hp__text .btns { margin-top: 32px; }
.hp__sig { margin-top: 28px; font-size: var(--t-meta); color: var(--c-muted); }
@media (max-width: 899.98px) {
  .hp { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .hp__media { aspect-ratio: 4 / 3; min-height: 0; }
  .hp__text { order: -1; padding-block: 32px 32px; }
}

.shelf { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(32px, 4vw, 56px) var(--gap); }
.shelf__item { display: flex; flex-direction: column; }
.shelf__cover { display: block; width: 100%; }
.shelf__year { margin-top: 18px; font-size: var(--t-meta); color: var(--c-accent); font-weight: 600; }
.shelf__t { margin-top: 6px; }
.shelf__t a { color: inherit; text-decoration: none; }
.shelf__t a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.shelf__p { margin-top: 10px; font-size: var(--t-small); }
.shelf__if { margin-top: 10px; font-style: italic; color: var(--c-ink); font-size: var(--t-small); }
.shelf__text { display: flex; flex-direction: column; flex: 1; }
.shelf__text .go { margin-top: auto; padding-top: 10px; }
@media (max-width: 1023.98px) { .shelf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .shelf { grid-template-columns: 1fr; } .shelf__cover { max-width: 260px; } }

.letter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.letter__page { background: var(--c-paper); padding: clamp(28px, 4vw, 56px); }
.letter__head { display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-meta); color: var(--c-muted); padding-bottom: 16px; border-bottom: 1px solid var(--c-line); margin-bottom: 24px; }
.letter__page p { max-width: 62ch; }
.letter__sign { font-family: var(--font-display); font-style: italic; color: var(--c-ink); margin-top: 18px; }
.letter__intro .lead { margin-top: 16px; }
.letter__intro .btns { margin-top: 28px; }
@media (max-width: 899.98px) { .letter { grid-template-columns: 1fr; } }

.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); list-style: none; }
.route { padding-top: 22px; border-top: 2px solid var(--c-ink); display: flex; flex-direction: column; }
.route__for { font-size: var(--t-meta); color: var(--c-accent); font-weight: 600; }
.route__h { margin-top: 10px; }
.route__p { margin-top: 12px; }
.route__who { margin-top: 16px; font-size: var(--t-small); }
.route__who a { overflow-wrap: anywhere; }
.route .go { margin-top: auto; padding-top: 14px; }
@media (max-width: 899.98px) { .routes { grid-template-columns: 1fr; } }

/* 8. Home 3: coming next, on the road ===================================== */
.hs { position: relative; min-height: clamp(560px, calc(100vh - var(--hdr)), 880px); display: flex; align-items: center; overflow: hidden; color: var(--c-white); background: var(--fixed-scrim); }
.hs__slides { position: absolute; inset: 0; list-style: none; }
.hs__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hs__slide.is-on { opacity: 1; }
.hs__slide img { width: 100%; height: 100%; object-fit: cover; }
.hs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in srgb, var(--fixed-scrim) 84%, transparent) 0%, color-mix(in srgb, var(--fixed-scrim) 58%, transparent) 55%, color-mix(in srgb, var(--fixed-scrim) 25%, transparent) 100%); pointer-events: none; }
.hs__in { position: relative; z-index: 1; padding-block: clamp(56px, 8vw, 120px); }
.hs__kick { font-size: var(--t-small); font-weight: 600; }
.hs h1 { color: var(--c-white); margin-top: 14px; }
.hs__date { margin-top: 18px; font-family: var(--font-display); font-size: var(--t-h2); color: var(--c-white); font-weight: 380; }
.hs__line { margin-top: 20px; max-width: 44ch; font-size: var(--t-lead); line-height: 1.5; }
.hs .btns { margin-top: 30px; }
.hs__pause { position: absolute; z-index: 2; right: var(--pad); bottom: 24px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-white) 60%, transparent); background: color-mix(in srgb, var(--fixed-scrim) 40%, transparent); color: var(--c-white); font: 600 var(--t-cap)/1 var(--font-body); cursor: pointer; }
.hs__pause .ico { width: 16px; height: 16px; }
.hs__pos { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .hs__slide { transition: none; } }

.tide { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.tide__cover { max-width: 400px; }
.tide__text .lead { margin-top: 18px; }
.tide__open { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--c-line); font-family: var(--font-display); font-size: var(--t-quote); line-height: 1.35; color: var(--c-ink); font-weight: 400; font-style: italic; max-width: 34ch; }
.tide__text .btns { margin-top: 30px; }
@media (max-width: 899.98px) { .tide { grid-template-columns: 1fr; } .tide__cover { max-width: 260px; } }

.talks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); list-style: none; }
.talk { padding-top: 22px; border-top: 1px solid var(--c-ink-line); }
.talk__p { margin-top: 12px; }
.talk__len { margin-top: 12px; font-size: var(--t-meta); color: var(--c-on-ink-soft); }
.book__how { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: end; padding-top: 32px; border-top: 1px solid var(--c-ink-line); }
@media (max-width: 899.98px) { .talks { grid-template-columns: 1fr; } .book__how { grid-template-columns: 1fr; } }

.orgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap) clamp(32px, 6vw, 112px); list-style: none; }
@media (max-width: 759.98px) { .orgs { grid-template-columns: 1fr; } }

/* 9. Inner pages ========================================================== */
/* Books */
.feature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: center; padding-bottom: clamp(56px, 7vw, 104px); border-bottom: 1px solid var(--c-line); }
.feature__cover { display: block; max-width: 380px; }
.feature__when { font-size: var(--t-small); color: var(--c-accent); font-weight: 600; }
.feature__t { margin-top: 10px; }
.feature__t a { color: inherit; text-decoration: none; }
.feature__p { margin-top: 16px; max-width: 56ch; }
.feature .btns { margin-top: 28px; }
@media (max-width: 759.98px) { .feature { grid-template-columns: 1fr; } .feature__cover { max-width: 240px; } }
.books { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px) var(--gap); list-style: none; margin-top: clamp(48px, 6vw, 88px); }
.bk__link { display: block; text-decoration: none; color: inherit; }
.bk__year { margin-top: 18px; font-size: var(--t-meta); color: var(--c-accent); font-weight: 600; }
.bk__t { margin-top: 6px; }
.bk__p { margin-top: 10px; }
.bk__fmt { margin-top: 10px; font-size: var(--t-meta); color: var(--c-muted); }
@media (max-width: 1023.98px) { .books { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 759.98px) { .books { grid-template-columns: 1fr; } .bk__link .cover { max-width: 240px; } }

.bkh { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: center; padding-block: clamp(40px, 5vw, 80px) clamp(48px, 6vw, 96px); }
.bkh__cover { max-width: 420px; }
.bkh__when { font-size: var(--t-small); font-weight: 600; color: var(--c-accent); }
.bkh h1 { margin-top: 12px; }
.bkh .lead { margin-top: 20px; max-width: 50ch; }
.bkh__praise { margin-top: 22px; font-family: var(--font-display); font-style: italic; color: var(--c-ink); max-width: 52ch; }
.bkh .btns { margin-top: 30px; }
@media (max-width: 759.98px) { .bkh { grid-template-columns: 1fr; } .bkh__cover { max-width: 240px; } }
.cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap) clamp(32px, 6vw, 112px); align-items: start; }
.cols__side .meta { margin-top: 10px; }
@media (max-width: 899.98px) { .cols { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 32px; margin: 0; font-size: var(--t-small); }
.facts dt { color: var(--c-muted); }
.facts dd { margin: 0; color: var(--c-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.excerpt { max-width: 62ch; }
.excerpt p { text-indent: 1.5em; }
.excerpt p:first-of-type { text-indent: 0; }
.excerpt p + p { margin-top: .2em; }
.excerpt__open::first-line { font-variant: small-caps; letter-spacing: .03em; }
.excerpt__end { margin-top: 24px; font-size: var(--t-meta); color: var(--c-muted); }
.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 56px) clamp(32px, 6vw, 96px); list-style: none; }
@media (max-width: 759.98px) { .reviews { grid-template-columns: 1fr; } }
.guide__qs { list-style: none; counter-reset: q; border-top: 1px solid var(--c-line); max-width: 64ch; }
.guide__qs li { counter-increment: q; display: grid; grid-template-columns: 2.4rem 1fr; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.guide__qs li::before { content: counter(q) "."; font-family: var(--font-display); color: var(--c-accent); }
.guide__dl { margin-top: 28px; }
.pager { display: flex; justify-content: space-between; gap: 24px; padding-block: 40px; border-top: 1px solid var(--c-line); }
.pager a { display: grid; gap: 4px; text-decoration: none; color: var(--c-ink); min-height: 44px; }
.pager span { font-size: var(--t-meta); color: var(--c-muted); }
.pager strong { font-family: var(--font-display); font-weight: 450; font-size: var(--t-h3); }
.pager a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; }

/* Events page */
.past { margin-top: 0; }
.month { margin-top: clamp(40px, 5vw, 72px); }
.month:first-child { margin-top: 0; }
.month__h { margin-bottom: 24px; }

/* Writing */
.essay-h { padding-block: clamp(48px, 6vw, 96px) 32px; }
.essay-h__pub { font-size: var(--t-small); font-weight: 600; color: var(--c-accent); }
.essay-h h1 { margin-top: 14px; max-width: 22ch; }
.essay-h .lead { margin-top: 20px; max-width: 56ch; }
.essay-h__meta { margin-top: 20px; }
.essay-photo { aspect-ratio: 21 / 9; margin-bottom: clamp(40px, 5vw, 72px); }
.essay-body { padding-bottom: clamp(48px, 6vw, 96px); }
.essay-body .prose { margin-inline: auto; }
.essay-note { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-line); font-size: var(--t-meta); color: var(--c-muted); max-width: 68ch; margin-inline: auto; }
@media (max-width: 759.98px) { .essay-photo { aspect-ratio: 4 / 3; } }

/* Newsletter page */
.nlh { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: center; padding-block: clamp(40px, 5vw, 80px) clamp(56px, 7vw, 104px); }
.nlh .lead { margin-top: 20px; }
.nlh__form { margin-top: 32px; display: grid; gap: 16px; max-width: 520px; }
.nlh__photo { aspect-ratio: 4 / 5; }
@media (max-width: 899.98px) { .nlh { grid-template-columns: 1fr; } .nlh__photo { aspect-ratio: 16 / 10; } }
.gets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); list-style: none; }
.get { padding-top: 22px; border-top: 2px solid var(--c-ink); }
.get__p { margin-top: 12px; }
@media (max-width: 899.98px) { .gets { grid-template-columns: 1fr; } }

/* About */
.ab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.ab__photo { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--hdr) + 24px); }
.ab__photo img { object-position: 64% 30%; }
.ab__cap { margin-top: 10px; }
@media (max-width: 899.98px) { .ab { grid-template-columns: 1fr; } .ab__photo { position: static; aspect-ratio: 4 / 3; } }
.band { position: relative; min-height: clamp(280px, 36vw, 520px); overflow: hidden; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Press */
.bios { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap) clamp(32px, 6vw, 112px); }
.bio + .bio { margin-top: 40px; }
.bio__h { font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; color: var(--c-ink); margin-bottom: 10px; letter-spacing: 0; }
@media (max-width: 899.98px) { .bios { grid-template-columns: 1fr; } }
.dls { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); list-style: none; }
.dl__ph { aspect-ratio: 3 / 2; }
.dl__cap { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.dl__t { font-family: var(--font-display); font-size: var(--t-h3); color: var(--c-ink); font-weight: 450; }
.dl__m { font-size: var(--t-meta); color: var(--c-muted); }
.dl .go { margin-top: 4px; }
.covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); list-style: none; }
.covers .dl__t { font-size: var(--t-small); font-family: var(--font-body); font-weight: 600; }
@media (max-width: 1023.98px) { .covers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 759.98px) { .dls { grid-template-columns: 1fr; } }
@media (max-width: 399.98px) { .covers { grid-template-columns: 1fr; } }

/* Contact */
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; }
.cform .field--full, .cform .choices, .cform .btns, .cform .form-error { grid-column: 1 / -1; }
@media (max-width: 599.98px) { .cform { grid-template-columns: 1fr; } }

/* Privacy */
.doc { max-width: 64ch; }
.doc h2 { font-size: var(--t-h3); font-weight: 450; margin: 2em 0 .6em; }
.doc ul { padding-left: 1.2em; margin-top: .6em; }
.doc li + li { margin-top: .4em; }

/* 404 */
.err { padding-block: clamp(80px, 12vw, 180px); }
.err .lead { margin-top: 20px; max-width: 52ch; }
.err .btns { margin-top: 32px; }

/* 10. Motion helpers (motion.js): hidden only while JavaScript runs ======= */
.js [data-reveal], .js [data-split], .js [data-hero], .js [data-stagger] > * { visibility: hidden; }
.js .is-in[data-reveal], .js .is-in[data-split], .js .is-in[data-hero], .js [data-stagger] > .is-in { visibility: inherit; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-split], .js [data-hero], .js [data-stagger] > * { visibility: inherit; }
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
.signup .form-error { grid-column: 1 / -1; }
.btns--gap { margin-top: 28px; }
.lead--gap { margin-top: 16px; }
.lead--on-ink { color: var(--c-on-ink-soft); margin-top: 14px; }
.facts__note { margin-top: 14px; }
.bios__note { margin-top: 10px; }
.events--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 759.98px) { .events--three { grid-template-columns: 1fr; } }
@media (min-width: 600px) { .club__qs { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); } .club__qs li:nth-child(-n+2) { border-top: 0; } }
.buy__end { margin-top: 8px; }
.hs__also { margin-top: 22px; font-size: var(--t-small); color: var(--c-white); }
.hs__also a { color: var(--c-white); font-weight: 600; }
.cookie a { color: var(--c-on-ink); }
.cookie .btn--ink { background: var(--c-paper); color: var(--c-ink); }
.about-bk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gap) clamp(32px, 6vw, 112px); align-items: start; }
.about-bk__p { margin-top: 24px; }
.about-bk__aside { padding-top: 8px; }
.about-bk__facts { margin-top: 18px; grid-template-columns: 1fr; gap: 2px; }
.about-bk__facts dd { margin-bottom: 12px; }
@media (max-width: 899.98px) { .about-bk { grid-template-columns: 1fr; } }
.read { display: flex; flex-direction: column; align-items: center; }
.read__h { text-align: center; }
.read__m { margin: 10px 0 32px; text-align: center; }
@media (min-width: 900px) { .guide .guide__qs { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); max-width: none; } .guide .guide__qs li:nth-child(-n+2) { border-top: 0; } }
.essays { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); list-style: none; }
.ess__link { display: block; color: inherit; text-decoration: none; }
.ess__ph { aspect-ratio: 3 / 2; }
.ess__pub { margin-top: 18px; font-size: var(--t-meta); color: var(--c-accent); font-weight: 600; }
.ess__t { margin-top: 8px; }
.ess__link:hover .ess__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ess__p { margin-top: 10px; max-width: 56ch; }
@media (max-width: 759.98px) { .essays { grid-template-columns: 1fr; } }
.hs__when { display: inline-flex; align-items: center; gap: 8px; }
.hs__when[hidden] { display: none; }
.hx__line strong { font-weight: 600; }


/* 9. The shop: the format choice, the buy row on a card, the bag and the checkout ========================= */
.tnum { font-variant-numeric: tabular-nums; }
.pick { margin-top: 28px; max-width: 560px; }
.pick__set { border: 0; padding: 0; margin: 0; }
.pick__legend { font-size: var(--t-meta); font-weight: 600; color: var(--c-ink); margin-bottom: 10px; }
.pick__list { list-style: none; display: grid; gap: 8px; }
.pick__lab { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: baseline; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-paper); cursor: pointer; }
.pick__lab:has(input:checked) { border-color: var(--c-ink); outline: 1px solid var(--c-ink); outline-offset: -2px; }
.pick__lab input { grid-row: 1 / 3; align-self: center; width: 20px; height: 20px; margin: 0; accent-color: var(--c-ink); }
.pick__name { font-weight: 600; color: var(--c-ink); }
.pick__np { display: contents; }
.pick__price { font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.pick__note { grid-column: 2 / 4; font-size: var(--t-meta); color: var(--c-muted); }
/* A flash sale (LIVE-EDIT-STRUCTURE.md "Flash sales"): the owner's sale words above the formats, shown only while the
   sale runs and while editing; each format's regular price struck through under its sale price, in rust */
.pick__sale { margin-bottom: 14px; font-size: var(--t-meta); font-weight: 600; color: var(--brand-accent); }
body.editing .pick__sale [hidden] { display: inline !important; }
body.editing .pick__sale { display: block !important; }
.on-sale .pick__note { grid-column: 2 / 3; }
.bkh-sec.on-sale .pick__price[data-kit-price], .pick__lab .card__was { grid-column: 3; grid-row: 2; justify-self: end; }
.bkh-sec.on-sale .pick__price[data-kit-price] { font-weight: 400; color: var(--c-muted); text-decoration: line-through; }
.pick__price--sale { grid-column: 3; grid-row: 1; justify-self: end; color: var(--brand-accent); }
.on-sale:not(.bkh-sec) [data-kit-price] { color: var(--brand-accent); }
.card__was, .line__was { font-weight: 400; color: var(--c-muted); white-space: nowrap; }
.pick__now { font-size: 22px; font-weight: 600; color: var(--brand-accent); font-variant-numeric: tabular-nums; }
.pick__ded { margin-top: 16px; }
.pick__ded[hidden] { display: none; }
.field__hint { font-size: var(--t-cap); color: var(--c-muted); }
.pick__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
.pick__said { margin-top: 12px; font-size: var(--t-meta); font-weight: 600; color: var(--c-ink); }
.pick__ship { margin-top: 14px; font-size: var(--t-meta); color: var(--c-muted); }
.bkh__buy { scroll-margin-top: calc(var(--hdr) + 16px); }
.bkh__more { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 22px; font-size: var(--t-meta); }
.bkh__more a { color: var(--c-ink); }
.retail { margin-top: 24px; font-size: var(--t-small); max-width: 60ch; }
.retail a { color: var(--c-ink); }
.cbuy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: auto; padding-top: 18px; }
.cbuy__v { font-size: var(--t-meta); color: var(--c-ink); }
.cbuy__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.cbuy__said { flex-basis: 100%; font-size: var(--t-meta); font-weight: 600; color: var(--c-ink); }
.bk { display: flex; flex-direction: column; }
.shelf__soon { margin-top: auto; padding-top: 18px; font-size: var(--t-meta); color: var(--c-muted); }
.shelf__soon + .go { padding-top: 8px; margin-top: 0; }
.shop { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gap) clamp(32px, 6vw, 112px); align-items: start; }
.lines { list-style: none; margin-top: 16px; border-top: 1px solid var(--c-line); }
.line { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.line__name { font-family: var(--font-display); font-size: var(--t-h3); color: var(--c-ink); }
.line__name a { color: inherit; text-decoration: none; }
.line__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.line__v, .line__ded { margin-top: 4px; font-size: var(--t-meta); color: var(--c-muted); }
.line__ded[hidden] { display: none; }
.line__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 12px; }
.line__qty { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-meta); }
.line__qty input { width: 72px; min-height: 44px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); font: inherit; color: var(--c-ink); }
.line__rm { min-height: 44px; border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-meta); color: var(--c-ink); text-decoration: underline; cursor: pointer; }
.line__price { font-weight: 600; color: var(--c-ink); }
.lines__empty { margin-top: 16px; }
.lines__empty[hidden] { display: none; }
.lines__empty .go { margin-top: 8px; }
.sum { padding: 28px; background: var(--c-sheet); border-radius: var(--radius); position: sticky; top: calc(var(--hdr) + 24px); }
.sum[hidden] { display: none; }
.sum__lines { list-style: none; margin-top: 16px; }
.sum__line { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.sum__n { font-weight: 600; color: var(--c-ink); }
.sum__v { grid-column: 1; font-size: var(--t-meta); color: var(--c-muted); }
.sum__v[hidden] { display: none; }
.sum__p { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--c-ink); }
.sum__rows { display: grid; grid-template-columns: 1fr auto; gap: 10px 0; margin-top: 16px; }
.sum__rows dd { padding-left: 16px; text-align: right; color: var(--c-ink); }
.sum__total { padding-top: 10px; border-top: 1px solid var(--c-line); font-weight: 600; color: var(--c-ink); }
.sum__note { margin-top: 14px; font-size: var(--t-meta); color: var(--c-muted); }
.sum__go { margin-top: 20px; width: 100%; justify-content: center; }
.sum .go { margin-top: 16px; }
.co__step { border: 0; padding: 0; margin: 0 0 40px; display: grid; gap: 18px; min-width: 0; }
.co__step legend { margin-bottom: 18px; }
.co__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px var(--gap); }
.co__note { font-size: var(--t-meta); color: var(--c-muted); max-width: 60ch; }
.co__note a { color: var(--c-ink); }
.co__demo { font-size: var(--t-meta); color: var(--c-muted); max-width: 60ch; margin-bottom: 16px; }
.co__empty { margin-bottom: 32px; }
.co__empty[hidden] { display: none; }
.co .form-error { margin-bottom: 24px; }
.co .form-error[hidden] { display: none; }
.opts { list-style: none; display: grid; gap: 8px; }
.opt { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; min-height: 56px; padding: 0 16px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-paper); cursor: pointer; }
.opt:has(input:checked) { border-color: var(--c-ink); outline: 1px solid var(--c-ink); outline-offset: -2px; }
.opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-ink); }
.opt__t { font-size: var(--t-small); color: var(--c-ink); }
.opt__p { font-weight: 600; color: var(--c-ink); }
.co__pay { margin-top: 4px; }
@media (max-width: 899.98px) { .shop { grid-template-columns: 1fr; } .sum { position: static; } }
@media (max-width: 599.98px) { .co__grid { grid-template-columns: 1fr; } .sum { padding: 22px 18px; } }
/* Home 1: the three formats side by side, each a choice with its price under its name */
@media (min-width: 1100px) {
  .pick--row { max-width: none; }
  .pick--row .pick__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick--row .pick__lab { grid-template-columns: auto 1fr; height: 100%; align-content: start; }
  .pick--row .pick__lab input { grid-row: 1; }
  .pick--row .pick__price { grid-column: 2; }
  .pick--row .pick__note { grid-column: 2; }
  .pick--row .pick__lab .card__was { grid-column: 2; grid-row: auto; justify-self: start; }
}

/* Arrow links are a small pill outline button, not an underlined link (owner, Nov 2026: arrows that underline look amateur).
   The header's Bag changes colour instead. */
.go { min-height: 48px; padding: 10px 20px; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; line-height: 1.25; align-self: flex-start; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.go:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-ink); text-decoration: none; }
.sec--ink .go:hover { background: var(--c-on-ink); border-color: var(--c-on-ink); color: var(--c-ink); }
.bag-link, .bag-link * { text-decoration: none !important; }
.bag-link:hover { color: var(--c-accent); }
a:has(svg):hover, a:has(svg):hover * { text-decoration-line: none !important; }

/* Cards (8 Nov 2026, templates/CLAUDE.md "Cards are boxes"). The editions, the ways to get in touch, the readings, what
   is in each letter, the talks, the reviews and the praise are each a card: the warmer sheet on the paper page,
   white on a sheet band and a lifted slate on the dark bands, a fine line all round, the template's radius and room
   on every side, the link at the foot. The essays, events past, letters, coverage and questions are read row by row
   (data-cards="rows"); the edition picker's choices are already boxed options and the biographies are text to copy
   (data-cards="none"). */
:root { --card: var(--c-sheet); --card-line: var(--c-line); --card-pad: clamp(22px, 2.2vw, 30px); }
.sec--sheet { --card: color-mix(in srgb, var(--c-white) 70%, var(--c-paper)); }
.sec--ink { --card: color-mix(in srgb, var(--c-on-ink) 8%, var(--c-ink)); --card-line: var(--c-ink-line); }
:is(.fmt, .route, .ev, .get, .talk, .praise > li, .reviews > li, .orgs > li) {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: var(--card-pad);
}
.formats { gap: 16px; }
.reviews { gap: 20px; }
.reviews > li, .praise > li, .orgs > li { display: flex; flex-direction: column; }
.reviews .quote p { font-size: clamp(20px, 1rem + .7vw, 26px); }
:is(.route, .ev, .talk) .go { margin-top: auto; padding-top: 16px; align-self: flex-start; }

/* SKU and category under a product's title (LIVE-EDIT-STRUCTURE.md, "Every product has an SKU"). A size's SKU shows
   in place of the product's once chosen (.sku-sized); while editing the product's and every size's show, to be changed. */
.kit-meta { margin: -4px 0 14px; font-size: 14px; line-height: 1.5; color: var(--brand-muted); }
body:not(.editing) .kit-meta.sku-sized > [data-kit-sku],
body.editing .kit-meta > [data-kit-sku-now] { display: none; }
body.editing [data-item] [data-kit-sku][hidden] { display: inline; margin-left: 8px; font-size: 12px; color: var(--brand-muted); }