/* ═══════════════════════════════════════════════════════════════
   30-article.css · Blog article layout (DM Sans, navy/gold)
   Shares variables from 00-variables.css
   ═══════════════════════════════════════════════════════════════ */

.article { background: #fff; }

/* ── Hero ── */
.art-hero { position: relative; min-height: 460px; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; }
.art-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.03); }
.art-hero__overlay { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,20,34,.25) 0%, rgba(11,20,34,.55) 55%, rgba(11,20,34,.86) 100%); }
.art-hero__inner { position: relative; padding: 0 0 46px; max-width: 880px; }
.art-hero__crumbs { font-size: 13px; color: rgba(255,255,255,.8); margin-bottom: 20px; font-weight: 600; }
.art-hero__crumbs a { color: rgba(255,255,255,.8); text-decoration: none; }
.art-hero__crumbs a:hover { color: #fff; }
.art-hero__crumbs span { margin: 0 8px; opacity: .6; }
.art-tag { display: inline-block; background: var(--gold-500); color: #fff; font-size: 11px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px;
  border-radius: 50px; margin-bottom: 18px; }
.art-hero__title { font-family: 'DM Sans', sans-serif; font-size: clamp(28px, 5vw, 46px);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 18px; }
.art-hero__meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px;
  color: rgba(255,255,255,.85); font-weight: 600; align-items: center; }
.art-hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.art-hero__meta svg { opacity: .85; }

/* ── Layout: content + sticky aside ── */
.art-wrap { display: grid; grid-template-columns: minmax(0,1fr) 312px; gap: 54px;
  max-width: 1180px; margin: 0 auto; padding: 56px 24px 80px; }
