/* =========================================================================
   Guild Page — shared layout for the institutional / transactional pages.
   Wave A of the Eleventy migration (2026-08-13).

   WHAT THIS REPLACES
   Eight pages (privacy, terms, thanks, welcome, support/welcome,
   founding/welcome, apprenticeship/reserved, 404) each carried their own
   57–92 line inline <style> block. Roughly two thirds of each block was a
   hand-rolled copy of the site header and footer — all of which base.njk
   now supplies. What remained was the same "hero band, then prose" layout
   expressed in two different vocabularies:

       privacy / terms  ->  .page-hero  .page-hero__sub  .article
       welcome family   ->  .hero       p.lede           .body  .cta-row

   Both are unified here into one `gp-` set. Values split the difference
   between the two originals, so every page shifts slightly and none shifts
   much.

   WHY THE gp- PREFIX
   The original names collide with other sheets in the 21-stylesheet layer:
   `.hero` is also in article.css, `.callout` and `.btn` and `.wrap` each
   appear in one to four other files, and `.body` as a class name is an
   accident waiting to happen. Prefixing makes this sheet safe to load
   alongside anything.

   TOKENS ONLY — no raw hex, per the contract at the top of tokens.css.
   Note the accent token is --forest-pine (the old inline blocks called it
   --forest, which does not exist in tokens.css).
   ========================================================================= */

/* Scoped to the components themselves rather than a wrapper class, so a page
   only needs the section elements and cannot forget an outer div. Kept out of
   tokens.css because these are layout choices for this family, not brand
   values. */
.gp-hero,
.gp-body,
.gp-404 {
  --gp-pad: clamp(20px, 5vw, 56px);
  --gp-measure: 720px;
}

/* -------------------------------------------------------------------------
   Hero band
   ------------------------------------------------------------------------- */

.gp-hero {
  background: var(--color-bg-alt);
  padding: 88px var(--gp-pad) 68px;
}

.gp-hero__inner {
  max-width: var(--gp-measure);
  margin: 0 auto;
}

/* Centred variant — used by the legal documents, the Apprenticeship
   reservation page and the 404, where there is no long-form body to align
   against. */
.gp-hero--center { text-align: center; }

/* Dark variant — /founding/welcome/ only. A walnut band for the one page that
   marks a lifetime purchase.

   ACCESSIBILITY FIX (2026-08-13): the original inline block set the kicker to
   var(--terracotta) on this walnut ground, which computes to 2.92:1 and fails
   WCAG AA. tokens.css already ships --terracotta-on-dark (4.97:1, same hue)
   for exactly this case; it just had not reached these hand-coded pages. */
.gp-hero--dark {
  background: var(--walnut);
  color: var(--cream);
}
.gp-hero--dark h1 { color: var(--cream); }
.gp-hero--dark .gp-kicker { color: var(--color-accent-warm-on-dark); }
.gp-hero--dark .gp-hero__sub { color: rgba(244, 238, 222, 0.85); }

/* Wax seal above the headline — /founding/welcome/. */
.gp-hero__seal {
  width: 148px;
  height: auto;
  display: block;
  margin: 0 auto 32px;
}

.gp-kicker {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--font-weight-sans-emphasis);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-warm);
  margin-bottom: 18px;
}

.gp-hero h1 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-serif-heading);
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.011em;
  color: var(--color-text);
  margin-bottom: 22px;
}

/* The italic serif deck under the h1. Was .page-hero__sub on the legal pages
   and p.lede on the welcome pages. */
.gp-hero__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Body prose
   ------------------------------------------------------------------------- */

.gp-body {
  background: var(--color-bg);
  padding: 72px var(--gp-pad) 100px;
}

.gp-body__inner {
  max-width: var(--gp-measure);
  margin: 0 auto;
}

.gp-body h2 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-serif-heading);
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.25;
  color: var(--color-text);
  margin: 48px 0 18px;
}

.gp-body h2:first-child,
.gp-body h2:first-of-type { margin-top: 0; }

.gp-body h3 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-serif-heading);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-text);
  margin: 32px 0 12px;
}

.gp-body p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.gp-body ul,
.gp-body ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.gp-body li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 9px;
}

.gp-body strong { font-weight: 600; color: var(--color-text); }

.gp-body hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: 44px 0;
}

/* -------------------------------------------------------------------------
   Callout — kraft panel with a terracotta rule
   ------------------------------------------------------------------------- */

.gp-callout {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent-warm);
  padding: 24px 28px;
  margin: 32px 0;
}

.gp-callout p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Call-to-action row
   ------------------------------------------------------------------------- */

.gp-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--color-rule);
}

/* .gp-hero .gp-cta sits inside the band, so it needs no top rule. */
.gp-hero .gp-cta { border-top: 0; padding-top: 0; }

.gp-cta a {
  display: inline-block;
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-default), border-color var(--transition-default);
}

.gp-cta a.is-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}
.gp-cta a.is-primary:hover {
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

.gp-cta a.is-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-rule);
}
.gp-cta a.is-secondary:hover {
  border-color: var(--color-text);
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   Founder's note — a signed walnut panel. /founding/welcome/ only.
   ------------------------------------------------------------------------- */

.gp-founder-note {
  --gp-pad: clamp(20px, 5vw, 56px);
  --gp-measure: 720px;
  background: var(--walnut);
  color: var(--cream);
  padding: 48px var(--gp-pad);
  margin-top: 56px;
}

.gp-founder-note__inner {
  max-width: var(--gp-measure);
  margin: 0 auto;
}

.gp-founder-note p {
  color: rgba(244, 238, 222, 0.92);
  line-height: 1.8;
  margin-bottom: 18px;
}

.gp-founder-note a { color: var(--color-accent-warm-on-dark); }

.gp-signature {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cream);
  margin-top: 24px;
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   404 — the one page in this family with no body section. Centres a single
   hero in the viewport and carries the botanical line-art motif.

   Before this migration /404.html shipped with no header, no footer and no
   nav at all: a dead end at exactly the moment a reader most needs a route
   onward. It now sits on base.njk like everything else, so the nav, search
   and footer come along for free.
   ------------------------------------------------------------------------- */

.gp-404 {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  padding: 72px var(--gp-pad);
  text-align: center;
  overflow: hidden;
}

.gp-404__inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.gp-404__motif {
  position: absolute;
  right: -6%;
  bottom: -8%;
  z-index: 0;
  pointer-events: none;
  width: min(340px, 52vw);
  height: min(340px, 52vw);
  background-color: var(--color-text);
  opacity: 0.06;
  -webkit-mask: url(/assets/img/line-art/tpg-arching.svg) no-repeat center / contain;
          mask: url(/assets/img/line-art/tpg-arching.svg) no-repeat center / contain;
}

/* -------------------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .gp-hero { padding: 56px var(--gp-pad) 44px; }
  .gp-body { padding: 48px var(--gp-pad) 72px; }
  .gp-cta a { width: 100%; text-align: center; }
}