/* ============================================================
   MCF ARTICLE TEMPLATE — blog post styling on the site tokens.
   Scoped to #mcfArt so the Elementor header/footer and every
   other page are untouched. Requires tokens.css (loaded first).
   ============================================================ */

/* --art-measure: the one number that sets article width. Hero headline and
   body text share it, so their left edges line up. */
#mcfArt,#mcfArt *,#mcfArt *::before,#mcfArt *::after{box-sizing:border-box}
/* ===== THE ARTICLE TYPE SCALE =====================================
   Measured off the published posts, not designed here. Four of them were
   read at 1440px (capacitor-bank-failure, evidence-retention, cable-damage,
   what-is-a-load-tap-changer) and the house scale is:

     column  856px
     h1      39px / 600 / lh 1.20 / #1C244B / centred / normal tracking
     h2      24px / 500 / lh 1.20 / #1C244B
     h3      18px / 500 / lh 1.20 / #324A6D
     body    16px / 400 / lh 1.50 / #324A6D
     list    16px / 400 / lh 1.50

   The article template had been running 44 / 30 / 22 / 17 at weights 600 /
   700 / 600 - bigger AND heavier than the site at every step, which is why
   the headline read thick next to a real post.

   These are the article's OWN tokens, not the shared --fs-* ones. --fs-h1 is
   44px because the BESS Fire page needs it; an article needs 39. Sharing them
   meant one number could not be right for both, and the Global tab showed a
   figure the article never rendered. The panel's Text sizes for an article now
   edit these, so what it says is what the page draws.

   SPACING IS NOT COPIED. The published posts run a flat 14px between
   everything - paragraph to paragraph, paragraph to H2 - which is precisely
   the "all evened out, loose and immature" Alicia asked to be fixed. The type
   is theirs; the rhythm is the ladder she asked for, rescaled to 16px body. */
