/* ==========================================================================
   OFFLUX — Visual System 1.0
   Two blues. Prussian is ink (everything you read).
   Ultramarine is signal (full-bleed blocks, one link colour, max 3 per page).
   ========================================================================== */

:root {
  /* colour */
  --paper:   #F7F8FB;
  --paper-2: #ECEFF5;
  --ink:     #17365C;
  --ink-2:   #2B4A73;
  --grey:    #6C7A93;
  --signal:  #1526E0;
  --deep:    #0A1440;
  --line:    rgba(23, 54, 92, 0.16);
  --line-2:  rgba(23, 54, 92, 0.08);
  --reverse: #E9ECF7;

  /* legacy aliases so existing markup keeps working */
  --bone: var(--paper);
  --bone-2: var(--paper-2);
  --ink-soft: var(--ink-2);
  --muted: var(--grey);
  --line-soft: var(--line-2);
  --accent: var(--signal);

  /* type */
  --grotesk: "Archivo", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --sans:    var(--grotesk);

  /* space — 8pt base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:176px;

  --pad:  clamp(20px, 4.6vw, 64px);
  --maxw: 1440px;
  --t: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--signal); color: #fff; }

/* paper grain */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0.5; mix-blend-mode: multiply;
  background-image: 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='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ==========================================================================
   TYPE — grotesk caps label and title, serif carries any claim
   ========================================================================== */
.display {
  font-family: var(--grotesk);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: clamp(38px, 7.2vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.h1 em, .display em, .hero__title em { font-style: italic; font-weight: 300; color: inherit; }
.h2 {
  font-family: var(--grotesk);
  font-variation-settings: "wdth" 108;
  font-weight: 600;
  font-size: clamp(21px, 2.4vw, 33px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.h3 {
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.24;
  letter-spacing: -0.01em;
}
.lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}
.label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--grey);
}
.small { font-size: 13px; color: var(--grey); line-height: 1.6; }
.serif-em { font-family: var(--serif); font-style: italic; }

/* ---------- layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
section { position: relative; }
.section { padding-top: var(--s9); padding-bottom: var(--s9); }
.section--tight { padding-top: var(--s8); padding-bottom: var(--s8); }
.rule { border-top: 1px solid var(--line); }

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

/* the 3/9 section head — the site's spine */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: var(--s6);
  align-items: start;
  padding-top: var(--s5);
  border-top: 1px solid var(--ink);
  margin-bottom: var(--s8);
}
.sec-head .idx { font-family: var(--serif); font-size: 13px; color: var(--grey); }
.sec-head__title { display: flex; flex-direction: column; gap: var(--s3); }

/* ---------- buttons: square, never rounded ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 21px 12px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.4s var(--t), color 0.4s var(--t), border-color 0.4s var(--t);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn--solid:hover { background: transparent; color: var(--signal); }
.btn--light { border-color: rgba(233,236,247,0.45); color: var(--reverse); }
.btn--light:hover { background: var(--reverse); color: var(--deep); border-color: var(--reverse); }

/* arrow link — the only link style */
.link-u {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--signal);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--t);
}
.link-u::after { content: "\2197"; font-size: 12px; }
.link-u:hover { border-bottom-color: var(--signal); }
.dark .link-u { color: var(--reverse); }
.dark .link-u:hover { border-bottom-color: var(--reverse); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 248, 251, 0.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); height: 66px;
}
.brand {
  font-family: var(--grotesk);
  font-variation-settings: "wdth" 125;
  font-weight: 600;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.brand sup {
  font-variation-settings: "wdth" 100;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  vertical-align: super;
  color: var(--grey);
  margin-left: 5px;
}
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.nav a {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: 4px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--signal);
  transition: width 0.45s var(--t);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--ink); }
.head-cta { display: flex; align-items: center; gap: var(--s3); }
.burger {
  display: none; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 0;
  background: transparent; cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 11px; width: 16px; height: 1px; background: var(--ink);
  transition: transform 0.4s var(--t);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { padding: var(--s9) 0 var(--s7); }
.hero__meta {
  display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  padding-bottom: var(--s4); margin-bottom: var(--s7);
  border-bottom: 1px solid var(--ink);
}
.hero__foot {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--s6); align-items: end; margin-top: var(--s7);
}
.hero__actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero-figure {
  margin-top: var(--s8);
  aspect-ratio: 16 / 7;
  position: relative; overflow: hidden;
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-figure--img::after { color: rgba(255, 255, 255, 0.75); }
.hero-figure::after {
  content: attr(data-caption);
  position: absolute; left: var(--s4); bottom: var(--s4);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey);
}

