/* Typesheep — typeset like a book interior. Cream paper, ink, one vermilion. */

@font-face { font-family: "Source Serif 4"; src: url(fonts/SourceSerif4-Regular.otf); font-weight: 400; }
@font-face { font-family: "Source Serif 4"; src: url(fonts/SourceSerif4-It.otf); font-style: italic; font-weight: 400; }
@font-face { font-family: "Source Serif 4"; src: url(fonts/SourceSerif4-Semibold.otf); font-weight: 600; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/SourceSans3-Regular.otf); font-weight: 400; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/SourceSans3-Semibold.otf); font-weight: 600; }

:root {
  --paper: #f6f1e5;
  --paper-deep: #efe7d4;
  --ink: #1b1710;
  --ink-soft: #4c443a;
  --ink-faint: #857a69;
  --rule: #c9bda4;
  --vermilion: #b23a1e;
  --vermilion-deep: #8e2d15;
  --pass: #3d6b43;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Source Sans 3", sans-serif;

  /* One type scale, ten steps. There were forty-one sizes here, nineteen of
     them between .6 and .9rem — differences of half a pixel that the eye
     reads as sloppiness rather than hierarchy. Every piece of UI chrome picks
     a step; nothing sets a raw rem. The Word and Amazon mock-ups are exempt:
     they are pictures of someone else's typography, not ours. */
  --t-3xs: .62rem;   /* micro: folios, stamps, tiny tags */
  --t-2xs: .7rem;    /* eyebrows, field labels, pills */
  --t-xs:  .78rem;   /* notes, captions, secondary UI */
  --t-sm:  .86rem;   /* controls, list items, tables */
  --t-md:  1rem;     /* body copy and inputs */
  --t-lg:  1.15rem;  /* card headings, lead-ins */
  --t-xl:  1.4rem;   /* panel titles */
  --t-2xl: 1.8rem;   /* section headings */
  --t-3xl: 2.2rem;   /* display numerals */
  --t-4xl: 2.7rem;   /* the price, the page arrows */

  /* and two tracking steps, down from thirteen: small caps need air, smaller
     caps need more of it. Nothing else is tracked. */
  --track-wide:  .1em;
  --track-wider: .16em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* anchored sections land below the sticky masthead */
[id] { scroll-margin-top: 5.2rem; }

body {
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  /* paper grain */
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(255,255,255,.55), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sheet { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---- small caps eyebrow ---- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-2xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--vermilion);
}

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

/* ---- masthead: sticky so the upload CTA is never out of reach ---- */
header.masthead {
  padding: 1.1rem 0 .95rem;
  border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 241, 229, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.masthead .sheet {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: .3rem;
}
.brand { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
/* The wordmark is one word. At .28em the uppercase letters drifted so far
   apart that TYPE and SHEEP read as two, and the colour change landed exactly
   on that seam and confirmed it. Normal tracking, and the mark and the name
   sit on one centred line instead of a flex baseline fighting a vertical-align
   nudge. */
.wordmark {
  display: inline-flex; align-items: center; gap: .42rem;
  font-family: var(--sans); font-weight: 600; font-size: var(--t-lg);
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); line-height: 1;
}
.wordmark .press { color: var(--vermilion); }
/* the above-the-fold answer to "what is this": pinned to the masthead so
   it survives on every page, not just the homepage hero */
.tagline {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-faint);
  white-space: nowrap;
}
@media (max-width: 40rem) { .tagline { display: none; } }
.masthead nav a {
  font-family: var(--sans); font-size: var(--t-xs); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
  margin-left: 1.6rem;
}
.masthead nav a:hover { color: var(--vermilion); }
.masthead nav { display: flex; align-items: center; flex-wrap: wrap; row-gap: .4rem; }
.masthead nav a.nav-cta {
  color: var(--paper); background: var(--ink); font-weight: 600;
  padding: .55rem .95rem;
}
.masthead nav a.nav-cta:hover { color: var(--paper); background: var(--vermilion); }
@media (max-width: 46rem) { .masthead nav a.nav-cta { display: none; } }

/* ---- hero: a title page ---- */
.hero { text-align: center; padding: 4.2rem 0 3rem; }
.hero h1 {
  font-weight: 600; font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.08; letter-spacing: -.01em; margin: 1.1rem auto .9rem;
  max-width: 18ch;
}
.hero h1 em { font-style: italic; color: var(--vermilion); }
.hero .sub {
  font-style: italic; font-size: var(--t-lg); color: var(--ink-soft);
  max-width: 44ch; margin: 0 auto;
}
.hero .fleuron { margin: 1.6rem auto; color: var(--vermilion); font-size: var(--t-lg); }

/* duo hero: hook + sub + upload tray on the left, the before/after proof
   pages on the right — copy, proof and the CTA all above the fold */
.hero.hero-duo { padding: 2.2rem 0 2.2rem; text-align: left; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.5fr;
  gap: 2.2rem; align-items: center; }
.hero-duo h1 { font-size: clamp(1.9rem, 3.1vw, 2.6rem);
  margin: .8rem 0 .7rem; max-width: none; }
.hero-duo .sub { font-size: var(--t-md); max-width: 44ch; margin: 0 0 1.6rem; }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero-duo .hero-copy { text-align: center; }
  .hero-duo .sub { margin-left: auto; margin-right: auto; }
  .hero-duo .assurances { justify-content: center; }
  .hero-duo .tray-note { text-align: center; }
  .hero-duo .hero-upload { margin-left: auto; margin-right: auto; }
}

