/* Reunited: chaptered editorial.
   Tokens come from the app (Theme.swift) and the existing site, not from a
   template. Warm paper, ink, ember. Each chapter lands on its own ground as a
   hard change: the grammar forbids a continuous drift gradient. */
:root {
  --sc-canvas:     #fff6ec;
  --sc-surface:    #ffffff;
  --sc-ink:        #2a2018;
  --sc-ink-soft:   #6e5f4e;
  --sc-accent:     #a85e2c;
  --sc-accent-ink: #fff6ec;
  --sc-font-display: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sc-font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --paper-1: #fff6ec;
  --paper-2: #f7ead9;
  --paper-3: #fdf2e6;
  --night:   #241c15;   /* the peak inverts: Moonlight, not a spotlight */
  --paper-4: #efe0cc;
  --measure: 34em;
}

body { background: var(--paper-1); color: var(--sc-ink); font-family: var(--sc-font-text); }

.chapter { position: relative; }
.chapter--i   { background: var(--paper-1); }
.chapter--ii  { background: var(--paper-2); }
.chapter--iii { background: var(--paper-3); }
.chapter--iv  { background: var(--night); color: #f3e7d8; }
.chapter--v   { background: var(--paper-2); }
.chapter--vi  { background: var(--paper-4); }

.sc-wrap { width: min(1080px, 100% - 2 * clamp(20px, 5vw, 64px)); margin-inline: auto; }

/* Folio in the margin, not a fixed bar. */
.folio {
  position: fixed; left: clamp(14px, 3vw, 34px); top: 50%; translate: 0 -50%;
  z-index: 5; writing-mode: vertical-rl; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sc-ink-soft); opacity: 0.55;
  display: flex; gap: 1.1em; align-items: center; pointer-events: none;
  transition: color 0.5s ease, opacity 0.5s ease;
}
.folio__n { font-family: var(--sc-font-display); font-size: 0.9rem; letter-spacing: 0.06em; }
body.is-night .folio { color: #cbb9a4; opacity: 0.7; }
@media (max-width: 860px) { .folio { display: none; } }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--sc-ink); color: var(--paper-1); padding: 12px 18px; z-index: 20;
}
.skip:focus { left: 12px; top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Typography floor */
.sc-display { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.02; }
.sc-display--xl { font-size: clamp(2.9rem, 8.4vw, 6rem); }
.sc-display--md { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.06; }
.sc-lede { font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.55; color: var(--sc-ink-soft); max-width: var(--measure); }
.sc-body { font-size: clamp(1rem, 1.7vw, 1.16rem); line-height: 1.65; max-width: var(--measure); }
.sc-label {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-accent); font-weight: 700;
}

/* ---- I. Title page */
.title-page { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 34px); padding-block: 12vh; }
.title-page .sc-lede { margin-top: 0.4em; }

