/* Family Books from HermesWrite: shared styles for every page (tokens, type, buttons, the
   masthead and notice, the footer), the home page and the plain pages (privacy, terms, 404).
   The story form and the thank-you page add form.css; the first-page view adds page.css.

   Direction: "Modern heirloom". A family's book shown the way a fine stationer shows it:
   pages open on a linen table, Libre Caslon for the book and its titles, Ysabeau Office for
   plain talk, one bookcloth oxblood for actions, hairline rules, and printer's marks only where
   they mean something (a book's size, a proof's crop marks, a page's folio).

   Type by size: Libre Caslon Display is cut for large sizes and reads thin below about 44px,
   so it sets only the big, short titles; working headlines use Libre Caslon Text, which holds
   up as a sturdy regular. Labels are real capitals at 16px and 700: these fonts have no true
   small capitals, and synthesized ones come out thin and tiny. */

/* Fallback faces sized to the web fonts' widths (measured), so text barely moves when they arrive. */
@font-face { font-family: "Caslon Fallback"; src: local("Georgia"); size-adjust: 107%; }
@font-face { font-family: "Caslon Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 104%; }
@font-face { font-family: "Caslon Display Fallback"; src: local("Georgia"); size-adjust: 84%; }
@font-face { font-family: "Ysabeau Fallback"; src: local("Segoe UI"); size-adjust: 92%; }
@font-face { font-family: "Ysabeau Fallback Arial"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 94%; }

:root {
  --linen: #f1eee7;        /* the table the book rests on */
  --paper: #fbfaf6;        /* the site's own stock */
  --page: #fffdf3;         /* a book page, matched to the art's cream */
  --field: #fffefb;        /* a box to write in */
  --ink: #2a2420;
  --ink-soft: #574e47;     /* 7:1 on linen */
  --rule: #e3ddd2;         /* hairlines */
  --rule-strong: #c9c0b2;
  --edge: #7d7166;         /* the edge of anything you can type in or tick: 4:1 and up */
  --cloth: #6c2a22;        /* bookcloth: actions, numerals, small marks */
  --cloth-deep: #561f19;
  --on-cloth: #fbf6ee;
  --proof: #9a3324;        /* proofreader's red, for the draft stamp only */
  --error: #a0281b;
  --night: #221c18;
  --night-ink: #efe7db;
  --night-soft: #c2b7a9;
  --night-rule: rgba(239, 231, 219, 0.16);

  --display: "Libre Caslon Display", "Caslon Display Fallback", Georgia, serif;
  --serif: "Libre Caslon Text", "Caslon Fallback", Georgia, serif;
  --sans: "Ysabeau Office", "Ysabeau Fallback", "Ysabeau Fallback Arial", system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4.4vw, 48px);
  --section: clamp(64px, 9vw, 120px);
  --shadow-rgb: 64, 46, 30;          /* every drop shadow */
  --fold-rgb: 70, 48, 28;            /* a book's fold and spine */
  --error-rgb: 160, 40, 27;          /* --error, for a tint */
  --hover-tint: rgba(42, 36, 32, 0.05);
  --shadow-page: 0 0 0 1px rgba(var(--shadow-rgb), 0.05), 0 1px 2px rgba(var(--shadow-rgb), 0.09), 0 26px 46px -30px rgba(var(--shadow-rgb), 0.55);

  /* The shared steps every page draws from. Nothing anyone reads is set under 1rem, and small
     capitals come in two sizes: 1rem for a section's label, --text-caps for sizes, tags and table heads. */
  --text-caps: 0.9375rem;
  --caps-track: 0.06em;
  --text-lede: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
  --text-h3: clamp(1.375rem, 1.24rem + 0.55vw, 1.625rem);
  --text-title: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);       /* the first page's and the book's own titles */
  --text-section: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);    /* and their section headings */
  --measure: 34em;                   /* running text: about 65 to 75 characters a line */
  --radius: 2px;
  --btn-h: 54px;                     /* buttons and choices */
  --target: 48px;                    /* small buttons and text buttons */
  --target-min: 44px;                /* the least for anything to tap: a link on its own line, a footer link */
  --ring: 2px solid var(--cloth);
  --ring-offset: 3px;                /* buttons and links */
  --ring-offset-box: 2px;            /* anything drawn as a box: fields, choices, cards */
  --notice-rule: 2px solid var(--cloth);   /* a note set off by a cloth rule */
  --notice-gap: 14px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 500 1.125rem/1.6 var(--sans); overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; height: auto; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; }
