/* ==========================================================================
   e-Newsletter archive — /newsletter/   (2026-08-03 redesign)

   Second design of this page. The first (2026-07-29) ran on the site's green
   system: green title banner, rounded pill filters, and a per-stream accent
   colour sampled from the newsletters' own mastheads — navy #14345b for
   Research, green #2c634e for Community, bronze #7d6a43 for the pre-split
   2024 issues. This one moves the page onto the same design language as the
   Events Hub and /home-2/: black full-bleed band, gold accents, Poppins
   display, square corners. Tokens mirror events-hub.css so the two stay in
   step; --nl-gold is the events hub's --evh-gold.

   THE STREAM COLOURS ARE GONE, deliberately. Three sampled accents cannot
   coexist with a single-gold system without one of them looking like a
   mistake, and the stream is still named on every card by the outlined pill
   that the events cards use for their type. Previous build:
   `git log -- Newsletter`.

   The card follows the Past Events card: body on top, cover underneath. It is
   the one shape in the system that puts text above the image, and using it
   here is what makes the two archives read as one family.

   Scope `.esgri-nl` + !important throughout — Phlox ships 69+ stylesheets.
   ========================================================================== */

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

  display: block !important;
  position: relative !important;
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--nl-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. */
.esgri-nl::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  top: 0 !important;
  bottom: 0 !important;
  background: var(--nl-bg) !important;
  z-index: -1 !important;
}

/* ==========================================================================
   Title band
   ========================================================================== */
.esgri-nl__band {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  background: #000 !important;
  color: #fff !important;
}
.esgri-nl__band-inner {
  max-width: var(--esgri-measure) !important;
  margin: 0 auto !important;
  padding: 64px 0 60px !important;
}
/* No standfirst here, unlike Upcoming/Past. The explanatory lede this page used
   to carry ("Every issue we have sent, newest first…") was cut on request; the
   band is the title alone rather than filled with a replacement sentence. */
.esgri-nl__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, the same rail archive.css, in-the-media.css, voices.css,
   insights.css and events-hub.css use — this sheet was the last one still on a
   flat 200px. A fixed rail does not shrink with the page, so it took 19% of a
   1440 window and 14% of a 1920 one, and the main column came out wider here
   than on every sibling. Chase, 2026-08-24: "统一". Change one, change all six.
   The 1024 block below pins it again, because below there the proportional
   rail falls under the longest facet label. */
.esgri-nl__layout {
  display: grid !important;
  grid-template-columns: 16vw minmax(0, 1fr) !important;
  gap: 0 6vw !important;
  padding-top: 54px !important;
}
/* ---------- the News switch ----------
   Top of the rail, above the filters — the same place /in-the-media/ and the
   Insights archives put theirs, and the same type and colours. Vertical here,
   horizontal below 767 like all of them. */
.esgri-nl__switch { display: block !important; margin-bottom: 24px !important; }
.esgri-nl__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: #8A8F99 !important;
  padding: 5px 0 !important;
  transition: color .2s ease !important;
}
.esgri-nl__switch-link:hover { color: #B89642 !important; }
.esgri-nl__switch-link.is-active { color: #14171F !important; font-weight: 700 !important; }

.esgri-nl__rail { position: relative !important; }
/* NOT sticky, deliberately. The events hub rail asks for `position: sticky;
   top: 130px` and it has never once worked: both pages render inside an
   unclassed theme <div> with `overflow: hidden auto`, which becomes the
   sticky scrollport. That div never scrolls — the window does — so the rail
   just travels with the page. Neutralising the div is not an option either:
   its overflow-x is what stops the 100vw full-bleed band from producing a
   horizontal scrollbar. The rail therefore sits at the top of its column and
   the whole list is short enough that this costs nothing. */
.esgri-nl__rail-sticky { position: static !important; }

.esgri-nl__fgroup { margin-bottom: 18px !important; }
.esgri-nl__fgroup + .esgri-nl__fgroup {
  border-top: 1px solid var(--nl-line) !important;
  padding-top: 16px !important;
}
.esgri-nl__flabel {
  display: block !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--nl-mute) !important;
  margin-bottom: 6px !important;
}

/* The filter lists read as a run of terms separated by a middot, matching the
   events rail — inline items with a separator, not a stacked menu. font-size:0
   on the list kills the whitespace between inline-level items. */
.esgri-nl__flist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  font-size: 0 !important;
}
.esgri-nl__fitem { display: inline !important; margin: 0 !important; padding: 0 !important; }

.esgri-nl__fbtn {
  display: inline !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.9 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--nl-ink-soft) !important;
  cursor: pointer !important;
  transition: color .2s var(--nl-ease) !important;
}
.esgri-nl__fbtn:hover { color: var(--nl-gold) !important; }
.esgri-nl__fbtn:focus-visible { outline: 2px solid var(--nl-gold) !important; outline-offset: 2px !important; }
.esgri-nl__fbtn[aria-pressed="true"] { color: var(--nl-gold) !important; font-weight: 700 !important; }
/* A term with nothing left under the other filter is dimmed, not removed — the
   rail keeps a stable shape while you narrow down. */
.esgri-nl__fbtn[disabled] { color: #C2C2C2 !important; cursor: default !important; pointer-events: none !important; }

.esgri-nl__fsep {
  font-size: 13px !important;
  line-height: 1.9 !important;
  color: #B4B4B4 !important;
  padding: 0 6px !important;
}

.esgri-nl__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(--nl-mute) !important;
  cursor: pointer !important;
  text-decoration: underline !important;
}
.esgri-nl__reset:hover { color: var(--nl-gold) !important; }
.esgri-nl__reset[hidden] { display: none !important; }

