/* css/pages.css — the small in-system standalone pages (no-JS success/error, privacy).
 * Same ground and type as the splash, kept deliberately quiet. */

:root {
  --black: #0A0A0A; --bone: #E7E2D6; --bone-dim: #C1BAB4; --grey: #82786F;
  --glow-red: #CA4445; --hairline: rgba(231, 226, 214, 0.14);
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@font-face {
  font-family: "Postal";
  src: url("../fonts/postal-bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; }
html { background: var(--black); }
body {
  margin: 0; min-height: 100svh; color: var(--bone);
  font-family: var(--font-mono);
  background-color: #060606;
  display: grid; place-items: center; text-align: center; padding: 8vw 6vw;
}
.page { display: grid; gap: 1rem; max-width: 36rem; }
.page h1, .page h2 {
  margin: 0; font-family: "Postal", "Arial Narrow", system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.015em; color: var(--bone);
  /* scaleY 1.24 per Fitz's own spec ("I stretch it tall to about 124", 06-10 call) — matches
     --postal-scaley in splash.css. The FILE is still the placeholder; the treatment is not. */
  transform: scaleY(1.24); transform-origin: center; display: inline-block;
}
.page .lede { margin: 0; color: var(--bone-dim); line-height: 1.7; }
/* Links stay underlined + bone-dim (AA on black); the red failed 4.5:1 for link text. */
.page a { color: var(--bone-dim); text-underline-offset: 0.22em; }
.page a:hover, .page a:focus-visible { color: var(--bone); }
.page .meta { font-size: 0.8rem; letter-spacing: 0.22em; color: var(--grey); }
.page ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

/* Document pages (privacy): left-aligned body, centred heading. */
.page-doc { text-align: left; max-width: 42rem; }
.page-doc h2 { text-align: center; }
/* Privacy / document sub-headings — quiet + spaced, not the tall Postal treatment (h1/h2 only). */
.page-doc h3 {
  margin: 0.9rem 0 0; font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone);
}

/* Donate page— a quiet giving affordance. Red border = the active action (brand discipline);
   inert until wired (a span that becomes a real link when the Stripe URL is added). */
.page-cta { margin: 0.4rem 0 0; }
.page-btn {
  display: inline-block; border: 1px solid var(--glow-red); color: var(--bone);
  padding: 0.8rem 1.6rem; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
}
/* When DONATE goes live it becomes an <a> — keep it identical to the inert button
   (the .page a rule would otherwise underline it and dim the colour). */
.page a.page-btn { color: var(--bone); text-decoration: none; }
.page-note { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--grey); }

/* Thank-you page — the handwritten confirmation, matching the email success line. */
@font-face {
  font-family: "Amsterdam Handwriting";
  src: url("../fonts/amsterdam-handwriting.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
.page .thanks-hand {
  margin: 0.2rem 0 0.6rem;
  font-family: "Amsterdam Handwriting", cursive;
  font-size: 2.1rem; line-height: 1.3; color: var(--bone);
  transform: rotate(-2deg);
}
.page .ty-logo {
  display: block; width: auto; max-width: 240px; height: auto;
  margin: 0 auto 1.4rem;
}

/* Thank-you page — hairline rules bracketing the logo (mirrors the email screen). */
.page .ty-rule { width: 64px; height: 1px; background: var(--hairline); margin: 0 auto 1.4rem; }
.page .ty-rule-end { margin: 0.4rem auto 1.4rem; }