/* ==========================================================================
   William V.S. Tubman University — v2 public theme
   --------------------------------------------------------------------------
   A single self-contained design system for the redesigned public site.
   Loaded only when SITE_THEME is 'v2'; the legacy template CSS is not loaded
   alongside it, so nothing here has to fight Bootstrap or the old style.css.

   Contents
     01  Design tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons & links
     06  Media, figures & dimensioned placeholders
     07  Site header & navigation
     08  Hero
     09  Credibility band (institutional facts)
     10  Audience router
     11  Cards (colleges, news, generic)
     12  Split features & prose
     13  Call-to-action bands
     14  Footer
     15  Utilities
     16  Motion & accessibility
   ========================================================================== */


/* 01  Design tokens ======================================================= */

:root {
    /* Brand. The deep green and gold are taken from the University crest and
       the existing site chrome; the green scale is built around #134529. */
    --tu-green-900: #0a2417;
    --tu-green-800: #10361f;
    --tu-green-700: #134529; /* primary */
    --tu-green-600: #1b5e3a;
    --tu-green-500: #2a7a4f;
    --tu-green-100: #e7f0ea;
    --tu-green-50:  #f3f8f5;

    /* Official brand yellow is #ffc415. At 1.7:1 on white it can never carry
       body text, so it is used for graphic accents, rules and dark-background
       text, and --tu-gold-700 is the darkened tint for yellow-as-text on white. */
    --tu-gold-700: #8a6800;
    --tu-gold-600: #d9a300;
    --tu-gold-500: #ffc415; /* brand accent */
    --tu-gold-400: #ffd04a;
    --tu-gold-100: #fff4d1;

    --tu-red-600: #da1f26;  /* brand red — reserved for the Portals action */

    /* Neutrals */
    --tu-ink:      #11201a;
    --tu-body:     #3f4d46;
    /* #6c7b74 was the natural tone here but measured 4.45:1 on white and 4.17:1
       on --tu-surface-2, i.e. below WCAG AA for body-size text. Darkened until
       it clears 4.5:1 on every surface it is actually used on. */
    --tu-muted:    #5f6e67;
    --tu-line:     #e2e8e4;
    --tu-line-soft:#eef2f0;
    --tu-surface:  #ffffff;
    --tu-surface-2:#f6f8f7;
    --tu-surface-3:#eef2ef;

    /* Typography */
    /* The brand guideline specifies Gotham Bold. Gotham is a licensed typeface, so
       Montserrat — the closest freely-servable geometric sans — stands in for it,
       and a real Gotham licence can be dropped in by editing this one line.
       To take the site in a serif, Ivy-adjacent direction instead, change this to:
       "Source Serif 4", Georgia, serif   (nothing else needs to change). */
    --tu-font-display: "Montserrat", "Gotham", "Segoe UI", Helvetica, Arial, sans-serif;
    --tu-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Fluid type scale — min at 360px, max at 1400px viewport */
    --tu-step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
    --tu-step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
    --tu-step-1:  clamp(1.19rem, 1.12rem + 0.32vw, 1.37rem);
    --tu-step-2:  clamp(1.41rem, 1.29rem + 0.53vw, 1.73rem);
    --tu-step-3:  clamp(1.68rem, 1.49rem + 0.84vw, 2.18rem);
    --tu-step-4:  clamp(2rem, 1.71rem + 1.29vw, 2.75rem);
    --tu-step-5:  clamp(2.38rem, 1.94rem + 1.93vw, 3.46rem);
    --tu-step-6:  clamp(2.83rem, 2.19rem + 2.84vw, 4.36rem);

    /* Space scale */
    --tu-space-1: 0.25rem;
    --tu-space-2: 0.5rem;
    --tu-space-3: 0.75rem;
    --tu-space-4: 1rem;
    --tu-space-5: 1.5rem;
    --tu-space-6: 2rem;
    --tu-space-7: 3rem;
    --tu-space-8: 4rem;
    --tu-space-9: 6rem;

    /* Structure */
    --tu-container: 1240px;
    --tu-container-narrow: 820px;
    --tu-gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
    --tu-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

    --tu-radius-sm: 4px;
    --tu-radius: 8px;
    --tu-radius-lg: 16px;

    --tu-shadow-1: 0 1px 2px rgba(17, 32, 26, 0.06), 0 2px 8px rgba(17, 32, 26, 0.04);
    --tu-shadow-2: 0 4px 12px rgba(17, 32, 26, 0.08), 0 12px 32px rgba(17, 32, 26, 0.07);
    --tu-shadow-3: 0 12px 28px rgba(17, 32, 26, 0.12), 0 32px 64px rgba(17, 32, 26, 0.10);

    --tu-header-h: 76px;
}


/* 02  Reset & base ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--tu-header-h) + 1rem);
}

body {
    margin: 0;
    font-family: var(--tu-font-body);
    font-size: var(--tu-step-0);
    line-height: 1.65;
    color: var(--tu-body);
    background: var(--tu-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

hr {
    border: 0;
    border-top: 1px solid var(--tu-line);
    margin: var(--tu-space-6) 0;
}

::selection { background: var(--tu-gold-100); color: var(--tu-green-900); }


/* 03  Typography ========================================================== */

h1, h2, h3, h4, h5, h6, .tu-display {
    font-family: var(--tu-font-display);
    color: var(--tu-ink);
    font-weight: 700; /* Gotham Bold per the brand guideline */
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--tu-space-4);
    text-wrap: balance;
}

h1, .tu-h1 { font-size: var(--tu-step-5); }
h2, .tu-h2 { font-size: var(--tu-step-4); }
h3, .tu-h3 { font-size: var(--tu-step-3); }
h4, .tu-h4 { font-size: var(--tu-step-2); }
h5, .tu-h5 { font-size: var(--tu-step-1); }
h6, .tu-h6 { font-size: var(--tu-step-0); }

p { margin: 0 0 var(--tu-space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.tu-lead {
    font-size: var(--tu-step-1);
    line-height: 1.6;
    color: var(--tu-body);
}

/* Small caps label that sits above a heading. Used to orient the reader
   without adding another heading level to the document outline. */
.tu-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--tu-space-2);
    font-family: var(--tu-font-body);
    font-size: var(--tu-step--1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tu-green-600);
    margin: 0 0 var(--tu-space-3);
}

.tu-eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--tu-gold-500);
    flex: none;
}

.tu-eyebrow--light { color: var(--tu-gold-400); }

/* Section heading block */
.tu-section-head { max-width: 62ch; margin-bottom: var(--tu-space-7); }
.tu-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.tu-section-head--center .tu-eyebrow { justify-content: center; }
.tu-section-head > :last-child { margin-bottom: 0; }


/* 04  Layout primitives =================================================== */

.tu-container {
    width: 100%;
    max-width: var(--tu-container);
    margin-inline: auto;
    padding-inline: var(--tu-gutter);
}

.tu-container--narrow { max-width: var(--tu-container-narrow); }

.tu-section { padding-block: var(--tu-section-y); }
.tu-section--tight { padding-block: calc(var(--tu-section-y) * 0.6); }
.tu-section--surface { background: var(--tu-surface-2); }
/* For a section that follows another directly, so their paddings don't stack
   into a large empty band (search results under the filter bar). */
.tu-section--flush-top { padding-top: 0; }
.tu-section--dark { background: var(--tu-green-800); color: rgba(255,255,255,0.82); }
.tu-section--dark h1, .tu-section--dark h2, .tu-section--dark h3, .tu-section--dark h4 { color: #fff; }

.tu-grid { display: grid; gap: var(--tu-space-5); }
.tu-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tu-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tu-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Auto-fit grids keep card rows sensible without media-query bookkeeping. */
.tu-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tu-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tu-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.tu-stack { display: flex; flex-direction: column; gap: var(--tu-space-4); }
.tu-cluster { display: flex; flex-wrap: wrap; gap: var(--tu-space-3); align-items: center; }

@media (max-width: 900px) {
    .tu-grid--3, .tu-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .tu-grid--2, .tu-grid--3, .tu-grid--4 { grid-template-columns: minmax(0, 1fr); }
}


/* 05  Buttons & links ===================================================== */

a { color: var(--tu-green-600); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--tu-green-700); }