/* registration marks — the only ornament */
.marks { position: relative; overflow: visible; }
.marks::before, .marks::after {
  content: ""; position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 2;
}
.marks::before { top: -9px; left: -9px; border-top: 1px solid var(--signal); border-left: 1px solid var(--signal); }
.marks::after { bottom: -9px; right: -9px; border-bottom: 1px solid var(--signal); border-right: 1px solid var(--signal); }

/* image placeholders — flat, no colour */
.ph {
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  position: relative; overflow: hidden;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(23,54,92,0.05) 0 1px, transparent 1px 10px);
}
.ph--1x1 { aspect-ratio: 1 / 1; }
.ph--4x5 { aspect-ratio: 4 / 5; }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph span {
  position: absolute; left: var(--s4); bottom: var(--s3);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey);
}

/* ---------- marquee ---------- */
.strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--s4) 0; overflow: hidden; white-space: nowrap;
}
.strip__track { display: inline-flex; gap: 44px; animation: slide 46s linear infinite; will-change: transform; }
.strip__track span {
  font-family: var(--grotesk); font-variation-settings: "wdth" 104;
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.strip__track span::after { content: "/"; margin-left: 44px; color: var(--signal); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* logo variant.
   Marks keep their own artwork and are neutralised in CSS with grayscale().
   Do NOT flatten them to a single colour: NYU, UCL and KCL are knockout
   lockups (white shapes reversed out of a coloured box) and a flat fill
   erases the torch, building and crest entirely.
   Plain <img> is deliberate — CSS mask-image is blocked on file:// origins.
   --s is per-logo optical scale, since a boxed crest and a wordmark of the
   same pixel height do not read as the same size. */
.strip--logos { --lh: 24px; padding: var(--s5) 0; }
.strip--logos .strip__track { gap: 60px; }
/* flex:none is load-bearing — the track is inline-flex, so its width is capped
   at the viewport and image items would otherwise shrink to nothing */
.strip--logos .strip__track span { display: inline-flex; align-items: center; flex: none; }
/* the "/" separator collides with the following logo; spacing carries it */
.strip--logos .strip__track span::after { content: none; }
.strip--logos .logo {
  display: block; width: auto; flex: none;
  height: calc(var(--lh) * var(--s, 1));
  filter: grayscale(1);
  opacity: 0.62;
}
@media (max-width: 720px) { .strip--logos { --lh: 19px; } }

/* optical scale per mark. Placeholders sit at 1.00. */
.logo--kcl     { --s: 1.50 } /* boxed crest */
.logo--rca     { --s: 1.55 } /* crest */
.logo--edin    { --s: 1.45 } /* crest + wordmark */
.logo--ucl     { --s: 1.35 }
.logo--sva     { --s: 1.35 }
.logo--parsons { --s: 1.30 }
.logo--csm     { --s: 1.30 }
.logo--ual     { --s: 1.30 }
.logo--nyu     { --s: 1.20 }
.logo--pratt   { --s: 1.15 }
.logo--calarts { --s: 1.15 }
.logo--usc     { --s: 1.30 } /* shield + wordmark lockup */
.logo--berkeley{ --s: 1.15 }
.logo--cornell { --s: 0.92 } /* very wide, light wordmark */

/* two marks grey out far lighter than the rest; needs the .strip--logos
   prefix to outrank the base .strip--logos .logo filter */
.strip--logos .logo--pratt { filter: grayscale(1) brightness(0.60); }
.strip--logos .logo--edin  { filter: grayscale(1) brightness(0.72); }
.strip--logos .logo--cornell { filter: grayscale(1) brightness(0.62); }

/* ---------- package comparison matrix ---------- */
.pkg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pkg__grid { min-width: 720px; }
.pkg__row {
  display: grid;
  grid-template-columns: minmax(190px, 2.6fr) repeat(4, minmax(88px, 1fr));
  gap: var(--s4); align-items: center;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line-2);
}
.pkg__row--head {
  align-items: end; padding-bottom: var(--s4);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.pkg__row--last { border-bottom: 1px solid var(--ink); }
.pkg__svc { font-size: 13.5px; color: var(--ink-2); }
.pkg__hd { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.pkg__tier { text-align: center; }
.pkg__tier b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); }
.pkg__tier i {
  display: block; margin-top: 5px; font-style: normal;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
}
.pkg__tier span { display: block; margin-top: 9px; font-size: 11.5px; color: var(--grey); }
/* cell values */
.pkg__v { text-align: center; font-size: 14px; color: var(--ink); }
.pkg__v em { font-style: normal; color: var(--grey); font-size: 12px; }
.pkg__v--no { color: rgba(23, 54, 92, 0.22); }
.pkg__row--price {
  border-top: 1px solid var(--ink); border-bottom: 0;
  padding-top: var(--s4); padding-bottom: var(--s2); align-items: baseline;
}
.pkg__price {
  text-align: center; font-family: var(--serif); font-size: clamp(18px, 1.8vw, 25px);
  letter-spacing: -0.01em; color: var(--ink);
}
.pkg__note { margin-top: var(--s4); font-size: 12px; color: var(--grey); }
/* ---------- scheduler embed ---------- */
.booking__embed {
  margin-top: var(--s6); border: 1px solid var(--line);
  background: var(--paper-2); overflow: hidden;
}
/* Side-by-side month view needs the height as well as the width, or Cal scrolls
   the times inside its own pane and the calendar loses its bottom row. Cal folds
   the times underneath once its own box drops below about 1024px, and the box is
   the viewport minus two --pad, so that happens at roughly 1140px of viewport,
   not at 1024. Match the breakpoint to the box, not to the number Cal quotes. */
.booking__embed iframe { display: block; width: 100%; height: 560px; border: 0; }
@media (min-width: 721px)  { .booking__embed iframe { height: 640px; } }
@media (min-width: 1140px) { .booking__embed iframe { height: 720px; } }

/* ---------- a-la-carte price list ---------- */
.ala { border-top: 1px solid var(--ink); }
.ala__row {
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,3fr) auto;
  gap: var(--s4); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line-2);
}
.ala__svc { font-size: 14px; color: var(--ink); }
.ala__unit { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.ala__amt { font-family: var(--serif); font-size: 17px; color: var(--ink); white-space: nowrap; }
@media (max-width: 560px) {
  .ala__row { grid-template-columns: 1fr auto; }
  .ala__unit { display: none; }
}
@media (max-width: 860px) {
  .pkg::after {
    content: "→ scroll"; display: block; margin-top: var(--s3);
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey);
  }
}

