/* ==========================================================================
   Stylesheet
   ========================================================================== */

:root {
  --brand:          #46bfd8;  /* bright cyan — top rule, pins, accents */
  --brand-deep:     #1a8fa8;  /* primary button fill */
  --brand-deeper:   #147d95;  /* primary button hover */
  --brand-text:     #15788e;  /* link / small-caps text */
  --brand-ink:      #12798f;  /* stat numbers, eyebrow labels */
  --brand-wash:     #eaf6f9;  /* secondary button fill */
  --brand-wash-2:   #ddf0f5;  /* secondary button hover */
  --brand-edge:     #bfe3ec;  /* secondary button border */
  --brand-tint:     #eef7f9;  /* active nav pill */

  --ink:            #1d2226;
  --ink-2:          #22282c;
  --ink-3:          #31383c;
  --body:           #4e565a;
  --muted:          #61686d;
  --muted-2:        #767d81;
  --faint:          #8a9195;

  --page:           #f2f3f3;
  --surface:        #ffffff;
  --surface-2:      #fbfcfd;
  --surface-3:      #f4f6f6;
  --line:           #e2e5e6;
  --line-2:         #e9ebec;
  --line-3:         #f0f2f2;
  --field-line:     #cdd2d4;

  --dark:           #3c4245;
  --dark-2:         #33383b;

  --note-bg:        #fdfbf4;
  --note-line:      #eae2cc;
  --note-text:      #6f6547;

  --alert:          #b3261e;  /* red alert bar */
  --alert-edge:     #8c1d18;

  --radius:         6px;
  --radius-sm:      4px;
  --max:            1280px;
  --font:           "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: #21262a;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-text); text-decoration: none; }
a:hover { color: #0f5c6d; text-decoration: underline; }
input, textarea, select, button { font-family: inherit; }

img { max-width: 100%; }

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

/* --------------------------------------------------------------------------
   Google Material Symbols
   Loaded per page from fonts.googleapis.com, subset to only the icons this
   site uses (close, menu, warning). The icon name is written as the element's
   text and the font turns it into a glyph via a ligature.
   -------------------------------------------------------------------------- */

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

@keyframes tsrCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tsrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Respect the OS "reduce motion" setting: things still open and close, just
   without the sliding and fading. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .topnav.is-collapsible,
  .topnav.is-collapsible.is-open { transition: none; }
  .modal__panel { animation: none; }
  .hero__caret { animation: none; }
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */

.shell { min-height: 100vh; display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   Site-wide alert bar
   Sits above the sticky header and scrolls away with the page, so it is the
   first thing seen without permanently eating vertical space.
   Text and button come from `banner` in data/site.json.
   -------------------------------------------------------------------------- */

.alert-bar {
  background: var(--alert);
  color: #ffffff;
  border-bottom: 2px solid var(--alert-edge);
}
.alert-bar[hidden] { display: none; }

.alert-bar__inner {
  max-width: var(--max); margin: 0 auto; padding: 11px 20px;
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
}

/* Warning glyph on the far left, in place of the old text pill.
   align-self: center keeps its middle level with the middle of the message,
   however many lines that message wraps to. */
.alert-bar__icon {
  flex: none; align-self: center;
  font-size: 34px;
  color: #ffffff;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 40;
}

.alert-bar__text {
  flex: 1; min-width: min(280px, 100%);
  font-size: 13.5px; line-height: 1.55; color: #ffeceb; text-wrap: pretty;
}
.alert-bar__text a { color: #ffffff; text-decoration: underline; font-weight: 600; }
.alert-bar__text a:hover { color: #ffffff; }

.alert-bar__btn {
  flex: none; padding: 8px 15px; border-radius: var(--radius-sm);
  background: #ffffff; color: var(--alert-edge);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid #ffffff;
}
.alert-bar__btn:hover { background: #ffeceb; color: var(--alert-edge); text-decoration: none; }
.alert-bar__btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Tighter on phones so the bar does not swallow the top of the screen. */
@media (max-width: 760px) {
  .alert-bar__inner { padding: 9px 14px; gap: 7px 10px; }
  .alert-bar__icon { font-size: 26px; }
  .alert-bar__text { font-size: 12.5px; line-height: 1.45; min-width: 0; }
  .alert-bar__btn { width: 100%; text-align: center; padding: 7px 14px; font-size: 13px; }
}

.page {
  flex: 1; width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 22px 20px 46px; display: flex; gap: 24px; align-items: flex-start;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60; background: var(--surface);
  border-top: 3px solid var(--brand); border-bottom: 1px solid #dfe2e3;
  box-shadow: 0 1px 3px rgba(30, 40, 45, .08);
}

.site-header__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 20px; min-height: 57px;
  display: flex; align-items: center; gap: 18px;
}

.brand { display: flex; align-items: center; gap: 9px; padding-right: 6px; }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 30px; display: block; }
.brand span { font-size: 19px; letter-spacing: -.3px; color: var(--ink-2); font-weight: 600; }

.topnav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }

.topnav a {
  padding: 8px 11px; border-radius: var(--radius-sm); white-space: nowrap;
  font-size: 13.5px; color: #41484c; border-bottom: 2px solid transparent;
}
.topnav a:hover { background: #eef0f1; text-decoration: none; color: #41484c; }
.topnav a[aria-current="page"] {
  background: var(--brand-tint); border-bottom-color: var(--brand); color: var(--ink-2);
}

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

.nav-toggle {
  display: none; margin-left: auto; background: var(--surface); border: 1px solid #dcdfe0;
  border-radius: var(--radius-sm); padding: 8px; color: #41484c; cursor: pointer;
  line-height: 0;   /* 26px glyph + 8px padding + 1px border = 44px touch target */
}
.nav-toggle:hover { background: #f2f4f4; }
.nav-toggle:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
.nav-toggle .material-symbols-outlined { font-size: 26px; }

/* --------------------------------------------------------------------------
   Side rail
   -------------------------------------------------------------------------- */

.rail {
  position: sticky; top: 79px; width: 182px; flex: none;
  display: flex; flex-direction: column; gap: 14px;
}

.rail__group { display: flex; flex-direction: column; gap: 1px; }

.rail__group a {
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; color: #3d4448;
  border-left: 3px solid transparent; display: block;
}
.rail__group a:hover { background: #e9ebec; text-decoration: none; color: #3d4448; }
.rail__group a[aria-current="page"] {
  background: var(--brand-tint); border-left-color: var(--brand); color: var(--ink-2);
}
.rail__group a.is-sub { padding: 7px 12px 7px 24px; font-size: 12.5px; color: #5a6165; }

.rail__divider { height: 1px; background: #e2e5e6; }

.rail__label {
  font-size: 10.5px; letter-spacing: .09em; color: var(--faint); padding: 2px 12px 5px;
}

.rail__note {
  background: var(--note-bg); border: 1px solid var(--note-line);
  border-radius: var(--radius); padding: 12px;
}
.rail__note-title { font-size: 12.5px; font-weight: 600; color: #3d4448; margin-bottom: 5px; }
.rail__note-body { font-size: 12px; line-height: 1.5; color: var(--muted); }
.rail__note a { margin-top: 9px; font-size: 12.5px; display: inline-block; }

.rail__nl { font-size: 12.5px; padding: 0 12px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--brand-text); }
.rail__nl:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Cards & sections
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.card--flush { padding: 0; overflow: hidden; }
.card--hero { padding: 26px 28px; }
.card--accent { border-top: 3px solid var(--brand); }
.card--accent-deep { border-top: 3px solid var(--brand-deep); }

.card__header {
  padding: 18px 24px; border-bottom: 1px solid var(--line-2);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}

.eyebrow {
  font-size: 10.5px; letter-spacing: .09em; color: var(--faint);
  text-transform: uppercase;
}
.eyebrow--brand { color: var(--brand-ink); }
.eyebrow--lg { font-size: 11px; letter-spacing: .1em; color: #7c8488; }

.section-label { font-size: 10.5px; letter-spacing: .09em; color: var(--faint); margin: 4px 0 -6px; }

h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.15; letter-spacing: -.7px; font-weight: 700; color: var(--ink); }
h2 { margin: 0 0 9px; font-size: 23px; line-height: 1.2; letter-spacing: -.4px; font-weight: 700; color: var(--ink); }
h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink-2); }

.lede { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--body); max-width: 72ch; text-wrap: pretty; }
.prose { font-size: 13.5px; line-height: 1.65; color: #5b6367; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block; padding: 11px 18px; border-radius: var(--radius-sm);
  white-space: nowrap; font-size: 14px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; text-align: center;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--brand-deep); border-color: #16809a; color: #ffffff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn--primary:hover { background: var(--brand-deeper); color: #ffffff; }

.btn--secondary { background: var(--brand-wash); border-color: var(--brand-edge); color: var(--brand-text); }
.btn--secondary:hover { background: var(--brand-wash-2); color: var(--brand-text); }

.btn--bright { background: var(--brand); color: #123239; font-weight: 600; }
.btn--bright:hover { background: #63cfe4; color: #123239; }

.btn--ghost {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: #ffffff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .16); color: #ffffff; }

.btn--sm { padding: 8px 13px; font-size: 13.5px; }
.btn--lg { padding: 13px 22px; font-size: 15px; }
.btn[disabled] {
  background: var(--line-2); border-color: #dcdfe0; color: #9aa1a5; cursor: not-allowed; box-shadow: none;
}

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.link-arrow { font-size: 13px; color: var(--brand-text); cursor: pointer; background: none; border: 0; padding: 0; }
.link-arrow:hover { text-decoration: underline; }

/* Yo bro */

.hero {
  display: flex; gap: 30px; align-items: center; flex-wrap: wrap;
  padding: 34px 34px 30px;
}
/* min() rather than a bare px value: the column keeps its ideal width when
   there is room, but is still allowed to shrink on very narrow phones instead
   of forcing the page to scroll sideways. */
.hero__body { flex: 1; min-width: min(320px, 100%); }
.hero h1 {
  margin: 0 0 14px; font-size: 48px; line-height: 1.12; letter-spacing: -1px;
  font-weight: 600; color: var(--ink); text-wrap: pretty;
}
/* Stop stalking my shit */
/* The typed word is plain inline text, so the caret and the comma sit flush
   against the last letter and slide with it as the word grows and shrinks. */
.hero__typed { color: var(--brand-ink); }
.hero__caret { color: var(--brand-ink); font-weight: 300; animation: tsrCaret 1s steps(1, end) infinite; }
.hero__sub { margin: 0 0 22px; font-size: 15.5px; line-height: 1.62; color: var(--body); max-width: 56ch; text-wrap: pretty; }
.hero__mark {
  width: 240px; height: 240px; flex: none; background: #f6fafb; border: 1px solid #e4eef1;
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
}
.hero__mark img { width: 142px; display: block; }
.hero__mark--sm { width: 190px; height: 190px; }
.hero__mark--sm img { width: 108px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; }
.stat__value { font-size: 30px; font-weight: 600; color: var(--brand-ink); letter-spacing: -1px; }
.stat__label { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.split-3--wide { gap: 16px; }
.split-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.split-side { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }

.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.feature__title { font-size: 16px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.feature__body { font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Photo tiles ------------------------------------------------------------- */

.photo {
  background: var(--surface-3); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo__placeholder {
  font-size: 12px; color: #9aa1a5; text-align: center; padding: 12px; line-height: 1.5;
}

.photo-lead { border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-height: 252px; }
.photo-lead .photo { flex: 1; min-height: 190px; }
.photo-lead__caption {
  padding: 12px 16px; border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.photo-lead__caption span:first-child { font-size: 12.5px; color: var(--muted); }
.photo-lead__caption span:last-child { font-size: 10.5px; color: var(--faint); }

.mosaic {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr;
  grid-template-rows: 132px 132px; gap: 12px;
}
.mosaic .photo { border: 1px solid var(--line-2); border-radius: 5px; }
.mosaic .photo:first-child { grid-row: span 2; }

/* Events ------------------------------------------------------------------ */

.event {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 0 18px; align-items: center;
  padding: 16px 24px; border-bottom: 1px solid var(--line-3);
}
.event:last-child { border-bottom: 0; }
.event__date {
  text-align: center; background: #f6fafb; border: 1px solid #e0eef2;
  border-radius: 5px; padding: 7px 0;
}
.event__month { font-size: 10px; letter-spacing: .08em; color: var(--brand-ink); }
.event__day { font-size: 19px; font-weight: 600; color: var(--ink-2); line-height: 1.1; }
.event__title { font-size: 14.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.event__meta { font-size: 12.5px; color: var(--muted-2); }

/* CTA banner -------------------------------------------------------------- */

.cta {
  background: var(--dark); border-radius: var(--radius); padding: 26px 28px;
  display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cta__body { min-width: min(280px, 100%); }
.cta__title { font-size: 19px; font-weight: 600; color: #ffffff; margin-bottom: 6px; }
.cta__text { font-size: 13.5px; color: #c3cacd; line-height: 1.6; max-width: 56ch; }

/* Rails */

.rail-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin: 0 0 12px;
}
.rail-head h3 { margin: 0 0 2px; font-size: 15px; }
.rail-head__sub { font-size: 10.5px; letter-spacing: .08em; color: var(--faint); }
.rail-nav { display: flex; gap: 6px; }
.rail-nav button {
  width: 28px; height: 28px; flex: none; border: 1px solid #dcdfe0; border-radius: var(--radius-sm);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: #41484c; cursor: pointer;
}
.rail-nav button:hover { background: #f2f4f4; }

.hscroll {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x proximity; padding: 2px 2px 12px;
  scrollbar-width: thin; scrollbar-color: #cfd5d7 transparent;
}
.hscroll::-webkit-scrollbar { height: 8px; }
.hscroll::-webkit-scrollbar-thumb { background: #cfd5d7; border-radius: 4px; }
.hscroll::-webkit-scrollbar-track { background: transparent; }

.mini-card {
  flex: 0 0 274px; scroll-snap-align: start; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px 15px; display: flex; flex-direction: column;
}
.mini-card--narrow { flex-basis: 252px; }
.mini-card__title { font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.3; margin-bottom: 7px; text-wrap: pretty; }
.mini-card__body { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-bottom: 14px; }
.mini-card__foot {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding-top: 11px; border-top: 1px solid #eceeef;
}
.mini-card__meta { font-size: 10.5px; color: var(--faint); }

.rail-more {
  flex: 0 0 176px; scroll-snap-align: start; border: 1px dashed #c9d3d6;
  border-radius: var(--radius); background: #fbfdfd; display: flex; flex-direction: column;
  justify-content: center; padding: 16px 18px;
}
.rail-more:hover { background: #f2f9fb; text-decoration: none; }
.rail-more__title { font-size: 14px; font-weight: 600; color: var(--brand-text); margin-bottom: 5px; }
.rail-more__sub { font-size: 10.5px; letter-spacing: .08em; color: var(--faint); }

/* Pips, chips, tags */

.pill {
  font-size: 11px; background: #e6f4f8; color: var(--brand-text);
  padding: 3px 7px; border-radius: 3px; display: inline-block;
}

.pips { display: flex; gap: 2px; align-items: flex-end; }
.pips span { width: 5px; height: 14px; border-radius: 1px; background: #e3e8ea; display: block; }
.pips span.on { background: var(--brand-ink); }

.filters { display: flex; flex-direction: column; gap: 11px; padding: 14px 16px; }
.filter-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.filter-row__label { font-size: 10px; letter-spacing: .08em; color: var(--faint); width: 56px; }

.chip {
  padding: 7px 13px; border: 1px solid #dcdfe0; border-radius: 999px; background: var(--surface);
  font-size: 12.5px; color: #41484c; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: #a9dfec; }
.chip[aria-pressed="true"] {
  border: 1.5px solid var(--brand-deep); background: rgba(26, 143, 168, .08); color: var(--ink-2);
}

.search {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius-sm);
}
.search span { font-size: 12px; color: #9aa1a5; }
.search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 13.5px; color: var(--ink-2);
}

.result-count { font-size: 10.5px; letter-spacing: .09em; color: var(--faint); }

/* Cards */

.course-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; display: flex; flex-direction: column; border-top: 3px solid var(--brand);
}
.course-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.course-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.25; color: var(--ink); text-wrap: pretty; }
.course-card p { margin: 0 0 14px; font-size: 13px; line-height: 1.62; color: var(--muted); text-wrap: pretty; }
.course-card__foot {
  margin-top: auto; display: flex; flex-direction: column; gap: 8px;
  padding-top: 13px; border-top: 1px solid #eceeef;
}
.spec { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); }
.spec span:last-child { font-size: 11.5px; color: #41484c; }

.project-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: flex; flex-direction: column;
}
.project-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 11px; }
.project-card__tempo { display: flex; align-items: center; gap: 8px; }
.project-card__tempo > span { font-size: 10.5px; color: var(--brand-ink); }
.project-card h3 { margin: 0 0 7px; font-size: 16px; line-height: 1.28; color: var(--ink); text-wrap: pretty; }
.project-card p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.project-card__foot {
  margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid #eceeef;
}

.tempo-card { border: 1px solid var(--line-2); border-radius: 5px; padding: 14px 15px; }
.tempo-card__name { font-size: 14.5px; font-weight: 600; color: var(--ink-2); margin: 10px 0 5px; }
.tempo-card__desc { font-size: 12px; line-height: 1.55; color: var(--muted); margin-bottom: 9px; }
.tempo-card__len { font-size: 10.5px; color: var(--faint); }

.tempo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }

.empty { padding: 34px; text-align: center; }
.empty__title { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.empty__body { font-size: 13px; color: var(--muted); margin-bottom: 16px; }

/* Team page */

.person { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.person .photo { height: 236px; border-bottom: 1px solid var(--line-2); }
.person--sm .photo { height: 186px; }
.person__body { padding: 18px 20px 20px; }
.person--sm .person__body { padding: 16px 18px 18px; }
.person__name { font-size: 17px; font-weight: 600; color: var(--ink-2); }
.person--sm .person__name { font-size: 15.5px; }
.person__role { font-size: 13px; color: var(--brand-ink); font-weight: 500; margin-top: 3px; }
.person--sm .person__role { font-size: 12.5px; }
.person__bio { margin: 11px 0 0; font-size: 13px; line-height: 1.62; color: var(--muted); }
.person--sm .person__bio { margin-top: 10px; font-size: 12.5px; line-height: 1.6; }

/* Loc pag */

.map-frame { display: block; width: 100%; height: 430px; border: 0; background: #eef0f0; }

.site-card__photo { height: 158px; border: 1px solid var(--line-2); border-radius: 5px; margin-bottom: 16px; }
.site-card h3 { margin: 0 0 4px; font-size: 19px; font-weight: 600; color: var(--ink); }
.site-card__addr { font-size: 13.5px; color: #41484c; margin-bottom: 4px; }
.site-card__note { font-size: 12.5px; color: var(--muted-2); line-height: 1.55; margin-bottom: 14px; }
.site-card__sub { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 8px; }
.site-card__list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.site-card__list li { font-size: 13px; color: var(--muted); line-height: 1.5; list-style: none; }
.site-card__list li::before { content: "— "; }
.site-card__stats {
  display: flex; gap: 22px; padding-top: 14px;
  border-top: 1px solid #eceeef; margin-bottom: 14px;
}
.site-card__stat-value { font-size: 18px; font-weight: 600; color: var(--brand-ink); }
.site-card__stat-label { font-size: 11.5px; color: var(--muted-2); }

.partner { border: 1px solid var(--line-2); border-radius: 5px; padding: 12px 14px; }
.partner__name { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.partner__meta { font-size: 11px; color: var(--faint); margin-top: 4px; }
.partner--cta { border: 1px dashed #c9d3d6; background: #fbfdfd; display: block; }
.partner--cta:hover { background: #f2f9fb; text-decoration: none; }
.partner--cta .partner__name { color: var(--brand-text); }

/* Timeline */

.step__num {
  font-size: 12px; color: var(--brand-ink); background: var(--brand-wash);
  border: 1px solid #cfe9f0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.step__title { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.step__body { font-size: 12.5px; line-height: 1.55; color: var(--muted); }

.tl { padding-left: 14px; border-left: 3px solid var(--brand-deep); }
.tl:nth-child(2) { border-left-color: #54c0d7; }
.tl:nth-child(3) { border-left-color: #8ed6e5; }
.tl:nth-child(4) { border-left-color: #c3e7ef; }
.tl__step { font-size: 10.5px; color: var(--brand-ink); margin-bottom: 6px; }

.role-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line-3);
}
.role-row:last-child { border-bottom: 0; }
.role-row__name { font-size: 13px; color: var(--ink-3); }
.role-row__status { font-size: 11px; color: #a2a2a2; }
.role-row__status.is-open { color: var(--brand-ink); }

/* Form */

.form { display: flex; flex-direction: column; gap: 14px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }

.field {
  width: 100%; padding: 10px 11px; font-size: 13.5px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--field-line);
  border-radius: var(--radius-sm); outline: none;
}
.field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(70, 191, 216, .22); }
textarea.field { padding: 11px; line-height: 1.55; resize: vertical; }

.field-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.field-count { font-size: 11px; color: #9aa1a5; }

.form-error {
  background: #fdf3f2; border: 1px solid #f0d3d0; border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 12.5px; color: #a63c37;
}
.form-note { font-size: 11.5px; color: var(--muted-2); }
.form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 2px; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.notice {
  background: var(--note-bg); border: 1px solid var(--note-line);
  border-radius: var(--radius); padding: 18px 20px;
}
.notice__tag {
  font-size: 10px; letter-spacing: .08em; background: #f3e7c9; color: #7a5d13;
  padding: 3px 6px; border-radius: 3px; display: inline-block; margin-bottom: 9px;
}
.notice__body { font-size: 12.5px; line-height: 1.6; color: var(--note-text); }

.info-row + .info-row { margin-top: 12px; }
.info-row__label { font-size: 10.5px; letter-spacing: .09em; color: var(--faint); margin-bottom: 3px; }
.info-row a { font-size: 13.5px; }

.qa + .qa { margin-top: 12px; }
.qa__q { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: 3px; }
.qa__a { font-size: 12.5px; line-height: 1.55; color: var(--muted); }

.sent__title { font-size: 18px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.sent__body { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 56ch; }
.sent__meta {
  background: #f7f9f9; border: 1px solid var(--line-2); border-radius: 5px;
  padding: 12px 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 16px;
}

/* Newsletter */

.modal {
  position: fixed; inset: 0; z-index: 200; background: rgba(24, 30, 33, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal[hidden] { display: none; }
.modal__panel {
  width: 100%; max-width: 452px; background: var(--surface); border: 1px solid #dfe2e3;
  border-radius: 8px; box-shadow: 0 18px 48px rgba(15, 22, 26, .32);
  padding: 26px 26px 22px; position: relative; animation: tsrIn .22s ease-out both;
}
.modal__close {
  position: absolute; top: 10px; right: 12px; font-size: 19px; line-height: 1;
  color: var(--faint); cursor: pointer; padding: 4px 6px; background: none; border: 0;
}
.modal__close:hover { color: var(--ink-3); }
.modal__title { font-size: 21px; font-weight: 700; letter-spacing: -.4px; color: var(--ink); margin-bottom: 8px; }
.modal__text { font-size: 13.5px; line-height: 1.6; color: #5b6367; margin-bottom: 18px; }
.modal__fine { font-size: 11.5px; color: var(--faint); margin-top: 12px; text-align: center; }
.modal__done { padding: 16px 0 6px; text-align: center; }
.modal__done img { width: 44px; display: block; margin: 0 auto 14px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--dark-2); border-top: 3px solid var(--brand); padding: 34px 20px 26px; }
.site-footer__inner {
  max-width: var(--max); margin: 0 auto; display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px;
}
.site-footer__brand { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.site-footer__brand img { width: 24px; height: 28px; display: block; }
.site-footer__brand span { font-size: 17px; color: #ffffff; letter-spacing: -.3px; font-weight: 600; }
.site-footer__tagline { font-size: 12.5px; line-height: 1.65; color: #a9b1b5; max-width: 34ch; }
.site-footer__col { display: flex; flex-direction: column; gap: 8px; }
.site-footer__label { font-size: 10.5px; letter-spacing: .09em; color: #8c9498; margin-bottom: 2px; }
.site-footer__col a, .site-footer__text { font-size: 13px; color: #cfd5d8; line-height: 1.6; }
.site-footer__col a:hover { color: #ffffff; text-decoration: none; }
.site-footer__nl {
  margin-top: 4px; padding: 8px 13px; border-radius: var(--radius-sm); white-space: nowrap;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .24);
  color: #ffffff; font-size: 12.5px; cursor: pointer; align-self: flex-start;
}
.site-footer__nl:hover { background: rgba(255, 255, 255, .17); }
.site-footer__base {
  max-width: var(--max); margin: 24px auto 0; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .11);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.site-footer__base div { font-size: 12px; color: #8c9498; }

/* Hi */

.loading { font-size: 13px; color: var(--faint); padding: 18px 0; }

.file-warning {
  background: #fdf3f2; border: 1px solid #f0d3d0; border-radius: var(--radius);
  padding: 16px 18px; font-size: 13px; line-height: 1.6; color: #8a3630; margin-bottom: 16px;
}
.file-warning code {
  background: #ffffff; border: 1px solid #f0d3d0; border-radius: 3px;
  padding: 1px 5px; font-size: 12.5px;
}

/* Resp */

@media (max-width: 1080px) {
  .split-4, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-3, .split-3--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .rail { display: none; }
  .nav-toggle { display: block; order: 2; margin-left: auto; }
  .site-header__inner { flex-wrap: wrap; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
  .topnav {
    order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 2px;
    padding: 6px 0 2px; border-top: 1px solid var(--line-2);
  }
  .topnav[hidden] { display: none; }

  /* The .is-collapsible class is added by site.js, so with JavaScript off the
     menu simply stays open rather than collapsing to nothing.
     max-height is animated because `display` and `hidden` cannot be; the exact
     pixel value is measured and set by site.js when the menu opens.
     visibility keeps the links out of the tab order while collapsed, and is
     delayed on close so it flips only after the slide has finished. */
  .topnav.is-collapsible {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow: hidden;
    visibility: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
    transition:
      max-height .3s cubic-bezier(.4, 0, .2, 1),
      opacity .2s ease,
      transform .3s cubic-bezier(.4, 0, .2, 1),
      padding .3s cubic-bezier(.4, 0, .2, 1),
      border-top-color .3s ease,
      visibility 0s linear .3s;
  }
  .topnav.is-collapsible.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    padding-top: 6px;
    padding-bottom: 2px;
    border-top-color: var(--line-2);
    transition:
      max-height .3s cubic-bezier(.4, 0, .2, 1),
      opacity .2s ease .04s,
      transform .3s cubic-bezier(.4, 0, .2, 1),
      padding .3s cubic-bezier(.4, 0, .2, 1),
      border-top-color .3s ease,
      visibility 0s;
  }

  .header-actions { order: 4; flex-basis: 100%; margin-left: 0; }
  .page { padding: 18px 16px 40px; }
}

@media (max-width: 760px) {
  .split-2, .split-3, .split-3--wide, .split-4, .split-side, .stat-grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .hero { padding: 26px 22px 24px; }
  .hero h1 { font-size: 34px; }
  .hero__mark { width: 100%; height: 200px; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mosaic .photo { height: 132px; }
  .mosaic .photo:first-child { grid-row: auto; grid-column: span 2; height: 176px; }
  .card, .card--hero { padding: 20px 18px; }
  .card__header { padding: 16px 18px; }
  .event { grid-template-columns: 64px 1fr; padding: 14px 18px; }
  .site-footer__inner { grid-template-columns: 1fr; }
  h1 { font-size: 25px; }
  h2 { font-size: 20px; }
}