/* ==========================================================================
   DreamBridge — Design System (brand-system restyle)
   Dream Big, We Bridge／你懷夢想，我們搭橋
   Concept: a careful school briefing pack — navy cover sheet, contents list,
   lavender study notes. Flat fills, no shadows. See DESIGN_PLAN.md.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette (Campusly / DreamBridge brand-system only) */
  --navy:      #0E2841;  /* titles, body, dark bands */
  --purple:    #5454A0;  /* primary CTAs, key UI */
  --indigo:    #45479A;  /* secondary / hover */
  --cobalt:    #32579D;  /* secondary rules & markers */
  --violet:    #8965D1;  /* accent — focus ring only */
  --orchid:    #CB67EC;  /* accent — one hero tick only */
  --signature: #3D2D71;  /* wordmark text beside logo only */
  --caption:   #5B6878;
  --grey:      #E8E8E8;
  --white:     #FFFFFF;
  --lav-1:     #EFEBF9;
  --lav-2:     #F5F5F9;
  --lav-3:     #EEEEF6;
  --on-navy:   #D9DCEB;  /* secondary text on navy */

  /* Home cover pastel wash (Partner Introduction deck cover) */
  --cover-cyan:      #BADDF0;  /* lower-left glow */
  --cover-cyan-2:    #CBE9F4;
  --cover-cyan-3:    #DAF1F7;
  --cover-pearl:     #EBEEF7;  /* cool pearl, upper-left */
  --cover-pearl-2:   #F5F0F7;  /* near-white band, centre-left */
  --cover-lav:       #F0D5F4;  /* centre lavender */
  --cover-lav-2:     #E9CBEF;
  --cover-pink:      #F3DAF7;  /* right lavender / pink */
  --cover-lav-deep:  #DFCAF1;  /* deeper lavender, right / bottom-right */
  --cover-wash: linear-gradient(64deg,
      var(--cover-cyan) 0%, var(--cover-cyan-2) 12%, var(--cover-cyan-3) 22%,
      var(--cover-pearl-2) 36%, #F6F1F8 44%,
      var(--cover-lav) 60%, var(--cover-lav-2) 72%, var(--cover-pink) 84%, var(--cover-lav-deep) 100%);
  --cover-glow-cyan: radial-gradient(ellipse 55% 60% at 0% 100%, rgb(186 221 240 / 0.95), rgb(190 226 242 / 0.5) 45%, rgb(207 237 247 / 0) 100%);
  --cover-glow-lav:  radial-gradient(ellipse 50% 75% at 100% 70%, rgb(223 202 241 / 0.85), rgb(225 205 242 / 0) 100%);
  --cover-glow-pearl: radial-gradient(ellipse 40% 45% at 8% 6%, rgb(230 240 249 / 0.9), rgb(235 238 247 / 0) 100%);

  /* Type */
  --font-sans: "IBM Plex Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
    "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ×1.25 scale from 17px */
  --fs-xs:  0.8125rem;                                  /* ~13.6 */
  --fs-sm:  0.9375rem;                                  /* 15 */
  --fs-base: 1.0625rem;                                 /* 17 */
  --fs-md:  1.3125rem;                                  /* 21 */
  --fs-lg:  clamp(1.375rem, 1.2rem + 0.7vw, 1.65rem);   /* ~26.5 */
  --fs-xl:  clamp(1.65rem, 1.35rem + 1.2vw, 2.0625rem); /* ~33 */
  --fs-2xl: clamp(1.9rem, 1.45rem + 1.9vw, 2.5625rem);  /* ~41 */
  --fs-3xl: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);        /* hero tagline */

  --lh-head: 1.3;
  --lh-body: 1.85;
  --measure: 38em;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6rem;

  /* Shape — flat, small radii, no shadows */
  --radius-sm: 2px;
  --radius: 6px;

  --container: 1140px;
  --header-h: 72px;

  --focus: 0 0 0 2px var(--white), 0 0 0 5px var(--violet);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Motion */
  --dur-1: 120ms;  /* press, hover colour */
  --dur-2: 220ms;  /* small UI: chips, toggles */
  --dur-3: 420ms;  /* sheets, reveals */
  --dur-4: 900ms;  /* hero draw-on, once only */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* entrances */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* sheets, page turns */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* press-release (fallback) */

  /* Elevation: still flat, except one menu-panel shadow */
  --shadow-sheet: 0 8px 32px rgb(14 40 65 / 0.14);

  /* App shell */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tap: 44px;
  --radius-lg: 14px; /* phone menu panel only */

  /* Grain (navy panels only) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
/* Phones: a modestly tighter type scale so more fits per screen (desktop tokens above unchanged) */
@media (max-width: 767px) {
  :root {
    --fs-xs:  0.75rem;    /* 12 */
    --fs-sm:  0.875rem;   /* 14 */
    --fs-base: 0.9375rem; /* 15 — body */
    --fs-md:  1.125rem;   /* 18 */
    --fs-lg:  1.25rem;    /* 20 */
    --fs-xl:  1.4rem;     /* ~22.4 */
    --fs-2xl: 1.6rem;     /* ~25.6 */
    --fs-3xl: 1.85rem;    /* ~29.6 — hero tagline */
    --lh-body: 1.8;
  }
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, 0.36 9%, 0.84 22%, 1.02 33%, 1.01 44%, 1); }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--safe-t) + 16px);
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--navy);
  background: var(--white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-head);
  color: var(--navy);
  font-weight: 700;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--purple);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--indigo); text-decoration-thickness: 2px; } }

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--radius-sm);
}

strong { font-weight: 700; color: var(--navy); }