/* slim tray: one-line dropzone with the button inline, like a form field */
.hero-upload { max-width: 30rem; margin: 0; }
.hero-duo .assurances { justify-content: flex-start; gap: .35rem 1.1rem; }
.hero-duo .tray-note { text-align: left; }
.hero-duo .compare { margin: 0; max-width: none; gap: .8rem; }
.tray.tray-slim {
  max-width: none; padding: 1.15rem 1.35rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; text-align: left;
}
.tray-slim .tray-copy { min-width: 0; }
.tray-slim h2 { font-size: var(--t-lg); }
.tray-slim p { margin-top: .2rem; font-size: var(--t-xs); }
.tray-slim .browse { margin-top: 0; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 34rem) {
  .tray.tray-slim { flex-direction: column; text-align: center; gap: .8rem; }
}

/* risk reversal, pinned right under the call to action */
.assurances {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .35rem 1.5rem; margin: 1rem auto 0;
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-soft);
}
.assurances li::before { content: "✓ "; color: var(--pass); font-weight: 600; }
.tray-note { font-family: var(--sans); font-size: var(--t-xs);
  color: var(--ink-faint); margin-top: .55rem; text-align: center; }

/* typeset · checked · certified divider */
.certline {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  max-width: 34rem; margin: 2.3rem auto 0; padding: .75rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-weight: 600; font-size: var(--t-2xs);
  letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--ink-faint);
}
.certline .dia { width: 6px; height: 6px; background: var(--vermilion);
  transform: rotate(45deg); flex-shrink: 0; }

/* small sheep mark beside the wordmark; hides itself if the image file
   is missing so the header never shows a broken icon. Alignment and spacing
   are the flex parent's job now — no vertical-align nudge to keep in sync. */
.wordmark .sheeplogo { height: 1.5em; width: auto; flex-shrink: 0; }

/* ---- hero compare: the doc you have vs the book we ship ---- */
.compare {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.4rem;
  align-items: stretch; max-width: 54rem; margin: 2.6rem auto 0;
  text-align: left;
}
.compare .pane { margin: 0; display: flex; flex-direction: column; }
.compare figcaption {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-2xs);
  letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--ink-faint);
  text-align: center; margin-bottom: .7rem;
}
.compare-arrow {
  align-self: center; text-align: center; font-family: var(--sans);
  font-weight: 600; font-size: var(--t-3xs); letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--ink-faint); max-width: 4rem;
}
/* left: the word processor */
.docwin {
  background: #fdfdfd; border: 1px solid #c8c8c8;
  box-shadow: 4px 4px 0 rgba(27,23,16,.08); flex: 1;
}
.docbar {
  display: flex; align-items: center; gap: .35rem;
  padding: .45rem .6rem; background: #e9e9e9; border-bottom: 1px solid #c8c8c8;
}
.docbar i { width: .55rem; height: .55rem; border-radius: 50%; background: #c2c2c2; }
.docbar span {
  font-family: var(--sans); font-size: .64rem; color: #777; margin-left: .3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docbody {
  padding: 1.1rem 1.2rem 1.3rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: .78rem; line-height: 2.05; color: #333;
}
.docbody p { margin-bottom: .9em; }
.docbody .doc-h { font-weight: 700; text-decoration: underline; font-size: .86rem; }
.docbody .indented { text-indent: 2.2em; line-height: 1.5; } /* the inconsistency is the point */
.docbody .sq { text-decoration: underline wavy #d33; text-decoration-skip-ink: none; }
.docbody .hl { background: #ffe95e; }

/* right: the typeset page, styled like the proof-desk leaf */
.bookpage {
  background: white; border: 1px solid var(--rule);
  box-shadow: 6px 6px 0 rgba(27,23,16,.1);
  padding: 1.4rem 1.5rem 1rem; flex: 1;
  display: flex; flex-direction: column;
}
.bookpage .running-head {
  font-style: italic; font-size: .66rem; letter-spacing: .08em;
  color: var(--ink-faint); text-align: center; margin-bottom: 1.2rem;
}
.bookpage .chap-kicker {
  font-family: var(--sans); font-weight: 600; font-size: .6rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--vermilion);
  text-align: center;
}
.bookpage .chap-title {
  font-weight: 600; font-size: 1.15rem; text-align: center;
  margin: .35rem 0 1.1rem;
}
.bookpage p {
  font-size: .78rem; line-height: 1.62; text-align: justify; hyphens: auto;
}
.bookpage p.indent { text-indent: 1.4em; }
.bookpage .dropcap {
  float: left; font-size: 2.55rem; line-height: .82;
  padding: .08em .08em 0 0; font-weight: 600; color: var(--vermilion);
}
.bookpage .folio {
  margin-top: auto; padding-top: .9rem; text-align: center;
  font-size: .66rem; color: var(--ink-faint);
}
.pane-tags { display: flex; gap: .45rem; justify-content: center; margin-top: .7rem; }
.pane-tags span {
  font-family: var(--sans); font-size: var(--t-3xs); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--pass);
  border: 1px solid var(--pass); padding: .18rem .5rem; white-space: nowrap;
}

@media (max-width: 46rem) {
  .compare { grid-template-columns: 1fr; max-width: 26rem; }
  .compare-arrow { max-width: none; padding: .3rem 0; }
}

/* both proof pages locked to the same size and to letter-page proportions
   (8.5 x 11); overflow fades out at the foot */
.page-fixed { aspect-ratio: 8.5 / 11; flex: none; overflow: hidden;
  position: relative; }
.page-fixed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4rem; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 82%);
}
.bookpage.page-fixed { padding-bottom: 1.4rem; }
.bookpage .folio { position: relative; z-index: 1; }
.compare-arrow .circ {
  width: 2.7rem; height: 2.7rem; border: 1px solid var(--rule);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--vermilion); font-size: var(--t-lg); background: var(--paper-deep);
  margin: 0 auto;
}
.cap-hint {
  display: block; font-family: var(--sans); font-weight: 400; font-size: var(--t-2xs);
  letter-spacing: var(--track-wide); text-transform: none; color: var(--ink-faint);
  text-align: center; margin-top: .5rem; max-width: 5.5rem;
}