a { color: var(--cloth); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--cloth-deep); }
a[href^="mailto:"] { overflow-wrap: anywhere; }   /* an address breaks rather than push the page sideways at large text */
cite { font-style: italic; }
strong { font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }
main:focus { outline: none; }
code { font-family: var(--sans); }

:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.site-foot :focus-visible { outline-color: var(--night-ink); }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -200px; z-index: 30;
  padding: 12px 18px; background: var(--ink); color: var(--paper);
  font-weight: 700; text-decoration: none; border-radius: var(--radius);
}
.skip:focus { top: 12px; color: var(--paper); }
/* kept together, moving to the next line whole; it breaks only when even a line of its own is too narrow (large text) */
.nowrap { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* ---------- type ---------- */
/* in ink, like the folios and spec labels: bookcloth is kept for what acts or counts */
.label {
  font: 700 1rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--ink-soft); margin: 0 0 14px;
}
.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.04; text-wrap: balance; }
.giant {
  font: 400 clamp(2.75rem, 1.95rem + 3.3vw, 4.5rem)/1.04 var(--display);
  letter-spacing: -0.014em; text-wrap: balance;
}
/* phones: at 44px and under, Display reads thin, so these titles take the sturdier Text cut */
@media (max-width: 599px) { .giant { font-family: var(--serif); letter-spacing: -0.01em; line-height: 1.08; } }
.h2 {
  font: 400 clamp(1.875rem, 1.1rem + 3.4vw, 2.875rem)/1.14 var(--serif);
  letter-spacing: -0.01em; text-wrap: balance; margin: 0 0 0.55em;
}
.h3 { font: 400 var(--text-h3)/1.25 var(--serif); margin: 0 0 0.6em; }
.lede { font-size: var(--text-lede); line-height: 1.5; max-width: 34em; }
.fine { font-size: 1rem; line-height: 1.55; color: var(--ink-soft); max-width: var(--measure); }
.caption { font: italic 400 1rem/1.55 var(--serif); color: var(--ink-soft); max-width: 40em; }
.caption cite { font-style: normal; }
.link { color: var(--cloth); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.book-text p { font: 400 clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem)/1.55 var(--serif); margin: 0 0 0.7em; }
.book-text p:last-child { margin-bottom: 0; }

/* the family's own typed words: plain sans, set off by a cloth rule */
.typed { border-left: var(--notice-rule); padding-left: 16px; }
.typed p { font: 500 1.125rem/1.55 var(--sans); color: var(--ink); }

/* ---------- buttons ---------- */
/* two heights only: --btn-h for a button, --target for a small one */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 12px 28px; border: 1.5px solid transparent; border-radius: var(--radius);
  font: 700 1.0625rem/1.2 var(--sans); letter-spacing: 0.01em; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-ink { background: var(--cloth); color: var(--on-cloth); }