/* ---------- Utilities ---------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.readable > * { max-width: var(--measure); }

.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;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 1000;
  padding: var(--sp-3) var(--sp-4);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); color: var(--white); }

.lead {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--caption);
  max-width: var(--measure);
}
.muted { color: var(--caption); }
.small { font-size: var(--fs-sm); }

.ext-icon {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  flex: none;
  vertical-align: -0.05em;
  margin-left: 0.25em;
  opacity: 0.75;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--grey);
  padding-top: var(--safe-t);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--signature);
}
@media (hover: hover) and (pointer: fine) { .brand:hover { color: var(--signature); } }
.brand__mark { width: 47px; height: 40px; flex: none; }
.brand__text {
  font-family: "Barlow Semi Condensed", var(--font-sans);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase; /* HTML stays "DreamBridge" so screen readers say it naturally */
  color: var(--signature);
}

/* Language switch — compact text links, no card */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 44px;
  padding: 0 0.25rem;
  color: var(--navy);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .lang-switch a:hover { color: var(--purple); } }
.lang-switch a[aria-current="true"] {
  color: var(--purple);
  font-weight: 700;
}
.lang-switch__sep { color: var(--caption); }
.nav-toggle { flex: none; white-space: nowrap; }
/* Phones: the header switch gives way to the language row inside the menu panel */
@media (max-width: 767px) {
  .lang-switch { display: none; }
  .nav-toggle { margin-left: auto; }
}
.site-nav__lang {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-2);
  border-top: 1px solid var(--grey);
}
.site-nav .site-nav__lang a {
  flex: 1 1 0;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  box-shadow: none;
  font-weight: 600;
}
.site-nav .site-nav__lang a[aria-current="true"] { background: var(--purple); border-color: var(--purple); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .site-nav .site-nav__lang a:not([aria-current]):hover { border-color: var(--purple); color: var(--purple); } }
.site-nav .site-nav__lang a:focus-visible { box-shadow: var(--focus); }
html:not(.js) .site-nav__lang { padding-inline: 1.25rem; }
@media (min-width: 768px) { .site-nav__lang { display: none; } }
/* Very narrow phones: keep brand and menu on one row */
@media (max-width: 419px) {
  .site-header__inner { gap: var(--sp-3); }
  .nav-toggle > span:not(.nav-toggle__bars) { display: none; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  position: absolute;
  inset: calc(var(--header-h) + var(--safe-t)) 0 auto 0;
  background: var(--white);
  border-bottom: 1px solid var(--grey);
}
/* Without JS the menu stays visible; JS adds .js to <html> to enable collapsing */
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }
/* No JS on phones: hide the inert toggle and list the menu in-flow under the brand row */
@media (max-width: 767px) {
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-header { position: static; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; }
  html:not(.js) .site-nav { position: static; flex: 1 0 100%; border-bottom: 0; }
}
/* Phones (below 768px) with JS: the header hamburger opens the menu as a dropdown panel under it, top right */
@media (max-width: 767px) {
  .js .site-nav {
    --nav-top: calc(var(--header-h) + var(--safe-t) + var(--sp-2));
    --nav-gut: max(var(--sp-3), env(safe-area-inset-right, 0px));
    display: block;
    position: fixed;
    inset: var(--nav-top) var(--nav-gut) auto auto;
    z-index: 50;
    width: max-content;
    min-width: 14rem;
    max-width: calc(100vw - var(--nav-gut) - var(--sp-3));
    max-height: calc(100vh - var(--nav-top) - var(--sp-3));
    max-height: calc(100dvh - var(--nav-top) - var(--sp-3));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-2) var(--sp-4);
    background: var(--white);
    border: 1px solid var(--grey);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sheet);
    opacity: 0;
    transform: scale(0.96);
    transform-origin: top right;
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s var(--dur-2);
  }
  .js .site-nav.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .js .site-nav ul { padding: 0; }
  /* Scrim sits inside the sticky header's stacking context: page < scrim (45) < panel (50) < toggle (60) */
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgb(14 40 65 / 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out);
  }
  .nav-scrim.is-on { opacity: 1; pointer-events: auto; }
  .js .nav-toggle { position: relative; z-index: 60; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .js .site-nav,
  .js .site-nav.is-open { transform: none; transition: none; }
  .nav-scrim { transition: none; }
}
@media (min-width: 768px) { .nav-scrim { display: none; } }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 1.25rem var(--sp-4);
}
.site-nav a {
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--grey);
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
}
.site-nav li:last-child a { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--purple); } }
.site-nav a[aria-current="page"] {
  color: var(--purple);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--purple);
  padding-left: var(--sp-4);
}

/* Desktop top nav from 768px (tablet portrait and up) */
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .lang-switch { order: 3; margin-left: 0; }
  .site-nav { margin-left: auto; }
  .site-nav,
  .js .site-nav {
    display: block;
    position: static;
    background: none;
    border: 0;
  }
  .site-nav ul {
    display: flex;
    align-items: stretch;
    gap: var(--sp-1);
    padding: 0;
  }
  .site-nav a {
    min-height: var(--header-h);
    padding: 0 var(--sp-3);
    border: 0;
    font-size: var(--fs-sm);
  }
  .site-nav a[aria-current="page"] {
    padding-left: var(--sp-3);
    box-shadow: inset 0 -3px 0 var(--purple);
  }
  .site-nav a:focus-visible { box-shadow: inset 0 0 0 3px var(--violet); border-radius: 0; }
}
/* Tablet (768–959): same top nav, compacted so seven links + language switch fit on one row */
@media (min-width: 768px) and (max-width: 959px) {
  .site-header__inner { gap: var(--sp-3); }
  .brand__text { display: none; }
  .site-nav ul { gap: 0; }
  .site-nav a,
  .site-nav a[aria-current="page"] { padding: 0 var(--sp-2); font-size: var(--fs-xs); white-space: nowrap; }
}
/* From 960px the logo mark is always paired with the 「DreamBridge」 wordmark */
@media (min-width: 960px) { .brand__text { display: inline; } }

