/* ============================================================
   ARTICLE PAGES — hook into the exact same shared mechanisms every
   other internal page uses, instead of a separate one-off recipe:
   .article-head carries .page-hero, so it gets the same white
   hero-card treatment (width, radius, shadow, padding) as every
   other page's title card for free. .article-body's .wrap child
   (.article-layout) gets the same generic white section-card
   treatment (background/radius/padding/shadow) that every other
   page's content sections use. This file only adds the handful of
   things that are genuinely specific to an article: the kicker,
   dek, meta, callout and pull-quote, all built from the site's
   existing design tokens — no new one-off sizes or colours.
   ============================================================ */

/* legacy-article.css sets a bare "main{background:#fff}" left over from an
   older design. That solid white main bled into the hero's own white card
   right below the (also-white) header, so the hero never read as a
   distinct floating card the way every other page's hero does, and the
   header/hero boundary looked like one undifferentiated white mass
   instead of a small, deliberate gap onto the gradient. */
html body#acb-design.article-page main{background:transparent!important}

/* No shadow/outline on the two cards — a flat white surface, nothing
   reading as a border around it. */
html body#acb-design.article-page .article-head .wrap,
html body#acb-design.article-page .article-layout{box-shadow:none!important;outline:0!important}

/* Kicker reuses the site's one eyebrow recipe (see acb.css's shared
   .eyebrow/.acb-eyebrow/etc rule — .article-kicker is included there).
   h1 already gets --fs-h1 from the shared internal-page h1 rule; just
   cap its measure so a long title doesn't stretch edge to edge. */
html body#acb-design.article-page .article-head h1{max-width:22ch!important}
html body#acb-design.article-page .article-dek{font-size:var(--fs-body)!important;letter-spacing:var(--ls-body)!important;line-height:var(--lh-copy)!important;color:var(--ink-soft)!important;margin:6px 0 0!important;max-width:56ch!important}
html body#acb-design.article-page .article-meta{display:flex!important;flex-wrap:wrap!important;gap:6px 18px!important;font-size:var(--fs-small)!important;letter-spacing:var(--ls-small)!important;line-height:var(--lh-copy)!important;color:var(--muted)!important;opacity:.8!important;margin:16px 0 0!important}
html body#acb-design.article-page .article-meta a{color:inherit!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important}

/* Body card (.article-layout) is already a full-width white card via the
   shared mechanism; keep the actual reading column at a comfortable
   measure, centred inside it. */
html body#acb-design.article-page .article-layout{display:block!important;grid-template-columns:none!important}
html body#acb-design.article-page .article-col{max-width:700px!important;margin:0 auto!important}

/* "Useful question" callout: the site's one callout language — solid
   colour, rounded, no border (matches .access-note / .legal-placeholder). */
html body#acb-design.article-page .article-aside{position:static!important;top:auto!important;float:none!important;width:auto!important;align-self:auto!important;border:0!important;border-radius:var(--radius-card)!important;background:var(--acb-yellow)!important;color:var(--ink)!important;margin:0 0 clamp(22px,3vw,34px)!important;padding:16px 18px!important;font-size:var(--fs-body)!important;letter-spacing:var(--ls-body)!important;line-height:var(--lh-copy)!important;font-style:normal!important}

html body#acb-design.article-page .article-copy{max-width:100%!important;margin:0!important}
html body#acb-design.article-page .article-copy p+p{margin-top:1.05em!important}
html body#acb-design.article-page .article-copy>p:first-of-type{font-size:var(--fs-copy-lg)!important;letter-spacing:var(--ls-copy-lg)!important;line-height:var(--lh-copy)!important;color:var(--ink)!important}
html body#acb-design.article-page .article-copy ul,
html body#acb-design.article-page .article-copy ol{margin:1em 0!important;padding-left:1.2em!important}
html body#acb-design.article-page .article-copy h2{margin:1.3em 0 .5em!important}

/* Pull-quote: bold and larger, no border-accented box. */
html body#acb-design.article-page .article-copy blockquote{font-weight: 400!important;font-style:normal!important;font-size:var(--fs-copy-lg)!important;letter-spacing:var(--ls-copy-lg)!important;line-height:var(--lh-copy)!important;color:var(--ink)!important;margin:1.25em 0!important;padding:0!important;border:0!important}

