/* blog.css — post archive + single post. Long-form reading lives on the
   warm-cream ground (see .section-light in upgrades.css); the hero stays dark.
   Type: Cormorant Garamond display / Jost body — the locked system, no drift. */

/* ---------------------------------------------------------------- archive */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
@media (min-width: 700px)  { .blog-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 1080px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card { display: flex; flex-direction: column; background: rgba(255,255,255,.6);
  border: 1px solid rgba(13,34,64,.12); overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease); }
.post-card:hover { border-color: rgba(138,109,51,.45); transform: translateY(-3px); }
.post-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-alt); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease-silk); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-family: var(--sans); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px; }
.post-card__title { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.25;
  margin: 0 0 10px; }
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--gold-ink); }
.post-card__excerpt { font-family: var(--sans); font-size: 15px; line-height: 1.65;
  color: var(--ink-soft); margin: 0 0 18px; }
.post-card__link { margin-top: auto; font-family: var(--sans); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-ink); text-decoration: none; }
.post-card__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-card a:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

/* pagination */
.blog-pagination { margin-top: 52px; display: flex; justify-content: center; }
.blog-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.blog-pagination .page-numbers { font-family: var(--sans); font-size: 14px; min-width: 44px;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border: 1px solid rgba(13,34,64,.16); color: var(--ink-soft); text-decoration: none;
  transition: border-color .25s var(--ease), color .25s var(--ease); }
.blog-pagination .page-numbers:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.blog-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.blog-pagination .page-numbers:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

/* ----------------------------------------------------------------- single */
.post-hero { position: relative; min-height: 56vh; display: flex; align-items: flex-end;
  overflow: hidden; }
@media (min-width: 900px) { .post-hero { min-height: 62vh; } }
.post-hero__bg { position: absolute; inset: 0; }
.post-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.post-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,8,15,.45) 0%, rgba(4,8,15,.72) 55%, rgba(4,8,15,.92) 100%); }
.post-hero__inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px) clamp(40px, 6vw, 72px); }
.post-hero__meta { font-family: var(--sans); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.post-hero__title { font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 6.2vw, 60px); line-height: 1.08; color: var(--white);
  margin: 0; max-width: 20ch; }

/* article body — the reading column */
.post-body { max-width: 68ch; margin: 0 auto; font-family: var(--sans);
  font-size: 17px; line-height: 1.8; color: var(--ink-soft); }
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2; color: var(--ink); margin-top: 1.8em; }
.post-body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 3vw, 27px);
  color: var(--ink); margin-top: 1.5em; }
.post-body h2 em, .post-body h3 em { color: var(--gold-ink); font-style: italic; }
.post-body a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--ink); }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: .5em; }
.post-body img { max-width: 100%; height: auto; display: block; }
.post-body blockquote { border-left: 2px solid var(--gold-ink); padding-left: 22px;
  font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.6; color: var(--ink); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body :focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

/* prev / next */
.post-nav { max-width: 68ch; margin: 56px auto 0; display: flex; gap: 16px;
  border-top: 1px solid rgba(13,34,64,.12); padding-top: 26px; }
.post-nav__item { flex: 1; font-family: var(--sans); text-decoration: none; min-height: 44px; }
.post-nav__item--next { text-align: right; }
.post-nav__dir { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 6px; }
.post-nav__title { font-family: var(--serif); font-size: 18px; line-height: 1.3; color: var(--ink); }
.post-nav__item:hover .post-nav__title { color: var(--gold-ink); }
.post-nav__item:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card__media img { transition: none; }
  .post-card:hover { transform: none; }
  .post-card:hover .post-card__media img { transform: none; }
}

/* ---- Centered blog headings (per D Downs 2026-07-15) ----
   NOTE: the rest of the site is left-aligned ("start"). This is a deliberate,
   blog-only divergence. Card text is centred as a SET (title + excerpt + button) —
   a centred title over a left excerpt reads as a mistake rather than a choice. */
.post-hero__inner{text-align:center}
.post-hero__title{margin-left:auto;margin-right:auto;max-width:24ch}
.post-hero__meta{text-align:center}

.post-card__body{align-items:center;text-align:center}
.post-card__title,.post-card__excerpt{text-align:center}
.post-card__link{margin-left:auto;margin-right:auto}

/* blog index hero matches the single-post treatment */
.blog .hero-content,body.blog .hero-content{text-align:center;margin-left:auto;margin-right:auto}
.blog .hero-btns,body.blog .hero-btns{justify-content:center}
.blog .hero-divider,body.blog .hero-divider{margin-left:auto;margin-right:auto}

/* ---- pagination: styled on tokens so Round D inherits it ---- */
.blog-pagination .page-numbers{font-family:var(--sans);font-size:13px;letter-spacing:.08em;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border:1px solid var(--border2);color:var(--muted);text-decoration:none;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.blog-pagination .page-numbers:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-pale)}
.blog-pagination .page-numbers.current{background:var(--gold);border-color:var(--gold);color:#0D2240;font-weight:500}
.blog-pagination .page-numbers.dots{border-color:transparent}
.blog-pagination .page-numbers:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.section-light .blog-pagination .page-numbers{border-color:rgba(13,34,64,.18);color:var(--ink-soft)}
.section-light .blog-pagination .page-numbers:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.section-light .blog-pagination .page-numbers.current{background:var(--gold-ink);border-color:var(--gold-ink);color:#F6F2EA}