.tu-btn {
    --btn-bg: var(--tu-green-700);
    --btn-fg: #fff;
    --btn-bd: var(--tu-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tu-space-2);
    padding: 0.85em 1.6em;
    font-family: var(--tu-font-body);
    font-size: var(--tu-step-0);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1.5px solid var(--btn-bd);
    border-radius: var(--tu-radius-sm);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.tu-btn:hover {
    color: var(--btn-fg);
    transform: translateY(-1px);
    box-shadow: var(--tu-shadow-2);
}

.tu-btn:active { transform: translateY(0); box-shadow: none; }

.tu-btn--gold  { --btn-bg: var(--tu-gold-500); --btn-bd: var(--tu-gold-500); --btn-fg: var(--tu-green-900); }
.tu-btn--ghost { --btn-bg: transparent; --btn-bd: currentColor; --btn-fg: var(--tu-green-700); }
.tu-btn--on-dark { --btn-bg: #fff; --btn-bd: #fff; --btn-fg: var(--tu-green-800); }
.tu-btn--ghost-on-dark { --btn-bg: transparent; --btn-bd: rgba(255,255,255,0.55); --btn-fg: #fff; }
.tu-btn--ghost-on-dark:hover { --btn-bg: rgba(255,255,255,0.12); --btn-bd: #fff; }
.tu-btn--sm { padding: 0.6em 1.15em; font-size: var(--tu-step--1); }
.tu-btn--lg { padding: 1em 2em; font-size: var(--tu-step-1); }
.tu-btn--block { width: 100%; }

/* Text link with a trailing arrow that advances on hover. */
.tu-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: var(--tu-space-2);
    font-weight: 600;
    text-decoration: none;
    color: var(--tu-green-700);
}
.tu-arrow-link::after {
    content: "\2192";
    transition: transform 0.18s ease;
}
.tu-arrow-link:hover::after { transform: translateX(4px); }
.tu-arrow-link--light { color: var(--tu-gold-400); }


/* 06  Media, figures & dimensioned placeholders =========================== */

.tu-media {
    position: relative;
    overflow: hidden;
    background: var(--tu-surface-3);
    border-radius: var(--tu-radius);
}
.tu-media > img { width: 100%; height: 100%; object-fit: cover; }
/* A placeholder must occupy exactly the box its photograph will, otherwise the
   page reflows the day a real image is uploaded. */
.tu-media > .tu-ph { height: 100%; }

.tu-ratio-16x9 { aspect-ratio: 16 / 9; }
.tu-ratio-banner { aspect-ratio: 20 / 7; }
.tu-ratio-3x2  { aspect-ratio: 3 / 2; }
.tu-ratio-4x3  { aspect-ratio: 4 / 3; }
.tu-ratio-1x1  { aspect-ratio: 1 / 1; }
.tu-ratio-3x4  { aspect-ratio: 3 / 4; }

/* --- Dimensioned placeholder ------------------------------------------------
   Stands in for photography that has not been supplied yet. It is deliberately
   visible rather than decorative: it names the slot, states the exact pixel
   size required, and tells staff where to upload the real image. Every one of
   these disappears on its own the moment a real image exists for that slot. */
.tu-ph {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tu-space-2);
    padding: var(--tu-space-5);
    text-align: center;
    color: var(--tu-green-700);
    background-color: var(--tu-green-50);
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(19, 69, 41, 0.055) 0 12px,
            transparent 12px 24px
        );
    border: 1.5px dashed rgba(19, 69, 41, 0.34);
    border-radius: inherit;
    overflow: hidden;
}

.tu-ph__icon { width: 30px; height: 30px; opacity: 0.55; }

.tu-ph__label {
    font-family: var(--tu-font-body);
    font-size: var(--tu-step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
}

.tu-ph__dims {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25em 0.7em;
    color: var(--tu-green-800);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(19, 69, 41, 0.2);
    border-radius: 100px;
    white-space: nowrap;
}

.tu-ph__hint {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--tu-green-600);
    opacity: 0.85;
    max-width: 34ch;
}

/* On dark backgrounds (hero) the placeholder inverts so it stays readable. */
.tu-ph--invert {
    color: rgba(255, 255, 255, 0.92);
    background-color: var(--tu-green-800);
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.05) 0 14px,
            transparent 14px 28px
        );
    border-color: rgba(255, 255, 255, 0.35);
}
.tu-ph--invert .tu-ph__dims {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
}
.tu-ph--invert .tu-ph__hint { color: rgba(255, 255, 255, 0.75); }

/* Compact variant for small slots where the hint would not fit. */
.tu-ph--compact { padding: var(--tu-space-3); gap: var(--tu-space-1); }
.tu-ph--compact .tu-ph__hint,
.tu-ph--compact .tu-ph__icon { display: none; }
.tu-ph--compact .tu-ph__label { font-size: 0.68rem; }
.tu-ph--compact .tu-ph__dims { font-size: 0.68rem; padding: 0.15em 0.5em; }


/* --- Content still to be supplied -------------------------------------------
   The textual equivalent of a dimensioned image placeholder. Used where the
   site must state a fact the University holds but the codebase does not —
   fee amounts, application deadlines, visa procedure. Never invent these:
   mark them, and they are visible until someone authoritative fills them in. */
.tu-todo {
    display: flex;
    gap: var(--tu-space-3);
    padding: var(--tu-space-4) var(--tu-space-5);
    margin-block: var(--tu-space-4);
    background: var(--tu-gold-100);
    border: 1px solid rgba(217, 163, 0, 0.45);
    border-left: 3px solid var(--tu-gold-500);
    border-radius: var(--tu-radius-sm);
    font-size: 0.93rem;
    color: #5c4700;
}
.tu-todo__icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--tu-gold-700); }
.tu-todo strong { display: block; color: #4a3900; margin-bottom: 2px; }
.tu-todo p { margin: 0; }


/* 07  Site header & navigation ============================================ */

.tu-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: var(--tu-space-3) var(--tu-space-5);
    background: var(--tu-green-700);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.tu-skip:focus { left: var(--tu-space-4); top: var(--tu-space-4); color: #fff; }

/* Utility strip above the masthead */
.tu-utility {
    background: var(--tu-green-900);
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--tu-step--1);
}
.tu-utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tu-space-4);
    min-height: 40px;
    flex-wrap: wrap;
}
/* min-width:0 lets the link list actually shrink and wrap inside the flex row;
   without it the list keeps its max-content width and pushes the strip wide. */
.tu-utility__links { min-width: 0; }
.tu-utility a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    padding: 0.55rem 0;
}
.tu-utility a:hover { color: #fff; }
.tu-utility__links { display: flex; flex-wrap: wrap; gap: var(--tu-space-5); }
.tu-utility__tag { font-weight: 500; letter-spacing: 0.02em; }

@media (max-width: 860px) {
    .tu-utility__tag { display: none; }
    .tu-utility__inner { justify-content: center; }
    .tu-utility__links { gap: var(--tu-space-4); justify-content: center; }
}
@media (max-width: 520px) {
    .tu-utility { font-size: 0.78rem; }
    .tu-utility__links { gap: var(--tu-space-3); }
}

/* Masthead */
.tu-masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--tu-surface);
    border-bottom: 1px solid var(--tu-line);
    transition: box-shadow 0.2s ease;
}
.tu-masthead.is-stuck { box-shadow: var(--tu-shadow-1); }

/* Row 1: identity + actions. Row 2: the menu. */
.tu-masthead__top-inner {
    display: flex;
    align-items: center;
    gap: var(--tu-space-4);
    min-height: var(--tu-header-h);
}

.tu-masthead__bar {
    border-top: 1px solid var(--tu-line-soft);
    background: var(--tu-surface);
}

