/* UWRCC public website. One stylesheet, no external requests, no inline styles anywhere.
   Tokens come from the approved design concept (docs/design-concept/styles.css).
   Every colour, size, space and time used below is a token from :root. Changes from the concept, for
   standard 05 (WCAG 2.2 AA): the focus ring is dark teal on light surfaces and white on the photograph
   hero (the concept's gold ring on white is about 2:1), and no text is smaller than 15px.
   Motion is gentle (200 to 600 ms), uses only opacity and transform so nothing moves the layout, and
   is switched off under prefers-reduced-motion. */

/* Fonts: self-hosted WOFF2, SIL Open Font License 1.1 (see public/fonts/LICENSES.md). */
@font-face{font-family:"Public Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/public-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/public-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/public-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bitter";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/bitter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bitter";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/bitter-latin-700-normal.woff2) format("woff2")}

:root{
  /* colour */
  --volta:#0E3B43; --volta-2:#14505A; --savanna:#2F6B3F; --gold:#E3A62C; --gold-hover:#F0B93F; --laterite:#8A3A1E;
  --stone:#EEF1EC; --ink:#16221F; --muted:#4A5A55; --line:#CBD3CC; --white:#fff; --note-bg:#FFF6DD;
  --on-dark:#D8E6E3; --on-dark-muted:#B8D0CD; --link-on-dark:#F6DFA8; --line-on-dark:#2B6068; --edge-on-dark:#7FA3A8;
  /* the volta colour as three numbers, so a layer can be see-through: rgb(var(--volta-rgb) / .5) */
  --volta-rgb:14 59 67;
  /* The dark layer over the hero photographs. Strong where the text is, softer on the right. Chosen by
     measurement: white text on this layer over a pure white slide reaches 5.7 to 1 (4.5 is the minimum). */
  --scrim-strong:.75; --scrim-soft:.45; --caption-alpha:.9;
  /* focus ring: dark on light surfaces, gold on dark ones, white on the photograph hero (set again below) */
  --focus:var(--volta);
  /* type: two families, three weights each at most */
  --f-head:"Bitter",Georgia,"Times New Roman",serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --step--1:.9375rem; --step-0:1.0625rem; --step-1:1.2rem; --step-2:clamp(1.5rem,2.8vw,2rem); --step-3:clamp(1.8rem,3.6vw,2.5rem); --step-4:clamp(2rem,4.6vw,3.2rem); --step-5:clamp(2.6rem,6vw,3.6rem);
  /* space scale */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2.5rem; --s-7:3.5rem;
  --wrap:1120px; --measure:68ch; --touch:2.75rem;
  /* motion: three interface durations, all between 200 and 600 ms, and one easing */
  --t-fast:220ms; --t-base:320ms; --t-slow:560ms; --ease:cubic-bezier(.2,.6,.2,1);
  /* the hero cross-fade is its own, longer time: one photograph dissolving into another reads as a cut when it is quick */
  --t-fade:800ms;
  --shadow:0 8px 20px rgb(var(--volta-rgb) / .16);
  /* The pause and play button over the photographs: the brand colour, see-through. White on it reaches 3.5 to 1 even over a white slide. */
  --toggle-alpha:.6; --toggle-hover-alpha:.85;
  /* The sticky header has a fixed height at each width, so nothing moves when it sticks. site.js replaces
     --header-size with the measured height. --header-size feeds scroll-padding-top, so a link target or a
     focused element is never hidden behind the header (WCAG 2.2, focus not obscured). */
  --header-h:4.25rem; --header-size:calc(var(--header-h) + 4px);
  --hero-h:min(70vh,46rem);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-size) + var(--s-4))}
body{margin:0;font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;color:var(--ink);background:var(--white)}
img{max-width:100%;height:auto;display:block}
main:focus{outline:none}
a{color:var(--laterite);text-underline-offset:.18em}
a:hover{color:var(--volta)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.on-dark,.hero,footer.site{--focus:var(--gold)}
.hero--slider{--focus:var(--white)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:var(--s-3) var(--s-4);z-index:200;font-weight:700}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}

h1,h2,h3{font-family:var(--f-head);line-height:1.2;margin:0 0 .6em;color:var(--volta)}
h1{font-size:var(--step-4);font-weight:700}
h2{font-size:var(--step-2);font-weight:700}
h3{font-size:var(--step-1);font-weight:600}
p{margin:0 0 1em;max-width:var(--measure)}
ul,ol{margin:0 0 1em}