:root{
  /* THE TEXT COLUMN ITSELF, not the box around it. It read 904 (856 + the
     side padding) while the column measured 856, so the panel stated one
     number and the page drew another - the exact thing Global must never do.
     .ameasure is content-box below, so this IS the column. */
  /* THE DESKTOP CAP IS ALICIA'S CALL: "over 1000 for desktop, no way under
     900". Set to 1040.

     For the record, because I reported 856 and she was right to push back on
     how it felt: six published posts measured at 1920 / 1600 / 1440 read

       capacitor, cable, transformer, brief   856px   (four of six)
       what-is-a-load-tap-changer             700px   (div.mcf-article, capped)
       evidence-retention                     uncapped - the text runs the full
                                              window, 1920px wide at 1920

     so 856 is what most of them do, and none of them is over 1000. It is also
     the width that made an article look empty on a wide screen, which is the
     thing that actually matters. Her number wins.

     BELOW the cap nothing changes - those percentages ARE measured, and they
     reproduce her posts exactly:

        screen   column   share
          1024     942      92%
           820     754      92%
           768     707      92%
           600     528      88%
           430     378      88%
           390     343      88%   */
  --art-measure:909px;
  /* THE IMAGE IS NOT THE TEXT COLUMN. It used to be width:100% of .ameasure,
     so widening the column to 1040 blew the photo up with it - "you made the
     image so large ... the original image size is proper". 856 is that
     original size. Two separate numbers now, and two separate controls. */
  --art-img-max:700px;
  --art-img-ratio:auto;   /* no forced band - see the note on .afig img */
  --art-h1:39px;
  /* HEADLINE WEIGHT. The published posts declare 600, but every @font-face
     Elementor self-hosts for them is font-weight:400 — one static file — so
     the browser FAKES the bold, and how heavy that looks depends on the
     browser doing the faking. Headless Chromium renders it heavy (15.6% ink,
     which a true 600 matches to within 0.2%); Alicia's Chrome renders it
     visibly lighter. There is therefore no number that is "correct" here, only
     one that looks right on the screen it is read on. 500 is a real medium and
     matches what she sees. It is a panel control - Roles > Headline > Weight -
     so it is hers to move, which is the point. */
  --art-h1-w:600;
  --art-h2:24px;
  --art-h3:18px;
  --art-body:16px;
  --art-dek:17px;
  --art-eyebrow:15px;
  --art-lh:1.5;         /* body leading                                    */
  --art-gap-p:15px;     /* between LIST ROWS only - paragraphs are pinned at
                        8px below, her own edit, see .content p              */
  --art-gap-h2:25px;    /* space ABOVE an H2 - the biggest step            */
  --art-gap-h3:25px;    /* space above an H3 - visibly smaller than an H2  */
  /* Narrow-screen step-down for the headline. One named variable, in one
     place: a clamp() whose middle term falls below the token renders smaller
     than the token and says nothing about it, which is how the panel came to
     read 44 while the page drew 40. */
  /* The ONLY thing that changes with screen size on her posts. Measured:
       >1024px   39px / lh 1.2
       768-1024  32px / lh 1.0     (32/39 = .82)
       <=767px   24px / lh 1.0     (24/39 = .615)
     h2, h3 and body do NOT change — they are 24 / 18 / 16 at every width from
     1600 down to 390. The build used to shrink them on a phone; her posts
     never have. */
  --art-h1-mul:1;
  --art-sec-gap:30px;   /* the ONLY gap between sections                    */
  --art-top:48px;       /* above the first section                          */
  --art-bottom:75px;    /* below the last                                   */
  /* The side gutter is a share of the screen, not a fixed pad — that is what
     her posts do. Measured on them: 4% each side down to the phone
     breakpoint, 6% below it, which lands at 1024->58px, 768->31px, 390->23px.
     --art-side-min stops the text touching the edge on a very narrow screen
     where a percentage alone would not be enough. */
  --art-side-min:16px;
  --art-h1-lh:1.2;
  /* Narrow screens SCALE the values above; they must never replace them.
     A media query that writes "--art-h2:21px" silently discards whatever was
     set in Global, so the panel says 30 and a phone draws 21. Multipliers keep
     Alicia's number the source of truth at every width. */
  --art-scale:1;        /* h2 / h3 / dek                                    */
  --art-eyebrow-mul:1;
}
/* container-type makes the Design panel's device preview real: shrinking
   #mcfArt to 430px fires the article's own breakpoint, instead of the page
   only getting narrower while the type stays desktop-sized. */
#mcfArt{container-type:inline-size;container-name:art;background:#fff;
  font-family:var(--font);color:var(--body);line-height:var(--art-lh)}
/* The gutter is a PERCENTAGE, not a fixed 24px, because that is what the
   published posts do — 4% each side down to the phone breakpoint, 6% below it.
   A fixed pad gives a 343px column on a 390px phone only by accident; a
   percentage gives it on every phone. */
#mcfArt .ameasure{box-sizing:border-box;width:var(--art-width,92%);
  max-width:min(var(--art-measure),calc(100% - (var(--art-side-min) * 2)));margin:0 auto;padding:0}

/* ONE SPACER. Every gap between top-level sections is --art-sec-gap and
   nothing else; a section never adds vertical padding of its own, or the gap
   becomes the sum of two numbers and stops being predictable. --art-top is
   the one exception here: space above the first section, as a margin (the
   header is white anyway, so a white gap above it is invisible against it).
   --art-bottom is NOT a margin - see .abody below: it is padding-bottom
   INSIDE the last section's own coloured box, so the colour reaches the
   footer with no white gap after it. All three remain Global controls. */
#mcfArt > *{padding-top:0;padding-bottom:0}
#mcfArt > * + *{margin-top:var(--art-sec-gap)}
#mcfArt > :first-child{margin-top:var(--art-top)}
/* --art-bottom now lives as .abody padding-bottom (below), not a margin
   here - a margin would sit OUTSIDE the coloured box and expose #mcfArt's
   white base as a gap before the footer, which is exactly what this was. */
/* A section with its own background (the navy Text-led masthead, the split)
   still needs breathing room INSIDE it — that is padding, not a gap. */
#mcfArt > .atext,#mcfArt > .asplit,#mcfArt > .ahero{padding-top:44px;padding-bottom:44px}
#mcfArt > .ahero{padding:0}

