/* ============================================================
   Weber Advertising, /news/ 2026 redesign
   ------------------------------------------------------------
   Loaded by hand from header.php, on the line after
   inc/topscripts.php, so this is the LAST stylesheet on the page.
   It therefore needs no !important anywhere, and the old child
   style.css rules that did need it are now just late enough to
   work on their own.

   THE RULE THAT COMES WITH THAT POSITION: this file may set
   layout, spacing, type scale, radius and background. It must
   NEVER set a `color` that css/a11y.css owns, because it would
   silently win. That means no colour on:
       links, .wb-kicker, .wb-card-cta, .wb-card-tags,
       .wb-crumbs, .post-meta-info, muted meta
   Pull colour from the tokens (--wb-ink, --wb-muted,
   --wb-red-text, --wb-red-on-dark), never a literal hex.

   Most of the redesign is NOT in here. The page now opens a
   .wb-scope, so it inherits the 4530 rules in css/overhaul.css
   that were already loaded and inert. What is left is:
     1. a bridge from WordPress's bare editor markup onto the
        site's type tokens (the one real gap in the system)
     2. the news card
     3. small corrections to parent markup we still render
   ============================================================ */

/* ============================================================
   0. UNDO THE PARENT'S PAGE FURNITURE
   With #hb-wrap and #main-wrapper gone from the child header,
   most parent rules no longer match. These are the ones that
   still land because they key off classes we still emit.
   ============================================================ */
.wb-news #main-content,
.wb-news .hb-main-content,
.wb-news .container,
.wb-news .row.main-row {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  float: none;
}

/* The vestigial 75px date-badge gutter. It was unchanged at every
   width, so on a 390px phone it handed the text column 225px. */
.wb-news .post-inner { margin: 0; padding: 0; }

/* The parent floats blog articles and clears with pseudo-elements;
   inside a grid that just creates stray boxes. */
.wb-news article.post { float: none; width: auto; margin: 0; }

/* ============================================================
   1. .wb-prose--editor
   The one genuinely new component in this redesign.

   Every hand-built page on the main site authors its headings as
   .wb-h2 / .wb-h3, so the design system styles CLASSES. The
   WordPress editor emits BARE h2 / h3 / ul / blockquote, which
   nothing in overhaul.css matches. Before this file, a bare h2 in
   a post fell through to the parent theme's inline <style>
   (Playfair Display, 26px, weight normal) — which is the actual
   mechanism behind the inverted hierarchy the owner reported.

   Named as a modifier on the existing .wb-prose so it reads as
   part of the system rather than blog-only CSS.
   ============================================================ */

/* Reading measure. NOT .wb-prose's own 64ch: `ch` is the advance
   of the digit zero, and in Inter that is 1.28x the average
   lowercase character, so 64ch measures 82 characters at every
   size (verified in-browser at 16/17/18/19/20px). 82 is at the
   very top of the comfortable band. 38rem lands at ~69. */
.wb-news .wb-prose--editor {
  max-width: 38rem;
  margin-inline: auto;
  font-size: 1.125rem;     /* 18px: long-form, a step above the 17px site body */
  line-height: 1.72;
}

.wb-news .wb-prose--editor > * + * { margin-top: 1.15em; }

.wb-news .wb-prose--editor h2,
.wb-news .wb-prose--editor h3,
.wb-news .wb-prose--editor h4 {
  font-family: var(--wb-display);
  line-height: 1.14;
  letter-spacing: -.01em;
  margin-top: 2.1em;
  margin-bottom: .55em;
  /* A HEADING ALWAYS STARTS A FRESH BLOCK.
     An editor can drop an alignleft/alignright image anywhere, and the next
     heading then wraps around it. Measured on "Tuning In to Growth": the h2
     beside a 319px logo rendered as three short lines 109px tall, against 36px
     for every other h2 on the page, and the paragraph under it had a bite taken
     out of its top left. At 390 that float is 319px of a 390px screen, so the
     heading broke into the single letter "A", then the logo, then the rest of
     the title below it. Any post an editor builds this way would do it again. */
  clear: both;
}

