/* ══════════════════════════════════════════════════════════════════════════
   Page-level layout — carried over from the source landing template's
   inline <style> block (moved here so nothing is hardcoded into <head>).
   Section rules only: every color, font, radius and shadow still comes
   from style.css's design tokens.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; overflow-x: clip; } /* the hero's decoration
   circle deliberately rises past the page edge — clip (not hidden) keeps it
   from widening the page */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
@media (max-width: 480px) { .nav a { display: none; } } /* phone width: the nav
   keeps brand + the one action */

/* — kicker (terracotta small text takes the deep step for contrast) — */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }

/* — hero — */
.hero { position: relative; padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.hero::before {
  content: ""; position: absolute; right: -180px; top: -220px;
  width: 420px; height: 420px; border-radius: 50%;
  background: var(--color-accent-2-200); pointer-events: none; z-index: -1;
}
@media (max-width: 1420px) { .hero::before { right: 0; } }

.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: clamp(43px, 6.26vw, 82px);
  letter-spacing: 0; margin: 0;
  margin-left: -0.028em;
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.hero .sub {
  font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic;
}
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* — the seed bed: four tinted circles, staggered like seeds thrown — */
.bed {
  position: relative; padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading));
  min-height: calc(17 * var(--leading));
}
.seed {
  position: absolute; border-radius: 50%; aspect-ratio: 1;
  display: grid; place-content: center; text-align: center;
  padding: var(--leading); box-sizing: border-box;
}
.seed-a { width: 240px; left: 64px; top: calc(2.5 * var(--leading)); background: var(--color-accent-100); }
.seed-b { width: 190px; left: 208px; top: calc(9 * var(--leading)); background: var(--color-accent-200); }
.seed-c { width: 310px; right: 96px; top: calc(-3.5 * var(--leading)); background: var(--color-accent-2-300); }
.seed-d { width: 175px; right: 321px; top: calc(4.5 * var(--leading)); background: var(--color-accent-2-100); }
.seed .stat-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px); line-height: calc(2 * var(--leading));
  margin: 0; text-box: trim-both cap alphabetic;
}
.seed-a .stat-num, .seed-b .stat-num { color: var(--color-accent-700); }
.seed-d .stat-num { color: var(--color-accent-2-700); }
.seed-c .stat-num { color: var(--color-accent-2-800); }
.seed .stat-label {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0; max-width: 17ch;
  text-wrap: balance;
}

/* — feature rows — */
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.feature {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.25 * var(--leading)) 0;
}
.f-title {
  position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading);
  margin: 0; text-box: trim-both cap alphabetic;
}
.f-title::before {
  content: ""; position: absolute; left: -36px; top: calc(0.5cap - 9px);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-accent);
}
@media (max-width: 1280px) { .f-title::before { display: none; } }
.f-copy {
  font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic;
}

/* — imagery split — */
.split {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading));
}
.split-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading));
  margin: 0; text-box: trim-both cap alphabetic;
}
.split-copy .note {
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic;
}
.split-figure { margin: 0; width: min(400px, 100%); justify-self: end; border-radius: calc(2 * var(--radius-lg)); overflow: hidden; }
.split-figure img { width: 100%; aspect-ratio: 493 / 668; object-fit: cover; }

/* — quote — */
.quote { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 32px); line-height: calc(1.5 * var(--leading));
  max-width: 32ch; margin: 0;
  text-indent: -0.559em;
  text-box: trim-both cap alphabetic;
}
.quote figcaption {
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: calc(2 * var(--leading) - 1cap) 0 0;
  text-indent: -1.347em;
  text-box: trim-both cap alphabetic;
}
@media (max-width: 720px) { .quote blockquote, .quote figcaption { text-indent: 0; } }

/* — the rounded sign-up patch — */
.close { padding: 0 0 calc(2 * var(--leading)); }
.patch { background: var(--color-accent-2-100); border-radius: calc(2 * var(--radius-lg)); padding: calc(2 * var(--leading)) clamp(24px, 4vw, 64px); }
.patch h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.patch .sub { font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.signup { display: flex; gap: var(--space-3); align-items: stretch; max-width: 480px; margin-top: var(--leading); }
.signup .input { flex: 1; }
.signup .input, .signup .btn { min-height: 36px; }

/* — footer — */
footer { padding: calc(2 * var(--leading)) 0 var(--leading); font-size: 13px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; border-top: 1px solid var(--color-divider); padding-top: var(--leading); }
.footer-menu { list-style: none; display: flex; gap: var(--space-4); margin: 0; padding: 0; }
.footer-menu a { color: inherit; text-decoration: none; }
.footer-menu a:hover { color: var(--color-accent-700); }
.footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); margin-top: var(--leading); }
.footer-widget-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; margin: 0 0 var(--space-2); color: var(--color-text); }