/* hover the finished page and the raw manuscript wipes back over it */
.haswipe { position: relative; overflow: hidden; }
.haswipe .wipe {
  position: absolute; inset: 0; background: #fdfdfd;
  clip-path: inset(0 0 0 100%);
  transition: clip-path .42s cubic-bezier(.4, .05, .2, 1);
  pointer-events: none;
}
.haswipe:hover .wipe { clip-path: inset(0 0 0 0); }
.haswipe .wipe .docbody { padding: 1.1rem 1.2rem; }
/* undo the bookpage's justified serif inside the raw-manuscript overlay */
.haswipe .wipe p { text-align: left; hyphens: manual;
  font-size: inherit; line-height: inherit; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .haswipe .wipe, .cap-hint { display: none; }
}

/* repeated section-closing call to action */
.cta-line { text-align: center; margin-top: 2.1rem; }
.cta-link {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--ink);
  text-decoration: none; border-bottom: 2px solid var(--vermilion);
  padding-bottom: .25rem;
}
.cta-link:hover { color: var(--vermilion); }

/* where the rulebook comes from (credibility, stated plainly) */
.source-note { font-family: var(--sans); font-size: var(--t-xs);
  color: var(--ink-faint); max-width: 46rem; margin-top: 1rem; }

/* ---- upload tray ---- */
.tray {
  max-width: 34rem; margin: 0 auto; padding: 2.2rem 2rem 1.8rem;
  border: 1.5px solid var(--ink);
  background: var(--paper-deep);
  box-shadow: 6px 6px 0 rgba(27,23,16,.12);
  cursor: pointer; position: relative;
  transition: box-shadow .18s ease, transform .18s ease;
}
.tray:hover, .tray.drag { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 rgba(178,58,30,.22); }
.tray .corner { position: absolute; width: 10px; height: 10px; border-color: var(--vermilion); border-style: solid; border-width: 0; }
.tray .corner.tl { top: 5px; left: 5px; border-top-width: 2px; border-left-width: 2px; }
.tray .corner.tr { top: 5px; right: 5px; border-top-width: 2px; border-right-width: 2px; }
.tray .corner.bl { bottom: 5px; left: 5px; border-bottom-width: 2px; border-left-width: 2px; }
.tray .corner.br { bottom: 5px; right: 5px; border-bottom-width: 2px; border-right-width: 2px; }
.tray h2 { font-size: var(--t-lg); font-weight: 600; }
.tray p { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-faint); margin-top: .45rem; }
.tray .browse {
  display: inline-block; margin-top: 1.1rem; font-family: var(--sans); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: var(--track-wider); text-transform: uppercase;
  color: var(--paper); background: var(--ink); padding: .7rem 1.5rem;
}
.tray:hover .browse { background: var(--vermilion); }
.tray input { display: none; }
.tray.busy { pointer-events: none; opacity: .7; }

