/* ==========================================================================
   About the Institute — /about/            (2026-08-05)
   ==========================================================================

   Migration of Elementor page 1005 onto the black/gold design language, from
   Bunny's mockup (`About institute page_UI.jpg`) and the copy in
   `Our Mission.txt`. The old page is kept whole at /about-legacy/.

   The page has THREE grounds, which is why it is not simply the shell:
     · black title band (page content, so it paints with the document)
     · light grey for the film, the mission and the marks
     · navy for HKU Business School, full-bleed, its own colour system

   Tokens mirror in-the-media.css / events-hub.css. Navy #394960 and laurel
   #FF6B33 are sampled from the mockup, not guessed.

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

.abt-band,
.abt {
  --abt-gold:     #B89642;
  --abt-ink:      #14171F;
  --abt-ink-soft: #4A4E58;
  --abt-mute:     #8A8F99;
  --abt-bg:       #EFEFEF;
  --abt-navy:     #394960;
  --abt-laurel:   #FF6B33;
  --abt-ease:     cubic-bezier(.22,.9,.3,1);
}

.abt {
  display: block !important;
  position: relative !important;
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--abt-ink) !important;
}
/* the grey runs to the viewport edges; the navy block paints over it later */
.abt::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  top: 0 !important;
  bottom: 0 !important;
  background: var(--abt-bg) !important;
  z-index: -1 !important;
}

/* ==========================================================================
   Title band — server-rendered in the page content
   ========================================================================== */
.abt-band {
  position: relative !important;
  color: #fff !important;
}
/* 🚨 The band stays INSIDE the measure and only its background escapes. Set as
   `width: 100vw` with a `max-width: 1440px` inner, the title only lined up on a
   window at least 1510 wide — below that the theme narrows the content to its
   own gutter while a fixed 1440 inner does not, so at exactly 1440 the title
   sat flush against the edge of the screen. Same fix as insights.css. */
.abt-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;
}
.abt-band__inner {
  position: relative !important;
  padding: 64px 0 60px !important;
}
.abt-band__title {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  /* 52px, the size every other black band on the site sets — /global-affiliates/,
     /affiliated_researchers/, /kpmg-case-competition/ all run
     clamp(34px, 3.4vw, 52px)/700. This one followed the mockup's 70px @1920 and
     was the outlier (Chase, 2026-08-26: "和别的保持一样大小"). */
  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;
}

/* ==========================================================================
   Film
   ========================================================================== */
.abt-film { padding: 58px 0 0 !important; }
/* aspect-ratio, not height:auto. A <video> has no intrinsic size until its
   metadata loads, so `auto` briefly resolves against the 300x150 default and
   the block jumps when the file arrives — and on a slow line the poster is
   letterboxed inside the wrong box until then. The film is 3840x2160. */
.abt-film video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  background: #000 !important;
}

/* ==========================================================================
   Mission
   ========================================================================== */
.abt-mission { padding: 54px 0 0 !important; }
.abt-h2 {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(26px, 2.66vw, 51px) !important;   /* mockup: 51px @1920 */
  font-weight: 600 !important;                       /* 700 read as too heavy (Chase, 7 Aug) */
  line-height: 1.18 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  color: var(--abt-ink) !important;
  margin: 0 0 16px !important;
}
.abt-lead {
  font-size: clamp(15px, 1.04vw, 20px) !important;   /* mockup: 20px @1920 */
  line-height: 1.6 !important;
  color: var(--abt-ink-soft) !important;
  margin: 0 !important;
}

/* ── Three stacked ────────────────────────────────────────────────────────
   Chase, 2026-08-12: "改成三个垂直的排列，上中下，不是左中右". One column, the
   three blocks one above the other, still in reading order — Our Mission,
   Facilitate, Creating.

   This went full-width -> three across -> stacked in a day; the class name is
   about the count, not the axis, so it survives the change. The width ladder
   that used to live under here (three columns, then two at 1180, then one at
   767) is gone with it: there is one column at every width now, so the only
   thing left to scale is the space between the blocks.

   Each block is a 51px heading over one paragraph, and the heading sits 14px
   above its own text, so the gap between blocks has to be several times that
   or the three read as one run of prose. `clamp` rather than a fixed figure
   because the page measure is 72vw and everything else on it scales too: 34px
   at a phone, 40 at 1440, 54 at 1920. */