/* — responsive collapse (landing sections) — */
@media (max-width: 1080px) {
  .bed { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--leading) var(--half); justify-items: center; padding-bottom: calc(3.5 * var(--leading)); }
  .seed { position: static; width: min(clamp(160px, 44vw, 240px), 100%); }
  .seed-c { width: min(clamp(180px, 50vw, 280px), 100%); }
  .seed-b, .seed-d { transform: translateY(var(--leading)); }
}
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2.5 * var(--leading)); }
  .hero::before { width: 280px; height: 280px; top: -160px; }
  .split { grid-template-columns: 1fr; }
  .split-figure { order: -1; justify-self: start; }
}
@media (max-width: 389px) {
  .bed { grid-template-columns: 1fr; gap: var(--leading); }
  .seed { width: clamp(160px, 56vw, 220px); }
  .seed-c { width: clamp(180px, 62vw, 240px); }
  .seed-a, .seed-c { justify-self: start; }
  .seed-b, .seed-d { transform: none; justify-self: end; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Blog — journal grid (homepage + archive), single-article layout, table
   of contents and the "Key takeaways" callout. New rules, built only from
   the same tokens as everything above.
   ══════════════════════════════════════════════════════════════════════ */

/* — journal / archive grid of post cards — */
.journal { padding: calc(3 * var(--leading)) 0 calc(3 * var(--leading)); }
.journal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--leading); }
.journal-title { font-size: 32px; line-height: calc(1.5 * var(--leading)); margin: 0; text-box: trim-both cap alphabetic; }
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.post-card { text-decoration: none; transition: box-shadow .15s ease; }
.post-card:hover { box-shadow: var(--shadow-md); }
.post-card .card-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.journal-empty { padding: var(--leading) 0 calc(3 * var(--leading)); opacity: .7; }
@media (max-width: 960px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .journal-grid { grid-template-columns: 1fr; } }

/* — archive header (index.php) — */
.archive-head { padding: calc(3 * var(--leading)) 0 var(--leading); }
.archive-description { max-width: var(--measure); color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.pagination { display: flex; gap: var(--space-2); margin: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
  padding: 0 10px; border-radius: 999px; font-size: 13px; text-decoration: none;
  color: var(--color-text); border: 1px solid var(--color-divider);
}
.pagination .current { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.pagination a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* — single article / page — */
.article { padding-bottom: calc(3 * var(--leading)); }
.article-header { padding: calc(3 * var(--leading)) 0 var(--leading); max-width: 74ch; }
.article-title { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.12; margin: 0 0 var(--space-3); text-box: trim-both cap alphabetic; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.article-figure { margin: 0 0 calc(2 * var(--leading)); border-radius: calc(2 * var(--radius-lg)); overflow: hidden; }
.article-figure img { width: 100%; max-height: 520px; object-fit: cover; }
.article-body { max-width: 74ch; font-size: 17px; line-height: var(--leading); }
.article-body h2 { margin-top: calc(2 * var(--leading)); scroll-margin-top: 24px; }
.article-body h3 { margin-top: var(--leading); scroll-margin-top: 24px; }
.article-body p { margin-bottom: var(--space-3); }
.article-body img { border-radius: var(--radius-md); margin: var(--space-4) 0; }
.article-body ul, .article-body ol { padding-left: 1.2em; margin: 0 0 var(--space-3); }
.article-body blockquote {
  border-left: 3px solid var(--color-accent); margin: var(--leading) 0; padding: var(--space-2) var(--space-4);
  font-style: italic; color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.article-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: calc(2 * var(--leading)); padding-top: var(--leading); border-top: 1px solid var(--color-divider); max-width: 74ch; }

/* — table of contents — */
.toc { background: var(--color-surface); border-radius: calc(2 * var(--radius-lg)); padding: var(--space-4) var(--space-6); max-width: 74ch; margin: 0 0 calc(2 * var(--leading)); }
.toc-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--space-2); color: var(--color-accent-700); }
.toc ol { margin: 0; padding-left: 1.1em; font-size: 14px; line-height: 1.9; }
.toc a { color: var(--color-text); text-decoration: none; }
.toc a:hover { color: var(--color-accent-700); text-decoration: underline; }

/* — key takeaways callout — reuses the sign-up patch's sage-tinted,
   over-rounded language so it reads as part of the same system — */
.takeaways { background: var(--color-accent-2-100); border-radius: calc(2 * var(--radius-lg)); padding: var(--space-4) var(--space-6); max-width: 74ch; margin: 0 0 calc(2 * var(--leading)); }
.takeaways-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; margin: 0 0 var(--space-3); color: var(--color-accent-2-800); }
.takeaways ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: var(--space-2); }
.takeaways li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.6; }
.takeaways li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-2-500); }