/* header: one bar that stays at the top of the screen */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:4px solid var(--gold);transition:box-shadow var(--t-fast) var(--ease)}
.site-header.is-stuck{box-shadow:var(--shadow)}
.site-header__bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:var(--s-3);min-width:0;text-decoration:none;color:var(--volta)}
.brand__logo{width:44px;height:44px;flex:none;object-fit:contain}
.brand__text strong{display:block;font-family:var(--f-head);font-size:1.1rem;line-height:1.15}
.brand__text span{display:block;font-size:var(--step--1);line-height:1.3;color:var(--muted)}

/* navigation */
nav.main ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-1)}
nav.main a{display:flex;align-items:center;min-height:var(--touch);padding:.5rem .8rem;color:var(--volta);text-decoration:none;font-weight:600;font-size:var(--step--1);box-shadow:inset 0 -3px 0 transparent;transition:background-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
nav.main a:hover{background:var(--stone);color:var(--volta)}
nav.main a[aria-current="page"]{background:var(--stone);box-shadow:inset 0 -3px 0 var(--volta)}
.menu-btn{display:none;align-items:center;font:inherit;font-weight:600;background:var(--white);color:var(--volta);border:2px solid var(--volta);padding:.4rem 1rem;min-height:var(--touch);cursor:pointer;transition:background-color var(--t-fast) var(--ease)}
.menu-btn:hover{background:var(--stone)}

/* buttons */
.btns{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}
.btn{display:inline-block;font:inherit;font-weight:700;padding:.8rem 1.3rem;min-height:var(--touch);text-decoration:none;border:2px solid var(--gold);cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-hover);color:var(--ink)}
.btn-line{background:transparent;color:var(--white);border-color:var(--edge-on-dark)}
.btn-line:hover{background:var(--volta-2);color:var(--white)}
.btn-ink{background:var(--volta);color:var(--white);border-color:var(--volta)}
.btn-ink:hover{background:var(--volta-2);color:var(--white)}
.btn-outline{background:var(--white);color:var(--volta);border-color:var(--volta)}
.btn-outline:hover{background:var(--stone);color:var(--volta)}

