/* Anance — editorial article + blog index, on the service-page format (black hero, white body).
   Loads alongside service.css (tokens, nav-in-hero, buttons, cta-band, footer, reveal).
   House rules: no boxes/cards, and no vertical accent/side bars. Separation comes from
   whitespace, HORIZONTAL hairline rules, and type scale. Emphasis = bigger type / orange text. */

/* ---------- ARTICLE HERO (black; a header, not a media hero) ---------- */
.hero.article-hero{min-height:auto;display:block;padding:clamp(122px,16vh,168px) 0 clamp(46px,6vh,66px)}
.article-hero .cat{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:#FFAB61;margin-bottom:22px;display:block}
.article-hero h1{font-family:"EB Garamond",serif;color:var(--on-dark);font-size:clamp(31px,4.6vw,52px);
  font-weight:600;line-height:1.06;letter-spacing:0;margin-bottom:22px;max-width:20ch}
.article-hero .standfirst{color:var(--on-dark-soft);font-size:clamp(17px,1.7vw,21px);line-height:1.5;
  font-weight:300;max-width:48ch;margin-bottom:28px}
.article-hero .byline{font-family:"Geist Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-faint)}

/* ---------- ARTICLE BODY (white) ---------- */
.article{max-width:720px;margin:0 auto;padding:clamp(52px,7vw,84px) clamp(22px,5vw,34px) 0}
.prose p{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.75;color:#1c1c1f;margin-bottom:24px;font-weight:400}
.prose p b,.prose p strong{color:var(--ink);font-weight:600}
.prose p.lead-in{font-size:clamp(18.5px,1.7vw,22px);color:var(--ink);font-weight:400;line-height:1.62}
.prose h2{font-family:"EB Garamond",serif;color:var(--ink);font-size:clamp(24px,3.1vw,34px);font-weight:600;
  line-height:1.14;margin:48px 0 18px;letter-spacing:0}
.prose a.inl{color:#F57200;border-bottom:1px solid rgba(245,114,0,.34)}
.prose a.inl:hover{border-bottom-color:#F57200}
.prose ul{margin:2px 0 24px;padding-left:22px}
.prose li{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.7;color:#1c1c1f;margin-bottom:12px}
.prose li b{color:var(--ink);font-weight:600}

/* pull quote: large serif, orange TEXT, centred. No bar, no box. */
.prose .pull{font-family:"EB Garamond",serif;color:#F57200;font-size:clamp(24px,3.4vw,37px);
  line-height:1.24;font-weight:600;text-align:center;margin:46px auto;max-width:20ch}

/* sources: horizontal hairline divider only */
.sources{max-width:720px;margin:54px auto 0;padding:26px clamp(22px,5vw,34px) 0;border-top:1px solid var(--line)}
.sources h3{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:14px;font-weight:600}
.sources ul{list-style:none;padding:0}
.sources li{font-size:13px;color:var(--soft);margin-bottom:10px;line-height:1.55}
.sources a{color:#F57200;word-break:break-word}

/* ---------- BLOG INDEX (content.html, white body) ---------- */
.index-list{max-width:960px;margin:0 auto;padding:clamp(8px,3vw,24px) 0 0}
.entry{display:grid;grid-template-columns:168px 1fr;gap:clamp(20px,4vw,52px);
  padding:clamp(30px,4vw,46px) 0;border-top:1px solid var(--line);align-items:baseline}
.entry:first-child{border-top:none;padding-top:6px}
.entry .emeta{font-family:"Geist Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);line-height:1.9}
.entry .emeta .cat{color:#F57200;display:block;margin-bottom:5px}
.entry h2{font-family:"EB Garamond",serif;color:var(--ink);font-size:clamp(24px,3vw,34px);font-weight:600;
  line-height:1.12;margin-bottom:12px}
.entry h2 a{transition:color .25s var(--ease)}
.entry:hover h2 a{color:#F57200}
.entry p{color:var(--soft);font-size:clamp(15px,1.4vw,17.5px);font-weight:400;max-width:62ch;margin-bottom:16px}
.entry .more{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);display:inline-flex;gap:8px;align-items:center;transition:color .25s var(--ease)}
.entry .more svg{width:12px;height:12px}
.entry:hover .more{color:var(--ink)}
@media(max-width:720px){.entry{grid-template-columns:1fr;gap:12px}.entry:first-child{padding-top:0}}