/* The parent's colour map carries a bare `h1,h3,h5{color:#e50a2d}`, a stock
   HighendWP red that is not one of the three approved inks. At (0,0,1) it loses
   to almost anything, but nothing here was saying otherwise, so the find band's
   column headings and any h3 the heading renumberer produces inside a post body
   rendered off-brand. The same .wb-h3 on the main site renders --wb-ink, so this
   is a /news/-only drift. Scoped to light grounds so it can never repaint a
   heading on a dark band. */
.wb-news .wb-band--light :is(h3, h5, .wb-h3),
.wb-news .wb-band--air   :is(h3, h5, .wb-h3),
.wb-news .wb-prose--editor :is(h3, h5) { color: var(--wb-ink); }
.wb-news .wb-prose--editor h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); font-weight: 800; }
.wb-news .wb-prose--editor h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); font-weight: 700; }
.wb-news .wb-prose--editor h4 { font-size: 1.1rem; font-weight: 700; }
.wb-news .wb-prose--editor > h2:first-child,
.wb-news .wb-prose--editor > h3:first-child { margin-top: 0; }

.wb-news .wb-prose--editor p { font-size: inherit; line-height: inherit; }

/* The editor emits bare ul/ol. overhaul.css strips list padding
   inside .wb-scope, so without this the bullets sit outside the
   column. */
.wb-news .wb-prose--editor ul,
.wb-news .wb-prose--editor ol {
  padding-left: 1.35em;
  margin-block: 1.15em;
}
.wb-news .wb-prose--editor ul { list-style: disc; }
.wb-news .wb-prose--editor ol { list-style: decimal; }
.wb-news .wb-prose--editor li { margin-bottom: .45em; font-size: inherit; line-height: 1.62; }
.wb-news .wb-prose--editor li::marker { color: var(--wb-red); }

.wb-news .wb-prose--editor blockquote {
  margin: 1.9em 0;
  padding: .15em 0 .15em 1.3em;
  border-left: 3px solid var(--wb-red);
  font-size: 1.18em;
  line-height: 1.5;
  font-style: italic;
}
.wb-news .wb-prose--editor blockquote p:last-child { margin-bottom: 0; }

.wb-news .wb-prose--editor img,
.wb-news .wb-prose--editor .wp-block-image img {
  border-radius: var(--wb-radius);
  box-shadow: var(--wb-shadow-sm);
}
.wb-news .wb-prose--editor figure { margin-block: 1.9em; }
.wb-news .wb-prose--editor figcaption {
  margin-top: .7em;
  font-size: .92rem;
  color: var(--wb-muted);
  text-align: center;
}

.wb-news .wb-prose--editor hr {
  border: 0;
  border-top: 1px solid var(--wb-line);
  margin-block: 2.4em;
}

/* BLOCKS THAT ARE NOT PROSE BREAK OUT OF THE PROSE MEASURE.
   38rem is the right column for a paragraph and the wrong one for a
   side-by-side layout: "The Art Behind the Replicas" pairs an image with text
   in a columns block, and inside 608px that left the copy in a ~190px ribbon,
   about 22 characters a line. A columns block, a gallery, a table or an
   explicitly wide/full image is a FIGURE, not a sentence, so it gets the band
   width and re-centres itself against the prose column.

   margin-inline is the trick: the element is wider than its parent and pulls
   itself back by half the difference on each side, so it stays centred without
   needing a different wrapper in the markup. */
.wb-news .wb-prose--editor .wp-block-columns,
.wb-news .wb-prose--editor .wp-block-media-text,
.wb-news .wb-prose--editor .wp-block-gallery,
.wb-news .wb-prose--editor .wp-block-table,
.wb-news .wb-prose--editor .wp-block-embed,
.wb-news .wb-prose--editor .alignwide {
  width: min(58rem, calc(100vw - 2.5rem));
  max-width: none;
  margin-inline: calc(50% - min(29rem, calc(50vw - 1.25rem)));
  margin-block: 2.4em;
}
.wb-news .wb-prose--editor .alignfull {
  width: min(72rem, calc(100vw - 2.5rem));
  max-width: none;
  margin-inline: calc(50% - min(36rem, calc(50vw - 1.25rem)));
  margin-block: 2.4em;
}
/* Inside a widened columns block the copy is prose again, so give it a
   comfortable rhythm rather than the tight card-ish default. */
