/* ============================================================================
   TruNaut — the leather edition
   ----------------------------------------------------------------------------
   Aged laid paper, bound in leather at the gutter. The site behaves like a
   printed volume:
   running heads, hanging chapter numerals rubricated in oxblood, and plates
   tipped into the outer margin the way an illustrated edition sets its
   figures — each one cited by the prose that surrounds it.

   Two accents with two jobs, as in the books this is imitating: gilt for the
   binding and the rules, oxblood for rubrication — initials, numerals, the
   things a scribe would have picked out in red.
   ========================================================================== */

:root {
  /* --- the binding ------------------------------------------------------ */
  --leather:       #4E2519;
  --leather-deep:  #2B120C;
  --leather-light: #6E3A25;

  /* --- the paper -------------------------------------------------------- */
  --paper:       #F0E5CE;
  --paper-shade: #E7D9BE;
  --paper-sunk:  #DFCFAE;
  --paper-edge:  #C9B593;

  /* --- gilt (binding, rules) & oxblood (rubrication) -------------------- */
  --gilt:        #8F681C;   /* text-safe gold */
  --gilt-bright: #B98F35;
  --gilt-pale:   #E5C983;   /* foil highlight, on leather only */
  --oxblood:       #7C2B22;
  --oxblood-light: #9C3D31;

  /* --- ink -------------------------------------------------------------- */
  --ink:       #33241A;
  --ink-lo:    #63503F;
  --ink-faint: #7A6244;

  /* --- rules ------------------------------------------------------------ */
  --rule:        rgba(124, 43, 34, 0.20);
  --rule-strong: rgba(124, 43, 34, 0.42);
  --rule-gilt:   rgba(143, 104, 28, 0.38);
  --rule-soft:   rgba(51, 36, 26, 0.13);

  /* --- type ------------------------------------------------------------- */
  --display:   "IM Fell English", "Baskerville", "Times New Roman", serif;
  --text:      "EB Garamond", "Garamond", "Iowan Old Style", Georgia, serif;
  --apparatus: "IM Fell English SC", "IM Fell English", Georgia, serif;

  /* --- measure & rhythm ------------------------------------------------- */
  --measure: 34rem;
  --rail:    21rem;
  --max:     72rem;
  --pad:     clamp(1.25rem, 5vw, 3.5rem);
  --head-h:  3.75rem;

  --grain: 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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

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

html {
  background: var(--leather-deep);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.1875rem;   /* EB Garamond runs small */
  line-height: 1.66;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* the tooth of the paper */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  pointer-events: none;
  z-index: 9;
  mix-blend-mode: multiply;
}

img { max-width: 100%; display: block; }

::selection { background: rgba(143, 104, 28, 0.26); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 9px;
}

/* ============================================================================
   1. TYPE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.008em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); }

/* the display face is reserved for title pages and chapter openings;
   subheads are set in the text face so the page doesn't shout */
h3, h4 {
  font-family: var(--text);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
h4 { font-size: 1.2rem; }

h1 em, h2 em, h3 em { font-style: italic; color: var(--oxblood); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--oxblood); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--oxblood-light); }

strong { font-weight: 600; color: var(--ink); }

/* the apparatus, set in the small caps of the Fell types — not tracked-out
   caps, which is what made this read as a jeweller's brochure */
.eyebrow,
.folio,
.plate-fignum,
.rh-chapter,
.tier-tag,
.role,
.updated {
  font-family: var(--apparatus);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--gilt);
}

.eyebrow {
  display: block;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: var(--rule-gilt);
  vertical-align: 0.28em;
  margin-right: 0.7rem;
}

.lede {
  font-size: clamp(1.2rem, 1.9vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-lo);
}

/* ============================================================================
   2. THE TEXT BLOCK
   ========================================================================== */

.book { position: relative; z-index: 10; background: var(--paper); }

/* the gutter: the page curving into the binding down the left edge */
.book::before {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: clamp(0.75rem, 2.5vw, 2rem);
  background: linear-gradient(90deg, rgba(43, 18, 12, 0.22), rgba(43, 18, 12, 0.05) 45%, transparent);
  pointer-events: none;
  z-index: 30;
}

