/* ============================================================
   Steel City Codes - Components
   Header + navigation, buttons, finder, photos, ruled rows and
   blocks, numbers, people, FAQ, marquee, panels, footer.
   ============================================================ */

/* Safari does not apply the external SVG sprite's stylesheet to <use> icons.
   Set stroke styling on the host SVG so the referenced paths inherit it. */
.ic,.chev,.close-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic{width:20px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:middle}

/* ---------- header ---------- */
/* Full-width dark bar, content contained: spans edge to edge (no floating
   side gaps), with the brand at the left and the links and call to action
   at the right of --wrap-wide. Sticky. */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--ink-bar);color:var(--on-dark);
  transition:box-shadow var(--d2) var(--ease);
}
.header-inner{
  max-width:var(--wrap-wide);margin-inline:auto;padding-inline:var(--gutter);
  height:var(--header-h);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s6);
}
/* On scroll: a soft shadow anchors the bar. */
.site-header.is-scrolled{box-shadow:var(--shadow-bar)}
/* Keep keyboard focus visible on dark bars; dropdowns keep the light-surface ring. */
.site-header{--ring:var(--on-dark)}
.site-header .menu{--ring:var(--ink)}
/* Entrance: the bar slides down once on load. */
@media (prefers-reduced-motion:no-preference){
  html.js .site-header{animation:header-drop .5s var(--ease) both}
}
@keyframes header-drop{from{transform:translateY(-100%)}to{transform:none}}

.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img,.mobile-menu-head img{height:26px;width:auto}

.primary-nav{position:relative;display:flex;justify-content:flex-end;align-items:center;gap:var(--s2)}
.nav-link{
  display:inline-flex;align-items:center;gap:var(--s2);height:40px;padding:0 var(--s3);border-radius:var(--r-ctl);
  font-size:var(--fs-sm);font-weight:500;color:var(--on-dark);white-space:nowrap;position:relative;
  transition:color var(--d1) var(--ease),background var(--d1) var(--ease);
}
.nav-link:hover{background:var(--fill-dark)}
/* A panel opened by keyboard or tap, with no pointer on it, marks its button the same way. */
.nav-item.is-open:not(:hover)>.nav-link{background:var(--fill-dark)}
/* Hover highlight that glides from link to link. main.js adds and places it (pointer only);
   until then, and on touch screens, each link fades its own fill (the rule above). */
.nav-glide{
  position:absolute;top:0;left:0;height:100%;border-radius:var(--r-ctl);background:var(--fill-dark);pointer-events:none;
  opacity:0;transition:opacity var(--d1) var(--ease);
}
/* It moves only while it shows, so it fades in where the pointer enters. */
.nav-glide.is-on{opacity:1;transition:opacity var(--d1) var(--ease),transform var(--d2) var(--ease),width var(--d2) var(--ease)}
@media (hover:hover){
  .primary-nav.has-glide .nav-link:hover{background:transparent}
}
/* Current page: gold label with a gold underline that draws itself in. */
.nav-link[aria-current="page"],.nav-item.is-current>.nav-link{color:var(--gold)}
.nav-link[aria-current="page"]::after,.nav-item.is-current>.nav-link::after{
  content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:5px;height:2px;background:var(--gold);border-radius:2px;transform-origin:left;
}
@media (prefers-reduced-motion:no-preference){
  html.js .nav-link[aria-current="page"]::after,html.js .nav-item.is-current>.nav-link::after{animation:nav-rule var(--d3) var(--ease) var(--d2) both}
}
@keyframes nav-rule{from{transform:scaleX(0)}to{transform:none}}

/* dropdown panel: opens on click or keyboard (main.js sets .is-open and aria-expanded),
   or on hover for pointer users. Not on focus alone, so Tab can move past it.
   --menu-in is 0 while a panel is closed and 1 while it shows. The panel, its rows and the
   chevron all read their state from it, so the two rules below alone decide what "showing" is. */