.wb-news .wb-prose--editor .wp-block-column { min-width: 0; }
.wb-news .wb-prose--editor .wp-block-column > * + * { margin-top: 1.1em; }

/* Media & Text. The parent theme's float/clear reset leaves WordPress's own
   grid half-applied, so state it. The media column is given a share rather
   than a fixed width so a portrait photo (this post pairs 768x1024 shots with
   copy) does not tower over its own paragraph. */
.wb-news .wb-prose--editor .wp-block-media-text {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.wb-news .wb-prose--editor .wp-block-media-text.has-media-on-the-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
}
.wb-news .wb-prose--editor .wp-block-media-text__media { margin: 0; grid-column: 1; }
.wb-news .wb-prose--editor .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { grid-column: 2; grid-row: 1; }
.wb-news .wb-prose--editor .wp-block-media-text__media img {
  width: 100%;
  height: auto;
  border-radius: var(--wb-radius);
  box-shadow: var(--wb-shadow-sm);
}
.wb-news .wb-prose--editor .wp-block-media-text__content { padding: 0; }
.wb-news .wb-prose--editor .wp-block-media-text__content > *:first-child { margin-top: 0; }


/* WordPress ships .is-stacked-on-mobile for exactly this; honour it. */
@media (max-width: 800px) {
  .wb-news .wb-prose--editor .wp-block-media-text.is-stacked-on-mobile,
  .wb-news .wb-prose--editor .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
    grid-template-columns: 1fr;
  }
  .wb-news .wb-prose--editor .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media,
  .wb-news .wb-prose--editor .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Below the breakout width there is nothing to break out of: stack. */
@media (max-width: 800px) {
  /* And nothing to flow around either. A 319px float in a 350px column is not
     a float, it is a full-width image that happens to shred the heading next to
     it. Centre it and let the copy run underneath. */
  .wb-news .wb-prose--editor .alignleft,
  .wb-news .wb-prose--editor .alignright {
    float: none;
    margin-inline: auto;
  }

  .wb-news .wb-prose--editor .wp-block-columns,
  .wb-news .wb-prose--editor .wp-block-gallery,
  .wb-news .wb-prose--editor .wp-block-table,
  .wb-news .wb-prose--editor .wp-block-embed,
  .wb-news .wb-prose--editor .alignwide,
  .wb-news .wb-prose--editor .alignfull {
    width: 100%;
    margin-inline: 0;
  }
}

/* Editor buttons. The block editor shipped its own default palette, so an
   author could pick any colour into any post: one live post carries
   .has-vivid-red-color, WordPress core's #cf2e2e, which measures 4.3:1 on the
   page canvas and fails AA. The palette itself is now restricted in PHP
   (inc/wb-news-setup.php), but posts written BEFORE that still carry the old
   classes, so the button is painted here too rather than trusting the markup.

   This is a colour a11y.css does not own, on a component the design system
   already has an answer for, so setting it here is the fix and not a breach of
   this file's own rule about inks. */
.wb-news .wb-prose--editor .wp-block-button__link {
  display: inline-block;
  padding: .85em 1.6em;
  border-radius: 999px;
  font-family: var(--wb-display);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  background: var(--wb-red);
  color: #fff;
  border: 0;
  box-shadow: var(--wb-shadow-sm);
}
.wb-news .wb-prose--editor .wp-block-button__link:hover,
.wb-news .wb-prose--editor .wp-block-button__link:focus-visible {
  background: var(--wb-red-dk);
  color: #fff;
}
/* Outline variant keeps a readable ink rather than the palette's. */
.wb-news .wb-prose--editor .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wb-red-text, #b81e24);
  border: 2px solid currentColor;
  box-shadow: none;
}

