/* v3 test funnel — shared base.
   Everything common to the three style directions lives here, so that when
   Austin compares them the only thing changing is the design layer.

   Palette and type sizes come from research/02-external-research.md §6.
   Every text/background pair here is computed, not eyeballed. */

:root {
  --ground:     #F7F1E6;   /* warm paper */
  --card:       #FFFDF8;   /* the letter */
  --ink:        #2E1C12;   /* 16.00:1 on card */
  --ink-muted:  #6B564A;   /* 6.76:1 on card */
  --rule:       #D8C5A8;   /* decorative only, never text */
  --mark:       #7A3B22;   /* stamps and chapter marks, 8.34:1 on card */
  --cta:        #B4551A;   /* 4.94:1 with white — the only saturated fill */
  --cta-dark:   #8F3A14;
  --scrim:      rgba(28, 16, 10, .72);   /* measured floor, see .band-label */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --col: 640px;            /* letter measure on desktop */
  --pad: 22px;             /* phone side gutter */
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2-variations"),
       url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2-variations"),
       url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;          /* brief: 17–18px body on phones */
  line-height: 1.62;        /* above the 1.5 WCAG floor */
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--mark); }

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

/* ---------------------------------------------------------------
   Masthead and headline
   --------------------------------------------------------------- */

.masthead { padding: 26px var(--pad) 0; text-align: center; }
.masthead img { width: 148px; margin: 0 auto; }

h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 8.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: .55em auto .34em;
  max-width: 14ch;
  text-align: center;
}

.subhead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.45;
  color: var(--ink-muted);
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* ---------------------------------------------------------------
   Letter body
   --------------------------------------------------------------- */

.letter p { margin: 0 0 1.15em; }

.lede { font-size: 1.08rem; }

.letter .in { margin: 1.8em 0; }

/* Not scoped to .letter: the offer has figures too, and scoping this left
   their captions at full body size. */
figcaption {
  font-family: var(--sans);
  font-style: italic;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--ink-muted);
  margin-top: .6em;
  text-align: center;
}

/* ---------------------------------------------------------------
   The one real review in this sample
   --------------------------------------------------------------- */

.review {
  margin: 2em 0;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--rule);
}
.review p {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 0 .5em;
}
.review cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .82rem;
  color: var(--ink-muted);
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------
   Buy button — von Restorff: the only saturated fill on the page
   --------------------------------------------------------------- */

.cta { margin: 2.3em 0 2.6em; text-align: center; }

.btn {
  display: block;
  width: 100%;
  max-width: 430px;
  min-height: 56px;              /* well above the 44px tap floor */
  margin: 0 auto;
  padding: 17px 24px;
  background: var(--cta);
  color: #fff;                   /* 4.94:1 */
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  transition: background .18s ease;
}
.btn:hover, .btn:focus-visible { background: var(--cta-dark); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.cta-note {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 32em;
  margin: .9em auto 0;
}

/* ---------------------------------------------------------------
   Chapter-break photo band
   --------------------------------------------------------------- */

.band { position: relative; margin: 0; }
.band img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* The label sits on a solid panel, not on a gradient that fades away
   behind the text. Measured: the brightest pixel behind these glyphs was
   rgb(199,203,155), where a fading scrim gave white 1.69:1. At .72 the
   panel clears 4.5:1 even against a pure-white highlight (7.51:1), so it
   holds for any photograph we drop into a band later. */
.band-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px var(--pad) 16px;
  background: rgba(28, 16, 10, .72);
  color: #fff;
  text-align: center;
}
.band-label::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 72px;
  background: linear-gradient(to top, rgba(28, 16, 10, .72), rgba(28, 16, 10, 0));
  pointer-events: none;
}
.band-label .place {
  display: block;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .92;
}
.band-label .chapter {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.25;
  margin-top: .18em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------
   Sample footer (these are style samples, not the finished page)
   --------------------------------------------------------------- */

.sample-note {
  border-top: 1px solid var(--rule);
  margin-top: 40px;
  padding: 24px var(--pad) 46px;
  text-align: center;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.sample-note strong { color: var(--ink); }
.sample-note nav { margin-top: 14px; }
.sample-note nav a {
  display: inline-block;
  min-height: 44px;
  padding: 11px 14px;
  font-weight: 600;
}

@media (min-width: 760px) {
  body { font-size: 18px; }
  :root { --pad: 28px; }
  .masthead img { width: 168px; }
  .band img { aspect-ratio: 21 / 9; }
  .band-label { padding-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}