/* link guard — neutralise whatever the Elementor kit paints on <a>
   (background, borders, colour); specific components restyle below */
#mcfArt a{background:transparent;border:0;color:var(--link);text-decoration:none;box-shadow:none}

/* ── hero: full-width featured image, scrim, WP title bottom-left ──
   Height / focal point / shading come from --hero-* custom properties, set by
   inc/article-hero.php (Customizer default, overridden per post). The fallback
   values here are what you get before anything is configured. ── */
#mcfArt .ahero{position:relative;height:var(--hero-h,520px);overflow:hidden;color:#fff}
#mcfArt .ahero .aimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focal,50% 50%);margin:0}
#mcfArt .ahero .ascrim{position:absolute;inset:0;background:var(--hero-scrim,linear-gradient(180deg,rgba(18,25,51,.08) 0%,rgba(18,25,51,.5) 55%,rgba(18,25,51,.92) 100%))}
#mcfArt .ahero .ain{position:relative;height:100%;max-width:var(--art-measure);margin:0 auto;padding:0 24px 34px;display:flex;flex-direction:column;justify-content:flex-end}
/* EYEBROW. The LETTERFORMS are carried from the published articles - uppercase,
   light weight, widely tracked (measured on capacitor-bank-failure: 16px / 300
   / 7.6px tracking). The COLOUR is not: that article runs it navy, but gold is
   the MCF eyebrow and always has been. Gold on light grounds, bright gold on
   dark. Do not repaint this navy again. */
#mcfArt .aeyebrow{font-size:calc(var(--art-eyebrow) * var(--art-eyebrow-mul,1));font-weight:300;letter-spacing:.475em;
  text-transform:uppercase;color:var(--gold);line-height:1.5;margin-bottom:22px}
#mcfArt .ahero .aeyebrow,#mcfArt .asplit .aeyebrow,#mcfArt .atext .aeyebrow{
  color:var(--gold-bright,#D9A63C)}
/* Headline sizing is fluid, and the line breaks are balanced rather than
   left to fill-then-overflow — so a title never drops one lonely word onto
   its own line, at any length or screen width. */
#mcfArt .ahero h1{
  /* Smooth ramp from phone to desktop — no jump at a breakpoint. */
  font-size:calc(var(--art-h1) * var(--art-h1-mul,1));
  line-height:var(--art-h1-lh);font-weight:var(--art-h1-w);color:#fff;margin:0;letter-spacing:normal;
  text-shadow:0 2px 18px rgba(0,0,0,.25);text-align:left;
  text-wrap:balance;          /* even line lengths (Chrome/Safari/Firefox) */
  -webkit-hyphens:none;hyphens:none;
}
/* The template measures the title and tags the hero, so a short punchy title
   gets to be big and a long one steps down instead of shattering into
   six lines on a phone. */
/* No ttl-short / ttl-long sizing. See the note on .ahead h1. */
/* Older browsers with no text-wrap support still get no orphan, because the
   template joins the last two words with a non-breaking space. */
@supports not (text-wrap:balance){
  #mcfArt .ahero h1{text-wrap:pretty}
}

/* ── meta strip: dek (post excerpt) + byline ── */
#mcfArt .ameta{background:#fff;border-bottom:1px solid var(--line)}
/* The dek is the post excerpt. At 19px/500 navy it was already the loudest
   thing after the headline; centring it under a centred headline turned it
   into a second headline. It is a standfirst, not a title: body colour,
   regular weight, one step over body size. */
/* Italic by default - it is the standfirst, and the published posts set
   their summary line in italic. Panel-controllable like everything else:
   Roles > Excerpt / dek > the I toggle. */
#mcfArt .adek{font-size:calc(var(--art-dek) * var(--art-scale,1));font-weight:400;font-style:italic;
  color:var(--body);margin:0 0 5px;line-height:1.5}
#mcfArt .abyline{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:#5a6478}
#mcfArt .abyline b{color:var(--c-h3);font-weight:700}

