/* ==========================================================================
   AILOT — site styles
   Everything here lives in the `site` cascade layer, which the ND Web Team
   reserves and leaves empty for exactly this purpose. Do not fork ndt.css.
   Layer order (declared by the theme): base, theme, utilities, print, site
   ========================================================================== */

@layer site {

  :root {
    /* Pull from the theme's own tokens; fall back to the real hex values so
       the page still holds together if the CDN is unreachable. */
    --ai-navy:        var(--brand-blue, #0c2340);
    --ai-navy-dark:   var(--brand-blue-dark, #081629);
    --ai-navy-bright: var(--brand-blue-bright, #1c4f8f);
    --ai-gold:        var(--brand-gold, #ae9142);
    --ai-gold-bright: var(--brand-gold-bright, #d39f10);
    --ai-paper:       var(--warm-white, #f8f4ec);
    --ai-paper-dk:    var(--warm-white-dark, #efe9d9);
    --ai-ink:         var(--gray-dark, #333);
    --ai-muted:       var(--gray, #555);
    --ai-line:        var(--border-primary, 1px solid rgba(0,0,0,.12));
    --ai-radius:      var(--border-radius, 4px);
    --ai-ease:        var(--anim-ease, ease-in-out);
    --ai-dur:         var(--anim-duration, 325ms);
    --ai-dur-fast:    var(--anim-duration-fast, 125ms);
    --ai-serif:       var(--font-heading, Garamond-Pro, "Adobe Garamond", Garamond, Georgia, serif);
    --ai-sans:        var(--font-default, GP, "Helvetica Neue", Helvetica, Arial, sans-serif);
    --ai-wrap: 1220px;
  }

  /* Warm white is the ground. Navy is an accent, used deliberately. */
  body { background: var(--ai-paper); color: var(--ai-ink); font-family: var(--ai-sans); }

  .wrap { max-width: var(--ai-wrap); margin-inline: auto; padding-inline: 2rem; }

  .skip-link {
    position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
    background: var(--ai-gold); color: #fff; padding: .7rem 1.2rem; font-weight: 700;
  }
  .skip-link:focus { inset-inline-start: 0; }

  /* ---------- announcement bar ---------- */
  .announce {
    background: var(--ai-navy); color: #fff;
    font-size: .875rem; text-align: center;
    padding: .6rem 2rem;
    display: flex; align-items: center; justify-content: center; gap: .85rem; flex-wrap: wrap;
  }
  .announce .pip {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ai-gold-bright);
    animation: pip 2.4s var(--ai-ease) infinite; flex-shrink: 0;
  }
  @keyframes pip { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.72)} }
  .announce a {
    color: #fff; text-decoration: underline; text-underline-offset: 3px;
    font-weight: 700;
  }
  .announce a:hover { color: var(--ai-gold-bright); }

  /* ---------- ND identity bar ---------- */
  .nd-bar { background: var(--ai-navy-dark); }
  .nd-bar .wrap { display: flex; align-items: center; min-height: 38px; }
  .nd-bar a { color: rgba(255,255,255,.85); font-family: var(--ai-serif); font-size: .95rem; }
  .nd-bar a:hover { color: #fff; }

  /* ---------- site header ---------- */
  .site-head {
    position: sticky; top: 0; z-index: 60;
    background: #fff; border-bottom: 3px solid var(--ai-gold);
  }
  /* Wider than the page container so the logo sits further left and the nav
     further right, per feedback — capped rather than full edge-to-edge so it
     still reads as aligned with the ND identity bar above on very wide
     screens, rather than drifting apart from it. */
  .site-head .wrap {
    display: flex; align-items: center; gap: 2rem; min-height: 104px;
    max-width: 1700px;
  }
  .site-logo {
    display: flex; align-items: center; flex-shrink: 0;
    text-decoration: none; margin-inline-end: auto;
  }
  .site-logo img { height: 76px; width: auto; display: block; }
  
    /* Nav sits to the right of the logo. The underline wipes in from the left on
     hover, matching Juan's mockup. */
  .site-nav { display: flex; gap: 1.6rem; align-items: center; }
  .site-nav a {
    position: relative; font-size: .92rem; white-space: nowrap;
    color: var(--ai-ink); padding: .4rem 0; text-decoration: none;
    transition: color var(--ai-dur-fast) var(--ai-ease);
  }
  .site-nav a::after {
    content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 100%;
    inset-block-end: -.1rem; height: 2px; background: var(--ai-gold);
    transition: inset-inline-end .25s var(--ai-ease);
  }
  .site-nav a:hover, .site-nav a:focus-visible { color: var(--ai-navy); }
  .site-nav a:hover::after, .site-nav a:focus-visible::after { inset-inline-end: 0; }
  .site-nav a[aria-current="page"] { color: var(--ai-navy); font-weight: 700; }
  .site-nav a[aria-current="page"]::after { inset-inline-end: 0; }
  .head-cta { display: flex; gap: .6rem; flex-shrink: 0; }
  /* Both filled rather than one filled and one outlined, so they read as a pair. */
  .head-cta .btn--outline { background: var(--ai-navy); color: #fff; border-color: var(--ai-navy); }
  .head-cta .btn--outline:hover { background: var(--ai-navy-bright); border-color: var(--ai-navy-bright); color: #fff; }
  .nav-toggle { display: none; margin-left: auto; font-size: 1.4rem; color: var(--ai-navy); padding: .4rem; }

  /* ---------- buttons ---------- */
  /* Roundness deliberately at the theme's 4px: Alex read Kiki's as too square
     and Juan's as too round; this is the ND-sanctioned middle. */
  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--ai-sans); font-size: .875rem; font-weight: 700;
    padding: .7rem 1.25rem; border-radius: var(--ai-radius);
    border: 1px solid transparent; cursor: pointer;
    transition: background var(--ai-dur-fast) var(--ai-ease), color var(--ai-dur-fast) var(--ai-ease), border-color var(--ai-dur-fast) var(--ai-ease);
  }
  .btn--primary { background: var(--ai-navy); color: #fff; }
  .btn--primary:hover { background: var(--ai-navy-bright); color: #fff; }
  .btn--gold { background: var(--ai-gold); color: var(--ai-navy); }
  .btn--gold:hover { background: var(--ai-gold-bright); color: var(--ai-navy); }
  .btn--outline { border-color: var(--ai-navy); color: var(--ai-navy); background: transparent; }
  .btn--outline:hover { background: var(--ai-navy); color: #fff; }
  .btn--lg { padding: .95rem 1.6rem; font-size: .95rem; }
  .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

  /* ---------- sections ---------- */
  .sect { padding: 5rem 0; }
  .sect--tight { padding: 3.25rem 0; }
  .sect--white { background: #fff; }
  /* Section headings must state their colour explicitly. Otherwise ND's theme  */
  /* colours them in an earlier cascade layer and they wash out on the light    */
  /* paper background. Navy on all light sections (whether the heading sits in  */
  /* a .sect-head or bare); the .sect--navy rules just below flip them white on */
  /* dark sections. This is the site-wide guard for the washed-out headings.    */
  .sect h2 { color: var(--ai-navy); }
  .sect--navy { background: var(--ai-navy); color: #fff; }
  .sect--navy h2, .sect--navy h3, .sect--navy h4, .sect--navy p,
  .sect--navy li, .sect--navy blockquote { color: #fff; }
  .sect--dk { background: var(--ai-paper-dk); }

  .sect-head { max-width: 62ch; margin-bottom: 2.75rem; }
  .sect-head.center { margin-inline: auto; text-align: center; }
  .eyebrow {
    font-family: var(--ai-sans); font-size: .7rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ai-gold);
    display: block; margin-bottom: .85rem;
  }
  .sect--navy .eyebrow { color: var(--ai-gold-bright); }
  .lede { font-size: 1.1rem; color: var(--ai-muted); line-height: 1.65; }
  .sect--navy .lede { color: rgba(255,255,255,.8); }

  /* ---------- hero ---------- */
  .hero { background: var(--ai-paper); padding: 4.5rem 0 3.5rem; position: relative; overflow: hidden; }
  .hero::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 42%;
    background: radial-gradient(70% 80% at 100% 0%, rgba(174,145,66,.16), transparent 70%);
    pointer-events: none;
  }
  .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
  .hero-media {
    aspect-ratio: 4 / 3; border-radius: var(--ai-radius);
    background: var(--ai-paper-dk); border: 1px dashed rgba(0,0,0,.22);
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ai-muted); line-height: 1.7; padding: 1.5rem;
  }
  .hero h1 {
    font-family: var(--ai-serif); color: var(--ai-navy);
    font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.06; max-width: 17ch; margin-bottom: 1.25rem;
  }
  .hero h1 em { font-style: italic; color: var(--ai-gold); }
  .hero .lede { max-width: 54ch; margin-bottom: 2rem; }
  .hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; }

  /* ---------- stat strip ---------- */
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; padding-block: 2.75rem; }
  .stat { border-inline-start: 3px solid var(--ai-gold); padding-inline-start: 1rem; min-width: 0; }
  .stat b {
    display: block; font-family: var(--ai-serif); font-weight: 500;
    font-size: 2.4rem; line-height: 1; color: var(--ai-navy); margin-bottom: .5rem;
  }
  .stat span { font-family: var(--ai-sans); font-size: .85rem; color: var(--ai-muted); line-height: 1.45; display: block; }

  /* ---------- doors (where you fit) ---------- */
  .doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .door {
    background: #fff; border: var(--ai-line); border-radius: var(--ai-radius);
    padding: 2rem 1.75rem; display: flex; flex-direction: column;
    transition: box-shadow var(--ai-dur) var(--ai-ease), transform var(--ai-dur) var(--ai-ease);
  }
  .door:hover { box-shadow: 0 12px 30px rgba(12,35,64,.11); transform: translateY(-3px); }
  .door h3 { font-family: var(--ai-serif); font-size: 1.4rem; color: var(--ai-navy); margin-bottom: .7rem; }
  .door p { font-size: .95rem; color: var(--ai-muted); line-height: 1.6; margin-bottom: 1.4rem; flex: 1; }
  .more {
    font-weight: 700; font-size: .875rem; color: var(--ai-navy);
    display: inline-flex; gap: .45rem; align-items: center; align-self: flex-start;
    border-bottom: 2px solid var(--ai-gold); padding-bottom: .15rem;
    transition: gap var(--ai-dur-fast) var(--ai-ease);
  }
  .more:hover { gap: .8rem; color: var(--ai-navy-bright); }

  /* ---------- case study cards ---------- */
  /* Per Maria: title + one sentence is the unit that works. No header images —
     an image tells you nothing about these projects; a video link does. */
  .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .case {
    background: #fff; border: var(--ai-line); border-radius: var(--ai-radius);
    padding: 1.6rem 1.5rem 1.4rem; display: flex; flex-direction: column;
    border-inline-start: 3px solid var(--ai-gold);
    transition: box-shadow var(--ai-dur) var(--ai-ease), transform var(--ai-dur) var(--ai-ease);
  }
  .case:hover { box-shadow: 0 12px 30px rgba(12,35,64,.1); transform: translateY(-3px); }
  /* `display: flex` above beats the browser default for [hidden], so the
     filter buttons cannot hide a card without this. */
  .case[hidden], .no-results[hidden] { display: none; }
  .case-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
  .case-co { flex-basis: 100%; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ai-gold); }
  .case h3 { font-family: var(--ai-serif); font-size: 1.25rem; color: var(--ai-navy); line-height: 1.22; margin-bottom: .6rem; }
  .case p { font-size: .9rem; color: var(--ai-muted); line-height: 1.6; margin-bottom: 1.1rem; flex: 1; }
  .case-foot { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding-top: .9rem; border-top: var(--ai-line); }
  .case-fellows { font-size: .72rem; color: var(--ai-muted); line-height: 1.5; }

  /* status chip — Maureen's in-progress / complete, which Alex flagged twice */
  .chip {
    font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: .25rem .55rem; border-radius: var(--ai-radius); white-space: nowrap;
  }
  .chip--live { background: var(--ai-navy); color: #fff; }
  .chip--done { background: var(--ai-paper-dk); color: var(--ai-navy); }
  /* ---------- scoping checklist ---------- */
  .scope { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .scope-card {
    background: #fff; border: var(--ai-line); border-radius: var(--ai-radius);
    border-top: 4px solid var(--ai-gold); padding: 1.75rem 1.6rem;
  }
  .scope-card h3 { font-family: var(--ai-serif); font-size: 1.2rem; color: var(--ai-navy); margin-bottom: .85rem; }
  .scope-card > p { font-size: .92rem; color: var(--ai-muted); line-height: 1.62; margin-bottom: 1rem; }
  .scope-card ul { list-style: none; margin: 0; padding: 0; }
  .scope-card li {
    font-size: .9rem; color: var(--ai-muted); line-height: 1.55;
    padding-inline-start: 1.35rem; margin-bottom: .6rem; position: relative;
  }
  .scope-card li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .5em;
    width: 7px; height: 7px; border-radius: 1px; background: var(--ai-gold);
  }
  .scope-note { margin-top: 1.75rem; font-size: .93rem; color: var(--ai-muted); font-style: italic; max-width: 70ch; }

  /* ---------- project media band ----------
     A band across the top of each project card carrying the status chip and,
     where a recording exists, a play button. No photograph: an image tells you
     little about these projects, but the route to a video does. */
  .case { padding: 0; overflow: hidden; }
  .case-media {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 116px; background: var(--ai-navy); text-decoration: none;
  }
  .case-media::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 9px, transparent 9px 18px);
  }
  .case-media .chip { position: absolute; inset-block-start: 11px; inset-inline-start: 11px; z-index: 3; }
  .case-play {
    position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
    background: var(--ai-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 56% 50% / 15px 18px;
    transition: transform var(--ai-dur-fast) var(--ai-ease), background-color var(--ai-dur-fast) var(--ai-ease);
  }
  /* The button is flex-centred, so it must only scale on hover. Translating it
     is what made it drift off centre. */
  a.case-media:hover .case-play, a.case-media:focus-visible .case-play {
    transform: scale(1.12);
    background-color: var(--ai-gold-bright);
  }
  .case-soon {
    position: relative; z-index: 2; font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5);
  }
  .case-body { padding: 1.4rem 1.5rem 1.35rem; display: flex; flex-direction: column; flex: 1; }


  /* ---------- filters ---------- */
  .filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
  .filter {
    font-size: .78rem; font-weight: 700; padding: .5rem .95rem;
    border: var(--ai-line); border-radius: var(--ai-radius);
    background: #fff; color: var(--ai-muted); cursor: pointer;
    transition: all var(--ai-dur-fast) var(--ai-ease);
  }
  .filter:hover { border-color: var(--ai-navy); color: var(--ai-navy); }
  .filter[aria-pressed="true"] { background: var(--ai-navy); color: #fff; border-color: var(--ai-navy); }

  /* ---------- fellow flip cards (from Juan's mockup) ---------- */
  .fellows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .flip { display: block; width: 100%; perspective: 1100px; background: none; border: 0; padding: 0; cursor: pointer; text-align: start; font: inherit; }
  .flip-in {
    display: block; position: relative; width: 100%; aspect-ratio: 3 / 4;
    transform-style: preserve-3d;
    transition: transform var(--ai-dur-moderate, 500ms) var(--ai-ease);
  }
  .flip:hover .flip-in,
  .flip:focus-visible .flip-in,
  .flip[aria-pressed="true"] .flip-in { transform: rotateY(180deg); }
  .flip-face {
    position: absolute; inset: 0; backface-visibility: hidden;
    border-radius: var(--ai-radius); overflow: hidden;
    display: flex; flex-direction: column;
  }
  .flip-front { background: #fff; border: var(--ai-line); }
  .flip-photo {
    flex: 1; background: var(--ai-paper-dk);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ai-serif); font-size: 2rem; color: var(--ai-navy); opacity: .85;
  }
  .flip-meta { display: block; padding: .85rem .9rem 1rem; }
  .flip-meta b { display: block; font-size: .95rem; color: var(--ai-navy); margin-bottom: .25rem; }
  .flip-meta span { font-size: .75rem; color: var(--ai-muted); line-height: 1.45; display: block; }
  .flip-back {
    background: var(--ai-navy); color: #fff; transform: rotateY(180deg);
    padding: 1.4rem 1.25rem; justify-content: center;
  }
  /* The theme declares `blockquote { color: brand-blue }` directly. A direct
     declaration beats inherited colour no matter the layer, so state it here. */
  .flip-back blockquote { display: block; color: #fff;
    font-family: var(--ai-serif); font-size: 1.02rem; line-height: 1.4; margin-bottom: .9rem;
  }
  .flip-back cite { font-style: normal; font-size: .72rem; color: var(--ai-gold-bright); font-weight: 700; }
  .flip-hint {
    font-size: .68rem; color: var(--ai-muted); letter-spacing: .1em;
    text-transform: uppercase; margin-top: 1rem;
  }

  /* ---------- the model ---------- */
  .model { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .role { border-top: 3px solid var(--ai-gold); padding-top: 1.1rem; }
  .role h3 { display: block; color: #fff; font-family: var(--ai-serif); font-size: 1.2rem; margin-bottom: .5rem; }
  .role p { font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.82); }

  /* ---------- steps / timeline ---------- */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .step { background: #fff; border: var(--ai-line); border-radius: var(--ai-radius); padding: 1.5rem 1.35rem; }
  .step .num { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ai-gold); display: block; margin-bottom: .75rem; }
  .step h3 { font-family: var(--ai-serif); font-size: 1.15rem; color: var(--ai-navy); margin-bottom: .5rem; }
  .step p { font-size: .88rem; color: var(--ai-muted); line-height: 1.6; }

  /* ---------- prose pair ---------- */
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .pair h3 { font-family: var(--ai-serif); font-size: 1.6rem; color: var(--ai-navy); margin-bottom: .9rem; }
  .pair p { font-size: .98rem; color: var(--ai-muted); line-height: 1.72; margin-bottom: 1rem; }
  .sect--navy .pair h3 { color: #fff; }
  .sect--navy .pair p { color: rgba(255,255,255,.78); }

  /* ---------- FAQ ---------- */
  .faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
  .faq-cols h3 { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ai-muted); padding-bottom: .75rem; border-bottom: var(--ai-line); margin-bottom: .5rem; }
  details { border-bottom: var(--ai-line); }
  /* One marker only, on the right, so every question starts flush left. */
  summary {
    padding: .95rem 0; font-weight: 700; font-size: .95rem; cursor: pointer;
    list-style: none; display: flex; align-items: flex-start; gap: 1rem;
    justify-content: space-between; text-align: start; color: var(--ai-navy);
  }
  summary::-webkit-details-marker { display: none; }
  summary::marker { content: ""; }
  summary::after {
    content: "+"; flex-shrink: 0; color: var(--ai-gold);
    font-weight: 700; font-size: 1.1rem; line-height: 1.2;
  }
  details[open] summary::after { content: "\2013"; }
  details p { padding: 0 0 1rem; font-size: .92rem; color: var(--ai-muted); line-height: 1.65; }

  /* ---------- partner marquee ---------- */
  /* Constrained to the page container so it lines up with the map below rather
     than running the full width of the window. */
  .marquee {
    position: relative; overflow: hidden; background: #fff;
    border: var(--ai-line); border-radius: var(--ai-radius);
    padding: 2rem 0; max-width: calc(var(--ai-wrap) - 4rem); margin: 0 auto 2.5rem;
  }
  .marquee::before, .marquee::after { content: ""; position: absolute; inset-block: 0; width: 90px; z-index: 2; pointer-events: none; }
  .marquee::before { inset-inline-start: 0; background: linear-gradient(90deg, #fff 20%, transparent); }
  .marquee::after  { inset-inline-end: 0;  background: linear-gradient(270deg, #fff 20%, transparent); }
  .mq-track { display: flex; width: max-content; animation: mq 38s linear infinite; }
  .marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
  .mq-set { display: flex; align-items: center; gap: 4.5rem; padding-inline-end: 4.5rem; flex-shrink: 0; }
  .mq-set img { height: 46px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: all var(--ai-dur) var(--ai-ease); }
  .mq-set img:hover { filter: none; opacity: 1; }
  @keyframes mq { from { transform: translateX(0) } to { transform: translateX(-50%) } }

  /* ---------- photo mosaic (from Juan's mockup) ---------- */

  /* ---------- CTA band ---------- */
  /* Bands are navy by default; gold is now the exception.
     TO REVERT: make .band gold again and drop .band--gold from the markup. */
  .band { background: var(--ai-navy); color: #fff; padding: 3.25rem 0; }
  .band--gold { background: var(--ai-gold); color: var(--ai-navy); }
  .band.band--gold h2, .band.band--gold p { color: var(--ai-navy); }
  /* On the gold band the buttons go navy and outline-navy: a gold button on a
     gold ground had almost no edge. */
  .band.band--gold .btn--primary { background: var(--ai-navy); color: #fff; }
  .band.band--gold .btn--primary:hover { background: var(--ai-navy-bright); color: #fff; }
  .band.band--gold .btn--outline { border-color: var(--ai-navy); color: var(--ai-navy); }
  .band.band--gold .btn--outline:hover { background: var(--ai-navy); color: #fff; }
  .band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
  .band h2, .band p { color: #fff; }
  .band h2 { font-family: var(--ai-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; max-width: 22ch; }
  .band p { margin-top: .5rem; max-width: 46ch; font-size: .95rem; color: rgba(255,255,255,.9); }
  .band .btn--outline { border-color: #fff; color: #fff; }
  .band .btn--outline:hover { background: #fff; color: var(--ai-navy); }

  /* ---------- placeholder + notice ---------- */
  .ph {
    border: 1px dashed rgba(0,0,0,.22); border-radius: var(--ai-radius);
    background: var(--ai-paper-dk); color: var(--ai-muted);
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; padding: 1.5rem;
  }
  .notice {
    background: #fff; border-inline-start: 3px solid var(--ai-gold);
    padding: 1.1rem 1.25rem; font-size: .88rem; color: var(--ai-muted);
    line-height: 1.65; max-width: 76ch; border-radius: var(--ai-radius);
  }
  .notice b { color: var(--ai-ink); }

  /* ---------- scheduler embed ---------- */
  .sched { border: var(--ai-line); border-radius: var(--ai-radius); overflow: hidden; background: #fff; }
  .sched iframe { display: block; width: 100%; height: 620px; border: 0; }

  /* ---------- footer ---------- */
  .site-foot { background: var(--ai-navy-dark); color: rgba(255,255,255,.65); padding: 3.5rem 0 0; }
  .foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
  .foot-grid h5 { font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ai-gold-bright); margin-bottom: .9rem; }
  .foot-grid a { display: block; font-size: .88rem; padding: .28rem 0; color: rgba(255,255,255,.65); }
  .foot-grid a:hover { color: #fff; }
  .foot-about img { height: 46px; margin-bottom: .9rem; }
  .foot-about p { font-size: .88rem; line-height: 1.7; max-width: 38ch; color: rgba(255,255,255,.65); }
  .foot-row { border-top: 1px solid rgba(255,255,255,.16); padding: 1.25rem 0; display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .8rem; }
  .foot-row a { color: rgba(255,255,255,.65); }
  .foot-row a:hover { color: #fff; }

  /* ---------- audience columns (where you fit) ----------
     Three columns split by hairlines, matching the original mockup.
     TO GO BACK TO BOXED CARDS: give .aud a background, border and radius,
     and set a gap on .audience. */
  .audience {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; border-block-start: var(--ai-line);
  }
  .aud {
    padding: 2.5rem 2.5rem 0; display: flex; flex-direction: column;
    border-inline-start: var(--ai-line);
  }
  .aud:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .aud:last-child { padding-inline-end: 0; }
  .aud-tag {
    display: block; font-family: var(--ai-sans); font-size: .7rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ai-gold);
    margin-bottom: 1.5rem;
  }
  .aud h3 {
    font-family: var(--ai-serif); color: var(--ai-navy);
    font-size: 1.55rem; line-height: 1.18; margin-bottom: 1rem;
  }
  .aud p { color: var(--ai-muted); font-size: .97rem; line-height: 1.65; margin-bottom: 1.75rem; flex: 1; }
  .aud .more { align-self: flex-start; }
  .aud-faculty { margin-top: 1.5rem; font-size: .95rem; color: var(--ai-muted); }

  /* ---------- timeline: numbered milestone cards on a track ---------- */
  /* padding-block-start pinned to 0 so the connecting rule, positioned from the
     top of this box, lines up with the centre of the markers. */
  .timeline {
    position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem; padding-block-start: 0;
  }
  .timeline::before {
    content: ""; position: absolute; inset-block-start: 27px;
    inset-inline-start: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--ai-gold), rgba(174,145,66,.2));
  }
  .tl { position: relative; text-align: center; display: flex; flex-direction: column; }
  .tl-num {
    position: relative; z-index: 1; width: 54px; height: 54px; margin: 0 auto 1.35rem;
    border-radius: 50%; background: var(--ai-navy-dark);
    border: 2px solid var(--ai-gold); color: var(--ai-gold-bright);
    font-family: var(--ai-serif); font-size: 1.3rem; line-height: 1;
    display: grid; place-items: center;
    transition: background var(--ai-dur) var(--ai-ease), color var(--ai-dur) var(--ai-ease);
  }
  .tl:hover .tl-num { background: var(--ai-gold); color: var(--ai-navy); }
  .tl-body {
    flex: 1; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12); border-radius: var(--ai-radius);
    padding: 1.4rem 1.2rem;
  }
  .tl-when {
    display: block; font-family: var(--ai-sans); font-size: .66rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ai-gold-bright);
    margin-bottom: .6rem;
  }
  .tl h3 { font-family: var(--ai-serif); font-size: 1.18rem; color: #fff; margin-bottom: .5rem; }
  .tl p { font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.76); }


  /* ---------- regional map ----------
     MapLibre GL JS over a Carto basemap, matching the ND relocation tool.

     A NOTE ON THE CASCADE, because it is counterintuitive: maplibre-gl.css is
     loaded unlayered, and unlayered CSS beats anything inside a layer no matter
     how specific it is. Everything here sits in the `site` layer, so a rule
     targeting one of MapLibre's own .maplibregl-* classes would silently lose.
     That is why the pins use our own class names instead. If you ever do need to
     restyle a MapLibre part, do it in a <style> block on the page, not here. */
  .mapwrap { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2rem; align-items: stretch; }
  .mapholder {
    background: var(--ai-paper); border: var(--ai-line);
    border-radius: var(--ai-radius); overflow: hidden; position: relative;
  }
  .regionmap { width: 100%; aspect-ratio: 3 / 2; min-height: 320px; }

  /* Shown only when MapLibre or its CDN is unavailable, see site.js. */
  .map-fallback { display: none; margin: 0; padding: 2rem; font-size: .95rem; color: var(--ai-muted); }
  .mapholder.is-down .regionmap { display: none; }
  .mapholder.is-down .map-fallback { display: block; }

  /* Map pins. Decorative duplicates of the buttons below the map, so they carry
     no ARIA of their own. Sized small on purpose: the three Elkhart partners are
     about a mile apart and would fuse into one blob at any larger size. */
  .gm-pin { display: flex; align-items: center; justify-content: center; cursor: pointer; }
  /* The 3px white ring is doing real work, not decoration: Vista and Lippert land
     about 9px apart at this zoom, so without it their gold cores merge into one
     blob. With it the cores stay visibly separate. */
  .gm-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--ai-gold); border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(12,35,64,.5);
    transition: transform .18s var(--ai-ease), box-shadow .18s var(--ai-ease);
  }
  .gm-pin--nd .gm-dot { width: 19px; height: 19px; background: var(--ai-navy); }
  .gm-pin.is-active { z-index: 5; }
  .gm-pin.is-active .gm-dot {
    transform: scale(1.42);
    box-shadow: 0 0 0 5px rgba(211,159,16,.4), 0 1px 5px rgba(12,35,64,.5);
  }
  /* Halo instead of movement for anyone who has asked for less motion. */
  @media (prefers-reduced-motion: reduce) {
    .gm-dot { transition: none; }
    .gm-pin.is-active .gm-dot { transform: none; }
  }
  .gm-lbl {
    position: absolute; inset-inline-start: 50%; transform: translateX(-50%);
    inset-block-end: 100%; margin-bottom: 7px; white-space: nowrap;
    font-family: var(--ai-sans); font-size: .72rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--ai-navy);
    text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #fff;
    pointer-events: none;
  }

  /* Legend and keyboard interface for the map. */
  .maplist {
    list-style: none; margin: 1.5rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .55rem;
  }
  .maploc {
    display: inline-flex; align-items: center; gap: .55rem;
    background: #fff; border: var(--ai-line); border-radius: 999px;
    padding: .5rem 1rem; cursor: pointer;
    font-family: var(--ai-sans); font-size: .85rem; font-weight: 600;
    color: var(--ai-navy);
    transition: background var(--ai-dur-fast) var(--ai-ease),
                border-color var(--ai-dur-fast) var(--ai-ease),
                color var(--ai-dur-fast) var(--ai-ease);
  }
  .maploc::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--ai-gold); flex-shrink: 0;
  }
  .maploc[data-kind="nd"]::before { background: var(--ai-navy); }
  .maploc:hover, .maploc.is-active {
    background: var(--ai-navy); border-color: var(--ai-navy); color: #fff;
  }
  .maploc:hover::before, .maploc.is-active::before { background: var(--ai-gold-bright); }

  /* The ring's key sits on the map itself, the way the relocation tool does it.
     Bottom left on purpose: MapLibre pins its attribution bottom right, and the
     two must not collide. pointer-events:none so it never shields a pin. */
  .maplegend {
    position: absolute; inset-inline-start: 16px; inset-block-end: 16px; z-index: 3;
    margin: 0; display: flex; align-items: center; gap: .6rem;
    background: rgba(255,255,255,.93); border: var(--ai-line);
    border-radius: var(--ai-radius); padding: .5rem .8rem;
    font-family: var(--ai-sans); font-size: .78rem; color: var(--ai-muted);
    box-shadow: 0 6px 18px -10px rgba(12,35,64,.4);
    pointer-events: none;
  }
  .maplegend-ring { width: 26px; border-top: 2px dashed var(--ai-gold); flex-shrink: 0; }
  .mapholder.is-down .maplegend { display: none; }

  /* MapLibre's attribution, reset to our own type so it stops looking like a
     control borrowed from another site.

     The !important here is not laziness, it is the only thing that works from
     this file. maplibre-gl.css is unlayered, and for normal declarations
     unlayered CSS outranks every layer no matter how specific the selector.
     Important declarations invert that order, which puts an important rule
     inside `site` back on top. See the cascade note at the top of this section.

     Restyle this, never hide it: Carto and OpenStreetMap both require the
     credit to stay visible. */
  .maplibregl-ctrl-attrib {
    font-family: var(--ai-sans) !important;
    background: rgba(255,255,255,.8) !important;
    border-radius: var(--ai-radius) !important;
    margin: 0 8px 8px 0 !important;
    padding: 2px 7px !important;
  }
  .maplibregl-ctrl-attrib-inner {
    font-family: var(--ai-sans) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: var(--ai-muted) !important;
  }
  .maplibregl-ctrl-attrib a { color: var(--ai-muted) !important; text-decoration: none !important; }
  .maplibregl-ctrl-attrib a:hover { color: var(--ai-navy) !important; text-decoration: underline !important; }

  .mapinfo {
    background: var(--ai-navy); color: #fff; border-radius: var(--ai-radius);
    padding: 2rem 1.75rem; display: flex; flex-direction: column; justify-content: center;
  }
  .mapinfo .eyebrow { color: var(--ai-gold-bright); }
  .mapinfo-name { font-family: var(--ai-serif); font-size: 1.5rem; color: #fff; margin: .5rem 0 .6rem; }
  .mapinfo-place { font-size: .95rem; color: rgba(255,255,255,.82); margin-bottom: .75rem; }
  .mapinfo-note { font-size: .9rem; color: var(--ai-gold-bright); font-weight: 600; }


  /* ---------- roadmap ---------- */
  .roadmap {
    list-style: none; margin: 0; padding: 0; position: relative;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  }
  .roadmap::before {
    content: ""; position: absolute; inset-block-start: 27px;
    inset-inline-start: 8%; width: 84%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--ai-gold) 0 10px, transparent 10px 18px);
    opacity: .5;
  }
  .rm { position: relative; padding-top: 4.5rem; }
  .rm-num {
    position: absolute; inset-block-start: 0; inset-inline-start: 0;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--ai-navy); color: #fff;
    display: grid; place-items: center;
    font-family: var(--ai-serif); font-size: 1.32rem;
    border: 4px solid var(--ai-paper); box-shadow: 0 0 0 2px var(--ai-gold);
  }
  .rm h3 { font-family: var(--ai-serif); font-size: 1.24rem; color: var(--ai-navy); margin-bottom: .55rem; }
  .rm p { font-size: .92rem; color: var(--ai-muted); line-height: 1.62; }
  .sect--white .rm-num { border-color: #fff; }


  /* ---------- fellow cards (flip) ----------
     Modelled on Juan's mockup: white front with a circular photo, navy back
     with the quote. Hover, tap and keyboard focus all flip it. */
  .fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .fcard {
    position: relative; height: 27rem; border-radius: 14px;
    perspective: 1600px; cursor: pointer;
    transition: transform .25s var(--ai-ease);
  }
  .fcard:hover, .fcard:focus-within { transform: translateY(-4px); }
  .fcard-flip {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transition: transform .65s cubic-bezier(.22,.61,.36,1);
  }
  .fcard:hover .fcard-flip,
  .fcard:focus-within .fcard-flip,
  .fcard.is-flipped .fcard-flip { transform: rotateY(180deg); }
  .fcard-face {
    position: absolute; inset: 0; backface-visibility: hidden;
    -webkit-backface-visibility: hidden; border-radius: 14px;
    padding: 2.2rem 1.8rem; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
  }
  .fcard-front { background: #fff; border: 1px solid #e7e3d8; box-shadow: 0 12px 30px -18px rgba(12,35,64,.25); }
  .fcard-ph {
    width: 9.5rem; height: 9.5rem; border-radius: 50%;
    background: var(--ai-paper-dk); display: grid; place-items: center;
    font-family: var(--ai-serif); font-size: 2.4rem; color: var(--ai-navy); opacity: .45;
  }
  .fcard-front img { width: 9.5rem; height: 9.5rem; border-radius: 50%; object-fit: cover; display: block; }
  .fcard-front h3 { font-family: var(--ai-serif); font-size: 1.45rem; line-height: 1.15; margin: 1.3rem 0 .4rem; color: var(--ai-navy); }
  .fcard-front p { color: var(--ai-muted); font-size: .96rem; margin: 0; }
  .fcard-hint {
    margin-top: 1.4rem; font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; color: #9aa5b5; font-weight: 700;
  }
  .fcard-back {
    transform: rotateY(180deg);
    background: linear-gradient(160deg, var(--ai-navy) 0%, var(--ai-navy-dark) 100%);
    border: 1px solid rgba(255,255,255,.1);
  }
  .fcard-mark { font-family: var(--ai-serif); font-size: 2.7rem; line-height: 1; color: var(--ai-gold); }
  .fcard-quote {
    font-family: var(--ai-serif); font-style: italic; font-size: 1.08rem;
    line-height: 1.5; color: #fff; max-width: 30ch;
  }
  .fcard-attr {
    margin-top: 1.1rem; font-size: .78rem; color: var(--ai-gold-bright);
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  }

  /* ---------- static fellow portraits ---------- */
  .roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1.25rem; }
  .rmember { text-align: center; }
  .rmember[hidden] { display: none; }
  .rmember img, .rmember .rinitials {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
    object-fit: cover; display: block; margin-bottom: 1rem;
  }
  .rmember .rinitials {
    background: var(--ai-paper-dk); display: grid; place-items: center;
    font-family: var(--ai-serif); font-size: 2rem; color: var(--ai-navy); opacity: .7;
  }
  .rmember h3 { font-family: var(--ai-serif); font-size: 1.1rem; color: var(--ai-navy); margin-bottom: .3rem; }
  .rmember p { font-size: .82rem; color: var(--ai-muted); line-height: 1.5; }

  /* ---------- team (who runs the program) ---------- */
  .team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
  .team-card {
    background: #fff; border: var(--ai-line); border-radius: var(--ai-radius);
    overflow: hidden; text-align: center;
  }
  .team-card img, .team-card .team-initials {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  }
  .team-card .team-initials {
    background: var(--ai-paper-dk); display: grid; place-items: center;
    font-family: var(--ai-serif); font-size: 2rem; color: var(--ai-navy); opacity: .6;
  }
  .team-card-body { padding: 1.1rem 1rem 1.25rem; }
  .team-card h3 { font-family: var(--ai-serif); font-size: 1.1rem; color: var(--ai-navy); margin-bottom: .3rem; }
  .team-card p { font-size: .85rem; color: var(--ai-muted); line-height: 1.5; margin-bottom: .6rem; }
  .team-card .role-tag {
    font-family: var(--ai-sans); font-size: .68rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ai-gold);
    display: block;
  }

  /* ---------- project thumbnails with a play button ---------- */
  /* This pattern (a 16:9 thumbnail image with a centered play button) isn't
     used by any page currently — the live project cards use the simpler
     .case-media / .case-play band instead (see above). These rules are kept
     scoped to .case-thumb specifically: an earlier version of this block
     targeted plain .case-play, which unintentionally overrode the resting
     transform on the .case-media play button elsewhere in the file and broke
     its hover (the button would jump instead of just scaling, since the two
     rules' transforms don't compose). Keep this scoped if resurrected. */
  .case-thumb {
    position: relative; display: block; margin: -1.6rem -1.5rem 1.25rem;
    aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--ai-radius) var(--ai-radius) 0 0;
    background: var(--ai-navy);
  }
  .case-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
  .case-thumb .case-play {
    position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--ai-gold); border: 2px solid rgba(255,255,255,.85);
    display: grid; place-items: center;
    transition: transform var(--ai-dur) var(--ai-ease), background var(--ai-dur) var(--ai-ease);
  }
  .case-thumb .case-play::before {
    content: ""; border-inline-start: 14px solid #fff;
    border-block: 9px solid transparent; margin-inline-start: 4px;
  }
  .case-thumb:hover .case-play { transform: translate(-50%,-50%) scale(1.1); background: var(--ai-gold-bright); }
  .case-thumb:hover img { opacity: .7; }

  /* ---------- responsive ---------- */
  @media (max-width: 60em) {
    .doors, .cases, .model, .steps, .audience, .scope, .roadmap, .fcards { grid-template-columns: repeat(2, 1fr); }
    .roster { grid-template-columns: repeat(3, 1fr); }
    .team { grid-template-columns: repeat(3, 1fr); }
    .roadmap::before { display: none; }
    .mapwrap { grid-template-columns: 1fr; }
    .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 2.75rem; }
    .timeline::before { display: none; }
    .audience { grid-template-columns: 1fr; }
    .fellows { grid-template-columns: repeat(3, 1fr); }
    .pair, .faq-cols { grid-template-columns: 1fr; gap: 2rem; }
    .hero .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
      .hero--media .wrap { padding-block: 4rem 3.5rem; min-height: 0; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2) { border-inline-end: 0; }
    .site-nav, .head-cta { display: none; }
    .site-nav.open {
      display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
      position: absolute; inset-inline: 0; top: 100%; background: #fff;
      padding: 1rem 2rem 1.5rem; border-bottom: 3px solid var(--ai-gold);
      box-shadow: 0 12px 24px rgba(0,0,0,.12);
    }
    .nav-toggle { display: block; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 40em) {
    .wrap { padding-inline: 1.25rem; }
    .sect { padding: 3.25rem 0; }
    .doors, .cases, .model, .steps, .fellows, .foot-grid, .audience, .scope, .timeline, .roadmap, .fcards { grid-template-columns: 1fr; }
    .roster { grid-template-columns: repeat(2, 1fr); }
    .team { grid-template-columns: repeat(2, 1fr); }
    .aud { padding-inline: 0; border-inline-start: 0; border-block-start: var(--ai-line); padding-block-start: 2rem; }
    .stats { grid-template-columns: 1fr; }
    .stat { border-inline-end: 0; border-bottom: var(--ai-line); }
        .mq-set { gap: 2.5rem; padding-inline-end: 2.5rem; }
    .mq-set img { height: 34px; max-width: 118px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .flip-in { transition: none; }
  }
}

@layer site {
  /* ---------- hero with photo / video background ---------- */
  .hero--media { padding: 0; background: var(--ai-navy-dark); }
  .hero--media::after { display: none; }
  .hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
  }
  .hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(90deg, rgba(8,22,41,.94) 0%, rgba(8,22,41,.82) 42%, rgba(8,22,41,.42) 100%),
      linear-gradient(0deg, rgba(8,22,41,.55) 0%, transparent 55%);
  }
  .hero--media .wrap {
    position: relative; z-index: 2; display: block;
    padding-block: 6.5rem 5.5rem; min-height: 60vh;
  }
  .hero--media h1 { color: #fff; max-width: 15ch; }
  .hero--media h1 em { color: var(--ai-gold-bright); }
  .hero--media .lede { color: rgba(255,255,255,.86); max-width: 46ch; }
  .hero--media .eyebrow { color: var(--ai-gold-bright); }
  /* Outline buttons on any dark ground need light text, or they render navy
     on navy and disappear. */
  .hero--media .btn--outline,
  .sect--navy .btn--outline,
  .sect--deep .btn--outline { border-color: rgba(255,255,255,.6); color: #fff; }
  .sect--navy .btn--outline:hover,
  .sect--deep .btn--outline:hover { background: #fff; color: var(--ai-navy); }
  .hero--media .btn--outline:hover { background: #fff; color: var(--ai-navy); }
  .hero-credit {
    position: absolute; z-index: 2; inset-block-end: 1rem; inset-inline-end: 2rem;
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
  }

  /* ---------- photo gallery (expands via the theme's lightbox) ---------- */
  /* 6 photos across a 4-column, 3-row grid with no gaps:
     [1 1 2 3]
     [1 1 4 4]
     [5 5 6 6]   */

  /* ---------- headshots on fellow cards ---------- */
  /* Drop a photo at assets/img/fellows/<name>.jpg and swap the initials span
     for an <img>. Until then the initials stand in. */

  @media only screen and (min-width: 60em) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
                            }
  }


  /* ---------- closing quote band ----------
     The photo strip scales up and its panels fan outward from the centre as you
     scroll. Driven by CSS variables that site.js updates on scroll, which is how
     Juan built his — it works in every browser, unlike scroll-driven CSS
     animation, and degrades to the finished state if JS or motion is off. */
  .closing {
    position: relative; overflow: clip; background: var(--ai-navy-dark);
    display: grid; place-items: center;
    min-height: clamp(26rem, 44vw, 40rem); padding: 0;
  }
  .strip {
    position: absolute; inset: 0; z-index: 0; display: flex;
    transform-origin: center;
    transform: scale(var(--bs, 1));
    opacity: var(--bo, 1);
    transition: transform .09s linear, opacity .12s linear;
    will-change: transform, opacity;
  }
  .strip img {
    flex: 1 1 0; min-width: 0; height: 100%;
    object-fit: cover; display: block;
    transform: translateX(var(--tx, 0));
    opacity: var(--po, 1);
    filter: brightness(var(--bb, 1));
    transition: transform .09s linear, opacity .12s linear;
  }
  /* Slight width variation stops the strip reading as a rigid grid. */
  .strip img:nth-child(2) { flex-grow: 1.15; object-position: left center; }
  .strip img:nth-child(4) { flex-grow: 1.1; }

  @media (max-width: 75em) { .strip img:nth-child(n+5) { display: none; } }
  @media (max-width: 48em) { .strip img:nth-child(n+3) { display: none; } }

  .quote-circle {
    position: relative; z-index: 2;
    width: clamp(16rem, 30vw, 23rem); aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%,
      var(--ai-navy) 0%, var(--ai-navy) 55%, var(--ai-navy-dark) 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 90px -30px rgba(0,0,0,.7);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: clamp(2rem, 4vw, 3.25rem);
  }
  .quote-circle blockquote {
    font-family: var(--ai-serif); color: #fff;
    font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.3;
    margin: 0 0 1.1rem;
  }
  /* Gold on navy measures 5.21:1 — clears WCAG AA for normal text. */
  .quote-circle cite {
    font-style: normal; color: var(--ai-gold-bright);
    font-size: .8rem; font-weight: 700; line-height: 1.45;
  }


  /* ---------- illustrative-content marker ---------- */
  .illus {
    display: inline-block; margin-top: .75rem;
    font-size: .72rem; letter-spacing: .04em; color: var(--ai-muted);
    border-inline-start: 2px solid var(--ai-gold); padding-inline-start: .6rem;
  }

  .numbers { background: var(--ai-paper-dk); }
}