/* ---- ledger tables (checks, report) ---- */
.ledger { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--t-sm); }
.ledger th {
  text-align: left; font-size: var(--t-2xs); letter-spacing: var(--track-wider); text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: .45rem .6rem .45rem 0;
  border-bottom: 2px solid var(--ink);
}
.ledger td { padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger .mark { font-weight: 600; white-space: nowrap; }
.mark.pass { color: var(--pass); }
.mark.warn { color: #9a6b12; }
.mark.fail { color: var(--vermilion-deep); }

/* ---- sections ---- */
section.band { padding: 3.4rem 0; }
section.band h2 { font-size: var(--t-2xl); font-weight: 600; margin: .4rem 0 1.4rem; }
.threecol { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; }
.threecol .step h3 { font-size: var(--t-lg); font-weight: 600; margin: .6rem 0 .35rem; }
.threecol .step p { font-size: var(--t-sm); color: var(--ink-soft); }
.dropcapnum {
  font-family: var(--serif); font-style: italic; font-size: var(--t-3xl); color: var(--vermilion);
  line-height: 1;
}

/* ---- colophon / price card ---- */
.colophon {
  border: 2px solid var(--ink); background: var(--paper-deep);
  padding: 1.8rem 1.7rem 1.5rem; position: relative;
}
.colophon .price { font-size: var(--t-4xl); font-weight: 600; line-height: 1; }
.colophon .price small { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-faint); font-weight: 400; }
.colophon ul { list-style: none; margin: 1rem 0 1.2rem; }
.colophon li { font-family: var(--sans); font-size: var(--t-sm); padding: .32rem 0 .32rem 1.3rem; position: relative; }
.colophon li::before { content: "✓"; position: absolute; left: 0; color: var(--pass); font-weight: 600; }
.stamp {
  position: absolute; top: -14px; right: 16px; background: var(--vermilion); color: var(--paper);
  font-family: var(--sans); font-weight: 600; font-size: var(--t-3xs); letter-spacing: var(--track-wider);
  text-transform: uppercase; padding: .35rem .7rem; transform: rotate(2deg);
}

button.press-btn, a.press-btn {
  display: inline-block; width: 100%; text-align: center; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: var(--t-sm);
  letter-spacing: var(--track-wider); text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 0; padding: .95rem 1.4rem;
  text-decoration: none; transition: background .15s ease;
}
button.press-btn:hover, a.press-btn:hover { background: var(--vermilion); }
button.press-btn:disabled { background: var(--ink-faint); cursor: default; }
.press-btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.press-btn.ghost:hover { color: var(--vermilion); border-color: var(--vermilion); background: transparent; }

/* ---- book page layout ---- */
.bookgrid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.6rem; padding: 2.6rem 0 4rem; }
@media (max-width: 54rem) { .bookgrid { grid-template-columns: 1fr; } }

/* ---- the proof desk: the book is the hero ---- */
.proofdesk { padding: 1.2rem 0 .6rem; }
.desk-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap; margin: 1.5rem 0 1.8rem;
}
.desk-title { font-size: var(--t-xl); font-weight: 600; margin-top: .35rem; }
.desk-tabs { display: flex; }
.desk-tab {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: var(--track-wider); text-transform: uppercase; cursor: pointer;
  padding: .55rem 1.15rem; background: transparent; color: var(--ink-soft);
  border: 1.5px solid var(--ink);
}
.desk-tab + .desk-tab { border-left: 0; }
.desk-tab.active { background: var(--ink); color: var(--paper); }
.desk-tab:not(.active):hover { color: var(--vermilion); }

/* spread viewer */
.spread-stage {
  display: grid; grid-template-columns: 3rem 1fr 3rem;
  align-items: center; gap: .4rem;
}
.spread {
  display: flex; justify-content: center; align-items: flex-start; gap: 0;
  min-height: 24rem;
}
.spread .leaf {
  background: white; border: 1px solid var(--rule); padding: 0;
  animation: leaf-in .28s cubic-bezier(.16,1,.3,1) both;
}
.spread .leaf.verso { box-shadow: -9px 9px 0 rgba(27,23,16,.08); border-right: 0; }
.spread .leaf.recto { box-shadow: 9px 9px 0 rgba(27,23,16,.08); }
.spread .leaf img { display: block; height: min(62vh, 38rem); width: auto; }
.spread .leaf.blank {
  height: min(62vh, 38rem); aspect-ratio: 2 / 3;
  background: repeating-linear-gradient(45deg, var(--paper-deep) 0 6px, var(--paper) 6px 12px);
}
@keyframes leaf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spread .leaf { animation: none; } }

.page-arrow {
  font-family: var(--serif); font-size: var(--t-4xl); line-height: 1;
  background: transparent; border: 0; color: var(--ink-soft); cursor: pointer;
  padding: 1.2rem .4rem; transition: color .15s ease;
}
.page-arrow:hover { color: var(--vermilion); }
.page-arrow:disabled { color: var(--rule); cursor: default; }
.spread-caption {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-faint);
  text-align: center; margin-top: .9rem;
}