/* ============================================================================
   3. RUNNING HEAD
   ========================================================================== */

.rh {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--head-h);
  background: rgba(240, 229, 206, 0.88);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--rule-gilt);
}

.rh-row {
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.015em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand img {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 24%;
  box-shadow: 0 2px 6px rgba(43, 18, 12, 0.22);
}

/* which chapter you are standing in */
.rh-chapter {
  flex: 1;
  min-width: 0;
  text-align: center;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.35s ease;
}
.rh-chapter:empty { opacity: 0; }

.rh-links { display: flex; align-items: center; gap: 1.4rem; }

.rh-links a {
  font-family: var(--apparatus);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--ink-lo);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}
.rh-links a:hover { color: var(--oxblood); border-bottom-color: var(--rule-strong); }
.rh-links a[aria-current="page"] { color: var(--oxblood); border-bottom-color: var(--rule-strong); }

.rh-cta {
  flex-shrink: 0;
  font-family: var(--apparatus);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: #F5EAD3;
  background: var(--oxblood);
  padding: 0.6rem 1.05rem;
  text-decoration: none;
  border-radius: 9px;
}
.rh-cta:hover { background: var(--oxblood-light); color: #F5EAD3; }

.rh-toggle {
  display: none;
  appearance: none;
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--oxblood);
  width: 2.5rem; height: 2.3rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

/* ============================================================================
   4. PAGE GRID
   ========================================================================== */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.leaf { padding: clamp(4rem, 10vh, 7rem) 0; }
/* a section that continues the one above it, with no new opening */
.leaf-continued { padding-top: 0; }
.measure { max-width: var(--measure); }

.section-head { max-width: var(--measure); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.section-head p { color: var(--ink-lo); margin-top: 1.1rem; }

/* ============================================================================
   5. TITLE PAGE + FRONTISPIECE
   ========================================================================== */

.title-page { padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(4rem, 9vh, 6.5rem); }

.title-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* the masthead: the mark at a size that can actually be read, and the
   imprint under it — this is the branding the cover used to carry */
.masthead {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.35rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.4rem);
  padding-bottom: clamp(1.4rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--rule-gilt);
}
.masthead-mark {
  width: clamp(4.5rem, 9.5vw, 6rem);
  height: auto;
  border-radius: 23%;
  flex-shrink: 0;
  box-shadow:
    0 12px 28px rgba(43, 18, 12, 0.30),
    0 0 0 1px rgba(43, 18, 12, 0.14);
}
.masthead-words { display: grid; gap: 0.2rem; min-width: 0; }
.masthead-name {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1;
  color: var(--ink);
}
.masthead-imprint {
  font-family: var(--apparatus);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--gilt);
}

.title-copy h1 { margin-bottom: 1.4rem; }
.title-copy .lede { margin-bottom: 2.1rem; }

/* the frontispiece is a tipped-in plate: dark screen on a paper mount */
.frontis {
  margin: 0;
  background: var(--paper-shade);
  border: 1px solid var(--paper-edge);
  padding: 0.6rem;
  border-radius: 9px;
  box-shadow: 0 16px 34px rgba(43, 18, 12, 0.18);
}

.frontis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: var(--leather-deep);
  border-radius: 9px 9px 0 0;
  font-family: var(--apparatus);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(240, 229, 206, 0.62);
}
.frontis-dots { display: flex; gap: 0.32rem; }
.frontis-dots span {
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: rgba(240, 229, 206, 0.28);
}

.frontis-body {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: #241109;
  border-radius: 0 0 9px 9px;
  color: rgba(240, 229, 206, 0.9);
}

.demo-passage {
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(240, 229, 206, 0.72);
  margin-bottom: 0.9rem;
}