/* Legacy single-row class, kept so any view still using it renders sanely. */
.tu-masthead__inner {
    display: flex;
    align-items: center;
    gap: var(--tu-space-4);
    min-height: var(--tu-header-h);
}

.tu-brand {
    display: flex;
    align-items: center;
    gap: var(--tu-space-3);
    text-decoration: none;
    margin-right: auto;
    min-width: 0; /* allows the long university name to shrink rather than
                     push the Apply button past the edge of the viewport */
}
.tu-brand__crest { width: 46px; height: 46px; object-fit: contain; flex: none; }
.tu-brand__text { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
/* Two-line lockup: "William V.S." over "Tubman University". Narrower than the
   full name on one line, which was squeezed to an ellipsis on 1280px laptops
   once the menu filled out. */
.tu-brand__pre {
    font-family: var(--tu-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tu-muted);
    white-space: nowrap;
}

.tu-brand__name {
    font-family: var(--tu-font-display);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--tu-green-800);
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 560px) {
    .tu-brand__crest { width: 38px; height: 38px; }
    .tu-brand__name { font-size: 0.95rem; }
    .tu-brand__pre { font-size: 0.6rem; letter-spacing: 0.1em; }
    :root { --tu-header-h: 64px; }
}

/* Primary nav */
.tu-nav { display: flex; align-items: center; gap: var(--tu-space-1); }
.tu-nav__item { position: relative; }

.tu-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.7rem 0.62rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--tu-ink);
    text-decoration: none;
    border-radius: var(--tu-radius-sm);
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.tu-nav__link:hover,
.tu-nav__item.is-open > .tu-nav__link {
    color: var(--tu-green-700);
    background: var(--tu-green-50);
}
.tu-nav__link[aria-expanded]::after {
    content: "";
    width: 0.42em;
    height: 0.42em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform 0.18s ease;
}
.tu-nav__item.is-open > .tu-nav__link[aria-expanded]::after { transform: translateY(0.1em) rotate(225deg); }

/* Dropdown panel */
.tu-nav__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 110;
    min-width: 260px;
    padding: var(--tu-space-3);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    box-shadow: var(--tu-shadow-3);
    display: none;
}
.tu-nav__item.is-open > .tu-nav__panel { display: block; }
.tu-nav__panel--right { left: auto; right: 0; }

.tu-nav__panel a {
    display: block;
    padding: 0.55rem 0.7rem;
    font-size: 0.92rem;
    color: var(--tu-body);
    text-decoration: none;
    border-radius: var(--tu-radius-sm);
}
.tu-nav__panel a:hover { background: var(--tu-green-50); color: var(--tu-green-700); }

.tu-nav__panel-title {
    font-family: var(--tu-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tu-muted);
    padding: var(--tu-space-2) 0.7rem var(--tu-space-1);
    margin: 0;
}

/* Wide panel for Academics-style menus */
.tu-nav__panel--mega {
    min-width: min(720px, calc(100vw - 2 * var(--tu-gutter)));
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tu-space-2) var(--tu-space-5);
}
.tu-nav__item.is-open > .tu-nav__panel--mega { display: grid; }
.tu-nav__panel--mega .tu-nav__panel-title { grid-column: 1 / -1; }

.tu-header-actions { display: flex; align-items: center; gap: var(--tu-space-3); flex: none; }

/* TU Portals — brand red, as on the legacy site, where people find it by colour. */
.tu-btn--red { --btn-bg: var(--tu-red-600); --btn-bd: var(--tu-red-600); --btn-fg: #fff; }

.tu-portals { position: relative; }
.tu-portals__btn::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.15em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    transition: transform 0.18s ease;
}
.tu-portals.is-open .tu-portals__btn::after { transform: translateY(0.1em) rotate(225deg); }

.tu-portals__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 120;
    display: none;
    min-width: 270px;
    padding: var(--tu-space-3);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-top: 3px solid var(--tu-red-600);
    border-radius: var(--tu-radius);
    box-shadow: var(--tu-shadow-3);
}
.tu-portals.is-open .tu-portals__menu { display: block; }
.tu-portals__menu a {
    display: block;
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    color: var(--tu-body);
    text-decoration: none;
    border-radius: var(--tu-radius-sm);
}
.tu-portals__menu a:hover { background: var(--tu-green-50); color: var(--tu-green-700); }
.tu-portals__menu a.is-pending { color: var(--tu-muted); }
.tu-portals__menu a.is-pending::after {
    content: "coming soon";
    margin-left: 0.5em;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tu-gold-700);
}

.tu-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius-sm);
    cursor: pointer;
    color: var(--tu-ink);
}
.tu-nav-toggle__bars, .tu-nav-toggle__bars::before, .tu-nav-toggle__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.tu-nav-toggle__bars { position: relative; }
.tu-nav-toggle__bars::before, .tu-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.tu-nav-toggle__bars::before { top: -6px; }
.tu-nav-toggle__bars::after { top: 6px; }
.tu-nav-toggle[aria-expanded="true"] .tu-nav-toggle__bars { background: transparent; }
.tu-nav-toggle[aria-expanded="true"] .tu-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.tu-nav-toggle[aria-expanded="true"] .tu-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
@media (max-width: 1200px) {
    .tu-nav-toggle { display: inline-flex; }
    /* Portals and Apply move into the drawer, where they are repeated. */
    .tu-header-actions .tu-btn,
    .tu-portals { display: none; }

    .tu-nav {
        position: fixed;
        inset: var(--tu-header-h) 0 0 auto;
        width: min(400px, 100%);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--tu-space-4) var(--tu-gutter) var(--tu-space-9);
        background: var(--tu-surface);
        border-left: 1px solid var(--tu-line);
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.28s ease, visibility 0.28s;
    }
    .tu-nav.is-open { transform: translateX(0); visibility: visible; }

    .tu-nav__link { width: 100%; justify-content: space-between; padding: 0.9rem 0.25rem; font-size: 1.02rem; }
    .tu-nav__item { border-bottom: 1px solid var(--tu-line-soft); }

    .tu-nav__panel, .tu-nav__panel--mega {
        position: static;
        display: none;
        min-width: 0;
        padding: 0 0 var(--tu-space-3) var(--tu-space-4);
        border: 0;
        box-shadow: none;
        background: none;
    }
    .tu-nav__item.is-open > .tu-nav__panel { display: block; }
    .tu-nav__item.is-open > .tu-nav__panel--mega { display: block; }

    .tu-nav__mobile-cta { display: flex; flex-direction: column; gap: var(--tu-space-3); padding-top: var(--tu-space-5); }
    .tu-nav__mobile-cta .tu-btn { display: inline-flex; }
}

@media (min-width: 1201px) {
    .tu-nav__mobile-cta,
    .tu-nav__item--drawer-only { display: none; }

    /* The menu row sits below the identity row and spans the container. */
    .tu-nav { justify-content: flex-start; gap: 0; }
    .tu-nav__link { padding: 0.85rem 0.75rem; }
    .tu-nav__item > .tu-nav__link { border-bottom: 2px solid transparent; border-radius: 0; }
    .tu-nav__item:hover > .tu-nav__link,
    .tu-nav__item.is-open > .tu-nav__link { border-bottom-color: var(--tu-gold-500); background: transparent; }
    .tu-nav__panel { top: 100%; }
}

.tu-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(10, 36, 23, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
}
.tu-nav-scrim.is-open { opacity: 1; visibility: visible; }

body.tu-nav-open { overflow: hidden; }


/* 08  Hero ================================================================ */

.tu-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(460px, 68vh, 760px);
    background: var(--tu-green-800);
    isolation: isolate;
    overflow: hidden;
}

/* --- Hero slideshow ---------------------------------------------------------
   Slides cross-fade rather than slide, so a caption change never drags the
   layout sideways. Only the active slide is in the accessibility tree. */
.tu-hero__slides { position: absolute; inset: 0; z-index: -2; }
.tu-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
}
.tu-hero__slide.is-active { opacity: 1; }
.tu-hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Captions share one grid cell so the hero keeps its height between slides of
   differing text length. Every row is placed explicitly — leaving the eyebrow
   on auto-placement pushed it below the buttons, since rows 1 and 2 were taken. */
