/* ─────────────────────────────────────────────────────────────
   App additions — layered on top of the design system in
   style.css. Nothing here overrides the original file; it only
   styles markup the static mockups did not include (article
   bodies, pagination, the lead capture form).
   ───────────────────────────────────────────────────────────── */

/* ─── ARTICLE BODY ──────────────────────────────────────────── */
.post-article { max-width: 760px; margin-inline: auto; }

.post-article .post-date { margin-bottom: var(--a-space-4); }

.post-article h1 {
  font-family:     var(--a-font-display);
  font-size:       clamp(2rem, 4vw, 3rem);
  line-height:     1.1;
  letter-spacing:  -.02em;
  margin-bottom:   var(--a-space-6);
}

.post-body { font-size: 1.05rem; line-height: 1.85; color: var(--antler-ink-soft, inherit); }
.post-body > * + * { margin-top: var(--a-space-5); }
.post-body h2 { font-family: var(--a-font-display); font-size: 1.6rem; margin-top: var(--a-space-8); }
.post-body h3 { font-family: var(--a-font-display); font-size: 1.25rem; margin-top: var(--a-space-7); }
.post-body ul,
.post-body ol { padding-left: 1.25rem; }
.post-body li + li { margin-top: .5rem; }
.post-body ul li { list-style: disc; }
.post-body ol li { list-style: decimal; }
.post-body blockquote {
  border-left:   2px solid var(--antler-gold);
  padding-left:  var(--a-space-5);
  font-style:    italic;
}
.post-body img { max-width: 100%; height: auto; }
.post-body a { color: var(--antler-gold); text-decoration: underline; }

/* ─── SIMPLE PAGINATION ─────────────────────────────────────── */
.pager {
  display:     flex;
  gap:         var(--a-space-3);
  align-items: center;
  justify-content: center;
  margin-top:  var(--a-space-10);
}
.pager-info { font-size: .9rem; opacity: .7; }

/* ─── LEAD FORM ─────────────────────────────────────────────── */
.lead-form { display: grid; gap: var(--a-space-4); margin-top: var(--a-space-8); text-align: left; }
.lead-form-row { display: grid; gap: var(--a-space-4); grid-template-columns: 1fr 1fr; }

@media (max-width: 640px) {
  .lead-form-row { grid-template-columns: 1fr; }
}

.lead-field { display: grid; gap: 6px; }
.lead-field > span { font-size: .78rem; letter-spacing: 1.2px; text-transform: uppercase; opacity: .75; }
.lead-field input,
.lead-field textarea {
  width:            100%;
  padding:          14px 16px;
  font:             inherit;
  color:            inherit;
  background:       rgba(255, 255, 255, .04);
  border:           1px solid var(--antler-bone-line, rgba(255, 255, 255, .18));
  border-radius:    0;
}
.lead-field input:focus,
.lead-field textarea:focus { outline: 2px solid var(--antler-gold); outline-offset: 2px; }
.lead-field textarea { min-height: 140px; resize: vertical; }

.lead-error { color: #ff9a8b; font-size: .85rem; }
.lead-sent {
  padding:       var(--a-space-5);
  border:        1px solid var(--antler-gold);
  margin-top:    var(--a-space-6);
  text-align:    center;
}

/* ─── COMING SOON ───────────────────────────────────────────── */
.coming-soon { text-align: center; }

.coming-soon-inner {
  position:   relative;
  z-index:    1;
  max-width:  760px;
  margin-inline: auto;
}

/* style.css resets images to display:block, so text-align cannot centre this
   one — it needs auto side margins of its own. */
.coming-soon-logo {
  width:         auto;
  height:        48px;
  margin-inline: auto;
  margin-bottom: var(--a-space-10);
}

.coming-soon .hero-eyebrow { display: inline-flex; }

.coming-soon .hero-subtitle { margin-inline: auto; }

.coming-soon .hero-note { margin-top: var(--a-space-6); }

.coming-soon-social {
  display:         flex;
  gap:             var(--a-space-6);
  justify-content: center;
  margin-top:      var(--a-space-10);
  font-size:       var(--a-font-size-info);
  letter-spacing:  1.2px;
  text-transform:  uppercase;
}
.coming-soon-social a { color: var(--antler-stone); text-decoration: none; }
.coming-soon-social a:hover { color: var(--antler-gold-deep); }