/* ---------------------------------------------------------------
   The stranger card page, First Touch v1.0.
   One document, one stylesheet, one preloaded font, zero JavaScript.
   Five colours, one typeface, flat colour only. Nothing decorative.
   --------------------------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-400-v1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The Medium cut, downloaded only on the dark ground — see the dark block below
   for why, and for the measurement. Neither ground ever downloads both faces:
   light asks for 400 only, dark asks for 500 only. */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-500-v1.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback, so the card paints immediately in Georgia and swaps
   to Newsreader without the line moving. The four numbers are computed, not
   guessed: Newsreader's metrics parsed out of the font file itself (unitsPerEm
   2000, ascender 1470, descender -530, avgCharWidth 1131) against Georgia's
   published metrics (2048 / 1878 / 449 / 1096). Georgia only — it is present on
   iOS, macOS and Windows; anywhere it is absent this face simply does not load
   and the stack falls through to the plain serif. */
@font-face {
  font-family: "Newsreader fallback";
  src: local("Georgia");
  size-adjust: 105.67%;
  ascent-override: 69.56%;
  descent-override: 25.08%;
  line-gap-override: 0%;
}

:root {
  --paper: #fbf6ee;
  --ink: #221e1a;
  --soft: #57514a;
  --clay: #8c4432;

  --hair: rgba(34, 30, 26, 0.08);
  --gutter: clamp(1.5rem, 6vw, 5rem);
  --serif: "Newsreader", "Newsreader fallback", Georgia, serif;

  /* the two grounds. same four sections, same words, same order. */
  --ground: var(--paper);
  --type: var(--ink);
  --quietype: var(--soft);
  --rule: var(--hair);

  /* the cut, and the tracking, that the ground asks for.
     The cut is set on every serif string, not only the card: stroke erosion is a
     property of the ground, not of one element, so quiet type on Pre-dawn needs
     the heavier cut at least as much as the card does. The tracking step is
     card-only — at 17px the letters were never in danger of closing up. */
  --face-weight: 400;
  --card-tracking: -0.005em;

  color-scheme: light dark;
}

/* the dark lock-screen variant: Pre-dawn ground, Paper type.
   Reached by the device's own setting, not by anything on the page.

   Optical compensation for light-on-dark, B2 dark FAIL 2026-08-21
   (APPROVALS.md rows 31-32). The card type here is full Paper, never the 72% —
   that value belongs to quiet type alone. Contrast was not the fault and the
   numbers say so: Paper on Pre-dawn is 14.78:1 against Ink on Paper's 15.39:1,
   a 4% difference that no eye reads as "difficult". What fails is stroke
   erosion — a thin serif blooms into a night ground and the counters fill.

   So the ground asks for a heavier cut, measured rather than guessed: at the
   same size, wght 500 lays down 18.6% more ink than wght 400 (0.1805 vs 0.1522
   mean coverage, rendered from the same variable source with opsz pinned at 16).
   Plus a whisper of tracking on the card only, from -0.005em to +0.006em, to
   keep the letters from closing up on each other as the strokes thicken.
   Words, layout, size and the five colours do not move — only the cut and, on
   the card, the tracking. The cut moves for every serif string on this ground,
   including the form controls, so the dark page downloads exactly one face. */
@media (prefers-color-scheme: dark) {
  :root {
    --predawn: #1c2230;

    --ground: var(--predawn);
    --type: var(--paper);
    --quietype: rgba(251, 246, 238, 0.72); /* 7.7:1 on Pre-dawn */
    --rule: rgba(251, 246, 238, 0.12);

    --face-weight: 500;
    --card-tracking: 0.006em;
  }
}

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

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--type);
  font-family: var(--serif);
  font-weight: var(--face-weight);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
p {
  margin: 0;
}

::selection {
  background: var(--clay);
  color: var(--paper);
}

/* 1. the card ------------------------------------------------- */

.card {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.cardline {
  font-weight: var(--face-weight);
  font-size: clamp(2.05rem, 1rem + 6.6vw, 5.25rem);
  line-height: 1.35;
  letter-spacing: var(--card-tracking);
  text-align: center;
  text-wrap: balance;
  max-width: 21ch;
  hyphens: none;
}

/* 2. the calm ------------------------------------------------- */

.calm {
  height: 100svh;
}

/* 3. the offer ------------------------------------------------ */

.offer {
  padding: 0 var(--gutter) clamp(5rem, 14vh, 9rem);
  display: grid;
  justify-items: start;
  gap: clamp(2rem, 5vw, 2.75rem);
  max-width: 42rem;
  margin-inline: auto;
}

.offerline {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.25rem 1.5rem;
  width: 100%;
}

.email {
  flex: 1 1 15rem;
  min-width: 0;
  font-family: inherit;
  font-weight: var(--face-weight); /* form controls do not inherit it */
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--type);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--type);
  border-radius: 0;
  padding: 0.5rem 0;
  opacity: 1;
}