/* ── article body typography (styles whatever the editor outputs) ── */
#mcfArt .abody{padding:40px 0 var(--art-bottom);background:#F3F5F8}
/* Every element below sets its OWN leading. Before this, h3, p and li all
   inherited 1.72, so a 22px heading and a 17px paragraph breathed at exactly
   the same rate and nothing in the page had a hierarchy you could feel.
   Two rules make it read technical rather than slack:
     - bigger type takes tighter leading  (1.18 at 30px, 1.62 at 17px)
     - a heading binds DOWN to its own text: a large gap above, a small one
       below, roughly 3.4:1. It belongs to what follows, not to what it left. */
/* Italic: she set it on every H2 in the article one at a time, which is the
   same thing as saying it is the default. Baked here so it applies to every
   post rather than to the four headings she happened to click. */
#mcfArt .content h2{font-size:calc(var(--art-h2) * var(--art-scale,1));color:var(--c-h3);font-weight:500;
  font-style:italic;text-transform:capitalize;margin:var(--art-gap-h2) 0 12px;line-height:1.2;letter-spacing:normal;text-align:left}
#mcfArt .content h3{font-size:calc(var(--art-h3) * var(--art-scale,1));color:var(--body);font-weight:500;
  margin:var(--art-gap-h3) 0 9px;line-height:1.2;text-align:left}
/* An H3 immediately under its H2 is a sub-head, not a new section - it hugs. */
#mcfArt .content h2 + h3{margin-top:18px}
/* Nothing opens the body with a gap, and nothing closes it with one. */
#mcfArt .content > :first-child{margin-top:0}
#mcfArt .content > :last-child{margin-bottom:0}
#mcfArt .content p{margin:0 0 8px;font-size:var(--art-body);line-height:var(--art-lh)}
#mcfArt .content ul,#mcfArt .content ol{margin:0 0 var(--art-gap-p);padding-left:1.25em}
/* List rows sat 15px apart on 1.72 leading, which is what read as loose and
   unfinished. Tighter leading and a third of the gap makes a list look like
   one object instead of five stranded sentences. */
#mcfArt .content li{margin-bottom:8px;font-size:var(--art-body);line-height:var(--art-lh)}
#mcfArt .content li:last-child{margin-bottom:0}
#mcfArt .content li::marker{color:var(--gold);font-weight:700}
#mcfArt .content li strong{color:var(--c-h3)}
/* Body links must LOOK like links. --link (#336DC2) against --body (#324A6D)
   is far too close to carry the job on colour alone — an underline is what
   actually distinguishes them in running prose. */
#mcfArt .content a{color:var(--link);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(51,109,194,.45)}
#mcfArt .content a:hover{color:var(--link-hover);text-decoration-color:currentColor}
#mcfArt .content img{max-width:min(100%,var(--art-img-max));height:auto;
  display:block;margin-left:auto;margin-right:auto}

/* callout — WordPress Quote block OR a div.mcf-callout in pasted HTML */
#mcfArt .content blockquote,
#mcfArt .content .mcf-callout{background:var(--blue-light);border-left:5px solid var(--gold);padding:22px 26px;margin:28px 0;font-style:italic;font-size:var(--art-dek);line-height:1.5;color:var(--c-h3);border-radius:0 4px 4px 0}
#mcfArt .content blockquote p{margin:0;font-size:var(--art-dek);line-height:1.5}

/* diagrams — figure/figcaption blocks OR div.mcf-diagram in pasted HTML */
#mcfArt .content figure,
#mcfArt .content .mcf-diagram{margin:34px auto;max-width:680px}
#mcfArt .content figure svg,#mcfArt .content .mcf-diagram svg{width:100%;height:auto;display:block}
#mcfArt .content figcaption,
#mcfArt .content .mcf-diagram-caption{text-align:center;font-size:15px;color:#5a6478;margin-top:.8em;font-style:italic}