.btn-ink:hover { background: var(--cloth-deep); color: var(--on-cloth); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--hover-tint); color: var(--ink); }
.btn-small { min-height: var(--target); padding: 8px 18px; font-size: 1rem; }
/* a button that can't act now (sending, or not yet) keeps its place and reads as resting, on every page;
   the cursor shows a wait, and the book, whose buttons wait on the family, shows "not yet" instead */
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--rule-strong); border-color: var(--rule-strong); color: var(--ink-soft); cursor: progress;
}
.btn-outline[aria-disabled="true"], .btn-outline:disabled { background: transparent; border-color: var(--ink-soft); }
@media (max-width: 359px) { .btn { padding-inline: 14px; font-size: 1rem; } }
.btn-block { width: 100%; }
/* text buttons: ink with a faint rule under them, bookcloth on hover */
.link-btn {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 6px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 700 1rem/1.3 var(--sans); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.link-btn:hover { color: var(--cloth); text-decoration-color: currentColor; }
/* a quiet second action beside a button */
.link-quiet {
  display: inline-flex; align-items: center; min-height: var(--target);
  color: var(--ink); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 6px;
}
.link-quiet:hover { color: var(--cloth); text-decoration-color: currentColor; }

/* ---------- notice: Christmas, waitlist, closed ---------- */
.status { background: var(--page); border-bottom: 1px solid var(--rule-strong); }
.status-line { padding: 10px 0 11px; font-size: 1rem; line-height: 1.45; }
.status-line strong { color: var(--cloth); }
/* a link in the line, 44px to touch without moving the line */
.status-line a {
  display: inline-block; padding-block: 11px; margin-block: -11px;
  color: var(--ink); font-weight: 700; text-decoration-color: var(--cloth); white-space: nowrap;
}
.status-line a:hover { color: var(--cloth); }

/* ---------- masthead ---------- */
.masthead { background: var(--linen); }
.masthead-row { display: flex; align-items: center; gap: 12px 28px; min-height: 76px; padding-block: 14px 12px; }
.wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; color: var(--ink); text-decoration: none; line-height: 1; }
.wordmark:hover { color: var(--ink); }
.wordmark-name { font: 400 1.875rem/1 var(--display); letter-spacing: 0.002em; white-space: nowrap; }
.wordmark-from { margin-top: 5px; padding-left: 4px; font: italic 400 0.9688rem/1.2 var(--serif); color: var(--ink-soft); white-space: nowrap; }
.topnav { margin-left: auto; }
.nav { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  color: var(--ink); font-weight: 600; font-size: 1.0625rem; text-decoration: none;
}
.nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cloth); text-underline-offset: 6px; }
.masthead-cta { margin-left: auto; }
.topnav + .masthead-cta { margin-left: 4px; }
@media (max-width: 899px) {
  .topnav { display: none; }
  .topnav + .masthead-cta { margin-left: auto; }
}
@media (max-width: 599px) {
  .masthead-row { min-height: 68px; padding-block: 12px 10px; }
  .wordmark-name { font-size: 1.6875rem; }
  .wordmark-from { font-size: 0.9375rem; }
  .masthead-cta { display: none; }
}

/* ---------- the open book: a page of words beside a page of pictures ---------- */
.spread { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--page); box-shadow: var(--shadow-page); }
.leaf { position: relative; min-width: 0; }
.leaf-art { order: -1; overflow: hidden; background: var(--linen); }
.leaf-art img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.leaf-text, .leaf-words { padding: clamp(26px, 6vw, 56px); }
/* stacked (phones, tablets): one page under the other, never wider than a held book */
@media (max-width: 959px) {
  .spread, .spread-notes, .plate-note { max-width: 680px; margin-inline: auto; }
}
@media (min-width: 960px) {
  .spread { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leaf-text, .leaf-words { display: flex; flex-direction: column; justify-content: center; }
  /* the gutter: each page darkens a little toward the binding */
  .spread::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 120px; margin-left: -60px;
    pointer-events: none; mix-blend-mode: multiply;
    background: linear-gradient(90deg, rgba(var(--fold-rgb), 0) 0%, rgba(var(--fold-rgb), 0.05) 30%, rgba(var(--fold-rgb), 0.14) 47%,
      rgba(var(--fold-rgb), 0.22) 50%, rgba(var(--fold-rgb), 0.12) 53%, rgba(var(--fold-rgb), 0.04) 72%, rgba(var(--fold-rgb), 0) 100%);
  }
}

/* a page number, set as a label */
.folio { font: 700 1rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--ink-soft); margin: 0 0 20px; }