/* hero: a stage that holds the headline, with the photographs behind it */
.hero{position:relative;isolation:isolate;background:var(--volta);color:var(--white)}
.hero__stage{position:relative;display:flex;align-items:center;min-height:var(--hero-h);padding:var(--s-7) 0 var(--s-7);overflow:hidden}
.hero__stage>.wrap{position:relative;z-index:3;width:100%}
.hero__text{max-width:min(40rem,58%)}
.hero h1{color:var(--white);max-width:18ch}
.hero .lede{font-size:var(--step-1);max-width:52ch;color:var(--on-dark)}
.hero--static .hero__stage{min-height:26rem}
/* A row of buildings along the bottom edge. Decorative; the colour is the gold token written into the image. */
.skyline{position:absolute;left:0;right:0;bottom:0;height:34px;background-repeat:repeat-x;background-position:left bottom;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='34' viewBox='0 0 72 34'%3E%3Cg fill='%23E3A62C'%3E%3Crect x='6' y='6' width='14' height='28'/%3E%3Crect x='2' y='13' width='22' height='2'/%3E%3Crect x='2' y='22' width='22' height='2'/%3E%3Crect x='9' y='2' width='8' height='4'/%3E%3Crect x='32' y='14' width='10' height='20'/%3E%3Crect x='29' y='20' width='16' height='2'/%3E%3Crect x='34' y='10' width='6' height='4'/%3E%3Crect x='54' y='10' width='8' height='24'/%3E%3Crect x='51' y='17' width='14' height='2'/%3E%3Crect x='51' y='26' width='14' height='2'/%3E%3Crect x='56' y='6' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E")}

/* hero with photographs: real img elements that always fill the whole width of the hero (object-fit cover), under one fixed dark layer */
.hero--slider .lede{color:var(--white)}
.hero--slider .btn-line{border-color:var(--white)}
.hero--slider .hero__stage{padding-bottom:5rem}
.hero__carousel{position:absolute;inset:0;pointer-events:none}
.hero__slides,.hero__scrim{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;margin:0}
.hero__image{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t-fade) var(--ease)}
/* The picture that is leaving stays fully visible underneath while the new one fades in on top, so there is no dip to the brand colour. */
.hero__slide.is-previous .hero__image{opacity:1}
.hero__slide.is-current .hero__image{opacity:1;z-index:1}
.hero__scrim{z-index:2;pointer-events:none;background:linear-gradient(90deg,rgb(var(--volta-rgb) / var(--scrim-strong)) 0%,rgb(var(--volta-rgb) / var(--scrim-strong)) 62%,rgb(var(--volta-rgb) / var(--scrim-soft)) 100%)}
.hero__caption{position:absolute;z-index:3;left:max(1.25rem,calc((100% - var(--wrap)) / 2 + 1.25rem));bottom:var(--s-4);max-width:min(24rem,36%);padding:.4rem .75rem;background:rgb(var(--volta-rgb) / var(--caption-alpha));color:var(--white);font-size:var(--step--1);opacity:0;transition:opacity var(--t-base) var(--ease)}
.hero__slide.is-current .hero__caption{opacity:1}
/* One small round pause and play button in the bottom right corner. The circle is the touch size (44 px), the glyph is 20 px. */
.hero__toggle{position:absolute;z-index:4;right:var(--s-4);bottom:var(--s-4);pointer-events:auto;display:flex;align-items:center;justify-content:center;width:var(--touch);height:var(--touch);padding:0;border:0;border-radius:50%;background:rgb(var(--volta-rgb) / var(--toggle-alpha));color:var(--white);cursor:pointer;transition:background-color var(--t-fast) var(--ease)}
.hero__toggle:hover{background:rgb(var(--volta-rgb) / var(--toggle-hover-alpha))}
/* A two-tone ring: white outside a dark inner ring, so it shows on a bright sky as well as on a dark one. */
.hero__toggle:focus-visible{outline:3px solid var(--white);outline-offset:3px;box-shadow:0 0 0 3px var(--volta)}
.hero__glyph{display:block}
.hero__toggle .hero__glyph--play{display:none}
.hero__toggle.is-paused .hero__glyph--pause{display:none}
.hero__toggle.is-paused .hero__glyph--play{display:block}
/* Position dots at the bottom centre. They are not buttons and take no pointer or keyboard input. */
.hero__dots{position:absolute;z-index:4;left:0;right:0;bottom:calc(var(--s-4) + (var(--touch) - .75rem) / 2);display:flex;justify-content:center;gap:var(--s-2);pointer-events:none}
.hero__dot{width:.75rem;height:.75rem;border:2px solid var(--white);border-radius:50%;transition:background-color var(--t-base) var(--ease)}
.hero__dot.is-current{background:var(--white)}

/* sections */
section.block{padding:3.2rem 0}
section.alt{background:var(--stone)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5)}
.sec-head h2{margin:0}
.sec-head--stacked{display:block}
.sec-head--stacked p{margin:var(--s-2) 0 0;color:var(--muted)}
.page-head{background:var(--stone);border-bottom:1px solid var(--line);padding:2.2rem 0 1.6rem}
.page-head h1{font-size:var(--step-3);margin:0 0 .4rem}
.crumbs{font-size:var(--step--1);color:var(--muted);margin-bottom:var(--s-3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3)}
.crumbs li{display:flex;align-items:center;gap:var(--s-3)}
.crumbs li+li::before{content:"";width:.4em;height:.4em;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg)}
.crumbs a{color:var(--muted)}
.two{display:grid;grid-template-columns:2fr 1fr;gap:var(--s-6)}
.two>:only-child{grid-column:1/-1}
.meta{font-size:var(--step--1);color:var(--muted);margin-bottom:var(--s-2);display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4)}
.panel{background:var(--stone);border:1px solid var(--line);padding:1.2rem;align-self:start}
.panel h2{font-size:var(--step-1)}
.panel__links{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}

/* stats band: full width, brand colour, three equal figures (one column on a phone). The heading is visually hidden, so the band is only as tall as the figures need. */
.stats{background:var(--volta);color:var(--white);padding:var(--s-5) 0}
.stats__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s-5)}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2)}
.stat__icon{color:var(--gold)}
.stat__number{margin:0;font-family:var(--f-head);font-size:var(--step-4);font-weight:700;line-height:1.1;color:var(--white)}
.stat__count{display:inline-block;text-align:left;font-variant-numeric:tabular-nums}
.stat__label{margin:0;color:var(--on-dark)}