.abt-three {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(34px, 2.8vw, 54px) !important;
  align-items: start !important;
  /* 🚨 The bottom padding is loadbearing — see the note on the deleted marks
     section in CLAUDE.md. Without it the last line sits on the navy band. */
  /* 96 top, not 54 (Chase, 2026-08-26: "mission位置往下一些"). The title used to
     sit 54px under the film and 59px above its own paragraph — near enough the
     same both sides, so it read as floating between the two sections instead of
     belonging to the text under it. The 59 is cut to 32 in the two-column rule
     further down; between them the title drops ~40px and lands on its own
     paragraph. */
  padding: 96px 0 78px !important;
}
.abt-three .abt-h2 { margin-bottom: 14px !important; }

/* ==========================================================================
   Marks — institute logo, then who established and who funds it
   ========================================================================== */
.abt-marks {
  text-align: center !important;
  /* 205px below, not 86: that is the gap the mockup draws between the marks and
     the navy block (artwork bottom 2967, navy starts 3172). (Chase, 7 Aug) */
  padding: 78px 0 205px !important;
}
/* Selector covers both shapes — it is a <video> now, but the rule reads the
   same if it is ever put back to an <img>. aspect-ratio is set for the same
   reason as the film: a video has no intrinsic size until metadata lands, so
   the block would jump. The animation is 1280x720. */
.abt-marks__logo {
  display: block !important;
  /* Sized off the mockup's ARTWORK, not the file: the mp4 is 1280x720 with the
     lockup occupying 501x338 in the middle — 47% of the frame height is empty
     padding. The mockup draws that lockup 370x244 at 1920, so the frame has to
     run ~940px wide for the artwork to land at the drawn size. 552px put it at
     216x145, well under half. (Chase, 7 Aug) */
  width: 48.9vw !important;
  max-width: 940px !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 auto 30px !important;
  background: transparent !important;
  /* The animation is rendered on a WHITE card, so on the grey ground it shows
     as a white rectangle around the logo. `darken` keeps whichever pixel is
     darker, so anything at or above the backdrop disappears exactly and only
     the logo survives. NOT `multiply`: that multiplies the two, so the card's
     white (#FEFEFE, not quite pure) still tinted the ground a shade darker and
     left a faint rectangle.
     A transparent-background master would still be better; ask Marketing. */
  mix-blend-mode: darken !important;
}
.abt-marks__row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 78px !important;
  flex-wrap: wrap !important;
}
.abt-mark__label {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--abt-ink-soft) !important;
  margin: 0 0 12px !important;
}
/* Both mark files are ink-tight, so ONE height gives equal artwork and a shared
   baseline. Getting here took two goes and the reason is worth keeping:

   Collab_Logo_HKUBS.webp ships on a 750x360 canvas around a 672x298 lockup —
   31px of white top and bottom. HKJCCT.webp has none. At a shared height the
   HKU mark therefore drew 82.8% as much artwork, and correcting that with a
   taller box (139 vs 115) fixed the SIZE but not the POSITION: the boxes are
   top-aligned, so the padding pushed the HKU artwork exactly 12px down.

   Compensating in CSS would have meant carrying a magic offset forever. The
   padding is cropped out of the file instead — about-mark-hkubs.webp is the
   672x298 lockup with nothing around it. Re-crop if either file is replaced;
   two ink-tight files are what makes this one line correct. */
.abt-mark img {
  display: block !important;
  height: 115px !important;
  width: auto !important;
  margin: 0 auto !important;
}   /* no padding; box = artwork */

/* ==========================================================================
   HKU Business School — full-bleed navy
   ========================================================================== */
.abt-bs {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  background: var(--abt-navy) !important;
  color: #fff !important;
}
.abt-bs__inner {
  max-width: var(--esgri-measure) !important;
  margin: 0 auto !important;
  padding: 76px 0 88px !important;
}

.abt-bs__head {
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 0 56px !important;
  align-items: start !important;
}
.abt-bs__crest { width: 100% !important; max-width: 210px !important; height: auto !important; }
.abt-bs__title {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(26px, 2.66vw, 51px) !important;   /* mockup: 51px @1920 */
  font-weight: 600 !important;                       /* 700 read as too heavy (Chase, 7 Aug) */
  line-height: 1.14 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 0 18px !important;
}
.abt-bs__strap {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 0 22px !important;
}
.abt-bs__text {
  font-size: clamp(14px, 0.89vw, 17px) !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,.82) !important;
  margin: 0 !important;
  /* Uncapped (Chase, 7 Aug) — 72ch stopped it around 730px against the 1134px
     column its own heading uses, so it read as a narrower, separate block. */
}
.abt-bs__rule {
  height: 1px !important;
  background: rgba(255,255,255,.32) !important;
  margin: 50px 0 !important;
}