/* ---------- Tap targets ---------- */
/* Buttons, nav links and tab-like controls; inline paragraph links are left alone */
/* :where() keeps specificity at zero so component rules (e.g. 72px desktop nav) still win */
:where(button, .btn, .nav-toggle, .site-nav a, .lang-switch a, .chip, .post-nav__link, [role="tab"]) {
  min-height: var(--tap);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { text-decoration: none; } }
.btn--primary { background: var(--purple); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--indigo); color: var(--white); } }
.btn--ghost { background: transparent; color: var(--purple); border-color: var(--purple); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--lav-2); color: var(--indigo); border-color: var(--indigo); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* On navy grounds */
.on-navy .btn--primary { background: var(--purple); color: var(--white); border-color: var(--purple); }
@media (hover: hover) and (pointer: fine) { .on-navy .btn--primary:hover { background: var(--indigo); border-color: var(--lav-1); color: var(--white); } }
.on-navy .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
@media (hover: hover) and (pointer: fine) { .on-navy .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); border-color: var(--white); } }
.on-navy :focus-visible { box-shadow: 0 0 0 2px var(--navy), 0 0 0 5px var(--violet); }

/* ---------- Cover (home hero) ---------- */
/* Pastel wash from the Partner Introduction deck cover: cyan bottom-left, a pearl band through centre-left,
   lavender / pink across centre and right. Every stop is light, so Deep Navy text holds AA (≥ 12:1) anywhere
   on it, including every drift frame. A barely-there white wash sits behind the copy. CSS-only bridge arch.
   Motion: one staggered entrance plus a slow gradient drift and glow; all of it is off under reduced motion
   and the static final state is the default */
.cover {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  min-height: min(calc(100svh - var(--header-h) - var(--safe-t)), 48rem);
  overflow: hidden;
  overflow: clip;
  background:
    var(--grain),
    var(--cover-glow-pearl),
    var(--cover-glow-cyan),
    var(--cover-glow-lav),
    var(--cover-wash);
  background-color: var(--cover-pearl-2);
  background-size: 160px 160px, 100% 100%, 100% 100%, 100% 100%, 125% 125%;
  background-position: 0 0, 0 0, 0 0, 0 0, 50% 50%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: soft-light, normal, normal, normal, normal;
  border-bottom: 1px solid var(--grey);
}
/* Bridge arch: two concentric spans resting on the cover's lower edge */
.cover::before,
.cover::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -1px;
  aspect-ratio: 2 / 1;
  border: 2px solid rgb(14 40 65 / 0.16);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}
.cover::after { right: -18vw; width: 112vw; }
.cover::before { right: calc(-18vw + 14vw); width: 84vw; border-color: rgb(137 101 209 / 0.28); }
.cover__sheet {
  color: var(--navy);
  padding: var(--sp-7) 1.25rem var(--sp-5);
}
/* Soft light that drifts across the light tail of the gradient */
.cover__sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -10%;
  bottom: 4%;
  width: min(80vw, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(250 240 252 / 0.45), rgb(240 213 244 / 0.3) 55%, rgb(240 213 244 / 0));
  pointer-events: none;
}
.cover__inner { position: relative; isolation: isolate; max-width: 42rem; }
.cover__inner::before {
  content: "";
  position: absolute;
  inset: -2.5rem -2.25rem;
  z-index: -1;
  border-radius: 48px;
  background: rgb(255 255 255 / 0.28);
  filter: blur(40px);
}
.cover__en {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
}
.cover h1 {
  margin: 0 0 var(--sp-5);
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--navy);
}
:lang(en) .cover h1 { font-size: clamp(1.875rem, 1.1rem + 3.2vw, 3.5rem); }
.cover h1 { text-wrap: balance; }
:lang(zh-Hant) .cover h1 { word-break: keep-all; line-break: strict; }
/* Clip box: padding gives CJK glyphs and full-width punctuation room; the negative margin cancels it in layout */
.cover h1 .line {
  display: block;
  overflow: hidden;
  overflow: clip;
  padding: 0.1em 0.12em 0.16em;
  margin: -0.1em -0.12em -0.16em;
}
.cover h1 .line > span { display: inline-block; max-width: 100%; text-wrap: balance; }
.cover .lead { margin: 0; max-width: 34em; color: var(--navy); }
.cover .btn-row { margin-top: var(--sp-6); }
/* Light ground: filled Deep Navy primary, navy outline secondary, navy focus ring with a white gap */
.cover .btn--primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
.cover .btn--ghost { background: rgb(255 255 255 / 0.4); border-color: var(--navy); color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .cover .btn--primary:hover { background: var(--signature); border-color: var(--signature); color: var(--white); }
  .cover .btn--ghost:hover { background: rgb(255 255 255 / 0.8); border-color: var(--navy); color: var(--navy); }
}
.cover :focus-visible { box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--navy); }

/* Tablet (still stacked): copy sits on the page container's left edge */
@media (min-width: 640px) and (max-width: 959px) {
  .cover__sheet { padding-block: var(--sp-8) var(--sp-5); padding-inline: max(2rem, (100vw - var(--container)) / 2); }
  .cover::after { right: -8vw; width: 78vw; }
  .cover::before { right: calc(-8vw + 10vw); width: 58vw; }
}