.tu-hero--slides .tu-hero__content {
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.tu-hero--slides .tu-eyebrow { grid-row: 1; grid-column: 1; }
.tu-hero__caption {
    grid-row: 2;
    grid-column: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
}
.tu-hero__caption.is-active { opacity: 1; visibility: visible; transform: none; }
.tu-hero--slides .tu-hero__actions { grid-row: 3; grid-column: 1; }

.tu-hero__controls {
    display: flex;
    align-items: center;
    gap: var(--tu-space-3);
    margin-top: var(--tu-space-6);
}
.tu-hero__arrow, .tu-hero__pause {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.tu-hero__arrow:hover, .tu-hero__pause:hover { background: rgba(255, 255, 255, 0.24); }
.tu-hero__arrow svg, .tu-hero__pause svg { width: 18px; height: 18px; }
.tu-hero__pause { margin-left: auto; }

.tu-hero__dots { display: flex; gap: var(--tu-space-2); }
.tu-hero__dot {
    width: 28px;
    height: 4px;
    padding: 0;
    background: rgba(255, 255, 255, 0.35);
    border: 0;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.2s ease, width 0.2s ease;
}
.tu-hero__dot.is-active { background: var(--tu-gold-500); width: 44px; }

@media (max-width: 560px) {
    .tu-hero__pause { display: none; }
    .tu-hero__controls { margin-top: var(--tu-space-5); }
}

.tu-hero__media { position: absolute; inset: 0; z-index: -2; }
.tu-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* In the hero the placeholder must not compete with the headline, which sits
   bottom-left, so its labelling is pushed to the top-right and quietened. */
.tu-hero__media .tu-ph {
    height: 100%;
    border-radius: 0;
    border-width: 0;
    justify-content: flex-start;
    align-items: flex-end;
    padding: var(--tu-space-6) var(--tu-gutter);
    text-align: right;
    opacity: 0.8;
}
.tu-hero__media .tu-ph__hint { max-width: 30ch; }

@media (max-width: 860px) {
    .tu-hero__media .tu-ph__hint,
    .tu-hero__media .tu-ph__icon { display: none; }
}

/* Scrim keeps headline contrast above 4.5:1 whatever photograph is used. */
.tu-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(10, 36, 23, 0.92) 0%, rgba(10, 36, 23, 0.62) 38%, rgba(10, 36, 23, 0.25) 70%, rgba(10, 36, 23, 0.35) 100%);
}

.tu-hero__inner { padding-block: clamp(2.5rem, 1rem + 7vw, 5rem); }
.tu-hero__content { max-width: 47rem; color: rgba(255, 255, 255, 0.9); }

.tu-hero__title {
    font-size: var(--tu-step-6);
    color: #fff;
    margin-bottom: var(--tu-space-4);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
.tu-hero__title em {
    font-style: normal;
    color: var(--tu-gold-400);
}

.tu-hero__text {
    font-size: var(--tu-step-1);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    max-width: 42rem;
    margin-bottom: var(--tu-space-6);
}

.tu-hero__actions { display: flex; flex-wrap: wrap; gap: var(--tu-space-3); }

/* Slim page hero for interior pages */
.tu-pagehead {
    position: relative;
    background: var(--tu-green-800);
    color: rgba(255, 255, 255, 0.85);
    padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
    isolation: isolate;
    overflow: hidden;
}
.tu-pagehead__media { position: absolute; inset: 0; z-index: -2; opacity: 0.35; }
.tu-pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.tu-pagehead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right, rgba(10, 36, 23, 0.95), rgba(10, 36, 23, 0.7));
}
.tu-pagehead h1 { color: #fff; max-width: 24ch; margin-bottom: var(--tu-space-3); }
.tu-pagehead__text { max-width: 60ch; font-size: var(--tu-step-1); color: rgba(255,255,255,0.82); }

/* Slim strip naming the banner image a page is still missing. Kept out of the
   banner itself so an absent photograph never dwarfs the page title. */
.tu-banner-note { background: var(--tu-surface-2); border-bottom: 1px solid var(--tu-line); }
.tu-banner-note .tu-ph {
    border: 0;
    background-image: none;
    background-color: transparent;
    flex-direction: row;
    gap: var(--tu-space-3);
    padding: var(--tu-space-3) 0;
}

/* Breadcrumb */
.tu-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tu-space-2);
    list-style: none;
    margin: 0 0 var(--tu-space-4);
    padding: 0;
    font-size: var(--tu-step--1);
    color: rgba(255, 255, 255, 0.62);
}
.tu-crumbs a { color: var(--tu-gold-400); text-decoration: none; }
.tu-crumbs a:hover { text-decoration: underline; }
.tu-crumbs li + li::before { content: "/"; margin-right: var(--tu-space-2); opacity: 0.5; }


/* 09  Credibility band ==================================================== */

.tu-facts {
    background: var(--tu-surface);
    border-bottom: 1px solid var(--tu-line);
}
.tu-facts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.tu-fact {
    padding: var(--tu-space-6) var(--tu-space-4);
    text-align: center;
    border-right: 1px solid var(--tu-line-soft);
}
.tu-fact:last-child { border-right: 0; }
.tu-fact__num {
    display: block;
    font-family: var(--tu-font-display);
    font-size: var(--tu-step-4);
    font-weight: 600;
    line-height: 1;
    color: var(--tu-green-700);
    letter-spacing: -0.02em;
}
.tu-fact__label {
    display: block;
    margin-top: var(--tu-space-2);
    font-size: var(--tu-step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tu-muted);
}
@media (max-width: 620px) {
    .tu-fact { padding: var(--tu-space-5) var(--tu-space-3); }
    .tu-fact:nth-child(2n) { border-right: 0; }
}


/* 10  Audience router ===================================================== */

/* 210px lets all five routes sit on one row at container width, rather than
   leaving a single orphaned card on a second row. */
.tu-router__grid { display: grid; gap: var(--tu-space-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.tu-route {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--tu-space-2);
    padding: var(--tu-space-6) var(--tu-space-5);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tu-route::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--tu-gold-500);
    border-radius: var(--tu-radius) var(--tu-radius) 0 0;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.tu-route:hover {
    transform: translateY(-3px);
    box-shadow: var(--tu-shadow-2);
    border-color: var(--tu-green-100);
}
.tu-route:hover::before { opacity: 1; }

.tu-route__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-bottom: var(--tu-space-2);
    color: var(--tu-green-700);
    background: var(--tu-green-50);
    border-radius: var(--tu-radius-sm);
}
.tu-route__icon svg { width: 21px; height: 21px; }

.tu-route__title {
    font-family: var(--tu-font-display);
    font-size: var(--tu-step-1);
    font-weight: 600;
    color: var(--tu-ink);
    margin: 0;
}
.tu-route__text { font-size: var(--tu-step--1); color: var(--tu-muted); margin: 0; line-height: 1.55; }
.tu-route__more {
    margin-top: auto;
    padding-top: var(--tu-space-3);
    font-size: var(--tu-step--1);
    font-weight: 600;
    color: var(--tu-green-700);
}
.tu-route__more::after { content: " \2192"; }


/* 11  Cards =============================================================== */

.tu-card {
    display: flex;
    flex-direction: column;
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tu-card:hover { transform: translateY(-3px); box-shadow: var(--tu-shadow-2); }
.tu-card__media { position: relative; background: var(--tu-surface-3); }
.tu-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tu-card__body { display: flex; flex-direction: column; gap: var(--tu-space-2); padding: var(--tu-space-5); flex: 1; }
.tu-card__title { font-size: var(--tu-step-2); margin: 0; }
.tu-card__title a { color: var(--tu-ink); text-decoration: none; }
.tu-card__title a:hover { color: var(--tu-green-700); }
.tu-card__text { font-size: 0.94rem; color: var(--tu-muted); margin: 0; }
.tu-card__foot {
    margin-top: auto;
    padding-top: var(--tu-space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tu-space-3);
    font-size: var(--tu-step--1);
    color: var(--tu-muted);
}

/* Tag / pill */
.tu-tag {
    display: inline-block;
    padding: 0.3em 0.75em;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tu-green-700);
    background: var(--tu-green-50);
    border-radius: 100px;
}
.tu-tag--gold { color: var(--tu-gold-700); background: var(--tu-gold-100); }

