/* ═══════════════════════════════════════════════════════
   THE FREE CHAPTERS — the public reading pages
   Chapter One and Chapter Two, at their own indexable
   addresses. These are the only pages of the book a
   stranger can reach, so they are also the only pages a
   search engine can read and a friend can send.

   They borrow the book's whole vocabulary from twbty.css
   and add only what a standalone page needs that an
   in-app view does not: a header that orients someone who
   arrived from nowhere, a way to the next chapter, and
   the gate at the end of Chapter Two.

   Deliberately no JavaScript. No app shell, no service
   worker, no saved place. A page that has to work for a
   woman arriving at 3am from a search she was frightened
   to type should have nothing in it that can fail.
   ═══════════════════════════════════════════════════════ */

/* ── the header ────────────────────────────────────────
   Quiet, and gone in one glance. It exists because someone
   who lands here from a search result has no idea what
   this is or who wrote it. */
.pubhead{padding-block:var(--s1) 0;}
.pubhead .wm{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.26em;
  text-transform:uppercase;font-weight:500;color:var(--taupe);
  text-decoration:none;transition:color .4s ease;}
.pubhead .wm:hover{color:var(--clay);}
.pubhead .standing{margin-top:.9rem;font-family:var(--serif);font-style:italic;
  font-weight:300;font-size:1rem;line-height:1.6;color:var(--taupe);max-width:34ch;}

/* the opener, shortened.
   In the book a chapter opens on a full screen, because she
   chose it from a contents list and the pause is welcome. A
   visitor from search has chosen nothing yet and needs to
   see prose, so the same opener keeps its proportions and
   loses its full-height hold. */
.opener.pubopen{min-height:auto;padding-block:var(--s2) var(--s1);}

/* ── the way onward ────────────────────────────────────
   Set as a folio line rather than a button: this is a page
   turn, not a call to action. */
.readnext{padding-block:var(--s1);border-top:1px solid var(--hair);}
.readnext .lbl{margin-bottom:1.2rem;}
.readnext a{display:block;text-decoration:none;max-width:30ch;}
.readnext .t{display:block;font-family:var(--serif);font-weight:300;
  font-size:var(--t-emph);line-height:1.35;color:var(--ink);transition:color .4s ease;}
.readnext a:hover .t{color:var(--clay);}
.readnext .rcue{display:block;margin-top:.45rem;font-family:var(--serif);
  font-style:italic;font-weight:300;font-size:var(--t-read);line-height:1.6;
  color:var(--taupe);max-width:28ch;}
.readnext .arw{color:var(--clay);font-size:.78em;white-space:nowrap;}
.readnext a:hover .arw{color:var(--ink);}

/* ── the gate ══════════════════════════════════════════
   The eighty words that decide whether this is a business.

   Everything about it is deliberate. It sits on the mineral
   sheet, the material this product already uses for an
   inserted page — not on stone, which means safety, and not
   on the night plane, which means being held. It carries no
   lock, no countdown, no scarcity and no second ask. Melissa
   speaks in the first person, because a stranger's voice
   here would undo the two chapters above it.

   The offer to give it away is not marketing. It is the
   sentence that makes the rest of the page honest, and it
   goes last, where it is read last. */
.gate{padding-block:var(--s2);}
.gate .lead{font-family:var(--serif);font-weight:300;font-size:var(--d3);
  line-height:1.28;letter-spacing:-.014em;max-width:19ch;margin-bottom:1.6rem;}
.gate .read{margin-bottom:1.5rem;}
.gate .whats{list-style:none;margin:0 0 1.8rem;max-width:34ch;}
.gate .whats li{position:relative;font-family:var(--serif);font-weight:400;
  font-size:var(--t-read);line-height:1.6;color:var(--ink);
  padding:.72rem 0;border-top:1px solid var(--hair);}
.gate .whats li:last-child{border-bottom:1px solid var(--hair);}
.gate .whats li .n{position:absolute;left:calc(var(--flow) * -1 + var(--edge) + 11px);
  top:.95rem;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:.95rem;color:var(--clay);}
/* No figure here by design — see the note in the gate's markup. What is
   left is one quiet line about the shape of the offer, not its price. */
.gate .price{margin-bottom:1.4rem;}
.gate .price .pnote{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:var(--t-read);line-height:1.7;color:var(--taupe);max-width:34ch;display:block;}
.gate .cant{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:var(--t-read);line-height:1.75;color:var(--taupe);
  max-width:36ch;margin-top:1.6rem;}

/* ── the footer ────────────────────────────────────────
   Attribution and one honest line about what this is. */
.pubfoot{padding-block:var(--s2) var(--s3);border-top:1px solid var(--hair);}
.pubfoot .attrib{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:var(--t-read);color:var(--taupe);max-width:32ch;}
.pubfoot .links{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:var(--s1);}
.pubfoot .links a{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;
  color:var(--clay);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;display:inline-flex;align-items:center;min-height:44px;}
.pubfoot .links a:hover{color:var(--ink);}
.pubfoot .disclaimer{margin-top:var(--s1);}