.demo-highlight {
  background: rgba(229, 201, 138, 0.20);
  box-shadow: inset 0 -1px 0 rgba(229, 201, 138, 0.5);
  color: #F5EAD3;
  cursor: pointer;
  border-radius: 9px;
  padding: 0.05em 0.1em;
  transition: background 0.3s ease;
}
.demo-highlight:hover { background: rgba(229, 201, 138, 0.34); }
.demo-highlight:focus-visible { outline-color: var(--gilt-pale); }

.demo-hint {
  font-family: var(--apparatus);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: rgba(229, 201, 138, 0.55);
  margin: 0;
}

.demo-chat {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.25rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease 0.1s;
}
.demo-chat.visible { max-height: 34rem; opacity: 1; }

.bubble-user,
.bubble-ai {
  font-size: 0.98rem;
  line-height: 1.55;
  padding: 0.75rem 0.95rem;
  border-radius: 16px;
}
.bubble-user {
  justify-self: end;
  max-width: 84%;
  background: var(--gilt-pale);
  color: #2B120C;
  font-weight: 500;
}
.bubble-ai {
  background: rgba(240, 229, 206, 0.07);
  border: 1px solid rgba(240, 229, 206, 0.14);
  color: rgba(240, 229, 206, 0.78);
}

/* ============================================================================
   6. WAITLIST + STORE BADGES
   ========================================================================== */

.waitlist { display: grid; gap: 0.75rem; max-width: 30rem; margin: 0; }
.waitlist-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.waitlist input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--text);
  font-size: 1.05rem;
  color: var(--ink);
  background: rgba(255, 252, 244, 0.7);
  border: 1px solid var(--paper-edge);
  border-radius: 9px;
  padding: 0.8rem 1rem;
}
.waitlist input[type="email"]::placeholder { color: var(--ink-faint); }
.waitlist input[type="email"]:focus {
  border-color: var(--oxblood);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 43, 34, 0.13);
}

.btn {
  appearance: none;
  cursor: pointer;
  font-family: var(--apparatus);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: #F5EAD3;
  background: var(--oxblood);
  border: 1px solid var(--oxblood);
  border-radius: 9px;
  padding: 0.85rem 1.5rem;
  transition: background 0.25s ease, transform 0.2s ease;
}
.btn:hover { background: var(--oxblood-light); border-color: var(--oxblood-light); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; }

.waitlist-tester {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--ink-lo);
  cursor: pointer;
}
.waitlist-tester input { accent-color: var(--oxblood); width: 1rem; height: 1rem; }

.form-status {
  font-family: var(--apparatus);
  font-size: 0.92rem;
  color: var(--oxblood);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}
.form-status.visible { max-height: 4rem; opacity: 1; }

.waitlist-note {
  font-size: 0.95rem;
  color: var(--ink-faint);
  margin: 0.9rem 0 0;
  max-width: 30rem;
}
.mt-lg { margin-top: 2rem; }

/* --- the two shopfronts, not yet open ---------------------------------- */
.stores { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.75rem; }

.store {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--paper-edge);
  border-radius: 14px;
  background: rgba(255, 252, 244, 0.5);
  color: var(--ink-lo);
}
.store svg { width: 1.25rem; height: 1.25rem; fill: var(--ink); flex-shrink: 0; }
.store-text { display: grid; line-height: 1.25; }
.store-soon {
  font-family: var(--apparatus);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--gilt);
}
.store-name {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--ink);
}

/* ============================================================================
   7. CHAPTERS + PLATES — the signature
   ========================================================================== */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.chapter {
  position: relative;
  padding: clamp(2.25rem, 5.5vw, 3.5rem) 0;
  border-top: 1px solid var(--rule-soft);
}
.chapter:first-of-type { border-top: 0; padding-top: 0; }

/* hidden only when the script that reveals them is running */
.js .chapter {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .chapter.in { opacity: 1; transform: none; }

/* rubricated numerals, as a scribe would pick them out in red */
.chapter-num {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.8vw, 3rem);
  line-height: 1;
  color: var(--oxblood);
  opacity: 0.42;
  margin-bottom: 0.5rem;
  transition: opacity 0.5s ease;
}
.chapter.current .chapter-num { opacity: 1; }

