/* ==========================================================================
   Insights archives — /reports/ and /perspectives/        (2026-08-06)
   ==========================================================================

   ONE stylesheet and one script for both pages. They are the same object: a
   flat, dated archive of one kind of insight, reached from the matching row on
   /insights/. What differs is only where the items come from, and that is a
   data attribute on the root div — see archive.js.

   The card and the measure are In the Media's, deliberately: these three are
   the same species of page and should not each invent a grid. The one thing
   taken from /insights/ instead is the 3:2 image, because the sources are the
   same pictures — 20 of the 22 are landscape.

   ⚠️ The set now runs at three measures: /voices/ 1140, these three and
   /about/ 1440, /insights/ 1720 (Chase asked for that one to be wider).

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

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

  /* 🚨 PROPORTIONAL, because the measure is (Chase: "全部按照vw来吧"). The rail is
     the same 16vw voices.css and insights.css use, which is in turn the front
     page's `--fp-side-w`.

     The GAP is now 6vw and is site-wide, not this family's own (Chase,
     2026-08-11: "现在每个页面的这个gap是否可以设置都差不多的距离，例如6vw之类"). It
     was max(52px, 4vw) here and in voices.css / insights.css, a flat 56px in
     in-the-media.css and newsletter.css, and 7vw in events-hub.css — three
     answers across six sheets. All six now say 6vw; change one, change all six.
     ⚠️ The RAILS still disagree: 16vw here against events-hub's and
     in-the-media's fixed 200px, which is 307 vs 200 at 1920. Gutters agree,
     rails do not. A
     fixed 200px rail was 14% of the 1382 measure at 1920 and 19% of the 1037
     one at 1440: the furniture did not shrink with the page, so the filter
     column ate a bigger share of a smaller window while the cards ate less of
     a bigger one. That is why /reports/ and /perspectives/ read wider than
     /voices/ and /insights/ and the gap grew with the screen — 224px apart at
     1920, 320px at 2400.
     Keep these three files in step; they are meant to read as one layout. */
  --arc-rail:      16vw;
  --arc-colgap:    6vw;
}

.arc {
  display: block !important;
  position: relative !important;
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--arc-ink) !important;
  padding-bottom: 20px !important;
}
.arc::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important; width: 100vw !important; margin-left: -50vw !important;
  top: 0 !important; bottom: 0 !important;
  background: var(--arc-bg) !important;
  z-index: -1 !important;
}

/* ==========================================================================
   Title band
   ==========================================================================
   The band stays INSIDE the measure and only its background escapes. Written
   the other way — `width: 100vw` with a fixed `max-width: 1440px` inner — the
   title only lines up on a window at least 1510 wide, and at exactly 1440 it
   sits flush against the edge of the screen. That is what /in-the-media/,
   /past-events/ and /about/ still do; do not copy it from them.
   ========================================================================== */
.arc-band { position: relative !important; color: #fff !important; }
.arc-band::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  left: 50% !important; width: 100vw !important; margin-left: -50vw !important;
  background: #000 !important;
}
.arc-band__inner { position: relative !important; padding: 64px 0 60px !important; }
.arc-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 — rail + grid, as on /in-the-media/
   ========================================================================== */
.arc-layout {
  display: grid !important;
  grid-template-columns: var(--arc-rail) minmax(0, 1fr) !important;
  gap: 0 var(--arc-colgap) !important;
  padding-top: 54px !important;
}
.arc-rail__sticky { position: sticky !important; top: 130px !important; }

/* The three archives are siblings — this is the same device as the
   "In the media / Press release" switcher, and it is the only way across
   without going back to /insights/. */