/* College card — image with an overlaid label, used for the six colleges. */
.tu-college {
    position: relative;
    display: block;
    border-radius: var(--tu-radius);
    overflow: hidden;
    text-decoration: none;
    background: var(--tu-green-800);
    isolation: isolate;
}
.tu-college__media { position: absolute; inset: 0; z-index: -2; }
.tu-college__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tu-college:hover .tu-college__media img { transform: scale(1.04); }
.tu-college::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(10, 36, 23, 0.9) 12%, rgba(10, 36, 23, 0.25) 62%, rgba(10, 36, 23, 0.12) 100%);
}
.tu-college__body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
    padding: var(--tu-space-5);
    color: #fff;
}
.tu-college__code {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tu-gold-400);
    margin-bottom: var(--tu-space-1);
}
.tu-college__name {
    font-family: var(--tu-font-display);
    font-size: var(--tu-step-2);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}
.tu-college .tu-ph { position: absolute; inset: 0; z-index: -2; border-radius: 0; }


/* People (leadership, faculty) */
.tu-person {
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tu-person__media { position: relative; background: var(--tu-surface-3); }
.tu-person__media img { width: 100%; height: 100%; object-fit: cover; }
.tu-person__media > .tu-ph { height: 100%; border-radius: 0; }
.tu-person__body { padding: var(--tu-space-5); display: flex; flex-direction: column; gap: var(--tu-space-1); flex: 1; }
.tu-person__name { font-size: var(--tu-step-1); margin: 0; }
.tu-person__name--vacant { color: var(--tu-muted); font-style: italic; font-weight: 600; }
.tu-person__role { font-size: 0.9rem; color: var(--tu-muted); margin: 0; }
.tu-person__link { margin-top: auto; padding-top: var(--tu-space-3); font-size: var(--tu-step--1); }


/* 12  Split features & prose ============================================== */

.tu-split {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tu-split--media-right > .tu-split__media { order: 2; }
@media (max-width: 900px) {
    .tu-split { grid-template-columns: minmax(0, 1fr); }
    .tu-split--media-right > .tu-split__media { order: 0; }
}

/* Mission / vision / values */
.tu-pillar {
    padding: var(--tu-space-6) var(--tu-space-5);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-top: 3px solid var(--tu-gold-500);
    border-radius: 0 0 var(--tu-radius) var(--tu-radius);
    height: 100%;
}
.tu-pillar__title { font-size: var(--tu-step-2); margin-bottom: var(--tu-space-3); }
.tu-pillar p { color: var(--tu-body); margin: 0; }

.tu-values { display: flex; flex-wrap: wrap; gap: var(--tu-space-2); margin-top: var(--tu-space-4); padding: 0; list-style: none; }
.tu-values li {
    padding: 0.35em 0.9em;
    font-size: var(--tu-step--1);
    font-weight: 600;
    color: var(--tu-green-700);
    background: var(--tu-green-50);
    border-radius: 100px;
}

/* Numbered steps (application journeys, procedures) */
.tu-steps { list-style: none; counter-reset: tu-step; margin: 0; padding: 0; }
.tu-step {
    counter-increment: tu-step;
    position: relative;
    padding: 0 0 var(--tu-space-6) var(--tu-space-8);
    border-left: 2px solid var(--tu-line);
}
.tu-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.tu-step::before {
    content: counter(tu-step);
    position: absolute;
    left: calc(-1 * var(--tu-space-5) + 2px);
    top: -2px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-family: var(--tu-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background: var(--tu-green-700);
    border: 3px solid var(--tu-surface);
    border-radius: 50%;
}
.tu-step h3 { font-size: var(--tu-step-2); margin-bottom: var(--tu-space-2); }
.tu-section--surface .tu-step::before { border-color: var(--tu-surface-2); }

@media (max-width: 560px) {
    .tu-step { padding-left: var(--tu-space-7); }
    .tu-step::before { width: 34px; height: 34px; font-size: 0.9rem; left: calc(-1 * var(--tu-space-4) - 1px); }
}

/* Quote / president's message */
.tu-quote {
    position: relative;
    padding-left: var(--tu-space-6);
    border-left: 3px solid var(--tu-gold-500);
    font-family: var(--tu-font-display);
    font-size: var(--tu-step-2);
    line-height: 1.45;
    color: var(--tu-ink);
    font-style: italic;
}
.tu-quote__by {
    display: block;
    margin-top: var(--tu-space-4);
    font-family: var(--tu-font-body);
    font-size: var(--tu-step--1);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tu-muted);
}

/* A mission or vision statement given the weight it deserves */
.tu-statement {
    font-family: var(--tu-font-display);
    font-size: var(--tu-step-3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--tu-green-700);
    text-wrap: balance;
    margin-bottom: 0;
}

/* Long-form body copy */
.tu-prose { max-width: 72ch; }
.tu-prose h2 { margin-top: var(--tu-space-7); }
.tu-prose h3 { margin-top: var(--tu-space-6); }
.tu-prose > :first-child { margin-top: 0; }
.tu-prose ul, .tu-prose ol { padding-left: 1.25em; margin: 0 0 var(--tu-space-4); }
.tu-prose li { margin-bottom: var(--tu-space-2); }
.tu-prose img { border-radius: var(--tu-radius); margin-block: var(--tu-space-5); }
.tu-prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--tu-space-5); }
.tu-prose th, .tu-prose td { padding: var(--tu-space-3); border-bottom: 1px solid var(--tu-line); text-align: left; }
.tu-prose th { font-family: var(--tu-font-body); font-size: var(--tu-step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tu-muted); }

/* Multi-column programme list */
.tu-proglist {
    columns: 3 220px;
    column-gap: var(--tu-space-7);
    list-style: none;
    margin: 0;
    padding: 0;
}
.tu-proglist li {
    break-inside: avoid;
    padding: var(--tu-space-3) 0;
    border-bottom: 1px solid var(--tu-line);
    font-weight: 500;
    color: var(--tu-ink);
}

/* Data tables (fee schedules, rate comparisons) */
.tu-table-wrap { overflow-x: auto; border: 1px solid var(--tu-line); border-radius: var(--tu-radius); background: var(--tu-surface); }
.tu-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.tu-table th, .tu-table td { padding: var(--tu-space-4) var(--tu-space-5); text-align: left; }
.tu-table thead th {
    font-family: var(--tu-font-body);
    font-size: var(--tu-step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--tu-green-700);
    white-space: nowrap;
}
.tu-table tbody th { font-weight: 500; color: var(--tu-ink); }
.tu-table tbody tr + tr th, .tu-table tbody tr + tr td { border-top: 1px solid var(--tu-line); }
.tu-table tbody tr:nth-child(even) { background: var(--tu-surface-2); }
.tu-table td { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tu-body); white-space: nowrap; }
/* The international column is why overseas applicants open this page. */
.tu-table__hl { color: var(--tu-green-700); background: var(--tu-green-50); }

/* Sub-heading inside a section (e.g. a department above its programme table) */
.tu-subhead {
    font-size: var(--tu-step-1);
    color: var(--tu-green-700);
    margin-bottom: var(--tu-space-3);
    padding-bottom: var(--tu-space-2);
    border-bottom: 2px solid var(--tu-gold-500);
    display: inline-block;
}

/* List of documents / outbound resources */
.tu-linklist { list-style: none; margin: 0; padding: 0; }
.tu-linklist li + li { border-top: 1px solid var(--tu-line); }
.tu-linklist a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--tu-space-4) 0;
    text-decoration: none;
}
.tu-linklist a:hover .tu-linklist__title { color: var(--tu-green-700); text-decoration: underline; }
.tu-linklist__title { font-weight: 600; color: var(--tu-ink); }
.tu-linklist__sub { font-size: 0.88rem; color: var(--tu-muted); }