/* text written in Markdown */
.prose{max-width:var(--measure)}
.prose>:first-child{margin-top:0}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin-bottom:.4em}
.prose blockquote{margin:1.2rem 0;background:var(--note-bg);border-left:6px solid var(--gold);padding:var(--s-4) 1.2rem}
.prose blockquote p:last-child{margin-bottom:0}
.prose table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.6rem;text-align:left;vertical-align:top}
.prose th{background:var(--volta);color:var(--white)}
.prose--section{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line)}
.prose code{font-size:.95em}

/* news cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{background:var(--white);border:1px solid var(--line);border-top:6px solid var(--gold);display:flex;flex-direction:column;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.card:hover,.card:focus-within{transform:translateY(-3px);box-shadow:var(--shadow)}
.card__body{padding:1.1rem 1.2rem 1.3rem}
.card__title{font-size:var(--step-1);margin:0 0 var(--s-3)}
.card__title a{color:var(--volta);text-decoration:none}
.card__title a:hover{text-decoration:underline}
.card p:last-child{margin-bottom:0}
.pager{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-6)}
.pager__link{display:inline-block;padding:.7rem 1.1rem;min-height:var(--touch);border:2px solid var(--volta);font-weight:700;text-decoration:none;color:var(--volta);background:var(--white);transition:background-color var(--t-fast) var(--ease)}
a.pager__link:hover{background:var(--stone)}
.pager__link.is-off{border-color:var(--line);color:var(--muted)}

/* people */
.people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.people--top{grid-template-columns:repeat(2,minmax(0,18rem))}
.people-heading{margin-top:var(--s-6)}
.person{background:var(--white);border:1px solid var(--line);padding:1.2rem;display:grid;gap:var(--s-3);align-content:start}
.person__photo{width:100%;max-width:240px;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--stone);border:1px solid var(--line)}
/* A plain head-and-shoulders shape for a person with no portrait. The grey is the line token written into the image. */
.person__photo--empty{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='38' r='16' fill='%23CBD3CC'/%3E%3Cpath d='M18 92c2-22 16-34 32-34s30 12 32 34z' fill='%23CBD3CC'/%3E%3C/svg%3E");background-size:cover}
.person__name{margin:0;font-size:var(--step-1)}
.person__title{margin:0;color:var(--muted)}

/* assemblies on the home page: a grid of logo tiles, centred so the last row never looks left over */
.logos{--cols:2;--logo-gap:var(--s-3);list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--logo-gap)}
.logo-tile{flex:0 0 calc((100% - (var(--cols) - 1) * var(--logo-gap)) / var(--cols));display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);padding:var(--s-4) var(--s-3);background:var(--white);border:1px solid var(--line)}
.logo-tile__logo{width:72px;height:72px;object-fit:contain}
.logo-tile__logo--empty{background:var(--stone);border:1px solid var(--line)}
.logo-tile__name{margin:0;font-size:var(--step--1);font-weight:600;line-height:1.3}
.logo-tile__type{margin:0;font-size:var(--step--1);color:var(--muted)}
.logos-cta{display:flex;justify-content:center;margin-top:var(--s-5)}