/* Desktop from 960px: one wide text column on the left, the arch and glow fill the light right side */
@media (min-width: 960px) {
  .cover {
    align-content: center;
    min-height: 560px;
    /* Wider field: shallower diagonal so the cyan stays bottom-left and the lavender spans centre and right */
    --cover-wash: linear-gradient(68deg,
        var(--cover-cyan) 0%, var(--cover-cyan-2) 10%, var(--cover-cyan-3) 19%,
        var(--cover-pearl-2) 32%, #F6F1F8 40%,
        var(--cover-lav) 56%, var(--cover-lav-2) 68%, var(--cover-pink) 82%, var(--cover-lav-deep) 100%);
    --cover-glow-cyan: radial-gradient(ellipse 38% 70% at 0% 100%, rgb(186 221 240 / 0.95), rgb(190 226 242 / 0.5) 45%, rgb(207 237 247 / 0) 100%);
  }
  .cover__sheet { padding: var(--sp-9) var(--sp-6) var(--sp-9) max(2rem, (100vw - var(--container)) / 2); }
  .cover::after { right: max(-6rem, (100vw - var(--container)) / 2 - 12rem); width: clamp(34rem, 46vw, 46rem); }
  .cover::before { right: calc(max(-6rem, (100vw - var(--container)) / 2 - 12rem) + clamp(5rem, 7vw, 7rem)); width: calc(clamp(34rem, 46vw, 46rem) - 2 * clamp(5rem, 7vw, 7rem)); }
  .cover__sheet::before { right: 4%; bottom: 18%; width: 30rem; }
}

/* Motion: entrance stagger (line 1, line 2, statement, buttons), then slow ambient drift */
@media (prefers-reduced-motion: no-preference) {
  .cover { animation: cover-drift 26s ease-in-out infinite alternate; }
  .cover__sheet::before { animation: cover-glow 22s ease-in-out infinite alternate; }
  .cover::before,
  .cover::after { animation: cover-arch 1100ms var(--ease-out) 240ms both; }
  .cover h1 .line > span { animation: cover-line 640ms var(--ease-out) both; }
  .cover h1 .line + .line > span { animation-delay: 100ms; }
  .cover__en { animation: cover-rise 600ms var(--ease-out) both; }
  .cover .lead { animation: cover-rise 600ms var(--ease-out) 200ms both; }
  .cover .btn-row { animation: cover-rise 600ms var(--ease-out) 300ms both; }
}
@keyframes cover-line { from { opacity: 0; transform: translateY(105%); } }
@keyframes cover-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes cover-arch { from { opacity: 0; transform: translateY(12%); } }
@keyframes cover-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 20% 20%; }
  to   { background-position: 0 0, 0 0, 0 0, 0 0, 80% 80%; }
}
@keyframes cover-glow {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-14%, -10%) scale(1.12); }
}

/* ---------- Banner 2: why students trust us ---------- */
.trust .section__head { margin-bottom: 0; }
.trust__list {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: 0 var(--sp-6);
}
@media (min-width: 640px) { .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trust__list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--grey);
}
.trust__list p { margin: 0; padding-top: 0.5rem; line-height: 1.6; }
.trust__list strong { color: var(--signature); }
.trust__icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: var(--lav-1);
  color: var(--purple);
}

/* ---------- Banner 3: JUPAS tools ---------- */
.tools__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-5);
  background: var(--white);
  border-top: 3px solid var(--purple);
  border-radius: 0 0 var(--radius) var(--radius);
}
@media (min-width: 640px) { .tool-card { padding: var(--sp-6); } }
.tool-card h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); line-height: var(--lh-head); color: var(--navy); }
.tool-card p { margin: 0 0 var(--sp-5); max-width: var(--measure); color: var(--navy); }
.tool-card .btn { margin-top: auto; }
.tools__note { margin: var(--sp-5) 0 0; color: var(--caption); }

/* ---------- Page head (inner pages) ---------- */
.page-head {
  padding: var(--sp-7) 0 var(--sp-7);
  background: var(--navy);
  color: var(--on-navy);
}
.page-head h1 { color: var(--white); margin-bottom: var(--sp-3); }
.page-head .lead { color: var(--on-navy); }
.page-head .lead strong { color: var(--white); }
@media (min-width: 768px) {
  .page-head { padding: var(--sp-8) 0 var(--sp-8); }
}

/* ---------- Sections ---------- */
.section { padding: var(--sp-8) 0; }
.section--alt { background: var(--lav-2); }
.section__head { max-width: var(--measure); margin-bottom: var(--sp-6); }
.section__head h2 { margin-bottom: var(--sp-3); }

/* Two-column: heading left, content right */
.aside-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .aside-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-8); }
  .aside-grid > .section__head { margin-bottom: 0; }
}

/* ---------- Directory (contents-list rows) ---------- */
.directory {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--navy);
}
.directory li {
  position: relative;
  display: grid;
  gap: var(--sp-1) var(--sp-5);
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--grey);
  transition: background-color 0.15s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .directory li:hover { background: var(--lav-2); } }
.directory a {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--navy);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .directory li:hover a { color: var(--purple); } }
/* Stretch the row link over the whole row */
.directory a::after { content: ""; position: absolute; inset: 0; }
.directory a:focus-visible { box-shadow: none; }
.directory li:focus-within { box-shadow: inset 0 0 0 3px var(--violet); }
.directory p { margin: 0; font-size: var(--fs-sm); color: var(--caption); }
.directory ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; font-size: var(--fs-sm); color: var(--caption); }
.directory ul li { display: list-item; padding: 0; border: 0; }
@media (hover: hover) and (pointer: fine) { .directory ul li:hover { background: none; } }
.directory ul li::marker { color: var(--cobalt); }
@media (min-width: 640px) {
  .directory > li { grid-template-columns: minmax(12rem, 5fr) minmax(0, 7fr); align-items: baseline; }
}