/* ── CTA card: light, minimal, gold accent stick ── */
#mcfArt .acta{background:#ffffff;border-left:5px solid var(--gold);padding:26px 30px;margin:44px 0 0;border-radius:0 6px 6px 0}
#mcfArt .acta p{margin:0 0 6px;font-size:var(--art-body);line-height:var(--art-lh);color:var(--c-h3)}
#mcfArt .acta p.h{font-weight:600;font-size:var(--art-h3);margin-bottom:8px}

/* ── button: the agreed service-page spec (12/26, 8px corners,
      1px matching border, fill→outline hover) ── */
#mcfArt .btn{display:inline-block;margin-top:12px;font-weight:400;letter-spacing:.5px;text-transform:capitalize;font-size:15px;padding:12px 26px;border-radius:10px;background:var(--btn);color:var(--btn-txt);border:1px solid var(--btn);transition:all .15s;cursor:pointer;text-decoration:none}
#mcfArt .btn:hover{background:var(--btn-hov-bg);color:var(--btn-hov-txt);border-color:var(--btn-hov-bd)}

/* ── share row ── */
#mcfArt .ashare{margin:40px 0 0}
#mcfArt .ashare .lbl{font-size:14.5px;color:var(--body);margin:0 0 12px}
#mcfArt .ashare ul{display:flex;gap:10px;list-style:none;margin:0;padding:0}
#mcfArt .ashare li{margin:0}
#mcfArt .ashare a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:50%;color:var(--c-h3);background:#fff;transition:all .15s}
#mcfArt .ashare svg{width:17px;height:17px;fill:currentColor;display:block}
#mcfArt .ashare a:hover{color:#fff;transform:translateY(-2px)}
#mcfArt .ashare a.li:hover{background:#0A66C2;border-color:#0A66C2}
#mcfArt .ashare a.fb:hover{background:#1877F2;border-color:#1877F2}
#mcfArt .ashare a.tw:hover{background:#000;border-color:#000}
#mcfArt .ashare a.em:hover{background:var(--c-h3);border-color:var(--c-h3)}

/* ── prev / next navigation ── */
#mcfArt .apostnav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:44px 0 0;padding-top:0;border-top:1px solid var(--line)}
#mcfArt .apostnav a{display:block;text-decoration:none;padding:16px 18px;border:1px solid var(--line);border-radius:8px;transition:.15s}
#mcfArt .apostnav a:hover{border-color:var(--btn);box-shadow:0 6px 18px rgba(28,36,75,.08)}
#mcfArt .apostnav .lbl{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:5px}
#mcfArt .apostnav .ttl{font-size:15.5px;color:var(--c-h3);font-weight:600;line-height:1.4}
#mcfArt .apostnav .next{text-align:right}

/* ── related posts ── */
#mcfArt .arelated{margin:52px 0 0;padding-top:36px;border-top:1px solid var(--line)}
#mcfArt .arelated h3{font-size:var(--art-h2);color:var(--c-h3);font-weight:600;margin:0 0 20px;line-height:1.2;text-align:left}
#mcfArt .agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#mcfArt .rcard{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;transition:.15s;display:flex;flex-direction:column}
#mcfArt .rcard:hover{border-color:var(--btn);box-shadow:0 8px 22px rgba(28,36,75,.09)}
#mcfArt .rcard img{width:100%;height:140px;object-fit:cover;display:block}
#mcfArt .rcard .pad{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
#mcfArt .rcard .date{font-size:12.5px;color:#6b7280;margin-bottom:6px}
#mcfArt .rcard h4{font-size:16px;color:var(--c-h3);margin:0 0 7px;font-weight:600;line-height:1.35;text-align:left}
#mcfArt .rcard h4 a{color:inherit;text-decoration:none}
#mcfArt .rcard h4 a:hover{color:var(--link)}
/* Clamp title to 3 lines and excerpt to 3 — without this one long title or
   excerpt stretches every card in the row and leaves the others half empty. */
#mcfArt .rcard h4 a{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#mcfArt .rcard p{font-size:13.8px;line-height:1.55;color:var(--body);margin:0 0 10px;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#mcfArt .rcard .more{font-size:13.5px;font-weight:600;color:var(--link);text-decoration:none}
#mcfArt .rcard .more:hover{color:var(--link-hover)}