/* Boxed aside */
.tu-panel {
    padding: var(--tu-space-6);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
}
.tu-panel h3 { font-size: var(--tu-step-2); margin-bottom: var(--tu-space-4); }

.tu-note { font-size: var(--tu-step--1); color: var(--tu-muted); }

/* Checked list */
.tu-ticklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tu-space-4); }
.tu-ticklist li { position: relative; padding-left: var(--tu-space-6); }
.tu-ticklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 9px;
    height: 9px;
    background: var(--tu-gold-500);
    border-radius: 2px;
}

/* Definition-style key/value list, for facts such as deadlines and fees */
.tu-keyvals { display: grid; gap: 0; margin: 0; }
.tu-keyvals > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tu-space-2) var(--tu-space-5);
    justify-content: space-between;
    padding: var(--tu-space-4) 0;
    border-bottom: 1px solid var(--tu-line);
}
.tu-keyvals dt { font-weight: 600; color: var(--tu-ink); margin: 0; }
.tu-keyvals dd { margin: 0; color: var(--tu-muted); text-align: right; }


/* 13  Call-to-action bands ================================================ */

.tu-cta {
    position: relative;
    background: var(--tu-green-700);
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    isolation: isolate;
}
.tu-cta::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 46rem;
    height: 46rem;
    z-index: -1;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.18) 0%, transparent 62%);
}
.tu-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tu-space-6);
}
.tu-cta__copy { max-width: 46rem; }
.tu-cta h2 { color: #fff; margin-bottom: var(--tu-space-3); }
.tu-cta p { color: rgba(255, 255, 255, 0.82); margin: 0; }
.tu-cta__actions { display: flex; flex-wrap: wrap; gap: var(--tu-space-3); }


/* 14  Footer ============================================================== */

.tu-footer {
    background: var(--tu-green-900);
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.93rem;
}
.tu-footer a { color: rgba(255, 255, 255, 0.66); text-decoration: none; }
.tu-footer a:hover { color: #fff; text-decoration: underline; }

.tu-footer__top {
    display: grid;
    gap: var(--tu-space-7);
    grid-template-columns: minmax(260px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    padding-block: var(--tu-space-8);
}

.tu-footer__brand { display: flex; align-items: flex-start; gap: var(--tu-space-3); margin-bottom: var(--tu-space-4); }
.tu-footer__brand img { width: 54px; height: 54px; object-fit: contain; flex: none; }
.tu-footer__brand-name {
    font-family: var(--tu-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
}

.tu-footer__col-title {
    font-family: var(--tu-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tu-gold-400);
    margin: 0 0 var(--tu-space-4);
}
.tu-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tu-space-3); }

.tu-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tu-space-3); }
.tu-footer__contact li { display: flex; gap: var(--tu-space-3); align-items: flex-start; }
.tu-footer__contact svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--tu-gold-400); }

.tu-social { display: flex; gap: var(--tu-space-2); margin-top: var(--tu-space-5); }
.tu-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--tu-radius-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tu-social a:hover { background: var(--tu-green-700); border-color: var(--tu-green-600); }
.tu-social svg { width: 17px; height: 17px; }

/* "The Rising Phoenix corner for:" audience strip from the legacy footer */
.tu-footer__phoenix {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tu-space-2) var(--tu-space-5);
    padding-block: var(--tu-space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.tu-footer__phoenix-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tu-gold-400);
}
.tu-footer__phoenix a { font-weight: 500; }

.tu-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tu-space-4);
    padding-block: var(--tu-space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}
.tu-footer__legal { display: flex; flex-wrap: wrap; gap: var(--tu-space-5); }

@media (max-width: 720px) {
    .tu-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--tu-space-6); }
}


/* --- Listing pages: filters, vacancies, documents, directory ------------- */

.tu-filterbar { display: flex; flex-wrap: wrap; gap: var(--tu-space-2); margin-bottom: var(--tu-space-7); }
.tu-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tu-body);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tu-chip span {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1em 0.5em;
    color: var(--tu-muted);
    background: var(--tu-surface-2);
    border-radius: 100px;
}
.tu-chip:hover { border-color: var(--tu-green-500); color: var(--tu-green-700); }
.tu-chip.is-active { background: var(--tu-green-700); border-color: var(--tu-green-700); color: #fff; }
.tu-chip.is-active span { background: rgba(255,255,255,0.18); color: #fff; }

/* --- TU TIMES ------------------------------------------------------------ */

.tu-newsbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tu-space-3);
    margin-bottom: var(--tu-space-5);
}
.tu-newsbar__search { position: relative; flex: 1 1 340px; min-width: 0; }
.tu-newsbar__search svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    color: var(--tu-muted);
    pointer-events: none;
}
.tu-newsbar__search input {
    width: 100%;
    padding: 0.85em 1em 0.85em 3rem;
    font-family: inherit;
    font-size: var(--tu-step-0);
    color: var(--tu-ink);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: 100px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tu-newsbar__search input:focus {
    border-color: var(--tu-green-500);
    outline: none;
    box-shadow: 0 0 0 3px var(--tu-green-100);
}
.tu-newsbar__year { flex: 0 1 190px; border-radius: 100px; padding-block: 0.8em; }
.tu-newsbar__clear { font-size: var(--tu-step--1); font-weight: 600; color: var(--tu-muted); }
.tu-newsbar__clear:hover { color: var(--tu-green-700); }

.tu-newscount { font-size: var(--tu-step--1); color: var(--tu-muted); margin: 0; }
.tu-newscount strong { color: var(--tu-ink); font-size: var(--tu-step-0); }

/* Category chips are links here, not buttons, so each filter has its own URL. */
.tu-filterbar a.tu-chip { text-decoration: none; }

.tu-tag--link { text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.tu-tag--link:hover { background: var(--tu-green-700); color: #fff; }

/* Lead story - the TU TIMES splash item.
   Named .tu-leadstory, not .tu-lead: .tu-lead is the site-wide lede
   *paragraph* (see section 03). Both once used .tu-lead, and because this
   block is declared later it silently turned every lede paragraph into a
   grid container, wrapping the text at roughly half its column width. */
.tu-leadstory {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: center;
}
.tu-leadstory__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--tu-surface-3);
    border-radius: var(--tu-radius);
}
.tu-leadstory__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tu-leadstory__media:hover img { transform: scale(1.03); }
.tu-leadstory__media > .tu-ph { height: 100%; }

.tu-leadstory__title { font-size: var(--tu-step-4); margin: 0 0 var(--tu-space-4); line-height: 1.12; }
.tu-leadstory__title a { color: var(--tu-ink); text-decoration: none; }
.tu-leadstory__title a:hover { color: var(--tu-green-700); }
.tu-leadstory__text { font-size: var(--tu-step-1); line-height: 1.55; color: var(--tu-body); margin-bottom: var(--tu-space-4); }

@media (max-width: 860px) {
    .tu-leadstory { grid-template-columns: minmax(0, 1fr); }
}

/* Shared byline strip */
.tu-news__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tu-space-2) var(--tu-space-4);
    margin: 0;
    font-size: var(--tu-step--1);
    color: var(--tu-muted);
}
.tu-news__meta time { font-weight: 600; color: var(--tu-green-700); }
.tu-news__meta > * + *::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: var(--tu-space-4);
    vertical-align: middle;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.6;
}

.tu-news .tu-card__title { font-size: var(--tu-step-1); }
.tu-news .tu-tag { align-self: flex-start; }

/* RSS */
.tu-newsfeed { margin-top: var(--tu-space-7); padding-top: var(--tu-space-5); border-top: 1px solid var(--tu-line); }
.tu-newsfeed a {
    display: inline-flex;
    align-items: center;
    gap: var(--tu-space-2);
    font-size: var(--tu-step--1);
    font-weight: 600;
    color: var(--tu-muted);
    text-decoration: none;
}
.tu-newsfeed a:hover { color: var(--tu-green-700); }
.tu-newsfeed svg { width: 15px; height: 15px; color: var(--tu-gold-600); }

