/* ============================================================
   ARTICLE / BLOG POST — light, warm, editorial reading layout
   Pairs with stone-edge.css tokens. Scoped to .art-* + .art-main.
   ============================================================ */

.art-main {
  background: #FBFAF7;            /* warm off-white */
  color: var(--se-on-light);
  --art-read: 720px;
  --art-wide: 1080px;
}

/* ---------- HERO ---------- */
.art-hero { padding: clamp(120px, 16vw, 180px) var(--se-gutter) 0; }
.art-hero__inner { max-width: var(--art-read); margin-inline: auto; text-align: center; }
.art-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--se-tight); font-size: var(--se-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--se-teal-4);
}
.art-kicker .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.art-title {
  font-family: var(--se-tight); font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--se-on-light);
  margin: var(--se-4) 0 0; text-wrap: balance;
}
.art-excerpt {
  font-family: var(--se-sans); font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6; color: var(--se-on-light-2);
  margin: var(--se-5) auto 0; max-width: 60ch; text-wrap: pretty;
}
.art-byline {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: var(--se-6); font-family: var(--se-tight); font-size: var(--se-sm);
  color: var(--se-on-light-2); flex-wrap: wrap;
}
.art-byline__avatar { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; background: #000 url("../assets/app-icon.png") center/cover no-repeat; }
.art-byline strong { color: var(--se-on-light); font-weight: 600; }
.art-byline .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--se-stone-3); }

.art-hero__media {
  max-width: var(--art-wide); margin: clamp(36px, 5vw, 64px) auto 0;
  padding-inline: var(--se-gutter);
}
.art-hero__media .frame {
  border-radius: var(--se-r-xl); overflow: hidden;
  aspect-ratio: 16 / 9; box-shadow: 0 40px 80px rgba(3,30,43,0.16);
  background: var(--se-stone-2);
}
.art-hero__media image-slot, .art-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- BODY ---------- */
.art-body { max-width: var(--art-read); margin: clamp(48px,7vw,88px) auto 0; padding-inline: var(--se-gutter); }
.art-body > * + * { margin-top: var(--se-7); }
.art-body p + p { margin-top: 30px; }
.art-body p {
  font-family: var(--se-sans); font-size: 1.1875rem; line-height: 1.78;
  color: #36373a; margin: 0; text-wrap: pretty;
}
.art-body h2 {
  font-family: var(--se-tight); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; color: var(--se-on-light);
  margin: clamp(36px,5vw,56px) 0 0;
}
.art-body h3 {
  font-family: var(--se-tight); font-weight: 600;
  font-size: 1.3rem; line-height: 1.25; color: var(--se-on-light);
  margin: var(--se-7) 0 0;
}
/* clean, intentional gap directly under a heading (heading groups with its body) */
.art-body :is(h2, h3) + * { margin-top: 16px; }
.art-body a:not(.se-btn) { color: var(--se-teal-4); text-decoration: underline; text-underline-offset: 3px; }
.art-body strong { color: var(--se-on-light); font-weight: 650; }

/* Scripture callout */
.art-scripture {
  margin: clamp(32px,5vw,52px) 0; padding: clamp(24px,3vw,36px) clamp(26px,3.5vw,44px);
  background: rgba(55,105,131,0.07);
  border-left: 4px solid var(--se-teal-4);
  border-radius: 0 var(--se-r-lg) var(--se-r-lg) 0;
}
.art-scripture p {
  font-family: var(--se-serif); font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.45; color: var(--se-deep); margin: 0;
}
.art-scripture cite {
  display: block; margin-top: 14px; font-family: var(--se-tight); font-style: normal;
  font-size: var(--se-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--se-teal-4);
}

/* Pull quote */
.art-pullquote { margin: clamp(40px,6vw,72px) 0; text-align: center; }
.art-pullquote__mark { font-family: var(--se-serif); font-size: 4rem; line-height: 0.5; color: var(--se-teal-3); display: block; height: 0.5em; }
.art-pullquote p {
  font-family: var(--se-serif); font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.25; color: var(--se-on-light);
  margin: var(--se-5) auto 0; max-width: 24ch; text-wrap: balance;
}
.art-pullquote cite {
  display: block; margin-top: var(--se-4); font-family: var(--se-tight); font-style: normal;
  font-size: var(--se-sm); color: var(--se-on-light-2);
}

/* Inline CTA card (mid-article) */
.art-cta-card {
  margin: clamp(40px,6vw,72px) 0; padding: clamp(28px,4vw,44px);
  background: linear-gradient(135deg, var(--se-deep) 0%, var(--se-teal-5) 100%);
  border-radius: var(--se-r-xl); color: var(--se-white);
  display: flex; flex-direction: column; gap: var(--se-3);
  box-shadow: 0 30px 60px rgba(3,30,43,0.2);
}
.art-cta-card__k { font-family: var(--se-tight); font-size: var(--se-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--se-sky-1); }
.art-cta-card h3 { font-family: var(--se-tight); font-weight: 700; font-size: clamp(1.4rem,2.4vw,2rem); line-height: 1.12; margin: 0; color: var(--se-white); }
.art-cta-card p { font-family: var(--se-sans); font-size: var(--se-sm); line-height: 1.6; color: rgba(226,243,247,0.82); margin: 0; max-width: 52ch; }
.art-cta-card .se-btn { align-self: flex-start; margin-top: var(--se-3); }

