/* ============ shared article furniture ============ */
.artwrap{max-width:740px}
.kicker{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px}
.byline2{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.byline2 img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.byline2 b{font-weight:700}
.byline2 span{font-size:.86rem;color:var(--slate)}
.share{margin-left:auto;font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--slate)}
.share a{padding:0 7px;color:var(--green-deep)}
/* ============ A. REGULATORY UPDATE ============ */
.alertbar{background:#F6EFD9;border-top:3px solid #C9A227;padding:16px 20px;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin-bottom:34px}
.alertbar b{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:#8A6A18;font-weight:700}
.alertbar span{font-size:.96rem;color:#4A3A16;font-weight:600}
.glance{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);margin-bottom:38px}
.glance div{padding:20px 22px;border-right:1px solid var(--rule)}
.glance div:last-child{border-right:0}
.glance p{font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--slate);font-weight:600;margin-bottom:8px}
.glance strong{font-size:1.02rem;font-weight:700;line-height:1.3;display:block}
@media (max-width:820px){.glance{grid-template-columns:1fr 1fr}.glance div{border-bottom:1px solid var(--rule)}}
@media (max-width:460px){.glance{grid-template-columns:1fr}.glance div{border-right:0}}
.checklist{list-style:none;padding:0;margin:0 0 30px}
.checklist li{position:relative;padding:14px 0 14px 38px;border-bottom:1px solid var(--rule);font-size:1.04rem;line-height:1.5}
.checklist li::before{content:'';position:absolute;left:2px;top:21px;
  width:11px;height:11px;background:var(--ea-green,var(--green));transform:rotate(45deg)}
.deadline{background:var(--ground-dark);color:#fff;padding:26px 28px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;margin:34px 0}
.deadline b{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;display:block;color:var(--green-lift)}
.deadline span{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:#7E8C87;font-weight:600}
/* ============ B. BOARDROOM BRIEFING ============ */
.dropcap::first-letter{float:left;font-size:4.1rem;line-height:.82;font-weight:700;padding:6px 12px 0 0;color:var(--green-deep)}
.secnum{font-size:.72rem;font-weight:600;letter-spacing:.18em;color:var(--green-deep);text-transform:uppercase;display:block;margin-bottom:8px}
/* ============ C. GUIDE CHAPTER ============ */
.chapnav{position:sticky;top:130px;border-top:2px solid var(--ink);padding-top:16px}
.chapnav p{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--slate);font-weight:600;margin-bottom:14px}
.chapnav ol{list-style:none;counter-reset:c;padding:0;margin:0 0 24px}
.chapnav li{counter-increment:c;font-size:.93rem;line-height:1.35;padding:9px 0 9px 30px;position:relative;border-left:1px solid var(--rule);color:#4B5457}
.chapnav li::before{content:counter(c,decimal-leading-zero);position:absolute;left:11px;font-size:.7rem;font-weight:600;color:var(--slate);top:11px}
.chapnav li.here{border-left-color:var(--green);color:var(--ink);font-weight:700}
.chapnav li.here::before{color:var(--green)}
.progress{height:3px;background:var(--rule);margin-bottom:18px}
.progress i{display:block;height:100%;background:var(--green)}
.define{border:1px solid var(--rule);border-left:3px solid var(--green);padding:20px 22px;margin:28px 0;background:var(--mist)}
.define b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--green-deep);margin-bottom:8px}
.chapfoot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;border-top:1px solid var(--ink);margin-top:44px;padding-top:24px}
.chapfoot a{font-size:1.02rem;font-weight:700;letter-spacing:-.012em;max-width:20em}
.chapfoot span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--slate);font-weight:600;margin-bottom:5px}
/* ============ D. DATA AND ANALYSIS ============ */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.statgrid div{padding:26px 24px 24px;border-right:1px solid var(--rule)}
.statgrid div:last-child{border-right:0}
.statgrid b{font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:700;letter-spacing:-.03em;line-height:1;display:block;color:var(--green-deep)}
.statgrid p{font-size:.95rem;color:#4B5457;line-height:1.42;margin:12px 0 0}
@media (max-width:720px){.statgrid{grid-template-columns:1fr}.statgrid div{border-right:0;border-bottom:1px solid var(--rule)}}
.chart{margin:34px 0}
.chart h4{font-size:1.05rem;margin-bottom:6px}
.chart .csub{font-size:.84rem;color:var(--slate);margin-bottom:22px}
.crow{display:grid;grid-template-columns:minmax(0,12em) 1fr auto;gap:16px;align-items:center;margin-bottom:11px;font-size:.95rem}
.crow .track{background:var(--mist);height:26px;position:relative}
.crow .track i{display:block;height:100%;background:var(--green-deep)}
.crow .track i.alt{background:#C9A227}
.crow .val{font-weight:700;font-variant-numeric:tabular-nums;min-width:3.4em;text-align:right}
@media (max-width:600px){.crow{grid-template-columns:1fr;gap:5px}.crow .val{text-align:left}}
.method{border:1px dashed var(--rule);padding:22px 24px;font-size:.92rem;line-height:1.55;color:#4B5457;margin-top:38px}
.method b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink);margin-bottom:9px}
/* ============ E. IN CONVERSATION ============ */
.qahero{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,54px);align-items:end;margin-bottom:44px}
@media (max-width:820px){.qahero{grid-template-columns:1fr}}
.qahero img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1)}
.qa{max-width:700px}
.qa .q{display:grid;grid-template-columns:auto 1fr;gap:16px;margin:34px 0 14px}
.qa .q i{font-style:normal;font-weight:700;color:var(--green);font-size:1.3rem;line-height:1.2}
.qa .q p{font-size:1.2rem;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:0}
.qa .a{padding-left:34px}
.qa .a p{font-size:1.1rem;line-height:1.68;color:#242C2F}
.qafacts{border-top:2px solid var(--ink);padding-top:18px}
.qafacts dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--slate);font-weight:600;margin-top:16px}
.qafacts dd{margin:5px 0 0;font-size:1rem;line-height:1.4}
/* ============ posts written in the CMS (no designed body) ============
   Rendered by post_detail.html when html_content is empty. Before this block
   existed the .ea-* classes there had no styles at all, so seventeen articles
   sat unwrapped against the left edge of the viewport. */