.tu-empty {
    padding: var(--tu-space-8) var(--tu-space-5);
    text-align: center;
    background: var(--tu-surface-2);
    border: 1px dashed var(--tu-line);
    border-radius: var(--tu-radius);
}
.tu-empty h2 { font-size: var(--tu-step-2); }
.tu-empty p { max-width: 48ch; margin-inline: auto; color: var(--tu-muted); }

/* Vacancies */
.tu-vacancy-list { display: flex; flex-direction: column; gap: var(--tu-space-3); }
.tu-vacancy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tu-space-4);
    padding: var(--tu-space-5);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-left: 3px solid var(--tu-green-700);
    border-radius: var(--tu-radius);
    transition: box-shadow 0.18s ease;
}
.tu-vacancy:hover { box-shadow: var(--tu-shadow-2); }
.tu-vacancy.is-closed { border-left-color: var(--tu-line); background: var(--tu-surface-2); }
.tu-vacancy.is-closed .tu-vacancy__title { color: var(--tu-muted); }
.tu-vacancy__main { flex: 1 1 320px; min-width: 0; }
.tu-vacancy__title { font-size: var(--tu-step-1); margin: 0 0 var(--tu-space-2); }
.tu-vacancy__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tu-space-3);
    margin: 0;
    font-size: var(--tu-step--1);
    color: var(--tu-muted);
}
.tu-tag--closed { color: var(--tu-muted); background: var(--tu-surface-3); }

/* Documents */
.tu-doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tu-space-2); }
.tu-doclist a {
    display: flex;
    align-items: center;
    gap: var(--tu-space-4);
    padding: var(--tu-space-4) var(--tu-space-5);
    text-decoration: none;
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tu-doclist a:hover { border-color: var(--tu-green-500); box-shadow: var(--tu-shadow-1); }
.tu-doclist__ext {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tu-green-700);
    background: var(--tu-green-50);
    border-radius: var(--tu-radius-sm);
}
.tu-doclist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tu-doclist__title { font-weight: 600; color: var(--tu-ink); }
.tu-doclist__sub { font-size: 0.8rem; color: var(--tu-muted); }
.tu-doclist__icon { flex: none; width: 18px; height: 18px; color: var(--tu-green-600); }

/* Directory */
.tu-dirbar { display: flex; flex-wrap: wrap; gap: var(--tu-space-3); margin-bottom: var(--tu-space-4); }
.tu-search { position: relative; flex: 1 1 320px; }
.tu-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--tu-muted);
    pointer-events: none;
}
.tu-search__input, .tu-select {
    width: 100%;
    padding: 0.75em 1em 0.75em 2.75em;
    font-family: inherit;
    font-size: var(--tu-step-0);
    color: var(--tu-ink);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius-sm);
}
.tu-select { flex: 0 1 260px; width: auto; padding-left: 1em; }
.tu-search__input:focus, .tu-select:focus { border-color: var(--tu-green-500); outline: none; box-shadow: 0 0 0 3px var(--tu-green-100); }

.tu-table--directory td, .tu-table--directory th { vertical-align: top; }
.tu-table--directory .tu-td-wrap { white-space: normal; font-weight: 400; }
.tu-table--directory td a { color: var(--tu-green-600); }

/* Pagination */
.tu-pagination { display: flex; flex-wrap: wrap; gap: var(--tu-space-2); margin-top: var(--tu-space-7); }
.tu-pagination__link {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    padding: 0.55em 0.9em;
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--tu-body);
    text-decoration: none;
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius-sm);
}
.tu-pagination__link:hover { border-color: var(--tu-green-500); color: var(--tu-green-700); }
.tu-pagination__link.is-active { background: var(--tu-green-700); border-color: var(--tu-green-700); color: #fff; }

/* --- Article (TU TIMES detail) ------------------------------------------- */

.tu-article__byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tu-space-2) var(--tu-space-5);
    margin: var(--tu-space-4) 0 0;
    font-size: var(--tu-step--1);
    color: rgba(255, 255, 255, 0.75);
}
.tu-article__byline time { font-weight: 600; color: var(--tu-gold-400); }

.tu-article__grid {
    display: grid;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
}
@media (max-width: 900px) {
    .tu-article__grid { grid-template-columns: minmax(0, 1fr); }
}

.tu-article__body { max-width: 68ch; font-size: 1.06rem; }
.tu-article__body p { margin-bottom: var(--tu-space-5); }
.tu-article__aside { position: sticky; top: calc(var(--tu-header-h) + 1rem); }
@media (max-width: 900px) { .tu-article__aside { position: static; } }

.tu-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tu-space-3);
    margin-top: var(--tu-space-7);
    padding-top: var(--tu-space-5);
    border-top: 1px solid var(--tu-line);
}
.tu-share__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tu-muted);
    margin-right: var(--tu-space-2);
}
.tu-share__link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--tu-green-700);
    background: var(--tu-green-50);
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.tu-share__link:hover { background: var(--tu-green-700); color: #fff; }
.tu-share__link svg { width: 17px; height: 17px; }


/* --- Forms ---------------------------------------------------------------
   The online application form's markup is carried over verbatim from the
   legacy template (its field names must not change), so these rules style the
   template's own classes rather than asking the markup to change. That keeps
   the application working exactly as before while it looks like the new site. */

.tu-formcard {
    padding: clamp(1.25rem, 0.5rem + 2.5vw, 2.75rem);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    box-shadow: var(--tu-shadow-1);
}

.tu-formcard .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--tu-space-4);
}
.tu-formcard .col-lg-2  { grid-column: span 2; }
.tu-formcard .col-lg-4  { grid-column: span 4; }
.tu-formcard .col-lg-6  { grid-column: span 6; }
.tu-formcard .col-lg-8  { grid-column: span 8; }
.tu-formcard .col-lg-12 { grid-column: span 12; }

@media (max-width: 900px) {
    .tu-formcard .col-lg-2, .tu-formcard .col-lg-4 { grid-column: span 6; }
    .tu-formcard .col-lg-6, .tu-formcard .col-lg-8 { grid-column: span 12; }
}
@media (max-width: 560px) {
    .tu-formcard .row > [class*="col-lg-"] { grid-column: span 12; }
}

.tu-formcard .form-group { margin-bottom: var(--tu-space-5); }

.tu-formcard .form-label {
    display: block;
    margin-bottom: var(--tu-space-2);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tu-green-700);
}

.tu-formcard .form-control,
.tu-formcard .form-select,
.tu-formcard input[type="text"],
.tu-formcard input[type="email"],
.tu-formcard input[type="tel"],
.tu-formcard input[type="date"],
.tu-formcard input[type="number"],
.tu-formcard input[type="file"],
.tu-formcard select,
.tu-formcard textarea {
    width: 100%;
    padding: 0.7em 0.9em;
    font-family: inherit;
    font-size: var(--tu-step-0);
    color: var(--tu-ink);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tu-formcard .form-control:focus,
.tu-formcard .form-select:focus,
.tu-formcard select:focus,
.tu-formcard textarea:focus,
.tu-formcard input:focus {
    border-color: var(--tu-green-500);
    outline: none;
    box-shadow: 0 0 0 3px var(--tu-green-100);
}
.tu-formcard textarea { min-height: 7rem; resize: vertical; }
.tu-formcard input[type="file"] { padding: 0.55em 0.7em; background: var(--tu-surface-2); }

/* Radio / checkbox groups from the template */
.tu-formcard .custom-control {
    position: relative;
    display: block;
    margin-bottom: var(--tu-space-2);
    padding-left: 1.75rem;
}
.tu-formcard .custom-control-inline { display: inline-block; margin-right: var(--tu-space-5); }
.tu-formcard .custom-control-input {
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--tu-green-700);
}
.tu-formcard .custom-control-label { cursor: pointer; }

