/* ═══════════════════════════════════════════════════════════════════════
   EDGE WORLDWIDE — FEATURE REPORT
   Article-only layer. Loads after field.css, on feature-article pages only
   (updates/<slug>.html).
   Scopes the article class system: .ahdr .abody .ah2 .apull .aquote .afig
   .acap .astats .agrid3 .ahuman .aclose .enote .gov
   ═══════════════════════════════════════════════════════════════════════ */

/* ── MASTHEAD ──────────────────────────────────────────────────────── */
.rd .ahdr{background:var(--f-forest);color:#fff;padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,70px)}
.rd .ahdr .in{max-width:var(--f-max);margin:0 auto;padding:0 clamp(22px,4vw,56px)}
.rd .ahdr .eye{font-family:var(--rsans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#e0ad8a;margin-bottom:clamp(18px,2.2vw,26px)}
/* Back link and place line carry explicit alpha values that meet AA on
   this ground; do not lower them. */
.rd .ahdr .aback{font-family:var(--rsans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78);text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:28px}
.rd .ahdr .aback:hover{color:#fff}
.rd .ahdr .aplace{font-family:var(--rsans);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.72);position:relative;margin-top:clamp(20px,2.4vw,28px);padding-top:16px;border-top:1px solid rgba(255,255,255,.2);display:inline-block}
.rd .ahdr h1{font-family:var(--disp);font-size:clamp(32px,4.6vw,66px);font-weight:500;line-height:1.03;letter-spacing:-.028em;color:#fff;margin:0;max-width:20ch}
.rd .ahdr .deck{font-family:var(--disp);font-size:clamp(17px,1.5vw,22px);line-height:1.55;color:rgba(255,255,255,.86);font-weight:400;margin:clamp(20px,2.4vw,30px) 0 0;max-width:48ch}
.rd .ahdr .adate{font-family:var(--rsans);font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.62);margin-top:clamp(20px,2.4vw,28px);padding-top:16px;border-top:1px solid rgba(255,255,255,.2);display:inline-block}

/* Lead image: full width, aspect held so nothing shifts as it loads.
   width:100% is load-bearing — without a definite width the browser resolves
   max-height first and then derives width from the ratio, collapsing the box
   to 66vh x 1.5 and leaving a large empty gap beside it. */
.rd .iw{margin:0;background:var(--f-sage)}
.rd .iw-img{display:block;width:100%;overflow:hidden;aspect-ratio:3/2;max-height:66vh}
.rd .iw img{width:100%;height:100%;object-fit:cover;display:block}

/* ── READING COLUMN ───────────────────────────────────────────────────
   One measure, centred. Everything sits inside it unless it deliberately
   breaks out. Images are constrained to the measure rather than their
   intrinsic width. */
.rd .abody{max-width:1280px;margin:0 auto;padding:clamp(44px,5.5vw,84px) clamp(22px,4vw,56px)}
.rd .abody>p,.rd .abody>h2,.rd .abody>h3,.rd .abody>ul,.rd .abody>ol{
  max-width:68ch;margin-left:auto;margin-right:auto}
.rd .abody>p{font-family:var(--rsans);font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.78;color:var(--f-ink2);margin-top:0;margin-bottom:1.35em}
/* The opening paragraph carries a little more weight, as in print. Its own
   narrower measure: 68ch at this size resolves wider than the container, so
   it would otherwise fill the full column. */
.rd .abody>p:first-of-type{font-family:var(--disp);font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:var(--f-ink);margin-bottom:1.2em;max-width:46ch}
.rd .abody>ul{padding-left:1.2em}
.rd .abody>ul li{font-family:var(--rsans);font-size:clamp(15px,1.05vw,16.5px);line-height:1.75;color:var(--f-ink2);margin-bottom:.55em}
.rd .abody a{color:var(--f-forest);text-decoration:underline;text-underline-offset:2px}
.rd .abody a:hover{color:#1c221a}

/* Section headings: sized for a long read, not for a landing page */
.rd .ah2{font-family:var(--disp);font-size:clamp(23px,2.4vw,34px);font-weight:500;line-height:1.14;letter-spacing:-.02em;color:var(--f-ink);margin:clamp(40px,4.6vw,68px) auto clamp(16px,1.8vw,24px);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--f-line)}

/* ── FIGURES · break out of the measure, captioned ──────────────────── */
.rd .afig{margin:clamp(32px,3.8vw,56px) auto;max-width:100%}
.rd .afig-img{display:block;overflow:hidden;background:var(--f-sage);aspect-ratio:4/3}
.rd .afig img{width:100%;height:100%;object-fit:cover;display:block}
.rd .acap{font-family:var(--rsans);font-size:12.5px;line-height:1.65;color:var(--f-body);margin-top:12px;padding-left:14px;border-left:2px solid var(--f-terra);max-width:62ch}
/* Square sources crop to a documentary landscape rather than filling 1824px */
.rd .afig.avid{position:relative}
.rd .avid-link{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--f-ink)}
.rd .avid-link img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease}
.rd .avid-link:hover img{opacity:.86}
/* Play affordance drawn in CSS — no icon font, no SVG asset */
.rd .avid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(54px,6vw,74px);height:clamp(54px,6vw,74px);border:2px solid rgba(255,255,255,.9);border-radius:50%;pointer-events:none}
.rd .avid-play::after{content:'';position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:clamp(9px,1vw,12px) 0 clamp(9px,1vw,12px) clamp(15px,1.7vw,20px);border-color:transparent transparent transparent #fff}
.rd .avid-link:focus-visible{outline:3px solid var(--f-terra-l);outline-offset:3px}

/* Three-up figure row */
.rd .agrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin:clamp(32px,3.8vw,56px) 0}
.rd .agrid3 .afig{margin:0}
.rd .agrid3 .afig-img{aspect-ratio:1/1}
.rd .agrid3 .acap{font-size:11.5px;padding-left:10px}

