/* ==========================================================================
   In the Media — /in-the-media/   (2026-08-04)

   Replaces the Royal Elementor "wpr-grid" widget that ran this page since 2024
   (black/gold design language, same as Past Events). The old page is kept
   verbatim at /in-the-media-legacy/ — nothing was thrown away.

   The old widget rendered 9 posts and put the rest behind a Load More button,
   while its outlet filters ran client-side over the *loaded* cards only. Click
   "MingPao" before loading more and you got an empty page, though the post has
   been up since 2024. That is why this is a rebuild rather than a restyle:
   every post is fetched up front, so a filter always tells the truth.

   Layout borrows Past Events — filter rail left, body over a 4:3 image, View
   More — but NOT its year sections: see the note above .itm-count. Tokens
   mirror events-hub.css / frontpage.css so the set stays in step; --itm-gold
   is frontpage's --fp-gold.

   Scope `.itm` + `!important` throughout — Phlox ships 69+ stylesheets.
   ========================================================================== */

.itm-band,
.itm {
  --itm-gold:      #B89642;
  --itm-ink:       #14171F;
  --itm-ink-soft:  #4A4E58;
  --itm-mute:      #8A8F99;
  --itm-bg:        #EFEFEF;
  --itm-card:      #FFFFFF;
  --itm-line:      #D8D8D8;
  --itm-ease:      cubic-bezier(.22,.9,.3,1);
}

.itm {
  display: block !important;
  position: relative !important;
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--itm-ink) !important;
  padding-bottom: 90px !important;
}

/* The page sits on light grey. Bleed it to the viewport edges the same way the
   band does, or the 1440px shell leaves white strips either side. */
.itm::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  top: 0 !important;
  bottom: 0 !important;
  background: var(--itm-bg) !important;
  z-index: -1 !important;
}

/* ==========================================================================
   Title band — authored in the page content, not built by the JS

   Server-rendered on purpose: it is the page's title, and a title that pops in
   after a fetch reads as a layout bug. The usual warning about server-rendered
   markup styled from data-fetch-css (WEB_WORKFLOW.md) is about markup that
   MISBEHAVES unstyled — full-size images bursting the viewport. Unstyled this
   band degrades to a plain heading on white, which is survivable.
   ========================================================================== */
.itm-band {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  background: #000 !important;
  color: #fff !important;
}
/* Title only — no standfirst. Past Events sets its band the same way, and a
   paragraph of explanation opposite the title is the thing Chase has now cut
   twice (Recruitment, then here). The list underneath says what the page is. */
.itm-band__inner {
  max-width: var(--esgri-measure) !important;
  margin: 0 auto !important;
  padding: 64px 0 60px !important;
}
.itm-band__title {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(34px, 3.4vw, 52px) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
}

/* ==========================================================================
   Layout — filter rail + main column
   ========================================================================== */
/* 🚨 16vw, not the 200px this file used to pin. archive.css's own note asks
   for it: "The RAILS still disagree: 16vw here against events-hub's and
   in-the-media's fixed 200px … Keep these three files in step; they are meant
   to read as one layout." A fixed rail does not shrink with the page, so it
   ate 19% of a 1440 window and 14% of a 1920 one and the cards came out a
   different width on every page. Same two numbers as archive.css, voices.css
   and insights.css; change one, change all. */
.itm-layout {
  display: grid !important;
  grid-template-columns: 16vw minmax(0, 1fr) !important;
  gap: 0 6vw !important;
  padding-top: 54px !important;
}
.itm-rail { position: relative !important; }
.itm-rail__sticky { position: sticky !important; top: 130px !important; }

/* ---- Section switcher. /press/ and /in-the-media/ are the two halves of the
   Media menu: what we said, and what other people said. Same device as the
   Upcoming/Past switcher on the events pages. ---- */