/* ---- one ranking claim: the NO.1 on the left, its evidence on the right ---- */
.abt-rank {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  gap: 0 64px !important;
  align-items: center !important;
  padding: 30px 0 !important;
}
.abt-rank__claim { text-align: center !important; }
.abt-rank__no {
  text-transform: uppercase !important;   /* the mockup sets NO., not No. */
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(40px, 4.4vw, 62px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #fff !important;
  margin: 0 0 14px !important;
}
/* "NO." is set small and the numeral large, as drawn — one line, two sizes */
.abt-rank__no b {
  font-weight: 700 !important;
  font-size: 1.75em !important;
  line-height: .8 !important;
  letter-spacing: -.02em !important;
}
.abt-rank__what {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(15px, 1.25vw, 19px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
}
.abt-rank__src {
  display: block !important;
  font-family: "Noto Sans", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  color: rgba(255,255,255,.86) !important;
  margin-top: 6px !important;
}

.abt-rank__proof { display: grid !important; gap: 26px !important; }
.abt-proof {
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) !important;
  gap: 0 20px !important;
  align-items: center !important;
}
/* The laurel is a background, not an <img>, so the numeral can sit inside it
   and stay centred at any font size. */
.abt-proof__badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* 🚨 Size the BOX from the file, not from the drawn laurel. about-laurel.webp
     is a 240x240 canvas holding a 228x198 wreath, so `contain` in a 133x115 box
     rendered the wreath at only 109x95 against the mockup's 133x115. A square
     140x140 box puts it at 133x116 — measured, not guessed. */
  width: 140px !important;
  height: 140px !important;
  background: url("https://hkujcesgri.hku.hk/wp-content/uploads/about-laurel.webp") center/contain no-repeat !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  /* Capped by the two-digit numbers, not by the drawing. The wreath's clear
     opening is 176 of the file's 240px — 103px once rendered — and "35" sets
     111px at 88 and 100px at 80, so both overflow it. 74px puts "35" at 93px
     with room to spare. (Chase, 7 Aug: 88 overflowed on 35.) */
  font-size: 74px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #fff !important;
}
/* The measure is capped so the claim wraps to two or three lines as drawn.
   Left to fill the column it sets as one long line and stops reading as a
   caption beside the badge. */
.abt-proof__text {
  max-width: 30ch !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
}
.abt-proof__where {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(255,255,255,.9) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .abt-band__inner { padding: 48px 0 44px !important; }
  .abt-bs__inner { padding: 60px 16px 68px !important; }
  .abt-bs__head { grid-template-columns: 160px minmax(0, 1fr) !important; gap: 0 32px !important; }
  .abt-rank { gap: 0 34px !important; }
  .abt-proof { grid-template-columns: 100px minmax(0, 1fr) !important; }
  .abt-proof__badge { width: 100px !important; height: 100px !important; font-size: 52px !important; }
}

@media (max-width: 767px) {
  .abt-band__inner { padding: 36px 0 32px !important; }
  /* One line on a phone too. ABOUT THE INSTITUTE measures 368px at the 34px
     floor inside a 358px column — over by 10, so it broke after "ABOUT". 32px
     lands it at 346. Chase, 2026-08-14: every band title on a single line. */
  .abt-band__title { font-size: 32px !important; }
  .abt-film { padding-top: 32px !important; }
  /* every two-up becomes a stack; the rankings keep the claim above its proof
     so the reading order still says "we are no.1, and here is why".
     `.abt-three` is stacked at every width now, so only its padding changes
     here — the 52px bottom is what the deleted marks section used on a phone. */
  .abt-three { padding-top: 34px !important; padding-bottom: 52px !important; }
  /* stacked: nothing to balance against */
  /* Desktop figure; on a phone the marks would own the screen. */
  .abt-mark img { height: 68px !important; }
  .abt-marks { padding: 52px 0 120px !important; }
  /* 48.9vw is a desktop figure — on a 390 phone it draws the lockup at 75x50.
     The frame is 47% padding, so the phone needs most of the width to give the
     artwork a usable size. */
  .abt-marks__logo { width: 84vw !important; }
  .abt-marks__row { gap: 40px !important; }
  .abt-bs__head { grid-template-columns: minmax(0, 1fr) !important; gap: 24px 0 !important; }
  .abt-bs__crest { max-width: 150px !important; }
  .abt-rank { grid-template-columns: minmax(0, 1fr) !important; gap: 26px 0 !important; }
  .abt-rank__claim { text-align: left !important; }
}

