/* ---------------------------------------------------------------
   The reading pages — PITCH's owned channel: "SEO and content around
   the wake-scroll and the abandoned-journal guilt."

   These are not the card page and they never become it. Each one is a
   sentence she might type into a search box, three short paragraphs
   that take her side, and one link to today's card. No nav, no offer
   form, no second move.

   It adds nothing to the system: the palette, the two grounds, the
   typeface and the footer all come from styles.css, which these pages
   load first and which is not touched by this file. Six rules, and
   every value is one already in the scale.
   --------------------------------------------------------------- */

.page {
  padding: clamp(4rem, 16vh, 9rem) var(--gutter) clamp(3rem, 9vh, 4.5rem);
  max-width: 34rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 4vh, 2rem);
}

/* The headline is a sentence, not a banner: the card's face at the
   offer line's size, so nothing on a reading page outshouts a card. */
.page h1 {
  font-weight: var(--face-weight);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: var(--card-tracking);
  text-wrap: balance;
}

.page p {
  text-wrap: pretty;
}

/* The one move on the page: underlined, in the page's own ink.
   NOT clay, for the reason styles.css already wrote down at the buy
   line and this file reached past on the first try — clay is #8c4432,
   and on the Pre-dawn ground that is 2.26:1, failing AA on the one
   ground the product is named after. QA caught it live. --type is
   defined on both grounds and is the only ink guaranteed legible on
   either, so the underline carries the affordance and needs no second
   value and no dark-ground override. */
.go {
  margin-top: clamp(0.5rem, 2vh, 1rem);
}

.go a {
  color: var(--type);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  padding: 0.5rem 0;
  margin: -0.5rem 0;
  display: inline-block;
}

.go a:focus-visible {
  outline: 2px solid var(--type);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The legal page — the one page BRAND lets run long ("except legal, shipping
   and refund pages, which may be as long as accuracy requires"). It is a
   reading page with headings, so it borrows the column, the grid gap and the
   footer above and adds two values, both already in the scale: the section
   heading at the offer line's size, and the date line in the quiet ink. */
.legal h2 {
  font-weight: var(--face-weight);
  /* The section-heading step already in styles.css, not a new value. It was
     1.0625rem on the first pass, which set a heading SMALLER than the 1.1875rem
     body under it: a page with nothing to jump to, distinguished only by its
     top margin. QA caught it on the live page. */
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
  letter-spacing: var(--card-tracking);
  margin-top: clamp(1rem, 3vh, 1.75rem);
}

.legal .stamp {
  color: var(--quietype);
  font-size: 0.9375rem;
  margin-top: -0.75rem;
}

.legal a {
  color: var(--type);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* The footer comes from styles.css at the card page's 42rem measure, and a
   reading column is 34rem. Above ~672px that left the signature hanging 64px
   out of the column with its hairline overshooting on both sides — one page
   with another stapled under it. Scoped to a footer that follows a reading
   page, so the card page's own footer keeps the width it was approved at. */
.page + .quiet {
  max-width: 34rem;
}