.itm-switch { display: block !important; margin-bottom: 22px !important; }
.itm-switch__link {
  /* nav labels never break mid-word — "e-Newsletter" split after the hyphen
     on a narrow phone. Whole items still wrap to the next line. */
  white-space: nowrap !important;
  display: block !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--itm-mute) !important;
  padding: 5px 0 !important;
  transition: color .2s var(--itm-ease) !important;
}
.itm-switch__link:hover { color: var(--itm-gold) !important; }
/* 🚨 The gold rule left of the active item is GONE (Chase, 2026-08-11 sheet:
     "Remove the short line left of the active item"). The active state is now
     carried by colour and weight alone. `padding-left` went with it — kept
     without the border it would indent the active item 9px out of line with
     its siblings, which reads as a bug rather than a state. Same removal in
     events-hub.css, in-the-media.css and archive.css; those three are the only
     rails with a switcher. */
.itm-switch__link.is-active {
  color: var(--itm-ink) !important;
  font-weight: 700 !important;
}

.itm-search { position: relative !important; margin-bottom: 26px !important; }
.itm-search__input {
  width: 100% !important;
  height: 34px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 1px solid #B7B7B7 !important;
  border-radius: 0 !important;
  padding: 0 30px 0 10px !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--itm-ink) !important;
  outline: none !important;
}
.itm-search__input::placeholder { color: #9A9A9A !important; }
.itm-search__input:focus { border-color: var(--itm-gold) !important; }
.itm-search__icon {
  position: absolute !important;
  right: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 13px !important;
  height: 13px !important;
  pointer-events: none !important;
  opacity: .6 !important;
}

.itm-fgroup { margin-bottom: 18px !important; }
.itm-fgroup + .itm-fgroup {
  border-top: 1px solid var(--itm-line) !important;
  padding-top: 16px !important;
}
.itm-fgroup__label {
  display: block !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--itm-mute) !important;
  margin: 0 0 6px !important;
}

/* Outlet names are long ("Hong Kong Economic Journal"), so unlike the events
   rail these stack one per line instead of running as a middot-separated
   sentence — set inline they wrap mid-name and the separators stop reading as
   separators. Year, being four digits, keeps the inline treatment. */
.itm-fgroup__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.itm-fgroup--inline .itm-fgroup__list { font-size: 0 !important; }
.itm-fitem { display: block !important; margin: 0 !important; padding: 0 !important; }
/* 🚨 inline-BLOCK, not inline. A transform has no effect on an inline box, and
   the rail's FLIP moves these with `translate` when a filter takes terms out of
   the row (Chase, 2026-08-27: "变换的过程可否平滑一些"). Laid out identically —
   they still flow in a line and .itm-fitem already sets white-space: nowrap. */
.itm-fgroup--inline .itm-fitem { display: inline-block !important; }

.itm-fbtn {
  display: block !important;
  text-align: left !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--itm-ink-soft) !important;
  cursor: pointer !important;
  transition: color .2s var(--itm-ease) !important;
}
.itm-fgroup--inline .itm-fbtn { display: inline !important; line-height: 1.9 !important; }
.itm-fbtn:hover { color: var(--itm-gold) !important; }
.itm-fbtn:focus-visible { outline: 2px solid var(--itm-gold) !important; outline-offset: 2px !important; }
.itm-fbtn[aria-pressed="true"] { color: var(--itm-gold) !important; font-weight: 700 !important; }

/* Touch. 2026-08-14: the filter terms are 13px text with zero padding, so their
   hit area was 23px tall on a phone — under every tap-target guideline there is.
   5px above and below takes them to 33 without touching the type, the colour or
   the rail's shape; the terms sit in wrapped rows 80px apart, so nothing moves
   except the rail growing ~30px. Not the 44px Apple asks for: that would make a
   compact term list into a menu, which is a design decision, not a repair. */
@media (max-width: 767px) {
  .itm-fbtn { padding: 5px 0 !important; }
}
/* A term with nothing left under the other filters DISAPPEARS (Chase,
   2026-08-27: "他们想要改成直接消失"). It used to be dimmed to #C2C2C2 so the
   rail kept a stable shape while you narrowed down; the ask is the opposite —
   only what you can still click should be on screen.

   🚨 THESE THREE [hidden] RULES ARE LOad-BEARING. The JS marks the <li>, the
   trailing separator and an emptied group with `hidden`, and `hidden` alone
   does nothing here: the rules above declare `.itm-fitem { display: block
   !important }` and `.itm-fgroup--inline .itm-fsep { display: inline
   !important }`, and an !important declaration beats the UA stylesheet's
   `[hidden] { display: none }`. Delete one of these and that piece comes back
   while the JS still thinks it is gone.

   The [disabled] colour stays for the moment between a filter changing and the
   JS running, and because a disabled control should not look live if it is ever
   shown again. */