/* filmstrip */
.filmstrip {
  display: flex; gap: .7rem; overflow-x: auto; padding: 1.1rem .2rem .6rem;
  scrollbar-width: thin;
}
.filmstrip button {
  flex: 0 0 auto; width: 4.1rem; padding: 0; cursor: pointer;
  background: white; border: 1px solid var(--rule);
  box-shadow: 2px 2px 0 rgba(27,23,16,.08);
}
.filmstrip button img { display: block; width: 100%; height: auto; }
.filmstrip button .pgno {
  display: block; font-family: var(--sans); font-size: var(--t-3xs);
  color: var(--ink-faint); padding: .2rem 0 .25rem;
}
.filmstrip button.active { outline: 2px solid var(--vermilion); outline-offset: 1px; }

/* page air: change the line spacing and re-typeset from the proof desk, which
   is where you actually find out the book is too cramped */
.airbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.airbar-label {
  font-family: var(--sans); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-faint);
}
.airbar select {
  font-family: var(--sans); font-size: var(--t-sm); padding: .45rem .55rem;
  border: 1px solid var(--rule); background: white; color: var(--ink);
}
.airbar .press-btn { width: auto; margin: 0; padding: .45rem 1rem; font-size: var(--t-sm); }
.airbar-note {
  flex-basis: 100%; font-family: var(--sans); font-size: var(--t-xs);
  color: var(--ink-faint); margin: 0;
}
.filmstrip button.active .pgno { color: var(--vermilion); font-weight: 600; }

/* kindle reader */
.reader {
  max-width: 41rem; margin: 0 auto;
  border: 1.5px solid var(--ink); background: white;
  box-shadow: 9px 9px 0 rgba(27,23,16,.1);
}
.reader-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--rule);
}
.reader-top select {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink);
  border: 1px solid var(--rule); background: var(--paper); padding: .35rem .5rem;
  max-width: 70%;
}
.reader-count { font-family: var(--sans); font-size: var(--t-2xs); color: var(--ink-faint); white-space: nowrap; }
.reader iframe { display: block; width: 100%; height: min(64vh, 42rem); border: 0; background: white; }
.reader-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .65rem .9rem; border-top: 1px solid var(--rule);
}
.reader-nav {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: var(--track-wide); text-transform: uppercase; cursor: pointer;
  background: transparent; border: 0; color: var(--ink-soft); padding: .3rem .2rem;
}
.reader-nav:hover { color: var(--vermilion); }
.reader-nav:disabled { color: var(--rule); cursor: default; }
.reader-progress { flex: 1; height: 2px; background: var(--rule); }
.reader-progress span { display: block; height: 100%; background: var(--vermilion); transition: width .25s ease; }
.desk-note {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-faint);
  text-align: center; margin-top: .8rem;
}

/* ---- review form ---- */
.qcard { border: 1.5px solid var(--ink); background: var(--paper-deep); padding: 1.5rem 1.5rem 1.3rem; margin-bottom: 1.2rem; }
.qcard h3 { font-size: var(--t-md); font-weight: 600; margin-bottom: .3rem; }
.qcard p.detail { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-soft); margin-bottom: .8rem; }
.qcard input[type=text], .qcard input[type=password] {
  width: 100%; font-family: var(--serif); font-size: var(--t-md); padding: .6rem .7rem;
  border: 1px solid var(--rule); background: white; color: var(--ink);
}
.qcard input:focus { outline: 2px solid var(--vermilion); border-color: transparent; }

/* a question that is really a warning: the lines the author left unfinished,
   quoted so they can be found in the document rather than hunted for */
.flagcard { border-color: var(--vermilion); }
.flagcard h3 { color: var(--vermilion-deep); }
.flaglines { list-style: none; margin: 0 0 1rem; padding: 0; }
.flaglines li {
  font-family: var(--sans); font-size: var(--t-sm); padding: .4rem .6rem;
  background: white; border-left: 3px solid var(--vermilion);
  margin-bottom: .35rem; overflow-wrap: anywhere;
}
.flaglines code { font-family: inherit; color: var(--ink); }
.flaglines .flagmore {
  background: none; border-left: 0; padding-left: 0;
  color: var(--ink-faint); font-size: var(--t-xs);
}
.flagcard .press-btn { width: auto; margin: 0; padding: .5rem 1.1rem; }

/* ---- format card: size / binding / typeface ---- */
.format-card select, .format-card input[type=number] {
  font-family: var(--sans); font-size: var(--t-sm); padding: .55rem .6rem;
  border: 1px solid var(--rule); background: white; color: var(--ink);
}
.format-card > select#ansTrim { width: 100%; }
.format-card select:focus, .format-card input[type=number]:focus {
  outline: 2px solid var(--vermilion); border-color: transparent;
}
.format-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .9rem; margin-top: 1.2rem;
}
.format-grid select { width: 100%; }

