/* ============================================================================
   pagekit.css

   The homepage design system, extracted so the pages that sell something read
   as the same product as the page that earns the visit.

   The homepage is self contained and loads no stylesheet. Every other page
   loads theme.css. Rewriting theme.css to match the homepage would touch
   twenty pages that are out of scope, and a previous sprint regressed this
   site doing exactly that. So this file carries the homepage tokens and its
   editorial components, and only the monetised pages load it, AFTER theme.css.

   Measured from the live homepage at 1440 px, 2026-08-07. Values here are the
   measured values, not approximations of them.
   ========================================================================= */

.pk {
  --pk-bg:         oklch(0.965 0.018 78);
  --pk-paper:      oklch(0.985 0.012 80);
  --pk-bg-deep:    oklch(0.925 0.030 75);
  --pk-ink:        oklch(0.20 0.025 50);
  --pk-ink-soft:   oklch(0.38 0.022 55);
  --pk-muted:      oklch(0.55 0.020 60);
  --pk-rule:       oklch(0.82 0.020 70);
  --pk-rule-soft:  oklch(0.88 0.018 72);
  --pk-accent:     oklch(0.58 0.140 38);
  --pk-accent-ink: oklch(0.34 0.110 35);
  --pk-sage:       oklch(0.50 0.055 135);
  --pk-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --pk-sans: "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pk-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;
}

/* --- shell -------------------------------------------------------------- */
/* The homepage puts content at x 92 of 1440. 1320 max width inside a 32 px
   gutter reproduces that exactly, and nothing ever touches the window edge. */
/* Without this the 32 px gutter is added OUTSIDE the 1320, which puts content at
   x 60 rather than the reference x 92. Every page adopting pagekit hits this. */
.pk, .pk *, .pk *::before, .pk *::after { box-sizing: border-box; }
.pk-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* Two columns at 80 px, the homepage editorial grid. */
.pk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.pk-grid-wide { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; }

/* Sections are separated by a kicker and a rule, never by whitespace alone. */
.pk-section { padding: 96px 0 0; }
.pk-section:first-of-type { padding-top: 64px; }
.pk-rule { border: 0; border-top: 1px solid var(--pk-rule); margin: 0 0 34px; }
.pk-rule-soft { border: 0; border-top: 1px solid var(--pk-rule-soft); margin: 34px 0; }

/* --- type --------------------------------------------------------------- */
.pk-kicker {
  display: block; font-family: var(--pk-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--pk-accent);
  margin: 0 0 18px;
}
.pk h1, .pk-h1 {
  font-family: var(--pk-display); font-weight: 400;
  font-size: clamp(40px, 5.6vw, 92px); line-height: 0.96; letter-spacing: -0.028em;
  margin: 0 0 28px; text-wrap: balance; color: var(--pk-ink);
}
.pk h2, .pk-h2 {
  font-family: var(--pk-display); font-weight: 400;
  font-size: clamp(28px, 2.9vw, 40px); line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 20px; text-wrap: balance; color: var(--pk-ink);
}
.pk h3, .pk-h3 {
  font-family: var(--pk-sans); font-weight: 600; font-size: 15px; line-height: 1.4;
  letter-spacing: 0.01em; margin: 0 0 10px; color: var(--pk-ink);
}
/* The signature device. One italic accent word inside a display line, once per page. */
.pk em, .pk-accent-word { font-style: italic; color: var(--pk-accent); }

.pk-lede {
  font-family: var(--pk-display); font-size: 19px; line-height: 1.55;
  color: var(--pk-ink-soft); margin: 0 0 36px; max-width: 42ch; text-wrap: pretty;
}
/* Reading copy. 62ch at 21 px reproduces the homepage 444 px measure. */
.pk-prose p {
  font-family: var(--pk-display); font-size: 21px; line-height: 1.45;
  color: var(--pk-ink); margin: 0 0 20px; max-width: 62ch; text-wrap: pretty;
}
.pk-prose p.pk-note { font-family: var(--pk-sans); font-size: 15px; line-height: 1.6; color: var(--pk-muted); }

/* --- stat row, the homepage device for a set of figures ------------------ */
.pk-stats { display: flex; flex-wrap: wrap; gap: 40px; margin: 34px 0 0;
  padding-top: 24px; border-top: 1px solid var(--pk-rule-soft); }
.pk-stat-n { font-family: var(--pk-display); font-size: 34px; line-height: 1;
  color: var(--pk-accent); display: block; }
.pk-stat-l { font-family: var(--pk-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--pk-muted); display: block; margin-top: 8px; }

/* --- surfaces ----------------------------------------------------------- */
.pk-card { background: var(--pk-paper); border: 1px solid var(--pk-rule-soft);
  border-radius: 14px; padding: 28px 30px; }
.pk-quiet { background: var(--pk-bg-deep); border-radius: 14px; padding: 26px 30px; }

/* --- the one button ----------------------------------------------------- */
/* theme.css carries a body-link rule whose :not() chain reaches specificity
   0,0,5,2 and beats a plain `main a.pk-btn` at 0,0,1,2, which paints accent on
   an accent background: contrast 1.0, an invisible button. That has shipped
   broken twice on this site. Two defences, deliberately belt and braces:
   .pk-btn is named in theme.css's exclusion list, and the class is repeated
   here to reach 0,0,3,2 so this still wins if that list is ever reverted. */
main a.pk-btn.pk-btn.pk-btn, main a.pk-btn.pk-btn.pk-btn:link,
main a.pk-btn.pk-btn.pk-btn:visited, a.pk-btn {
  display: inline-block; background: var(--pk-accent); color: #FFFBF5;
  font-family: var(--pk-sans); font-weight: 600; font-size: 16px; line-height: 1.25;
  text-decoration: none; padding: 16px 30px; border-radius: 10px;
  min-height: 48px; border: 1px solid var(--pk-accent);
}
main a.pk-btn.pk-btn.pk-btn:hover, a.pk-btn:hover {
  background: var(--pk-accent-ink); border-color: var(--pk-accent-ink); color: #FFFBF5;
}
.pk-price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.pk-price-n { font-family: var(--pk-display); font-size: 52px; line-height: 1; color: var(--pk-ink); }
.pk-price-t { font-family: var(--pk-sans); font-size: 15px; color: var(--pk-muted); }

/* --- mobile ------------------------------------------------------------- */
@media (max-width: 900px) {
  .pk-wrap { padding: 0 22px; }
  .pk-grid, .pk-grid-wide { grid-template-columns: 1fr; gap: 40px; }
  .pk-section { padding-top: 64px; }
  .pk-prose p { font-size: 18px; }
  .pk-stats { gap: 28px; }
  main a.pk-btn.pk-btn.pk-btn, a.pk-btn { display: block; text-align: center; }
}