/* assemblies page: the directory with website addresses */
.mmda{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.mmda--directory{grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
.mmda__item{display:flex;gap:var(--s-3);align-items:center;background:var(--white);border:1px solid var(--line);padding:.8rem}
.mmda--directory .mmda__item{align-items:flex-start;padding:var(--s-4)}
.mmda__logo{width:64px;height:64px;flex:none;object-fit:contain;background:var(--white)}
.mmda__logo--empty{background:var(--stone);border:1px solid var(--line)}
.mmda__name{font-size:var(--step-0);line-height:1.25;margin:0 0 var(--s-1)}
.mmda__type{margin:0;color:var(--muted);font-size:var(--step--1)}
.mmda__site{margin:var(--s-2) 0 0;font-size:var(--step--1);overflow-wrap:anywhere}
.mmda__site-label{color:var(--muted)}

/* contact details */
.details{margin:0;display:grid;gap:var(--s-4)}
.details dt{font-size:var(--step--1);color:var(--muted)}
.details dd{margin:0;font-weight:600}

/* error pages */
.error__code{color:var(--muted);font-weight:700;margin-bottom:var(--s-2)}

/* footer */
footer.site{background:var(--volta);color:var(--on-dark);position:relative;padding:var(--s-6) 0 var(--s-4)}
footer.site h2{color:var(--white);font-size:var(--step-1)}
footer.site a{color:var(--link-on-dark)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
/* The footer repeats the header lockup: logo on the left, name and description on the right. The small top margin lines the logo up with the top of the column headings beside it. */
footer.site .lockup{display:flex;align-items:flex-start;gap:var(--s-3);margin-top:.3rem}
footer.site .lockup__badge{flex:none;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;background:var(--white);border-radius:50%}
footer.site .lockup__logo{width:38px;height:38px;object-fit:contain}
footer.site .lockup__name{margin:0 0 var(--s-2);font-family:var(--f-head);font-size:var(--step-1);font-weight:700;line-height:1.2;color:var(--white)}
footer.site .lockup__text p:last-child{margin-bottom:0}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
/* Every contact fact, one short line each, with the label muted so the value reads first. */
footer.site .footer__contact{gap:.15rem;font-size:var(--step--1)}
footer.site .footer__label{color:var(--on-dark-muted)}
/* Two columns, so seven links take four lines. */
footer.site .footer__links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4)}
footer.site .fine{border-top:1px solid var(--line-on-dark);margin:var(--s-5) 0 0;padding-top:var(--s-3);font-size:var(--step--1);color:var(--on-dark-muted);max-width:none}

/* Scroll reveal. public/js/reveal.js puts .is-pending on an element that starts below the screen and
   swaps it for .is-revealed when it comes into view. Without the script nothing is ever pending, so
   every element is visible. Only opacity and transform change, so nothing moves the layout. */
[data-reveal].is-pending{opacity:0;transform:translateY(14px)}
[data-reveal].is-revealed{transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),box-shadow var(--t-fast) var(--ease)}

@media (max-width:1023px){
  /* The brand and the links no longer fit on one line, so the links go on a second line. */
  :root{--header-h:6.75rem}
  .site-header__bar{flex-wrap:wrap;gap:0 var(--s-5);padding-top:var(--s-2)}
  nav.main{width:100%}
}
@media (min-width:720px){
  /* Three equal columns, with a thin rule between them. */
  .stats__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;gap:0}
  .stat{padding:0 var(--s-4)}
  .stat+.stat{border-left:1px solid var(--line-on-dark)}
}
@media (max-width:900px){
  .hero__stage{min-height:clamp(26rem,70vh,38rem)}
  .hero__text{max-width:none}
  /* The text can reach the right edge now, so the dark layer is even all the way across. */
  .hero__scrim{background:rgb(var(--volta-rgb) / var(--scrim-strong))}
  .hero__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero--static .hero__stage{min-height:0}
  .two{grid-template-columns:1fr}
  .cards,.people{grid-template-columns:1fr 1fr}
  .people--top{grid-template-columns:repeat(2,minmax(0,18rem))}
  .mmda{grid-template-columns:repeat(2,1fr)}
  footer.site .cols{grid-template-columns:1fr}
}
@media (min-width:480px){.logos{--cols:3}}
@media (min-width:720px){.logos{--cols:4}}
@media (min-width:1040px){.logos{--cols:6}}
@media (max-width:640px){
  :root{--header-h:3.75rem}
  .site-header.has-menu{position:sticky}
  .site-header__bar{flex-wrap:wrap}
  .site-header.has-menu .site-header__bar{flex-wrap:nowrap;gap:var(--s-3);padding-top:0}
  .brand__logo{width:36px;height:36px}
  .brand__text strong{font-size:1rem}
  .brand__text span{display:none}
  /* site.js adds .has-menu to the header and .is-collapsible to the nav. Without it the links stay in view and the header does not stick. */
  .site-header:not(.has-menu){position:static}
  .menu-btn:not([hidden]){display:inline-flex}
  nav.main.is-collapsible{width:auto}
  nav.main.is-collapsible ul{display:none}
  nav.main.is-collapsible.open ul{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:var(--s-2) 1.25rem var(--s-3);background:var(--white);border-bottom:4px solid var(--gold);box-shadow:var(--shadow);max-height:calc(100vh - var(--header-size) - var(--s-4));overflow-y:auto}
  .cards,.people,.mmda,.mmda--directory{grid-template-columns:1fr}
  .pager{flex-direction:column}
  .hero__stage{padding-top:var(--s-6)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  [data-reveal].is-pending{opacity:1;transform:none}
  .card:hover,.card:focus-within,.btn:hover{transform:none}
}
@media print{
  /* A section that has not faded in yet is still printed. */
  [data-reveal].is-pending{opacity:1;transform:none}
}