.chapter h3 { margin-bottom: 0.8rem; }
.chapter p { color: var(--ink-lo); max-width: var(--measure); }
.chapter ul, .chapter ol {
  max-width: var(--measure);
  padding-left: 1.2rem;
  margin: 1.05rem 0 0;
}
.chapter li { color: var(--ink-lo); margin-bottom: 0.5rem; }
.chapter li::marker { color: var(--oxblood); }

/* a citation the reader can actually follow */
.figref {
  font-family: var(--apparatus);
  font-size: 0.74em;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--oxblood);
  text-decoration: none;
  border: 0;
  border-bottom: 1px dotted var(--rule-strong);
  padding: 0 0.12em;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  appearance: none;
}
.figref:hover,
.figref:focus-visible,
.figref[aria-current="true"] {
  color: var(--oxblood-light);
  background: rgba(124, 43, 34, 0.10);
  border-bottom-style: solid;
}

/* --- the plate rail: a photographic plate tipped onto the page ---------- */
.plate-rail { position: sticky; top: calc(var(--head-h) + 2.5rem); }
.plate { margin: 0; }

/* on short viewports (e.g. 15" laptops), cap the device height to whatever
   room is left below the sticky offset and the caption, and derive its
   width from that via the aspect ratio — otherwise a sticky element taller
   than the viewport is permanently cropped, since it never scrolls further */
.plate-device {
  position: relative;
  aspect-ratio: 1206 / 2622;
  width: min(100%, calc((100vh - var(--head-h) - 8rem) * 1206 / 2622));
  max-height: calc(100vh - var(--head-h) - 8rem);
  margin: 0 0 0 auto;
  border-radius: 28px;
  border: 1px solid var(--leather-deep);
  background: var(--leather-deep);
  overflow: hidden;
  box-shadow:
    0 20px 44px rgba(43, 18, 12, 0.30),
    0 2px 6px rgba(43, 18, 12, 0.20);
}

.plate-device img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.plate-device img.showing { opacity: 1; transform: none; }

/* the same plates set inline, beneath the chapter that cites them — this is
   what narrow screens get, because a sticky figure would ride over the prose */
.chapter-plates { display: none; }

.plate-cap {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule-gilt);
}
.plate-label {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-lo);
}

/* ============================================================================
   8. BANDS
   ========================================================================== */

.epigraph {
  padding: clamp(3.5rem, 9vh, 5.5rem) 0;
  background: var(--paper-shade);
  border-top: 1px solid var(--rule-gilt);
  border-bottom: 1px solid var(--rule-gilt);
  text-align: center;
}
.epigraph blockquote {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.34;
  color: var(--ink);
  margin: 0 auto;
  max-width: 40rem;
  text-wrap: balance;
}
.epigraph cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--apparatus);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: none;
  font-style: normal;
  color: var(--gilt);
}

.colophon-band {
  padding: clamp(3rem, 7vh, 4.5rem) 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.colophon-band .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: end;
  justify-content: space-between;
}
.colophon-band h3 { margin: 0.4rem 0 0.8rem; }
.colophon-band p { color: var(--ink-lo); max-width: 34rem; margin: 0; }

.link-arrow {
  font-family: var(--apparatus);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.3rem;
  white-space: nowrap;
}
.link-arrow:hover { color: var(--oxblood-light); }

/* ============================================================================
   9. THE LAST PAGE
   ========================================================================== */

.last-page {
  padding: clamp(4rem, 10vh, 7rem) 0;
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(143, 104, 28, 0.10), transparent 70%),
    var(--paper);
}
.last-page h2 { margin-bottom: 1.3rem; }
.last-page .waitlist { margin: 2rem auto 0; }
.last-page .waitlist-tester { justify-content: center; }
.last-page .waitlist-note { margin-inline: auto; }
.last-page .stores { justify-content: center; }

/* ============================================================================
   10. COLOPHON (footer)
   ========================================================================== */