/* ---------- home: hero ---------- */
.hero { background: var(--linen); padding: clamp(4px, 1.6vw, 20px) 0 clamp(52px, 7vw, 88px); }
/* the plain statement of what is on offer: never under 40px, two or three lines on a phone */
.hero-title { font-size: clamp(2.5rem, 1.7rem + 3.9vw, 3.5rem); margin: 0 0 16px; }
/* the second beat under it, in the serif the section headings use, in full ink */
.hero-sub { font: 400 var(--text-section)/1.2 var(--serif); letter-spacing: -0.01em; text-wrap: balance; margin: 0 0 22px; }
.hero-label { margin-bottom: 16px; }
.hero-lede { margin: 0 0 28px; max-width: 31rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 0 0 20px; }
.hero-fine { max-width: 31rem; }
@media (max-width: 959px) {
  /* below the desktop spread: the words come first, then the picture. Label, headline, second line,
     buttons and the price line fill the first screen; the picture follows, then the lede (only the
     buttons can take focus, so the tab order is unchanged). The text leaf steps aside so its parts
     and the picture are laid out in order inside the one page. */
  .hero .leaf-art img { aspect-ratio: 5 / 4; object-position: 50% 94%; }
  .hero .leaf-text { display: contents; }
  .hero .leaf-text > * { --hero-pad: clamp(26px, 6vw, 56px); margin-inline: var(--hero-pad); }
  .hero-label { order: 0; margin-top: 22px; margin-bottom: 12px; }
  .hero-title { order: 1; margin-bottom: 18px; }
  /* the second beat: about 60% of the headline's size */
  .hero-sub { order: 2; font-size: clamp(1.5rem, 1.02rem + 2.34vw, 2.1rem); margin-bottom: 18px; }
  .hero-actions { order: 3; margin-bottom: 16px; }
  .hero-fine { order: 4; margin-bottom: 20px; }
  .hero .leaf-art { order: 5; }
  .hero-lede { order: 6; margin-top: 24px; margin-bottom: 28px; }
}
@media (max-width: 959px) and (max-height: 500px) {
  /* a phone on its side: the headline and the button must fit the short screen */
  .hero-title { font-size: 2.5rem; margin-bottom: 14px; }
  .hero-sub { font-size: 1.5rem; margin-bottom: 14px; }
}
@media (max-width: 599px) {
  /* narrow phones: a wide strip of the picture, so the lede and the AI sentence stay close */
  .hero .leaf-art img { aspect-ratio: 2 / 1; object-position: 50% 80%; }
  .hero-lede { margin-top: 16px; margin-bottom: 16px; font-size: 1rem; line-height: 1.5; }
}
@media (max-width: 479px) {
  .hero-actions .btn { flex: 1 1 100%; }
}
@media (min-width: 960px) {
  .hero { padding-top: 8px; }
  .hero .leaf-text { padding: 32px clamp(36px, 4.4vw, 60px); }
  .hero-title { font-size: var(--text-title); margin-bottom: 14px; }
  .hero-sub { font-size: var(--text-h3); margin-bottom: 18px; }
  .hero-lede { margin-bottom: 24px; }
  .hero-actions { margin-bottom: 16px; }
}
.spread-notes { display: grid; gap: 10px 56px; margin-top: 16px; }
@media (min-width: 960px) { .spread-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.made { font: 500 1rem/1.55 var(--sans); color: var(--ink); max-width: 36em; }

/* ---------- home: one line on the form, a page in the book ---------- */
.words { padding: var(--section) 0 0; }
.words-pair { display: grid; gap: 26px; align-items: center; margin-top: 30px; }
@media (min-width: 900px) { .words-pair { grid-template-columns: minmax(0, 5fr) 64px minmax(0, 6fr); gap: 32px; } }
.formline { background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 22px 24px 26px; }
.formline-label { font-size: 1rem; line-height: 1.45; color: var(--ink-soft); margin: 0 0 14px; }
.became { position: relative; justify-self: center; width: 1px; height: 44px; background: var(--rule-strong); }
.became::after {
  content: ""; position: absolute; left: -4px; bottom: 0; width: 9px; height: 9px;
  border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); transform: rotate(45deg);
}
@media (min-width: 900px) {
  .became { width: 100%; height: 1px; }
  .became::after { left: auto; right: 1px; bottom: -4px; transform: rotate(-45deg); }
}
.pagelet { background: var(--page); padding: clamp(28px, 4.6vw, 48px) clamp(24px, 4.6vw, 52px); box-shadow: var(--shadow-page); }
.statement {
  font: 400 clamp(1.75rem, 1.15rem + 2.5vw, 2.75rem)/1.15 var(--serif); letter-spacing: -0.01em;
  text-align: center; text-wrap: balance; margin: clamp(52px, 7vw, 84px) auto 14px; max-width: 22em;
}
.caption-center { text-align: center; margin-inline: auto; }

/* ---------- home: the short version, with the book as an object ---------- */
.facts { padding: var(--section) 0; }
.facts-grid { display: grid; gap: 52px; border-top: 1px solid var(--rule); padding-top: var(--section); }
@media (min-width: 900px) { .facts-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; } }
.object { width: min(100%, 420px); justify-self: center; }
@media (min-width: 900px) { .object { position: sticky; top: 32px; } }
/* dimension marks: the size of the book, drawn the way a printer marks it. The height is set
   along its line, as on a drawing, and clear of the second copy behind the book. */