/* Homepage directory: hairline-ruled list (2 columns from 768px) */
.directory--home > li { grid-template-columns: none; align-items: start; align-content: start; transition: background-color var(--dur-2) var(--ease); }
.directory--home .directory__t {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-out);
}
.directory--home .ext-icon { transition: transform var(--dur-2) var(--ease-out); }
/* Only the row's own link stretches over the row; inline links in the text stay clickable above it */
.directory--home p a { position: relative; z-index: 1; font-weight: 600; color: var(--purple); text-decoration: underline; text-underline-offset: 0.15em; }
.directory--home p a::after { content: none; }
.directory--home .tick { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .directory--home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); }
}
@media (hover: hover) and (pointer: fine) {
  .directory--home > li:hover { background: var(--lav-2); }
  .directory--home > li:hover .directory__t { transform: translateX(4px); }
  .directory--home > li:hover .ext-icon { transform: translate(2px, -2px); }
}
.directory--home > li:has(:focus-visible) { background: var(--lav-2); }
.directory--home > li:has(> a:focus-visible) .directory__t { transform: translateX(4px); }
.directory--home > li:has(> a:focus-visible) .ext-icon { transform: translate(2px, -2px); }

/* Scroll reveal, once for the whole list. Hidden state only with JS and motion allowed */
@keyframes settle { from { opacity: 0.001; transform: translateY(24px); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .directory--home { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
  .js .directory--home.reveal { opacity: 0.001; transform: translateY(24px); }
  .js .directory--home.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
}

/* ---------- Services: audiences + principles (home) ---------- */
.pledge__head { max-width: 46rem; margin-bottom: var(--sp-7); }
.pledge__head .lead { color: var(--navy); }
.pledge__aud { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .pledge__aud { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); } }
.aud { padding-top: var(--sp-4); border-top: 2px solid var(--navy); }
.aud h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); line-height: 1.4; }
.aud__who { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); color: var(--purple); }
:lang(en) .aud__who { display: inline; font-size: inherit; }
.aud p { margin: 0; max-width: var(--measure); }
.pledge__cards {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 768px) { .pledge__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pledge__card {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid #DCDCEC;
  border-radius: var(--radius);
}
.pledge__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  padding: 10px;
  border-radius: 50%;
  background: var(--lav-1);
  color: var(--purple);
}
.pledge__card h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); }
.pledge__card p { margin: 0; font-size: var(--fs-sm); color: var(--caption); }

/* ---------- Category meta, tags ---------- */
.topic__meta { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--caption); }
.tag {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: 0 0.5em;
  border-radius: var(--radius-sm);
  background: var(--lav-1);
  color: var(--indigo);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.group-title {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-base);
  color: var(--cobalt);
}
.section__head + .group-title { margin-top: 0; }

/* ---------- Study note (重點 callout) ---------- */
.note {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--indigo);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--lav-1);
  color: var(--navy);
  font-size: var(--fs-sm);
  max-width: 52em;
}
.note svg { width: 20px; height: 20px; flex: none; color: var(--indigo); margin-top: 0.3em; }

/* ---------- Closing band ---------- */
.band {
  padding: var(--sp-8) 0;
  background: var(--navy);
  color: var(--on-navy);
}
.band__grid { display: grid; gap: var(--sp-5); }
.band h2 { color: var(--white); margin-bottom: var(--sp-3); }
.band p { max-width: var(--measure); }
.band__aside { margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, 0.18); color: var(--on-navy); }
.band__aside a { color: var(--white); }
@media (min-width: 900px) {
  .band__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--sp-8); }
}

/* ---------- Prose (About) ---------- */
.prose {
  max-width: var(--measure);
  font-size: var(--fs-base);
  line-height: 1.95;
}
.prose h2 {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--grey);
  font-size: var(--fs-lg);
}
.prose > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose ul { padding-left: 1.25em; margin: 0 0 var(--sp-4); }
.prose li { margin-bottom: var(--sp-2); }
.prose li::marker { color: var(--cobalt); }
.prose blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--purple);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--lav-1);
  font-weight: 500;
  color: var(--navy);
}
.prose a { word-break: break-word; }

.en-block {
  max-width: var(--measure);
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-5);
  background: var(--lav-2);
  border-top: 2px solid var(--navy);
  line-height: 1.7;
}
.en-block h2 { margin-top: 0; font-size: var(--fs-lg); }

/* ---------- Contact sheet ---------- */
.sheet {
  margin: 0;
  border-top: 2px solid var(--navy);
  max-width: 52rem;
}
.sheet__row {
  position: relative;
  display: grid;
  gap: var(--sp-1) var(--sp-5);
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--grey);
  transition: background-color 0.15s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .sheet__row:hover { background: var(--lav-2); } }
.sheet__row:focus-within { box-shadow: inset 0 0 0 3px var(--violet); }
.sheet dt { font-size: var(--fs-sm); font-weight: 500; color: var(--caption); }
.sheet dd { margin: 0; }
.sheet dd a {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  word-break: break-word;
}
@media (hover: hover) and (pointer: fine) { .sheet__row:hover dd a { color: var(--purple); } }
.sheet dd a::after { content: ""; position: absolute; inset: 0; }
.sheet dd a:focus-visible { box-shadow: none; }
.sheet dd p { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--caption); }
@media (min-width: 640px) {
  .sheet__row { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding: var(--sp-8) 0 var(--sp-5);
  background: var(--lav-3);
  color: var(--navy);
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--navy); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--purple); text-decoration: underline; } }

