/* ==========================================================================
   Page-level additions for /about and /policies
   Reuses site.css tokens and primitives (.section, .kicker, .h2, .lede,
   .sp-prose, .sp-guide, .sp-facts, .textlink, .doors, .steps, …).
   Only the patterns those pages need that site.css doesn't already have
   are defined here.
   ========================================================================== */

/* Simple hero for pages without the canvas/video hero — just clears the
   fixed header, then reuses the kicker / h1(.h2) / lede pattern. */
.page-hero {
  padding: clamp(112px, 15vw, 148px) 0 clamp(44px, 6vw, 72px);
}
.page-hero .h2 { max-width: 18ch; }
.page-hero .lede { margin-top: 16px; }

/* Policies — on-page contents (anchor list) */
.policy-toc {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 2px; max-width: 420px;
}
.policy-toc a {
  display: block; padding: 9px 2px; font-size: 15px;
  color: var(--cream-soft); text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.policy-toc a:hover { color: var(--cream); border-color: var(--accent); }

/* Policies — each section, divided like the FAQ/included lists elsewhere */
.policy-list { display: grid; }
.policy-item { padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.policy-item:first-child { padding-top: 0; border-top: 0; }
.policy-item h2 {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.005em; font-size: clamp(22px, 2.8vw, 32px); color: var(--cream);
  margin-bottom: 14px;
}
.policy-item .sp-prose p b { color: var(--cream); font-weight: 500; }