.tu-formcard h3, .tu-formcard h4, .tu-formcard .m-30 > h3 {
    font-size: var(--tu-step-2);
    margin-top: var(--tu-space-7);
    margin-bottom: var(--tu-space-4);
    padding-bottom: var(--tu-space-2);
    border-bottom: 2px solid var(--tu-gold-500);
}
.tu-formcard > form > :first-child h3 { margin-top: 0; }

.tu-formcard button[type="submit"],
.tu-formcard input[type="submit"],
.tu-formcard .default-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--tu-space-2);
    padding: 0.85em 2em;
    font-family: inherit;
    font-size: var(--tu-step-0);
    font-weight: 600;
    color: var(--tu-green-900);
    background: var(--tu-gold-500);
    border: 1.5px solid var(--tu-gold-500);
    border-radius: var(--tu-radius-sm);
    cursor: pointer;
    width: auto;
}
.tu-formcard button[type="submit"]:hover { box-shadow: var(--tu-shadow-2); transform: translateY(-1px); }

/* Events */
.tu-event-list { display: flex; flex-direction: column; gap: var(--tu-space-3); }
.tu-event {
    display: flex;
    gap: var(--tu-space-5);
    padding: var(--tu-space-5);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
}
.tu-event__date {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 82px;
    padding: var(--tu-space-3);
    color: #fff;
    background: var(--tu-green-700);
    border-radius: var(--tu-radius-sm);
    align-self: flex-start;
}
.tu-event__day { font-family: var(--tu-font-display); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.tu-event__month { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.tu-event__body { min-width: 0; }
.tu-event__title { font-size: var(--tu-step-1); margin: 0 0 var(--tu-space-2); }
.tu-event__text { color: var(--tu-muted); margin: 0 0 var(--tu-space-3); }
.tu-event__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tu-space-2) var(--tu-space-5);
    margin: 0;
    font-size: var(--tu-step--1);
    color: var(--tu-muted);
}
.tu-event__meta span { display: inline-flex; align-items: center; gap: 0.45em; }
.tu-event__link { margin-top: var(--tu-space-3); font-size: var(--tu-step--1); }
.tu-event-list--past .tu-event { background: var(--tu-surface-2); }
.tu-event-list--past .tu-event__date { background: var(--tu-muted); }

@media (max-width: 560px) {
    .tu-event { gap: var(--tu-space-4); padding: var(--tu-space-4); }
    .tu-event__date { width: 62px; }
    .tu-event__day { font-size: 1.3rem; }
}

/* --- Showcase: projects & student activities ----------------------------- */

.tu-status {
    position: absolute;
    top: var(--tu-space-3);
    left: var(--tu-space-3);
    z-index: 2;
    padding: 0.28em 0.8em;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 100px;
    color: #fff;
    background: var(--tu-green-700);
}
.tu-status--ongoing { background: var(--tu-green-700); }
.tu-status--done    { background: var(--tu-muted); }
.tu-status--planned { background: var(--tu-gold-500); color: var(--tu-green-900); }
/* News category badge. Brand red is reserved for the Portals action (see the
   token comment above), so this uses the standard green. */
.tu-status--news    { background: var(--tu-green-700); }
/* Inside the details list it is inline, not pinned to a corner. */
.tu-keyvals .tu-status { position: static; display: inline-block; }

.tu-showcase .tu-card__media { position: relative; display: block; }
.tu-showcase__counts { white-space: nowrap; }

/* Homepage strip — a scroll-snap carousel that works without JavaScript */
.tu-strip__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tu-space-5);
    margin-bottom: var(--tu-space-6);
}
.tu-strip__head > div { max-width: 62ch; }
.tu-strip__head h2 { margin-bottom: var(--tu-space-3); }
.tu-strip__head .tu-lead { margin-bottom: 0; }

.tu-strip__nav { display: flex; gap: var(--tu-space-2); flex: none; }
.tu-strip__arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--tu-green-700);
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tu-strip__arrow:hover { background: var(--tu-green-50); border-color: var(--tu-green-500); }
.tu-strip__arrow svg { width: 18px; height: 18px; }
.tu-strip__arrow[disabled] { opacity: 0.35; cursor: default; }

.tu-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: var(--tu-space-4);
    list-style: none;
    margin: 0;
    padding: 0 0 var(--tu-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    /* Let cards bleed to the container edge when scrolled. */
    scroll-padding-inline: 0;
}
@media (min-width: 900px) {
    /* Both bounds must be the column width. With a floor of 0 the columns
       collapsed as soon as the track held more than three cards - the grid
       shrank them to fit the container instead of overflowing, so a nine-item
       strip rendered as nine slivers with one word per line. */
    .tu-strip {
        --tu-strip-col: calc(33.333% - var(--tu-space-4) * 2 / 3);
        grid-auto-columns: minmax(var(--tu-strip-col), var(--tu-strip-col));
    }
}
.tu-strip:focus-visible { outline: 3px solid var(--tu-gold-500); outline-offset: 4px; }
.tu-strip__item { scroll-snap-align: start; min-width: 0; }

.tu-strip__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    background: var(--tu-surface);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tu-strip__card:hover { transform: translateY(-3px); box-shadow: var(--tu-shadow-2); }
.tu-strip__media { position: relative; aspect-ratio: 3 / 2; background: var(--tu-surface-3); }
.tu-strip__media img { width: 100%; height: 100%; object-fit: cover; }
.tu-strip__media > .tu-ph { height: 100%; border-radius: 0; }
.tu-strip__body { padding: var(--tu-space-5); display: flex; flex-direction: column; gap: var(--tu-space-2); flex: 1; }
.tu-strip__body h3 { font-size: var(--tu-step-1); margin: 0; color: var(--tu-ink); }
.tu-strip__card:hover h3 { color: var(--tu-green-700); }
.tu-strip__body p { margin: 0; font-size: 0.93rem; color: var(--tu-muted); }
.tu-strip__dates { margin-top: auto; padding-top: var(--tu-space-2); font-size: var(--tu-step--1); font-weight: 600; color: var(--tu-green-700); }

/* Video */
.tu-videos { display: flex; flex-direction: column; gap: var(--tu-space-6); }
.tu-video { margin: 0; }
.tu-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--tu-radius);
    overflow: hidden;
}
.tu-video__frame iframe,
.tu-video__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.tu-video figcaption {
    margin-top: var(--tu-space-3);
    font-size: var(--tu-step--1);
    color: var(--tu-muted);
}

/* Image gallery */
.tu-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--tu-space-3); list-style: none; margin: 0; padding: 0; }
.tu-gallery li { margin: 0; }
.tu-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--tu-radius);
    transition: transform 0.25s ease;
}
.tu-gallery a { display: block; overflow: hidden; border-radius: var(--tu-radius); }
.tu-gallery a:hover img { transform: scale(1.04); }


/* 15  Utilities =========================================================== */

.tu-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.tu-text-center { text-align: center; }
.tu-mb-0 { margin-bottom: 0 !important; }
.tu-mt-4 { margin-top: var(--tu-space-4); }
.tu-mt-5 { margin-top: var(--tu-space-5); }
.tu-mt-6 { margin-top: var(--tu-space-6); }
.tu-mt-7 { margin-top: var(--tu-space-7); }
.tu-mb-4 { margin-bottom: var(--tu-space-4); }
.tu-mb-5 { margin-bottom: var(--tu-space-5); }
.tu-mb-6 { margin-bottom: var(--tu-space-6); }
.tu-mb-7 { margin-bottom: var(--tu-space-7); }
.tu-flow > * + * { margin-top: var(--tu-space-4); }


/* 16  Motion & accessibility ============================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--tu-gold-500);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Elements that animate in on scroll start hidden only when JS is available
   to reveal them; without JS the .tu-reveal class is never applied. */
.tu-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.tu-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .tu-reveal { opacity: 1; transform: none; }
}

@media print {
    .tu-utility, .tu-masthead, .tu-footer, .tu-cta, .tu-nav-scrim { display: none !important; }
    body { color: #000; }
}