.email:disabled {
  color: var(--type);
  opacity: 1;
  -webkit-text-fill-color: var(--type);
}

.email:focus-visible {
  outline: 0;
  border-bottom-color: var(--clay);
}

.send {
  font-family: inherit;
  font-weight: var(--face-weight); /* likewise — otherwise dark pulls the 400 file
                                      down for two strings and nothing else */
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--paper);
  background: var(--clay);
  border: 1px solid var(--clay);
  border-radius: 0;
  padding: 0.95rem 1.75rem;
  cursor: pointer;
  opacity: 1;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   display:none inputs and fill everything else. Not focusable (tabindex="-1")
   and not announced (aria-hidden), so a keyboard or a screen reader never lands
   in it. If this rule ever fails to arrive, the field becomes a visible box that
   says "Leave this field empty" — ugly, honest, and still harmless. */
.decoy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.send:disabled {
  color: var(--paper);
  background: var(--clay);
  opacity: 1;
  cursor: default;
}

.never {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--quietype);
}

/* 4. the quiet footer ----------------------------------------- */

.quiet {
  border-top: 1px solid var(--rule);
  padding: clamp(2.5rem, 7vh, 3.5rem) var(--gutter) clamp(3rem, 9vh, 4.5rem);
  max-width: 42rem;
  margin-inline: auto;
  display: grid;
  gap: 0.55rem;
  color: var(--quietype);
  font-size: 1rem;
}

/* The house word, last in the footer and the smallest thing on the page.
   No new colour, no new face and no new size: it borrows .never's 0.9375rem,
   the only smaller step in the scale, and the footer's own quiet ink. The one
   thing it adds is space above itself — the footer's own gap, doubled — so the
   line reads as a signature under the group rather than a fourth item in it. */
.quiet .from {
  margin-top: 0.55rem;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------
   Her states. Four small rules, and not one of them is a new
   design: the confirm answer sits exactly where the form sat, the
   welcome-back line sits above her card, and the home-screen offer
   sits in the white space her page ends with.

   No new colour, no new face, no new spacing scale. Her side of the
   product inherits the ground, the cut and the tracking the founder
   validated at B2, including the dark-ground compensation.
   -------------------------------------------------------------- */

/* the answer, in place of the form (FLOW: "the page answers in place") */
.answered {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
  line-height: 1.45;
  text-wrap: pretty;
  max-width: 34rem;
}

/* Where the answer IS the page — the broken card page, the page Stripe returns her
   to — it is a direct child of body and so inherits no gutter at all, and `p` has
   margin: 0. Found while building the return page: the line was sitting flush
   against the left edge of the viewport on every width. Inside the offer block it is
   already inset, which is why this is scoped rather than folded into .answered.
   Same box as .once, so the two read as one system. */
body > .answered {
  padding: 0 var(--gutter) clamp(3rem, 9vh, 4.5rem);
  max-width: 42rem;
  margin-inline: auto;
}

/* the entire recovery path: one quiet link, no button, no urgency */
.resend {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--quietype);
}

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

/* "Welcome back. The day didn't go anywhere." — shown in the product only,
   never sent to her, and never a comment on how long she was gone. */
.above {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--quietype);
  margin-bottom: clamp(1.25rem, 4vh, 2rem);
}

/* THE DRAWER — the thirty cards she owns, on one permanent page.
   No grid, no cards-as-tiles, no borders, no numbers, no count. A column of lines
   with air between them, at the offer block's measure, so it reads like the page she
   already knows rather than a library she has to manage. The first card is also the
   .cardline above it, at full size; these are the other twenty-nine and they are
   deliberately smaller, because a drawer is something you look through, not something
   that shouts thirty times. */
.drawer {
  padding: 0 var(--gutter) clamp(6rem, 18vh, 11rem);
  max-width: 42rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(2.75rem, 7vh, 4.25rem);
}

.drawer p {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: var(--card-tracking);
  text-wrap: pretty;
  max-width: 26ch;
}

/* said once, ever, and never repeated if she ignores it */
.once {
  padding: 0 var(--gutter) clamp(3rem, 9vh, 4.5rem);
  max-width: 42rem;
  margin-inline: auto;
  color: var(--quietype);
  font-size: 1rem;
  line-height: 1.5;
}