.dims { position: relative; padding: 40px 52px 0 0; }
.dim { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.dim > span {
  position: relative; z-index: 1; padding: 0 8px; background: var(--paper);
  font: 700 var(--text-caps)/1 var(--sans); text-transform: uppercase; letter-spacing: var(--caps-track);
}
.dim::before, .dim::after { content: ""; position: absolute; }
.dim-w { top: 0; left: 0; right: 52px; height: 24px; }
.dim-w::before { left: 0; right: 0; top: 50%; border-top: 1px solid var(--edge); }
.dim-w::after { inset: 0; background: linear-gradient(var(--edge), var(--edge)) left center / 1px 13px no-repeat, linear-gradient(var(--edge), var(--edge)) right center / 1px 13px no-repeat; }
.dim-h { top: 40px; bottom: 0; right: 0; width: 52px; }
.dim-h::before { top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--edge); }
.dim-h::after { inset: 0; background: linear-gradient(var(--edge), var(--edge)) center top / 13px 1px no-repeat, linear-gradient(var(--edge), var(--edge)) center bottom / 13px 1px no-repeat; }
.dim-h > span { padding: 8px 0; writing-mode: vertical-rl; transform: rotate(180deg); }
/* two copies come with every order: the second waits behind the first */
.book-object {
  position: relative; border-radius: 1px 3px 3px 1px; background: var(--page);
  box-shadow: 0 1px 1px rgba(var(--shadow-rgb), 0.18), 0 26px 40px -24px rgba(var(--shadow-rgb), 0.6),
    9px -9px 0 -1px var(--paper), 9px -9px 0 0 var(--rule-strong);
}
.book-object img { border-radius: 1px 3px 3px 1px; }
/* the hinge along the spine, in the fold's brown */
.book-object::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--fold-rgb), 0.2) 0, rgba(var(--fold-rgb), 0.05) 5px, rgba(var(--fold-rgb), 0) 12px,
    rgba(var(--fold-rgb), 0.12) 17px, rgba(255, 255, 255, 0.45) 19px, rgba(255, 255, 255, 0) 24px);
}
.object .caption { margin-top: 24px; text-align: center; padding-right: 52px; }

.facts-body .h2 { margin-bottom: 18px; }
.spec { margin: 0 0 22px; border-top: 1px solid var(--ink); }
.spec-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.spec-row dt { font: 700 1rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--ink-soft); }
.spec-value { font: 400 clamp(1.75rem, 1.45rem + 1vw, 2.25rem)/1.15 var(--display); }
.spec-note { font-size: 1.0625rem; line-height: 1.55; max-width: 32rem; }
@media (min-width: 600px) {
  .spec-row { grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 24px; }
  .spec-row dt { grid-row: 1 / span 2; padding-top: 0.75em; }
  .spec-row dd { grid-column: 2; }
}