.footer__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer__slogan {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--navy);
}
.footer__slogan span { display: block; }
.footer__slogan span + span { font-weight: 500; color: var(--caption); }
.footer__brand > p:last-child { color: var(--caption); max-width: 26em; }
.site-footer h2 {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--navy);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--sp-2); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid #D6D6E6;
  color: var(--caption);
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.site-footer .footer__legal li + li { margin-top: 0; }
.footer__legal a { color: var(--caption); }

/* Footer tap targets: 聯絡 / Contact and 社交媒體 / Social lists only.
   Each row is a full 44px target; legal micro-links stay compact. */
.footer__grid ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.15em;
  min-height: var(--tap);
}
.site-footer .footer__grid li + li { margin-top: 0; }
.footer__grid ul a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline-end: var(--sp-3);
  overflow-wrap: anywhere;
}
.footer__grid ul a:focus-visible { border-radius: var(--radius-sm); }

/* Keep the footer brand clear of the sticky header on anchor / focus scroll */
.site-footer,
.footer__brand {
  scroll-margin-top: calc(var(--header-h) + var(--safe-t) + var(--sp-4));
}

/* Mobile: keep the footer's last line clear of the home indicator */
@media (max-width: 767px) {
  .site-footer { padding-bottom: calc(var(--sp-5) + var(--safe-b)); }
}
@media print {
  .site-footer { padding-bottom: var(--sp-5); }
}

/* ==========================================================================
   Native blog, article and resource pages
   ========================================================================== */

/* Hide the injected Wix Headless badge */
#wixheadless-banner-container, #wixheadless-banner { display: none !important; visibility: hidden !important; }

/* ---------- Breadcrumb (on navy page heads) ---------- */
.breadcrumb { margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-1) 0; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--on-navy); }
.breadcrumb li + li::before { content: "›"; margin: 0 var(--sp-2); color: #B9BFD4; }
.breadcrumb a { color: var(--white); text-decoration-color: rgba(255, 255, 255, 0.4); }
@media (hover: hover) and (pointer: fine) { .breadcrumb a:hover { color: var(--lav-1); } }
.breadcrumb [aria-current="page"] { color: var(--on-navy); text-decoration: none; }

/* ---------- Post head ---------- */
.page-head--post h1 { max-width: 30em; font-size: var(--fs-xl); }
.post-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm); color: var(--on-navy);
}

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: var(--tap); padding: 0.2rem 0.8rem;
  border: 1px solid var(--purple); border-radius: 999px;
  background: var(--white); color: var(--purple);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--lav-2); color: var(--indigo); text-decoration: none; } }
.on-navy .chip { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
@media (hover: hover) and (pointer: fine) { .on-navy .chip:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); border-color: var(--white); } }
.chip--filter[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: var(--white); }
.chip__count { font-weight: 500; font-size: var(--fs-xs); opacity: 0.8; }

/* ---------- Article body ---------- */
.section--article { padding-top: var(--sp-7); }
.article { margin-inline: 0; overflow-wrap: anywhere; }
.article p { margin-bottom: var(--sp-4); }
.article ol, .article ul { padding-left: 1.4em; margin: 0 0 var(--sp-4); }
.article ol li::marker { color: var(--cobalt); font-weight: 600; }
.article li > p { margin-bottom: var(--sp-2); }
.article strong { background: linear-gradient(transparent 62%, var(--lav-1) 62%); }
.article .hashtags {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--grey);
  font-size: var(--fs-xs); line-height: 1.7; color: var(--caption);
}
.article-note { margin-top: var(--sp-6); }

/* Prev / next */
.post-nav {
  display: grid; gap: var(--sp-3);
  max-width: 52rem; margin-top: var(--sp-7);
  border-top: 2px solid var(--navy); padding-top: var(--sp-4);
}
@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__link {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4); border: 1px solid var(--grey); border-radius: var(--radius);
  color: var(--navy); text-decoration: none;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .post-nav__link:hover { background: var(--lav-2); border-color: var(--purple); color: var(--purple); } }
.post-nav__link--next { text-align: right; }
.post-nav__label { font-size: var(--fs-xs); font-weight: 600; color: var(--caption); }
.post-nav__title { font-weight: 700; line-height: 1.5; }
.back-link { margin-top: var(--sp-6); }

/* ---------- Blog index ---------- */
.blog-filter { margin-bottom: var(--sp-6); }
.blog-group { margin-top: var(--sp-7); }
.blog-group:first-of-type { margin-top: 0; }
.blog-group[hidden] { display: none; }
.blog-group__head { max-width: var(--measure); margin-bottom: var(--sp-4); }
.blog-group__head h2 { margin-bottom: var(--sp-1); font-size: var(--fs-lg); }
.blog-group__head .topic__meta { margin-bottom: var(--sp-2); }

/* ---------- Article cards (tips + blog) ---------- */
.post-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid #DCDCEC;
  border-top: 3px solid var(--purple);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.post-card__meta {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--caption);
}
.post-card__meta .tag { margin: 0; }
.post-card__title { margin: 0 0 var(--sp-3); font-size: var(--fs-md); line-height: 1.45; overflow-wrap: anywhere; }
.post-card__title a { color: var(--navy); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card__title a:focus-visible { box-shadow: none; }
.post-card__teaser { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); line-height: 1.75; color: var(--caption); overflow-wrap: anywhere; }
.post-card__more {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--purple);
  transition: transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .post-card:hover { background: var(--lav-2); border-color: #C9C9E4; border-top-color: var(--indigo); }
  .post-card:hover .post-card__title a { color: var(--purple); }
  .post-card:hover .post-card__more { transform: translateX(4px); color: var(--indigo); }
}
.post-card:focus-within { background: var(--lav-2); box-shadow: var(--focus); }
.blog-group .post-grid { margin-top: var(--sp-2); }

