/* ============================================================
   events.css — Our events page-specific styles.
   Shared chrome/type/buttons come from /site.css; the card grid reuses the
   journal's .post-grid/.post classes with events-scoped modifiers (centred
   text + description paragraph, 1232px grid with 40px gaps — both measured
   off the mockup, which uses a narrower grid than the journal's).
   Page flow (EVT-01 rework2): hero → intro two-col (image figure + serif
   lead-in + paragraph) → Upcoming (white) → Past (sand).
   ============================================================ */

/* R5-HERO-01: the page runs the Contact treatment now — site.css .page-hero + .banner.
   Guard rail for stored 4:3 uploads: full-bleed they'd tower, so the banner clamps
   (site.css .banner img already object-fit: cover). */
.banner img { max-height: 640px; }

/* intro band: centred welcome copy under the banner (the side image moved into the banner) */
.ev-intro { padding: 42px 0 6px; }
.ev-intro-text { max-width: 720px; margin: 0 auto; text-align: center; }
.ev-intro-lead {
  font-family: var(--serif); font-weight: 400;
  font-size: 34px; line-height: 44px; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
/* max-width: none — the wrapper keeps .content, whose site.css 560px p-cap would sit
   flush-left inside this centred 720px column (review catch) */
.ev-intro-copy { font-size: 16px; line-height: 26px; color: var(--ink-soft); max-width: none; }

/* event listing sections (white "Upcoming", sand "Past") — house ~90px bands */
.events { padding: 90px 0 104px; }
.events-past { padding: 88px 0 110px; }
.events .serif-title { text-align: center; margin-bottom: 22px; }

.events .post-grid {
  max-width: 1232px;
  margin: 0 auto;
  gap: 48px 40px;
}
.events .post { text-align: center; }
.events .post-title { margin: 22px 0 8px; }
.events .post-desc {
  font-size: 15px; line-height: 22px; letter-spacing: -0.02em;
  color: #404040;
  max-width: 352px; margin: 0 auto 14px;
}
.events .posts-more { padding-top: 56px; }

/* designed empty state (Upcoming with no events): bordered sand panel with a
   serif line, the stored message and a subscribe pill (sweep hover from site.css) */
.ev-empty-card {
  max-width: 720px; margin: 18px auto 0;
  background: var(--sand);
  border: 1px solid #eadfca;
  border-radius: 8px;
  padding: 52px 44px 56px;
  text-align: center;
}
.ev-empty-lead {
  font-family: var(--serif); font-weight: 400;
  font-size: 32px; line-height: 42px; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 14px;
}
.ev-empty-copy {
  font-size: 16px; line-height: 26px; color: var(--ink-soft);
  max-width: 520px; margin: 0 auto 28px;
}

/* plain empty line (Past keeps the quiet treatment) */
.ev-empty { text-align: center; color: var(--ink-soft); padding: 8px 0 26px; }

@media (max-width: 900px) {
  .ev-intro { padding: 24px 0 0; }
  .ev-intro-lead { font-size: 28px; line-height: 36px; }
  .events { padding: 64px 0 72px; }
  .events-past { padding: 60px 0 72px; }
  .ev-empty-card { padding: 40px 24px 44px; }
}
@media (max-width: 560px) {
  .events .post-desc { max-width: none; }
  .ev-empty-lead { font-size: 24px; line-height: 32px; }
}