/*
 * The article-layout override that used to live here has been removed.
 *
 * It re-targeted the vendored .blog-page-wrap / .sidebar-outer flex rules at
 * `#mainBody > .is-100`, because base.njk once wrapped every page's content
 * in an extra <div id="mainBody"> that pushed .is-100 a level deeper than the
 * vendored selectors expected.
 *
 * base.njk no longer adds that wrapper on article pages -- they now render
 * main.blog-page-outer-wrap > .is-100 > .blog-page-wrap#mainBody, which the
 * vendored stylesheet matches directly -- so the override stopped doing
 * anything useful.
 *
 * It was not harmless, though. `#mainBody > .is-100` carries an ID, so at
 * (1,1,0) it outranked `.blog-roll-wrap { display: none }` at (0,1,0) and
 * forced the news page's hidden category sections visible: /news/ showed all
 * 18 category cards under the 3 "All" cards, where live shows only the 3.
 * Listing every article belongs on /news-views/all/, not the news landing page.
 */

/*
 * The vendored stylesheet gives every <a> inside .blog-template-wrap a
 * hover-triggered sliding underline bar via a ::before pseudo-element
 * (see .blog-template-wrap a:hover:before in main.20260603.css). That's
 * meant for inline text links in article copy, but the selector also
 * catches anchors that wrap a .proxima-button, showing the bar under the
 * button on hover. Suppress pseudo-element generation in that case so
 * buttons never pick up the text-link hover effect.
 */
.proxima-button-container a:before {
  content: none;
}

/*
 * Let images keep their aspect ratio now that they carry width/height.
 *
 * The Eleventy Image transform adds width= and height= to every <img> it
 * rewrites -- 14,884 of them. The vendored stylesheet sizes images with:
 *
 *     img, video { margin: 0 auto; width: 100%; }
 *
 * and never sets a height. With no height declared, the height ATTRIBUTE is
 * used as the height, so an image is stretched to its full intrinsic pixel
 * height at whatever width its container gives it. Budgeting-graphic.svg
 * (3237x1279) rendered 836x1309 instead of 836x360; on a phone it was
 * 315x1309 against live's 315x154, and article pages ran 42% longer.
 *
 * The old site had no width/height attributes at all, which is why the
 * stylesheet never needed this.
 *
 * height:auto restores ratio scaling, and because the attributes are still
 * present the browser can reserve the right box before the image loads --
 * so this also removes layout shift rather than trading it away.
 *
 * Deliberately low specificity (one element selector): rules that set a
 * real fixed height, e.g. `.article-card img { height: 200px }` for cropped
 * card thumbnails, still win. Only images with no height of their own are
 * affected.
 */
img {
  height: auto;
}