/* ── EVIDENCE ROW · figures with context, divided by rules ──────────── */
.rd .astats{margin:clamp(34px,4vw,58px) 0;padding:clamp(24px,2.8vw,36px) 0;border-top:1px solid var(--f-line-d);border-bottom:1px solid var(--f-line-d)}
.rd .astats .sr{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.rd .astats .sc{padding:0 clamp(16px,2vw,28px) 0 0;border-right:1px solid var(--f-line);display:flex;flex-direction:column;gap:8px}
.rd .astats .sc:last-child{border-right:none}
.rd .astats .n{font-family:var(--disp);font-size:clamp(28px,3.4vw,46px);font-weight:500;line-height:1;letter-spacing:-.028em;color:var(--f-ink)}
.rd .astats .l{font-family:var(--rsans);font-size:12px;line-height:1.6;color:var(--f-body)}
.rd .astats .sr>.sc>.el{font-family:var(--rsans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f-moss-d)}

/* ── PULL QUOTE · a typographic moment, not a card ──────────────────── */
.rd .apull{max-width:44ch;margin:clamp(38px,4.4vw,64px) auto;padding-left:clamp(18px,2.2vw,30px);border-left:3px solid var(--f-terra);font-family:var(--disp);font-size:clamp(20px,2.1vw,29px);font-weight:500;line-height:1.28;letter-spacing:-.018em;color:var(--f-ink)}

/* ── ATTRIBUTED QUOTATION · on the sage reading surface ─────────────── */
.rd .aquote{max-width:64ch;margin:clamp(38px,4.4vw,64px) auto;background:var(--f-sage);padding:clamp(24px,3vw,40px);font-family:var(--disp);font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--f-ink)}
.rd .aquote .sr,.rd .aquote cite,.rd .aquote .el{display:block;font-family:var(--rsans);font-size:12px;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--f-moss-d);margin-top:16px}

/* ── HUMAN NOTE · a quieter aside within the read ───────────────────── */
.rd .ahuman{max-width:66ch;margin:clamp(34px,4vw,58px) auto;padding:clamp(22px,2.6vw,34px);border:1px solid var(--f-line-d);font-family:var(--rsans);font-size:clamp(14.5px,1.02vw,16px);line-height:1.78;color:var(--f-ink2)}

/* ── CLOSING STATEMENT ────────────────────────────────────────────── */
.rd .aclose{max-width:52ch;margin:clamp(44px,5vw,76px) auto clamp(24px,2.8vw,36px);font-family:var(--disp);font-size:clamp(19px,1.9vw,26px);line-height:1.35;letter-spacing:-.016em;color:var(--f-ink);text-align:center}
/* End mark: a small terracotta lozenge, the article's own full stop */
.rd .adiamond{width:9px;height:9px;background:var(--f-terra);transform:rotate(45deg);margin:clamp(26px,3vw,40px) auto}