.nav-item{position:relative;--menu-in:0;--menu-vis:hidden}
.nav-item.is-open{--menu-in:1;--menu-vis:visible}
@media (hover:hover){
  /* .is-dismissed: Escape hid it while the pointer is still over it (main.js) */
  .nav-item.has-menu:hover:not(.is-dismissed){--menu-in:1;--menu-vis:visible}
}
.nav-link .chev{width:14px;height:14px;opacity:.7;transform:rotate(calc(var(--menu-in) * 180deg));transition:transform var(--d2) var(--ease)}
/* The panel fades and settles down from just under the bar; it leaves faster than it arrives. */
.menu{
  position:absolute;top:calc(100% + var(--s2));left:0;min-width:300px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-3);
  padding:var(--s2);display:grid;gap:2px;transform-origin:top left;
  opacity:var(--menu-in);visibility:var(--menu-vis);
  transform:translateY(calc((var(--menu-in) - 1) * var(--s2))) scale(calc(.96 + var(--menu-in) * .04));
  transition:opacity var(--d1) var(--ease),transform var(--d2) var(--ease),visibility 0s linear calc((1 - var(--menu-in)) * var(--d2));
}
/* The last panel hangs from its button's right edge, so it stays inside the page. */
.nav-item:last-child>.menu{left:auto;right:0;transform-origin:top right}
/* Bridge the visual gap so crossing from the button to its panel keeps :hover. */
.menu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:calc(var(--s2) + 1px)}
/* Rows follow the panel in, one after another (--i is the row's place in line); together on the way out. */
:is(.menu,.mobile-menu-body)>*{
  --row-delay:calc(var(--menu-in) * var(--i,0) * var(--row-step));
  opacity:var(--menu-in);transform:translateY(calc((1 - var(--menu-in)) * var(--row-rise)));
}
:is(.menu,.mobile-menu-body)>:nth-child(2){--i:1}
:is(.menu,.mobile-menu-body)>:nth-child(3){--i:2}
:is(.menu,.mobile-menu-body)>:nth-child(4){--i:3}
:is(.menu,.mobile-menu-body)>:nth-child(5){--i:4}
:is(.menu,.mobile-menu-body)>:nth-child(6){--i:5}
.menu>*{--row-step:.03s;--row-rise:var(--s2);transition:opacity var(--d2) var(--ease) var(--row-delay),transform var(--d2) var(--ease) var(--row-delay),background var(--d1) var(--ease)}
.menu a{display:grid;gap:2px;padding:var(--row-compact) var(--s3);border-radius:var(--r-ctl)}
.menu a:hover,.menu a[aria-current="page"]{background:var(--bg-2)}
.menu a .t{font-weight:600;font-size:var(--fs-sm);color:var(--ink)}
.menu a .ic{width:14px;height:14px;margin-left:var(--s1);vertical-align:-1px;opacity:.6}
.menu a .d{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.4}
.menu .menu-foot{margin:var(--s2) calc(var(--s2) * -1) calc(var(--s2) * -1);padding:var(--row-compact) calc(var(--s2) + var(--s3));border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-3)}
.menu .menu-foot a{display:inline;padding:0;border-radius:0}
.menu .menu-foot a:hover{background:none}

.header-actions{display:flex;align-items:center;gap:var(--s3);justify-self:end}
/* phones and tablets: the links fold into a labeled Menu button */
.menu-toggle{
  display:none;align-items:center;gap:var(--s2);height:44px;padding:0 var(--s3) 0 var(--s4);
  border:1px solid var(--line-dark);border-radius:var(--r-ctl);color:var(--on-dark);font-size:var(--fs-sm);font-weight:600;
  transition:background var(--d1) var(--ease);
}
.menu-toggle:hover{background:var(--fill-dark)}
.menu-toggle svg{width:20px;height:20px}

/* ---------- mobile menu ---------- */
/* A full-screen sheet. It uses --menu-in like the dropdowns: the sheet covers the page quickly
   and its groups rise into place one after another. */