/* ---------- Resource pages ---------- */
.res-stack { display: grid; gap: var(--sp-5); max-width: 52rem; }
.res-card {
  padding: var(--sp-5);
  border-top: 2px solid var(--navy);
  background: var(--lav-2);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow-wrap: anywhere;
}
@media (min-width: 640px) { .res-card { padding: var(--sp-6); } }
.res-card h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.res-card h3 { font-size: var(--fs-base); margin: var(--sp-5) 0 var(--sp-2); color: var(--cobalt); }
.res-card > :first-child { margin-top: 0; }
.res-card p { color: var(--navy); }
.res-card .btn-row { margin: var(--sp-4) 0; }
.res-card .btn-row:last-child { margin-bottom: 0; }
.res-card ul, .res-card ol { padding-left: 1.25em; margin: 0 0 var(--sp-4); }
.res-card li::marker { color: var(--cobalt); }
.res-gallery { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0; }
@media (min-width: 640px) { .res-gallery { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.res-figure { margin: 0; }
.res-figure img { width: 100%; height: auto; border: 1px solid var(--grey); border-radius: var(--radius-sm); background: var(--white); }
.tag--lock { background: var(--navy); color: var(--white); }
.page-head .tag--lock { background: var(--white); color: var(--navy); }

/* ---------- Terms ---------- */
.terms { font-size: var(--fs-sm); line-height: 1.9; }
.terms ol { padding-left: 1.6em; margin: 0 0 var(--sp-4); }
.terms ol ol { margin: var(--sp-2) 0; }
.terms li { margin-bottom: var(--sp-2); }

/* Inline links on navy page heads */
.page-head .lead a { color: var(--white); text-decoration-color: rgba(255, 255, 255, 0.5); }
@media (hover: hover) and (pointer: fine) { .page-head .lead a:hover { color: var(--lav-1); } }
/* ---------- Nav social icons ---------- */
.site-nav__social { display: flex; align-items: stretch; }
.site-nav .nav-social { padding: 0 var(--sp-2); border-bottom: 0; opacity: 0.85; }
.site-nav .nav-social img { display: block; width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .site-nav .nav-social:hover { opacity: 1; } }
@media (max-width: 767px) { .site-nav__social { gap: var(--sp-3); padding-top: var(--sp-2); } .site-nav .nav-social { padding: var(--sp-2); } }

/* ---------- Article search ---------- */
.blog-search { margin: 0 0 var(--sp-4); }
.blog-search input { width: 100%; max-width: 34rem; min-height: var(--tap); padding: 0 var(--sp-4); border: 1px solid var(--caption); border-radius: 0; background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-base); }
.blog-search input:focus-visible { outline: none; border-color: var(--purple); box-shadow: var(--focus); }
.blog-search__empty { margin: var(--sp-4) 0; color: var(--caption); }
.post-grid > li[hidden], .blog-group[hidden], .blog-search__empty[hidden] { display: none !important; }

/* ---------- Closing band: compact on phones ---------- */
@media (max-width: 767px) {
  .band { padding: var(--sp-5) 0; }
  .band__grid { gap: var(--sp-3); }
  .band h2 { font-size: var(--fs-md); margin-bottom: 0; }
  .band__grid p { display: none; }
  .band .btn-row { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }
  .band .btn { width: 100%; min-height: var(--tap); padding-block: 0; font-size: var(--fs-sm); }
}

/* ---------- Resource cards ---------- */
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--sp-5); list-style: none; margin: 0 0 var(--sp-8); padding: 0; }
.rgrid--hub { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.rcard > a { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--grey); color: var(--navy); text-decoration: none; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .rcard > a:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(14 40 65 / 0.12); text-decoration: none; } }
.rcard > a:focus-visible { box-shadow: var(--focus); }
.rcard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--lav-2); }
.rcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcard__cover { aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-1); padding: var(--sp-5); background: var(--navy); color: var(--white); }
.rcard__cover--dse { background: var(--purple); }
.rcard__cover b { font-size: var(--fs-xl); line-height: 1.15; font-weight: 700; }
.rcard__cover span { color: var(--on-navy); font-size: var(--fs-sm); }
.rcard--hub .rcard__cover { aspect-ratio: 16 / 7; }
.rcard--hub .rcard__cover b { font-size: var(--fs-2xl); }
.rcard__body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.rcard__body h2, .rcard__body h3 { margin: 0; color: var(--navy); font-size: var(--fs-md); line-height: 1.35; }
.rcard--hub .rcard__body h2 { font-size: var(--fs-lg); }
.rcard__body p { margin: 0; color: var(--caption); }
.rcard__list { margin: 0; padding-left: 1.1em; color: var(--navy); }
.rcard__list li { margin: 0.15em 0; }
.rcard__meta { display: flex; justify-content: space-between; margin-top: auto !important; padding-top: var(--sp-3); color: var(--purple) !important; font-size: var(--fs-sm); font-weight: 600; }
.group-title + .rgrid { margin-top: var(--sp-3); }

/* ---------- Less template, more page ---------- */
main .note { display: block; margin: var(--sp-6) 0 0; padding: var(--sp-3) 0 0; background: none; border: 0; border-top: 1px solid var(--grey); border-radius: 0; box-shadow: none; }
main .note > svg { display: none; }
main .note p { max-width: var(--measure); margin: 0; color: var(--caption); font-size: var(--fs-sm); }
main .note a { color: inherit; }
.rcard > a { border: 0; background: none; transition: none; }
.rcard > a:hover { transform: none; box-shadow: none; }
.rcard > a:hover h2, .rcard > a:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
.rcard__body { padding: var(--sp-3) 0 0; }
.rcard__meta { justify-content: flex-start; padding-top: var(--sp-2); color: var(--caption) !important; font-weight: 500; }
.rgrid { row-gap: var(--sp-7, 2.5rem); }