/* ============================================================
   2. THE HERO
   .wb-band--dark + .wb-bg-metal is the same hero /guides/ uses.
   Nav clearance is inherited from overhaul.css:547
   (.wb-scope > .wb-band:first-child) now that the page opens a
   real .wb-scope, so there is nothing to set here.
   ============================================================ */

/* The headline is a post title, not a marketing line, so it wants a
   tighter ceiling than --wb-h1's 4.5rem. Long titles are the norm
   here: measured median 80 characters, shortest 27, longest 170.
   PHP tags the step (inc/wb-news-hero.php); the sizes live here.

   max-width in `em` so the column scales WITH the step and each one
   holds a similar characters-per-line rather than the short headline
   getting a luxuriously short measure and the long one a wall.

   text-wrap:pretty, not balance: browsers stop balancing past about
   six lines, and the 170-character title needs more than that. */
.wb-news .wb-news-hero__title {
  line-height: 1.08;
  text-wrap: pretty;
  max-width: 18em;
}
.wb-news .wb-news-hero__title.is-len-a { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); }
.wb-news .wb-news-hero__title.is-len-b { font-size: clamp(2rem, 1.25rem + 2.2vw, 3.25rem); }
.wb-news .wb-news-hero__title.is-len-c { font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.5rem); }
.wb-news-hero .wb-lead { max-width: 46ch; }

/* TWO RAILS ON AN ARTICLE, NOT FOUR.
   Measured top to bottom on a post at 1440: breadcrumb, kicker, h1 and byline
   flush at x=130 (the full 1180 .wb-inner), then the lead photo at x=224 (62rem),
   then the reading column at x=416, then "More from the shop" back at x=130.
   Four left edges in about 1000px of scroll, none of them relating to each other,
   so the piece read as stacked slabs rather than one article.

   The hero now shares the lead photo's rail, so the headline and the image it
   introduces have ONE left edge and the 38rem text column centres inside that
   frame. Archive heroes keep the full width on purpose: what sits under them is
   the 1180-wide card grid, so 1180 is their correct rail. */
.single .wb-news-hero .wb-inner { max-width: 62rem; }

/* The band headings on a post must never outrank the article's own headline.
   The length step drops a long title to 40px while --wb-h2 held "More from the
   shop" and the closing ask at 47.2px, so the biggest type on the page belonged
   to the furniture. Ladder is now h1 (40.6) > band heading (35.8) > body
   heading (32) at 1440. */
.wb-news .wb-news-more__h,
.wb-news .wb-news-cta h2 { font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.25rem); }

/* Byline under a post headline. Colour comes from the token, not
   a hex, so a11y.css keeps ownership of the ink. */
