/* Standalone static pages: about, contact, editorial policy, privacy, terms.
 *
 * This used to be a self-contained dark theme with its own palette
 * (--accent: #7c5cff, a fixed #0a0b10 background, Inter) — the look the whole
 * site had before the 2026-09 blog redesign. That left five different designs
 * live at once: blog.css on /blog, style.css on the landing page, this on
 * about/contact/editorial-policy, and a drifting inline copy of it on
 * privacy/terms.
 *
 * It is now a thin layer on top of assets/blog.css, which each of these pages
 * loads first. Everything structural — body, links, prose, tables, headings,
 * dark/light theming, the header and footer — comes from there. Only the few
 * classes these pages actually use are defined here, and they are written
 * against the --fa-* tokens so they follow the theme toggle like everything
 * else.
 *
 * Load order matters: blog.css, then this.
 */

/* The page title. blog.css styles .fa-h1 for hero headlines but has no rule
   for a bare <h1> inside prose, which is what these documents carry. */
.fa-page h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--fa-ink);
  margin: 0 0 10px;
  text-wrap: pretty;
}

/* Was uppercase indigo. The redesign sets section headings in Space Grotesk at
   full size, so these now match every <h2> in an article. */
.fa-page h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.025em;
  text-transform: none;
  color: var(--fa-ink);
  margin: 40px 0 14px;
}
.fa-page h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--fa-ink);
  margin: 30px 0 8px;
}

.fa-page .update-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--fa-muted);
  margin: 0 0 34px;
}

.fa-page .lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fa-body);
  margin-bottom: 30px;
  text-wrap: pretty;
}

/* Matches .fa-callout in blog.css — same accent rule down the left, same
   hairline box — so a contact prompt reads as the site's own component. */
.fa-page .contact-box {
  border-left: 3px solid var(--fa-accent);
  border-top: 1px solid var(--fa-line);
  border-right: 1px solid var(--fa-line);
  border-bottom: 1px solid var(--fa-line);
  background: var(--fa-surface);
  padding: 24px 26px;
  margin: 40px 0 0;
  border-radius: 0;
}
.fa-page .contact-box p:first-child { margin-top: 0; }

.fa-page .byline-card {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 26px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--fa-line);
  background: var(--fa-surface);
}
/* The avatar was a purple gradient. Flat accent, like .fa-avatar. */
.fa-page .byline-card .avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--fa-btnInk);
  background: var(--fa-btn);
}
.fa-page .byline-card .who {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--fa-ink);
}
.fa-page .byline-card .role { color: var(--fa-muted); font-size: 13.5px; }

/* refund.html calls out its own headline term; delete-account.html numbers its
   steps. Both were indigo panels; they now borrow the blog's callout and list. */
.fa-page .highlight-box {
  border-left: 3px solid var(--fa-accent);
  border-top: 1px solid var(--fa-line);
  border-right: 1px solid var(--fa-line);
  border-bottom: 1px solid var(--fa-line);
  background: var(--fa-surface);
  padding: 20px 24px;
  margin: 26px 0;
}
.fa-page .highlight-box p:first-child { margin-top: 0; }
.fa-page .steps { padding-left: 1.3em; }
.fa-page .steps li { margin-bottom: 10px; }

/* The real site header and footer replace these. Kept as rules rather than
   stripped from the markup so an old copy of a page still degrades quietly
   instead of showing a stray duplicate nav. */
.fa-page .back-link,
.fa-page .page-footer { display: none; }

@media (max-width: 760px) {
  .fa-page h2 { font-size: 22px; margin-top: 32px; }
  .fa-page .lede { font-size: 17.5px; }
  .fa-page .contact-box { padding: 20px 18px; }
  .fa-page .byline-card { flex-direction: column; align-items: flex-start; }
}