.mobile-menu{
  position:fixed;inset:0;z-index:var(--z-menu);background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;
  --menu-in:0;opacity:0;visibility:hidden;
  transition:opacity var(--d1) var(--ease),visibility 0s linear var(--d1);
}
.mobile-menu.is-open{--menu-in:1;opacity:1;visibility:visible;transition-delay:0s}
.mobile-menu-body>*{--row-step:.04s;--row-rise:var(--s4);transition:opacity var(--d3) var(--ease) var(--row-delay),transform var(--d3) var(--ease) var(--row-delay)}
/* Keep Close visible while the menu's links scroll underneath. */
.mobile-menu-head{position:sticky;top:0;z-index:var(--z-header);background:var(--bg);display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding-inline:var(--gutter);border-bottom:1px solid var(--line);flex:0 0 auto}
.close-btn{width:44px;height:44px;border-radius:var(--r-ctl);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:background var(--d1) var(--ease)}
.close-btn:hover{background:var(--bg-3)}
.close-btn svg{width:24px;height:24px}
.mobile-menu-body{padding:var(--s6) var(--gutter) var(--s8);display:grid;gap:var(--s6)}
.mobile-group{display:grid;gap:2px}
.mobile-group .label{padding:0 0 var(--s2)}
.mobile-group a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:1.2rem;font-weight:500;color:var(--ink)}
.mobile-group a.big{font-family:var(--font-display);font-size:1.6rem;font-weight:var(--fw-display)}
.mobile-group a .ic{width:18px;height:18px;color:var(--ink-3)}
.mobile-group a[aria-current="page"],.mobile-group a.is-current{color:var(--gold-text)}
.mobile-menu .mobile-cta{display:grid;gap:var(--s3)}
.mobile-menu .mobile-cta .btn{width:100%}
.mobile-foot{display:grid;gap:var(--s3);justify-items:start}
.mobile-menu .mobile-contact{color:var(--ink-3);font-size:var(--fs-sm)}

/* ---------- buttons ---------- */
/* Flat and crisp: solid fills, a defining 1.5px edge, a small lift on hover.
   No shadows, no gradients, no 3D. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:48px;padding:0 20px;border-radius:var(--r-ctl);
  font-size:var(--fs-sm);font-weight:600;line-height:1;white-space:nowrap;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform var(--d1) var(--ease),background var(--d1) var(--ease),border-color var(--d1) var(--ease),color var(--d1) var(--ease),box-shadow var(--d1) var(--ease);
}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.06s}
/* Gold primary: flat gold, ink edge picks up on hover for a hard, crisp look. */
.btn-gold{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-2);border-color:var(--ink)}
/* Ink solid. */
.btn-ink{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-ink:hover{background:var(--ink-hover);border-color:var(--ink-hover)}
/* Line: a real ink outline that inverts to solid ink on hover. Flat, sharp. */
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-lg{height:56px;padding:0 28px;font-size:1rem}
.btn-sm{height:40px;padding:0 var(--s4);font-size:.875rem}

/* text link with a nudging arrow */
.link-arrow{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600;color:var(--ink);font-size:var(--fs-sm)}
.link-arrow .ic{width:18px;height:18px;transition:transform var(--d1) var(--ease)}
.link-arrow:hover .ic{transform:translateX(4px)}
.link-arrow:hover{color:var(--gold-text)}

/* ---------- region finder ---------- */
.finder{
  display:flex;align-items:center;gap:6px;width:100%;max-width:560px;
  background:var(--surface);border:1px solid var(--ink-3);border-radius:var(--r-ctl);padding:6px 6px 6px 14px;
  transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease);
}
.finder:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--gold-soft);outline:2px solid transparent;outline-offset:2px}
.finder .ic{color:var(--ink-3)}
.finder input{flex:1;min-width:0;height:44px;border:0;background:transparent;font-size:var(--fs-body);color:var(--ink);outline:none}
.finder input::placeholder{color:var(--ink-3)}
.finder input:focus-visible{outline:none}
/* no off-palette blue clear button in Chromium and Safari; Escape still clears the field */
.finder input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.finder .btn{height:44px}

/* ---------- photos ---------- */
.photo{position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg-3)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--photo-ring);pointer-events:none}
a .photo img{transition:transform var(--d3) var(--ease)}
a:hover .photo img{transform:scale(1.03)}

/* ---------- ruled blocks: a top rule, a title, muted text ---------- */
/* 1px rule for steps, archives and lists of items; 3px gold rule for the two headline choices
   (.path, .pillar). Grids live with each block type in page.css. */
:is(.path,.pillar,.step,.archive>div,.elective){padding-top:var(--s5);border-top:1px solid var(--line-2)}
:is(.path,.pillar){border-top:3px solid var(--gold)}
:is(.path,.pillar) h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-title);margin-bottom:var(--s3)}
:is(.path,.step,.archive>div,.elective) p{color:var(--ink-2);font-size:var(--fs-sm)}