.wb-news-meta {
  font-family: var(--wb-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--wb-red-on-dark, #ff8085);
}
/* Separated by a rule and space, not by a dimmed glyph. Same reason as
   .wb-news-list__page below: opacity on small text is how contrast quietly
   fails. */
.wb-news-meta__upd {
  margin-left: .9em;
  padding-left: .9em;
  border-left: 1px solid var(--wb-line-on-dark, rgba(255,255,255,.16));
}
/* A date is one object and must never break inside itself. At 390 the byline
   rendered "April 11, 2025 | Updated February 3," and dropped "2026" alone onto
   the next line, where the orphaned year reads for a beat as a different number
   and the dividing rule is left dangling at the end of line one. */
.wb-news-meta time { white-space: nowrap; }

/* ============================================================
   3. THE CARD GRID
   Container queries, not media queries. .wb-inner is 1180px at a
   1280px viewport but collapses to (viewport - 560px) once the
   "On this page" rail docks around 1300px, so a viewport query
   would render THREE cards narrower at 1440 than at 1024. Sizing
   off the container is correct either way, and stays correct if
   the rail behaviour ever changes.
   ============================================================ */
/* The container is the WRAPPER, not the grid. A container query styles
   DESCENDANTS of the container, never the container itself, so declaring
   container-type on .wb-news-grid and then querying .wb-news-grid silently
   matched nothing and the index shipped as one enormous column. */
.wb-news-grid-wrap { container-type: inline-size; }

.wb-news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wb-gap);
  align-items: stretch;
}
@container (min-width: 640px) {
  .wb-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 1000px) {
  .wb-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* No container-query support: fall back to viewport widths. */
@supports not (container-type: inline-size) {
  @media (min-width: 700px) { .wb-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1080px) { .wb-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}

.wb-news-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

/* 3:2 is the modal native ratio in the corpus: seven of twenty
   images sit within 1.5% of 1.500 and crop to nothing. The rest
   crop, because seventeen distinct ratios across a 4x range
   (0.750 portrait to 3.001 letterbox) leave no ratio that suits
   everything. Per-post nudges go in section 3b. */
.wb-news-card__media {
  display: block;
  position: relative;      /* the image fills this absolutely, see below */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--wb-canvas);
}
/* ABSOLUTE FILL, not height:100%.
   Two separate reasons, both seen on this page:
   1. overhaul.css has `.wb-scope img { height:auto }` at (0,1,1), so the
      selector has to out-specify it. `.wb-news .wb-news-card__img` is (0,2,0).
   2. Even winning that, `height:100%` resolves against the PARENT's height, and
      a box sized only by `aspect-ratio` is not always a definite height to
      resolve against, so it can compute to auto. That is what left the related
      cards' lazy images sitting 181px tall inside a 248px box, while the
      already-loaded ones happened to fill.
   inset:0 on an absolutely positioned image depends on nothing: it fills
   whatever the box turns out to be, loaded or not. */
.wb-news .wb-news-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.wb-news .wb-news-card__img--none {
  background:
    linear-gradient(135deg, rgba(216,35,42,.10), rgba(31,34,38,.12)),
    var(--wb-canvas);
}
.wb-news-card:hover .wb-news-card__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .wb-news-card__img { transition: none; }
  .wb-news-card:hover .wb-news-card__img { transform: none; }
}

.wb-news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .55rem;
  padding: clamp(1.1rem, .8rem + .8vw, 1.5rem);
}

.wb-news-card__deck {
  font-family: var(--wb-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wb-muted);
}
.wb-news-card__sep { margin: 0 .45em; }

/* Flat 18px, NOT --wb-h3. That token's 1.6rem ceiling was scaled
   for a 1180px prose column; in a ~310px card track it produces a
   title that runs to fifteen lines. Four lines of clamp truncates
   exactly one of the twenty posts, and that one is a content
   defect (its title is the post's whole first sentence). */