/* ---------- home: how it works, set like a contents page ---------- */
.section { padding: var(--section) 0; }
.section-head { max-width: 50rem; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head .lede { margin-top: 6px; }
.how { background: var(--page); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.contents { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.contents li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 14px; padding: 24px 0 26px; border-bottom: 1px solid var(--rule); }
.c-num { grid-column: 1; grid-row: 1 / span 3; font: 400 2.75rem/0.9 var(--display); color: var(--cloth); }
.c-title { grid-column: 2; grid-row: 1; font: 400 var(--text-h3)/1.25 var(--serif); }
.c-time { grid-column: 2; grid-row: 2; margin-top: 4px; font: italic 400 1.0625rem/1.45 var(--serif); color: var(--ink-soft); }
.c-text { grid-column: 2; grid-row: 3; margin-top: 10px; max-width: 40rem; }
/* wider: dotted leaders run from each step to its time; the time's paper masks the dots */
@media (min-width: 760px) {
  .contents li { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 17rem); grid-template-rows: auto 1fr; }
  .c-num { grid-row: 1 / span 2; font-size: 3.25rem; align-self: baseline; }
  .c-title { grid-column: 2 / 4; display: flex; align-items: baseline; align-self: baseline; }
  .c-title > span { max-width: calc(100% - 18rem); padding-right: 14px; }
  .c-title::after {
    content: ""; flex: 1 1 24px; min-width: 24px; height: 4px; transform: translateY(-4px);
    background-image: radial-gradient(circle, var(--rule-strong) 1.1px, transparent 1.6px);
    background-size: 9px 4px; background-repeat: repeat-x;
  }
  .c-time { grid-column: 3; grid-row: 1 / span 2; position: relative; z-index: 1; margin-top: 0; align-self: baseline; text-align: right; }
  .c-time > span { padding-left: 14px; background: var(--page); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .c-text { grid-row: 2; }
}
.how-fine { margin-top: 22px; max-width: var(--measure); }

/* Christmas: its own ruled block, not a box */
.xmas {
  display: grid; gap: 8px 40px; margin-top: clamp(40px, 5vw, 56px); max-width: 60rem;
  padding: 22px 0 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.xmas-title { font: 400 var(--text-h3)/1.25 var(--serif); }
.xmas p { max-width: var(--measure); }
@media (min-width: 900px) { .xmas { grid-template-columns: 14rem minmax(0, 1fr); } }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(36px, 4.4vw, 48px); }
.cta-row .fine { margin: 0; }
@media (max-width: 479px) { .cta-row .btn { flex: 1 1 100%; } }

/* ---------- home: the sample, its pages on the table ---------- */
.sample { background: var(--linen); }
.sample-head { display: grid; gap: 18px 64px; margin-bottom: clamp(44px, 6vw, 72px); }
@media (min-width: 960px) { .sample-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; } }
.booktitle { font: italic 400 clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)/1.05 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.booktitle cite { font-style: italic; }
.sample-intro .lede { font-size: 1.125rem; line-height: 1.6; max-width: 36rem; }
.sample-yours { margin-top: 14px; font-weight: 700; max-width: 36rem; }
.plates { display: grid; gap: clamp(64px, 8vw, 112px); }
.plate { position: relative; min-width: 0; }
/* sp10's file ends in a dark row of pixels: scale just past it */
.art-trim img { transform: scale(1.008); transform-origin: 50% 0; }
.plate-note { display: grid; gap: 10px; margin-top: 22px; max-width: 36rem; }
@media (min-width: 960px) { .plate-note { margin-left: 50%; padding-left: clamp(26px, 4.6vw, 56px); } }
.plate-note-label { font-size: 1rem; line-height: 1.45; color: var(--ink-soft); }
.plate-note-after { font: italic 400 1.1875rem/1.45 var(--serif); margin-top: 4px; }

.sentence { max-width: 46rem; margin: clamp(80px, 10vw, 128px) auto 0; text-align: center; }
.sentence blockquote p { font: italic 400 clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem)/1.3 var(--serif); text-wrap: balance; }
.sentence .caption { margin: 18px auto 0; }

/* ---------- home: now yours, a book still blank, open on the same table ---------- */
.turn { background: var(--linen); padding: 0 0 var(--section); }
.turn-title { font-size: clamp(3.25rem, 2.3rem + 4.2vw, 5.75rem); line-height: 0.98; }
.turn .leaf-text { padding: clamp(28px, 6vw, 60px); }
.turn-left { padding-bottom: 0 !important; }
.turn-copy .lede { margin: 0 0 26px; max-width: 28rem; }
.turn-copy .fine { margin-top: 14px; }
@media (min-width: 960px) {
  .turn .spread { min-height: 420px; }
  .turn-left { padding-bottom: clamp(28px, 6vw, 60px) !important; }
}
@media (max-width: 479px) { .turn-copy .btn { width: 100%; } }