/* Research note: same solid-yellow callout language as the aside. */
html body#acb-design.article-page .article-copy .article-note{background:var(--acb-yellow)!important;border:0!important;border-radius:var(--radius-card)!important;padding:15px 18px!important;font-size:var(--fs-small)!important;letter-spacing:var(--ls-small)!important;line-height:var(--lh-copy)!important;color:var(--ink)!important;margin:1.7em 0!important}

html body#acb-design.article-page .article-next{margin-top:clamp(44px,6vw,74px)!important;background:var(--acb-yellow)!important;border-radius:var(--radius-card)!important;padding:clamp(22px,3vw,36px)!important}
html body#acb-design.article-page .article-next-label{font-size:var(--fs-label)!important;line-height:1!important;letter-spacing:var(--ls-label)!important;color:var(--blue)!important;margin:0 0 10px!important}
html body#acb-design.article-page .article-next h2{font-size:var(--fs-h3)!important;line-height:1!important;letter-spacing:var(--ls-heading)!important;margin:0 0 22px!important}
html body#acb-design.article-page .article-next .article-service{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;width:100%!important;background:var(--blue)!important;color:#fff!important;border-radius:var(--radius-pill)!important;padding:18px 20px!important;font-size:20px!important;line-height:1!important;text-decoration:none!important;cursor:pointer!important}
html body#acb-design.article-page .article-next .article-service span{transition:transform .25s cubic-bezier(.16,1,.3,1)!important}
html body#acb-design.article-page .article-next .article-service:hover span{transform:translate(3px,-3px)!important}
html body#acb-design.article-page .article-next ul{list-style:none!important;margin:20px 0 0!important;padding:0!important;display:grid!important;gap:10px!important}
html body#acb-design.article-page .article-next li{margin:0!important;padding:0!important}
html body#acb-design.article-page .article-next li a{display:inline!important;color:var(--ink)!important;font-size:var(--fs-body)!important;line-height:var(--lh-copy)!important;letter-spacing:var(--ls-body)!important;text-underline-offset:4px!important;cursor:pointer!important}

html body#acb-design.article-page .article-references{margin-top:clamp(44px,6vw,74px)!important;padding-top:clamp(24px,3vw,34px)!important;border-top:1px solid var(--line)!important}
html body#acb-design.article-page .article-references h2{font-size:var(--fs-h3)!important;line-height:1!important;letter-spacing:var(--ls-heading)!important;margin:0 0 20px!important}
html body#acb-design.article-page .article-references ol{margin:0!important;padding-left:1.25em!important;display:grid!important;gap:12px!important}
html body#acb-design.article-page .article-references li{padding-left:5px!important;font-size:var(--fs-small)!important;line-height:var(--lh-copy)!important;letter-spacing:var(--ls-small)!important}
html body#acb-design.article-page .article-references a{color:inherit!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important}
html body#acb-design.article-page .article-author{margin-top:clamp(36px,5vw,60px)!important;background:var(--acb-light-blue)!important;border-radius:var(--radius-card)!important;padding:clamp(22px,3vw,36px)!important}
html body#acb-design.article-page .article-author-label{color:var(--blue)!important;font-size:var(--fs-label)!important;line-height:1!important;letter-spacing:var(--ls-label)!important;text-transform:none!important;margin:0 0 10px!important}
html body#acb-design.article-page .article-author h2{font-size:var(--fs-h3)!important;line-height:1!important;letter-spacing:var(--ls-heading)!important;margin:0 0 14px!important}
html body#acb-design.article-page .article-author h2 a{color:inherit!important;text-decoration:none!important}
html body#acb-design.article-page .article-author>p:last-child{max-width:820px!important;margin:0!important;font-size:var(--fs-body)!important;line-height:var(--lh-copy)!important;letter-spacing:var(--ls-body)!important}

/* Back link */
html body#acb-design.article-page .article-back{margin-top:clamp(34px,4.5vw,52px)!important;padding-top:22px!important;border-top:1px solid var(--line)!important}
html body#acb-design.article-page .article-back a{color:var(--blue)!important;font-weight: 400!important;font-size:var(--fs-small)!important}