.wb-news-card__title {
  font-family: var(--wb-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--wb-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wb-news-card__cta {
  margin-top: auto;
  padding-top: .35rem;
  font-family: var(--wb-display);
  font-size: .92rem;
  font-weight: 600;
}
.wb-news-card__cta i { margin-left: .4em; transition: transform .25s ease; }
.wb-news-card:hover .wb-news-card__cta i { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .wb-news-card__cta i { transition: none; }
  .wb-news-card:hover .wb-news-card__cta i { transform: none; }
}

/* 3b. Per-post crop nudges.
   Four images lose more than a third of themselves to a centre
   crop at 3:2. Keyed off the post-<id> class that post_class()
   already prints, so this needs no custom field and no editor
   training. IDs read from the REST API on 2026-09-11, not guessed.
   Add a line here if a future post crops badly.

     255  "Fans of History's Vikings"   portrait  1200x1600 (0.75)
     188  "Bike Challenge"              letterbox 2560x853  (3.00)
     266  "WAM FAM FRIDAY: Steph Kline" letterbox 2560x1131 (2.26)
     227  "Turning Windows Into..."     square    1601x1601 (1.00)

   Values are a starting point from the source dimensions; the
   design-iteration pass re-checks them against the rendered crop. */
.wb-news-card.post-255 .wb-news-card__img { object-position: center 25%; }
.wb-news-card.post-188 .wb-news-card__img { object-position: center 50%; }
.wb-news-card.post-266 .wb-news-card__img { object-position: center 40%; }
.wb-news-card.post-227 .wb-news-card__img { object-position: center 30%; }

/* ============================================================
   4. ARCHIVE FURNITURE
   ============================================================ */
.wb-news-list__count {
  font-family: var(--wb-display);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wb-muted);
}
/* NO opacity here. Dimming already-muted text is the banned pattern in the
   a11y program, and it bites exactly as advertised: --wb-muted (#5c636c) at
   opacity .75 over the canvas composites to #7f858d and measures 3.11:1.
   If it needs to recede, use a smaller size or more space, never opacity. */
.wb-news-list__page { margin-left: .4em; }

/* The parent theme drops a box-shadow on a bare <nav>, which painted a 1180px
   wide grey slab behind the pager. */
.wb-news-pager { box-shadow: none; background: none; border: 0; }

/* paginate_links(type:'list') puts class="page-numbers" on the <ul> AND on every
   link inside it. A rule written as `.wb-news-pager .page-numbers` therefore
   pills the LIST as well, which is where the stray white oval behind the buttons
   came from. Style the links by element, and reset the list. */
.wb-news-pager ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.wb-news-pager li { margin: 0; }

.wb-news-pager a.page-numbers,
.wb-news-pager span.page-numbers {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  /* 44px on both axes: WCAG 2.5.8 asks for 24, the site's own standard is a
     comfortable thumb target. */
  min-width: 44px;
  min-height: 44px;
  padding: 0 .9em;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--wb-line);
  background: #fff;
  font-family: var(--wb-display);
  font-weight: 600;
  font-size: .95rem;
}
.wb-news-pager a.page-numbers:hover { border-color: var(--wb-red); }
.wb-news-pager span.page-numbers.current {
  background: var(--wb-red);
  border-color: var(--wb-red);
  color: #fff;
}
.wb-news-pager .page-numbers.dots {
  border-color: transparent;
  background: none;
  min-width: 1.5rem;
  padding: 0;
}

/* ============================================================
   5. THE ARTICLE
   ============================================================ */
.wb-news-article { max-width: none; }

/* THE ARTICLE'S SIDE GUTTER.
   The post is the one view here with no .wb-band around it, so it never picked
   up the band's own 1.25rem inset, and section 0 above had already zeroed the
   Bootstrap .container padding that was accidentally standing in for it. Result
   at 390: every paragraph, heading, list and image ran x=0 to x=390 with letters
   touching both edges of the glass, while the hero above (x=20) and the cards
   below (x=20) were correctly inset, and the media-text blocks inside the same
   column were inset too because their breakout math derives from 100vw. The
   reading-measure check could not see it: 46 characters a line passes precisely
   BECAUSE the column is full bleed.

   Same value as .wb-band, so the article lines up with everything around it.
   Verified at three widths: 1440 unchanged (prose 416..1024, figure 224..1216),
   390 -> 20..370, 320 -> 20..300, no horizontal overflow introduced. */
.wb-news .wb-news-article { padding-inline: 1.25rem; }

/* The figure LIFTS INTO the dark hero instead of butting against it. Sitting
   flush, it read as two unrelated slabs meeting at a hard line; overlapping ties
   the article to its own headline and gives the hero's bottom edge something to
   do. The negative margin is a clamp so the overlap scales rather than swallowing
   the hero on a phone. */
.wb-news-article__media {
  max-width: 62rem;
  margin: calc(-1 * clamp(2rem, 1.2rem + 4vw, 6rem)) auto clamp(2rem, 1.4rem + 2vw, 3.2rem);
  position: relative;
  z-index: 1;
}