/* ---------- home: who it's for ---------- */
.stories-grid { display: grid; gap: 44px clamp(40px, 6vw, 88px); align-items: start; }
@media (min-width: 900px) { .stories-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.prose p { max-width: 36em; }
.prose p + p { margin-top: 1em; }
/* the style sheet: a real sheet of paper from the sample's file */
.stylesheet { margin: 0; background: var(--page); box-shadow: var(--shadow-page); padding: clamp(22px, 3.4vw, 40px); }
.ss-title { display: block; font: 400 1.4375rem/1.25 var(--serif); }
.ss-note { display: block; margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); max-width: 40em; }
.ss-table { width: 100%; border-collapse: collapse; margin-top: 22px; }
.ss-table th {
  text-align: left; padding: 0 20px 10px 0; border-bottom: 1px solid var(--ink);
  font: 700 var(--text-caps)/1.3 var(--sans); text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--ink-soft);
}
.ss-table td { vertical-align: top; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--rule); }
.ss-table td:first-child { width: 50%; font: 500 1rem/1.5 var(--sans); color: var(--ink-soft); }
.ss-table td:last-child { font: 400 1.0625rem/1.5 var(--serif); padding-right: 0; }
.ss-table tr:last-child td { border-bottom: 0; }
@media (max-width: 599px) {
  .ss-table, .ss-table tbody, .ss-table tr, .ss-table td { display: block; width: auto; }
  .ss-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .ss-table tr { padding: 12px 0 14px; border-bottom: 1px solid var(--rule); }
  .ss-table tr:last-child { border-bottom: 0; }
  .ss-table td { border: 0; padding: 2px 0; width: auto !important; }
  .ss-table td::before {
    content: attr(data-label); display: block; margin: 6px 0 2px;
    font: 700 var(--text-caps)/1.4 var(--sans); text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--ink-soft);
  }
}
.hard { display: grid; gap: 24px clamp(40px, 6vw, 88px); align-items: start; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .hard { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.hard-text p { max-width: 36em; }
.hard-text p + p { margin-top: 1em; }
.handling { list-style: none; counter-reset: h; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.handling li {
  counter-increment: h; position: relative; padding: 14px 0 14px 2.25rem;
  border-bottom: 1px solid var(--rule-strong); font: italic 400 clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem)/1.35 var(--serif);
}
.handling li::before { content: counter(h); position: absolute; left: 0; top: 15px; font: normal 400 1.75rem/1 var(--display); color: var(--cloth); }

/* ---------- home: how it's made ---------- */
.made-section { background: var(--linen); }
.made-grid { display: grid; gap: 44px clamp(40px, 6vw, 88px); }
@media (min-width: 900px) { .made-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.made-grid .h3 { padding-bottom: 12px; margin-bottom: 0; border-bottom: 1px solid var(--ink); }
.ledger > div { display: grid; gap: 4px; padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.ledger dt { font-weight: 700; }
.ledger dd { font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 600px) { .ledger > div { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 22px; } }
/* every book's last page says how it was made: shown as that page */
/* flex, not grid: a square page in an auto-sized grid track can widen the track to its height */
.colophon-row { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-top: clamp(72px, 9vw, 112px); text-align: center; }
.colophon-intro { font: 400 clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem)/1.45 var(--serif); max-width: 30rem; }
.colophon-figure { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.colophon {
  display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 420px; aspect-ratio: 1 / 1;
  margin: 0; padding: clamp(24px, 6vw, 44px); background: var(--page); box-shadow: var(--shadow-page); text-align: center;
}
.colophon p { font: 400 1rem/1.6 var(--serif); color: var(--ink-soft); }
.colophon p:first-child { color: var(--ink); margin-bottom: 10px; }
@media (max-width: 379px) { .colophon { aspect-ratio: auto; min-height: 280px; } }

/* ---------- home: questions ---------- */
.faq-grid { display: grid; gap: 28px clamp(40px, 6vw, 88px); align-items: start; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .faq-side { position: sticky; top: 28px; } }
.faq-side .h2 { margin-bottom: 14px; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule-strong); }
.faq summary {
  position: relative; display: block; list-style: none; cursor: pointer; min-height: 60px;
  padding: 17px 48px 17px 0; font: 600 1.1875rem/1.4 var(--sans);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: linear-gradient(var(--cloth), var(--cloth)) center / 16px 2px no-repeat, linear-gradient(var(--cloth), var(--cloth)) center / 2px 16px no-repeat;
}
.faq details[open] summary::after { background: linear-gradient(var(--cloth), var(--cloth)) center / 16px 2px no-repeat; }
.faq summary:hover { color: var(--cloth); }
.answer { padding: 0 48px 22px 0; max-width: calc(var(--measure) + 48px); }
.answer p + p { margin-top: 0.8em; }
@media (max-width: 599px) { .answer { padding-right: 0; } .faq summary { font-size: 1.125rem; } }

/* ---------- home: closing, set like a title page ---------- */
.closing { background: var(--linen); padding: var(--section) 0; text-align: center; }
.closing .wrap { display: grid; justify-items: center; }
.closing-leaf { width: 36px; height: 36px; margin: 0 auto 20px; }
.closing-over { font: italic 400 1.25rem/1.3 var(--serif); color: var(--ink-soft); margin: 0 0 16px; }
.closing-title { font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem); max-width: 10em; }
.closing-rule { display: block; width: 64px; height: 1px; margin: 28px auto; background: var(--cloth); }
.closing .lede { margin: 0 auto 30px; max-width: 28em; }
.closing .fine { margin: 14px auto 0; }
@media (max-width: 479px) { .closing .btn { width: 100%; } }

/* ---------- footer ---------- */
.site-foot { background: var(--night); color: var(--night-soft); padding: 56px 0 40px; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.site-foot a { color: var(--night-ink); }
.site-foot a:hover { color: var(--paper); }
/* the rule under the columns runs their full width; the small print sits under it */
.foot-grid { display: grid; gap: 32px 48px; padding-bottom: 40px; border-bottom: 1px solid var(--night-rule); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); } }
.wordmark-foot, .wordmark-foot:hover { color: var(--night-ink); }
/* the wordmark keeps the white it has always turned on hover (it is the logo; the rule above loses to .site-foot a:hover) */
.site-foot .wordmark-foot:hover { color: #fff; }
.wordmark-foot .wordmark-from { color: var(--night-soft); }
.foot-about { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; max-width: 24rem; }
.foot-about img { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); font-weight: 600; text-decoration: none; }
.foot-links a:hover, .foot-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
/* the address sits in a sentence: 44px to touch without moving the line */
.foot-contact a {
  display: inline-block; max-width: 100%; padding-block: 11px; margin-block: -11px;
  overflow-wrap: anywhere; font-weight: 600;
}
.foot-contact + p { margin-top: 12px; }   /* clear of the address's 44px (it reaches 11px below its line) */
.foot-contact + p a { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: 600; }
.foot-small {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--night-rule);
  font-size: 1rem; line-height: 1.6; max-width: 62em;
}
.foot-grid + .foot-small { margin-top: 22px; padding-top: 0; border-top: 0; }