.itm-fbtn[disabled] { color: #C2C2C2 !important; cursor: default !important; pointer-events: none !important; }

/* The JS emits a separator between every pair of terms in every group. In a
   stacked group the line break already separates them, so it is hidden rather
   than not written — mobile turns the same group inline and needs it back. */
.itm-fsep {
  display: none !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
  color: #B4B4B4 !important;
  padding: 0 6px !important;
}
.itm-fgroup--inline .itm-fsep { display: inline !important; }

/* 🚨 THESE THREE MUST STAY BELOW `.itm-fgroup--inline .itm-fsep` — SOURCE ORDER
   IS DOING THE WORK, NOT SPECIFICITY. `.itm-fsep[hidden]` is one class plus one
   attribute, (0,2,0); `.itm-fgroup--inline .itm-fsep` is two classes, also
   (0,2,0). Equal weight, both !important, so whichever is written last wins.
   Placed above it — which is where they went first — the separator on the last
   surviving term kept its `display: inline` even with `hidden` set on it, and
   the Year row ended on a dangling middot. Verified in the live DOM: the JS was
   setting the attribute correctly the whole time.

   The JS marks the <li>, the trailing separator and an emptied group with
   `hidden` when a term has nothing left under the other filters; these rules are
   what make that visible. See the note in in-the-media.js. */
.itm-fitem[hidden] { display: none !important; }
.itm-fsep[hidden] { display: none !important; }
.itm-fgroup[hidden] { display: none !important; }

.itm-reset {
  display: inline-block !important;
  margin-top: 14px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--itm-mute) !important;
  cursor: pointer !important;
  text-decoration: underline !important;
}
.itm-reset:hover { color: var(--itm-gold) !important; }
.itm-reset[hidden] { display: none !important; }

/* ==========================================================================
   List

   One flat run of cards, newest first. The archive was briefly cut into year
   sections (as Past Events is) and that was wrong for this content: a year of
   events is a season with a shape, a year of press coverage is just a bucket,
   and the headings broke the list into rows of two and three for no gain.
   Year survives as a rail facet for anyone who wants it.
   ========================================================================== */
/* 🚨 THE COUNT LINE IS HIDDEN, NOT DELETED (Chase, 2026-08-27: "columns页面
   里面30ITEMS和下面的横线请你去掉，所有的页面上面都不要有这个"). The rule under
   it was this element's own border-bottom, so hiding the element takes both.

   The node stays in the DOM because the scripts still write to it — `.itm-count`
   is set on every filter change and toggled with `hidden` when a filter empties
   the list. Deleting the markup instead would mean editing three scripts to
   remove a variable each of them uses in several places, for no visible gain.
   If it is ever wanted back, drop this one declaration. */
.itm-count {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--itm-mute) !important;
  margin: 0 0 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--itm-line) !important;
  display: none !important;
}
.itm-count[hidden] { display: none !important; }

/* ==========================================================================
   Grid and card — NOT DEFINED HERE. THEY COME FROM archive.css.
   ==========================================================================
   Chase, 2026-08-21: "columns和in the media的样式和perspectives统一". The two
   families' cards were already the same drawing built twice — same stacked
   body-over-image, same bordered pill, same gold split date — and the twins
   had drifted: 4/3 media against 3/2, a fixed 16px title against a fluid
   clamp, a 15px month against 13px. Rather than copy archive.css's numbers
   across a third time, in-the-media.js now EMITS THE arc-* CLASS NAMES and
   the page fetches archive.css alongside this file. There is one card rule
   set on the site; change it there and both families move together.

   🚨 Both stylesheets must stay on the page's data-fetch-css list. This file
   alone leaves the cards unstyled — see columns-page.html.

   What is still ours: the byline below (Perspectives has no author to print),
   the [hidden] scoping directly below, and everything outside the card. */