.colophon {
  border-top: 1px solid var(--rule-gilt);
  background: var(--leather-deep);
  color: rgba(240, 229, 206, 0.72);
  padding: clamp(3rem, 7vh, 4.5rem) 0 2rem;
}
.colophon .brand { color: #F0E5CE; font-size: 1.6rem; }
.colophon .brand img {
  width: 2.75rem;
  height: 2.75rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.colophon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: clamp(2rem, 6vw, 4rem);
}
.colophon-brand p {
  color: rgba(240, 229, 206, 0.5);
  font-size: 1rem;
  margin-top: 1rem;
  max-width: 22rem;
}
.colophon-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2rem;
}
.colophon-col h5 {
  font-family: var(--apparatus);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--gilt-pale);
  margin: 0 0 1rem;
  font-weight: 400;
}
.colophon-col a {
  display: block;
  color: rgba(240, 229, 206, 0.68);
  text-decoration: none;
  font-size: 1rem;
  padding: 0.28rem 0;
}
.colophon-col a:hover { color: var(--gilt-pale); }

.colophon-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(240, 229, 206, 0.14);
  font-family: var(--apparatus);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgba(240, 229, 206, 0.42);
}

/* ============================================================================
   11. INNER PAGES
   ========================================================================== */

.chapter-opening {
  padding: clamp(3.5rem, 9vh, 5.5rem) 0 clamp(2.5rem, 6vh, 3.5rem);
  border-bottom: 1px solid var(--rule-soft);
}
.chapter-opening h1 { margin-bottom: 1.3rem; }
.chapter-opening > .wrap > p { color: var(--ink-lo); max-width: var(--measure); font-size: 1.2rem; }
.updated { display: block; margin-top: 1.5rem; }

.prose { max-width: var(--measure); }
.prose h2 { margin: 3rem 0 1rem; }
.prose h3 { margin: 2.2rem 0 0.7rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-lo); }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--oxblood); }
.prose hr { border: 0; height: 1px; background: var(--rule-gilt); margin: 3rem 0; }

/* an initial, dropped three lines */
.prose > p.opening::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 3.7em;
  line-height: 0.8;
  padding: 0.05em 0.09em 0 0;
  color: var(--oxblood);
}

.callout {
  border-left: 2px solid var(--oxblood);
  background: var(--paper-shade);
  padding: 1.15rem 1.4rem;
  margin: 2rem 0;
  border-radius: 0 12px 12px 0;
}
.callout p { margin: 0; color: var(--ink-lo); font-size: 1.02rem; }
.callout strong { color: var(--oxblood); }

/* --- the shipped-today flow --------------------------------------------- */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.flow-node {
  font-family: var(--apparatus);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--ink-lo);
  border: 1px solid var(--paper-edge);
  background: rgba(255, 252, 244, 0.6);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
}
.flow-node.accent {
  color: #F5EAD3;
  background: var(--oxblood);
  border-color: var(--oxblood);
}
.flow-arrow { color: var(--gilt); }

/* --- the note from the binder ------------------------------------------- */
.founder-note {
  display: flex;
  gap: 1.5rem;
  align-items: start;
  max-width: 44rem;
  border-top: 1px solid var(--rule-gilt);
  border-bottom: 1px solid var(--rule-gilt);
  padding: 2rem 0;
}
.founder-note p { color: var(--ink-lo); font-style: italic; }
.avatar {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oxblood);
  color: #F5EAD3;
  font-family: var(--display);
  font-size: 1.3rem;
}
.role { display: block; margin-top: 1rem; }

