/* ============================================================
   kenphused-bwr — glue layer on top of theme.css
   theme.css is the design system (tokens, components); this file
   only wires the Ghost markup into it: the centred measure column,
   nav list resets, section rhythm, and small-screen fixes.
   ============================================================ */

/* ---- centred content column: 80% of the page (full-bleed bands opt out) ---- */
.page {
  max-width: 80%;
  margin-inline: auto;
  padding-inline: var(--edge);
}
/* hero / index / article header run the full 80%; body prose holds a readable
   ~72-char measure, centred in that column (theme.css default is ~58ch) */
.gh-content,
.post-content {
  max-width: 72ch;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .page { max-width: 100%; }
}

/* ---- Koenig width classes not covered by theme.css ---- */
.kg-width-wide { max-width: min(1080px, 92vw); margin-inline: auto; }
.gh-content .kg-width-full { max-width: 100vw; margin-inline: calc(50% - 50vw); }

/* ---- site header: reset the nav list, keep it on the 1200 grid ---- */
.gh-head-menu ul,
.footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}
.gh-head-menu { margin-right: var(--space-2); }
.gh-head-menu li { margin: 0; }

/* ---- hero ---- */
.hero { padding-top: calc(2.5 * var(--leading)); padding-bottom: var(--half); }
.hero h1 { max-width: 18ch; }
.hero-dek {
  max-width: 46ch;
  font-size: 19px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--leading); }

/* ---- stats band ---- */
.stats { padding: var(--leading) 0 calc(2 * var(--leading)); }
.stats .stat-num { font-size: clamp(26px, 3vw, 40px); line-height: 1.15; }

/* ---- ruled index ---- */
.index { padding-bottom: calc(2 * var(--leading)); }
.index > .kicker { margin-bottom: 0; }
.index .post-card:last-of-type { border-bottom: 2px solid var(--color-divider); }
.post-card-body > * + * { margin-top: var(--half); }
.post-card-body .kicker { margin-bottom: 0; }

/* ---- index / archive header ---- */
.index-head { padding: calc(1.5 * var(--leading)) 0 var(--half); }
.index-head .kicker { margin-bottom: var(--space-1); }

/* ---- single post / page ---- */
.gh-article { padding-top: calc(1.5 * var(--leading)); padding-bottom: calc(2 * var(--leading)); }
.gh-article-header { max-width: 100%; }
.gh-article-header .kicker { margin-bottom: var(--space-2); }
.gh-article-meta { margin-top: var(--half); }
.gh-article-image { margin: calc(1.5 * var(--leading)) 0; max-width: 100%; }
.gh-article-image figcaption { text-align: left; }
.error-page { padding-top: calc(3 * var(--leading)); padding-bottom: calc(3 * var(--leading)); }

/* ---- subscribe poster ---- */
.subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 34rem;
  margin-top: var(--leading);
}
.subscribe-form input[type="email"] { flex: 1 1 14rem; }
.subscribe-form .btn { flex: 0 0 auto; white-space: nowrap; }

/* ---- footer ---- */
.footer-inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  align-items: baseline;
}

/* ---- small screens ---- */
@media (max-width: 640px) {
  .stats .grid { grid-template-columns: repeat(2, 1fr); }
  .post-card, .gh-card { grid-template-columns: 1fr; gap: var(--half); }
  .post-card-date, .gh-card-date { order: -1; }
}