/* ==========================================================================
   Page width — 1440, like the rest of the new language
   ==========================================================================
   Same two overrides the other black/gold pages carry, and for the same
   reason: Phlox caps every page at `.aux-container { max-width: 1270px }`
   (a 1200px measure), so raising only .esgri-pageshell would be clamped to
   1200 and look like the change never deployed. 1510 = 1440 + the theme's own
   35px padding either side. Unscoped is safe — this sheet is only ever fetched
   by /about/. */
/* ==========================================================================
   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; }


/* ==========================================================================
   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;
}

/* ══════════════════════════════════════════════════════════════════════════
   Our Mission — two columns (Chase, 2026-08-24: "our mission可以改成这样")
   ══════════════════════════════════════════════════════════════════════════
   The mission statement takes the left column on its own; the two commitments
   stack in the right one. Proportions read off the comp: its columns are 615
   and 870 of a 1550 measure with 65 between them, so 41fr / 59fr and a 4.2%
   gap — ratios, not the pixels of somebody's screenshot.

   ⚠️ This supersedes the 2026-08-12 "三个段落水平依次排列" arrangement, which
   the responsive block below had already collapsed to a single stacked column
   at every width. Read that note before assuming this file wants three. */
.abt-three {
  grid-template-columns: minmax(0, 41fr) minmax(0, 59fr) !important;
  column-gap: 4.2% !important;
  /* 🚨 ROW GAP, SET SEPARATELY FROM THE `gap` ABOVE, AND ONLY HERE. In two
     columns the only row boundary is title -> the two bodies of text, so this
     is purely the space under OUR MISSION: 18 + the h2's own 14px margin = 32.
     The single-column stack below 900 puts every block on its own row and needs
     the larger figure, so it takes `gap` back. */
  row-gap: 18px !important;
}

/* 🚨 The right column starts on the STATEMENT's row, not the title's (Chase,
   2026-08-24: "Facilitate Excellent Research in Sustainability这行要和The HKU
   Jockey Club Enterprise 齐平"). OUR MISSION is a title over both columns, so
   the two bodies of text should start level with each other.

   Done by placing the three children on a 2-row grid rather than by padding the
   side column down. A padding would have to equal the h2's rendered height, and
   that height is `clamp(26px, 2.66vw, 51px)` x 1.18 + 16 — a number that
   changes with the window, so any fixed value is right at exactly one width.
   The grid keeps them level by construction. */
.abt-three > .abt-h2         { grid-column: 1 !important; grid-row: 1 !important; }
.abt-three > .abt-three__statement { grid-column: 1 !important; grid-row: 2 !important; }
.abt-three > .abt-three__side      { grid-column: 2 !important; grid-row: 2 !important; }

/* the two commitments, stacked, sharing the right column */
.abt-three__side {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(26px, 2.1vw, 40px) !important;
  align-items: start !important;
}

/* Sub-headings, not section titles. .abt-h2 is clamp(26,2.66vw,51) — at the top
   of that range these two would be the same size as OUR MISSION, which is the
   thing the comp changes: one title, two headings under it. Same family, same
   uppercase, roughly two-fifths the size. */
.abt-h3 {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(15px, 1.15vw, 22px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  color: var(--abt-ink) !important;
  margin: 0 0 10px !important;
}

/* The comp sets both columns justified — visible in the even right edge of the
   mission paragraph. Only where there is a column wide enough to justify
   without opening rivers; the phone stack below keeps ragged-right. */
/* 🚨 JUSTIFIED, BUT NOT HYPHENATED. `hyphens: auto` looked like the tidy
   companion to justify and it is not what the comp does: it broke regu-lators,
   dissemina-tion, gov-ernment and eq-uitable across lines, and the comp has no
   hyphen anywhere — it pays for the flush right edge in word spacing instead,
   which is the house look on this page. */
.abt-three .abt-lead {
  text-align: justify !important;
  hyphens: manual !important;
}

@media (max-width: 900px) {
  .abt-three {
    grid-template-columns: minmax(0, 1fr) !important;
    /* back to the stacked spacing — see the row-gap note above */
    row-gap: clamp(34px, 2.8vw, 54px) !important;
    padding-top: 54px !important;
  }
  /* 🚨 Release the explicit placement, or the side column keeps `grid-row: 2`
     and lands ON TOP of the statement once there is only one column. */
  .abt-three > .abt-h2,
  .abt-three > .abt-three__statement,
  .abt-three > .abt-three__side {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .abt-three .abt-lead { text-align: left !important; }
}