/* typeface specimen picker — each card is a little book page in its own face */
.specimens {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .7rem;
}
.specimen {
  position: relative; display: flex; flex-direction: column;
  border: 1.5px solid var(--rule); background: var(--paper); cursor: pointer;
  overflow: hidden; transition: border-color .12s, box-shadow .12s;
}
.specimen:hover { border-color: var(--ink-soft); }
.specimen input { position: absolute; opacity: 0; width: 0; height: 0; }
.specimen.sel { border-color: var(--vermilion); box-shadow: inset 0 0 0 1px var(--vermilion); }
.specimen:focus-within { outline: 2px solid var(--vermilion); outline-offset: 2px; }
.specimen.sel::after {
  content: "✓"; position: absolute; top: .35rem; right: .45rem; z-index: 2;
  font-family: var(--sans); font-weight: 700; font-size: var(--t-2xs); line-height: 1;
  color: white; background: var(--vermilion); width: 1.15rem; height: 1.15rem;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.spec-page {
  display: block; flex: 1; padding: .9rem .95rem 1rem; background: #fbf8ef;
  border-bottom: 1px solid var(--rule);
}
.spec-kicker {
  display: block; font-weight: 600; font-size: var(--t-3xs); letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .32rem;
}
.spec-head {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-weight: 600; font-size: var(--t-lg); line-height: 1.14;
  color: var(--ink); margin-bottom: .5rem;
}
.spec-body {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; font-weight: 400; font-size: var(--t-xs); line-height: 1.5;
  color: var(--ink-soft);
}
.spec-body em { font-style: italic; }
.spec-foot {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem .55rem;
  background: var(--paper-deep);
}
.spec-name { font-family: var(--sans); font-weight: 600; font-size: var(--t-xs); color: var(--ink); }
.specimen.sel .spec-name { color: var(--vermilion-deep); }
.spec-mood {
  margin-left: auto; font-family: var(--sans); font-weight: 600; font-size: var(--t-3xs);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--rule); padding: .12rem .42rem; border-radius: 2px;
}
.spec-note { min-height: 1.05rem; }

/* ---- sign-in gate (login page) ---- */
.signin { max-width: 24rem; margin: 0 auto; padding: 5rem 1.5rem 6rem; text-align: center; }
.signin h1 { font-size: var(--t-3xl); font-weight: 600; margin: .7rem 0 .45rem; }
.signin .note {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-soft);
  margin-bottom: 2.1rem;
}
.gatecard {
  border: 1.5px solid var(--ink); background: var(--paper-deep);
  padding: 1.7rem 1.6rem 1.6rem; text-align: left;
  box-shadow: 6px 6px 0 rgba(27,23,16,.12);
}
.field-label {
  display: block; font-family: var(--sans); font-weight: 600; font-size: var(--t-2xs);
  letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: .45rem;
}
.gatecard input {
  width: 100%; font-family: var(--serif); font-size: var(--t-md); padding: .6rem .7rem;
  border: 1px solid var(--rule); background: white; color: var(--ink);
  margin-bottom: 1.15rem;
}
.gatecard input:focus { outline: 2px solid var(--vermilion); border-color: transparent; }
.gatecard .press-btn { margin-top: .3rem; }
.signin .signedin {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-soft);
  margin-bottom: 1.3rem;
}
.signin .signedin .pill { color: var(--pass); border-color: var(--pass); margin-right: .5rem; }

/* ---- progress ---- */
.pressrun { padding: 3rem 0; text-align: center; }
.pressrun .stage { font-style: italic; font-size: var(--t-lg); color: var(--ink-soft); margin-top: 1rem; min-height: 1.6em; }
.pressline { height: 2px; background: var(--rule); position: relative; overflow: hidden; max-width: 26rem; margin: 1.6rem auto 0; }
.pressline::after {
  content: ""; position: absolute; inset: 0; width: 34%;
  background: var(--vermilion); animation: sweep 1.4s ease-in-out infinite;
}
@keyframes sweep { 0% { left: -34%; } 100% { left: 100%; } }
.stagelist { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-faint); margin-top: 1.2rem; }
.stagelist span.done { color: var(--pass); }
.stagelist span.now { color: var(--vermilion); font-weight: 600; }

/* ---- money-page pillar layout ---- */
.subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.subnav a {
  font-family: var(--sans); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase; text-decoration: none;
  color: var(--ink-soft); border: 1px solid var(--rule); padding: .38rem .75rem;
}
.subnav a:hover, .subnav a[aria-current] { color: var(--vermilion); border-color: var(--vermilion); }
.subnav a[aria-current] { background: var(--paper-deep); }

