* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FCFBF8;
  color: #15263D;
  font-family: 'Source Serif 4', Georgia, serif;
  overflow-wrap: break-word;
}

a { color: #004AB3; text-decoration: none; }
a:hover { color: #032B53; }

/* ── Page content ─────────────────────────────── */
.wrap { max-width: 1240px; margin: 0 auto; padding: 72px 32px 88px; }

h1 {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 54px;
  line-height: 1.05;
  color: #032B53;
  margin: 0 0 48px;
}

/* About-style label / value blocks */
.block { margin-bottom: 40px; }
.block:last-child { margin-bottom: 0; }

.label {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 22px;
  color: #032B53;
  margin: 0 0 8px;
}

.value {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(21, 38, 61, 0.82);
  margin: 0;
  max-width: 1000px;
}

/* Placeholder note for blank pages */
.placeholder {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(21, 38, 61, 0.45);
  font-style: italic;
  margin: 0;
}

/* ── Server-rendered layout grids ─────────────────
   Class hooks for the inline grids in functions/_lib/render.js and
   functions/index.js, so they can collapse on mobile (media queries
   can't reach inline styles). `--cols` lets a template set its own
   desktop column count. */
.home-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}
.home-tier {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 40px;
  border-top: 3px solid #032B53;
  padding-top: 32px;
}
.home-recent {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 44px;
}
/* Overflow-safe fluid card grid (min() keeps a single column from
   overflowing on very narrow phones). */
.essay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 44px;
}
.site-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 44px;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
  .wrap { padding: 40px 20px 56px; }

  h1 { font-size: 34px; margin-bottom: 32px; }
  .label { font-size: 20px; }
  .value { font-size: 18px; }

  .home-top,
  .home-tier,
  .home-recent,
  .site-footer-grid {
    /* minmax(0,…) + min-width:0 lets tracks/items shrink below their
       content's intrinsic width instead of overflowing the phone. */
    grid-template-columns: minmax(0, 1fr);
  }
  .home-top > *,
  .home-tier > *,
  .home-recent > *,
  .site-footer-grid > * { min-width: 0; }
  .home-recent { gap: 0; }
  .home-top { gap: 36px; }
  .site-footer-grid { gap: 36px; }

  /* Media should never force horizontal overflow. */
  img, iframe { max-width: 100%; }
}