/* Tablet. Measured on the posts: the headline drops to 32px and tightens to
   1.0; nothing else moves. There was no tablet step here at all before. */
@media(max-width:1024px){
  #mcfArt .ameasure,#mcfArt .asplit-in,#mcfArt .ain{--art-h1-mul:.82;--art-h1-lh:1.1;--art-dek:15px}
  #mcfArt .content h2{font-size:23px}
}
@container art (max-width:1024px){
  #mcfArt .ameasure,#mcfArt .asplit-in,#mcfArt .ain{--art-h1-mul:.82;--art-h1-lh:1.1;--art-dek:15px}
  #mcfArt .content h2{font-size:23px}
}
@media(max-width:767px){
  /* The whole rhythm steps down together, because the four variables above
     are the only place these numbers are written. */
  /* --art-scale is 1: h2/h3/dek keep their desktop size on a phone, because
     that is what her posts do. Only the headline steps down, to 24px. */
  :root{--art-h2:20px}
  #mcfArt{--art-width:88%}
  #mcfArt .ameasure,#mcfArt .asplit-in,#mcfArt .ain{--art-gap-p:16px;--art-gap-h2:30px;--art-gap-h3:22px;
   --art-h1-mul:.615;--art-h1-lh:1.1;--art-scale:1;--art-eyebrow-mul:.6;--art-dek:13px}
  #mcfArt .aeyebrow{letter-spacing:.26em;margin-bottom:16px}
  #mcfArt .agrid{grid-template-columns:1fr}
  #mcfArt .apostnav{grid-template-columns:1fr}
  #mcfArt .apostnav .next{text-align:left}
  /* From her export. Paths resolved against the Contained layout:
       article(4) > tail div(2) > nav(3)  = .apostnav
       article(4) > tail div(2) > div(4)  = .arelated
     On a phone the desktop 44/52 read too airy under a narrow column. */
  #mcfArt .apostnav{margin-top:45px}
  #mcfArt .arelated{margin-top:39px}
  #mcfArt .content h2{font-size:19px}
  #mcfArt .content h2:nth-child(3){font-size:19px}
  #mcfArt figcaption{margin-bottom:0}
}
/* Same rules, keyed to the width of #mcfArt itself rather than the window, so
   the Design panel's iPad / Phone buttons show the real narrow-screen article
   and not just a squeezed desktop one. A browser with no container-query
   support ignores this block and still gets the media query above.
   NOTE: the variables are set on a DESCENDANT (.ameasure / .asplit-in) - a
   container query can never style its own container, so setting them on
   #mcfArt here would silently do nothing. */
@container art (max-width:767px){
  /* --art-scale is 1: h2/h3/dek keep their desktop size on a phone, because
     that is what her posts do. Only the headline steps down, to 24px. */
  #mcfArt{--art-width:88%}
  #mcfArt .ameasure,#mcfArt .asplit-in,#mcfArt .ain{--art-gap-p:16px;--art-gap-h2:30px;--art-gap-h3:22px;
   --art-h1-mul:.615;--art-h1-lh:1.1;--art-scale:1;--art-eyebrow-mul:.6;--art-dek:13px}
  #mcfArt .aeyebrow{letter-spacing:.26em;margin-bottom:16px}
  #mcfArt .content h2{font-size:calc(19px * var(--art-scale,1))}
  #mcfArt .content h2:nth-child(3){font-size:19px}
  #mcfArt figcaption{margin-bottom:0}
  #mcfArt .arelated h3{font-size:20px}
  #mcfArt .agrid{grid-template-columns:1fr}
  #mcfArt .apostnav{grid-template-columns:1fr}
  #mcfArt .apostnav .next{text-align:left}
  /* From her export. Paths resolved against the Contained layout:
       article(4) > tail div(2) > nav(3)  = .apostnav
       article(4) > tail div(2) > div(4)  = .arelated
     On a phone the desktop 44/52 read too airy under a narrow column. */
  #mcfArt .apostnav{margin-top:45px}
  #mcfArt .arelated{margin-top:39px}
}
@container art (max-width:820px){
  #mcfArt .asplit-in{grid-template-columns:1fr}
  #mcfArt .asplit .atxt{padding:44px 24px 34px;order:1}
  #mcfArt .asplit .apic{order:2;min-height:0;aspect-ratio:16/10}
  #mcfArt .atext{padding:34px 0}
}