/* ---------- cards ---------- */
.card {
  display: flex; flex-direction: column; gap: var(--s4);
  padding-top: var(--s4); border-top: 1px solid var(--ink);
}
.card__no { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--signal); }
.card p { color: var(--ink-2); }
.card ul.ticks { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--s2); }
.card ul.ticks li { font-size: 13px; color: var(--grey); padding-left: 18px; position: relative; }
.card ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--signal);
}

/* ---------- pillars ---------- */
.pillar { padding-top: var(--s4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2); }
.pillar .num {
  font-family: var(--grotesk); font-variation-settings: "wdth" 118; font-weight: 600;
  font-size: 24px; line-height: 1; color: var(--signal); letter-spacing: -0.02em;
}

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.stat { border-top: 1px solid var(--ink); padding-top: var(--s4); }
.stat__fig {
  font-family: var(--grotesk); font-variation-settings: "wdth" 118; font-weight: 600;
  font-size: clamp(40px, 5.4vw, 82px); line-height: 0.92; letter-spacing: -0.04em;
  display: block; margin-bottom: var(--s2);
}
.stat__fig sup { font-size: 0.34em; vertical-align: super; letter-spacing: 0; }

/* ---------- dark / signal blocks ---------- */
.dark { background: var(--deep); color: var(--reverse); }
.dark .label, .dark .small { color: rgba(233,236,247,0.62); }
.dark .lede { color: rgba(233,236,247,0.78); }
.dark .stat, .dark .sec-head, .dark .card { border-top-color: rgba(233,236,247,0.4); }
.dark .quote { border-top-color: rgba(233,236,247,0.3); }
.dark .quote figcaption { color: rgba(233,236,247,0.6); }
.dark .card__no, .dark .pillar .num { color: var(--reverse); }