/* ---------- ruled rows: fact lists, region lists, FAQ ---------- */
/* One rule above the list, one under each row. Row padding comes from the density
   scale in tokens.css: --row-compact, --row, --row-roomy. */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s8);border-top:1px solid var(--line)}
.facts.cols-1{grid-template-columns:1fr}
.facts.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts>div{padding:var(--row-roomy) 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:600;font-size:var(--fs-body);margin-bottom:var(--s1)}
.facts dd{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55;max-width:var(--measure)}

/* ---------- numbers ---------- */
/* Four figures in a row (.cols-3 for three), two per row on tablets and phones. */
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s6);border-top:1px solid var(--line);padding-top:var(--s6)}
.numbers.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.numbers .n,.numbers .l{display:block}
.numbers .n{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-stat);line-height:1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.numbers .l{margin-top:var(--s3);color:var(--ink-2);font-size:var(--fs-sm);max-width:24ch;text-wrap:balance}
/* Numbers directly under a page hero: the hero's bottom rule is enough. */
.page-hero+.section-sm>.wrap>.numbers:first-child{border-top:0;padding-top:0}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s6) var(--s5)}
.people.large{grid-template-columns:repeat(4,minmax(0,1fr))}
.person .face{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--gold-soft);display:grid;place-items:center;margin-bottom:var(--s3)}
.person .face::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--photo-ring);pointer-events:none}
.person .face img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.person .face .initials{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);color:var(--gold-text)}
.person .name{font-weight:600;font-size:1rem;line-height:1.3}
.person .role{color:var(--ink-3);font-size:var(--fs-xs);margin-top:2px;line-height:1.4}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--row) 0;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);font-weight:600;font-size:var(--fs-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{position:relative;flex:0 0 20px;width:20px;height:20px}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%;translate:-50% -50%;transition:transform var(--d2) var(--ease)}
.faq summary .plus::before{width:14px;height:2px}
.faq summary .plus::after{width:2px;height:14px}
.faq details[open] summary .plus::after{transform:rotate(90deg)}
.faq .body{padding:0 0 var(--s5);color:var(--ink-2);max-width:var(--measure)}

/* ---------- university logo wall ---------- */
/* Static, wrapped and centred by default (no JS, reduced motion). main.js adds .is-moving to
   scroll it sideways, plus a Pause/Play button (.marquee-controls) so it can be stopped. */
.marquee{--marquee-gap:clamp(3rem,2rem + 4vw,6rem);position:relative;padding:var(--s3) 0}
.marquee-track{display:block}
.marquee ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s6) var(--s7);max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.marquee ul[aria-hidden="true"]{display:none}
/* Each list repeats its logos once (aria-hidden) so one half of the moving track is wider than
   any screen; the still wall shows each logo once. */
.marquee:not(.is-moving) li[aria-hidden="true"]{display:none}
.marquee li{flex:0 0 auto}
.marquee img{height:clamp(28px,24px + 1vw,40px);width:auto;max-width:clamp(120px,11vw,168px);object-fit:contain;
  filter:grayscale(1) opacity(.55);transition:filter var(--d2) var(--ease)}
.marquee li:hover img{filter:grayscale(0) opacity(1)}
.marquee.is-moving{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee.is-moving .marquee-track{display:flex;align-items:center;gap:var(--marquee-gap);width:max-content;animation:marquee 64s linear infinite;will-change:transform}
.marquee.is-moving ul{flex-wrap:nowrap;gap:var(--marquee-gap);flex:0 0 auto;max-width:none;margin:0;padding-inline:0}
.marquee.is-moving ul[aria-hidden="true"]{display:flex}
.marquee.is-moving:hover .marquee-track,.marquee.is-paused .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - var(--marquee-gap) / 2))}}
.marquee-controls{display:flex;justify-content:flex-end;margin-top:var(--s2)}
/* the same Pause/Play button stops the home hero film (.hero-toggle, recolored in home.css) */
.marquee-toggle,.hero-toggle{display:inline-flex;align-items:center;gap:var(--s2);min-height:36px;padding:0 var(--s3);border-radius:var(--r-ctl);font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);transition:color var(--d1) var(--ease),background var(--d1) var(--ease)}
.marquee-toggle:hover{color:var(--ink);background:var(--bg-3)}
.marquee-toggle .ic,.hero-toggle .ic{width:14px;height:14px}