/* HEIGHT CAP, WITHOUT CROPPING (owner, 2026-09-11).
   The corpus runs from a 3.00 letterbox to a 0.75 portrait, and at full width an
   uncapped portrait renders well over 1000px tall, so the first sentence of the
   article lands below the fold behind a wall of photograph.

   The cap is enforced by SCALING, not by object-fit:cover. Roughly half these
   featured images are framed artwork or designed graphics with type baked in, so
   a crop takes a slice out of the subject, and there is no object-position that
   is right for all of them.

   width:auto + height:auto + max-width:100% + max-height means the browser fits
   the image inside BOTH limits and keeps its aspect ratio, so a tall image gets
   narrower rather than cropped. margin-inline:auto then centres it, and the
   figure is a flex column so the shadow and radius hug the image itself rather
   than a full-width box with empty sides. */
.wb-news-article__media { display: flex; flex-direction: column; align-items: center; }
.wb-news .wb-news-article__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(300px, 52vh, 560px);
  margin-inline: auto;
  object-fit: fill;   /* nothing to fit: the box IS the image's own size */
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow);
}

.wb-news-tags {
  max-width: 38rem;
  margin: clamp(2.2rem, 1.6rem + 2vw, 3.4rem) auto 0;
  font-size: .95rem;
}
.wb-news-tags__label {
  font-family: var(--wb-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
  color: var(--wb-muted);
  margin-right: .5em;
}

.wb-news-pagelinks {
  max-width: 38rem;
  margin: 2.4rem auto 0;
  font-family: var(--wb-display);
  font-weight: 600;
}
.wb-news-pagelinks span { margin-right: .5em; }

/* Related posts, still rendered by the parent on
   highend_after_single_content. The heading levels are corrected in
   PHP (inc/wb-news-setup.php); this is the visual side. */
.wb-news .hb-related-posts {
  max-width: var(--wb-maxw);
  margin: clamp(3rem, 2rem + 3vw, 5rem) auto 0;
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--wb-line);
}
.wb-news .hb-related-posts > h2 {
  font-family: var(--wb-display);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
}
.wb-news .hb-related-posts .row { display: grid; grid-template-columns: 1fr; gap: var(--wb-gap); }
@media (min-width: 720px) {
  .wb-news .hb-related-posts .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wb-news .hb-related-posts .related-item { width: auto; float: none; padding: 0; }
.wb-news .hb-related-posts .related-item img { width: 100%; height: auto; border-radius: var(--wb-radius); display: block; }
.wb-news .hb-related-posts h3 {
  font-family: var(--wb-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: .75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   6. FIND-IT BAND (what the sidebar used to hold)
   ============================================================ */
.wb-news-find__h { text-align: center; }

/* Only the band heading is centred. The columns under it were inheriting that
   centring, which is what made the month list look like it was drifting: the
   year rows are a bordered block and read as left-aligned, while the months
   inside them floated to the middle of the column. Everything in a column
   aligns left; the heading above keeps its centre. */
.wb-news-find__col { text-align: left; }
.wb-news-find__col > .wb-h3 { margin-bottom: .2em; text-align: left; }

/* ONE control, not a field with a button parked next to it. The row is the
   rounded pill; the input and the button sit inside it with no border of their
   own, and the row itself takes the focus ring so tabbing to the field lights
   up the whole control. */
.wb-news-search__row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  max-width: 30rem;
}
.wb-news-search__row:focus-within {
  border-color: var(--wb-red);
  box-shadow: 0 0 0 3px rgba(216, 35, 42, .18);
}
/* The field carries no border or ring of its own; the row owns both, so the two
   halves read as one control. -webkit-appearance because a type="search" input
   otherwise keeps its own rounding and inner clear button on Safari. */
.wb-news-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 50px;
  padding: 0 .4rem 0 1.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--wb-ink-2);
  -webkit-appearance: none;
  appearance: none;
}
.wb-news-search__input:focus { outline: none; }
.wb-news-search__input::-webkit-search-decoration,
.wb-news-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Placeholder ink. The parent theme sets
   `input[type="date"],input[type="email"],...,input[type="search"],…{color:#777}`
   at (0,1,1), which beats a bare `.wb-news-search__input` at (0,1,0) and is
   inherited by the placeholder: axe measured 4.47:1 on white, missing AA by
   0.03. So the selectors below are (0,2,1), and the webkit alias is spelled out
   because the parent sets that pseudo too. --wb-muted is #5c636c, 6.08:1.

   Not a colour a11y.css owns; it has no placeholder rule at all. */