/* ---------- Hub photo covers ---------- */
.rcard__cover--photo { background: linear-gradient(to top, rgb(14 40 65 / 0.88) 0%, rgb(14 40 65 / 0.35) 55%, rgb(14 40 65 / 0.1) 100%), var(--photo) center / cover no-repeat; }
.rcard__cover--dse.rcard__cover--photo { background: linear-gradient(to top, rgb(61 45 113 / 0.9) 0%, rgb(84 84 160 / 0.4) 55%, rgb(84 84 160 / 0.1) 100%), var(--photo) center / cover no-repeat; }
.rcard__cover--photo span { color: var(--white); }

/* ---------- Related links ---------- */
.related-res { margin: var(--sp-6) 0 var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--grey); color: var(--caption); }

/* ---------- About page ---------- */
.ab-hero { background: var(--navy); color: var(--on-navy); padding: var(--sp-8) 0 0; overflow: hidden; }
.ab-hero__grid { display: grid; gap: var(--sp-6); align-items: end; }
.ab-hero__text { padding-bottom: var(--sp-8); }
.ab-hero h1 { color: var(--white); font-size: var(--fs-2xl); line-height: 1.2; margin: var(--sp-3) 0 var(--sp-4); max-width: 16em; }
.ab-hero .lead { max-width: var(--measure); }
.ab-hero .btn-row { margin-top: var(--sp-5); }
.ab-hero__photo { margin: 0; align-self: stretch; }
.ab-hero__photo img { display: block; width: 100%; height: 100%; max-height: 30rem; object-fit: cover; }
@media (min-width: 900px) { .ab-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); } .ab-hero__photo img { max-height: none; min-height: 28rem; } }
.ab-stats { border-bottom: 1px solid var(--grey); }
.ab-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.ab-stats__grid > div { padding: var(--sp-5) var(--sp-4) var(--sp-5) 0; border-top: 1px solid var(--grey); }
.ab-stats__grid dt { color: var(--navy); font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; }
.ab-stats__grid dd { margin: var(--sp-1) 0 0; color: var(--caption); font-size: var(--fs-sm); }
@media (min-width: 900px) { .ab-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ab-stats__grid > div:nth-child(-n+4) { border-top: 0; } }
.ab-split { display: grid; gap: var(--sp-6); }
.ab-split p { max-width: var(--measure); }
@media (min-width: 900px) { .ab-split { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-8); } }
.ab-unis { border-left: 3px solid var(--purple); padding-left: var(--sp-5); align-self: start; }
.ab-unis h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.ab-unis ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
.ab-cards { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ab-cards li { background: var(--white); padding: var(--sp-5); border-top: 3px solid var(--navy); }
.ab-cards svg { color: var(--purple); }
.ab-cards h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-md); }
.ab-cards p { margin: 0; color: var(--caption); }
.ab-services { margin-top: var(--sp-5); display: grid; gap: 0 var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.ab-services article { padding: var(--sp-5) 0; border-top: 1px solid var(--grey); display: flex; flex-direction: column; gap: var(--sp-2); }
.ab-services h3 { margin: 0; font-size: var(--fs-md); }
.ab-services p { margin: 0; color: var(--caption); flex: 1; }
.ab-services a { font-weight: 600; }
.ab-steps { list-style: none; counter-reset: step; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.ab-steps li { counter-increment: step; position: relative; padding-top: var(--sp-6); border-top: 2px solid var(--navy); }
.ab-steps li::before { content: counter(step); position: absolute; top: var(--sp-3); left: 0; color: var(--purple); font-size: var(--fs-lg); font-weight: 700; line-height: 1; }
.ab-steps h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-md); }
.ab-steps p { margin: 0; color: var(--caption); }
.ab-faq { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .ab-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-8); } }
.ab-faq details { border-top: 1px solid var(--grey); }
.ab-faq details:last-child { border-bottom: 1px solid var(--grey); }
.ab-faq summary { cursor: pointer; list-style: none; padding: var(--sp-4) var(--sp-6) var(--sp-4) 0; position: relative; font-weight: 600; color: var(--navy); min-height: var(--tap); }
.ab-faq summary::-webkit-details-marker { display: none; }
.ab-faq summary::after { content: "+"; position: absolute; right: 0; top: var(--sp-4); color: var(--purple); font-size: var(--fs-md); line-height: 1; }
.ab-faq details[open] summary::after { content: "−"; }
.ab-faq details p { margin: 0 0 var(--sp-4); color: var(--caption); max-width: var(--measure); }
.ab-faq summary:focus-visible { box-shadow: var(--focus); }
.ab-contact { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-top: 1px solid var(--grey); }
.ab-contact li { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-bottom: 1px solid var(--grey); display: flex; flex-direction: column; gap: var(--sp-1); }
.ab-contact span { color: var(--caption); font-size: var(--fs-sm); }
.ab-contact a { font-weight: 600; font-size: var(--fs-md); }

/* ---------- Footer: compact on phones ---------- */
@media (max-width: 767px) {
  .site-footer { padding: var(--sp-5) 0 calc(var(--sp-3) + var(--safe-b)); }
  .footer__grid { gap: 0; }
  .footer__grid > div:not(.footer__brand) { display: none; }
  .footer__slogan, .footer__brand > p:last-child { display: none; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); }
  .footer__bottom > p:last-child { display: none; }
  .footer__legal { gap: var(--sp-1) var(--sp-4); }
}