.toc {
  border: 1px solid var(--rule); background: var(--paper-deep);
  padding: 1.2rem 1.4rem; margin: 0 auto 1rem; max-width: 30rem;
}
.toc .eyebrow { display: block; margin-bottom: .6rem; }
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; font-family: var(--sans); font-size: var(--t-sm); padding: .3rem 0; }
.toc li::before { content: counter(toc) ". "; color: var(--vermilion); font-weight: 600; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--vermilion); }

.prose p, .prose li { font-size: var(--t-md); color: var(--ink-soft); margin-bottom: .9rem; }
.prose ul, .prose ol { margin: 0 0 1.1rem 1.3rem; }
.prose h3 { font-size: var(--t-lg); font-weight: 600; margin: 1.7rem 0 .6rem; color: var(--ink); }
.prose strong { color: var(--ink); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.2rem; margin: 1.6rem 0 2rem; }
.stat { border-left: 2px solid var(--vermilion); padding-left: .8rem; }
.stat .num { font-size: var(--t-2xl); font-weight: 600; line-height: 1.05; }
.stat .label { display: block; font-family: var(--sans); font-size: var(--t-2xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: var(--track-wide); margin-top: .2rem; }

.callout {
  border: 1.5px solid var(--ink); background: var(--paper-deep);
  padding: 1.3rem 1.5rem; margin: 1.7rem 0; font-style: italic; font-size: var(--t-lg);
}
.callout cite { display: block; font-style: normal; font-family: var(--sans); font-size: var(--t-2xs); color: var(--ink-faint); margin-top: .6rem; text-transform: uppercase; letter-spacing: var(--track-wide); }

.faq details { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: var(--t-md); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--vermilion); font-size: var(--t-lg); flex-shrink: 0; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-soft); margin-top: .7rem; }

.crosslinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.crosslinks a {
  display: block; border: 1px solid var(--rule); padding: 1rem 1.1rem; text-decoration: none;
  color: var(--ink); background: var(--paper-deep); transition: border-color .12s;
}
.crosslinks a:hover { border-color: var(--vermilion); }
.crosslinks .xl-label { font-family: var(--sans); font-size: var(--t-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: .3rem; }
.crosslinks .xl-title { font-weight: 600; font-size: var(--t-md); }

/* ---- free-tool calculators ---- */
.calc-box {
  border: 2px solid var(--ink); background: var(--paper-deep);
  padding: 1.8rem 1.7rem; max-width: 30rem; display: grid; gap: 1rem;
}
.calc-row { display: grid; gap: .35rem; }
.calc-row label {
  font-family: var(--sans); font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: var(--track-wide); color: var(--ink-faint);
}
.calc-row select, .calc-row input {
  font-family: var(--sans); font-size: var(--t-md); padding: .55rem .6rem;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
}
.calc-result {
  border-top: 1.5px solid var(--rule); padding-top: 1rem; margin-top: .3rem;
}
.calc-spine { font-size: var(--t-3xl); font-weight: 600; line-height: 1; }
.calc-spine-mm { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-faint); margin-top: .2rem; }
.calc-note { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-soft); margin-top: .7rem; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--rule); padding: 2rem 0 3rem; margin-top: 3rem; }
footer .sheet { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-faint); }
footer .footer-links { margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); }
footer .footer-links a { color: var(--ink-faint); text-decoration: none; }
footer .footer-links a:hover { color: var(--vermilion); }

.error-note { border: 1.5px solid var(--vermilion); padding: .8rem 1rem; background: var(--paper-deep);
  font-family: var(--sans); font-size: var(--t-sm); color: var(--vermilion-deep); margin: 1rem 0; }

.pill { display: inline-block; font-family: var(--sans); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: var(--track-wider); text-transform: uppercase; border: 1px solid var(--rule);
  padding: .2rem .55rem; color: var(--ink-faint); }

/* typeset page specimen (real press output, static render per type theme) */
.spec-render { margin: 1rem auto 0; max-width: 330px; }
/* homepage specimen gallery: three real pages side by side */
.band-note { font-family: var(--sans); font-size: var(--t-sm);
  color: var(--ink-soft); max-width: 46ch; margin-bottom: .6rem; }
.spec-row { display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.spec-row .spec-render { margin-top: .6rem; max-width: 300px; }

/* product screenshots: framed like proofs pinned to the desk */
.shot-row { display: grid; gap: 1.8rem; margin-top: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); box-shadow: 6px 6px 0 rgba(27, 23, 16, .1); }
.shot figcaption { font-family: var(--sans); font-size: var(--t-xs);
  color: var(--ink-faint); margin-top: .6rem; }
.spec-render img { display: block; width: 100%; height: auto; background: #fff;
  border: 1px solid var(--rule); box-shadow: 0 12px 28px rgba(27, 23, 16, .13); }
.spec-render figcaption { text-align: center; margin-top: .55rem;
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-faint); }