.arc-switch { display: block !important; margin-bottom: 24px !important; }
.arc-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(--arc-mute) !important;
  padding: 5px 0 !important;
  transition: color .2s var(--arc-ease) !important;
}
.arc-switch__link:hover { color: var(--arc-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. */
.arc-switch__link.is-active {
  color: var(--arc-ink) !important;
  font-weight: 700 !important;
}

/* The rail search (Chase, 2026-08-21). Sits between the archive switch and the
   Type facet, so the two filters read as one column of controls. */
/* ---- search ----
   🚨 THESE NUMBERS ARE COPIED FROM .itm-search IN in-the-media.css, WHICH IS
   THE ONE THE SITE FOLLOWS. Chase, 2026-08-25: "columns和prespective有点不一样
   啊，所有的搜索都向columns对齐". This box used to be its own thing — white
   ground, 4px corners, 13.5px of body type, sentence-case "Search
   perspectives", no magnifier — while /columns/, /in-the-media/, /past-events/
   and /upcoming-events/ all wore the other one.

   #B7B7B7 and #9A9A9A are literals rather than --arc-line / --arc-mute on
   purpose: those tokens differ per page (in-the-media.css remaps the whole
   --arc-* set from --itm-*), and the point of this block is that the box is
   the SAME everywhere, not that it follows each page's palette. Change these
   only alongside .itm-search and .evh-search. */
.arc-search { position: relative !important; margin-bottom: 26px !important; }
.arc-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(--arc-ink) !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.arc-search__input::placeholder { color: #9A9A9A !important; }
.arc-search__input:focus { border-color: var(--arc-gold) !important; }
.arc-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;
}

.arc-fgroup { margin-bottom: 18px !important; border-top: 1px solid var(--arc-line) !important; padding-top: 16px !important; }
.arc-fgroup__label {
  display: block !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--arc-mute) !important;
  margin-bottom: 10px !important;
}
.arc .arc-fbtn {
  display: block !important;
  width: 100% !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  text-align: left !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  color: var(--arc-ink-soft) !important;
  cursor: pointer !important;
  transition: color .2s var(--arc-ease) !important;
}
.arc .arc-fbtn:hover { color: var(--arc-gold) !important; }
.arc .arc-fbtn[aria-pressed="true"] { color: var(--arc-gold) !important; font-weight: 700 !important; }

/* 🚨 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 — `.arc-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. */
.arc-count {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--arc-mute) !important;
  margin: 0 0 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--arc-line) !important;
  display: none !important;
}

.arc-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px 24px !important;
  align-items: stretch !important;
}

/* ==========================================================================
   Card — In the Media's, body above and image below
   ========================================================================== */
.arc-item {
  display: flex !important;
  flex-direction: column !important;
  background: var(--arc-card) !important;
  color: inherit !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  position: relative !important;
}
/* 🚨 Scoped with .arc on purpose. `.arc-item[hidden]` alone is (0,1,1), which
   LOSES to `.arc .arc-item { display: flex }` at (0,2,0) — !important on both
   sides does not break the tie, specificity does. Written unscoped, every card
   the filter hides stays on screen. Same trap as in-the-media.css. */
.arc .arc-item[hidden] { display: none !important; }
.arc-item:focus-visible { outline: 2px solid var(--arc-gold) !important; outline-offset: 3px !important; }

.arc-body { order: 1 !important; display: block !important; padding: 16px 18px 14px !important; }
.arc-media {
  order: 2 !important;
  display: block !important;
  overflow: hidden !important;
  background: #E3E3E3 !important;
  aspect-ratio: 3 / 2 !important;
}
.arc-media img {
  display: block !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform .6s var(--arc-ease) !important;
}
.arc-item:hover .arc-media img { transform: scale(1.06) !important; }