/* ==========================================================================
   Year sections
   ========================================================================== */
.esgri-nl__group { margin-bottom: 46px !important; }
.esgri-nl__group[hidden] { display: none !important; }

.esgri-nl__year {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 0 22px !important;
}
.esgri-nl__yearnum {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: var(--nl-ink) !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ==========================================================================
   Card grid
   ========================================================================== */
.esgri-nl__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 26px 24px !important;
  align-items: stretch !important;
}

.esgri-nl__card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--nl-card) !important;
  color: inherit !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
/* 🚨 Scoped with .esgri-nl on purpose, exactly as .evh .ev[hidden] is. A bare
   `.esgri-nl__card[hidden]` is specificity (0,1,1) and the rule above that
   gives the card `display: flex` is (0,1,0) — a tie that !important does NOT
   break, so the later-declared display wins and every filtered-out card stays
   on screen. This page shipped with that bug once already. Any future display
   rule on the card must stay below (0,2,1) or this needs raising with it. */
.esgri-nl .esgri-nl__card[hidden] { display: none !important; }
.esgri-nl__card:focus-visible { outline: 2px solid var(--nl-gold) !important; outline-offset: 3px !important; }

/* ---- body sits ABOVE the cover, as on the Past Events card ---- */
.esgri-nl__body {
  display: block !important;
  padding: 16px 18px 14px !important;
  /* No min-height here, unlike the Past Events card. That card needs one
     because its titles run to three lines and its venue line is sometimes
     absent; every card here carries exactly one pill row and one read line,
     so the bodies are already identical and a floor only opens dead space
     above the cover. */
}

.esgri-nl__row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

/* the stream, in the outlined pill the events cards use for their type */
.esgri-nl__stream {
  display: inline-block !important;
  border: 1px solid var(--nl-ink) !important;
  padding: 3px 6px !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: var(--nl-ink) !important;
  white-space: nowrap !important;
}

/* the month, in the gold the events cards give the date. The year is not
   repeated — the section heading above already carries it. */
.esgri-nl__month {
  display: block !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
  text-align: right !important;
  text-transform: uppercase !important;
  color: var(--nl-gold) !important;
  white-space: nowrap !important;
}

.esgri-nl__read {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--nl-ink) !important;
  transition: color .22s var(--nl-ease) !important;
}
.esgri-nl__read::after {
  content: "\2192" !important;
  display: inline-block !important;
  transition: transform .22s var(--nl-ease) !important;
}
.esgri-nl__card:hover .esgri-nl__read { color: var(--nl-gold) !important; }
.esgri-nl__card:hover .esgri-nl__read::after { transform: translateX(4px) !important; }

/* ---- cover ---- */
.esgri-nl__cover {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  background: #E3E3E3 !important;
  margin-top: auto !important;
}
.esgri-nl__cover img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 720 / 479 !important;
  object-fit: cover !important;
  object-position: top center !important;
  transition: transform .6s var(--nl-ease) !important;
}
.esgri-nl__card:hover .esgri-nl__cover img { transform: scale(1.06) !important; }

/* The cover is a fixed-ratio crop of a much taller page, so its lower edge
   lands wherever it lands — often through the middle of a heading. The fade
   makes that cut read as "the page continues" instead of as a mistake. It sits
   above the image so the hover zoom happens underneath it. */
.esgri-nl__cover::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 54px !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.esgri-nl__empty {
  padding: 30px 0 !important;
  color: var(--nl-mute) !important;
  font-size: 14px !important;
}
.esgri-nl__empty[hidden] { display: none !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .esgri-nl__layout { grid-template-columns: 160px minmax(0, 1fr) !important; gap: 0 36px !important; padding-top: 40px !important; }
  .esgri-nl__band-inner { padding: 46px 0 42px !important; }
  .esgri-nl__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .esgri-nl__yearnum { font-size: 32px !important; }
}

@media (max-width: 767px) {
  /* the rail stops being a rail and becomes a header block above the list */
  .esgri-nl__layout { grid-template-columns: minmax(0, 1fr) !important; gap: 24px 0 !important; padding-top: 30px !important; }
  /* wrap, for the same reason the other switches do: three labels plus
     their gaps do not always clear a 360px phone, and the page clips
     rather than scrolls. */
  .esgri-nl__switch { display: flex !important; flex-wrap: wrap !important; gap: 6px 18px !important; }
  .esgri-nl__switch-link.is-active { border-bottom: 2px solid #B89642 !important; }
  .esgri-nl__rail-sticky { position: static !important; }
  .esgri-nl__band-inner { padding: 36px 0 32px !important; }
  .esgri-nl__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .esgri-nl__yearnum { font-size: 28px !important; }
  .esgri-nl__body { min-height: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .esgri-nl__cover img,
  .esgri-nl__read,
  .esgri-nl__read::after { transition: none !important; }
  .esgri-nl__card:hover .esgri-nl__cover img { transform: 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. */

/* 🚨 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. */

/* ==========================================================================
   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-nl {
  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; }
/* 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 rail ran to a second line it could begin with
   the dot, leaving a stray gap before the first word. build.py now emits the
   dot inside the term's own <li>, and this keeps it there. Same fix as
   events-hub.css and in-the-media.css. */
.esgri-nl__fitem { white-space: nowrap !important; }