/* ---- II. The drift */
.drift { min-height: 100svh; display: grid; align-content: center; gap: clamp(26px, 5vh, 56px); padding-block: 14vh; }
.drift__argument { display: grid; gap: 1.1em; }
.drift__argument .sc-body:first-child {
  font-family: var(--sc-font-display); font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.14; letter-spacing: -0.02em; max-width: 18em;
}
.ask { border-top: 1px solid rgba(42,32,24,0.16); padding-top: clamp(20px, 3vh, 32px); max-width: 30em; }
.ask__label { display: block; font-family: var(--sc-font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin-bottom: 0.7em; }
.ask__field {
  font: inherit; font-size: 1.05rem; line-height: 1.25; color: var(--sc-ink);
  width: 100%; padding: 13px 0; background: none;
  border: 0; border-bottom: 1.5px solid rgba(42,32,24,0.3); border-radius: 0;
}
.ask__field::placeholder { color: var(--sc-ink-soft); opacity: 0.55; }
.ask__field:focus-visible { outline: none; border-bottom-color: var(--sc-accent); border-bottom-width: 2px; }
.ask__note { margin-top: 0.8em; font-size: 0.86rem; color: var(--sc-ink-soft); }

/* ---- III. The week */
.week-head { padding-top: 16vh; display: grid; gap: 0.8em; }
.rail { display: flex; gap: clamp(14px, 2vw, 22px); padding: clamp(34px, 6vh, 64px) clamp(20px, 5vw, 64px); }
.day {
  flex: 0 0 clamp(190px, 22vw, 250px); background: var(--sc-surface);
  border-radius: 14px; padding: 22px; box-shadow: 0 10px 30px rgba(42,32,24,0.06);
}
.day__k { font-family: var(--sc-font-display); font-size: 1.15rem; margin-bottom: 0.45em; }
.day__p { font-size: 0.94rem; line-height: 1.5; color: var(--sc-ink-soft); }
/* Media in its own column with a caption. It never bleeds under type. */
.plate { width: min(300px, 72vw); margin: 0 auto; padding-bottom: 6vh; }
.plate img { width: 100%; height: auto; display: block; border-radius: 26px; box-shadow: 0 18px 50px rgba(42,32,24,0.14); }
.plate figcaption { margin-top: 1em; font-size: 0.86rem; color: var(--sc-ink-soft); text-align: center; }
.hush { height: 42vh; }

/* ---- IV. The peak */
.loop { min-height: 100svh; display: grid; align-content: center; gap: clamp(18px, 3vh, 30px); padding-block: 14vh; max-width: 46em; }
.chapter--iv .sc-label { color: #d99a63; }
.leaf { border-radius: 16px; padding: clamp(22px, 3.4vw, 34px); }
.leaf--private { background: rgba(255,246,236,0.055); border: 1px solid rgba(243,231,216,0.14); }
.leaf__prompt { font-family: var(--sc-font-display); font-size: clamp(1.4rem, 3.1vw, 2.05rem); line-height: 1.16; letter-spacing: -0.018em; }
.leaf__prompt em, .leaf__msg em { font-style: normal; color: #e8a86e; }
.leaf__hand { margin-top: 1.1em; font-size: 1.02rem; line-height: 1.62; color: #cdbca8; }
.leaf__seal { margin-top: 1.2em; font-size: 0.82rem; letter-spacing: 0.05em; color: #9c8c79; }
.turn { font-size: 0.98rem; color: #b8a794; padding-left: 0.2em; }
.leaf--sent { background: #f3e7d8; color: var(--sc-ink); }
.leaf--sent .leaf__seal { color: var(--sc-ink-soft); }
.leaf__msg { font-size: clamp(1.08rem, 2.2vw, 1.3rem); line-height: 1.55; }
.leaf--sent .leaf__msg em { color: var(--sc-accent); }

/* ---- V. The refusal */
.refuse { padding-block: 16vh; display: grid; gap: 1.1em; }
.refuse__list { list-style: none; display: grid; gap: 0.5em; margin: 0.6em 0 0.4em; }
.refuse__list li { font-family: var(--sc-font-display); font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1.2; }
.proof {
  margin-top: 1.4em; padding: 18px 20px; border-left: 1px solid var(--sc-accent);
  background: rgba(168,94,44,0.05); font-size: 1.02rem; line-height: 1.6; max-width: var(--measure);
}
.evidence { color: var(--sc-ink-soft); margin-top: 0.9em; }
.evidence a, .imprint a, .waitlist-note a { color: var(--sc-accent); }

/* ---- VI. Colophon. Small type, the ask as running text. */
.colophon { padding-block: 14vh 10vh; display: grid; gap: 1.1em; max-width: 40em; }
.colophon__line { font-family: var(--sc-font-display); font-size: clamp(1.3rem, 2.7vw, 1.9rem); line-height: 1.3; letter-spacing: -0.015em; }
.waitlist { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-top: 0.6em; }
.waitlist input {
  font: inherit; font-size: 1rem; line-height: 1.25; color: var(--sc-ink);
  flex: 1 1 260px; padding: 14px 0; background: none; border: 0;
  border-bottom: 1.5px solid rgba(42,32,24,0.3); border-radius: 0;
}
.waitlist input::placeholder { color: var(--sc-ink-soft); opacity: 0.6; }
.waitlist input:focus-visible { outline: none; border-bottom-color: var(--sc-accent); border-bottom-width: 2px; }
.waitlist input[aria-invalid="true"] { border-bottom-color: #b14a55; }
.waitlist__go {
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.25;
  padding: 14px 26px; border: 0; border-radius: 16px; cursor: pointer;  /* the app's radius, not a pill */
  background: var(--sc-ink); color: var(--paper-1);
}
.waitlist__go:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.waitlist-error { color: #b14a55; font-weight: 600; font-size: 0.9rem; }
.waitlist-note, .imprint { font-size: 0.88rem; color: var(--sc-ink-soft); }
.waitlist-done { font-weight: 600; color: var(--sc-accent); }
.sc-rule { border: 0; border-top: 1px solid rgba(42,32,24,0.14); margin: 1.6em 0 0.4em; }
.imprint { display: flex; gap: 1.4em; flex-wrap: wrap; }
.imprint--fine { display: block; opacity: 0.8; line-height: 1.6; }

@media (max-width: 760px) {
  .waitlist input, .waitlist__go { flex: 1 1 100%; width: 100%; }
  .hush { height: 24vh; }
  .plate { width: min(260px, 66vw); }
}
@media (prefers-reduced-motion: reduce) {
  .rail { overflow-x: auto; }
}

/* ---- II. The evidence line. Real figure, computed the same way the app does. */
.evidence-line { font-size: clamp(0.98rem, 1.7vw, 1.1rem); line-height: 1.6; color: var(--sc-ink-soft); max-width: 30em; }
.tally { font-family: var(--sc-font-display); font-size: 1.5em; color: var(--sc-accent); font-weight: 600; }

/* Inline plates sit in their own column beside the argument, never under it. */
.plate--inline { width: min(230px, 60vw); margin: 0; }
.plate--inline img { border-radius: 18px; }
.plate--inline figcaption { text-align: left; }
.chapter--v .plate--inline { margin-top: 1.4em; }
.chapter--iv + .chapter--v .plate--inline img { border-radius: 22px; }

/* ---- VI. The pledge */
.chapter--pledge { background: var(--paper-3); }
.pledge { min-height: 100svh; display: grid; align-content: center; gap: clamp(16px, 2.6vh, 26px); padding-block: 13vh; }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 34px); margin-top: 0.6em; }
.tier { border-top: 1.5px solid rgba(42,32,24,0.2); padding-top: 1.1em; }
.tier--paid { border-top-color: var(--sc-accent); }
.tier__k { font-family: var(--sc-font-display); font-size: clamp(1.25rem, 2.4vw, 1.65rem); margin-bottom: 0.6em; }
.tier--paid .tier__k { color: var(--sc-accent); }
.tier__l { list-style: none; display: grid; gap: 0.4em; }
.tier__l li { font-size: 0.98rem; line-height: 1.5; color: var(--sc-ink-soft); }
.tier__n { margin-top: 0.9em; font-size: 0.88rem; color: var(--sc-ink-soft); opacity: 0.9; }
.plate--wide { width: min(220px, 52vw); margin: 1.2em 0 0; }
.plate--wide img { border-radius: 18px; }
.plate--wide figcaption { text-align: left; }

@media (max-width: 760px) {
  .tiers { grid-template-columns: 1fr; gap: 1.6em; }
  .plate--inline, .plate--wide { width: min(200px, 54vw); }
}

/* The close ends on the app saying the word the site is named after. */
.plate--seal { width: min(170px, 42vw); margin: 0 0 0.4em; }
.plate--seal img { border-radius: 16px; }
.plate--seal figcaption { text-align: left; }

/* Chapter V read as a stranded plate with a field of empty paper beside it.
   The grammar wants media in its own column, which is right, but a column
   needs a partner: pair the evidence prose with the plate instead of stacking
   the plate under it. */
@media (min-width: 900px) {
  .refuse__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 56px); align-items: start; }
  .refuse__pair .plate--inline { margin-top: 0; }
}

/* ---- Phone corrections, found on a real 390px viewport rather than a
   scaled-down desktop one.

   1. The rail is seven cards wide by design and the pan device slides it, but
      nothing clipped it, so the whole document scrolled sideways.
   2. Chapters II and VI unpin below 760px (see the script before mount).
      Once they flow, their desktop stage padding is far too generous. */
.chapter--iii { overflow-x: clip; }

@media (max-width: 760px) {
  .drift, .pledge, .loop { min-height: 0; padding-block: 9vh; }
  .drift { gap: clamp(18px, 3vh, 26px); }
  .loop  { padding-block: 7vh; gap: 14px; }
  .leaf  { padding: 18px; }
  .leaf__hand { margin-top: 0.85em; }
  .leaf__seal { margin-top: 0.9em; }
  .title-page { padding-block: 14vh 10vh; }
  .week-head { padding-top: 11vh; }
  .refuse { padding-block: 11vh; }
  .colophon { padding-block: 10vh 8vh; }
  .hush { height: 16vh; }
  /* The inline plates are supporting evidence, not the argument. On a phone
     they push the real content off the screen, so they go last and small. */
  .plate--inline, .plate--wide { width: min(150px, 40vw); }
  .plate--seal { width: min(120px, 32vw); }
  .evidence-line { font-size: 0.95rem; }
}

/* ---- The mark and the masthead.
   Drawn, not an image file. The app icon is a rounded square with its own
   gradient, which on a page reads as an App Store badge rather than a logo.
   The rings are the meaningful part: two lives that overlap. */
.mark {
  height: 1.4em; width: auto; overflow: visible;
  fill: none; stroke: var(--sc-accent); stroke-width: 2.6;
  flex: none;
}
.masthead {
  display: flex; align-items: center; gap: 0.5em;
  margin-bottom: clamp(22px, 4vh, 44px);
}
.wordmark {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.015em;
  color: var(--sc-ink);
}
.masthead--foot { margin: 0.6em 0 0.9em; opacity: 0.85; }
.masthead--foot .mark { stroke-width: 2.8; }
.masthead--foot .wordmark { font-size: 1.05rem; }

/* ---- A title page that commits.
   The old hero topped out near 6rem with a quiet lede under it, which read as
   restraint rather than confidence. This goes considerably larger, tightens
   the leading, and accents the operative word. */
.sc-display--hero {
  font-size: clamp(3.3rem, 11.5vw, 8.4rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
.sc-display--hero em { font-style: normal; color: var(--sc-accent); }

/* The definitional line. The page previously opened without ever saying what
   the product is; this says it before anything else has to be believed. */
.standfirst {
  margin-top: clamp(18px, 3vh, 30px);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  line-height: 1.35; letter-spacing: -0.012em;
  max-width: 24ch; color: var(--sc-ink);
  text-wrap: balance;
}
.title-page__tail {
  margin-top: clamp(12px, 2vh, 20px);
  max-width: 34ch; opacity: 0.85;
}

@media (max-width: 760px) {
  .sc-display--hero { font-size: clamp(2.9rem, 13.5vw, 4.4rem); max-width: 11ch; }
  .standfirst { font-size: clamp(1.1rem, 4.6vw, 1.35rem); max-width: 27ch; }
  .masthead { margin-bottom: 20px; }
}