.hero {
      position: relative; height: 85vh; min-height: 520px;
      overflow: hidden; display: flex; align-items: flex-end;
      background-size: cover; background-position: center;
      background-color: #001428;
      /* URL comes from --hero-bg / --hero-bg-m custom props set inline by the
         generator, so mobile can swap to a w_900 variant of the same crop */
      background-image: var(--hero-bg);
    }
    .hero-semester { border-bottom: 8px solid var(--teal); }
    .hero-summer1 { border-bottom: 8px solid var(--orange); }
    .hero-summer2 { border-bottom: 8px solid var(--orange); }
    .hero-semester .hero-eyebrow { color: var(--teal); }
    .hero-semester .hero-eyebrow::before { background: var(--teal); }
    .hero-summer1 .hero-eyebrow { color: var(--orange); }
    .hero-summer1 .hero-eyebrow::before { background: var(--orange); }
    .hero-summer2 .hero-eyebrow { color: var(--orange); }
    .hero-summer2 .hero-eyebrow::before { background: var(--orange); }
    .hero-overlay {
      position: absolute; inset: 0; z-index: 1;
    }
    .hero-content {
      position: relative; z-index: 2; text-align: left; color: #fff;
      padding: 0 48px 56px; max-width: 900px; width: 100%;
      margin-right: auto; margin-left: clamp(24px, 5vw, 80px);
    }
    .hero-eyebrow {
      font-family: var(--font-head); font-weight: 700; font-size: 20px;
      letter-spacing: 3px; text-transform: uppercase;
      color: var(--lime); margin-bottom: 20px;
      display: flex; align-items: center; gap: 14px;
      text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6);
    }
    .hero-eyebrow::before { content: ''; display: block; width: 32px; height: 2px; background: var(--lime); }
    .hero-title {
      font-family: var(--font-head); font-weight: 800;
      font-size: 72px; letter-spacing: -2px;
      line-height: 0.95; text-transform: uppercase; margin-bottom: 28px;
      text-wrap: balance;
      text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.45);
    }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
    /* §5.5: the shared teal anthem band sits between the navy field-sites section and the
       warm-gray courses section on program pages, so it carries both 3px white seams here. */
    .anthem-section { border-top: 3px solid #fff; border-bottom: 3px solid #fff; }
    @media (max-width: 860px) {
      .hero-overlay { background: linear-gradient(to bottom, rgba(0,20,40,0.04) 0%, rgba(0,20,40,0.08) 30%, rgba(0,20,40,0.26) 50%, rgba(0,20,40,0.50) 68%, rgba(0,20,40,0.68) 85%, rgba(0,20,40,0.74) 100%); }
      /* shared.css's tablet hero inset: this sheet loads after it, so its base rule kept 48px plus the desktop
         margin from 641 to 860 (pass 7, cycle 4). The 640 rule below resets both for phones. */
      .hero-content { padding-left: 32px; padding-right: 32px; margin-left: 16px; }
    }
    @media (max-width: 640px) {
      .hero { height: auto; min-height: 0; background-image: var(--hero-bg-m, var(--hero-bg)); }
      .hero-content { padding: 120px 24px 40px; margin-left: 0; }
      .hero-ctas { flex-direction: column; }
      .hero-ctas .btn { width: 100%; text-align: center; }
    }
    /* Phone hero crop (pass 8): a hero-only wide band is magnified by cover on a near-square phone hero,
       so the generator gives those heroes a square --hero-bg-p; every other page falls back to --hero-bg-m. */
    @media (max-width: 480px) {
      .hero { background-image: var(--hero-bg-p, var(--hero-bg-m, var(--hero-bg))); }
    }
    /* Tablet hero crop (pass 8, cycle 4): the same heroes' square at w_1200 from 641 to 860, where the 85vh hero is
       taller than wide and cover drew their wide band at 0.93 to 1.0x; every other page falls back to --hero-bg. */
    @media (min-width: 641px) and (max-width: 860px) {
      .hero { background-image: var(--hero-bg-t, var(--hero-bg)); }
    }
    .program-intro {
      max-width: 1200px; margin: 0 auto; padding: 72px 48px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
    }
    .program-intro-body h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 40px;
      text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
      line-height: 1.1; margin-bottom: 24px;
    }
    .program-intro-body p {
      font-size: 16px; line-height: 1.75; color: var(--dark); margin-bottom: 16px;
    }
    .program-intro-body p:last-child { margin-bottom: 0; }   /* the photo centres on the text, not on the text plus 16px (brand 5.6) */
    .program-intro-visual { border-radius: 8px; overflow: hidden; }
    .program-intro-visual img {
      width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 4 / 3;
    }
    @media (max-width: 860px) {
      .program-intro { grid-template-columns: 1fr; gap: 32px; padding: 64px 24px; }
    }
    .activities-section {
      background: var(--off-white); padding: 72px 48px;
      border-top: 3px solid var(--teal);
    }
    .activities-inner { max-width: 1200px; margin: 0 auto; }
    .activities-inner h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 40px;
      text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
      margin-bottom: 48px;
    }
    .activities-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    }
    .activity-card {
      background: #fff; border-radius: 8px; overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .activity-img { overflow: hidden; }
    .activity-img img {
      width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 3 / 2;
    }
    .activity-card-body { padding: 20px 24px 28px; }
    .activity-card h3 {
      font-family: var(--font-head); font-weight: 700; font-size: 15px;
      text-transform: uppercase; letter-spacing: 0.5px; color: var(--navy);
      margin-bottom: 10px; line-height: 1.3;
    }
    .activity-card p {
      font-size: 16px; line-height: 1.7; color: var(--dark);
    }
    @media (max-width: 860px) {
      .activities-section { padding: 64px 24px; }
      .activities-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      /* Mobile: horizontal scroll-snap carousel, the homepage treatment (brand §5.4) — the six
         stacked activity cards ran 3,364–3,438px of vertical scroll at 375px (pass 8b, 2026-09-14). */
      .activities-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 4px 24px 16px;
        margin: 0 -24px;
        scroll-padding: 0 24px;   /* snap positions honour the inset; mandatory snapping otherwise pulls the first card to the bleed edge (pass 8b, 2026-09-14) */
        scrollbar-width: none;
      }
      .activities-grid::-webkit-scrollbar { display: none; }
      .activity-card { flex: 0 0 84%; scroll-snap-align: start; }
    }
    .acad-courses {
      background: var(--warm-gray); padding: 72px 48px;
    }
    .acad-courses .section-label { color: #fff; }
    .acad-courses .section-label::before { background: currentColor; }
    /* Intro across the top, the courses in a grid beneath it (Dougie, 2026-09-20). Side by side, four or
       five stacked cards ran about 1,470px against a 400px intro: two thirds of the left column was bare
       ground and the section stood 1,611px tall at 1440. */
    .acad-courses-inner { max-width: 1200px; margin: 0 auto; }
    .acad-text {
      display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px;
      grid-template-rows: auto auto auto 1fr;   /* the 1fr row soaks up a long paragraph, so label, H2 and tags stay one tight stack */
      margin-bottom: 56px;
    }
    .acad-text .section-label { grid-column: 1; grid-row: 1; }
    .acad-text h2 {
      grid-column: 1; grid-row: 2;
      font-family: var(--font-head); font-weight: 800; font-size: 40px;
      text-transform: uppercase; letter-spacing: -0.5px; line-height: 1.1; color: #fff;
      margin-bottom: 24px;
    }
    .acad-body { grid-column: 2; grid-row: 2 / 5; }   /* the paragraph starts level with the H2, the eyebrow sits above both */
    .acad-text p {
      font-size: 16px; font-weight: 300; line-height: 1.75; color: #fff;
    }
    .theme-tags { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 8px; }
    .theme-tag {
      font-family: var(--font-head); font-weight: 600; font-size: 14px;
      letter-spacing: 1px; text-transform: uppercase;
      background: rgba(0,0,0,0.18); color: #fff;   /* darker chip ground: white text was 4.34:1 on the 15% white tint (pass 4, 2026-09-13) */
      padding: 7px 14px; border-radius: 3px;
    }
    .acad-courses-right h3 {
      font-family: var(--font-head); font-weight: 700; font-size: 18px;
      text-transform: uppercase; letter-spacing: -0.3px; color: #fff;
      margin-bottom: 16px;
    }
    .courses-subtitle {
      font-size: 16px; font-weight: 300; line-height: 1.5; color: #fff; margin-bottom: 20px;
    }
    @media (max-width: 860px) {
      .acad-courses { padding: 64px 24px; }
      /* one column: back to source order (label, H2, paragraph, tags) */
      .acad-text { display: block; margin-bottom: 40px; }
      .acad-text h2 { margin-bottom: 20px; }
      .theme-tags { margin-top: 20px; }
    }
    .research-banner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 420px;
      overflow: hidden;
      border-top: 3px solid #fff;
      border-bottom: 3px solid #fff;
      outline: 1px solid rgba(0,0,0,0.12);
    }
    .research-banner-text {
      background: var(--forest);
      padding: 72px 48px;
      padding-right: max(48px, calc((100vw - 1200px) / 2));
      order: 2;
      display: flex; flex-direction: column; justify-content: center;
    }
    .research-banner-text .section-label { color: var(--teal); }
    .research-banner-text .section-label::before { background: var(--teal); }
    .research-banner-text h2 {
      font-family: var(--font-head); font-weight: 800;
      font-size: 40px; text-transform: uppercase;
      color: #fff; letter-spacing: -0.5px; line-height: 1.1;
      margin-bottom: 20px;
    }
    .research-banner-text p {
      font-family: var(--font-body); font-size: 16px; font-weight: 300;
      color: #fff; line-height: 1.75;
      max-width: 440px; margin-bottom: 16px;
    }
    .research-banner-text p:last-child { margin-bottom: 0; }
    .research-banner-photos {
      display: grid;
      grid-template-columns: 1fr 3px 1fr;
      gap: 0;
      order: 1;
    }
    .research-banner-photos::before {
      content: ''; grid-column: 2; grid-row: 1; background: #fff;
    }
    .research-banner-photos > div:last-child {
      border-right: 3px solid #fff;
    }
    .research-banner-photos > div:first-child { border-left: 0; }   /* shared.css rails the first photo for the center layout, where photos sit right */
    .research-banner-photos div { overflow: hidden; }
    .research-banner-photos img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    @media (max-width: 860px) {
      .research-banner { grid-template-columns: 1fr; height: auto; }
      .research-banner-text { padding: 48px 24px; }
      /* §5.5: stacked, photos first: the seam moves to their bottom edge and the side rail goes */
      .research-banner-photos { min-height: 260px; border-top: 0; border-bottom: 3px solid #fff; }
      .research-banner-photos > div:last-child { border-right: 0; }
    }
    @media (max-width: 480px) {
      .research-banner-photos { min-height: 200px; }
      .research-banner-text { padding: 32px 24px; }   /* 24px from 381 to 640 like every page (pass 7, cycle 4) */
    }
    /* Two rows, no orphan: on a six-track grid five courses run 3 + 2 and four run 2 + 2.
       The generator stamps the count on the wrapper (.course-grid-5 / .course-grid-4). */
    .course-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
    .course-card {
      grid-column: span 3;
      background: var(--off-white); border-radius: 8px;
      overflow: hidden; display: flex; flex-direction: column;
    }
    .course-grid-5 > .course-card:nth-child(-n+3) { grid-column: span 2; }
    /* code and credits share the top line, the name takes its own: a three-across card is too narrow for all three in a row */
    .course-header {
      padding: 20px 24px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
    }
    .course-code {
      font-family: var(--font-body); font-weight: 700; font-size: 20px;
      letter-spacing: 1px; color: var(--dark); white-space: nowrap;
    }
    .course-name {
      font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1.3;
      color: var(--navy); width: 100%; order: 3;
    }
    /* two lines held for every name in the three-across row, so the rules and descriptions line up across it */
    .course-grid-5 > .course-card:nth-child(-n+3) .course-name { min-height: 2.6em; }
    .course-credits {
      font-family: var(--font-body); font-weight: 700; font-size: 20px;
      letter-spacing: 1px; text-transform: uppercase;
      background: var(--navy); color: #fff; margin-left: auto;
      padding: 5px 12px; border-radius: 3px; white-space: nowrap;
    }
    /* the body fills the card, so every syllabus link in a row sits on the same line at the foot */
    .course-body { flex: 1; display: flex; }
    .course-body-inner {
      flex: 1; display: flex; flex-direction: column; align-items: flex-start;
      padding: 0 24px 16px; border-top: 1px solid var(--light-gray);
    }
    .course-body-inner p {
      font-size: 16px; line-height: 1.75; color: var(--dark); padding-top: 16px; margin-bottom: 6px;
    }
    @media (max-width: 1100px) {
      /* a three-across card would fall under about 325px: two across, and the fifth course takes the full row */
      .course-grid-5 > .course-card:nth-child(-n+3) { grid-column: span 3; }
      .course-grid-5 > .course-card:nth-child(-n+3) .course-name { min-height: 0; }
      .course-grid-5 > .course-card:last-child { grid-column: 1 / -1; }
      .course-grid-5 > .course-card:last-child p { max-width: 68ch; }
    }
    @media (max-width: 860px) {
      .course-grid { grid-template-columns: 1fr; gap: 12px; }
      .course-grid > .course-card, .course-grid-5 > .course-card:nth-child(-n+3) { grid-column: auto; }
      .course-grid-5 > .course-card:last-child p { max-width: none; }
    }
    @media (min-width: 641px) and (max-width: 860px) {
      /* one full-width card per row: code, name and credits fit on one line again, as they did before the grid */
      .course-name { width: auto; order: 0; flex: 1; }
      .course-credits { margin-left: 0; }
    }
    .course-syllabus-link {
      display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
      margin-top: auto; font-family: var(--font-head); font-weight: 700;
      font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--navy); text-decoration: none; padding-bottom: 2px;
      border-bottom: 2px solid transparent; transition: border-color 0.2s;
    }
    .course-syllabus-link:hover { border-bottom-color: var(--navy); }
    .course-syllabus-link svg {
      width: 13px; height: 13px; fill: none; stroke: currentColor;
      stroke-width: 2.5; flex-shrink: 0;
    }
    @media (max-width: 640px) {
      .course-header { gap: 8px; padding: 16px 20px; }
      .course-body-inner { padding: 0 20px 14px; }   /* same inset as the header: the description sat 4px right of the course code */
    }
    .field-sites-section {
      background: var(--navy); padding: 72px 48px;
      border-top: 3px solid #fff;
    }
    .field-sites-inner { max-width: 1200px; margin: 0 auto; }
    .field-sites-section .section-label { color: var(--bright-teal); }
    .field-sites-section .section-label::before { background: currentColor; }
    .field-sites-section h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 40px;
      text-transform: uppercase; color: #fff; margin-bottom: 12px;
    }
    .field-sites-section > .field-sites-inner > p {
      font-size: 16px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.85); margin-bottom: 40px; max-width: 640px;
    }
    .field-sites-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    }
    .field-site-card {
      position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3;
      container-type: size;   /* lets the caption band measure the card (cqh) */
    }
    .field-site-card img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    /* The dark band belongs to the caption, not to the card (pass 4, 2026-09-19). As a share of
       card height it only reached the title on the 1440 layout it was tuned on; on phones and on
       narrow 3-up cards the caption was taller than the band and the white title sat on bare photo.
       It is the caption's ::before now: 140% of the caption, never less than 54% of the card (cqh;
       browsers without container units keep the first height).
       Strength (Dougie, 2026-09-19: "strengthen the band"): 0.82 at the foot, still 0.62 two thirds
       of the way up, which is always above the title's top edge, then clear. White type on 0.62 of
       this navy is 5.0:1 over a pure white photo, so the title passes AA on any picture; the old
       0.76 / 0.24 / clear recipe left it at 2.8 to 4.4 over bright skies. Field-site cards only:
       the homepage center cards keep the lighter recipe on his word. */
    .field-site-card-label {
      position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 20px;
      isolation: isolate;
    }
    .field-site-card-label::before {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
      height: 140%;
      height: max(140%, 54cqh);
      background: linear-gradient(to top, rgba(0,20,40,0.82) 0%, rgba(0,20,40,0.62) 66%, transparent 100%);
    }
    .field-site-card-label h3 {
      font-family: var(--font-head); font-weight: 700; font-size: 14px;
      text-transform: uppercase; letter-spacing: 0.5px; color: #fff;
    }
    .field-site-card-label p {
      /* 400 on purpose: photo-card captions are the brand.md §3.4 exception (Dougie, 2026-09-19) */
      font-size: 14px; font-weight: 400; line-height: 1.55; color: rgba(255,255,255,0.85); margin-top: 6px;
    }
    @media (max-width: 1100px) {
      /* Two across from 1100 down (was 860): a 3-up card narrower than ~340px is nearly all caption. */
      .field-sites-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 860px) {
      .field-sites-section { padding: 64px 24px; }
    }
    @media (max-width: 640px) {
      .field-sites-grid { grid-template-columns: 1fr; }
    }
    .center-cta {
      background: var(--lime); padding: 36px 48px;
      display: flex; align-items: center; justify-content: center; gap: 48px;
      border-top: 3px solid #fff;
    }
    /* §5.5: the research banner's own bottom border is the seam; the two together made 6px. */
    .research-banner + .center-cta { border-top: 0; }
    .center-cta h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 26px;
      text-transform: uppercase; color: var(--navy); margin-bottom: 4px;
    }
    .center-cta p {
      color: var(--navy); margin: 0;
    }
    .center-cta .btn-navy { white-space: nowrap; }
    @media (max-width: 860px) {
      .center-cta { flex-direction: column; text-align: center; padding: 36px 24px; gap: 20px; }
    }
    .dates-section {
      padding: 36px 48px; background: var(--off-white);
      border-top: 3px solid var(--teal);
    }
    .dates-inner { max-width: 1100px; margin: 0 auto; }
    .dates-header {
      display: flex; justify-content: space-between; align-items: flex-end;
      margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
    }
    .dates-inner h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 26px;
      text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
      margin: 0;
    }
    .dates-aid-link {
      display: inline-flex; align-items: center; min-height: 44px;
      font-family: var(--font-body); font-weight: 700; font-size: 20px;
      color: var(--navy); text-decoration: none; letter-spacing: 0.5px;
      text-transform: uppercase; padding-bottom: 2px;
      border-bottom: 2px solid var(--lime);
    }
    .dates-aid-link:hover { border-bottom-color: var(--navy); }
    .sessions-row {
      display: flex; gap: 16px; flex-wrap: wrap;
    }
    .session-pill {
      background: #fff; border-radius: 10px; padding: 20px 24px;
      flex: 1 1 0; min-width: 220px; max-width: 480px;
      border: 1px solid rgba(0,0,0,0.06);
    }
    .session-pill-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 4px;
    }
    .session-pill-term {
      font-family: var(--font-head); font-weight: 800; font-size: 15px;
      text-transform: uppercase; color: var(--navy);
    }
    .session-pill-status {
      font-family: var(--font-head); font-weight: 700;
      font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
      padding: 3px 10px; border-radius: 3px;
    }
    .status-open { background: rgba(170,185,35,0.12); color: var(--olive); }
    .status-field { background: rgba(0,72,98,0.08); color: var(--navy); }
    .status-filling { background: var(--gold); color: var(--navy); }
    .status-waitlist { background: rgba(61,53,47,0.08); color: var(--dark); }
    .session-pill-dates {
      font-size: 16px; color: var(--dark); margin-bottom: 10px;
    }
    .session-pill-cost {
      font-family: var(--font-body); font-weight: 700; font-size: 22px;
      color: var(--navy);
    }
    .dates-note {
      font-size: 16px; color: var(--dark); margin-top: 16px;
    }
    @media (max-width: 860px) {
      .dates-section { padding: 32px 24px; }
      .sessions-row { flex-direction: column; }
      .session-pill { min-width: 0; }
      .dates-header { flex-direction: column; align-items: flex-start; }
    }
    .other-programs {
      background: var(--off-white); padding: 72px 48px;
      border-top: 3px solid var(--teal);
    }
    .other-programs-inner { max-width: 1200px; margin: 0 auto; }
    .other-programs h2 {
      font-family: var(--font-head); font-weight: 800; font-size: 40px;
      text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
      margin-bottom: 40px;
    }
    .sibling-grid {
      display: grid; gap: 24px;
    }
    .sibling-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .sibling-card {
      position: relative; border-radius: 8px; overflow: hidden;
      text-decoration: none; display: block; aspect-ratio: 3 / 2;
      background-color: var(--navy);
      container-type: size;   /* lets the caption band measure the card (cqh) */
    }
    .sibling-card img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform 0.5s;
    }
    .sibling-card:hover img { transform: scale(1.05); }
    /* Same band as the field-site cards above (Dougie, 2026-09-19: "same treatment for the sibling
       cards"): it is the caption's ::before, 140% of the caption and never less than the old 55% of
       the card, 0.82 at the foot and still 0.62 above the title's top edge, then clear. The old
       fixed 55% strip (0.84, 0.54 at 40%, clear) left a three-line program name above it on the
       narrow 4-up cards, and titles at 3.0 to 4.4 over bright photos. */
    .sibling-card-info {
      position: absolute; bottom: 0; left: 0; right: 0; padding: 20px;
      color: #fff;
      isolation: isolate;
    }
    .sibling-card-info::before {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
      height: 140%;
      height: max(140%, 55cqh);
      background: linear-gradient(to top, rgba(0,20,40,0.82) 0%, rgba(0,20,40,0.62) 66%, transparent 100%);
    }
    .sibling-card-title {
      font-family: var(--font-head); font-weight: 800; font-size: 16px;
      text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.2;
    }
    .sibling-card-meta {
      font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.9);   /* §3.4 photo-card caption exception */ margin-top: 4px;
      white-space: nowrap;
    }
    @media (max-width: 1100px) {
      .sibling-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 860px) {
      .other-programs { padding: 64px 24px; }
      .hero-title { font-size: 56px; letter-spacing: -1px; }
    }
    @media (max-width: 640px) {
      /* One column only on phones. It used to start at 860, so from 641 to 860 the four cards stacked
         at full width (720x480 each at 768, a 1,992px strip); they hold two across down to 640, like
         the field-site grid (pass 7, 2026-09-20). The generator's `sizes` says 46vw up to 1100 to match. */
      .sibling-grid, .sibling-grid.cols-4 { grid-template-columns: 1fr; }
      .program-intro-body h2,
      .activities-inner h2,
      .acad-text h2,
      .field-sites-section h2,
      .other-programs h2,
      .research-banner-text h2 { font-size: 28px; }   /* §3.7 mobile H2 */
      .center-cta h2 { font-size: 22px; }
      .hero-title { font-size: 36px; letter-spacing: -0.5px; line-height: 1.05; }
    }
    @media (max-width: 380px) {
      .hero-content { padding-left: 16px; padding-right: 16px; }
      .hero-title { font-size: 32px; overflow-wrap: break-word; }
      .program-intro { padding: 48px 16px; }
      .research-banner-text { padding-left: 16px; padding-right: 16px; }   /* 20px from 480 down; 16 here like every other section (pass 7, cycle 4) */
      .activities-section { padding: 48px 16px; }
      .activities-grid { padding: 4px 16px 16px; margin: 0 -16px; scroll-padding: 0 16px; }   /* carousel bleed follows the 16px section padding */
      .acad-courses { padding: 48px 16px; }
      .field-sites-section { padding: 48px 16px; }
      .other-programs { padding: 48px 16px; }
      .center-cta { padding: 36px 16px; }
      .dates-section { padding: 32px 16px; }
      .session-pill { padding: 16px 18px; }
      .course-header { padding: 14px 16px; }
      .course-body-inner { padding: 0 16px 12px; }
    }

/* Mobile hero type scale (matches the homepage pattern) */
@media (max-width: 640px) {
  .hero-eyebrow { font-size: 13px; letter-spacing: 2px; }
}