/* ── EDITOR'S NOTE + GOVERNANCE BLOCK ───────────────────────────────── */
.rd .enote{max-width:68ch;margin:clamp(34px,4vw,56px) auto 0;padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--f-line);font-family:var(--rsans);font-size:12.5px;line-height:1.75;color:var(--f-body)}
.rd .gov{max-width:68ch;margin:clamp(28px,3.2vw,44px) auto 0;padding:clamp(22px,2.6vw,32px);background:var(--f-parch);border:1px solid var(--f-line)}
.rd .gov h2{font-family:var(--rsans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--f-forest);margin:0 0 14px;border:none;padding:0}
.rd .gov div,.rd .gov p{font-family:var(--rsans);font-size:13px;line-height:1.75;color:var(--f-body)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:820px){
  .rd .agrid3{grid-template-columns:1fr 1fr}
  .rd .astats .sr{grid-template-columns:1fr;gap:0}
  .rd .astats .sc{border-right:none;border-bottom:1px solid var(--f-line);padding:14px 0}
  .rd .astats .sc:last-child{border-bottom:none}
  .rd .iw-img{width:100%;aspect-ratio:4/3;max-height:52vh}
  .rd .afig-img{aspect-ratio:3/2}
}
@media(max-width:600px){
  .rd .agrid3{grid-template-columns:1fr}
  .rd .aclose{text-align:left}
  .rd .apull{font-size:clamp(18px,5.6vw,22px)}
  .rd .abody{padding-left:20px;padding-right:20px}
}

/* Reduced motion: the only transition here is the video still's hover. */
@media(prefers-reduced-motion:reduce){
  .rd .avid-link img{transition:none}
  .rd .avid-link:hover img{opacity:1}
}

/* Closing CTA sits outside the reading column so it spans the page like the
   section bands elsewhere, rather than being boxed inside the prose measure.
   Left-aligned as one block: heading, paragraph and buttons all start on the
   same line, matching the editorial alignment used across the site. The
   inherited .gov centring is overridden here rather than per element, which
   is what left the heading and paragraph on different axes. */
#page-article .art-cta{margin-top:clamp(44px,5vw,72px);border-radius:0;text-align:left;padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px)}
#page-article .art-cta h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15;margin-bottom:14px}
#page-article .art-cta p{max-width:58ch;margin:0;color:rgba(255,255,255,.82)}
#page-article .art-cta-btns{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap;margin-top:clamp(24px,2.8vw,34px)}
/* The muted base .btn-ghost (78% white text on a 28% border) is too weak on
   this panel; full-strength white keeps the secondary action legible while
   still reading as secondary next to the solid white button. */
#page-article .art-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.62);background:transparent}
#page-article .art-cta .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Photographic masthead: the lead image becomes the header ground. */
.rd .ahdr-photo{position:relative;isolation:isolate;background:#1c2a14;padding-top:clamp(96px,13vw,190px);padding-bottom:clamp(56px,7vw,96px);overflow:hidden}
.rd .ahdr-photo::before{content:"";position:absolute;inset:0;z-index:-2;background-image:image-set(url("img/edge-child-shelter.webp") type("image/webp"),url("img/edge-child-shelter.jpg") type("image/jpeg"));background-size:cover;background-position:center 42%}
.rd .ahdr-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,24,12,.82) 0%,rgba(16,24,12,.62) 42%,rgba(16,24,12,.88) 100%)}
.rd .ahdr-photo .in{position:relative;z-index:1}

/* Support band: a full-width block on the light forest green used for the
   Jamie quote on the legacy page. Its own inner grid keeps every element on
   one left axis. */
#page-article .art-cta{display:block;width:100%;margin:clamp(56px,7vw,96px) 0 0;padding:clamp(48px,6vw,84px) 0;background:#5a6e3a;color:#fff;border:0;border-radius:0;text-align:left}
#page-article .art-cta-in{max-width:min(1020px,94vw);margin:0 auto;padding:0 clamp(22px,4vw,56px);box-sizing:border-box}
#page-article .art-cta h2{font-family:var(--disp);font-size:clamp(26px,2.8vw,38px);font-weight:500;line-height:1.12;letter-spacing:-.02em;color:#fff;margin:0 0 14px;max-width:22ch}
#page-article .art-cta p{font-family:var(--rsans);font-size:clamp(15px,1.1vw,17px);line-height:1.7;color:rgba(255,255,255,.9);margin:0;max-width:58ch}
#page-article .art-cta-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,36px)}
#page-article .art-cta .btn-white{background:#fff;color:#1c2a14;border-color:#fff}
#page-article .art-cta .btn-white:hover{background:#f1efe7;border-color:#f1efe7;color:#1c2a14}
#page-article .art-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}
#page-article .art-cta .btn-ghost:hover{background:#fff;color:#1c2a14;border-color:#fff}