/* manifesto — centred caps on ultramarine, once per page max */
.manifesto { background: var(--signal); color: #fff; padding: var(--s10) 0; text-align: center; }
.manifesto .brk {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,0.72); display: block; margin-bottom: var(--s6);
}
.manifesto p {
  max-width: 46ch; margin: 0 auto;
  font-family: var(--grotesk); font-variation-settings: "wdth" 104; font-weight: 600;
  text-transform: uppercase; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.34;
}

/* hard split — the one place the 12-col grid is overridden */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; }
.split__panel {
  background: var(--signal); color: #fff;
  padding: var(--s8) clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6);
}
.split__panel .h2, .split__panel .h3 { color: #fff; }
.split__panel .small { color: rgba(255,255,255,0.82); }
.split__panel .brk { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.72); }
.split__panel .link-u { color: #fff; }
.split__panel .link-u:hover { border-bottom-color: #fff; }
.split__img { position: relative; background: var(--paper-2); overflow: hidden; }
.split__img::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(23,54,92,0.05) 0 1px, transparent 1px 10px);
}
.split__img img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.split__img--filled::before { content: none; }
.split__img--filled::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to top, rgba(10,20,64,0.78), transparent);
  z-index: 2; pointer-events: none;
}
.split__img--filled span { color: rgba(255,255,255,0.95); z-index: 3; }
/* 黑白按需：给 <img> 加 class="is-bw"，不是所有图都该去色 */
.split__img--filled img.is-bw { filter: grayscale(1) contrast(1.05); }
.split__img span {
  position: absolute; left: var(--s5); bottom: var(--s5);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey);
}

/* ---------- quotes ---------- */
.quote { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.quote blockquote {
  margin: 0; font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 25px); line-height: 1.3; letter-spacing: -0.01em;
}
.quote blockquote em { font-style: italic; font-weight: 300; }
.quote figcaption { font-size: 12px; color: var(--grey); letter-spacing: 0.02em; }

/* ---------- rows ---------- */
.rows { border-top: 1px solid var(--ink); }
.row {
  display: grid;
  grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr) auto;
  gap: var(--s5);
  align-items: baseline;
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.5s var(--t);
}
.row:hover { padding-left: 12px; }
.row__no { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--signal); }
.row__meta { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }

/* ---------- detail ---------- */
.detail {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s7); padding: var(--s8) 0; border-top: 1px solid var(--line); align-items: start;
}
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s6); margin-top: var(--s6); }
.spec dt { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); margin-bottom: 5px; }
.spec dd { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- accordion ---------- */
.acc { border-top: 1px solid var(--ink); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  cursor: pointer; list-style: none; padding: var(--s5) 0;
  display: flex; justify-content: space-between; gap: var(--s5); align-items: baseline;
  font-family: var(--serif); font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -0.01em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--grotesk); font-size: 17px; color: var(--signal); }
.acc details[open] summary::after { content: "\2013"; }
.acc .acc__body { padding: 0 0 var(--s6); max-width: 68ch; color: var(--ink-2); }

/* ---------- offer wall ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  padding: var(--s4) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
.filters .label { margin-right: var(--s3); }
.chip {
  font-family: var(--grotesk); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; padding: 8px 14px 7px; border: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--grey); cursor: pointer;
  transition: border-color 0.35s var(--t), color 0.35s var(--t), background 0.35s var(--t);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #fff; }

.offer-table { border-bottom: 1px solid var(--line); }
.offer-row {
  display: grid; grid-template-columns: 56px minmax(0, 4.2fr) minmax(0, 3fr) minmax(0, 2.6fr) auto;
  gap: var(--s5); align-items: baseline; padding: var(--s4) 0; border-top: 1px solid var(--line);
}
.offer-row__yr { font-size: 10px; letter-spacing: 0.18em; font-weight: 600; color: var(--grey); }
.offer-row__school { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.01em; color: var(--ink); }
.offer-row__prog { font-size: 13px; color: var(--ink-2); }
.offer-row__who { font-size: 12.5px; color: var(--grey); }
.offer-row__tag {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--grey); white-space: nowrap; border: 1px solid var(--line); padding: 5px 11px 4px;
}
.offer-row.is-hidden { display: none; }
.offer-row.is-award .offer-row__tag { border-color: var(--signal); color: var(--signal); }

.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
/* grid items default to min-width:auto, so a long unbroken caption word such as
   "Telecommunications" was forcing the column wider than the track and pushing
   the page into horizontal scroll at 390px */