/* --- feature cards ------------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}
.card {
  border: 1px solid var(--paper-edge);
  background: var(--paper-shade);
  border-radius: 12px;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.card h4 { margin-bottom: 0.7rem; }
.card p { color: var(--ink-lo); font-size: 1rem; margin: 0; }

/* --- pricing ------------------------------------------------------------ */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.tier {
  border: 1px solid var(--paper-edge);
  background: var(--paper-shade);
  border-radius: 12px;
  padding: clamp(1.6rem, 3.5vw, 2.1rem);
  display: flex;
  flex-direction: column;
}
.tier.featured {
  border-color: var(--oxblood);
  box-shadow: 0 14px 34px rgba(43, 18, 12, 0.16);
}
.tier-tag { display: block; margin-bottom: 0.9rem; }
.tier.featured .tier-tag { color: var(--oxblood); }
.tier h3 { margin-bottom: 0.4rem; }
.price {
  font-family: var(--display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--oxblood);
  margin: 0.9rem 0 0.2rem;
}
.price span {
  font-family: var(--apparatus);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--ink-faint);
  margin-left: 0.35rem;
}
.tier-desc { color: var(--ink-lo); font-size: 1rem; margin: 0.9rem 0 1.3rem; }
.tier ul { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.tier li {
  color: var(--ink-lo);
  font-size: 1rem;
  padding: 0.5rem 0 0.5rem 1.4rem;
  position: relative;
  border-top: 1px solid var(--rule-soft);
}
.tier li:first-child { border-top: 0; }
.tier li::before {
  content: "❧";
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: var(--gilt);
  font-size: 0.8rem;
}
.tier li.no { color: var(--ink-faint); text-decoration: line-through; }
.tier li.no::before { content: "—"; color: var(--paper-edge); text-decoration: none; }

/* --- support Q&A -------------------------------------------------------- */
.faq-item {
  max-width: var(--measure);
  border-top: 1px solid var(--rule-soft);
  padding: 1.5rem 0;
}
.faq-item:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.faq-item h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.faq-item p { color: var(--ink-lo); margin: 0; font-size: 1.05rem; }

/* ============================================================================
   12. NARROWER PAGES
   ========================================================================== */

@media (max-width: 1000px) {
  :root { --rail: 17rem; }
  .title-grid { grid-template-columns: 1fr; }
  .frontis { max-width: 34rem; }
}

@media (max-width: 820px) {
  .rh-toggle { display: block; margin-left: auto; }
  .rh-chapter { display: none; }
  .rh-cta { display: none; }

  .rh-links {
    position: absolute;
    top: var(--head-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(240, 229, 206, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule-gilt);
    padding: 0.5rem var(--pad) 1rem;
    display: none;
  }
  .rh-links.open { display: flex; }
  .rh-links a { padding: 0.85rem 0; border-bottom: 1px solid var(--rule-soft); }

  /* the margin is gone, so the plates come inline instead: the rail is
     hidden and each chapter shows the figures it cites, in flow */
  .spread { display: block; }
  .plate-rail { display: none; }

  .chapter-plates {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 3vw, 1.5rem);
    margin-top: 1.75rem;
  }
  .inline-plate {
    flex: 1 1 8rem;
    max-width: 12rem;
    margin: 0;
  }
  .inline-plate .plate-device { border-radius: 20px; }
  .inline-plate .plate-device img { opacity: 1; transform: none; position: static; }
  .inline-plate .plate-cap {
    flex-direction: column;
    align-items: start;
    gap: 0.1rem;
    margin-top: 0.7rem;
    padding-top: 0.5rem;
  }
  .inline-plate .plate-label { font-size: 0.92rem; }

  /* a cited figure lights up when you follow the citation to it */
  .inline-plate.cited .plate-device {
    box-shadow: 0 0 0 2px var(--oxblood), 0 20px 44px rgba(43, 18, 12, 0.30);
  }

  .colophon-grid { grid-template-columns: 1fr; }
  .colophon-band .wrap { flex-direction: column; align-items: start; }
  .founder-note { gap: 1rem; }
}

@media (max-width: 520px) {
  body { font-size: 1.125rem; }

  /* stacked, so flex-basis would set the HEIGHT — hand the sizing back */
  .waitlist-row { flex-direction: column; }
  .waitlist-row input[type="email"] { flex: 0 0 auto; width: 100%; }
  .btn { width: 100%; }

  .inline-plate { flex: 1 1 7rem; max-width: 10rem; }
  .flow { font-size: 0.9rem; }
}

/* ============================================================================
   13. REDUCED MOTION — the book is simply already open
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .chapter { opacity: 1; transform: none; }
  .plate-device img { transform: none; }
}