.arc-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  min-height: 22px !important;
}
.arc-kind {
  display: inline-block !important;
  border: 1px solid var(--arc-ink) !important;
  padding: 3px 6px !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  color: var(--arc-ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 62% !important;
}
.arc-kind[hidden] { display: none !important; }
.arc-date {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  margin-left: auto !important;
  color: var(--arc-gold) !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.arc-date__num { font-size: 22px !important; font-weight: 600 !important; line-height: 1 !important; }
.arc-date__mo  { font-size: 13px !important; font-weight: 500 !important; text-transform: uppercase !important; line-height: 1 !important; }

/* Four lines, always — clamped when longer, reserved when shorter, which is
   what makes every card the same height and every row line up.

   Size raised 2026-08-10 (Chase: "還有很多的這些page裡面的topic字號都大一些，按照
   bunny給的mockup來"). There is no comp for Perspectives or Reports, so the size
   comes from the one comp that does cover this card type —
   `In the media/events-hub/Event page_UI_v2_past event.jpg`, the same design
   language and the same stacked card. Bunny sets that title at 23px in a 334px
   card, i.e. **6.9% of the card's width**, derived by measuring two title lines
   (200px and 237px) against the same strings set at 100px (870 and 1022) →
   22.99 and 23.19.

   This card is 281px at 1920, so 6.9% is 19.4px — expressed as 1.01vw so the
   ratio survives the card being fluid, capped at 22 and floored at 15. The
   floor never binds above the 1024 breakpoint, which sets its own size.

   🚨 Three lines became FIVE with the size change, where /past-events/ — same
   size rule, same card — went to four. The difference is the copy, measured
   rather than assumed: unclamped at the new size, Perspectives' 13 titles run
   3/3/3/4/4/5/5/5/5/5/5/5/6 lines, so five clamps one and wastes at most two
   lines on three cards. Four would have clipped eight of thirteen. Past
   Events' titles run 1 to 6 with seven of seventeen at two lines, so five
   there would have left three empty lines on nearly half the page.
   Re-measure if the copy changes; do not copy the number across. */
.arc-title {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(15px, 1.01vw, 22px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  color: var(--arc-ink) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  /* THREE lines (Chase, 2026-08-11 sheet: "Title to three lines"). Five was
     the measured fit — Perspectives' titles run 3-7 lines, so three clips 10
     of its 13 and five clipped 1. His call; the number is recorded so nobody
     later reads the truncation as a bug. */
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  min-height: 3.45em !important;   /* 3 × 1.15 */
  transition: color .2s var(--arc-ease) !important;
}
.arc-item:hover .arc-title { color: var(--arc-gold) !important; }

.arc-status { padding: 40px 0 !important; font-size: 13px !important; color: var(--arc-ink-soft) !important; }
.arc-empty  { padding: 30px 0 !important; font-size: 13px !important; color: var(--arc-mute) !important; }

@media (max-width: 1024px) {
  /* Below 1024 the proportional rail would fall under 164px, which is narrower
     than the longest facet label, so it is pinned from here down. */
  .arc-layout { grid-template-columns: 160px minmax(0, 1fr) !important; gap: 0 36px !important; }
  .arc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* 1.01vw is a desktop ratio against a 281px card; the grid drops to two
     columns here and the card narrows faster than the type should. */
  .arc-title { font-size: 17px !important; }
  .arc-band__inner { padding: 44px 0 40px !important; }
}
@media (max-width: 767px) {
  .arc-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 24px 0 !important; padding-top: 30px !important; }
  .arc-rail__sticky { position: static !important; }
  /* 🚨 The switch goes HORIZONTAL here, as it already did on /columns/ and
     /in-the-media/ — the rail is a strip above the list on a phone, and four
     stacked links ate a quarter of the screen before the first card. Chase,
     2026-08-24: "有些是横的，有些是竖着的，可以统一一下". Byte-identical to the
     rule in in-the-media.css and events-hub.css; those three are the only
     sheets with a switcher, so change one, change all three. */
    /* 🚨 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. */
  .arc-switch { display: flex !important; flex-wrap: wrap !important; gap: 6px 18px !important; }
  .arc-switch__link.is-active { border-left: 0 !important; padding-left: 0 !important; border-bottom: 2px solid var(--arc-gold) !important; }
  .arc-grid { grid-template-columns: minmax(0, 1fr) !important; }
  /* One column, so the card is the full measure and wider than the two-up card
     above — the type goes back up with it. */
  .arc-title { font-size: 19px !important; }
  .arc-band__inner { padding: 34px 0 30px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-media img, .arc-title, .arc-fbtn { transition: none !important; }
  .arc-item:hover .arc-media img { transform: none !important; }
}

/* Page width — 1440, matching /in-the-media/ and /past-events/. See the note
   at the top of in-the-media.css for why this lives here and not in the
   site-wide shell sheet. */
/* ==========================================================================
   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 theme keeps 70px and 50px of bottom margin below the content, which
   shows as a white strip between the grey ground and the footer. */
.entry-main, .entry-content { margin-bottom: 0 !important; }