.wall figure { min-width: 0; }
.wall figcaption { overflow-wrap: anywhere; }
.wall .ph { aspect-ratio: 17 / 22; }
.wall figcaption { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-top: 10px; }

.tally { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s5); }
.tally div { border-top: 1px solid var(--line); padding-top: var(--s3); }
.tally .n {
  font-family: var(--grotesk); font-variation-settings: "wdth" 118; font-weight: 600;
  font-size: clamp(28px, 2.8vw, 42px); line-height: 0.95; letter-spacing: -0.035em;
  display: block; margin-bottom: 6px;
}
.tally .s { font-size: 11.5px; color: var(--grey); line-height: 1.4; display: block; }
.dark .tally div { border-top-color: rgba(233,236,247,0.3); }

/* ---------- form ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s6); }
.field { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.field input, .field select, .field textarea { min-width: 0; width: 100%; }
.field input, .field select, .field textarea {
  font-family: var(--grotesk); font-size: 15px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 0; border-radius: 0; transition: border-color 0.4s var(--t);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--signal); }

/* ---------- footer ---------- */
.site-foot { background: var(--deep); color: var(--reverse); padding: var(--s9) 0 var(--s7); }
.site-foot a { color: rgba(233,236,247,0.72); }
.site-foot a:hover { color: var(--reverse); }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.4fr));
  gap: var(--s6); padding-bottom: var(--s7); border-bottom: 1px solid rgba(233,236,247,0.18);
}
/* grid items default to min-width:auto, so the long unbroken email address
   was pinning each column at its min-content width and pushing the footer
   past the viewport on phones */
.foot-col { min-width: 0; }
.foot-col a, .foot-col li { overflow-wrap: anywhere; }
.foot-col h4 { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(233,236,247,0.5); margin-bottom: var(--s4); font-weight: 600; }
.foot-col li { margin-bottom: 9px; font-size: 13.5px; }
.foot-bottom {
  display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  padding-top: var(--s5); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(233,236,247,0.5);
}

/* ---------- page hero ---------- */
.page-hero { padding: var(--s9) 0 var(--s7); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: end; }
.crumb { margin-bottom: var(--s6); }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--t), transform 0.9s var(--t); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .wall { grid-template-columns: repeat(3, 1fr); }
  .tally { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .offer-row { grid-template-columns: 52px minmax(0, 3fr) minmax(0, 2.4fr) auto; }
  .offer-row__who { grid-column: 2 / 4; }
  .row { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .row:hover { padding-left: 0; }
  .row__no { order: -1; }
  .row__meta { order: 9; }
}
@media (max-width: 860px) {
  .nav {
    position: fixed; inset: 66px 0 auto;
    background: var(--paper); flex-direction: column; align-items: flex-start;
    gap: var(--s1); padding: var(--s5) var(--pad) var(--s7);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%); transition: transform 0.55s var(--t);
  }
  body.nav-open .nav { transform: none; }
  .nav a { font-size: 15px; letter-spacing: 0.14em; padding: 10px 0; }
  .nav a::after { display: none; }
  .burger { display: block; }
  .head-cta .btn { display: none; }
  .g-2, .g-3, .g-4, .g-sidebar, .sec-head, .hero__foot, .detail,
  .page-hero__grid, .stats, .form, .split { grid-template-columns: 1fr; }
  .split { min-height: 0; }
  .hero-figure { aspect-ratio: 4 / 3; }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .tally { grid-template-columns: repeat(2, 1fr); }
  .spec { grid-template-columns: 1fr 1fr; }
  .offer-row { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; padding: var(--s5) 0; }
  .offer-row__yr { grid-row: span 4; }
  .offer-row__who { grid-column: 2; }
  .offer-row__tag { justify-self: start; margin-top: var(--s2); }
  .manifesto { padding: var(--s8) 0; }
}