/* ---------- SECTION SHELL (light) ---------- */
.art-section { padding: clamp(56px,8vw,104px) var(--se-gutter); }
.art-section--tint { background: #F2EFE8; }
.art-section__head { max-width: var(--art-wide); margin: 0 auto clamp(32px,4vw,52px); text-align: center; }
.art-section__head .art-kicker { justify-content: center; }
.art-section__title { font-family: var(--se-tight); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.9rem,3.6vw,2.8rem); line-height: 1.1; color: var(--se-on-light); margin: var(--se-3) 0 0; }
.art-section__sub { font-family: var(--se-sans); font-size: 1.05rem; line-height: 1.6; color: var(--se-on-light-2); margin: var(--se-4) auto 0; max-width: 56ch; }

/* ---------- NEXT STEPS ---------- */
.next-steps__grid {
  max-width: var(--art-wide); margin-inline: auto;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--se-4);
}
.step-tile {
  display: flex; flex-direction: column; gap: var(--se-3);
  background: #fff; border: 1px solid rgba(27,28,26,0.08); border-radius: var(--se-r-lg);
  padding: var(--se-6) var(--se-5) var(--se-5);
  text-decoration: none; transition: transform 0.25s var(--se-ease), box-shadow 0.25s var(--se-ease), border-color 0.25s var(--se-ease);
}
.step-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(3,30,43,0.1); border-color: rgba(55,105,131,0.3); }
.step-tile__ico { width: 44px; height: 44px; border-radius: 13px; background: rgba(55,105,131,0.1); display: grid; place-items: center; color: var(--se-teal-4); }
.step-tile__ico svg { width: 22px; height: 22px; }
.step-tile h3 { font-family: var(--se-tight); font-weight: 600; font-size: 1.15rem; line-height: 1.2; color: var(--se-on-light); margin: var(--se-2) 0 0; }
.step-tile p { font-family: var(--se-sans); font-size: 0.9rem; line-height: 1.5; color: var(--se-on-light-2); margin: 0; }
.step-tile__more { margin-top: auto; padding-top: var(--se-3); font-family: var(--se-tight); font-size: var(--se-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--se-teal-4); display: inline-flex; align-items: center; gap: 7px; }
.step-tile__more .arrow { transition: transform 0.3s var(--se-ease); }
.step-tile:hover .step-tile__more .arrow { transform: translateX(4px); }

/* ---------- FAQ ---------- */
.art-faq { max-width: var(--art-read); margin-inline: auto; }
.art-faq__item { border-bottom: 1px solid rgba(27,28,26,0.1); }
.art-faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: var(--se-5) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--se-5);
  font-family: var(--se-tight); font-weight: 600; font-size: 1.15rem; color: var(--se-on-light);
}
.art-faq__q .ico { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.art-faq__q .ico::before, .art-faq__q .ico::after { content: ""; position: absolute; background: var(--se-teal-4); border-radius: 2px; transition: transform 0.3s var(--se-ease), opacity 0.3s; }
.art-faq__q .ico::before { top: 10px; left: 2px; right: 2px; height: 2px; }
.art-faq__q .ico::after { left: 10px; top: 2px; bottom: 2px; width: 2px; }
.art-faq__item.open .art-faq__q .ico::after { transform: scaleY(0); opacity: 0; }
.art-faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--se-ease); }
.art-faq__a p { font-family: var(--se-sans); font-size: 1.0625rem; line-height: 1.7; color: var(--se-on-light-2); margin: 0; padding-bottom: var(--se-5); max-width: 62ch; }

/* ---------- RELATED ---------- */
.art-related__grid { max-width: var(--art-wide); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--se-5); }
.art-rel-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(27,28,26,0.08); border-radius: var(--se-r-lg); overflow: hidden; text-decoration: none; transition: transform 0.25s var(--se-ease), box-shadow 0.25s var(--se-ease); }
.art-rel-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(3,30,43,0.1); }
.art-rel-card__img { aspect-ratio: 16/10; overflow: hidden; background: var(--se-stone-2); }
.art-rel-card__img image-slot, .art-rel-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--se-ease); }
.art-rel-card:hover .art-rel-card__img image-slot { transform: scale(1.04); }
.art-rel-card__body { padding: var(--se-5); display: flex; flex-direction: column; gap: var(--se-3); }
.art-chip { align-self: flex-start; font-family: var(--se-tight); font-size: var(--se-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--se-teal-4); background: rgba(55,105,131,0.1); padding: 5px 12px; border-radius: var(--se-r-pill); }
.art-rel-card__body h3 { font-family: var(--se-tight); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--se-on-light); margin: 0; }
.art-rel-card__date { font-family: var(--se-tight); font-size: var(--se-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--se-stone-4); margin-top: auto; padding-top: var(--se-2); }

/* ---------- END CTA BANNER ---------- */
.art-cta-banner { background: var(--se-deep); padding: clamp(64px,9vw,120px) var(--se-gutter); text-align: center; }
.art-cta-banner__inner { max-width: 40ch; margin-inline: auto; }
.art-cta-banner .art-kicker { color: var(--se-sky-1); justify-content: center; }
.art-cta-banner h2 { font-family: var(--se-tight); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(2rem,4.5vw,3.4rem); line-height: 1.08; color: var(--se-white); margin: var(--se-4) 0 0; text-wrap: balance; }
.art-cta-banner p { font-family: var(--se-sans); font-size: 1.1rem; line-height: 1.6; color: rgba(226,243,247,0.8); margin: var(--se-5) auto 0; max-width: 48ch; }
.art-cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--se-3); justify-content: center; margin-top: var(--se-7); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .next-steps__grid { grid-template-columns: repeat(2, 1fr); }
  .art-related__grid { grid-template-columns: 1fr; gap: var(--se-5); }
}
@media (max-width: 560px) {
  .next-steps__grid { grid-template-columns: 1fr; }
  .art-hero__media .frame { aspect-ratio: 4/3; border-radius: var(--se-r-lg); }
}