/* ──────────────────────────────────────────────────────────────────────────
 * sindex.css — HKU Sustainability Index hub + the seven index detail pages.
 *
 * Migration of Elementor pages 8191 / 10667 / 11692 / 12252 / 12495 / 12617 /
 * 13086 / 15722 to Variant C. This is a MIGRATION, not a redesign: every value
 * below was measured off the live pages with getComputedStyle at 1440px and
 * 390px, and the two line colours were sampled out of a screenshot because
 * they sit on elements Elementor generates rather than on the ones you'd read.
 *
 *   brand blue (section heads, rail)  rgb(0,86,162)    #0056A2
 *   button / band / chip border blue  rgb(47,85,151)   #2F5597
 *   "Completed" ribbon green          rgb(46,125,50)   #2E7D32
 *   "In progress" ribbon blue         rgb(23,80,128)   #175080
 *   body text                         rgb(38,38,38)    #262626
 *   card border 3px                   rgb(217,217,217) #D9D9D9
 *   rail separator 1px                #DDDDDD   (sampled)
 *   column divider 1px                #E7E7E7   (sampled)
 *   sub-nav bar                       rgb(45,52,69)    #2D3445
 *
 * Layout, desktop: content column 1200. Detail body is 199 rail + 1 divider
 * + 49 gutter + 941 main = 1190 inside that 1200.
 * ────────────────────────────────────────────────────────────────────────── */

#sx-root {
  /* full-bleed out of the theme's 1140 box. Keyed to the injected root div and
     not to the fragment's wrapper, so the hero and the contact band can span
     the viewport while their contents stay in the 1200 column. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;               /* the 100vw children must not scroll the page */
}

.sx {
  --sx-blue: #0056A2;
  --sx-navy: #2F5597;
  --sx-green: #2E7D32;
  --sx-ribbon-blue: #175080;
  --sx-ink: #262626;
  --sx-line: #DDDDDD;
  --sx-divider: #E7E7E7;
  --sx-card-border: #D9D9D9;
  --sx-bar: #2D3445;
  --sx-head: Poppins, "Noto Sans", sans-serif;
  --sx-body: "Noto Sans", sans-serif;
  --sx-hero-img: url("https://hkujcesgri.hku.hk/wp-content/uploads/2025/02/111111.webp");
  font-family: var(--sx-body);
  color: var(--sx-ink);
}

.sx * { box-sizing: border-box; }

.sx-wrap {
  max-width: 1240px;                /* 1200 of content inside 20px gutters */
  margin: 0 auto;
  padding: 0 20px;
}

/* An anchor target has to clear the sticky site header, or the heading you
   jumped to sits underneath it. This replaces Elementor's menu-anchor offset. */
.sx-anchor { display: block; height: 0; scroll-margin-top: 120px; }

/* ── Specificity: Phlox reaches inside .entry-content ─────────────────────
 * Three theme rules in main.css out-specify a single class, and they are the
 * only ones that do — measured on the staging page rather than guessed:
 *   .entry-content h1     font-size: 2.7em    (0,1,1) beats .sx-hero__title
 *   .entry-content h2     font-size: 2.1em    (0,1,1) beats .sx-sec__title
 *   .entry-content ul li  line-height: 190%   (0,1,2) beats .sx-body li
 * Those selectors therefore carry `#sx-root`, the id of the injected root div.
 * Nothing else here needs help, and spraying `!important` over the sheet would
 * only hide the next real conflict. Add a heading or a list style and check it
 * the same way instead of copying the prefix on faith.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────────────────── */

.sx-hero {
  background: var(--sx-hero-img) 50% 50% / cover no-repeat;
  min-height: 408px;
  display: flex;
  align-items: center;              /* measured: 143 above / 138 below on the child */
  padding: 0 10px;
}

/* the hub sits 15px lower than dead centre — 200 above / 170 below */
#sx-root .sx-hub .sx-hero { padding-top: 30px; }

.sx-hero__inner {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}

#sx-root .sx-hero__title {
  font-family: var(--sx-head);
  font-size: 38px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  margin: 0;
  padding: 0;
}

.sx-crumb {
  font-family: var(--sx-body);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 21px;
}

.sx-crumb a { color: #fff; text-decoration: none; }
.sx-crumb a:hover { text-decoration: underline; }
.sx-crumb__sep { padding: 0 8px; opacity: .75; }

/* tag chips — white outline over the hero, brand outline on a card */
.sx-chips {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
}

.sx-chips li {
  font-size: 15px;
  line-height: 22.5px;
  padding: 3px 8px;
  border: 1px solid #fff;
  border-radius: 5px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* Phlox again: `.entry-content ul { list-style: disc; padding-left: 1.1em }`
   is (0,1,1) and beats a single class, so every list we build came out with a
   bullet and an indent — a disc beside each hero chip and each card. Reset
   ours by id. Prose lists inside .sx-body keep their markers: `.sx-body ul` is
   (0,1,1) as well and simply comes later in the sheet. */
#sx-root .sx-chips,
#sx-root .sx-cards,
#sx-root .sx-people,
#sx-root .sx-card__tags,
#sx-root .sx-checks,
#sx-root .sx-expert__contacts,
#sx-root .sx-rail ul,
#sx-root .sx-subnav__inner > ul,
#sx-root .sx-subnav__sub {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}


/* ── Hub sub-navigation bar ───────────────────────────────────────────── */

.sx-subnav {
  background: var(--sx-bar);
}

.sx-subnav__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.sx-subnav__inner > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.sx-subnav li { position: relative; }

.sx-subnav a {
  display: block;
  padding: 11px 15px;
  font-size: 16px;
  line-height: 26px;
  color: #D6D6D6;
  text-decoration: none;
}

.sx-subnav a:hover,
.sx-subnav a:focus-visible { color: #fff; }

.sx-subnav__caret {
  display: inline-block;
  margin-left: 6px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

.sx-subnav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 260px;
  max-width: 420px;
  background: var(--sx-bar);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  flex-direction: column;
}

.sx-subnav li:hover > .sx-subnav__sub,
.sx-subnav li.is-open > .sx-subnav__sub { display: flex; }

.sx-subnav__sub a {
  padding: 9px 15px;
  font-size: 14px;
  line-height: 20px;
  white-space: normal;
}

/* ── Hub body ─────────────────────────────────────────────────────────── */

.sx-hub__body { padding: 30px 20px 10px; }   /* keep .sx-wrap's side gutters */

#sx-root .sx-h2 {
  font-family: var(--sx-head);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  color: var(--sx-blue);
  margin: 0 0 18px;
}

.sx-prose { font-size: 16px; line-height: 32px; color: var(--sx-ink); }
.sx-prose p { margin: 0 0 8px; }
.sx-prose p:last-child { margin-bottom: 0; }
.sx-prose a { color: var(--sx-blue); }

.sx-latest { margin: 0 0 40px; }

.sx-video {
  margin: 24px 0 40px;
  aspect-ratio: 16 / 9;
  background: #000;
}

.sx-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ── "Indices at a Glance" cards ──────────────────────────────────────── */

.sx-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sx-card {
  border: 3px solid var(--sx-card-border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
}

.sx-card__cover {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.sx-card__cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 2560 / 1438;
  object-fit: cover;
  display: block;
}

/* the diagonal status ribbon — a 200px bar rotated 45° out of the corner */
.sx-ribbon {
  position: absolute;
  top: 25px;
  right: -50px;
  width: 200px;
  height: 31px;
  transform: rotate(45deg);
  background: var(--sx-ribbon-blue);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.3px;
  line-height: 30px;
  text-align: center;
}

.sx-ribbon--done { background: var(--sx-green); }

.sx-card__title {
  font-family: var(--sx-head);
  font-size: 18px;
  line-height: 18px;               /* the original's — tight on two-line titles */
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--sx-ink);
  margin: 0;
}

.sx-card__lead {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sx-card__lead img {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 122px;
  background: #eef1f5;
}

.sx-card__leadname { font-size: 16px; line-height: 20px; }

.sx-card__desc { font-size: 16px; line-height: 20px; }
.sx-card__desc p { margin: 0 0 8px; }
.sx-card__desc p:last-child { margin-bottom: 0; }

.sx-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sx-btn {
  display: inline-block;
  font-family: var(--sx-body);
  font-size: 15px;
  line-height: 15px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 3px;
  border: 1px solid var(--sx-navy);
  background: var(--sx-navy);
  color: #fff;
  text-decoration: none;
}

.sx-btn:hover { filter: brightness(1.12); color: #fff; }
.sx-btn--green { background: var(--sx-green); border-color: var(--sx-green); }

.sx-card__tags {
  list-style: none;
  margin-top: auto;              /* tags sit at the foot however tall the card */
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
}

.sx-card__tags li {
  font-size: 15px;
  line-height: 22.5px;
  padding: 3px 8px;
  border: 1px solid var(--sx-navy);
  border-radius: 5px;
  background: #fff;
  color: var(--sx-blue);
}

/* ── Contact band ─────────────────────────────────────────────────────── */

.sx-band {
  background: var(--sx-navy);
  color: #fff;
  padding: 60px 0 70px;
  margin-top: 60px;
}

.sx-band__welcome {
  font-size: 32px;
  line-height: 40px;
  text-align: center;
  margin: 0 0 40px;
}

.sx-band__welcome p { margin: 0; }

#sx-root .sx-band__head {
  font-family: var(--sx-head);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  margin: 0 0 18px;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.sx-mailbox {
  border: 1px solid #fff;
  padding: 34px 20px;
  text-align: center;
  margin: 0 0 34px;
}

.sx-mailbox__icon {
  display: block;
  margin: 0 auto 14px;
  width: 42px;
  height: 42px;
}

.sx-mailbox p { margin: 0; font-size: 22px; font-weight: 600; font-family: var(--sx-head); }
.sx-mailbox a { color: #fff; }

.sx-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sx-people li {
  border: 3px solid #fff;
  padding: 20px 10px 24px;
  text-align: center;
}

.sx-people img {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
  display: block;
  background: rgba(255, 255, 255, .12);
}

.sx-people__name {
  font-family: var(--sx-head);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}

.sx-people__role { font-size: 16px; line-height: 22px; }
.sx-people__role p { margin: 0; }

/* the live page hides these at every breakpoint; kept so nothing is lost */
.sx-off { display: none !important; }

/* `.entry-content ul li { line-height: 190% }` is (0,1,2) and inflates every
   list item whose own rule is a single class. Restate the ones it reaches. */
#sx-root .sx-chips li,
#sx-root .sx-card__tags li { line-height: 22.5px; }
#sx-root .sx-expert__contacts li { line-height: 26px; }

/* The Latest Index banner is hand-written HTML that used to render on an
   Elementor full-width canvas — i.e. OUTSIDE `.entry-content`. Here it is
   inside it, so `.entry-content h2 {2.1em}` beats its own `.cce-profile__title`
   (16px became 33.6px), and the Elementor sheet that used to square off the
   avatar is gone, so the banner's own `border-radius:50%` reappeared. Restate
   both at id specificity to render it as the live page does. Want the round
   avatar the banner was actually designed with? Delete the second rule. */
#sx-root .sx-latest .cce-profile__title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}

/* Recoloured 2026-08-12 at Chase's request: the banner shipped in the CCE
   green (#6abd45) and now takes the page's own blue — the same #0056A2 as the
   "Why HKU Sustainability Index?" heading — and loses its shadows. Overridden
   here rather than in the banner's own <style> so re-running extract.py, which
   copies that markup verbatim out of _source/, cannot quietly undo it.
   Green → blue: #6abd45 → #0056A2, hover #5aa63c → #00447F, tint
   rgba(106,189,69,.08) → rgba(0,86,162,.08), quote wash #f5faf6 → #F2F7FB and
   its text #385A48 → #1F3F63. */
#sx-root .sx-latest .cce-profile-wrapper {
  border-color: var(--sx-blue);
  box-shadow: none;
}

#sx-root .sx-latest .cce-profile-wrapper__badge { background: var(--sx-blue); }

#sx-root .sx-latest .cce-profile__avatar {
  border-radius: 0;
  border-color: var(--sx-blue);
}

#sx-root .sx-latest .cce-profile__quote {
  /* 🚨 2026-09-17: the component's 3px left rule is gone (Chase) — the tinted
     panel already marks it as a quote, the bar was doing the job twice. */
  border-left: 0;
  background: #F2F7FB;
  color: #1F3F63;
}

/* the map sits in its own little card — that faint 8% shadow goes too */
#sx-root .sx-latest .cce-profile__kv { box-shadow: none; }

/* 🚨 The Completed chip is GREEN, not the banner's blue (Chase, 2026-08-18 —
   the 13/8 recolour changed the card ribbons but not this one). It states a
   STATUS, so it has to match the .sx-ribbon--done ribbon on the cards below;
   painted blue it read as decoration. Same --sx-green both places. */
#sx-root .sx-latest .cce-profile__label { background: var(--sx-green); }

#sx-root .sx-latest .cce-profile__btn--primary {
  background: var(--sx-blue);
  border-color: var(--sx-blue);
}

#sx-root .sx-latest .cce-profile__btn--primary:hover {
  background: #00447F;
  border-color: #00447F;
}

#sx-root .sx-latest .cce-profile__btn--secondary {
  color: var(--sx-blue);
  border-color: var(--sx-blue);
}

#sx-root .sx-latest .cce-profile__btn--secondary:hover { background: rgba(0, 86, 162, .08); }

/* Square corners throughout the banner (Chase, 2026-08-12). What was still
   rounded after the recolour: the quote's right edge (0 6px 6px 0), the map
   card (8px), the COMPLETED chip and both buttons (4px). The wrapper, its
   badge and the avatar were already square. */
#sx-root .sx-latest .cce-profile__quote,
#sx-root .sx-latest .cce-profile__kv,
#sx-root .sx-latest .cce-profile__label,
#sx-root .sx-latest .cce-profile__btn { border-radius: 0; }

/* 🚨 2026-09-17: the Latest Index card is the CCE profile component, imported
   whole, and its own <style> carries `@media (max-width:900px) {
   .cce-profile__author { flex-direction: row } }` — so on a phone the portrait
   and the name turn sideways, which is exactly the landscape habit the rest of
   the card drops. On desktop that block is a 120px column, photo over name.
   Keep the column at every width, and clear the "Latest Index" badge: the
   component's 24px top padding is 11px short of the 35px badge, so the badge
   was sitting on the corner of the portrait. */
@media (max-width: 900px) {
  #sx-root .sx-latest .cce-profile { padding-top: 52px; }
  #sx-root .sx-latest .cce-profile__author {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  #sx-root .sx-latest .cce-profile__author-name { text-align: center; }
}

/* ── Detail page ──────────────────────────────────────────────────────── */

.sx-detail__body { padding: 24px 20px 60px; }  /* keep .sx-wrap's side gutters */

.sx-topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 35px;               /* puts the rail 143px below the hero, as on CCE */
}

.sx-pill {
  display: inline-block;
  font-family: var(--sx-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border: 1px solid var(--sx-blue);
  border-radius: 6px;
  color: var(--sx-blue);
  background: transparent;
  text-decoration: none;
}

.sx-pill--solid { background: var(--sx-blue); color: #fff; }
.sx-pill:hover { filter: brightness(1.1); }

.sx-cols {
  display: grid;
  grid-template-columns: 199px 1fr;
  align-items: start;
  /* the live pages put a spacer here: the rail starts 90px below the hero on a
     page with no pills, and 143px on the one that has them
     (24 body padding + 34 pill + 20 + 66) */
  margin-top: 66px;
}

.sx-rail { position: sticky; top: 120px; padding-right: 21px; }

.sx-rail ul { list-style: none; margin: 0; padding: 0; }

.sx-rail li + li { margin-top: 15px; }

.sx-rail a {
  display: block;
  font-family: var(--sx-head);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--sx-blue);
  text-decoration: none;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-rail a:hover { color: var(--sx-navy); }
.sx-rail li:last-child a { border-bottom: 0; }

.sx-main {
  border-left: 1px solid var(--sx-divider);
  padding: 17px 0 10px 49px;        /* first heading sits 17px below the rail */
  min-width: 0;
}

.sx-sec { scroll-margin-top: 120px; }
.sx-sec + .sx-sec { margin-top: 32px; }

#sx-root .sx-sec__title {
  font-family: var(--sx-head);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  color: var(--sx-blue);
  margin: 0 0 18px;
}

.sx-sub {
  font-family: var(--sx-head);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--sx-ink);
  margin: 22px 0 10px;
}

.sx-body { font-size: 16px; line-height: 24px; color: var(--sx-ink); }
.sx-body p { margin: 0 0 12px; }
.sx-body p:last-child { margin-bottom: 0; }
.sx-body ul, .sx-body ol { margin: 0 0 12px; padding-left: 28px; }
#sx-root .sx-body li { margin: 0 0 8px; line-height: 24px; }

/* items whose text already begins with a typed "•" — Elementor drew no marker
   for these, so neither do we, or every line gets two bullets */
.sx-body .sx-list--typed { list-style: none; padding-left: 0; }   /* the nbsp run after each • is the indent */
.sx-body a { color: var(--sx-blue); }
.sx-body strong, .sx-body b { font-weight: 700; }

.sx-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 16px;
  font-size: 15px;
}

.sx-body td, .sx-body th {
  border-bottom: 1px solid var(--sx-line);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}

.sx-body tr.section td { background: #f4f6f9; }
.sx-body tr.total td { border-top: 2px solid #bbb; }

.sx-figure { margin: 0 0 16px; }
.sx-figure img { max-width: 100%; height: auto; display: block; }
.sx-figure figcaption { font-size: 14px; color: #555; margin-top: 6px; }

.sx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }

.sx-outline {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 22px;
  border: 1px solid var(--sx-navy);
  border-radius: 3px;
  color: var(--sx-navy);
  background: #fff;
  text-decoration: none;
}

.sx-outline:hover { background: var(--sx-navy); color: #fff; }

.sx-checks { list-style: none; margin: 0 0 14px; padding: 0; }

#sx-root .sx-checks li {
  position: relative;
  padding-left: 24px;
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 24px;
}

.sx-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  /* the filled tick, inline so it needs no icon font. Painted as a background
     image, NOT a mask — an alpha mask makes the white tick as opaque as the
     disc behind it and you get a plain dot. */
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23262626'/%3E%3Cpath d='M4.4 8.2l2.2 2.2 4.9-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Meet the Experts ─────────────────────────────────────────────────── */

.sx-expert { padding-left: 10px; }

.sx-expert img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 0 14px;
  background: #eef1f5;
}

.sx-expert__name {
  font-family: var(--sx-head);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  color: var(--sx-navy);
  margin: 0 0 12px;
}

.sx-expert__contacts { list-style: none; margin: 0; padding: 0; }

.sx-expert__contacts li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  line-height: 26px;
  color: var(--sx-blue);
}

.sx-expert__contacts svg { flex: 0 0 16px; width: 16px; height: 16px; fill: var(--sx-blue); }
.sx-expert__contacts a { color: var(--sx-blue); text-decoration: none; }
.sx-expert__contacts a:hover { text-decoration: underline; }

.sx-back {
  display: inline-block;
  margin-top: 34px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sx-blue);
  text-decoration: none;
}

.sx-back:hover { text-decoration: underline; }

/* ── Tablet ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .sx-cards { grid-template-columns: repeat(2, 1fr); }
  .sx-people { grid-template-columns: repeat(2, 1fr); }
  .sx-hero__inner { padding: 0 20px; }
  .sx-main { padding-left: 30px; }
  .sx-cols { grid-template-columns: 180px 1fr; }
  .sx-rail { padding-right: 16px; }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .sx-hero { min-height: 200px; padding: 0 10px; }
  #sx-root .sx-hub .sx-hero { padding-top: 0; }
  .sx-hero__inner { padding: 0 12px; }
  #sx-root .sx-hero__title { font-size: 27px; line-height: 1; }
  .sx-crumb { font-size: 9px; line-height: 13.5px; margin-bottom: 10px; }
  .sx-wrap { padding: 0 20px; }
  /* 🚨 2026-09-17: .sx-hub__body and .sx-detail__body also carry .sx-wrap,
     and the rule above is later in the file at equal specificity — so it
     silently zeroed their top padding on phones and the first panel sat
     flush against the sub-nav bar. Restore it here. */
  .sx-hub__body { padding: 24px 20px 10px; }
  .sx-detail__body { padding: 20px 20px 48px; }

  /* On the live page every sub-nav item is display:none under 768px, leaving a
     38px empty dark strip. Reproducing an empty bar would be reproducing a
     bug — the items stay.
     🚨 2026-09-17: they used to stay on ONE row with overflow-x:auto. The four
     items need 417px and the strip is 370px at 390px viewport, so "Contact Us"
     was cut mid-word with no affordance saying the row could be swiped — it
     read as breakage, not as a scroller. They now wrap onto two centred rows,
     and the touch targets go from 38px to 44px. */
  .sx-subnav__inner { padding: 0 10px; }
  #sx-root .sx-subnav__inner > ul { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
  .sx-subnav a { padding: 11px 12px; font-size: 14px; line-height: 22px; }
  .sx-subnav__inner > ul > li > a { white-space: nowrap; }
  /* 🚨 the bare `.sx-subnav a` nowrap above used to beat the base
     `.sx-subnav__sub a { white-space: normal }` on source order, so long
     event titles ran off the right edge of the open dropdown. */
  .sx-subnav__sub a { white-space: normal; }
  .sx-subnav__sub { position: static; box-shadow: none; min-width: 0; }
  .sx-subnav li:hover > .sx-subnav__sub { display: none; }
  /* 🚨 2026-09-17: with the bar on two rows, a dropdown anchored to its own
     item lands on top of the second row. Anchor it to the whole bar instead,
     so it opens below both rows, full width. */
  .sx-subnav__inner { position: relative; }
  .sx-subnav__inner > ul > li { position: static; }
  .sx-subnav li.is-open > .sx-subnav__sub {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-width: none;
  }

  .sx-cards, .sx-people { grid-template-columns: 1fr; }
  .sx-prose { font-size: 12.8px; line-height: 25.6px; }
  #sx-root .sx-body { font-size: 12.8px; line-height: 19.2px; }
  #sx-root .sx-body li { line-height: 19.2px; }
  .sx-band__welcome { font-size: 22px; line-height: 30px; }
  .sx-band { padding: 40px 0 46px; margin-top: 40px; }
  .sx-mailbox { padding: 24px 14px; }
  .sx-mailbox p { font-size: 17px; }

  .sx-cols { grid-template-columns: 1fr; margin-top: 24px; }
  .sx-rail { position: static; padding: 0 0 10px; }
  .sx-rail a { font-size: 17.6px; line-height: 22px; }
  .sx-main { border-left: 0; padding: 20px 0 0; }
  .sx-topnav { flex-direction: column; align-items: flex-start; }
  .sx-expert { padding-left: 0; }
}