/* 🚨 archive.css scopes its own hide rule as `.arc .arc-item[hidden]`, and our
   wrapper is `.itm`, not `.arc` — so that rule cannot match here and every
   filtered-out card would stay on screen. Same specificity trap the deleted
   `.itm .itm-item[hidden]` rule carried: `[hidden]` alone is (0,1,1) and
   loses to `.arc-item { display: flex }`. Keep this under (0,2,1). */
.itm .arc-item[hidden] { display: none !important; }

/* archive.css's card rules are written against --arc-*. Those variables live
   on `.arc` / `.arc-band`, which this page does not have, so they are aliased
   onto our wrapper. Aliases, not copies: the two palettes have always held the
   same seven literals, and pointing at ours keeps it that way. */
.itm {
  --arc-gold:     var(--itm-gold);
  --arc-ink:      var(--itm-ink);
  --arc-ink-soft: var(--itm-ink-soft);
  --arc-mute:     var(--itm-mute);
  --arc-bg:       var(--itm-bg);
  --arc-card:     var(--itm-card);
  --arc-line:     var(--itm-line);
  --arc-ease:     var(--itm-ease);
}

/* One reserved line either way, for the same reason ev-when gets one on Past.
   The only piece of card content this family has and Perspectives does not —
   a column is written BY somebody, and the rail offers Author as a facet, so
   the name is on the card. `.arc-title` carries no bottom margin, hence the
   8px here rather than on the title. */
.itm-by {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--itm-mute) !important;
  margin: 8px 0 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  overflow: hidden !important;
  min-height: 1.65em !important;
}