/* == ARTICLE LAYOUTS ==================================================
   Three alternatives to the full-bleed hero. Everything below the hero is
   shared markup, so these rules only ever describe the opening of a post.
   All of them reuse --art-measure and the existing brand tokens: a new
   layout changes the arrangement, never the palette or the type scale. */

/* ── shared: the plain headline block used by Contained ── */
#mcfArt .ahead{background:var(--white);text-align:center}
/* THE BRANDED HEADLINE. Measured off capacitor-bank-failure and carried here:
   centred, brand navy, semibold, tight leading, near-normal tracking. The one
   departure is size - that article runs 39px, this runs the --fs-h1 token
   (44px) because Alicia asked for a bigger desktop title.
   Title case is written into the post title, NOT forced with
   text-transform:capitalize. CSS capitalize renders "13.8 kV" as "13.8 KV",
   and this is an engineering site. */
#mcfArt .ahead h1{margin:0 auto;color:var(--navy);line-height:var(--art-h1-lh);
  font-weight:var(--art-h1-w);letter-spacing:normal;text-wrap:balance;
  font-size:calc(var(--art-h1) * var(--art-h1-mul,1))}
/* THERE ARE NO PER-LAYOUT OR PER-TITLE-LENGTH SIZE RULES, deliberately.
   Every layout used to multiply the token by a ratio of its own (Split .91,
   Text-led 1.18) and then again by a guess at the title's length (.91 or 1.14).
   The result: Global said 44 and no layout actually rendered 44, which makes
   the setting pointless. H1 is --fs-h1. If one layout should differ, that is
   a decision to make in the panel, not one for the stylesheet to make in
   secret. The only thing that still scales it is --art-h1-mul, the
   narrow-screen step-down, which is one named variable in one place. */

/* ── CONTAINED: photo below the headline, at article width, never cropped ── */
/* Centred caption. Her export set this at <=1024px only, which is where the
   panel stores a change made while the iPad view is selected - the intent is
   the caption, not the breakpoint, so it applies at every width. */
/* no margin shorthand here: it would wipe the margin-top that the one-spacer
   rule sets, which is what left the photo welded to the byline. */
#mcfArt .afig{background:var(--white);text-align:center}
/* width:auto, NOT 100%. width:100% stretches the photo to the column
   whatever the file actually is, so a 700px image was being blown up to 909
   and going soft. Now it fills the column when it is big enough and stops at
   its own size when it is not — "where is the original size go".
   --art-img-max is the ceiling, and it is a Global control. */
/* NO CROP AND NO STRETCH. The 16:9 band cropped the photo to make every
   article open the same height - which is why it stopped looking like the
   picture that was uploaded. The whole image is shown, at its own proportions,
   never enlarged past its own file, capped by --art-img-max. One number, in
   Global > Image width, decides how big it is. */
#mcfArt .afig img{display:block;width:auto;height:auto;
  max-width:min(100%,var(--art-img-max));
  margin-left:auto;margin-right:auto;border-radius:4px}
/* an explicit height from the panel wins over the ratio */
#mcfArt .afig img[style*="height"]{aspect-ratio:auto}
/* Width modes, written by the image pane's Width control. "Column" is the
   default above. Full bleed escapes the column with the 50%/50vw trick so it
   spans the window regardless of what the article is nested in. */
#mcfArt [data-iw="full"]{width:100vw !important;max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;border-radius:0 !important}
#mcfArt [data-iw="column"]{width:100% !important;max-width:100% !important;
  margin-left:auto !important;margin-right:auto !important}
#mcfArt .afig figcaption{margin-top:10px;font-size:15px;line-height:1.5;
  color:var(--body);opacity:.85}
/* the meta band sits between headline and photo here, so it loses its rule */
#mcfArt.lay-contained .ameta{border-bottom:0}

