/* ============================================================
   ARTICLE / POST PAGE
   ============================================================ */
.article{ padding-top:clamp(120px,15vh,170px); padding-bottom:clamp(56px,7vw,90px); background:var(--bg); }

/* Head — keeps the .container cap (1400 + var(--gut)) so it aligns with the header */
.article__head .crumbs{ margin-bottom:clamp(1.4rem,2.2vw,2.2rem); }
.article__eyebrow{ font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:1rem; }
.article__title{ font-family:var(--display); font-weight:400; line-height:1.04; letter-spacing:-.02em;
  font-size:clamp(2.2rem,5vw,4rem); color:var(--bark); margin-bottom:clamp(1rem,1.8vw,1.5rem); }
.article__lead{ font-size:clamp(1.12rem,1.7vw,1.4rem); line-height:1.55; color:var(--text-soft);
  max-width:62ch; margin-bottom:clamp(1.6rem,2.4vw,2.2rem); }

.article__meta{ display:flex; align-items:center; gap:14px; font-size:.92rem; color:var(--text-soft);
  padding-top:clamp(1rem,1.6vw,1.4rem); border-top:1px solid var(--line); }
.article__author{ display:inline-flex; align-items:center; gap:10px; }
.article__author b{ color:var(--bark); font-weight:600; }
.article__avatar{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--cream) url("../assets/logo-mark.png") center/82% no-repeat; }
.article__dot{ width:4px; height:4px; border-radius:50%; background:var(--line); }

/* Feature image — same side margins as every other block */
.article__feature{ width:100%; max-width:var(--container); margin:clamp(20px,2.4vw,32px) auto clamp(40px,5vw,70px);
  padding-inline:var(--gut); }
.article__feature img{ display:block; width:100%;
  aspect-ratio:16/8; object-fit:cover; border-radius:var(--radius-lg); }

/* Body — full container width */
.article__body{ max-width:none; }
.article__body p{ font-size:clamp(1.05rem,1.35vw,1.18rem); line-height:1.8; color:var(--text); margin-bottom:1.5em; }
.article__body p:first-child::first-letter{ float:left; font-family:var(--display); font-weight:500;
  font-size:3.6em; line-height:.78; padding:.05em .12em 0 0; color:var(--gold-deep); }
.article__body h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.2; color:var(--bark); margin:1.8em 0 .6em; letter-spacing:-.01em; }
.article__body blockquote{ margin:clamp(2rem,3.5vw,3rem) 0; padding-left:clamp(20px,2.5vw,32px);
  border-left:3px solid var(--gold); }
.article__body blockquote p{ font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,2.4vw,1.95rem); line-height:1.4; color:var(--bark); margin-bottom:.4em; }
.article__body blockquote cite{ font-style:normal; font-size:.92rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--gold-deep); }
.article__body figure{ margin:clamp(2rem,4vw,3.2rem) 0; }
.article__body figure img{ width:100%; aspect-ratio:16/6; object-fit:cover; border-radius:var(--radius-lg); display:block; }
.article__body figcaption{ margin-top:.8rem; font-size:.88rem; color:var(--text-soft); text-align:center; }

/* Share */
.article__share{ margin:clamp(40px,5vw,64px) 0 0; padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.article__share-label{ font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); }
.article__share-links{ display:flex; gap:10px; }
.article__share-links a{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--line); color:var(--bark); transition:.35s var(--ease); }
.article__share-links a:hover{ background:var(--bark); border-color:var(--bark); color:#fff; transform:translateY(-3px); }
.article__share-links svg{ width:19px; height:19px; }

/* Donate strip */
.article__cta{ padding:var(--section) 0; }
.article__cta-inner{ background:var(--bark-deep); border-radius:var(--radius-lg);
  padding:clamp(34px,5vw,64px); display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,4vw,48px); flex-wrap:wrap; color:var(--cream-3); position:relative; overflow:hidden; }
.article__cta-inner::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 120% at 100% 0%, rgba(169,140,93,.32), transparent 60%); }
.article__cta-title{ font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.3rem);
  line-height:1.2; max-width:18ch; position:relative; z-index:1; }
.article__cta-lead{ margin-top:.7rem; color:rgba(234,230,224,.75); max-width:42ch; position:relative; z-index:1; }
.article__cta .btn{ position:relative; z-index:1; flex:none; }

/* Related */
.related{ background:var(--cream-2); padding-top:clamp(70px,8vw,110px); }
.related .diary__head{ align-items:center; }

@media (max-width:680px){
  .article__cta-inner{ flex-direction:column; align-items:flex-start; text-align:left; }
  .article__cta .btn{ width:100%; }
  .article__share{ flex-direction:column; align-items:flex-start; }
}