.ea-post{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,56px) var(--gut) 0}
.ea-head{max-width:760px;margin:0 auto 34px}
.ea-tag{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--green-deep);margin-bottom:18px}
.ea-head h1{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}
.ea-lede{font-size:1.25rem;line-height:1.5;color:#3B4448;margin:0 0 22px}
.ea-byline{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.92rem}
.ea-byline img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.ea-byline span{color:var(--slate)}
.ea-feature{max-width:1000px;margin:0 auto 40px}
.ea-feature img{width:100%;height:auto;display:block}
.ea-body{max-width:740px;margin:0 auto}
.ea-body p,.ea-body li{font-size:1.13rem;line-height:1.68;color:#242C2F}
.ea-body p{margin:0 0 1.2em}
.ea-body h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin:2em 0 .5em;line-height:1.15;letter-spacing:-.02em}
.ea-body h3{font-size:1.2rem;margin:1.6em 0 .4em}
.ea-body h2 strong,.ea-body h3 strong{font-weight:inherit}
.ea-body img{max-width:100%;height:auto;display:block;margin:28px auto}
.ea-body ul,.ea-body ol{padding-left:1.2em;margin:0 0 1.3em}
.ea-body li{margin-bottom:.5em}
.ea-body hr{border:0;border-top:1px solid var(--rule);margin:36px 0}
.ea-body blockquote{border-left:3px solid var(--green);margin:28px 0;padding:6px 0 6px 22px;color:#3B4448;font-style:italic}
.ea-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 1.3em}
.ea-body td,.ea-body th{padding:10px 14px;border-bottom:1px solid var(--rule);text-align:left;font-size:1rem;vertical-align:top}
.ea-body iframe{max-width:100%}
/* TinyMCE pastes carry the source document's fonts; the site's type wins. */
.ea-body [style*="font-family"]{font-family:inherit!important}
.ea-body [style*="font-size"]{font-size:inherit!important}

/* ============ designed articles carried over from the live site ============
   Their own stylesheet travels inside html_content and was written for the old
   theme, whose fixed header was 142px tall. Under this chrome that headroom is
   a blank band above the masthead, and the rail + text unit sits off-centre
   in a 1180px grid because the text column stops at 72ch. These win on
   specificity, not order, because the embedded <style> comes later. */
main .ea-art{padding-top:0}
main .ea-art .ea-mast{padding-top:clamp(40px,5vw,64px)}
main .ea-art .ea-grid{max-width:1040px}
main .ea-art .ea-prog{top:0}
/* Both designed articles size their root with a viewport hack the old theme
   needed: width:min(1360px, var(--ea-vw)) shifted left by a script that did
   not come across with the markup. Without it they sat 1360px wide against
   the left edge of a 1440px window. */
main .ea-art{width:auto;max-width:none;margin-left:0;margin-right:0}
/* The GIPA guide (its root opens with .ea-open) is a white page rather than a
   full-bleed masthead, so hold it to the site's content well: 1200px plus its
   own 40px side padding, which lines it up with .wrap. Browsers without :has()
   get the full-width version, which still reads. */
main .ea-art:has(> .ea-open){max-width:1280px;margin-left:auto;margin-right:auto}
main .ea-art > .ea-open{padding-top:clamp(36px,4vw,56px)}

/* ---------- the article's own call to action ----------
   The stored markup fills the button with Elixir green and puts white type on
   it, which is 2.9:1, and its hover uses the lifted green, which is 2.2:1.
   The green is right and stays; the type is what changes. Near-black on the
   trademark green is 6.2:1, and it matches the buttons on the rest of the
   site.

   The stored rule is itself .ea-art .ea-btn and sits in a <style> block in
   the body, so it is later in the document and equal on specificity. Naming
   the element is what wins here: a.ea-btn is one selector heavier. */
.ea-art a.ea-btn,.ea-art button.ea-btn{
  background:var(--ea-green);color:#fff}
.ea-art a.ea-btn:hover,.ea-art button.ea-btn:hover{
  background:var(--ea-ink);color:#fff}

/* The lede in the contact block at the foot of an article is set to
   max-width:none in the stored markup, which at a 1440 column puts it on a
   133-character line. Naming the element gets one step above that rule. */
.ea-art .ea-contact p.ea-lede{max-width:min(100%,74ch)}