/* Dek and byline centre under a centred headline, exactly as the published
   articles put date and author centred beneath the title. Body copy stays
   left - only the masthead is centred. */
#mcfArt.lay-contained .adek{text-align:center;max-width:60ch;margin-left:auto;margin-right:auto}
#mcfArt.lay-contained .abyline{justify-content:center;border-top:0;padding-top:4px}

/* ── SPLIT: headline left, photo right ── */
#mcfArt .asplit{background:var(--navy);color:#fff}
#mcfArt .asplit-in{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
#mcfArt .asplit .atxt{padding:64px 44px 64px 24px;display:flex;
  flex-direction:column;justify-content:center}
#mcfArt .asplit .aeyebrow{color:var(--gold-bright,#D9A63C);margin-bottom:14px}
#mcfArt .asplit h1{margin:0;color:#fff;line-height:var(--art-h1-lh);font-weight:var(--art-h1-w);letter-spacing:normal;
  font-size:calc(var(--art-h1) * var(--art-h1-mul,1))}

#mcfArt .asplit .apic{position:relative;min-height:340px}
#mcfArt .asplit .apic img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--hero-focal,50% 50%);display:block}

/* ── TEXT-LED: typographic opening, no photo ── */
#mcfArt .atext{background:var(--navy);color:#fff;padding:44px 0;text-align:center}
#mcfArt .atext .aeyebrow{color:var(--gold-bright,#D9A63C);margin-bottom:16px}
#mcfArt .atext h1{margin:0 auto;color:#fff;line-height:var(--art-h1-lh);font-weight:var(--art-h1-w);
  letter-spacing:normal;text-wrap:balance;
  font-size:calc(var(--art-h1) * var(--art-h1-mul,1))}

#mcfArt .atext .arule{width:64px;height:3px;background:var(--gold-bright,#D9A63C);
  margin:26px auto 0}
#mcfArt .atext .alede{margin:22px auto 0;font-size:var(--art-dek);line-height:1.6;
  color:rgba(255,255,255,.82);max-width:60ch}
#mcfArt .ameta-plain{background:var(--white)}
#mcfArt.lay-textled .abyline{justify-content:center;border-top:0;padding-top:4px}

/* ── narrower screens ── */
@media(max-width:820px){
  #mcfArt .asplit-in{grid-template-columns:1fr}
  #mcfArt .asplit .atxt{padding:44px 24px 34px;order:1}
  #mcfArt .asplit .apic{order:2;min-height:0;aspect-ratio:16/10}
  #mcfArt .atext{padding:34px 0}
}

/* Smallest screens, LAST in the file on purpose: at 390px both this and the
   760px container query match, and the later rule wins. Put earlier, the 768
   step-down silently overrode this one and a phone rendered the tablet size. */
/* No sub-480 step: her posts hold 24px from 600px all the way down to 390px. */

/* Phone-tier DIRECT property overrides that must come LAST in the file.
   These share their exact selector with an unconditional desktop rule
   declared further up (.afig figcaption, .content figcaption, .abyline), so
   equal specificity means whichever comes later in the cascade wins,
   regardless of whether its own media query currently matches. Putting them
   in the early phone block (where the h1-mul step-down lives) let the later,
   unconditional desktop rule win even at 390px. Custom-property overrides
   (--art-h2, --art-dek, --art-eyebrow-mul) don't have this problem — nothing
   unconditional re-declares those same tokens further down — so only the
   plain property rules had to move. */
@media(max-width:767px){
  #mcfArt .abyline{font-size:11px}
  #mcfArt .afig figcaption{font-size:11px}
  #mcfArt .content figcaption,#mcfArt .content .mcf-diagram-caption{font-size:11px}
  #mcfArt .acta{background:#ffffff}
}
@container art (max-width:767px){
  #mcfArt .abyline{font-size:11px}
  #mcfArt .afig figcaption{font-size:11px}
  #mcfArt .content figcaption,#mcfArt .content .mcf-diagram-caption{font-size:11px}
  #mcfArt .acta{background:#ffffff}
}