.art-body { font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.78; color: var(--ink, #3a4254); }
.art-body > p { margin: 0 0 22px; }
.art-lede { font-size: 20px; line-height: 1.7; color: var(--navy-800, #25364f); font-weight: 500;
  margin: 0 0 30px; }
.art-body h2 { font-family: 'DM Sans', sans-serif; font-size: 27px; font-weight: 800;
  color: var(--navy-900, #182940); letter-spacing: -.02em; margin: 46px 0 16px; line-height: 1.2;
  scroll-margin-top: 90px; }
.art-body h3 { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 700;
  color: var(--navy-900, #182940); margin: 32px 0 12px; letter-spacing: -.01em; }
.art-body strong { color: var(--navy-900, #182940); font-weight: 700; }
.art-body a { color: var(--gold-600, #b07f33); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.art-body a:hover { color: var(--navy-900, #182940); }
.art-body ul, .art-body ol { margin: 0 0 24px; padding-left: 22px; }
.art-body li { margin-bottom: 9px; }
.art-body ul li::marker { color: var(--gold-500, #c99e5c); }

/* ── Figure / image placeholder ── */
.art-fig { margin: 32px 0; }
.art-fig img, .art-fig__ph { width: 100%; border-radius: 14px; display: block; }
.art-fig__ph { aspect-ratio: 16/9; background-size: cover; background-position: center;
  background-color: var(--bone, #efece4); }
.art-fig figcaption { font-size: 13px; color: #7a8294; margin-top: 10px; text-align: center; font-style: italic; }

/* ── Comparison / data table ── */
.art-table-wrap { overflow-x: auto; margin: 30px 0; border: 1px solid var(--line, #e6e3da);
  border-radius: 14px; }
.art-table { width: 100%; border-collapse: collapse; font-family: 'DM Sans', sans-serif; font-size: 15px; }
.art-table thead th { background: var(--navy-900, #182940); color: #fff; font-weight: 700;
  text-align: left; padding: 14px 16px; font-size: 13.5px; letter-spacing: .01em; }
.art-table tbody td { padding: 13px 16px; border-top: 1px solid var(--line, #e6e3da);
  color: var(--ink, #3a4254); vertical-align: top; }
.art-table tbody tr:nth-child(even) { background: #faf8f3; }
.art-table tbody td:first-child { font-weight: 700; color: var(--navy-900, #182940); }
.art-table .yes { color: #1a8a4a; font-weight: 700; }
.art-table .no { color: #b3402f; font-weight: 700; }

/* ── Callout / key-fact box ── */
.art-call { background: var(--bone, #f6f3ec); border-left: 4px solid var(--gold-500, #c99e5c);
  border-radius: 10px; padding: 20px 24px; margin: 30px 0; }
.art-call__title { display: flex; align-items: center; gap: 9px; font-weight: 800;
  color: var(--navy-900, #182940); font-size: 15px; letter-spacing: .01em; margin-bottom: 8px; }
.art-call__title svg { color: var(--gold-600, #b07f33); flex-shrink: 0; }
.art-call p { margin: 0; font-size: 15px; line-height: 1.65; }

/* ── Internal-link CTA strip ── */
.art-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; background: var(--navy-900, #182940); color: #fff; border-radius: 16px;
  padding: 24px 28px; margin: 34px 0; }
.art-cta__txt h4 { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 800;
  margin: 0 0 4px; letter-spacing: -.01em; }
.art-cta__txt p { margin: 0; font-size: 14px; color: rgba(255,255,255,.78); }
.art-cta__btn { background: var(--gold-500, #c99e5c); color: #fff; font-family: 'DM Sans', sans-serif;
  font-weight: 700; font-size: 14.5px; padding: 13px 24px; border-radius: 10px; text-decoration: none;
  white-space: nowrap; transition: background .2s; }
.art-cta__btn:hover { background: var(--gold-600, #b07f33); color: #fff; }

/* ── FAQ accordion ── */
.art-faq { margin: 34px 0 0; }
.art-faq__item { border-bottom: 1px solid var(--line, #e6e3da); }
.art-faq__q { width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: 'DM Sans', sans-serif; font-size: 16.5px; font-weight: 700; color: var(--navy-900, #182940);
  padding: 18px 38px 18px 0; position: relative; line-height: 1.4; }
.art-faq__q::after { content: ''; position: absolute; right: 4px; top: 22px; width: 13px; height: 13px;
  background: no-repeat center/contain
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c99e5c' stroke-width='2.6'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform .25s; }
.art-faq__item.open .art-faq__q::after { transform: rotate(45deg); }
.art-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.art-faq__a p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.7; color: var(--ink, #3a4254); }

/* ── Aside ── */
.art-aside { position: sticky; top: 90px; align-self: start; }
.art-toc { background: #fff; border: 1px solid var(--line, #e6e3da); border-radius: 14px; padding: 22px; }
.art-toc__lbl { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #8a93a3; margin-bottom: 14px; }
.art-toc a { display: block; font-size: 14px; color: var(--navy-800, #25364f); text-decoration: none;
  padding: 7px 0; border-top: 1px solid #f0ede5; line-height: 1.4; }
.art-toc a:first-of-type { border-top: 0; }
.art-toc a:hover { color: var(--gold-600, #b07f33); }
.art-side-cta { background: var(--navy-900, #182940); color: #fff; border-radius: 14px; padding: 24px;
  margin-top: 20px; }
.art-side-cta h4 { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.art-side-cta p { font-size: 13.5px; color: rgba(255,255,255,.78); line-height: 1.6; margin: 0 0 16px; }
.art-side-cta__btn { display: block; text-align: center; background: var(--gold-500, #c99e5c); color: #fff;
  font-weight: 700; font-size: 14px; padding: 12px; border-radius: 9px; text-decoration: none; transition: background .2s; }
.art-side-cta__btn:hover { background: var(--gold-600, #b07f33); color: #fff; }
.art-side-cta__link { display: block; text-align: center; margin-top: 10px; font-size: 13px;
  color: rgba(255,255,255,.8); text-decoration: none; font-weight: 600; }
.art-side-cta__link:hover { color: #fff; }

/* ── Author / footer of article ── */
.art-author { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line, #e6e3da);
  margin-top: 44px; padding-top: 26px; }
.art-author__av { width: 50px; height: 50px; border-radius: 50%; background: var(--navy-900, #182940);
  color: var(--gold-400, #d9b878); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: 'DM Sans', sans-serif; flex-shrink: 0; }
.art-author__name { font-weight: 700; color: var(--navy-900, #182940); font-size: 15px; }
.art-author__role { font-size: 13px; color: #7a8294; }

/* ── Related articles ── */
.art-related { background: var(--bone, #f6f3ec); padding: 56px 0; }
.art-related__head { text-align: center; margin-bottom: 34px; }
.art-related__head h2 { font-family: 'DM Sans', sans-serif; font-size: 28px; font-weight: 800;
  color: var(--navy-900, #182940); margin: 0; letter-spacing: -.02em; }
.art-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.art-rel-card { background: #fff; border: 1px solid var(--line, #e6e3da); border-radius: 14px;
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: all .25s; }
.art-rel-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,30,53,.12);
  border-color: var(--gold-500, #c99e5c); }
.art-rel-card__img { aspect-ratio: 16/10; background-size: cover; background-position: center;
  background-color: var(--navy-900, #182940); }
.art-rel-card__body { padding: 18px 20px; }
.art-rel-card__cat { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-600, #b07f33); }
.art-rel-card__title { font-family: 'DM Sans', sans-serif; font-size: 16.5px; font-weight: 700;
  color: var(--navy-900, #182940); margin: 7px 0 0; line-height: 1.3; letter-spacing: -.01em; }

@media (max-width: 920px) {
  .art-wrap { grid-template-columns: 1fr; gap: 0; padding: 40px 20px 64px; }
  .art-aside { position: static; margin-top: 36px; }
  .art-related__grid { grid-template-columns: 1fr; }
  .art-hero { min-height: 380px; }
}

/* ─── Cluster back-link banner (spoke → pillar) ─── */
.art-cluster {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 0 26px;
  padding: 14px 18px;
  background: var(--bone, #f6f3ec);
  border: 1px solid var(--line, #e6e3da);
  border-left: 4px solid var(--gold-500, #c99e5c);
  border-radius: 12px;
  text-decoration: none;
  transition: background .25s, transform .25s;
}
.art-cluster:hover { background: #f1ece0; transform: translateX(2px); }
.art-cluster__eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-600, #b07f33);
}
.art-cluster__title {
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  color: var(--navy-900, #182940); font-size: 15.5px; line-height: 1.3;
}