/* ---- View More, per year ---- */
.itm-more {
  display: block !important;
  width: 300px !important;
  max-width: 100% !important;
  margin: 26px auto 0 !important;
  background: var(--itm-ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 13px 20px !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .25s var(--itm-ease) !important;
}
.itm-more:hover { background: var(--itm-gold) !important; }
.itm-more:focus-visible { outline: 2px solid var(--itm-gold) !important; outline-offset: 3px !important; }
.itm-more[hidden] { display: none !important; }

/* ==========================================================================
   States
   ========================================================================== */
.itm-noresult {
  font-size: 14px !important;
  color: var(--itm-ink-soft) !important;
  margin: 40px 0 !important;
}
.itm-noresult[hidden] { display: none !important; }

.itm-status {
  padding: 70px 0 90px !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: var(--itm-ink-soft) !important;
}
.itm-status a { color: var(--itm-gold) !important; text-decoration: underline !important; }

/* ==========================================================================
   Entrance
   🚨 The hidden state lives in `from {}`, never in a base rule. Shipping
   `.itm-anim { opacity: 0 !important }` + a keyframe that fades in renders
   every card invisible: `!important` inside @keyframes is invalid and dropped,
   and an !important author declaration outranks animations anyway. With
   `backwards` fill, a dropped rule or an old browser degrades to plain visible
   content instead of a blank page. (Cost real time on events-hub.)
   ========================================================================== */
@keyframes itm-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.itm-anim {
  animation: itm-in .5s var(--itm-ease) both !important;
  animation-fill-mode: backwards !important;
}

/* A rail term coming back. Shorter and with no travel: it is 13px of text
   inside a list that is already sliding under it, and 10px of lift on top of
   that read as two things moving at once. Same `from {}` discipline as above —
   the hidden state never goes in a base rule. */
@keyframes itm-fin {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.itm-fitem--in { animation: itm-fin .28s var(--itm-ease) both !important; }

@media (prefers-reduced-motion: reduce) {
  .itm-fitem--in { animation: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  /* Pinned from here down, and to archive.css's pair — below 1024 the
     proportional rail would fall under 164px, narrower than the longest facet
     label. The grid drops to two columns in archive.css, not here. */
  .itm-layout { grid-template-columns: 160px minmax(0, 1fr) !important; gap: 0 36px !important; }
  .itm-band__inner { padding: 48px 16px 44px !important; }
}

@media (max-width: 767px) {
  /* Rail moves above the list; sticky is dropped so it doesn't eat the screen. */
  /* 🚨 minmax(0, 1fr), NOT 1fr — this is what "can't pull" was.

     `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` floor is the
     item's MIN-CONTENT width. The rail's filter buttons are white-space: nowrap
     ("HONG KONG ECONOMIC JOURNAL" alone is 248px), so the track refused to
     shrink and resolved to 1137.64px inside a 361px column. #inner-body carries
     overflow-x: hidden, so the page did not gain a scrollbar — it just SILENTLY
     CUT the rail at the screen edge, which is why Rick logged it on ~20 devices
     as "Can't show all seraching criteria (can't pull)": there was nothing to
     pull, the content was clipped, not scrolled.

     minmax(0, …) removes the floor so the track can shrink, and min-width: 0 on
     the children stops the same blowout one level down. Measured after: rail
     1138px -> 361px, #inner-body clipping 761px -> 0.

     ⚠️ The desktop rule already had this right — `168px minmax(0, 1fr)`. Only
     the single-column mobile rule was written as a bare 1fr. If a third
     breakpoint is ever added, carry the minmax. */
  .itm-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 26px 0 !important; padding-top: 30px !important; }
  .itm-layout > *, .itm-rail, .itm-rail__sticky { min-width: 0 !important; }
  .itm-rail__sticky { position: static !important; }
  .itm-rail { padding-bottom: 22px !important; border-bottom: 1px solid var(--itm-line) !important; }
    /* 🚨 wrap, and it is not cosmetic. The four labels measure 302px of text;
       with three 18px gaps they need 356 and a 390px phone offers 358 — two
       pixels of slack. At 375 (iPhone SE / mini), 360 or 320 the last link
       runs past the right edge and #inner-body's overflow-x:hidden CUTS it,
       so "Voices" simply is not there and nothing scrolls to reveal it —
       the same failure Rick logged across ~20 devices as "can't pull".
       Measured clipped at 375 / 360 / 320 before this line was added. */
  .itm-switch { display: flex !important; flex-wrap: wrap !important; gap: 6px 18px !important; }
  .itm-switch__link.is-active { border-left: 0 !important; padding-left: 0 !important; border-bottom: 2px solid var(--itm-gold) !important; }

  .itm-band__inner { padding: 36px 16px 32px !important; }

  .itm-more { width: 100% !important; }
  /* Outlets go back to a single run here — the rail is a horizontal strip on
     mobile and a stacked list would be a very long one. */
  .itm-fgroup__list { font-size: 0 !important; }
  .itm-fitem { display: inline !important; }
  .itm-fbtn { display: inline !important; }
  .itm-fsep { display: inline !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* The card's own transitions are switched off in archive.css. */
  .itm-anim { animation: none !important; }
}

/* ==========================================================================
   Page width — 1440, not the site-wide 1140            (2026-08-04, Chase)
   ==========================================================================
   `.esgri-pageshell` is 1140px in tools/esgri-page-shell.css, which is enqueued
   site-wide and also carries pages that are NOT on this design language
   (/global-affiliates/, /affiliated_researchers/, /insights/, /reports/). Those
   were deliberately left at 1140, so the wider measure is set HERE rather than
   in the shared sheet: this stylesheet only ever loads on its own page, so the
   override cannot leak. Raise the five new-language pages together or they
   stop matching each other.

   `!important` is doing real work: the shared sheet is server-enqueued into
   <head>, this one is injected by the loader afterwards, so it already wins on
   order — but the shared rule is plain and this must survive if that ever
   changes. */
/* ==========================================================================
   Page measure — 72vw, proportional        (Chase, 2026-08-07)
   ==========================================================================
   Was a fixed 1440. The front page has never had a fixed measure: `.fp-page`
   in frontpage.css is `width: 100vw` with `padding: 0 14vw`, so its body is
   **72vw** and grows with the window. Bunny asked why /voices/ was so much
   wider than the front page; a fixed measure and a proportional one only agree
   at one window width, and Chase's call is that the whole site goes
   proportional rather than the front page going fixed.

   What that actually changes, measured:

       window   72vw    the old fixed 1440
        3440    2477         1440
        2560    1843         1440
        1920    1382         1440
        1600    1152         1440
        1440    1037         1370
        1280     922         1210

   ⚠️ The two behaviours CROSS AT ~1920. Above it the page gets wider than it
   used to be; below it, narrower — on a 1440 laptop the content loses 333px.
   That is the deal, not a bug. Raised with Chase before the change.

   `--esgri-measure` is the single knob. The shell breaks out to the full
   viewport and pads back in by half the difference, which is the same
   arithmetic as `padding: 0 14vw` and keeps working when the variable changes.
   The @media step is the front page's own: below 720px it stops being
   proportional (72vw of a 390px phone is 281px) and becomes flat 16px gutters.

   🚨 Every box that used to re-centre content at 1440 — the band inners, and
   whatever else this sheet defines — must read `var(--esgri-measure)` too. One
   left at 1440 puts the title on a different left edge from the content.
   ========================================================================== */
:root {
  --esgri-measure: 72vw;
}
@media (max-width: 720px) {
  :root { --esgri-measure: calc(100vw - 32px); }
}

.esgri-pageshell {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 0 calc((100vw - var(--esgri-measure)) / 2) !important;
  box-sizing: border-box !important;
}

/* `none`, not 1510. 1510 was 1440 plus the theme's own 35px gutters — a number
   derived from a measure that no longer exists, and one the measure now
   OVERTAKES: 72vw passes 1510 at a 2100px window, so leaving it would clip the
   page on any large monitor. The shell breaks out of this container anyway;
   this only stops anything else on the page being pinched. */
.aux-container { max-width: none !important; }


/* 🚨 The real ceiling is the THEME, not our shell. Phlox wraps every page in
   `.aux-container.aux-fold { max-width: 1270px; padding: 0 35px }`, i.e. a
   1200px measure — which is why the shell sat at 1140 and why raising only our
   own wrappers would have been clamped to 1200 and looked like the change had
   not deployed. 1510 = 1440 + the theme's own 35px padding either side, so the
   content lands on exactly 1440 and the theme keeps providing the gutter on a
   laptop narrower than that. Measured on the live DOM, not assumed.

   Unscoped on purpose: this stylesheet is only ever fetched by its own page, so
   the override cannot reach the pages left at 1140. */
/* ==========================================================================
   White strip above the footer                         (2026-08-06)
   ==========================================================================
   The theme's article wrapper keeps its own bottom margin below the content:
   `.entry-main` carries 70px and `.entry-content` 50px. Nothing renders in that
   band, so the grey ground stops and the white body background shows through as
   a strip between the last row and the footer.

   Zeroed rather than painted grey: a background would leave the dead page still
   there and would move the problem to any page ending on another colour.
   Unscoped is safe — this stylesheet is only ever fetched by its own page(s).
   Same rule and same reason as frontpage.css, insights.css and voices.css. */
.entry-main,
.entry-content {
  margin-bottom: 0 !important;
}

/* A filter term and the middot that follows it are one unwrappable unit
   (Chase, 7 Aug). The separator used to be an <li> of its own, which made it
   its own wrap unit: when the list ran to a second line it could begin with
   the dot, leaving a stray gap before the first word. The dot now lives inside
   the term's own <li>, and this keeps it there. */
.itm-fitem { white-space: nowrap !important; }

/* ==========================================================================
   The header and footer used to live here            (removed 2026-08-07)
   ==========================================================================
   This page was the trial ground for the new site chrome, so ~240 lines of
   header and footer CSS sat at the bottom of this file scoped to
   `body.page-id-21761`. Signed off and rolled out, so they now live in
   **SiteChrome/esgri-chrome.css**, unscoped, enqueued on every page by Code
   Snippet #28 "ESGRI Site Chrome". The footer MARKUP moved with them: the
   `data-fetch-html` div that used to pull esgri-footer.html was deleted from
   this page's content, because the snippet prints the same fragment on
   `wp_footer` everywhere — leaving both gave this page two footers, which is
   how the duplication was caught.

   Nothing replaces them here. If this page ever needs to differ from the rest
   of the site again, scope the difference to `body.page-id-21761` and put it
   below this note; do not fork the whole block back.
   ========================================================================== */