/* phones: a start button waits at the bottom once the hero's buttons have scrolled away (site.js) */
.sticky-cta { display: none; }
@media (max-width: 599px) {
  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--page); border-top: 1px solid var(--rule-strong);
    box-shadow: 0 -10px 24px -18px rgba(var(--shadow-rgb), 0.45);
  }
  html { scroll-padding-bottom: 84px; }
}

/* ---------- plain pages: privacy, terms, thank you, not found ---------- */
.page-head { background: var(--linen); padding: clamp(28px, 4.6vw, 64px) 0 clamp(40px, 5vw, 64px); }
.crumb { font-size: 1rem; line-height: 1.4; color: var(--ink-soft); margin: 0 0 18px; }
/* the way home: 44px to touch, without moving the line (form.css's .form-crumb does the same) */
.crumb a {
  display: inline-block; padding-block: 11px; margin-block: -11px;
  color: var(--ink-soft); text-decoration-color: var(--rule-strong); text-underline-offset: 4px;
}
.crumb a:hover { color: var(--cloth); }
.page-head .lede { margin-top: 20px; }
.reading { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.reading .wrap > * { max-width: 44rem; }
.prose-page h2 { font: 400 clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem)/1.2 var(--serif); margin: 2em 0 0.55em; }
.prose-page h2:first-child { margin-top: 0; }
.prose-page p, .prose-page li { max-width: var(--measure); }
.prose-page p + p { margin-top: 1em; }
.prose-page ul { padding-left: 1.2em; margin: 0.8em 0 1em; }
.prose-page li { margin-bottom: 0.5em; }
.prose-page li::marker { color: var(--cloth); }
.prose-page a:not(.btn) { font-weight: 700; overflow-wrap: anywhere; }
.updated { font-size: 1rem; color: var(--ink-soft); margin-bottom: 26px !important; }
/* the short version: ruled above and below, like a summary at the head of a document */
.plain-box { margin: 0 0 clamp(36px, 4vw, 52px); padding: 20px 0 22px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-strong); }
.prose-page .plain-box h2 {
  margin: 0 0 12px; font: 700 1rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--ink-soft);
}
.plain-box p { font-size: 1.1875rem; line-height: 1.55; }
.plain-box p + p { margin-top: 0.7em; }
.page-list { list-style: none; padding: 0 !important; margin: 0 !important; border-top: 1px solid var(--ink); }
.page-list li { margin: 0 !important; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.page-list li > a:first-child { display: inline-flex; align-items: center; min-height: var(--target-min); }