/* live working indicator: animated ellipsis on the detection stage line */
.working::after { content: ""; display: inline-block; width: 1.4em; text-align: left;
  animation: workdots 1.2s steps(1, end) infinite; }
@keyframes workdots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}

/* ---------- add-ons: Launch kit, reader's report, listing preview ---------- */

/* the base certified-build feature list sitting above the package tiers */
.tier-base { list-style: none; margin: .7rem 0 1rem; }
.tier-base li { font-family: var(--sans); font-size: var(--t-sm);
  color: var(--ink-soft); padding: .2rem 0 .2rem 1.2rem; position: relative; }
.tier-base li::before { content: "✓"; position: absolute; left: 0;
  color: var(--pass); font-weight: 600; }

/* package tiers: A (book) / B (+ report) / C (+ Launch kit), one radio
   choice, never a pile of separate add-on checkboxes */
.tiers { border-top: 1px solid var(--rule); margin-bottom: 1rem; }
.tier { display: block; cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--rule); padding: .8rem 0; }
.tier input { accent-color: var(--vermilion); margin-right: .5rem; }
.tier-row { display: flex; justify-content: space-between; align-items: baseline; }
.tier-name { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); color: var(--ink); }
.tier-price { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); color: var(--ink); }
.tier-desc { display: block; font-family: var(--sans); font-size: var(--t-xs);
  color: var(--ink-faint); margin: .25rem 0 0 1.35rem; }
.tier:has(input:checked) { background: var(--paper-deep); margin: 0 -1.7rem;
  padding-left: 1.7rem; padding-right: 1.7rem; }

.addon-copy { font-family: var(--sans); font-size: var(--t-sm);
  color: var(--ink-soft); margin-bottom: .8rem; }

.kit-field { border: 1px solid var(--rule); background: rgba(255, 255, 255, .45);
  padding: .8rem .9rem; margin-bottom: .8rem; }
.kit-field-head { display: flex; justify-content: space-between;
  align-items: baseline; gap: 1rem; margin-bottom: .45rem; }
.kit-label { font-family: var(--sans); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-faint); }
.kit-text { font-family: var(--sans); font-size: var(--t-sm); line-height: 1.5;
  overflow-wrap: anywhere; }
.kit-text p { margin: 0 0 .6em; }
.kit-notes { font-family: var(--sans); font-size: var(--t-xs);
  color: var(--ink-faint); margin-top: .4rem; }

.copybtn, .chip { font-family: var(--sans); font-size: var(--t-2xs); font-weight: 600;
  border: 1px solid var(--rule); background: none; color: var(--ink-soft);
  padding: .22rem .6rem; cursor: pointer; white-space: nowrap; }
.copybtn:hover, .chip:hover { border-color: var(--vermilion); color: var(--vermilion); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { font-weight: 400; }

/* Amazon-style listing preview: deliberately "storefront white" inside a
   letterpress frame — the one place the paper metaphor steps aside */
.listing { display: grid; grid-template-columns: minmax(120px, 180px) 1fr minmax(150px, 190px);
  gap: 1.4rem; background: #fff; border: 1px solid var(--rule);
  box-shadow: 0 12px 28px rgba(27, 23, 16, .13); padding: 1.4rem;
  font-family: Arial, Helvetica, sans-serif; color: #0f1111; }
.listing-cover { text-align: center; }
.listing-cover img { width: 100%; border: 1px solid #ddd; display: block; }
.listing-cover span { font-size: .68rem; color: #767676; }
.listing-main h2 { font-family: Georgia, serif; font-weight: 400;
  font-size: 1.35rem; line-height: 1.25; margin-bottom: .15rem; }
.listing-by { font-size: .84rem; color: #007185; margin-bottom: .5rem; }
.listing-rule { border-top: 1px solid #e7e7e7; margin: .6rem 0; }
.listing-desc { font-size: .86rem; line-height: 1.5; }
.listing-desc p { margin: 0 0 .6em; }
.listing-meta { font-size: .76rem; color: #565959; margin-top: .7rem; }
.listing-buy { border: 1px solid #d5d9d9; border-radius: 8px; padding: 1rem;
  height: fit-content; text-align: center; font-size: .82rem; }
.listing-price { font-size: 1.6rem; color: #b12704; }
.listing-buy-note { font-size: .72rem; color: #565959; margin-top: .6rem; }
@media (max-width: 760px) { .listing { grid-template-columns: 1fr; } }

/* landing: your books */
.mybooks { max-width: 44rem; margin: 2.5rem auto 0; }
.mybooks a { display: flex; justify-content: space-between; gap: 1rem;
  align-items: baseline; font-family: var(--sans); font-size: var(--t-sm);
  color: var(--ink); text-decoration: none; padding: .55rem .2rem;
  border-bottom: 1px solid var(--rule); }
.mybooks a:hover { color: var(--vermilion); }
.mybooks .mb-status { font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }