/* Hallmark · genre: institutional editorial · tone: calm scholarly · palette: olive and teal · macrostructure: existing managed homepage */
:root {
  /* The four roles the faculty owns as Elementor Global Colors are consumed
   * from Elementor, with the current values as explicit fallbacks, exactly as
   * `tokens.css` already does for the Degree Program pages. This stylesheet had
   * been restating them as literals, so the same brand colour lived in two
   * places with only one of them following a change made in Elementor - the
   * "multiple one-off colors that bypass Elementor Global Colors" that
   * PRODUCT.md lists as an anti-reference. Rendering is unchanged wherever the
   * globals hold the values DESIGN.md records for them. */
  --rxsu-home-primary: var(--e-global-color-primary, #7d8f6a);
  --rxsu-home-secondary: var(--e-global-color-secondary, #007c72);
  --rxsu-home-ink: var(--e-global-color-text, #263126);
  --rxsu-home-canvas: var(--e-global-color-canvas-white, #fbfcf9);
  --rxsu-home-surface: var(--e-global-color-9f80574, #e9eee4);
  /* `brand` and `olive` were second names for Secondary and Primary, each with
   * its own literal. Four names for two colours meant changing the faculty teal
   * took two edits and silently missed whichever surface used the other name.
   * They stay as aliases so every existing rule keeps working, but they now
   * resolve to one source. */
  --rxsu-home-brand: var(--rxsu-home-secondary);
  --rxsu-home-olive: var(--rxsu-home-primary);
  /* Home-page-specific and deliberately not Elementor globals: a darkened
   * Secondary for text on light surfaces, the two section bands, and the paper
   * and rule tones that sit between Canvas White and Background. */
  --rxsu-home-brand-dark: #315c52;
  --rxsu-home-muted: #65705f;
  --rxsu-home-soft: #f3f6ef;
  --rxsu-home-sage-band: oklch(0.965 0.018 137);
  --rxsu-home-warm-band: oklch(0.982 0.012 102);
  --rxsu-home-border: #d9e1d3;
  --rxsu-home-paper: #fefefc;
  --rxsu-home-shadow: 0 10px 28px rgba(38, 49, 38, 0.08);
  /* The keyboard focus ring deliberately does NOT follow the Elementor global.
   * A focus indicator has to hold its contrast whatever anyone later does to
   * the brand colour, so it is pinned to the value that was measured against
   * every surface on this page. */
  --rxsu-home-focus: #007c72;
  /* Type on the Hero photograph, which is the only dark surface on the page. */
  --rxsu-home-ink-on-dark: #eef4eb;
  --rxsu-home-ink-on-dark-quiet: #c7ddd5;
  /* Event date plates. Three steps in tone, none of them a heavy fill: nothing
   * behind a finished event, paper behind one still ahead, the faintest teal
   * behind one running today. The ink is the quiet neutral below; upcoming and
   * running both set their numeral in the faculty teal. */
  --rxsu-home-event-plate-ink: #414d41;
  --rxsu-home-event-plate-next: #dbebe6;
}

body.rxsu-managed-homepage-body {
  margin: 0;
  color: var(--rxsu-home-ink);
  background: var(--rxsu-home-canvas);
  font-family: "LINE Seed Sans TH", "Noto Sans Thai", sans-serif;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

html:has(> body.rxsu-managed-homepage-body) {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.rxsu-managed-homepage-body *,
.rxsu-managed-homepage-body *::before,
.rxsu-managed-homepage-body *::after { box-sizing: border-box; }
.rxsu-managed-homepage-body img { max-width: 100%; height: auto; }
.rxsu-managed-homepage-body a { text-underline-offset: 4px; }
/* `summary` is focusable and operable like a button without being one, so it is
 * named here rather than given a ring of its own: the degree level rows must
 * focus exactly like the program links directly beneath them. */
.rxsu-managed-homepage-body :where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rxsu-home-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--rxsu-home-paper);
}
.rxsu-managed-homepage-body [hidden] { display: none !important; }

.rxsu-skip-link:focus {
  z-index: 99999;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  clip: auto;
  padding: 10px 14px;
  background: var(--rxsu-home-paper);
  color: var(--rxsu-home-ink);
}

.rxsu-managed-shell-header {
  position: sticky;
  z-index: 1000;
  top: var(--wp-admin--admin-bar--height, 0px);
  isolation: isolate;
}

/* The v10 drawer appends its backdrop directly under body. Keep that backdrop
 * below the isolated managed header so visible tablet/mobile links receive the
 * pointer instead of the later body sibling closing the drawer. */
body.rxsu-managed-homepage-body > .rx-drawer-backdrop {
  z-index: 999 !important;
}

.rxsu-managed-shell-footer { position: relative; z-index: 20; }

/* Header draft 6924 contains two legacy buttons alongside its unified utility control. */
.rxsu-managed-shell-header.elementor-712 .elementor-6924 .elementor-element-d6e8200,
.rxsu-managed-shell-header.elementor-712 .elementor-6924 .elementor-element-2d570ed {
  display: none !important;
}

.rxsu-managed-shell-header.elementor-712 .elementor-6924 .elementor-sticky__spacer,
.rxsu-managed-shell-header.elementor-712 .elementor-6924 .elementor-sticky__spacer * {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Header 6924 is a draft clone. Its three empty legacy rows and sticky offset
 * otherwise leave a visible blank band between navigation and the Hero. */
.rxsu-managed-shell-header--draft-6924 .elementor-6924 > .elementor-element-5565ddb,
.rxsu-managed-shell-header--draft-6924 .elementor-6924 > .elementor-element-38f5f14,
.rxsu-managed-shell-header--draft-6924 .elementor-6924 > .elementor-element-b9cc05f {
  display: none !important;
}

/* The managed shell owns the sticky position. Elementor's sticky clone and
 * inline fixed coordinates are disabled only for Header 6924, preventing the
 * source and clone from alternating while the mouse wheel crosses the trigger. */
.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-sticky__spacer {
  display: none !important;
}

.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-sticky--active {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  transform: none !important;
}

.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 > .elementor-element-552047b,
.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 > .elementor-element-552047b.elementor-sticky--active {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  min-height: 140px !important;
  height: auto !important;
  transform: none !important;
  justify-content: flex-start !important;
}

.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-89d32d4,
.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-89d32d4.elementor-sticky--active {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  min-height: 40px !important;
  transform: none !important;
}

.rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-4c8ce10 {
  grid-template-columns: minmax(340px, 390px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  min-height: 100px !important;
  padding-inline: clamp(24px, 3.2vw, 52px) !important;
}

.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-4c8ce10 > .elementor-element-0b3fdbf,
.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-4c8ce10 > .elementor-element-0b3fdbf > .elementor-element-44acd70,
.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-44acd70 > .elementor-widget-container,
.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-44acd70 a {
  width: 390px !important;
  max-width: 100% !important;
}

.rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 img.wp-image-1310 {
  width: 370px !important;
  min-width: 370px !important;
  max-width: 100% !important;
  height: auto !important;
}

.rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-173fbf6,
.rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-173fbf6 nav,
.rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-173fbf6 ul {
  align-items: center !important;
  justify-content: center !important;
}

/* Header and Footer appearance.
 *
 * Header 6924 and Footer 6787 are Elementor templates this plugin must not
 * edit, so their appearance on the managed page is controlled here, from
 * custom properties the template writes onto the body from the operator's
 * choices in Main Page Manager. Every value resolves to a palette token, so
 * this surface cannot acquire a colour the rest of the site does not have. The
 * fallbacks keep a stored draft written before these controls existed
 * rendering exactly as it did.
 *
 * The Header carried no bottom border and no shadow, so at rest a near-white
 * bar sat on a near-white canvas with no edge between them. The rule is 1px by
 * default and can be turned off, but it is the reason this block exists. */
.rxsu-managed-shell-header {
  border-bottom: var(--rxsu-shell-header-rule, 1px solid var(--rxsu-home-border));
  background: var(--rxsu-shell-header-bg, var(--rxsu-home-canvas));
}
/* The Header's own sections had drifted onto four different near-whites -
 * #ffffff, #fffff7, #fefefc and the canvas - which is the "multiple one-off
 * colors" anti-reference happening inside one 140px band. They resolve to the
 * chosen tone together. */
.rxsu-managed-shell-header > .elementor > .elementor-element,
.rxsu-managed-shell-header .elementor-element-552047b,
.rxsu-managed-shell-header .elementor-element-4c8ce10 {
  background-color: var(--rxsu-shell-header-bg, var(--rxsu-home-canvas)) !important;
}

.rxsu-managed-shell-footer--v2 {
  background: var(--rxsu-shell-footer-bg, var(--rxsu-home-soft));
  color: var(--rxsu-shell-footer-ink, var(--rxsu-home-ink));
}

.rxsu-managed-shell-footer--v2 .elementor-6787 > .elementor-element-62cf561c,
.rxsu-managed-shell-footer--v2 .elementor-7659 {
  background: var(--rxsu-shell-footer-bg, var(--rxsu-home-soft)) !important;
}

/* The footer's bottom bar. On the live shell this was Primary olive carrying
 * paper text at 3.39:1 - below the AA target PRODUCT.md commits to, on the one
 * strip of the page that holds the copyright and the privacy links. The tone is
 * now an operator choice, and Primary is not among the choices, because no
 * setting should be able to put text back below AA. */
.rxsu-managed-shell-footer--v2 .elementor-6787 > .elementor-element-145394a7,
.rxsu-managed-shell-footer--v2 .elementor-7659 > :last-child {
  background-color: var(--rxsu-shell-footer-bar-bg, var(--rxsu-bar-surface, var(--rxsu-home-brand-dark))) !important;
  color: var(--rxsu-shell-footer-bar-ink, var(--rxsu-home-paper));
}
.rxsu-managed-shell-footer--v2 .elementor-6787 > .elementor-element-145394a7 :where(a, p, span, li),
.rxsu-managed-shell-footer--v2 .elementor-7659 > :last-child :where(a, p, span, li) {
  color: var(--rxsu-shell-footer-bar-ink, var(--rxsu-home-paper));
}

.rxsu-managed-shell-footer--v2 .elementor-6787 > .elementor-element-145394a7,
.rxsu-managed-shell-footer--v2 .elementor-7659 > :last-child {
  min-height: 56px;
}
.rxsu-managed-shell-fallback {
  width: min(1320px, calc(100% - 64px));
  margin-inline: auto;
  padding-block: 18px;
}

.rxsu-home-page { overflow: clip; background: var(--rxsu-home-canvas); }
.rxsu-home-container {
  width: min(1320px, calc(100% - 64px));
  margin-inline: auto;
}
.rxsu-home-section { padding-block: clamp(56px, 6vw, 88px); }
/* WordPress supplies `.screen-reader-text` in wp-admin only; on the front end
 * it belongs to whichever theme is active, so text relying on it can render as
 * visible body copy. The managed page ships its own rule for both the class it
 * already used and the one these sections use.
 *
 * Scoped to the body, not to `.rxsu-home-page`: the skip link is emitted by the
 * template before the header, outside that container entirely, so a rule scoped
 * to the page div left the one control that must never be visible until focused
 * still depending on the active theme. */
.rxsu-home-visually-hidden,
.rxsu-managed-homepage-body .screen-reader-text,
.rxsu-home-page .screen-reader-text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.rxsu-home-section-heading { max-width: 760px; margin-bottom: 30px; }
.rxsu-home-section-heading > p:not(.rxsu-home-section-heading__summary),
.rxsu-home-donation__eyebrow {
  margin: 0 0 7px;
  color: var(--rxsu-home-brand);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.rxsu-home-section-heading h2,
.rxsu-home-section-heading h1,
.rxsu-home-donation h2 {
  margin: 0;
  color: var(--rxsu-home-ink);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 650;
  /* Thai stacks vowel + tone marks, so its ink box is ~1.3em regardless of size.
   * Heading leading must stay >= 1.4 or wrapped lines collide. */
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.rxsu-home-section-heading--identity {
  max-width: 920px;
}
.rxsu-home-section-heading--identity h1 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
}
.rxsu-home-section-heading__summary {
  margin: 12px 0 0;
  color: var(--rxsu-home-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.rxsu-home-section-heading--embedded { margin-bottom: 12px; }

.rxsu-home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid var(--rxsu-home-secondary);
  border-radius: 7px;
  background: var(--rxsu-home-secondary);
  color: var(--rxsu-home-paper);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.rxsu-home-button:hover {
  border-color: var(--rxsu-home-brand-dark);
  background: var(--rxsu-home-brand-dark);
  color: var(--rxsu-home-paper);
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(0, 124, 114, 0.24);
}

/* Hero */
.rxsu-home-hero {
  position: relative;
  /* The default repeats the value the site has always used, so the property
   * being absent renders exactly what it rendered before. Desktop only: the
   * two mobile breakpoints below set their own heights and are left alone. */
  min-height: var(--rxsu-hero-min-height, clamp(560px, 41vw, 680px));
  background: var(--rxsu-home-ink);
}
.rxsu-home-hero__slides,
.rxsu-home-hero__slide { min-height: inherit; }
.rxsu-home-hero__slide { position: relative; display: grid; align-items: center; }
.rxsu-home-hero__media { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--rxsu-home-ink); }
.rxsu-home-hero__picture { position: absolute; inset: 0; display: block; }
.rxsu-home-hero__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(17 31 23 / var(--rxsu-hero-overlay-opacity, 0.44)) 0%, rgb(17 31 23 / var(--rxsu-hero-overlay-opacity, 0.44)) 38%, transparent 74%);
  content: "";
}
.rxsu-managed-homepage-body .rxsu-home-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: var(--rxsu-hero-fit-desktop, cover) !important;
  object-position: var(--rxsu-hero-focal-desktop, center top);
  transform: none;
  transform-origin: var(--rxsu-hero-focal-desktop, center top);
}
.rxsu-home-hero__inner {
  position: relative;
  z-index: 2;
  width: min(1680px, calc(100% - 128px));
  margin-inline: auto;
  padding-block: 64px 104px;
}
.rxsu-home-hero__panel {
  position: relative;
  isolation: isolate;
  width: min(700px, 50vw);
  padding: clamp(28px, 2.4vw, 38px) 12px;
  border: 0;
  background: transparent;
}
.rxsu-home-hero__panel::before {
  position: absolute;
  z-index: -1;
  inset: -42px -96px -42px -52px;
  background: radial-gradient(ellipse at left center, rgb(17 31 23 / calc(var(--rxsu-hero-overlay-opacity, 0.44) * 0.88)) 0%, transparent 72%);
  content: "";
  pointer-events: none;
}
.rxsu-home-hero__eyebrow { margin: 0 0 12px; color: var(--rxsu-home-ink-on-dark-quiet); font-size: 1rem; font-weight: 700; }
.rxsu-home-hero h1,
.rxsu-home-hero h2 {
  margin: 0;
  color: var(--rxsu-home-paper);
  font-size: var(--rxsu-hero-title-size, 52px) !important;
  font-weight: 680;
  line-height: var(--rxsu-hero-title-line-height, 1.4) !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.rxsu-home-hero__body { max-width: 54ch; margin: 20px 0 26px; color: var(--rxsu-home-ink-on-dark); font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.68; }
.rxsu-home-hero__body > :first-child,
.rxsu-home-research-card__summary > :first-child,
.rxsu-home-donation__body > :first-child { margin-top: 0; }
.rxsu-home-hero__body > :last-child,
.rxsu-home-research-card__summary > :last-child,
.rxsu-home-donation__body > :last-child { margin-bottom: 0; }
.rxsu-home-hero__body a,
.rxsu-home-research-card__summary a,
.rxsu-home-donation__body a { color: var(--rxsu-home-brand-dark); font-weight: 700; }
.rxsu-home-hero__body a { color: var(--rxsu-home-paper); }
.rxsu-home-hero__panel .rxsu-home-button {
  border-color: var(--rxsu-home-secondary);
  background: var(--rxsu-home-secondary);
}
.rxsu-home-hero__panel .rxsu-home-button:hover {
  border-color: var(--rxsu-home-paper);
  background: var(--rxsu-home-paper);
  color: var(--rxsu-home-primary);
}
.rxsu-home-hero__slide.is-text-only .rxsu-home-hero__panel { background: rgb(17 31 23 / 0.86); }
.rxsu-home-hero__controls {
  position: absolute;
  z-index: 4;
  right: auto;
  left: max(24px, calc((100vw - 1320px) / 2));
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rxsu-home-hero__control-icon { display: block; width: 20px; height: 20px; }
.rxsu-home-hero__controls > button,
.rxsu-home-hero__dots button {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(254, 254, 252, 0.7);
  border-radius: 50%;
  background: rgba(38, 49, 38, 0.82);
  color: var(--rxsu-home-paper);
  cursor: pointer;
}
.rxsu-home-hero__dots { display: flex; gap: 0; }
.rxsu-home-hero__dots button {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
}
.rxsu-home-hero__dots button::before {
  width: 12px;
  height: 12px;
  border: 1px solid var(--rxsu-home-paper);
  border-radius: 50%;
  background: transparent;
  content: "";
}
.rxsu-home-hero__dots button[aria-current="true"]::before { background: var(--rxsu-home-paper); }

/* Paths and metrics */
.rxsu-home-paths { padding-block: clamp(48px, 5vw, 72px); background: var(--rxsu-home-paper); }
.rxsu-home-paths__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--rxsu-home-border);
}
.rxsu-home-path {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  min-height: 132px;
  padding: 22px 18px;
  border-right: 1px solid var(--rxsu-home-border);
  color: var(--rxsu-home-ink);
  text-decoration: none;
}
.rxsu-home-path:last-child { border-right: 0; }
.rxsu-home-path:hover { background: var(--rxsu-home-soft); color: var(--rxsu-home-brand-dark); }
.rxsu-home-path__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--rxsu-home-secondary);
}
.rxsu-home-path__icon svg { width: 34px; height: 34px; }
.rxsu-home-path__copy { min-width: 0; }
.rxsu-home-path__number { display: block; margin-bottom: 3px; color: var(--rxsu-home-olive); font-size: 0.875rem; font-weight: 750; line-height: 1.35; }
.rxsu-home-path strong,
.rxsu-home-path small { display: block; }
.rxsu-home-path strong { font-size: 1.125rem; line-height: 1.45; }
.rxsu-home-path small { margin-top: 5px; color: var(--rxsu-home-muted); font-size: 1rem; line-height: 1.55; }
.rxsu-home-path__arrow { font-size: 1.25rem; line-height: 1; }
.rxsu-home-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.rxsu-home-metrics { padding-block: 48px; background: var(--rxsu-home-soft); }
/* The metrics heading is centred over the whole band rather than held to the
 * 760px measure the other section headings use. */
.rxsu-home-metrics__intro { max-width: none; margin-bottom: 28px; text-align: center; }
.rxsu-home-metrics h2 { margin: 0 0 28px; text-align: center; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.rxsu-home-metrics__intro h2 { margin: 0; }
.rxsu-home-metrics__intro .rxsu-home-section-heading__summary { margin-inline: auto; max-width: 62ch; }
.rxsu-home-metrics__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.rxsu-home-metrics__grid > div { padding: 12px 24px; border-right: 1px solid var(--rxsu-home-border); text-align: center; }
.rxsu-home-metrics__grid > div:last-child { border-right: 0; }
.rxsu-home-metrics strong,
.rxsu-home-metrics span { display: block; }
.rxsu-home-metric__lead { display: flex; align-items: center; justify-content: center; gap: 12px; }
.rxsu-home-metric__icon { display: grid !important; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: var(--rxsu-home-secondary); }
.rxsu-home-metric__icon svg { width: 32px; height: 32px; }
.rxsu-home-metrics strong { color: var(--rxsu-home-primary); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; }
.rxsu-home-metrics .rxsu-home-metric__label { margin-top: 9px; color: var(--rxsu-home-muted); font-size: 1rem; line-height: 1.55; }

/* Degree programs
 * Quick Access, Awards and Research are already three rows of equal-width
 * cards, which is what makes this page read as blocky. A fourth would be the
 * worst possible answer for eleven items that are pure text and belong to
 * three named groups, so this section is deliberately not a card grid: an
 * asymmetric two-column shell (one narrow rail of framing copy, one wide
 * reading column) holding three hairline-ruled disclosure rows, one per level,
 * each opening into its own list of programs. No boxes, no fills, no shadows -
 * the rules and the indent do the grouping work that card borders would
 * otherwise be faking, and three rules read as an index rather than as three
 * more cards to compare.
 * Contrast on the sage band (#eef7eb): ink 12.35:1, muted 4.74:1,
 * brand 4.64:1, brand-dark 6.88:1. Olive is 3.19:1 and is never used for text
 * here. Level rows and program rows are both >= 56px tall so the whole row is
 * a comfortable touch target. */
.rxsu-home-degrees { background: var(--rxsu-home-sage-band); }
.rxsu-home-degrees__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.rxsu-home-degrees__intro { max-width: 34ch; margin-bottom: 0; }
.rxsu-home-degrees__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 18px;
  color: var(--rxsu-home-brand-dark);
  font-weight: 700;
  text-decoration: none;
}
.rxsu-home-degrees__cta:hover { text-decoration: underline; }
/* Three level rows stacked, never three tracks side by side. Eleven program
   names standing open ran 1237px stacked and 630px across three columns - a
   wayfinding block dominating the page it is only an entrance to - and three
   equal columns of names read as the card grid this section exists to avoid.
   Only the levels rest here now; every program link stays in the markup and is
   one click away. */
.rxsu-home-degrees__levels { display: grid; min-width: 0; }
.rxsu-home-degrees__level { border-top: 1px solid var(--rxsu-home-border); }
.rxsu-home-degrees__level:last-child { border-bottom: 1px solid var(--rxsu-home-border); }
.rxsu-home-degrees__level-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 12px 8px;
  cursor: pointer;
  /* The engines disagree about the default disclosure triangle - Safari needs
   * the marker pseudo-element gone, the rest follow `list-style` - and it lands
   * before the label, where Thai wants the level name to start. The chevron
   * below replaces it at the end of the row, matching the arrow the program
   * rows already put there. */
  list-style: none;
}
.rxsu-home-degrees__level-summary::-webkit-details-marker { display: none; }
.rxsu-home-degrees__level-summary:hover { background: var(--rxsu-home-paper); }
.rxsu-home-degrees__level-summary::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  margin-inline-start: auto;
  background: var(--rxsu-home-brand);
  mask: url("icons/chevron-right.svg") center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-home-degrees__level[open] > .rxsu-home-degrees__level-summary::after { transform: rotate(-90deg); }
/* The page-wide reduce rule is scoped to the managed body class; the chevron
 * states its own so the only moving part of this section is honest about it
 * wherever the section is rendered. */
@media (prefers-reduced-motion: reduce) {
  .rxsu-home-degrees__level-summary::after { transition: none; }
}
.rxsu-home-degrees__level-title {
  min-width: 0;
  margin: 0;
  color: var(--rxsu-home-brand-dark);
  font-size: 1.125rem;
  font-weight: 700;
  /* Thai stacks vowel + tone marks above and below, so a heading that wraps
   * needs >= 1.4 leading before the marks collide. */
  line-height: 1.45;
}
.rxsu-home-degrees__count { color: var(--rxsu-home-muted); font-size: 0.875rem; font-weight: 400; line-height: 1.5; }
/* The programs sit inside their level, so they are indented past the level
   rule instead of being fenced off by a border of their own. */
.rxsu-home-degrees__list { margin: 0; padding-block: 0 8px; padding-inline: 16px 0; list-style: none; }
.rxsu-home-degree {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 12px 8px;
  border-top: 1px solid var(--rxsu-home-border);
  color: var(--rxsu-home-ink);
  text-decoration: none;
  transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-home-degree:hover,
.rxsu-home-degree:focus-visible { background: var(--rxsu-home-paper); color: var(--rxsu-home-brand-dark); }
.rxsu-home-degree:hover .rxsu-home-degree__title { text-decoration: underline; }
.rxsu-home-degree__title { min-width: 0; font-size: 1.0625rem; line-height: 1.6; }
.rxsu-home-degree__arrow {
  color: var(--rxsu-home-brand);
  font-size: 1.125rem;
  line-height: 1;
  text-align: end;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-home-degree:hover .rxsu-home-degree__arrow { transform: translateX(3px); }

/* Awards */
/* Four accreditations with no artwork uploaded were four centred text blocks
 * floating in equal white space, and the page had already used the same shape
 * twice: Quick Access is four ruled columns and Impact Metrics is four ruled
 * columns of centred figures directly above. A third made the faculty's
 * credentials read as one more statistics strip.
 *
 * They are a register now: two by two, left-aligned, each entry opened by a 3px
 * rule that is the heaviest line on the page. Scope says what was certified,
 * the scheme name is set at display size because at that size lettering IS the
 * mark, and the grade - the part a reader is actually looking for, and the part
 * that used to be buried mid-sentence - is a solid chip in the faculty teal,
 * the only saturated fill in the section. No tinted plate: a plate sized to a
 * fixed box reads as an image that failed to load, which is the one thing a
 * section standing in for missing artwork must not look like. An uploaded image
 * takes the same slot, so artwork later replaces the lettering in place. */
.rxsu-home-awards { background: var(--rxsu-home-paper); }
.rxsu-home-awards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.6vw, 56px) clamp(32px, 5vw, 88px);
}
.rxsu-home-award {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 0 0;
  border: 0;
  border-top: 3px solid var(--rxsu-home-primary);
  background: transparent;
  color: var(--rxsu-home-ink);
  text-align: start;
  text-decoration: none;
  transition: border-top-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-home-award__scope {
  margin-bottom: 10px;
  color: var(--rxsu-home-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}
.rxsu-home-award__mark {
  display: block;
  width: auto;
  max-width: 100%;
  height: 96px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rxsu-home-brand);
}
.rxsu-home-award__mark img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.rxsu-home-award__mark--text { height: auto; }
.rxsu-home-award__mark--text h3 {
  margin: 0;
  color: var(--rxsu-home-brand-dark);
  font-size: clamp(1.75rem, 3.1vw, 2.625rem);
  font-weight: 750;
  /* Thai stacks vowel and tone marks, so a name that wraps needs >= 1.25
   * leading at this size before the marks touch the line above. */
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* The grade. One solid fill per entry, 4.94:1 on the faculty teal. */
.rxsu-home-award__level {
  align-self: flex-start;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--rxsu-home-secondary);
  color: var(--rxsu-home-paper);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}
/* The child combinator matters. In the artwork variant the name is a direct
 * child of the entry; in the text variant it lives inside the mark and is set
 * at display size. A descendant selector here matches both at equal
 * specificity, and being later in the file it silently won - which held the
 * text mark at 20px, measured, not assumed. */
.rxsu-home-award > h3 { margin: 14px 0 0; font-size: 1.25rem; line-height: 1.4; }
.rxsu-home-award p {
  max-width: 46ch;
  margin: 14px 0 0;
  color: var(--rxsu-home-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
a.rxsu-home-award:hover { border-top-color: var(--rxsu-home-brand); }
a.rxsu-home-award:hover .rxsu-home-award__mark--text h3 { text-decoration: underline; text-underline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
  .rxsu-home-award { transition: none; }
}

/* Meetings, training and seminars
 *
 * An event is a point in time, and nothing else on this page is, so time is
 * what carries the layout instead of a fourth row of equal cards: a date panel
 * opens every row, and the phase - ahead, running, finished - is stated in
 * words rather than left for a visitor to work out from a Buddhist-era month.
 *
 * The panel is flush to the edge of the row and runs its full height. An
 * earlier version floated a square plate inside a transparent row with air all
 * around it, which is what made it read as a stray block rather than as part of
 * a composed object; the fix was never to make the colour quieter but to make
 * the panel belong to something. The row is that something: one card, clipped
 * to a single radius, panel and poster meeting it flush.
 */
.rxsu-home-events {
  --rxsu-event-panel: var(--rxsu-home-surface);
  --rxsu-event-panel-ink: var(--rxsu-home-ink);
  --rxsu-event-accent: var(--rxsu-home-muted);
  background: var(--rxsu-home-warm-band);
}
.rxsu-home-events__intro { max-width: 780px; }
.rxsu-home-events__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 14px;
  color: var(--rxsu-home-brand-dark);
  font-weight: 700;
  text-decoration: none;
}
.rxsu-home-events__cta:hover { text-decoration: underline; }
.rxsu-home-events__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The row itself is the card and the grid. The title's link is stretched over
 * it, which keeps one link in the accessibility tree named by the event, and
 * leaves the poster free to be a second control - interactive elements cannot
 * nest, so the poster could never have been one while it sat inside the link. */
.rxsu-home-event {
  position: relative;
  display: grid;
  grid-template-columns: 124px auto minmax(0, 1fr) 52px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--rxsu-home-border);
  border-radius: 10px;
  background: var(--rxsu-home-paper);
  color: var(--rxsu-home-ink);
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-home-event:hover,
.rxsu-home-event:focus-within {
  border-color: var(--rxsu-home-secondary);
  box-shadow: var(--rxsu-home-shadow);
}

/* Date panel. Two tones, not four: the faculty teal while a listing is still
 * live, and the quiet Surface once it is finished. Which of upcoming or running
 * it is gets said in words beside the title, where a difference that fine
 * belongs - a second dark teal would only be read as decoration. */
/* The poster is placed by column rather than by source order: it is decorative
 * and hidden from assistive technology, so it sits late in the DOM where it
 * cannot come between the date and the title a screen reader needs to hear
 * together, and second on screen where the reference composition wants it. */
/* Every cell is pinned to row 1. Explicit columns alone are not enough: the
 * poster comes third in source but second on screen, and sparse auto-placement
 * will not move its cursor backwards, so it drops to a second row instead. */
.rxsu-home-event__date { grid-row: 1; grid-column: 1; }
.rxsu-home-event__poster { grid-row: 1; grid-column: 2; }
.rxsu-home-event__copy { grid-row: 1; grid-column: 3; }
.rxsu-home-event__arrow { grid-row: 1; grid-column: 4; }
.rxsu-home-event.is-text-only .rxsu-home-event__copy { grid-column: 2; }
.rxsu-home-event.is-text-only .rxsu-home-event__arrow { grid-column: 3; }
.rxsu-home-event__date {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 22px 12px;
  background: var(--rxsu-event-panel);
  color: var(--rxsu-event-panel-ink);
  text-align: center;
}
.rxsu-home-event.is-upcoming,
.rxsu-home-event.is-ongoing {
  --rxsu-event-panel: var(--rxsu-home-secondary);
  --rxsu-event-panel-ink: var(--rxsu-home-paper);
  --rxsu-event-accent: var(--rxsu-home-brand-dark);
}
.rxsu-home-event__date--range .rxsu-home-event__day { font-size: clamp(1.625rem, 2.3vw, 2.125rem); }
.rxsu-home-event__day {
  font-size: clamp(2.125rem, 3.2vw, 3rem);
  /* Light where the type family has it, and the hierarchy survives at 400
   * where it does not: the contrast that carries this pairing is size, case
   * and tracking against a 13px bold month, not weight alone. */
  font-weight: 300;
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rxsu-home-event__month {
  margin-top: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  /* Thai carries vowel and tone marks above and below its consonants, and wide
   * tracking pulls them away from the letter they belong to. The wide setting
   * the pairing wants is scoped to the language that can take it. */
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
:lang(en) .rxsu-home-event__month { letter-spacing: 0.14em; }
/* An editor's own date label replaces the range wholesale and can run to a
 * sentence, so that panel sets it as text rather than as a numeral. */
.rxsu-home-event__date--label .rxsu-home-event__day {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: normal;
}

/* The artwork is a Thai event flyer: upright, and dense with text a crop
 * destroys. It meets the panel flush and is shown whole inside its column. */
a.rxsu-home-event__poster { cursor: zoom-in; }
a.rxsu-home-event__poster:hover { background: var(--rxsu-home-surface); }
.rxsu-home-event__poster {
  position: relative;
  z-index: 1;
  display: grid;
  width: clamp(84px, 8vw, 108px);
  place-items: center;
  padding: 10px;
  border-right: 1px solid var(--rxsu-home-border);
  background: var(--rxsu-home-soft);
}
.rxsu-home-event__poster img {
  display: block;
  max-width: 100%;
  max-height: 132px;
  object-fit: contain;
}
.rxsu-home-event.is-text-only {
  grid-template-columns: 124px minmax(0, 1fr) 52px;
}

.rxsu-home-event__copy {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 20px clamp(16px, 1.6vw, 24px);
}
.rxsu-home-event__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.rxsu-home-event__type {
  padding: 3px 10px;
  border: 1px solid var(--rxsu-home-border);
  border-radius: 999px;
  background: var(--rxsu-home-canvas);
  color: var(--rxsu-home-brand-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}
.rxsu-home-event__phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rxsu-event-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}
.rxsu-home-event__phase::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: currentcolor;
}
.rxsu-home-event__range { color: var(--rxsu-home-muted); font-size: 0.8125rem; line-height: 1.5; }
.rxsu-home-event__title {
  color: var(--rxsu-home-ink);
  text-decoration: none;
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  font-weight: 650;
  /* Thai stacks vowel and tone marks, so a wrapped title needs >= 1.5 leading
   * at this size before the marks collide. */
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.rxsu-home-event:hover .rxsu-home-event__title { text-decoration: underline; text-underline-offset: 4px; }
/* The stretch. `inset: 0` on the row, so a pointer anywhere that is not the
 * poster follows the title's link. Keyboard focus still lands on the title
 * itself, so its ring is drawn around the words rather than the whole row. */
.rxsu-home-event__title::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
}
.rxsu-home-event__organizer {
  position: relative;
  margin-top: 5px;
  color: var(--rxsu-home-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.rxsu-home-event__arrow {
  display: grid;
  place-items: center;
  border-left: 1px solid var(--rxsu-home-border);
  background: var(--rxsu-home-canvas);
  color: var(--rxsu-home-brand);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-home-event:hover .rxsu-home-event__arrow { background: var(--rxsu-home-soft); }
@media (prefers-reduced-motion: reduce) {
  .rxsu-home-event,
  .rxsu-home-event__arrow { transition: none; }
}

/* Poster lightbox. Sized to the viewport rather than to the image, so a 960px
 * flyer fills what it can and a taller one scrolls inside the dialog instead of
 * pushing its own close button off screen. */
.rxsu-home-poster-dialog {
  /* Stated rather than inherited. A dialog centres itself through `margin:
   * auto` on all four sides, and any ancestor or user-agent rule that resets
   * margin quietly parks it in a corner instead. */
  margin: auto;
  max-width: min(92vw, 900px);
  max-height: 92dvh;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--rxsu-home-border);
  border-radius: 12px;
  background: var(--rxsu-home-paper);
  color: var(--rxsu-home-ink);
}
.rxsu-home-poster-dialog::backdrop { background: rgb(23 34 26 / 72%); }
/* The image is bounded, not the figure. Letting the figure scroll pushed the
 * caption - the only thing naming what you are looking at - below the fold of
 * the dialog on any upright flyer. */
.rxsu-home-poster-dialog figure {
  display: grid;
  margin: 0;
  grid-template-rows: auto auto;
}
.rxsu-home-poster-dialog img {
  display: block;
  width: 100%;
  max-height: calc(92dvh - 5rem);
  height: auto;
  object-fit: contain;
  border-radius: 11px 11px 0 0;
  background: var(--rxsu-home-soft);
}
.rxsu-home-poster-dialog figcaption {
  padding: 16px 20px;
  border-top: 1px solid var(--rxsu-home-border);
  color: var(--rxsu-home-ink);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.55;
}
.rxsu-home-poster-dialog__close {
  position: absolute;
  top: -14px;
  right: -14px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rxsu-home-border);
  border-radius: 999px;
  background: var(--rxsu-home-paper);
  color: var(--rxsu-home-ink);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}
.rxsu-home-poster-dialog__close:hover { background: var(--rxsu-home-soft); }
@media (max-width: 600px) {
  .rxsu-home-poster-dialog { max-width: calc(100vw - 24px); }
  .rxsu-home-poster-dialog__close { top: -12px; right: -6px; }
}

/* Procurement and recruitment notices.
 *
 * A tray inside the news band, not a section of its own. An earlier design gave
 * these their own full-height section built from the event listing's row
 * grammar, which repeated that section almost exactly and added ~1,100px to a
 * page already 6,596px long - for content that is looked up rather than
 * browsed. One hairline rules the tray off from the news above and a small
 * heading names it, so it reads as "and also, from the same desk". Three across
 * means it never grows past one row however many notices exist.
 *
 * No artwork and no colour panel: the pictures belong to the news above, and a
 * flush colour panel would restate the event listing further up the page. What
 * a notice carries is a date that runs out, so the date is the one thing set in
 * the brand colour. */
.rxsu-home-managed-section--news:has(.rxsu-home-notices) .rxsu-news-section-v2 { padding-bottom: 0; }
.rxsu-home-notices {
  width: min(1320px, calc(100% - 64px));
  margin-inline: auto;
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(56px, 6vw, 88px);
  border-top: 1px solid var(--rxsu-home-border);
}
.rxsu-home-notices__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}
.rxsu-home-notices__head h3 {
  margin: 0;
  color: var(--rxsu-home-ink);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.5;
}
.rxsu-home-notices__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--rxsu-home-brand-dark);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}
.rxsu-home-notices__cta:hover { text-decoration: underline; }
.rxsu-home-notices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.rxsu-home-notice {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 18px 20px 16px;
  border: 1px solid var(--rxsu-home-border);
  border-radius: 10px;
  background: var(--rxsu-home-paper);
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-home-notice:hover,
.rxsu-home-notice:focus-within {
  border-color: var(--rxsu-home-secondary);
  box-shadow: var(--rxsu-home-shadow);
}
.rxsu-home-notice__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.rxsu-home-notice__type {
  padding: 3px 10px;
  border: 1px solid var(--rxsu-home-border);
  border-radius: 999px;
  background: var(--rxsu-home-canvas);
  color: var(--rxsu-home-brand-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}
.rxsu-home-notice__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rxsu-home-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}
.rxsu-home-notice__status::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: currentcolor;
}
/* One loud element in the whole tray, and only where time is genuinely short. */
.rxsu-home-notice.is-soon .rxsu-home-notice__status {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--rxsu-home-secondary);
  color: var(--rxsu-home-paper);
}
.rxsu-home-notice.is-open .rxsu-home-notice__status { color: var(--rxsu-home-brand-dark); }
.rxsu-home-notice__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--rxsu-home-ink);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 650;
  /* Thai stacks vowel and tone marks, so a clamped title needs >= 1.5 leading
   * before the marks collide with the line above. */
  line-height: 1.55;
  text-wrap: pretty;
}
.rxsu-home-notice:hover .rxsu-home-notice__title { text-decoration: underline; text-underline-offset: 4px; }
.rxsu-home-notice__title::after { position: absolute; z-index: 0; inset: 0; content: ""; }
.rxsu-home-notice__when { margin-top: 12px; color: var(--rxsu-home-muted); font-size: 0.875rem; line-height: 1.55; }
.rxsu-home-notice__when b { color: var(--rxsu-home-brand-dark); font-weight: 700; }
/* Above the stretched title link, so the document stays its own control. */
.rxsu-home-notice__doc {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--rxsu-home-border);
  color: var(--rxsu-home-brand-dark);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.rxsu-home-notice__doc:hover { text-decoration: underline; }
.rxsu-home-notice__doc-badge {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--rxsu-home-brand-dark);
  color: var(--rxsu-home-paper);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
@media (prefers-reduced-motion: reduce) {
  .rxsu-home-notice { transition: none; }
}

/* Existing SSOT sections */
.rxsu-home-managed-section--programs { background: var(--rxsu-home-paper); }
.rxsu-home-managed-section--news { background: var(--rxsu-home-sage-band); }
.rxsu-home-managed-section .rxsu-content-section-v2 { padding-block: clamp(56px, 6vw, 88px); }

/* News composition is scoped to the managed Draft 7641 shell. The production
 * Page 22 keeps the stable 0.4.5 presentation from frontend.css. */
.rxsu-managed-homepage-body .rxsu-news-featured-v2 {
  display: flex;
  flex-direction: column;
  background: var(--rxsu-home-paper);
}
.rxsu-managed-homepage-body .rxsu-news-featured-v2.is-text-only .rxsu-news-body {
  min-height: clamp(360px, 38vw, 520px);
  justify-content: flex-end;
  padding: clamp(32px, 4.5vw, 60px);
}
.rxsu-managed-homepage-body .rxsu-news-featured-v2.is-text-only h3 {
  max-width: 24ch;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.4;
}
/* The featured card is stretched to the height of the list column beside it.
 * Let the image absorb the surplus so the CTA stays anchored to its own copy
 * instead of floating at the bottom of an empty well. */
.rxsu-managed-homepage-body .rxsu-news-featured-v2.has-image .rxsu-news-media {
  display: block;
  flex: 1 1 auto;
  min-height: 260px;
  overflow: hidden;
}
.rxsu-managed-homepage-body .rxsu-news-featured-v2.has-image .rxsu-news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-managed-homepage-body .rxsu-news-featured-v2.has-image:hover .rxsu-news-media img {
  transform: scale(1.03);
}
.rxsu-managed-homepage-body .rxsu-news-featured-v2.has-image .rxsu-news-body {
  flex: 0 0 auto;
}
.rxsu-managed-homepage-body .rxsu-news-featured-v2.is-text-only p {
  max-width: 68ch;
}
.rxsu-managed-homepage-body .rxsu-news-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.rxsu-managed-homepage-body .rxsu-news-body .rxsu-card-cta {
  align-self: flex-start;
  margin-top: auto;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article {
  grid-template-columns: 132px minmax(0, 1fr) 44px;
  min-height: 132px;
  gap: 16px;
  padding: 16px 8px;
  transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article.has-image {
  grid-template-columns: 132px minmax(0, 1fr) 44px;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only {
  grid-template-columns: 132px minmax(0, 1fr) 44px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--rxsu-home-border);
  border-radius: 0;
  background: transparent;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article:hover,
.rxsu-managed-homepage-body .rxsu-news-list-v2 article:focus-within {
  background: color-mix(in srgb, var(--rxsu-home-paper) 58%, transparent);
}
/* Stories without a featured image previously pushed their metadata into the
 * 132px media rail, which gave those rows a different reading rhythm from every
 * other row. They now keep the shared three-column grammar and fill the rail
 * with a neutral tile, so the list scans as one list. */
.rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only::before {
  content: "";
  grid-column: 1;
  align-self: stretch;
  border: 1px solid var(--rxsu-home-border);
  border-radius: 10px;
  /* A document mark keeps the tile reading as a deliberate placeholder for a
   * text announcement rather than an image that failed to load. */
  background-color: var(--rxsu-home-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F5528' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 34px;
  opacity: 0.75;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only .rxsu-news-list-content {
  grid-column: 2;
  min-width: 0;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only .rxsu-news-list-arrow {
  grid-column: 3;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only .rxsu-news-list-meta {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only .rxsu-date-pair {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article h3 {
  grid-area: title;
  margin: 7px 0 0;
  font-size: 1.0625rem;
}
.rxsu-managed-homepage-body .rxsu-news-list-summary {
  display: -webkit-box;
  grid-area: summary;
  overflow: hidden;
  margin: 0;
  color: var(--rxsu-home-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article.has-image .rxsu-news-list-summary {
  margin-top: 7px;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 article .rxsu-news-list-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--rxsu-home-border);
  border-radius: 999px;
  background: transparent;
  color: var(--rxsu-home-secondary);
  transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hovering anywhere on the row lights the arrow, so the whole row reads as the
 * target even though the arrow stays the single accessible link. */
.rxsu-managed-homepage-body .rxsu-news-list-v2 article:hover .rxsu-news-list-arrow,
.rxsu-managed-homepage-body .rxsu-news-list-v2 article .rxsu-news-list-arrow:hover,
.rxsu-managed-homepage-body .rxsu-news-list-v2 article .rxsu-news-list-arrow:focus-visible {
  border-color: var(--rxsu-home-secondary);
  background: var(--rxsu-home-secondary);
  color: var(--rxsu-home-paper);
}
.rxsu-managed-homepage-body .rxsu-news-list-image {
  width: 132px;
  border: 1px solid var(--rxsu-home-border);
}
.rxsu-managed-homepage-body .rxsu-news-list-content { min-width: 0; }
.rxsu-managed-homepage-body .rxsu-news-list-v2 article.has-image .rxsu-news-list-meta {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}
.rxsu-managed-homepage-body .rxsu-news-list-v2 h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  /* Two lines plus a two-line summary reads better than three plus two, and it
   * cuts how often a Thai title is truncated mid-syllable. */
  -webkit-line-clamp: 2;
  line-height: 1.5;
}
.rxsu-managed-homepage-body .rxsu-news-list-meta time {
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Student Life */
.rxsu-home-student-life { background: var(--rxsu-home-paper); }
.rxsu-home-student-life .elementor { width: 100%; }

/* Research */
.rxsu-home-research { background: var(--rxsu-home-warm-band); }
.rxsu-home-research .rxsu-home-section-heading { max-width: 860px; }
.rxsu-home-research__summary {
  max-width: 68ch;
  margin-top: 14px;
  color: var(--rxsu-home-muted);
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.7;
}
.rxsu-home-research__summary > :first-child { margin-top: 0; }
.rxsu-home-research__summary > :last-child { margin-bottom: 0; }
.rxsu-home-research__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--rxsu-home-brand);
  font-weight: 700;
  text-decoration: none;
}
.rxsu-home-research__cta:hover { text-decoration: underline; }
/* ── Research: กริดนิ่งเมื่อสามใบ · รางเลื่อนเมื่อมากกว่านั้น (0.77.0) ─────────
   ตัดสินจาก data-rxsu-count ที่ตัวเรนเดอร์ติดมา ไม่ใช่รอ JS วัดความกว้าง — หน้าที่
   กระโดดเปลี่ยนผังหลังโหลดเสร็จคือหน้าที่อ่านได้ว่าพัง */
.rxsu-home-research__viewport { position: relative; }
.rxsu-home-research__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.rxsu-home-research__viewport[data-rxsu-carousel="on"] .rxsu-home-research__grid {
  grid-auto-flow: column;
  /* ความกว้างคงที่ ไม่ใช่ minmax(0, …) — ขอบล่าง 0 ทำให้เจ็ดการ์ดบีบตัวลงจนพอดี
     คอนเทนเนอร์แล้วรางไม่ล้น จึงไม่มีอะไรให้เลื่อนเลย (วัดแล้ว: การ์ดเหลือ 153px
     และปุ่มทั้งสองข้างถูกปิดตั้งแต่โหลด) */
  grid-auto-columns: calc((100% - 44px) / 3);
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block-end: 4px;
  overscroll-behavior-inline: contain;
}
.rxsu-home-research__viewport[data-rxsu-carousel="on"] .rxsu-home-research__grid::-webkit-scrollbar { display: none; }
.rxsu-home-research__viewport[data-rxsu-carousel="on"] .rxsu-home-research-card { scroll-snap-align: start; }
/* ขอบไล่จางบอกว่ายังมีการ์ดต่ออยู่ทางนั้น — สัญญาณที่อ่านได้โดยไม่ต้องมีปุ่ม
   และหายไปเองเมื่อเลื่อนสุดทางแล้ว */
.rxsu-home-research__viewport[data-rxsu-carousel="on"]::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 56px;
  background: linear-gradient(to left, var(--rxsu-home-canvas, #ffffff), transparent);
  opacity: 1;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.rxsu-home-research__viewport.is-end::after { opacity: 0; }
.rxsu-home-research__controls { display: flex; gap: 8px; justify-content: flex-end; margin-block-start: 14px; }
.rxsu-home-research__nav {
  display: grid;
  place-items: center;
  /* 44px คือขนาดเป้าสัมผัสขั้นต่ำที่ PRODUCT.md กำหนดไว้ ไม่ใช่ตัวเลขที่เลือกให้พอดีตา */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rxsu-home-border);
  border-radius: 999px;
  background: var(--rxsu-home-paper);
  color: var(--rxsu-home-ink, #263126);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-home-research__nav:hover:not(:disabled) { border-color: var(--rxsu-home-accent, #007c72); }
.rxsu-home-research__nav:disabled { opacity: 0.4; cursor: default; }
.rxsu-home-research__nav:focus-visible { outline: 2px solid var(--rxsu-home-accent, #007c72); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .rxsu-home-research__viewport[data-rxsu-carousel="on"] .rxsu-home-research__grid { scroll-behavior: auto; }
  .rxsu-home-research__viewport[data-rxsu-carousel="on"]::after { transition: none; }
}
.rxsu-home-research-card {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--rxsu-home-border);
  border-radius: 10px;
  background: var(--rxsu-home-paper);
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rxsu-home-research-card.has-image { grid-template-columns: minmax(138px, 0.9fr) minmax(0, 1.15fr); }
.rxsu-home-research-card__media { display: block; min-height: 260px; overflow: hidden; }
.rxsu-home-research-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Breathing room. 24px measured on the live card, which is right on a phone and
 * tight once the column widens - the summary runs to the border at desktop
 * width. The clamp keeps the phone value and only spends the extra room where
 * there is room to spend. */
.rxsu-home-research-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(22px, 1.9vw, 30px);
}
/* Two selectors deep on purpose, not by habit. This heading is declared at
 * line-height 1.5 (28.8px at 19.2px) and the live page measures 34px, so a
 * theme rule of at least equal specificity is already winning here. A weight
 * declared at 0,1,1 would lose the same way and the fix would look applied
 * while changing nothing. */
.rxsu-home-research-card .rxsu-home-research-card__body h3 {
  margin: 0 0 10px;
  color: var(--rxsu-home-brand);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.45;
}
/* The heading measured weight 400 - the same weight as the summary beneath it,
 * at 1.2x the size. That is not enough separation for an eye scanning a row of
 * three, so the weight carries the hierarchy and the summary steps down a size
 * to widen the interval. */
.rxsu-home-research-card__summary {
  margin: 0 0 22px;
  color: var(--rxsu-home-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.rxsu-home-research-card__body > a {
  position: relative;
  margin-top: auto;
  color: var(--rxsu-home-brand);
  font-weight: 700;
  text-decoration: none;
}
.rxsu-home-research-card__body > a:hover { text-decoration: underline; }
/* The hover state has to be honest: a card that lifts under the pointer but
 * only accepts a click on two small targets inside it is worse than a card that
 * does nothing. The card already carries a link to the record and a decorative
 * media anchor to the same URL, so stretching that one link over the card makes
 * the whole surface the click target it now looks like. No markup changes and
 * no second link: the media anchor is aria-hidden with tabindex="-1", so the
 * accessibility tree and the tab order both still see exactly one link. */
.rxsu-home-research-card__body > a::after { position: absolute; content: ''; inset: 0; }
.rxsu-home-research-card:hover,
.rxsu-home-research-card:focus-within {
  border-color: var(--rxsu-home-brand);
  box-shadow: 0 10px 24px -14px rgba(20, 40, 34, 0.45);
  transform: translateY(-2px);
}
.rxsu-home-research-card:hover .rxsu-home-research-card__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .rxsu-home-research-card,
  .rxsu-home-research-card__media img { transition: none; }
  .rxsu-home-research-card:hover,
  .rxsu-home-research-card:focus-within { transform: none; }
  .rxsu-home-research-card:hover .rxsu-home-research-card__media img { transform: none; }
}

/* Donation */
.rxsu-home-donation {
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(1760px, calc(100% - clamp(32px, 7vw, 112px)));
  min-height: clamp(260px, 15vw, 320px);
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--rxsu-home-soft);
  background-image: var(--rxsu-donation-image, none);
  background-position: var(--rxsu-donation-focal, center center);
  background-size: cover;
}
.rxsu-home-donation::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(251, 252, 249, 0.97) 0%, rgba(251, 252, 249, 0.94) 25%, rgba(251, 252, 249, 0.72) 38%, rgba(251, 252, 249, 0.3) 50%, rgba(251, 252, 249, 0) 62%);
  pointer-events: none;
}
.rxsu-home-donation::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: var(--rxsu-home-primary);
  pointer-events: none;
}
.rxsu-home-donation > .rxsu-home-container {
  display: flex;
  width: 100%;
  align-items: center;
  padding-inline: clamp(32px, 6vw, 96px);
}
.rxsu-home-donation__panel {
  width: min(650px, 50%);
  padding-block: clamp(20px, 2vw, 32px);
  border: 0;
  background: transparent;
}
.rxsu-home-donation h2 { font-size: clamp(1.6rem, 2vw, 2.125rem); line-height: 1.45; text-wrap: balance; }
.rxsu-home-donation__body { max-width: 62ch; margin: 10px 0 16px; color: var(--rxsu-home-muted); font-size: 0.95rem; line-height: 1.55; }
.rxsu-home-donation .rxsu-home-button {
  border-color: var(--rxsu-home-primary);
  background-color: var(--rxsu-home-primary);
}
.rxsu-home-donation .rxsu-home-button:hover {
  border-color: var(--rxsu-home-primary);
  background-color: var(--rxsu-home-primary);
  filter: brightness(0.92);
  box-shadow: 0 7px 18px rgba(125, 143, 106, 0.24);
}

@media (max-width: 1100px) {
  .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-4c8ce10 {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
  }
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-4c8ce10 > .elementor-element-0b3fdbf,
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-4c8ce10 > .elementor-element-0b3fdbf > .elementor-element-44acd70,
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-44acd70 > .elementor-widget-container,
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-44acd70 a {
    width: 320px !important;
  }
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 img.wp-image-1310 {
    width: 310px !important;
    min-width: 310px !important;
  }
  .rxsu-home-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rxsu-home-path:nth-child(2) { border-right: 0; }
  .rxsu-home-path:nth-child(-n + 2) { border-bottom: 1px solid var(--rxsu-home-border); }
  .rxsu-home-event { grid-template-columns: 108px auto minmax(0, 1fr) 44px; }
  .rxsu-home-event.is-text-only { grid-template-columns: 108px minmax(0, 1fr) 44px; }
  .rxsu-home-research__grid { grid-template-columns: 1fr; }
  .rxsu-home-research__viewport[data-rxsu-carousel="on"] .rxsu-home-research__grid {
    grid-auto-columns: 86%;
    grid-template-columns: none;
  }
  .rxsu-home-research-card.has-image { grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); }
  .rxsu-home-research-card__media { min-height: 220px; }
}

@media (max-width: 800px) {
  .rxsu-home-container,
  .rxsu-managed-shell-fallback,
  .rxsu-home-hero__inner { width: calc(100% - 48px); }
  .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-4c8ce10 {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 72px !important;
    padding-inline: 10px !important;
  }
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 > .elementor-element-552047b,
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 > .elementor-element-552047b.elementor-sticky--active {
    min-height: 112px !important;
  }
  .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-89d32d4,
  .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-89d32d4.elementor-sticky--active {
    top: auto !important;
    min-height: 40px !important;
  }
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-4c8ce10 > .elementor-element-0b3fdbf,
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-4c8ce10 > .elementor-element-0b3fdbf > .elementor-element-44acd70,
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-44acd70 > .elementor-widget-container,
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 .elementor-element-44acd70 a {
    width: min(230px, calc(100vw - 104px)) !important;
  }
  .rxsu-managed-homepage-body .rxsu-managed-shell-header--draft-6924 .elementor-6924 img.wp-image-1310 {
    width: 228px !important;
    min-width: 0 !important;
    max-height: 54px !important;
    object-fit: contain;
  }
  .rxsu-home-hero { min-height: 640px; }
  .rxsu-home-hero__slide { align-items: end; }
  .rxsu-managed-homepage-body .rxsu-home-hero__image {
    object-fit: var(--rxsu-hero-fit-tablet, cover) !important;
    object-position: var(--rxsu-hero-focal-tablet, center top);
    transform: scale(1.035);
    transform-origin: var(--rxsu-hero-focal-tablet, center top);
  }
  .rxsu-home-hero__inner { padding-block: 150px 96px; }
  .rxsu-home-hero__panel { width: min(620px, 100%); }
  .rxsu-home-hero__controls { right: auto; left: 24px; bottom: 20px; }
  .rxsu-home-metrics__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .rxsu-home-metrics__grid > div:nth-child(2) { border-right: 0; }
  .rxsu-home-donation { width: calc(100% - 48px); min-height: 340px; }
  .rxsu-home-donation::before { background: linear-gradient(90deg, rgba(251, 252, 249, 0.97) 0%, rgba(251, 252, 249, 0.92) 42%, rgba(251, 252, 249, 0.58) 68%, rgba(251, 252, 249, 0.12) 92%); }
  .rxsu-home-donation > .rxsu-home-container { padding-inline: 32px; }
  .rxsu-home-donation__panel { width: min(620px, 72%); }
}

/* The responsive <picture> switches to Tablet artwork through 1024px. Keep
 * focal-point and fit behavior on the same breakpoint so the selected frame
 * never disagrees with the image file being delivered. */
@media (min-width: 601px) and (max-width: 1024px) {
  .rxsu-managed-homepage-body .rxsu-home-hero__image {
    object-fit: var(--rxsu-hero-fit-tablet, cover) !important;
    object-position: var(--rxsu-hero-focal-tablet, center top);
    transform: scale(1.035);
    transform-origin: var(--rxsu-hero-focal-tablet, center top);
  }
  .rxsu-home-hero__slide.is-fit-tablet-contain .rxsu-home-hero__image {
    transform: none !important;
  }
}

@media (max-width: 1023px) {
  /* The narrow framing rail has no room left beside the reading column, so the
   * two stack and the intro copy is allowed the full measure again. */
  .rxsu-home-degrees__layout { grid-template-columns: minmax(0, 1fr); }
  .rxsu-home-notices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rxsu-home-degrees__intro { max-width: 60ch; }
  .rxsu-managed-homepage-body .rxsu-news-list-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article,
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article.has-image,
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    min-height: 100%;
    padding: 0;
    border: 1px solid var(--rxsu-home-border);
    border-radius: 12px;
    background: var(--rxsu-home-paper);
  }
  /* Below this width the rows become stacked cards with no media rail, so the
   * desktop placeholder tile has no column to live in. */
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only::before {
    display: none;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-image {
    grid-row: 1;
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-content {
    grid-row: 2;
    grid-column: 1;
    padding: 18px 8px 18px 18px;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-v2 .rxsu-news-list-arrow {
    grid-row: 2;
    grid-column: 2;
    align-self: end;
    margin: 8px 6px 8px 0;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only .rxsu-news-list-content {
    display: block;
    grid-row: 1;
    grid-column: 1;
    padding: 22px 8px 22px 22px;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only .rxsu-news-list-arrow {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
    margin: 8px 6px 8px 0;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article:hover,
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article:focus-within {
    background: color-mix(in srgb, var(--rxsu-home-soft) 58%, var(--rxsu-home-paper));
  }
}

@media (max-width: 767px) {
  .rxsu-managed-homepage-body .rxsu-news-list-v2 { grid-template-columns: 1fr; }
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only {
    min-height: 0;
    padding: 0;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article.is-text-only .rxsu-news-list-content {
    padding: 20px 8px 20px 20px;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-v2 article h3 {
    font-size: 1.0625rem;
    -webkit-line-clamp: 4;
  }
  .rxsu-managed-homepage-body .rxsu-news-list-summary {
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 600px) {
  .rxsu-home-container,
  .rxsu-home-notices,
  .rxsu-managed-shell-fallback,
  .rxsu-home-hero__inner { width: calc(100% - 32px); }
  .rxsu-home-notices__grid { grid-template-columns: minmax(0, 1fr); }
  .rxsu-home-section { padding-block: 48px; }
  .rxsu-home-section-heading { margin-bottom: 22px; }
  .rxsu-managed-homepage-body .rxsu-news-featured-v2.is-text-only .rxsu-news-body {
    min-height: 280px;
    padding: 28px 22px;
  }
  .rxsu-managed-homepage-body .rxsu-news-featured-v2.is-text-only h3 {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .rxsu-home-hero { min-height: 660px; }
  .rxsu-home-hero__media { inset: 0; width: 100%; height: 100%; background: none; }
  .rxsu-managed-homepage-body .rxsu-home-hero__image {
    object-fit: var(--rxsu-hero-fit-mobile, cover) !important;
    object-position: var(--rxsu-hero-focal-mobile, center top);
    transform: scale(1.045);
    transform-origin: var(--rxsu-hero-focal-mobile, center top);
  }
  .rxsu-home-hero__slide.is-fit-mobile-contain .rxsu-home-hero__media {
    background: var(--rxsu-home-ink);
  }
  .rxsu-home-hero__slide.is-fit-mobile-contain .rxsu-home-hero__image {
    transform: none !important;
  }
  .rxsu-home-hero__media::after { background: rgba(18, 31, 22, 0.16); }
  .rxsu-home-hero__inner { padding-block: 96px 104px; }
  .rxsu-home-hero__panel {
    width: 100%;
    padding: 22px 8px;
    border: 0;
    background: transparent;
  }
  .rxsu-home-hero__panel::before { inset: -36px -42px -36px -24px; }
  .rxsu-home-hero h1,
  .rxsu-home-hero h2 { font-size: clamp(1.85rem, calc(var(--rxsu-hero-title-size, 52px) * 0.78), 2.75rem) !important; }
  .rxsu-home-hero__eyebrow { font-size: 0.9rem; }
  .rxsu-home-hero__body { margin-block: 16px 20px; font-size: 0.98rem; line-height: 1.58; }
  .rxsu-home-hero__controls { right: auto; bottom: 14px; left: 16px; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; }
  .rxsu-home-hero__dots { order: initial; flex: 0 1 auto; justify-content: flex-start; }
  .rxsu-home-paths__grid,
  .rxsu-home-awards__grid,
  .rxsu-home-metrics__grid { grid-template-columns: 1fr; }
  .rxsu-home-path { min-height: 100px; border-right: 0; border-bottom: 1px solid var(--rxsu-home-border); }
  .rxsu-home-path:last-child { border-bottom: 0; }
  /* On a phone the panel keeps the left edge but the poster gives up its own
   * column: at 375px a third column leaves the title about 200px, which wraps a
   * Thai event name to five lines. The poster sits under the copy instead,
   * where it can be wide enough to recognise. */
  .rxsu-home-event {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
      "date copy"
      "date poster";
  }
  .rxsu-home-event.is-text-only {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "date copy";
  }
  .rxsu-home-event__date { grid-area: date; padding: 18px 8px; }
  .rxsu-home-event__day { font-size: 1.75rem; }
  /* The range rule carries two classes and would otherwise outrank the phone
   * size above it, which is how "26–30" ended up wider than its own panel. */
  .rxsu-home-event__date--range .rxsu-home-event__day { font-size: 1.375rem; }
  .rxsu-home-event__copy,
  .rxsu-home-event.is-text-only .rxsu-home-event__copy { grid-area: copy; padding: 16px; }
  .rxsu-home-event__poster {
    grid-area: poster;
    justify-self: start;
    width: auto;
    max-width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 8px;
    border: 1px solid var(--rxsu-home-border);
    border-radius: 8px;
  }
  .rxsu-home-event__poster img { max-height: 116px; }
  /* The whole row is the target on a touch screen, so a 52px column holding a
   * single glyph is width the title needs more. */
  .rxsu-home-event__arrow { display: none; }
  .rxsu-home-metrics__grid > div { border-right: 0; border-bottom: 1px solid var(--rxsu-home-border); padding-block: 20px; }
  .rxsu-home-metrics__grid > div:last-child { border-bottom: 0; }
  .rxsu-home-research-card.has-image { grid-template-columns: 1fr; }
  .rxsu-home-research-card__media { aspect-ratio: 16 / 9; min-height: 0; }
  .rxsu-home-donation { width: 100%; min-height: 420px; background-position: var(--rxsu-donation-focal, center center); }
  .rxsu-home-donation::before { background: linear-gradient(90deg, rgba(251, 252, 249, 0.96) 0%, rgba(251, 252, 249, 0.9) 62%, rgba(251, 252, 249, 0.62) 100%); }
  .rxsu-home-donation > .rxsu-home-container { width: 100%; padding-inline: 20px; }
  .rxsu-home-donation__panel { width: 100%; padding-block: 36px; }
  .rxsu-home-donation h2 { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .rxsu-home-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rxsu-managed-homepage-body *,
  .rxsu-managed-homepage-body *::before,
  .rxsu-managed-homepage-body *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Card rows on a phone ────────────────────────────────────────────────────
   Every row on the managed home page collapses to a single column below 767px,
   which measured 12,112px of page on a 390px screen - the บริการวิชาการ row
   alone was 1,449px for four cards. Flowing sideways with the next card peeking
   brings that row to 434px and the page to 9,322px, measured on the live page.

   Scroll-snap rather than a carousel library: momentum is native, the cards stay
   in the accessibility tree instead of being hidden and swapped, it costs no
   script, and it degrades to a plain scrollable strip where snapping is absent.

   No negative margin to bleed past the section: that inset belongs to the
   section and changes by breakpoint, and guessing it overflowed the page by 4px
   at 390px when it was tried on the programmes row.

   Gated on the wrapper class, so ตั้งค่าการแสดงผล switches the original stacked
   layout back without touching any content. */
@media (max-width: 767px) {
  .rxsu-home-rows--scroll .rxsu-home-events__list,
  .rxsu-home-rows--scroll .rxsu-home-research__grid,
  .rxsu-home-rows--scroll .rxsu-home-paths__grid,
  .rxsu-home-rows--scroll .rxsu-home-metrics__grid,
  .rxsu-home-rows--scroll .rxsu-home-awards__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    /* The bar is chrome, not content. iOS hides it on its own; Android and
       desktop leave it sitting under the cards, which is the first thing that
       reads as unfinished. Scrolling by touch, wheel and keyboard is unchanged
       - only the bar is hidden, and the peeking card is what says there is
       more. */
    scrollbar-width: none;
  }

  .rxsu-home-rows--scroll .rxsu-home-events__list::-webkit-scrollbar,
  .rxsu-home-rows--scroll .rxsu-home-research__grid::-webkit-scrollbar,
  .rxsu-home-rows--scroll .rxsu-home-paths__grid::-webkit-scrollbar,
  .rxsu-home-rows--scroll .rxsu-home-metrics__grid::-webkit-scrollbar,
  .rxsu-home-rows--scroll .rxsu-home-awards__grid::-webkit-scrollbar {
    display: none;
  }

  .rxsu-home-rows--scroll .rxsu-home-events__list > *,
  .rxsu-home-rows--scroll .rxsu-home-research__grid > *,
  .rxsu-home-rows--scroll .rxsu-home-paths__grid > *,
  .rxsu-home-rows--scroll .rxsu-home-metrics__grid > *,
  .rxsu-home-rows--scroll .rxsu-home-awards__grid > * {
    scroll-snap-align: start;
  }

  /* Focus shows on the scroller itself: arrow keys scroll whatever holds it. */
  .rxsu-home-rows--scroll [class*="rxsu-home-"]:focus-visible {
    outline: 3px solid var(--rxsu-home-accent);
    outline-offset: 4px;
  }
}

/* Less motion means the jump, not the glide. */
@media (prefers-reduced-motion: reduce) {
  .rxsu-home-rows--scroll .rxsu-home-events__list,
  .rxsu-home-rows--scroll .rxsu-home-research__grid { scroll-behavior: auto; }
}