/* ---------- two paths (regions page: no region nearby) ---------- */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.path p{margin-bottom:var(--s4);max-width:40ch}

/* ---------- region list: two orderly columns of rows ---------- */
.region-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s8);border-top:1px solid var(--line)}
.region-list a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding:var(--row) 0;border-bottom:1px solid var(--line);color:var(--ink)}
.region-list .rn{min-width:0;font-weight:600;font-size:var(--fs-body);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.18em;transition:text-decoration-color var(--d1) var(--ease)}
.region-list a:is(:hover,:focus-visible) .rn{text-decoration-color:var(--gold)}
/* The meta shrinks and wraps before the region name does. */
.region-list .rm{flex:0 0 auto;color:var(--ink-3);font-size:var(--fs-xs);text-align:right;white-space:nowrap}
.no-region{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s6);margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)}
.no-region p{color:var(--ink-2);margin:0}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:var(--s5)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.6}

/* ---------- panels: callout, contact card, sponsor wall ---------- */
:is(.callout,.contact-card,.sponsor-wall){padding:var(--s6);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.callout{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap}
.callout h2,.callout h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-title);line-height:1.15}
.callout p{color:var(--ink-2);margin-top:var(--s2)}

/* ---------- footer ---------- */
/* Full-width dark footer, content contained (matches the header). */
.site-footer{background:var(--ink-bar);color:var(--on-dark);--ring:var(--on-dark)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s7);padding-block:var(--sec-sm)}
.footer-brand img{height:20px;width:auto;margin-bottom:var(--s5)}
.footer-brand p{color:var(--on-dark-2);font-size:var(--fs-sm);max-width:34ch}
.footer-brand .email{display:inline-block;max-width:100%;margin-top:var(--s5);font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.15rem,1rem + .8vw,1.5rem);overflow-wrap:anywhere}
.footer-brand .footer-message{margin-top:var(--s3)}
.site-footer .link{color:var(--on-dark)}
.site-footer .link:hover{text-decoration-color:var(--on-dark)}
.footer-col h2{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-sm);color:var(--on-dark);margin-bottom:var(--s4)}
.footer-col nav{display:grid;gap:var(--s2)}
.footer-col a{color:var(--on-dark-2);font-size:var(--fs-sm);transition:color var(--d1) var(--ease)}
.footer-col a:hover{color:var(--on-dark)}
.footer-col a .ic{width:13px;height:13px;margin-left:var(--s1);opacity:.6;vertical-align:-1px}
.footer-bottom{border-top:1px solid var(--line-dark);padding-block:var(--s5);display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--on-dark-2)}
.social{display:flex;gap:var(--s2)}
.social a{display:inline-flex;align-items:center;justify-content:center;width:var(--s7);height:var(--s7);border:1px solid var(--line-2);border-radius:var(--r-ctl);color:var(--ink);transition:background var(--d1) var(--ease),color var(--d1) var(--ease)}
.social a:hover{background:var(--bg-3);color:var(--ink)}
.social svg{width:var(--s5);height:var(--s5);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.site-footer .social a{color:var(--on-dark);background:var(--fill-dark);border-color:var(--line-dark)}
.site-footer .social a:hover{background:var(--fill-dark);color:var(--on-dark)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .header-inner{grid-template-columns:auto 1fr}
  .primary-nav{display:none}
  .menu-toggle{display:inline-flex}
  .footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .people.large{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .brand img,.mobile-menu-head img{height:22px}
  .facts,.facts.cols-3,.numbers.cols-3{grid-template-columns:1fr}
  .finder{flex-wrap:wrap;padding:var(--row-compact)}
  .finder input{flex:1 1 100%;height:40px}
  .finder .btn{flex:1 1 100%}
  .finder .ic{display:none}
  :is(.callout,.contact-card,.sponsor-wall){padding:var(--s5)}
}
@media (max-width:900px){
  .region-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .paths{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .header-actions .btn{display:none}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)}
  /* Programs runs down the left; Get involved and Organization stack on the right. */
  .footer-col:nth-child(2){grid-row:span 2}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}