.wb-news input.wb-news-search__input { color: var(--wb-ink-2); }
.wb-news input.wb-news-search__input::placeholder { color: var(--wb-muted); opacity: 1; }
.wb-news input.wb-news-search__input::-webkit-input-placeholder { color: var(--wb-muted); opacity: 1; }
.wb-news input.wb-news-search__input::-moz-placeholder { color: var(--wb-muted); opacity: 1; }
/* Butts against the field, filling the right end of the pill. Not .wb-btn: that
   carries its own radius and shadow, which would put a second rounded shape
   inside the rounded row. */
.wb-news-search__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 50px;
  padding: 0 1.4rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--wb-red);
  color: #fff;
  font-family: var(--wb-display);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
}
.wb-news-search__go:hover { background: var(--wb-red-dk); color: #fff; }
/* The row paints the focus ring, but a keyboard user tabbing from the field to
   the button needs to see the focus MOVE, so the button marks itself too. */
.wb-news-search__go:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

.wb-news-topics { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wb-news-topics li { margin: 0; }
.wb-news-topics a {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 40px;
  padding: 0 .55rem 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--wb-line);
  background: #fff;
  font-family: var(--wb-display);
  font-size: .92rem;
  font-weight: 600;
}
.wb-news-topics a:hover { border-color: var(--wb-red); }
.wb-news-topics a.is-current { border-color: var(--wb-red); background: #fff; }

/* The count as a badge INSIDE the pill. wp_list_categories() prints it as a
   bare text node after the closing </a>, which left the number floating beside
   the chip; the list is built by hand so it can live in here.
   Ink is the body ink on a light grey chip, not muted-on-white, so a small
   badge still clears AA comfortably. */
.wb-news-topics__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 .45em;
  border-radius: 999px;
  background: var(--wb-canvas);
  color: var(--wb-ink-2);
  font-size: .8em;
  font-weight: 700;
  line-height: 1;
}
.wb-news-topics a:hover .wb-news-topics__n,
.wb-news-topics a.is-current .wb-news-topics__n {
  background: var(--wb-red);
  color: #fff;
}

.wb-news-years { border-bottom: 1px solid var(--wb-line); }
.wb-news-years__y {
  cursor: pointer;
  padding: .85rem 0;
  font-family: var(--wb-display);
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;
  text-align: left;
}
/* The year's own count sits hard right, so it lines up with the month counts
   below it and the whole column reads as one table. */
.wb-news-years__y > .wb-news-years__n { margin-left: auto; }
.wb-news-years__y::-webkit-details-marker { display: none; }
.wb-news-years__y::before {
  content: "";
  width: .5em; height: .5em;
  border-right: 2px solid var(--wb-red);
  border-bottom: 2px solid var(--wb-red);
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.wb-news-years[open] > .wb-news-years__y::before { transform: rotate(45deg); }
/* Months line up under the year's LABEL, not under the chevron, and each row
   is a full-width link with its count pushed to the right edge so the numbers
   form a column instead of trailing each month name at a ragged position.
   align-items:flex-start stops the flex column stretching every link to the
   full width of the widest one and then centring its text. */
.wb-news-years__m {
  list-style: none;
  margin: 0;
  padding: 0 0 .7rem 1.55em;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .1rem;
}
.wb-news-years__m li { margin: 0; }
.wb-news-years__m a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: 36px;
  padding-right: .2em;
  text-align: left;
}
.wb-news-years__n {
  font-size: .82em;
  color: var(--wb-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .wb-news-years__y::before { transition: none; }
}

/* ============================================================
   7. SMALL SCREENS
   ============================================================ */
@media (max-width: 640px) {
  .wb-news-hero__title { max-width: none; }
  .wb-news .wb-prose--editor { font-size: 1.0625rem; line-height: 1.68; }
  .wb-news-article__media { border-radius: var(--wb-radius); }
}